Abdulaziz Yusuf

هل سبق لكم قضاء أسابيع من العمل المضني على بناء موقع إلكتروني وبعد نشره على الإنترنت بدا بطيئًا جدًا ولا يحقق أفضل أداء، لاشك أن بطء الموثع أمر محبط وله أثر سلبي على تجربة مستخدمي الموقع ويحول دون تحقيق الأهداف المرجوة منه ويعطي انطباعًا سيئًا عن احترافية العمل وجودة الخدمات، فضلًا عن كونه يؤثر سلبًا على ترتيب الموقع في نتائج البحث. إن مشكلة بطء الموقع مشكلة شائعة يواجهها العديد من مطوري المواقع، لكن لا داعي للقلق ففي هذا المقال سنستعرض لكم عدة تقنيات وحلول فعالة من شأنها تسريع وتحسين مواقعكم الإلكترونية، وتوفير تجربة مستخدم أفضل، وتسريع أوقات تحميل صفحات الموقع. آلية تحميل صفحة الويب قبل استعرض التقنيات والحلول، نحتاج لفهم طريقة تحميل صفحات الموقع، فعندما يطلب المتصفح صفحة ويب ما، سيتلقى أولاً مستند HTML، ثم يُحلّل هذا المستند، وعندما يعثر المحلل parser الموجود في المتصفح على ملف خارجي مرتبط بهذه الصفحة مثل ملف تنسيقات CSS أو كود جافا سكريبت أو رابط لصورة، سيرسل طلبًا جديدًا للحصول على هذا الملف. على سبيل المثال، لنفرض أن لدينا موقع ويب بالهيكلية التالية: . ├── index.html ├── package.json └── statics ├── css │ ├── footer.css │ ├── header.css │ └── main.css ├── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.png │ ├── 4.png │ └── 5.jpg └── js ├── foo.js ├── bar.js └── index.js لعرض ملف index.html لهذا الموقع بشكل كامل، سيحتاج المتصفح لإرسال 12 طلب على النحو التالي: طلب واحد لتحميل ملف HTML ثلاثة طلبات لتحميل ملفات CSS ثلاثة طلبات لتحميل ملفات JavaScript خمسة طلبات لتحميل الصور تستغرق هذه العملية وقتًا كبيرًا، وتستهلك الكثير من الموارد ما يتسبب بدوره في بطء سرعة تحميل الموقع وضعف أدائه. لحسن الحظ، هناك عدة طرق من شأنها تعزيز سرعة تحميل هذا الموقع، مثل تحسين الصور، دمج الملفات الثابتة كملفات CSS أو ملفات JavaScript المتعددة في ملف واحد لتقليل عدد الطلبات التي يرسلها المتصفح للخادم، واستخدام التخزين المؤقت caching، والعديد من التقنيات الأخرى التي سنشرحها لكم بالتفصيل في الفقرات التالية، ولنبدأ بالصور. أولًا: تحسين الصور تعد الصور من أهم العوامل التي تؤثر في سرعة تحميل مواقع الويب، وإليكم عدة نصائح وتقنيات لتحسينها. استخدام تنسيقات الصور الحديثة من الأفضل استخدام التنسيقات الحديثة للصور مثل WebP و AVIF التي توفر تحسينات كبيرة في ضغط الصورة بدلًا من استخدام التنسيقات التقليدية JPG و PNG، فهذا يساعد في تقليل حجم الملفات بشكل كبير دون التأثير على الجودة. هناك العديد من الأدوات والمواقع السحابية المخصصة لتحويل الصور لهذه التنسيقات، ولكن المشكلة في هذه الأدوات أنها تتطلب رفع الملفات لمعالجتها، وبعض خدماتها غير مجانية. سنستخدم في حالتنا أداة تسمى FFmpeg لتحسين الصور، حيث تتيح لنا هذه الأداة تحويل الصور محليًا باستخدام أمر بسيط. سنحتاج لتثبيت الأداة على حاسوبنا، في حال استخدام نظام التشغيل Mac سنثبتها من خلال مدير الحزم Homebrew من خلال الأمر التالي: brew install ffmpeg وفي حال استخدام نظام التشغيل ويندوز فيمكننا تثبيتها مباشرة من موقعها الرسمي أو تثبيتها باستخدام Winget كالتالي: winget install --id=Gyan.FFmpeg -e بعد الانتهاء من عملية التثبيت، سنفتح الطرفية terminal وننتقل إلى دليل صور موقعنا باستخدام الأمر التالي: cd /path/to/images ثم نحول الصور للتنسيق webp باستخدام الأمر التالي: for file in *.{jpg,png}; do ffmpeg -i "$file" -c:v libwebp -q:v 80 "$(basename "$file" .${file##*.}).webp"; done وفي حال استخدام سطر الأوامر CMD في ويندوز، نستخدم الأمر التالي: for %i in (*.jpg *.png) do ffmpeg -i "%i" -c:v libwebp -q:v 80 "%~ni.webp" أما إذا كنا نستخدم PowerShell في ويندوز، فسنستخدم الأمر التالي: Get-ChildItem -Path . | Where-Object { $_.Extension -match '\.jpg$|\.png$' } | ForEach-Object { ffmpeg -i $_.FullName -c:v libwebp -q:v 80 ($_.BaseName + ".webp") } قد نحتاج إلى تعديل الأمر ليناسب حالتنا الخاصة: {jpg,png} لتحويل صيغ الصور jpg و png في المجلد c:v libwebp- يحدد للأداة FFmpeg ما هو الترميز المستخدم لصيغة WebP. لا حاجة لتغيير هذا الخيار q:v 80- يحدد مستوى ضغط للصور، يمكن تعديل القيمة بين 0 لأدنى جودة وأعلى ضغط، و 100 لأعلى جودة ودون ضغط يمكن تجربة مستويات ضغط مختلفة حتى نصل لأفضل ضغط دون التأثير على جودة الصورة، لنلاحظ مثلًا الصورة التالية بتنسيقين مختلفين هما JPG وWebP. حجم ملف JPG هنا هو 2.7 ميجابايت، بينما حجم ملف WebP هو 176 كيلوبايت بالرغم أن كلا الصورتين لهما نفس الأبعاد 4000 × 6000 بكسل ونفس الوضوح لكن تنسيق WebP تمكن من ضغط الصورة بشكل أكبر، لذا يُعد خياراً مثالياً للاستخدام على الويب وسيساعدنا في زيادرة سرعة تحميل الصفحات. لا يقتصر استخدام FFmpeg على ضغط الصور بل يمكنها التعامل مع مهام عديدة متعلقة بمعالجة الصوت والفيديو والصور، لهذا تعتمد عليها العديد من المواقع والأدوات الشهيرة عالميًا مثل يوتيوب YouTube وتويتش Twitch ومشغل الوسائط VLC، لمزيد من التفاصيل حول التعامل مع هذه الأداة يمكن الرجوع إلى توثيقها الرسمي. استخدام أحجام صور مختلفة لأحجام الشاشات المختلفة عندما نصمم موقع ويب، سيُعرَض هذا الموقع على أجهزة مختلفة كالهواتف والأجهزة اللوحية وأجهزة الحواسيب ولكل من هذه الأجهزة حجم شاشة مختلف، لذا من الضروري عرض صور متناسبة مع كل حجم شاشة لتحسين الأداء والتصميم، فإذا استخدمنا صورًا كبيرة جدًا سيكون تحميلها بطيئًا على أجهزة الهواتف، وإذا استخدمنا صورًا صغيرة جدًا فستبدو غير واضحة على الشاشات الكبيرة. يمكننا حل هذه المشكلة بإنشاء إصدارات مختلفة من نفس الصورة بحجم صغير small، ومتوسط medium، وكبير large واستخدام الحجم المناسب لكل شاشة. تساعدنا أداة FFmpeg التي استخدمناها سابقًا على تحقيق ذلك، بعد إنتاج إصدارات الصور المختلفة علينا تضمين الصور في صفحة الويب باستخدام العنصر <picture> بدلاً من <img>. حيث يسمح العنصر <picture> بتحديد مصادر متعددة للصورة نفسها، ويتيح للمتصفح اختيار الصورة الأنسب تلقائيًا حسب حجم الشاشة. <picture> <source media="(max-width: 600px)" srcset="small.webp" /> <source media="(max-width: 1200px)" srcset="medium.webp" /> <img src="large.webp" alt="example image" /> </picture> إذا كان عرض الشاشة 600 بكسل أو أقل كحالة هاتف محمول ستُعرَض الصورة small.webp، وإذا كان العرض بين 601 بكسل و 1200 بكسل كحالة جهاز لوحي ستُعرَض الصورة medium.webp، وإذا لم يتحقق أي من الشروط السابقة أي كان عرض الشاشة أكبر من أكبر من 1200 بكسل فستُعرَض الصورة الصورة الافتراضية large.webp. التحميل الكسول للصور Lazy Load إذا لم يكن ظهور الصورة ضروريًا عند تحميل الصفحة مباشرة، فمن الأفضل تحميل هذه الصور بشكل كسول Lazy Load، أي تحميلها فقط عندما تصبح مرئية على شاشة المستخدم، فهذا سيساعد أيضًا في تسريع تحميل الصفحة. <picture> <source media="(max-width: 600px)" srcset="small.webp" /> <source media="(max-width: 1200px)" srcset="medium.webp" /> <img src="large.webp" alt="example image" loading="lazy" /> </picture> لاحظ أننا جعلنا الصورة الكبيرة large.webp تُحمّل بشكل كسول من خلال ضبط الخاصية loading بالقيمة "lazy" في الوسم <img> لضمان أن المتصفح سيحمّل هذه الصورة فقط عندما يمرر المستخدم لأسفل ويصل لموقع هذه الصورة. لكن إذا كانت الصورة جزءًا أساسيًا من تصميم الصفحة وكنا نحتاج لعرضها فورًا عند تحميل الصفحة فمن الأفضل ضبط الخاصية loading بالقيمة "eager". لجعل المتصفح يحمّلها على الفور دون انتظار. <picture> <source media="(max-width: 600px)" srcset="small.webp" /> <source media="(max-width: 1200px)" srcset="medium.webp" /> <img src="large.webp" alt="example image" loading="eager" /> </picture> بعد أن استعرضنا طرق نختلفة لتحسين سرعة الموقع من خلال تحسين الصور، لنشرح تقنيات تحسين الملفات الثابتة للموقع. ثانيًا: تحسين ملفات CSS وجافا سكريبت نلاحظ أن موقعنا يحتوي على ثلاثة ملفات CSS و ثلاثة ملفات جافا سكريبت. لا شك أن تقسيم الكود خلال التطوير إلى أقسام مختلفة خلال مرحلة التطوير من الممارسات الجيدة لتنظيم الملفات وإدارتها بطريقة أفضل، لكن الأمر مختلف في بيئة الإنتاج فمن الأفضل تقليل عدد الملفات الخارجية لتقليل طلبات الخادم وتحسين تجربة المستخدم، ومن الجيد أيضًا تقليل حجم هذه الملفات قدر المستطاع. دمج ملفات CSS وتقليل حجمها تتوفر عدة أدوات لتحقيق هذا الأمر مثل PostCSS فهو معالج CSS يمكنه دمج ملفات التنسيقات، وتقليل حجم كودها. كما يمكن تعزيزه بإضافات plugins مساعدة لتحسين الكود وحل مشكلات التوافق مع المتصفحات. غالبًا ما يكون PostCSS جزءًا من أدوات تسمى مُجمِّعات الويب web bundlers تستخدم لتجميع ملفات الموقع المختلفة وسنتحدث عنها بالتفصيل لاحقًا، ومع ذلك، يمكننا استخدام PostCSS بشكل مستقل وتثبيته في مشروعنا باستخدام مدير الحزم npm كالتالي: npm install postcss postcss-cli postcss-import postcss-preset-env cssnano --save-dev بعدها علينا إنشاء ملف إعدادات PostCSS باسم postcss.config.js في الدليل الجذر لمشروعنا، ونحدد فيه ما هي الإضافات plugins التي نريد استخدامها لتحسين الكود. module.exports = { plugins: [ require("postcss-import"), require("postcss-preset-env"), require("cssnano"), ], }; استخدمنا هنا الإضافات التالية: postcss-import لدمج ملفات CSS متعددة داخل ملف واحد postcss-preset-env لاستخدام خصائص CSS الحديثة والتأكد من توافقها مع المتصفحات cssnano لتقليص حجم ملفات CSS بعدها ننشئ ملف CSS رئيسي باسم styles.css كي يستورد جميع التنسيقات الأخرى الضرورية: ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js └── statics ├── css │ ├── footer.css │ ├── header.css │ ├── main.css │ └── styles.css ├── images └── js يستورد الملف styles.css كافة ملفات التنسيقات كالتالي: @import "./header.css"; @import "./main.css"; @import "./footer.css"; بعدها ندمج الملفات معًا في هذا الملف، ونضعه في المجلد dist/ ونصغّر حجمه باستخدام الأمر التالي: npx postcss statics/css/styles.css -o dist/styles.css وبهذا سيكون الملف جاهزًا للاستخدام في الموقع، كل ما علينا هو استيراد الملف dist/styles.css الناتج في مستند HTML كما يلي: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="dist/styles.css" /> </head> <body> . . . </body> </html> كما يمكننا بدلاً من تجميع كافة ملفات CSS في ملف واحد، تقسيمها إلى نوعين من الملفات: الأول يتضمن تنسيقات CSS الأساسية، والثاني يتضمن CSS غير الأساسية. ثم نُحمّل تنسيقات CSS الأساسية أولًا في القسم head لكونها ضرورية لتنسيق الصفحة بشكل صحيح فورًا. وتأجيل تحميل تنسيقات CSS الثانوية للقسم body بعد تحميل كامل محتوى الصفحة، وبهذا نساعد على تحسين سرعة الصفحة. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="dist/critical.css" /> </head> <body> . . . <link rel="stylesheet" href="dist/non-critical.css" /> </body> </html> مُجمِّعات الويب web bundlers أصبحت تطبيقات الويب اليوم أكثر تعقيدًا. لذا لا يمكننا الاعتماد فقط على معالج CSS بسيط لتحسين كل شيء. ويفضل الاعتماد على مجمعات حزم الويب المتكاملة، حيث توفر لنا عدة أدوات مساعدة لتحسين جميع أجزاء الموقع من ملفات CSS وملفات جافا سكريبت وصور، كما أنها تساعدنا على تنظيم وإدارة كل الملفات التي يحتاجها الموقع من مكان واحد. لنتعرف على أهم هذه المجمعات. الأداة Webpack يعد Webpack أداة مشهورة حاصلة على أكثر من 63 ألف نجمة على GitHub، فهو يساعدنا على تجميع ملفات مختلفة من أنواع متعددة مثل JavaScript و CSS في ملفات مُجمعّة يمكن للمتصفح تنفيذها بسرعة، كما يوفر لنا أدوات لمعالجة الصور. يمكن تثبيت Webpack في مشروعنا كما يلي: npm install webpack webpack-cli --save-dev لنفترض أن لدينا هيكل المشروع التالي، ولنوضح بشكل مبسط كيفية عمل Webpack في تجميع ملفات جافا سكريبت لهذا المشروع: . ├── dist ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js # إعدادات PostCSS ├── statics │ ├── css │ ├── images │ └── js │ ├── bar.js │ ├── foo.js │ └── index.js └── webpack.config.js # إعدادات Webpack لدينا ثلاث ملفات جافا سكريبت في مشروعنا وهي: الملف foo.js: export default function foo() { console.log("foo"); } والملف bar.js: export default function bar() { console.log("bar"); } والملف index.js: import foo from "./foo.js"; import bar from "./bar.js"; foo(); bar(); console.log("Hello, World!"); في هذه الحالة، سيكون الملف index.js هو نقطة الدخول لمشروعنا، أي سنحمّل هذا الملف أولاً ومن ثم نتبعه بتحميل الملفات المستوردة داخله. ولإنشاء ملف إعدادات Webpack، علينا إنشاء ملف webpack.config.js في الدليل الجذر لموقعنا، ونتأكد من أن خيار entry يشير إلى ملف index.js. سيكون ملف الإعدادات webpack.config.js كما يلي: const path = require("path"); module.exports = { entry: "./statics/js/index.js", output: { filename: "bundle.js", path: path.resolve(__dirname, "dist"), }, }; الآن عند تنفيذ Webpack، سيبدأ بالبحث عن الملف index.js، ثم عن الملفين foo.js و bar.js ويجمع كل الأكواد في ملف واحد يسمى bundle.js. بعدها نستخدم الأمر التالي لتشغيل Webpack : npx webpack --config webpack.config.js سيؤدي تنفيذ هذا الأمر لإنشاء ملف bundle.js يحتوي النسخة المُصغّرة من جميع أكواد جافا سكريبت. (() => { "use strict"; console.log("foo"), console.log("bar"), console.log("Hello, World!"); })(); يعالج Webpack ملفات جافا سكريبت فقط، ولكن يمكننا توسيع إمكانياته بتثبيت أدوات تحميل loaders مختلفة. على سبيل المثال، عند تحميل css-loader في Webpack سنتمكن من معالجة ملفات CSS، وعند تحميل postcss-loader ستوافق Webpack مع معالج PostCSS الذي استخدمناه سابقًا. إضافة إلى Webpack، هناك العديد من أدوات تجميع الويب الشهيرة الأخرى نذكر منها Parcel و Esbuild و Rollup وكل منها يمتلك ميزات وخصائص فريدة. يعود اختيار الأداة المناسبة لاحتياجاتنا ومتطلبات مشروعنا. الأداة Vite بالحديث عن أدوات تطوير الواجهة الأمامية، لا يمكننا تجاهل الحديث عن Vite فهي أداة بناء واجهات أمامية سريع مصممة لتحسين وتسريع تطوير التطبيقات، وهي سريعة وموثوقة وتستحق التجربة. تعمل Vite بشكل مختلف عن الأدوات التقليدية مثل Webpack وتمكننا من بعض التحديات التي قد تواجهنا عند بناء تطبيقات كبيرة ومعقدة. فمع تزايد تعقيد تطبيقات الويب، قد نجد أن التطبيق الواحد يحتوي على مئات أو حتى آلاف الوحدات وسيستغرق Webpack وقتًا طويلاً لمعالجتها قبل بدء عمل الخادم. تحل Vite هذه المشكلة من خلال دعم تقنية استبدال الوحدة أثناء التشغيل Hot Module Replacement أو HMR اختصارًا، التي تسمح للمطورين بتطبيق التحديثات فورًا في المتصفح دون الحاجة إلى تحديث الصفحة بالكامل. كما تتبع Vite نهجًا فريدًا في تجميع الملفات فبدلاً من تجميع كل شيء معًا، فإنها تنشئ حزمًا أصغر لكل وحدة فردية، ثم تقدمها للمتصفح حسب الحاجة. تسمح هذه الطريقة بتحميل الصفحات بسرعة أكبر. الخاصيتان async و defer أصبحت ملفات جافا سكريبت اليوم أكثر تعقيدًا وأكبر حجمًا، وغالبًا ما تكون أكبر من ملف HTML نفسه، وهي تؤخر عرض المحتوى لكونها تستغرق وقتًا أطول لتحميلها ومعالجتها، حتى عندما نعمل على دمجها وتصغير حجمها. فعندما يفتح المتصفح صفحة ويب، فإنه يبدأ افتراضيًا بقراءة ملف HTML سطرًا سطرًا. وعندما يصل إلى كود أو ملف جافا سكريبت سيتوقف عن قراءة الصفحة مؤقتًا ليحمّل هذا الكود وينفذه، ثم يعود لاستكمال قراءة باقي الصفحة بعد الانتهاء منه أي أن تحميل أكواد جافا سكريبت يجري على التسلسل كما توضح الصورة التالية: لحل هذه المشكلة، يمكننا استخدام الخاصيتين defer أو async لتحميل ملفات جافا سكريبت على التوازي، أي دون توقف المتصفح عن تحليل باقي محتويات الصفحة. <script src="path/to/script.js" async></script> <script src="path/to/script.js" defer></script> كلا الخيارين يوجهان المتصفح لتحميل كود جافا سكريبت في الخلفية. ويكمن الاختلاف بينهما هو أن الخاصية async تخبر المتصفح بتنفيذ هذا الكود فور تحميله، بينما تخبر الخاصية defer المتصفح بأن ينتظر حتى يكتمل تحليل الصفحة قبل تنفيذه. في حال وجود عدة أكواد جافا سكريبت في صفحة الويب مع استخدام الخاصية defer فإنها ستحمّل جميع هذه الأكواد في الخلفية، ثم ستنفّذ بالترتيب الذي ظهرت به في الكود، أما إذا استخدمنا الخاصية async فسينفّذ السكربت الذي انتهى تحميله أولاً بغض النظر عن ترتيبه. بشكل عام، إذا كان السكريبت يعتمد على تحميل شجرة DOM بالكامل، فيجب استخدام الخاصية defer، التي تنفذ الملف بعد اكتمال التحليل، وكذلك إذا كان السكربت يعتمد على سكربتات أخرى يجب تنفيذها بالترتيب فسنستخدم الخاصيةdefer أيضًا لأنها تنفذ السكربتات بنفس ترتيب ظهورها في الصفحة. أما إذا كان السكريبت يحتاج إلى التنفيذ في وقت أسرع حتى لو لم تكتمل الصفحة بالكامل، فيجب استخدام الخاصية async. بهذا نكون قد ناقشنا عدة طرق لتسريع موقع الويب من خلال تحسين الملفات الثابتة، لنشرح تقنيات أخرى لتحسين سرعة الموقع من خلال تلميحات الموارد. ثالثًا: تعزيز أداء صفحة الويب باستخدام تلميحات الموارد تسهم تلميحات الموارد Resource hints في تسريع صفحة الويب من خلال إخبار المتصفح بكيفية التعامل مع ملفات الموارد التي نحتاجها فورًا في الصفحة الحالية والموارد التي قد نحتاجها لاحقًا. ففي بعض الأحيان، نحتاج لتنزيل مورد معين في أسرع وقت ممكن، وقد نحتاج لتنزيل مورد آخر في وقت متأخر، لذا يمكننا تنزيله في الخلفية. تسمح لنا تلميحات الموارد بإخبار المتصفح بكيفية معالجة هذه الموارد وذلك باستخدام وسم <link> الذي نضعه في قسم الترويسة head من ملف HTML، هناك العديد من تلميحات الموراد المفيدة والتي سنشرحها تاليًا. التلميح dns-prefetch يساهم التلميح dns-prefetch في تحسين أداء الصفحة عن طريق إجراء عملية بحث مسبق لنظام أسماء النطاقات DNS لمورد خارجي قد يحتاجه المتصفح في المستقبل. فعندما يستخدم المتصفح هذا التلميح سيبدأ في معالجة اسم النطاق ويحوله لعنوان IP مناسب في الخلفية، مما يسرع الاتصال بالخادم عند الحاجة إليه لاحقًا، لاحظ الكود التالي: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="dns-prefetch" href="https://style.example.com" /> </head> <body> . . . </body> </html> يوضح الكود أعلاه مثالًا على تلميح مورد من نوع dns-prefetch. فعندما يزور المتصفح موقعًا إلكترونيًا، فإنه يذهب أولاً إلى خادم DNS الذي يشبع دليل الهاتف على الإنترنت فهو يربط النطاقات بعناوين IP. يذهب المتصفح إلى خادم DNS مع النطاق، ثم يعيد خادم DNS عنوان IP المقابل، وعندها يمكن للمتصفح الاتصال بذلك العنوان ويطلق على هذه العملية اسم بحث DNS. من خلال تلميح المورد هنا سيعرف المتصفح بأن المستخدم قد يقوم ببعض الإجراءات التي ستتطلب منه البحث عن عنوان الـ IP الخاص بـالنطاق https://style.example.com. وبالنتيجة، يبدأ المتصفح في حل اسم النطاق في أقرب وقت ممكن ويخزن النتيجة محليًا. يسمح هذا التخزين المؤقت للمتصفح بسحب عنوان IP مباشرة من الذاكرة المؤقتة عندما يطلبه المستخدم. التلميح preconnect يستخدم التلميح preconnect لتحسين أداء تحميل الصفحة عن طريق إنشاء اتصال مسبق مع الخادم قبل أن يحتاج المتصفح إلى تحميل أي موارد من هذا الخادم. <link rel="preconnect" href="https://style.example.com" /> سيطلب التلميح preconnect من المتصفح الاتصال بالخادم المضيف ويسمى هذا الأمر مصافحة TCP وهي تجري بعد اكتمال بحث DNS. فمصافحة TCP هي عملية إنشاء اتصال بين المتصفح والخادم قبل إرسال أي بيانات وهي تطلب تبادل بعض المعلومات بين المتصفح والخادم، وتحدث مرة واحدة لكل خادم ولكنها قد تستغرق وقتًا طويلاً إذا كانت الشبكة بطيئة، وهنا يأتي دور preconnect الذي يتولى إتمام هذه المصافحة مبكرًا، مما يقلل الوقت الذي يستغرقة المتصفح لإنشاء الاتصال الفعلي عند الحاجة إلى الموارد لاحقًا. التلميح preload يخبر التلميح preload المتصفح بكيفية تحميل الموارد لصفحة الويب الحالية. <link rel="preload" href="path/to/script.js" as="script" /> تٌعطى الموارد المعرفة بـ href أولوية عالية وتُحمّل في أسرع وقت ممكن. كما يسمح تلميح preload بتحديد خاصية إضافية تسمى as كي نحدد نوع المورد ونوضح بأنه يتطلب ترويسات طلب request headers مختلفة أو سياسات أمان مختلفة. على سبيل المثال قد تحتاج الموارد من نوع script مثل أكواد جافا سكريبت لطريقة تعامل مختلف عن الموارد من نوع style مثل أكواد CSS أو الموارد من نوع image لضمان الأمان ومنع التعارضات. ولتحقيق أفضل تجربة مستخدم، يمكن تحديد الموارد الأساسية مثل تنسيقات CSS و أكواد جافا سكريبت الأساسية والخطوط والصور المهمة باستخدام التلميح preload لتحميلها بأولوية عالية عند التحميل الأولي للصفحة. التلميح prefetch <link rel="prefetch" href="path/to/style.css" as="style" /> يشبه التلميح prefetch التلميح preload، إلا أنه يحدد الموارد التي قد يحتاجها المستخدم لاحقًا، وبالتالي يعيّن المتصفح أولوية منخفضة لهذه الموارد، ويحمّلها بعد تحميل الصفحة، ستُخزّن الملفات المحملة في ذاكرة التخزين المؤقت cache وتسترجع عندما يطلبها المستخدم. التلميح prerender يخبر التلميح prerender المتصفح بتحميل الصفحة التالية وجميع الموارد المرتبطة بها، بالإضافة إلى عرضها في الخلفية، وعندما يطلب المستخدم تلك الصفحة يسحبها من الخلفية لعرضها فورًا. <link rel="prerender" href="next_page.html" /> رابعًا: استخدم شبكة توصيل المحتوى CDN شبكة توصيل المحتوى CDN هي مجموعة من الخوادم المنتشرة في جميع أنحاء العالم، تُخزّن نسخًا مؤقتة للموقع الإلكتروني، وعندما يطلب المستخدم صفحة ويب، عندها بدلاً من الاتصال بخادم الاستضافة الخاص بالموقع، ستنقل البيانات من أقرب خادم CDN إلى المستخدم. تساهم شبكة توصيل المحتوى CDN في تحسين سرعة تحميل الموقع الإلكتروني وتحسين تجربة المستخدم وتقليل تكاليف النطاق الترددي Bandwidth، حيث تُنقل البيانات من خادم CDN بدلاً من خادم الاستضافة، منا يساهم استخدام CDN في حماية خادم الموقع من الهجمات الأمنية DDoS ويعزز أمانه. هناك العديد من الشركات التي توفر خدمات CDN مثل CloudFlare و Amazon CloudFront و Google Cloud CDN، وتختلف عملية إعداد CDN حسب الشركة التي نختارها ويمكن الرجوع إلى الوثائق الرسمية لموفر الخدمة وإعدداها وفق ما يناسبنا. خامسًا: إعداد التخزين المؤقت Caching يمكننا إضافة لتخزين صفحات الويب الخاصة بنا باستخدام شبكة توصيل المحتوى CDN، مع الانتباه لجزئية تقريب المحتوى أكثر من المستخدمين من خلال التخزين المؤقت للموارد محليًا مثل ملفات الصور وملفات جافاسكريبت وملفاتCSS بحيث نصل إليها بسرعة أكبر ونسرع تحميل الموقع في الزيارات التالية له. كما يحتوي مستند HTML على قسم <head>، الذي يستخدم لتخزين البيانات الوصفية metadata للصفحة، يحتوي كل طلب HTTP واستجابة HTTP أيضًا على ترويسة header وهي جزء من البيانات التي ترسل مع كل طلب أو استجابة بين المتصفح والخادم. ويمكن استخدام الترويسة Cache-Control في HTTP لإخبار المتصفح بكيفية تخزين الموارد مؤقتًا. قد توجد طرق مختلفة لإضافة رؤوس HTTP مخصصة اعتمادًا على كيفية استضافة موقعنا الإلكتروني، على سبيل المثال إذا كنا نستخدم منصة سحابية لاستضافة موقعنا مثل AWS Amplify، فيمكن إضافة هذه الرؤوس المخصصة في ملف إعدادات التطبيق customHttp.yml لزيادة سرعة تحميل الصفحات. كل ما علينا هو الانتقال إلى إعدادات التطبيق App settings ثم اختيار الرؤوس المخصصة custom headers وتحرير الملف customHttp.yml ليشمل إعدادات التخزين المؤقت المناسبة على النحو التالي: customHeaders: - pattern: '**/*.js' headers: - key: Cache-Control value: 'public,max-age=31536000,s-maxage=86400,immutable' - pattern: '**/*.css' headers: - key: Cache-Control value: 'public,max-age=31536000,s-maxage=86400,immutable' . . . في هذا المثال سنخزن ملفات جافا سكريبت و CSS في الذاكرة المؤقتة لزيادة سرعة تحميل الموقع وفق التالي: تعني public أن الملف يمكن تخزينه في ذاكرة التخزين المؤقت العامة مثل شبكة توصيل المحتوى CDN يحدد max-age=31536000 المدة التي يمكن فيها تخزين الملف في ذاكرة التخزين المؤقت للمتصفح مقدرة بالثواني يحدد s-maxage=86400 المدة التي يمكن فيها تخزين الملف في ذاكرة التخزين المؤقت العامة مثل CDN مقدرة بالثواني تعني immutable أن محتوى الملف لن يتغير مع مرور الوقت فإذا كان لدينا ملف .htaccess في موقعنا، يمكن استخدام الأداة .htaccess Generator لإنشاء الكود المناسب بدلاً من كتابته يدويًا سادسًا: استخدام بدائل Google Analytics يمكن اللجوء إلى بدائل الجيدة مفتوحة المصدر لتحليلات جوجل Google Analytics والتي توفر أكواد تتبع أصغر بكثير مثل Plausible و Matomo و Fathom و Simple Analytics وغيرها. فعظم هذه الخيارات مفتوحة المصدر ويمكن استضافتها ذاتيًا. على سبيل المثال، يبلغ حجم كود Plausible كيلو بايت واحد فقط، بينما يبلغ حجم كود Google Analytics أكثر من 300 كيلو بايت. لكن وبالرغم من كون هذه الخيارات جيدة جدًا ومفتوحة المصدر، إلا أن Google Analytics قد يوفر بعض الميزات الفريدة التي لا تقدمها البدائل. لذا ننصحكم بتجربتها أولاً ومعرفة ما إذا كانت تلبي متطلباتكم بالفعل قبل الاعتماد عليها لتسريع الموقع. كما قد يختار الكثير من المطورين استخدام نظام إدارة محتوى احترافي مثل ووردبريس أو Wix عند بناء موقعهم الإلكتروني الأول وتتضمن هذه الأنظمة الكثير من الميزات غير الضرورية للموقع، فإذا كان كل ما نحتاجه هو بناء مدونة شخصية بسيطة أو معرض أعمال، فمن الأفضل استخدام مولد مواقع ثابتة مثل Hugo أو Jekyll بدلًا من الخيارات السابقة. ينشئ ووردبريس على سبيل المثال موقعًا ديناميكيًا متكاملًا يتضمن الواجهة الأمامية والخلفية وقاعدة البيانات وعندما يطلب المستخدم صفحة من هذا الموقع ستجلب الواجهة الخلفية البيانات اللازمة من قاعدة البيانات، وتُجمّعها في صفحة ويب، ثم ستعرض في الواجهة الأمامية للمستخدم. بينما لا يتطلب مولد المواقع الثابتة قاعدة بيانات، بل ينشئ ببساطة جميع صفحات الويب الثابتة خلال مرحلة البناء، وعندما يطلب المستخدم صفحة معينة ستعرض الصفحة الجاهزة مسبقًا على الواجهة الأمامية، لهذا يتطلب الموقع الثابت موارد أقل بكثير لاستضافته. لكن العيب في مولدات المواقع الثابتة هو أنها صعبة التعلم في البداية. فهي لا تحتوي على ميزات السحب والإفلات السهلة كتلك الموجودة في ووردبريس و Wix وتحتاج إلى امتلاك بعض المهارات البرمجية لتخصيص تصميم الموقع. الخاتمة بهذا نكون وصلنا لنهاية مقالنا الشامل الذي شرحنا فيه العديد من التقنيات والأدوات والطرق المساعدة في تحسين سرعة المواقع وتحسين أدائها. ننصح بتجربة هذه التقنيات والاستفادة منها في تطوير تطبيقات سريعة التحميل وتحقق تجربة مستخدم أفضل. وإذا كان لديكم نصائح أخرى مفيدة لتحسين أداء المواقع شاركونا إياها في قسم التعليقات أسفل المقال. ترجمة -وبتصرف- للمقال Top Website Optimization Tools in 2024 اقرأ أيضًا زيادة سرعة أداء المواقع باستخدام تقنية pre-fetching نصائح لتحسين أداء تطبيقات لارافيل كيفية استخدام شبكات توزيع المحتوى CDN لتحسين أداء مواقع ووردبريس مدخل إلى مُسرّع تطبيقات الويب Varnish Cache

نشرح في هذا المقال مفهوم GraphQL بالتفصيل وكيفية استخدامه تحسين أداء واجهة برمجة التطبيقات الخاصة بك، وتكتشف أبرز مزايا وعيوب استخدامه وتتمكن من تحديد فيما إذا كانت هي الأداة الأفضل لمشروع واجهة برمجة التطبيقات الخلفية الخاصة بك أم لا. فإذا كنت تفكر في تصميم واجهة برمجة تطبيقات خلفية ولديك فكرة مسبقة بواجهة برمجة التطبيقات REST فستكون على دراية أيضًا بأن تقنية REST ليست مناسبة للتطبيقات المعقدة وقد تواجهك بعض الصعوبات في التعامل معها لاسيما عند الحاجة إلى الإجابة على الأسئلة التالية: ما مقدار البيانات التي يجب أن تعيدها مع كل نقطة وصول؟ هل ستعيد نقطة الوصول نفس البيانات، سواء على الأجهزة المحمولة أو على أجهزة سطح المكتب؟ هل ترغب في إجراء تحديثات فورية في الوقت الفعلي إذا تغير شيء ما؟ لذا من الأفضل لك في هذه الحالة التعامل مع GraphQL. مشكلات استخدام معمارية REST المصطلح REST هو اختصار لعبارة Representational state transfer أي نقل الحالة التمثيلية، وهو أسلوب لتصميم واجهات برمجة التطبيقات APIs، تنظم نقاط الوصول endpoints في معمارية REST بالاعتماد على مجموعة من الموارد كالمستخدمين والتعليقات وغيرها بحيث تتيح لك كل نقطة الوصول إلى مجموعة معينة من البيانات أو تمكنك من إجراء عملية معينة عليها. وبالرغم من كون معمارية REST مستخدمة من فترة طويلة، ولا تزال مستخدمة حتى اليوم على نطاق واسع لكتابة واجهات برمجة التطبيقات، إلا أنها تعاني من مشكلة رئيسية وهي تحديد البيانات التي يتوجب إعادتها بالضبط بواسطة نقاط الوصول الخاصة بك. فقد تواجه حالة تستلزم منك على سبيل المثال عرض قائمة بالمستخدمين، وقائمة بأحدث تعليقات كتبها كل مستخدم من هؤلاء المستخدمين، بمعنى آخر، ستحتاج في هذه الحالة لجلب قائمة من الكيانات، وجلب قائمة أخرى مرتبطة بكل كيان، وهناك طريقتان لحل هذه المشكلة باستخدام REST سنوضحهما تاليًا. نمذجة نقاط الوصول بالاعتماد على الموارد إن وجود نقطة وصول واحدة لكل مورد أو مصدر بيانات يسهل على المطورين صيانة وتطوير الواجهة الخلفية، ولكنه يعقد الأمور من طرف العميل، فالعميل سيحتاج إلى إجراء طلبات متعددة لواجهة برمجة التطبيقات API لجلب البيانات المطلوبة. على سبيل المثال لجلب كافة المستخدمين والتعليقات الخاصة بكل مستخدم يمكن أن يكون لديك نقاط الوصول التالية: getUsers() نقطة وصول تعيد لنا قائمة بكافة المستخدمين getCommentsByUserId(userId: string)‎‎‎ نقطة وصول تعيد قائمة بالتعليقات المرتبطة بمعرف مستخدم محدد. لكن يمكن أن ينتج عن استخدام هذا الأسلوب مشكلة شائعة تعرف بمشكلة N + 1، حيث يحتاج العميل إلى استدعاء الخادم N + 1 مرة لجلب مجموعة واحدة من الموارد الأساسية، وجلب N مجموعة من الموارد الفرعية. يجلب الكود التالي قائمة المستخدمين، ثم يجلب التعليقات لكل مستخدم عن طريق استدعاءات HTTP إضافية. ومع أنه يعمل بشكل صحيح، فإنه يعاني من مشكلة الأداء، فاستدعاء التعليقات لكل مستخدم يتم بشكل متسلسل synchronous بدلاً من كونه متوازيًا parallel مما يتسبب في زمن انتظار طويل بسبب كل استدعاء منفصل. const getUserWithComments = async (): Promise<User[]> => { // fetch a list of users let users = await getUsers(); // new HTTP request for each user for(let i = 0; i < users.length; i++){ const user = users[i]; // loading comments from the server user.comments = await getCommentsByUserId(user.id); } return users; } نعم كما تتوقع، ستبطئ نقاط الوصول المعتمدة على الموارد من عملية عرض البيانات فتحميل كافة البيانات يستغرق وقتًا طويلًا، ويزيد الحمل على الخادم. إرجاع الشكل الدقيق للبيانات المطلوبة يمكن حل مشكلة زيادة حمل الخادم وبطء عرض البيانات بتنظيم نقاط الوصول بحيث تعيد البيانات الدقيقة التي يريد العميل التعامل معها بالضبط، بدل تحميل كافة البيانات. فقد يكون لديك نقطة وصول مثل ()getUsersWithComments تعيد المستخدمين مع تعليقاتهم من خلال استدعاء واحد فقط عبر بروتوكول HTTP. يتطلب هذا الأسلوب وجود صلة وثيقة بين العميل والخادم، فكلما احتجنا لإجراء تغيير ما في واجهة المستخدم من أجل عرض بيانات إضافية أو إزالة بيانات معينة، سيتعين على مطوري الواجهة الأمامية في هذه الحالة التواصل مع مطوري الواجهة الخلفية من جديد من أجل ضبط البيانات المعادة من نقطة الوصول المحددة. لكن التعامل بهذا الأسلوب صعب أيضًا، لاسيما في حال وجود عدة نقاط وصول تعيد كل منها أنواعًا مختلفة من البيانات، أو في حال وجود نقاط نهاية منفصلة مخصصة للهواتف المحمولة، وقد ينجم عنه وجود العديد من نقاط الوصول التي تعيد مجموعة من الكائنات، وعدم معرفة ما هي النقاط المستخدمة فعليًا. هل GraphQL خيار مناسب؟ في حال تفويض مسؤولية تحديد شكل البيانات المعادة إلى الخادم، سيصادف مطور الواجهة الأمامية واحدة من المشكلات السابقة في مرحلة ما من مراحل العمل على المشروع، وقد يصادف مشكلات إضافية عند استخدام معمارية REST مثل: الحاجة لإرسال بيانات أقل لمستخدمي الهواتف المحمولة الحاجة لوجود تواصل في الزمن الحقيقي بين الخادم والعميل لتحديث البيانات بشكل فوري نقص وجود وثائق واجهة برمجة التطبيقات API توضح كيفية استخدامها بشكل صحيح وبسبب وجود مثل هذه المشكلات عند التعامل مع معمارية REST ظهرت الحاجة لابتكار حلول أفضل مثل GraphQL ما هي GraphQL؟ GraphQL هي لغة استعلام توكل مسؤولية تحديد شكل البيانات المعادة من الخادم إلى جانب العميل، وتوفر للخادم مساحة للعمل playground، ووثائق لواجهات برمجة التطبيقات API الخاصة به، كما تتيح للعميل الاطلاع على جميع التوابع المتاحة القابلة للتنفيذ executable ، كما تمكنه من استخدام الاستعلامات للحصول على بيانات محددة، أو تعديل البيانات، كما توفر ميزة تسمى الاشتراكات subscriptions التي تسهل التواصل في الزمن الحقيقي. فعند استدعاء تابع من طرف الخادم، سيُضمَّن مع هذا الطلب هيكل بيانات جيسون JSON في حمولة الرسالة، وسيكون دور بيانات جيسون وصف كافة الحقول الخاصة بالكائن المطلوب إرجاعه، ويتوجب على الخادم أن يلبي الطلب ويعيد قيم الحقول المحددة ضمن هذا الطلب. بهذه الطريقة يحل GraphQL مشكلة معرفة ما هي البيانات التي يرغب العميل في استردادها ويحددها بدقة داخل الطلب الذي يُرسله إلى الخادم ويجلب له هذه البيانات بالضبط دون زيادة أو نقصان، إذَا يحدد العميل بدقة ما هي الحقول التي يريد الحصول عليها في طلب HTTP، ويسترجع هذه البيانات من الخادم فقط. العلاقات في نماذج GraphQL تُمثل النماذج في models في GraphQL العلاقات بين الكائنات، وتتيح لك الاستعلام عن البيانات المتشابكة بكفاءة عبر استعلام واحد. فعند تمكين العلاقات بين النماذج في GraphQL ستتضمن الاستعلامات معلومات عن العلاقات بين الكيانات وتمكنك من استرجاع كافة البيانات المطلوبة في طلب HTTP واحد ينتقل مرة واحدة ذهابًا وإيابًا. ما نقصده هنا بنمذجة العلاقة أنه إذا كان لدى كيان ما علاقة واحد إلى متعدد ‎‎‎1 إلى N‎‎‎‎ مع كيان آخر، فيمكن طلب جميع البيانات المرتبطة بكيان معين في طلب واحد فقط مرسل إلى الخادم، وبهذا يمكنك الحصول على كافة البيانات المطلوبة دون الحاجة لإجراء عدة طلبات، وهذا يجعل استخدام GraphQL مفيدًا للاستعلام عن البيانات بشكل فعال وبسيط، خاصة عندما يكون هناك علاقات معقدة بين الكائنات. المحللات Resolvers في GraphQL عندما ترسل من العميل إلى خادم GraphQL، يحتاج الخادم إلى طريقة لمعرفة كيفية جلب البيانات المطلوبة، وتستخدم GraphQL تقنية المحللات Resolvers وهي دوال أو وظائف تحدد طريقة استجابة الخادم لاستعلامات GraphQL وهي لبنة البناء الرئيسية التي تجعلنا نفكر في استخدام GrapQL في المقام الأول. فالمحللات Resolvers هي المسؤولة عن ملء وتعبئة البيانات لحقل واحد في نوع الكائن، تستدعى المحللات لكل حقل في استعلام GraphQL، وتكون مسؤولية المحلل تحديد الطريقة المناسبة للحصول على البيانات المطلوبة وإرجاعها بالصيغة الصحيحة بناءً على العلاقات بين حقول الكائنات. تحسن المحللات Resolvers تقنية GraphGL وتسمح لنا بإضافة حقول إضافية للكيانات إذا لم تكن هذه الحقول متواجدة في قاعدة البيانات ولكن يمكن حسابها على الخادم. لنفترض أن لدينا نموذج بيانات يحتوي على المستخدمين وتعليقاتهم، ولكن بعض المعلومات التي نحتاج إليها قد لا تكون مخزنة مباشرة في قاعدة البيانات، ويتعين حسابها على الخادم. على سبيل المثال، قد يكون لدينا في قاعدة البيانات جداول لكل من المستخدمين وتعليقاتهم لكن لا يوجد حقل مباشر في جدول المستخدمين يخزن عدد التعليقات التي كتبها كل مستخدم، في هذه الحالة، يمكن استخدام المحللات Resolvers لحساب عدد التعليقات عند الطلب. وقد نحتاج أيضًا إلى حقل يحتوي على تفاصيل مستخدم معين مثل عنوان المستخدم والذي قد لا يكون مخزنًا مباشرة في قاعدة البيانات وفي هذه الحالة يمكن استخدام محلل Resolver لجلب هذا العنوان من مصدر خارجي. إذا طورنا نظام GraphQL باستخدام إطار عمل NestJS على سبيل المثال، فيمكن في هذه الحالة تحديد الدوال المسؤولة عن حساب هذه المعلومات أو جلبها باستخدام دوال مسجلة على كمحللات Resolvers وتكمن فائدة المحللات في آلية تنفيذها، إذ لن تنفذ أي دالة مسجلة كمحلل Resolver حتى تستدعى في طلب GraphQL. يعرض الكود التالي جزء من تطبيق يستخدم GraphQL وإطار عمل NestJS. وهو يعبر عن جزءًا من مخطط قاعدة البيانات UML السابق ويتضمن تعريفًا لصنف باسم Movie ومحلل Resolver لحقل التعليقات MovieComment يحدد أن الحقل الذي سيعاد هو بيانات التعليقات عن الفيلم بالاعتماد على المعرف id الخاص بكل فيلم. @ObjectType() export class Movie { @Field(() => Int) id: number; @Field(() => String) createdAt: Date; @Field(() => String) updatedAt: Date; @Field(() => String, { nullable: false, description: "User's title to the movie", defaultValue: '', }) title: string; @Field(() => String, { nullable: true, description: "User's description to the movie", }) description: string; } @Resolver(() => Movie) export class MovieResolver { constructor(private movieCommentService: MovieCommentService) {} @ResolveField('movieComment', () => [MovieComment]) async getMovieComment(@Parent() movie: Movie) { const { id } = movie; return this.movieCommentService.getAllMovieCommetsByMovieId(id); } } ` تكمن فائدة هذا الكود في توفير واجهة GraphQL تتيح للعميل الحصول على بيانات الفيلم وتعليقاته بشكل فعال، وبهذا يمكن للعميل الاستعلام عن الفيلم والتعليقات حوله في نفس الاستعلام دون الحاجة لطلب استعلامات متعددة. يتطلب تحميل تعليقات كائن الفيلم عادة إجراء عملية استعلام مكلفة على قاعدة البيانات. أضف إلى ذلك فأنت لا تحتاج دائمًا إلى تحميل التعليقات الخاصة بالفيلم، وإنما تحتاج لتحميلها فقط عندما يطلبها المستخدم. لذا يفيد وضع المزخرف ResolveField@ قبل اسم الدالة في إطار العمل NestJS إلى تنفيذ المنطق الداخلي لهذه الدالة فقط عندما يطلب العميل بيانات لاسم الحقل movieComment. ملاحظة: يجب أن يوفر منشئ واجهة برمجة التطبيقات API في حال استخدام المحللات وصفًا لكافة الحقول التي توفرها هذه المحللات، لاسيما تلك التي تنفذ عمليات مكلفة بالنسبة للخادم، مثل الاستعلامات من قاعدة البيانات، كي لا يطلب المستخدمون حقولًا غير ضرورية دون داعٍ. فوائد استخدام GraphQL كما شرحنا سابقًا في حال استخدام واجهة برمجة تطبيقات REST API يكون السؤال الدائم ما هي البيانات التي ترجعها كل نقطة وصول؟ ويمكن توفير إجابة على هذا السؤال إما من خلال اختبار نقاط الوصول بواسطة أداة Postman التي تسمح بإنشاء طلبات HTTP مخصصة وإرسالها إلى خوادم الويب وتلقي الردود لاختبار الواجهات البرمجية، أو من خلال توفير إطار عمل Swagger لتوثيق كل ما يتعلق بالواجهات الخلفية للتطبيقات. لا تضمن لك هذه الحلول معرفة البيانات المعادة من قبل كل نقطة وصول، فقد تكون البيانات المعادة من نقاط النهاية غير معرفة وغير واضحة، وقد تختلف عن الوثائق أو التوقعات. يقدم استخدام GraphQL لك حلًا أفضل ويوفر تجربة تطوير محسنة والعديد من المميزات وأهمها: ميزة GraphQL Playground التي توفر بيئة تفاعلية لتجريب استعلامات GraphQL توفير مخطط مسبق التعريف Predefined schema إنشاء أنواع TypeScript تلقائيًا استنادًا إلى مخطط بيانات GraphQL التواصل في الزمن الحقيقي التكيف مع مختلف أنواع الأجهزة تنفيذ عدة استعلامات دفعة واحدة Batch query execution سنشرح تباعًا كل ميزة من هذه الميزات بالتفصيل، ولعل أهم مميزات GraphQL هي ميزة فصل التبعية dependency بين الخادم والعميل، حيث يتلقى العميل البيانات التي يطلبها في استعلام GraphQL المرسل للخادم فقط، ولا يتلقى أي بيانات غير مطلوبة، فحتى إن كان لدى الخادم هيكلية بيانات معقدة للغاية تتضمن أكثر من 60 خاصية يمكن الاستعلام عنها، فلن يتلقى العميل سوى قيم الحقول التي تضمنها استعلام GraphQL وهذا سيقلل كمية البيانات المرسلة ويزيد كفاءة وسرعة استجابة الطلبات. ميزة بيئة العمل التفاعلية في GraphQL توفر GraphQL ميزة البيئة التفاعلية Playground وهي بيئة تطوير متكاملة طورتها شركة Prisma لتوفر بيئة لتنفيذ وتجربة الاستعلامات بشكل فوري، كما توفر وثائق للواجهات البرمجية API لكافة الاستعلامات عن البيانات Queries وتعديلها Mutations واشتراكاتها Subscriptions. توفر هذه البيئة إمكانية فحص نوع البيانات التي يرجعها كل طلب، مما يسهل التأكد من صحة الاستجابة. كما يمكن اختبار وظائف الخادم مباشرة باستخدام واجهة GraphQL، مثل واجهة SpaceX مفتوحة المصدر مما يسهل تطوير التطبيقات التي تستخدم واجهات API ويوفر وثائق تعزز فهم كيفية استخدام API بشكل صحيح وكتابة الاستعلامات والاستفادة من البيانات المتاحة بالشكل الأمثل. المخطط مسبق التعريف Predefined Schema عند فحص أنواع بيانات GraphQL، قد تلاحظ أن بعض الحقول تتضمن علامة تعجب ! وهي بمثابة ضمان بأن الخادم يجب أن يوفر نوع البيانات الصحيح ولا يمكنه إرجاع قيمة خالية null لهذا الحقل. بإلقاء نظرة على الصورة المرفقة التي تستعلم عن حقول مثل User.id و User.createdAt، لن يرجع الخادم أبدًا قيمة null لهذه الحقول، وفي حال حدث هذا الأمر فستتلقى الخطأ التالي من عملية الاستعلام. { "errors": [ { "message": "Cannot return null for non-nullable field User.id.", "statusCode": 500 } ], "data": null } وعند استخدام علامة التعجب الخارجية مع المصفوفات ![ ] كما في المثال التالي: movieCommentsUserLeft: [MovieComment!]!، فهذا يعني أن واجهة برمجة التطبيقات API ستعيد دومًا قائمة من القيم، وقد تكون إحدى هذه القيم null لكن لن تكون القيمة النهاية المعادة null أبدًا. من ناحية أخرى، تدل علامة التعجب الداخلية مع المصفوفات مثل [MovieComment!] بأن العناصر الموجودة داخل القائمة ستكون دائمًا كائنات. ومن المستحيل أن تكون القيمة الخالية null جزءًا من القائمة وإذا حدث ذلك، فسيفشل الاستعلام بأكمله، ولن يعيد أي بيانات. توليد أنواع TypeScript من الفوائد الرئيسية لمخطط GraphQL تمكين المطورين من تحديد استعلامات GraphQL واستخدام المكتبات المفيدة، مثل مكتبة توليد الكود graphql-code-generator، التي تسمح بإنشاء أنواع TypeScript من المخطط من جانب الخادم. ويؤدي استخدام مكتبة توليد الكود إلى منع الكتابة اليدوية لواجهات TypeScript لجميع استجابات واجهة برمجة التطبيقات API، وإذا تغير المخطط من جانب الخادم، فيمكن إعادة إنشاء المخطط بالكامل باستخدام أمر واحد فقط. في الصورة أدناه، نرى مثالًا على هذه الميزة. فعلى اليسار، يوجد استعلام launchesPast الذي يتوقع إرجاع جزء يسمى LaunchLast. وعلى اليمين، نرى أنواع TypeScript التي أنشأتها المكتبة graphql-code-generator. فباستخدام الأجزاء GraphQL fragments، يمكننا إعادة استخدام أجزاء من الاستعلامات والتعديلات في أماكن متعددة طالما كانت سترجع نفس نوع البيانات. وهذا يسهل علينا كتابة الاستعلامات وصيانتها. كما يمكننا استخدام الأجزاء المولدة لفحص الأنواع على جانب العميل للتأكد من توافق البيانات المستلمة مع الأنواع المتوقعة. التواصل في الزمن الحقيقي في حال استخدام معمارية REST التقليدية، ستحتاج لاستخدام WebSockets لتحقيق الاتصال في الوقت الفعلي كي تعرف باستمرار ما هي نقطة الوصول التي يجب أن تستمع إليها، وما هي البيانات التي ستحصل عليها، وهل الاتصال نشط أم لا، بدل الاستعلام المتكرر عن البيانات من الخادم، يمكن استخدام تقنية تسمى الاشتراكات للاستماع إلى الأحداث المنبعثة غير المتزامنة، حيث تحافظ الاشتراكات على اتصال نشط بالخادم، وتستمع وتنتظر حتى يقوم الخادم بإرسال التحديثات. الفائدة الرئيسية لاستخدام الاشتراكات في GraphQL هي زيادة الأمان. فهي تتيح للمستخدم تحديد الحقول التي سيستقبل فيها القيم المحدثة، تمامًا كما يحدث في الاستعلامات. وهذا يسمح بتقليل البيانات غير المرغوب فيها و غير الضرورية ويجعل التفاعل مع البيانات أكثر فعالية. التوافق مع مختلف أنواع الأجهزة عند العمل على جهاز ذي شاشة صغيرة، مثل الهاتف المحمول، لن نحتاج في الغالب لعرض كمية كبيرة من البيانات مقارنة بجهاز ذي شاشة كبيرة مثل حاسوب مكتبي أو محمول، لذا ليس من الضروري استرجاع البيانات بكمية كبيرة في الشاشات الصغيرة. الحل المقترح في هذه الحالة هو إنشاء استعلامين منفصلين لنفس العملية، أحدهما لجهاز سطح المكتب يسترجع كمية كبيرة من البيانات والثاني للهاتف المحمول يسترجع بيانات أقل واستخدام العبارات الشرطية لتنفيذها بحسب جهاز العميل. تنفيذ عدة استعلامات بنفس الوقت تتيح لك واجهة برمجة التطبيقات GraphQL تنفيذ عدة استعلامات في وقت واحد عن طريق إرسال طلب HTTP واحد. على سبيل المثال في حال واجهة برمجة التطبيقات SpaceX، يمكنك تحديد عدة استعلامات مستقلة واسترجاع البيانات في طلب واحد كما في المثال التالي: { launchesPast(limit: 3) { mission_name launch_date_local launch_site { site_name } } historiesResult(limit: 3) { data { details } } missions(limit: 3) { name twitter } } سلبيات GraphQL لا تخلو أي تقنية من بعض الجوانب السلبية. دعونا نلقي نظرة على بعض الاعتبارات التي تحتاج للانتباه لها عند استخدام معمارية GraphQL. مشكلة N+1 عندما تبدأ في تعلم GraphQL، فإن أول مشكلة ستسمع عنها هي مشكلة N+1 ولتفهم كيفية حدوث هذه المشكلة لنأخذ المثال التالي حول واجهة برمجة التطبيقات SpaceX فإذا كنت تريد استرجاع الإصدارات السابقة من جدول واحد، وتريد الحصول على اسم الموقع لكل منها من جدول آخر باستخدام REST، قد تكون لديك نقطة وصول كما يلي: route: '/launches/past', method: 'GET', queryParam: 'limit' هذا يمكن أن يؤدي إلى الاستعلامات التالية في قاعدة البيانات: SELECT * FROM launches limit = {limit}; -- pass the fetched launches.ids the the second query SELECT * FROM launch_sites WHERE launch_id in (1, 2, 3); يمكنك الحصول على النتيجة المطلوبة باستخدام استعلامين. لكن انتبه لأن هذا يعمل لأنك قمت بالفعل بتحميل قائمة من الإصدارات، ومررت معرفات الإصدارات إلى الاستعلام الثاني. وفي حال GraphQL، لتحميل launch_sites من جدول مختلف، يحتمل أن تستخدم ملحقة بكيان Launch، كما في الكود التالي. type Query { launchesPast(limit: Int!): [Launch!]! } # from table launches type Launch { id: Int! mission_name: String launch_site: [Launch_sites!]! } # from table launch_sites type Launch_sites { id: Int! site_name: String } }` resolvers = { Query: { launchesPast: async (_: null, args: { limit: number }) => { return ORM.getAllLaunches(limit) } } Launch: { launch_site: async (launchObj, args) => { return ORM.getLaunchSitesById(launchObj.id) } }, } في هذه الحالة، ستجري استعلامات متعددة للحصول على اسم الموقع لكل إصدار من قاعدة البيانات، لأن كل محلل في GraphQL يعرف فقط الآباء المرتبطين به، وستنفذ وظيفة محلل منفصلة لكل حقل. بمعنى آخر، تعالج GraphQL كل حقل من البيانات بشكل منفصل بناء على العلاقات بين الحقول، مما يتطلب تنفيذ استعلامات متعددة للحصول على المعلومات المطلوبة بشكل صحيح. query LaunchesPastQuery($limit: Int!) { launchesPast(limit: $limit) { # fetches Launch entities (1 query) id mission_name launch_site { # fetches Sites for each Launch (N queries for N Launches) site_name } } } # Therefore = N + 1 round trips سيترجم الكود أعلاه إلى كود SQL الزائف التالي: SELECT * FROM launches limit = {limit}; -- pass the fetched launches.ids the the second query SELECT * FROM launch_sites WHERE launch_id in (1); SELECT * FROM launch_sites WHERE launch_id in (2); SELECT * FROM launch_sites WHERE launch_id in (3); تتفاقم مشكلة N+1 بشكل أكبر في حال معمارية GraphQL إذ لا يمكن للعملاء أو الخوادم التنبؤ بمدى تكلفة الطلب حتى يتم تنفيذه. أما في معمارية REST، فيمكن التنبؤ بالكلفة نظرًا لوجود رحلة واحدة مطلوبة لكل نقطة وصول. في حين توجد نقطة وصول واحدة في GraphQL لكنها لا تملك دلالة على الحجم المحتمل للطلبات الواردة إليها. قدمت فيسبوك حلاً لمشكلة N+1 من خلال مكتبة تسمى DataLoader، وهي مكتبة مخصصة لجافا سكريبت تجمع الطلبات معًا. وأنشأت شوبيفاي مكتبة مشابهة باسم GraphQL Batch Ruby. تعمل هذه المكتبات عن طريق الانتظار حتى ينتهي تحميل كافة البيانات في مفاتيحها، ثم تنفذ طلب واحد إلى قاعدة البيانات بدلاً من إجراء طلبات متعددة. وبهذا يساعد تكديس الطلبات على تحسين الأداء وتقليل عدد الاستعلامات المنفذة. تبعية المخطط مسبق التعريف إن وجود مخطط محدد مسبقًا بين الخادم والمستهلك يمكن أن يكون مفيدًا، فهذا المخطط سيحدد لنا البيانات المتوقعة بشكل واضح، لكن عند استخدام علامة التعجب ! في حقول الكتابة لمعرفة الحقول التي لن تحتوي أبدًا على قيمة خالية null فيمكن في هذه الحالة لعلامات التعجب أو القيم غير الخالية أن تتسبب في فشل الاستعلام بأكمله. لنأخذ مثالاً على هذا الاستعلام عن الإصدارات، فعمود المعرف id المحفوظ في قاعدة البيانات، أو أي عمود يجب أن يحتوي على قيمة سيصبح فجأة فارغًا. schema = `{ type Query { launchesPast: [Launch!]! } # from table launches type Launch { id: Int! mission_name: String } }` resolvers = { Query: { launchesPast: async () => { const allLaunches = await ORM.getAllLaunches() allLaunches[3].id = null; // <-- will cause the query to fail return allLaunches; } } } فإذا طلب المستخدم قائمة بالإصدارات من خلال استعلام LaunchPast، فسيفشل الاستعلام بأكمله وستحصل على رسالة الخطأ التالية التي تشير لأنه لا يمكن إرجاع قيمة خالية للحقل Launch.id: Cannot return null for non-nullable field Launch.id أخيرًا، إذا استعلمت عن قائمة من الكائنات، وكان واحد منها فقط لا يتطابق مع المخطط مسبق التعريف لكونه يحتوي على قيمة خالية null لحقل مسبوق بعلامة التعجب !، فسيفشل استعلامك بالكامل، ولن تتلقى عندها أي بيانات. التعاودية المتداخلة Nested Recursion نظرًا لكون GraphQL لغة استعلام لواجهات برمجة التطبيقات، فهي توفر القدرة على تنفيذ استعلامات متداخلة وتمكن المطورين من الحصول على ما يحتاجونه من بيانات بالضبط. ولكن ماذا لو أرسل العميل استعلامًا يطلب فيه العديد من البيانات المتداخلة كما في المثال التالي: authors { name books { title authors { name books { title authors { name } } } } } لاشك أن المشكلة الناجمة عن هذا المثال واضحة هنا، لذا يجب تصميم واجهة برمجة تطبيقات GraphQL بعناية لمنع تحميل بيانات متداخلة، كما ينصح باستخدام مكتبات مثل graphql-cost-analysis لتعيين حد الكلفة العظمى maximumCost لمخططك بالكامل وتحديد مقدار التعقيد complexity لكل عملية. رموز حالة HTTP عندما يواجه الخادم Apollo Server أخطاء معينة أثناء معالجة استعلامات GraphQL، ستتضمن الاستجابة التي يعيدها للعميل مصفوفة أخطاء تحتوي على كل خطأ وقع. وبالرغم من حدوث خطأ، فإن رمز الحالة لكل طلب سيكون دائمًا 200 مما يعني استلام الطلب بنجاح. ومع ذلك، ستتضمن الحمولة المعادة returned payload قائمة بالأخطاء التي حدثت مع statusCode يساوي 500. وقد لا يكون رمز الخطأ 500 أفضل طريقة لإخبار العميل بحدوث خطأ ما، لذا قد ترغب باستخدام رموز الحالة خاصة بالطلبات غير المصرح بها، وأخرى خاصة بعمليات إعادة التوجيه. توسيع نطاق الخادم من خلال الاشتراكات كما شرحنا سابقًا، تعتبر الاشتراكات Subscriptions في GraphQL ميزة مهمة للتواصل مع الخادم في الزمن الحقيقي، فهي تسمح لك بتلقي تحديثات فورية من الخادم عندما تحدث تغييرات. وهذه الميزة مفيدة بشكل خاص للتعامل مع الأحداث غير المتزامنة، مثل التحديثات أو التغييرات في البيانات. لكن تظهر المشكلة هنا عندما يحتاج الخادم إلى التوسع أفقيًا -أي إضافة مثيلات متعددة من الخادم- من أجل التعامل معل زيادة حجم الطلبات. حيث يحتاج الخادم إلى آلية لتوزيع الطلبات ومعالجة البيانات عبر عدة مثيلات، وهذا يزيد من تعقيد تنفيذ الاشتراكات بفعالية. فإذا كنت تستخدم الاشتراكات من أجل إرسال تحديثات أو إشعارات إلى عدة عملاء في وقت واحد، وكان لديك مثيلات متعددة لتطبيق الواجهة الخلفية الخاص بك، فلن ترغب في أن يتصل العملاء بمثيل معين من الخادم، لأن ذلك قد يؤدي لعدم مزامنة التحديثات بين المثيلات المختلفة. وفي مثل هذه الحالة يمكن أن تفكر في استخدام Redis لتوزيع الحمل. متى أحتاج لخادم GraphQL؟ احتدمت المنافسة بين GraphQL و REST باعتبارهما أشهر نمطين لواجهات برمجة التطبيقات، إذ يقدم كل منهما أساليب مختلفة للتعامل مع نقل البيانات عبر بروتوكولات الإنترنت. وهذا قد يدفعك للتساؤل هل أختار REST أم GraphQL، يعتمد القرار على متطلبات المشروع مثل حجم البيانات، والتحديثات الفورية، والمرونة في الاستعلامات. فعليًا، لن يكون هناك أي زيادة في الأداء بمجرد الانتقال إلى GraphQL بالنسبة للتطبيقات العادية، لكن عندما يتوسع التطبيق ستظهر فائدة الانتقال لاستخدام GraphQL الذي يوفر حلاً قويًا ومرنًا مقارنة باستخدام REST API التقليدية. كما تتمثل فائدة GraphQL في تبسيط التعامل مع الأنظمة المعقدة أو البنى التحتية القديمة، مثل واجهات برمجة التطبيقات الضخمة وصعبة الصيانة التابعة لجهات خارجية. فهي تتيح لك إرسال استعلامات مرنة وتحميل البيانات اللازمة فقط وتقلل حاجتك للتعامل مع كميات كبيرة من البيانات، وقد اعتمدت شركات كبرى مثل PayPal و Shopify على GraphQL لتحسين كفاءة واجهات برمجة التطبيقات الخاصة بها ولعل هذه الأمثلة تؤكد لنا على فعالية GraphQL في تحسين أداء التطبيقات مقارنة بالأساليب التقليدية. الخلاصة لا شك أن اختيار التقنية المناسبة لتطبيقك ليس أمرًا سهلًا، حيث يتوجب عليك التفكير في المشكلات التي تحلها كل تقنية ومميزاتها وسلبياتها لاتخاذ أفضل قرار. نأمل أن يكون هذا المقال قد قدم لك فهمًا أفضل لتقنية GraphQL، ووضح لك مميزاتها وسبب تفضيلها من قبل المطورين لاسيما مطوري الواجهة الأمامية. ترجمة وبيتصرف لمقال GraphQL: Everything You Need to Know لكاتبه Eduard Krivanek اقرأ أيضًا مقدمة إلى GraphQL مدخل إلى المكتبة GraphQL واستعمالاتها في بناء تطبيقات الويب الحديثة فهم نظام النوع في GraphQL إعداد خادم GraphQL في بيئة Node.js

سنستعرض في مقالنا هذا ما هي هندسة البيانات وما أبرز مهام مهندس البيانات ودوره وأهميته. سنبدأ بنظرة عامة على مهام هذا التخصص، ومن ثم نغوص في تفاصيل المهام المختلفة لمهندسي البيانات وكيف تساهم في عملية التحليل واتخاذ القرار. ما هي هندسة البيانات Data engineering؟ إن هندسة البيانات Data engineering هي عملية تصميم وتنفيذ حلول لجمع وتخزين وتحليل كميات كبيرة من البيانات ويُطلق على هذه العملية عادةً اسم ETL وهي اختصار لثلاث كلمات هي استخراج Extract وتحويل Transform وتحميل Load البيانات. استخراج البيانات Extract: يعني استخراج البيانات من مصادر منوعة مثل قواعد البيانات، وملفات نصية وصفحات ويب …إلخ. تحويل البيانات Transform: يشير إلى إجراء عمليات معالجة على البيانات لتحويلها لصيغة صالحة للاستخدام في مجالات مختلفة. تحميل البيانات Load: يعني تحميل البيانات التي تمت معالجتها إلى نظام التخزين المعتمد مثل قاعدة بيانات علاقية أو نظام لتخزين البيانات الضخمة Big Data تمهيدًا لعملية تحليلها والاستفادة منها في اتخاذ قرارات مفيدة. بعد هذه المراحل الثلاثة، تبدأ مرحلة إعداد البيانات وتجهيزها في تنسيقات مختلفة كي يستخدمها المتخصصون في البيانات مثل محللي البيانات وعلماء البيانات حيث يختلف تنسيق البيانات الناتجة حسب الجهة المستهدفة. لذا يتوجب على مهندس البيانات معرفة كيفية تقديم أفضل طريقة لعرض كميات ضخمة من مجموعات البيانات المختلفة بطريقة يمكن تحليلها والتعامل معها سواء من قبل محلل البيانات أو عالم البيانات أو مدير المنتجات أو غيرها من الجهات التي تعنى بالتعامل مع كميات ضخمة من البيانات. ما هي مهام مهندس البيانات؟ مهندس البيانات هو المهندس المسؤول عن إنشاء حلول من البيانات الخام أو البيانات الأولية، فهو يتولى أمور تطوير وبناء واختبار وصيانة هياكل البيانات data architectures. مهام مهندس البيانات من منظور شامل تشمل مهام مهندسي البيانات بشكل عام التعامل مع البيانات الخام row data. ويتطلب ذلك منهم معرفة جيدة بلغة الاستعلام البنيوية SQL كما يحتاج لامتلاك خبرة جيدة في التعامل مع مختلف أنواع قواعد البيانات، سواء كانت علاقية relational أو غير علاقية non-relational، وفهم صيغ البيانات الشائعة (مثل JSON و CSV و XML) ومعرفة الخيارات المختلفة للتعامل مع البيانات واستدعائها وما هي مزايا وعيوب كل طريقة. فمهندسو البيانات هم المسؤولون عن تحويل البيانات إلى تنسيق سهل الوصول، وتحديد الاتجاهات أو الأنماط المتبعة في التعامل مع مجموعات البيانات، وإنشاء خوارزميات لجعل البيانات الخام أكثر فائدة لقطاعات الأعمال. كما يتمتع مهندسو البيانات بالقدرة على تحويل البيانات الخام إلى رؤى أو قرارات مفيدة حيث يستفيد علماء البيانات من الجهود التي يبذلها مهندسو البيانات في إعداد البيانات وهذا يمكنهم من تحويلها إلى قرارات مستنيرة بسرعة وسهولة. على سبيل المثال، يمكن لمهندس البيانات تحديد فترات الذروة في المبيعات أو تحديد المنتجات التي يُفضل العملاء شراءها مع بعضها، وبالتالي اتخاذ قرارات بإصدار عروض ترويجية مناسبة على المبيعات أو تحسين إدارة المخزون أو غيرها من القرارات بناءً على رؤى مستمدة من البيانات. مهام مهندس البيانات بالتفصيل يعمل مهندس البيانات على هياكل بيانات تتضمن عدة عناصر ومكونات، ونظرًا لأن هذه البيانات تأتي من مصادر مختلفة سواء من قواعد البيانات العلاقية أو غير العلاقية إلى جانب أنظمة خاصة وأدوات مختلفة لمعالجة البيانات. لهذا يتوجب على مهندس البيانات أن يستخدم عدة خدمات وأدوات للتعامل مع هذه البنى المختلفة وتجهيزها بطريقة مناسبة وإتاحة الوصول لها من قبل علماء البيانات. نوهنا سابقًا في بداية المقال لمصطلح ETL الذي يشير إلى استخراج وتحويل وتحميل البيانات حيث يستخدم مهندسو البيانات هذه المنهجية على هياكل البيانات التي ينشؤونها، ويتمثل عملهم الأساسي في اتباع هذه الخطوات الثلاثة أي استخراج البيانات الخام، وتحميلها، وتحويلها لصيغة مناسبة. تحتوي هذه البيانات الخام في الغالب على كثير من الأخطاء والحالات الشاذة مثل تكرار نفس البيانات وعدم التوافق والتطابق في بعض البيانات أو ما يعرف بتضارب البيانات data Inconsistency. لذا تلقى على عاتق مهندس البيانات مسؤولية مراجعة كافة البيانات التي يجمعها واقتراح طرق مناسبة لتحسين جودتها وزيادة صحتها وموثوقيتها. مثال بسيط على الأدوات التي يستخدمها مهندسو البيانات هنالك عدة أدوات يمكن لمهندسي البيانات استخدامها للتعامل مع البيانات على سبيل المثال يمكنهم استخدام أداة لاستيراد بيانات تستورد فقط الصفوف التي تفي بمعايير وشروط معينة وتتجاهل أي صفوف لا تفي بهذه المعايير، حيث يمكن أن يشترط استيراد البيانات النصية فقط، أو البيانات الرقمية التي لها طول محدد دون غيرها من مصادر البيانات المتوفرة. كما يمكنهم استخدام سكريبتات برمجية مكتوبة بلغة مثل لغة البرمجة بايثون لتحويل أو استبدال أحرف محددة ضمن حقول البيانات والتالي يمكن لمهندس البيانات المحترف تحديد أي مشكلات موجودة في البيانات بسرعة وتحديد الأدوات والتقنيات المناسبة التي تحقق له أفضل الحلول لهذه المشكلات. كيف تصبح مهندس بيانات كي تصبح مهندس بيانات محترف عليك اتباع مجموعة من الخطوات الأساسية والتي تشمل: فهم أساسيات البيانات. فهم أساسيات لغة الاستعلام البنيوية SQL. معرفة جيدة باستخدام التعابير النظامية RegEx. معرفة بالتعامل مع تنسيق جيسون JSON. امتلاك أساس نظري وممارسة عملية بتعلم الآلة ML. امتلاك خبرة جيدة بإحدى لغات البرمجة. لنشرح تاليًا كل خطوة من هذه الخطوات بتفصيل أكبر. الخطوة1: فهم أساسيات البيانات لابد أن يمتلك أي مهندس بيانات فهمًا جيدًا بطريقة تخزين البيانات وتنظيمها في الحاسوب. ويعرف ما هي أنواع البيانات المختلفة التي يمكن استخدامها، ويعرف مفاهيم أساسية مرتبة بالبيانات مثل: variables: وهي تمثل مساحات في الذاكرة مخصصة لتخزين البيانات. varchar: نوع بيانات يستخدم لتخزين البيانات النصية ذات حجم متغير. char: نوع بيانات يستخدم لتخزين البيانات النصية ذات حجم ثابت من الأحرف int: نوع بيانات يستخدم لتخزين الأرقام الصحيحة التي لا تحتوي على أجزاء عشرية. prime numbers: الأعداد الأولية، وهي الأعداد الطبيعية الأكبر من الصفر والتي لا يمكن قسمها على أي عدد آخر سوى 1 ونفسها دون باقٍ. named pairs: أزواج البيانات المسماة، وهي بنى معطيات تملك عنصرين الأول يمثل الاسم أو المفتاح key والثاني يمثل القيمة المقابلة له value ويعرف كيفية تخزينها في هياكل بيانات تعتمد على SQL. توفر هذه المفاهيم على بساطتها أساسًا متينًا لمهندس البيانات يساعده على فهم البيانات data ومجموعات البيانات datasets والتعامل معها بالشكل المناسب الخطوة 2: فهم أساسيات لغة SQL يعد فهم لغة SQL من الأمور الأساسية المطلوبة لأي مهندس بيانات فهي اللغة الأساسية للتعامل مع قواعد البيانات العلائقية المختلفة وتنفيذ الوظائف على البيانات وكتابة الاستعلامات المناسبة لتحقيق هذه الوظائف. الخطوة 3: امتلاك معرفة جيدة بالتعابير النظامية RegEx إن فهم التعابير النظامية regular expressions وطريقة استخدامها للبحث في النصوص أمر أساسي، حيث يستخدمها مهندس البيانات في معالجة وتعديل البيانات المختلفة، وتتميز التعابير النظامية بكونها قابلة للاستخدام مع جميع تنسيقات البيانات ومنصات البيانات الأساسية. الخطوة 4: امتلاك خبرة في تنسيق جيسون JSON من الجيد أن يمتلك مهندس البيانات خبرة عملية بتنسيق جيسون JSON الذي يعد جزءًا لا يتجزأ من قواعد البيانات غير العلاقية non-relational وهياكل البيانات data schemas بشكل خاص ويعرف طريقة كتابة استعلامات للاستعلام عن بيانات بتنسيق جيسون. الخطوة 5: فهم المبادئ النظرية والتطبيق العملي لتعلم الآلة إن فهم المبادئ النظرية والتطبيقات العملية لمجال تعلم الآلة machine learning أمر مفيد أيضًا لمهندس البيانات فهو يمكنه من تصميم الحلول لعلماء البيانات. وهو يعد أمرًا ضروريًا حتى لو لم يكن العمل باستخدام نماذج تعلم الآلة جزءًا أساسيًا من العمل اليومي لمهندس البيانات. الخطوة 6: امتلاك خبرة في لغات البرمجة بالرغم من أن مهندس البيانات قد لا يحتاج بالضرورة لكتابة أكواد برمجية في عمله اليومي لكن من المفيد وجود خبرة جيدة بإحدى لغات البرمجة مثل لغة البرمجة بايثون Python التي تتميز بمرونتها وقدرتها على التعامل مع العديد من أنواع البيانات كما تعد لغات مثل جافا Java وسكالا Scala وجو Go مفيدة في مجال هندسة البيانات. المهارات الناعمة المفيدة لتخصص هندسة البيانات يحتاج العمل في تخصص هندسة البيانات لامتلاك مجموعة من المهارات الشخصية أو المهارات الناعمة ومن أبرزها: مهارة حل المشكلات باستخدام الأساليب المعتمدة على البيانات فمن الضروري أن يمتلك مهندس البيانات منهجية لحل المشكلات قائمة على البيانات ويعتمد على المعلومات الفعلية لإرشاده ليجد الحل الأمثل. القدرة على توصيل المفاهيم المعقدة وتصويرها مرئيًا visualize إذ يحتاج مهندسو البيانات إلى التعاون مع العملاء من جهة والتعاون مع الزملاء والفرق التقنية المختلفة داخل مكان العمل ومشاركة أفكاره مع أشخاص من خلفيات مختلفة لذا يحتاج لامتلاك مهارة التواصل الفعال لشرح ما يريد التعبير عنه بشكل واضح ومفهوم. شعور كبير بالمسؤولية، فمهندس البيانات مسؤول عن حل المشكلات المعقدة في مجالات حيوية وحل هذه المشكلات بالشكل الأنسب هو أساس وجوهر وظيفة هندسة البيانات. الأدوات والمصادر المطلوبة في تخصص هندسة البيانات يتطلب تخصص هندسة البيانات مجموعة من الأدوات المهمة والتي سنوضحها تاليًا، كما سنوضح أهم المصادر التي تشرح لك هندسة البيانات. فهم قواعد البيانات العلاقية وغير العلاقية ففهم أنواع وأنظمة قواعد البيانات المختلفة المستخدمة في العالم الحقيقي أداة أساسية في تخصص هندسة البيانات مثل: أنظمة إدارة قواعد البيانات العلائقية المعتمدة على سيكوال SQL مثل MySQL أو Microsoft SQL Server. أنظمة إدارة قواعد البيانات غير العلاقية NoSQL كقواعد البيانات المعتمدة على المستندات مثل MongoDB. معرفة بأساسيات إدارة ومعالجة ونمذجة البيانات عليك كمهندس بيانات تعلم تنسيقات ومنصات أنظمة قواعد البيانات الشائعة وتعلم طريقة إعدادها وفهم فوائد كل نظام إدارة قاعدة بيانات وطريقة التعامل معه. تعلم Apache Kafka تدعم مؤسسة أباتشي Apache للبرمجيات عدّة مشاريع للبيانات الضخمة، التي يمكن لمهندس البيانات تعلم التعامل معها، ومن بين هذه المشاريع المفيدة مشروع أباتشي كافكا Apache Kafka وهو عبارة عن هو منصة بيانات مفتوحة المصدر توفّر آلية تسمح للمستخدمين بالاتصال المستمر مع مصادر البيانات وتمكنهم من استقبالها وتحديثاتها لحظيًا بموثوقية عالية. كما تتوفر أدوات أخرى للتعامل مع البيانات الضخمة مثل أباتشي سبارك Apache Spark الذي يعد محركًا تحليليًا مفتوح المصدر لمعالجة البيانات. وسيفيدك كمهندس بيانات تعلم طريقة إعداده على مجموعة من الأجهزة لإنشاء محرك حوسبة موزع يمكنه معالجة كميات ضخمة من البيانات بسرعة كبيرة. كما تُعدّ أباتشي هادوب Apache Hadoop أداة مفيدة كذلك في تحليل البيانات الضخمة فهي تسمح بمعالجة موزعة لمجموعات بيانات كبيرة وهي تتوفر بشكل خدمة مُدارة managed service متوفرة كجزء من خدمة Google Cloud Dataproc والمستخدمة في معالجة البيانات الضخمة وتعلم الآلة. تعلم لغة البرمجة بايثون أو جافا سيفيدك تعلم لغة البرمجة بايثون كمهندس بيانات بشكل كبير فبايثون هي لغة برمجة قوية ومرنة يمكنها التعامل مع العديد من أنواع البيانات. كما تعد لغة البرمجة جافا Java لغة قوية وتشكل أساسًا للكثير من أعمال هندسة البيانات. لذا سيفيدك تعلم أساسيات جافا، بما في ذلك الصياغة النحوية والدوال والوحدات ومبادئ البرمجة كائنية التوجه oop وكتابة برامج وتطبيقات باستخدامها في عملك كمهندس بيانات. شهادات مفيدة لمهندس البيانات لا شك أن وجودة شهادة في مجال هندسة البيانات يساعدك في إثبات معرفتك لأصحاب العمل وستجد الكثير توفر مسارات التعلم للشهادات التالية طرقًا مُحدثة ومُثبتة ومفصلة لتعلم كل ما تحتاج إليه حول هندسة البيانات. شهادة AWS Data Engineering تضمن شهادة ‎AWS Certified Data Analytics Specialty (DAS-01‎‌‌) خدمات تحليل البيانات في أمازون ويب، وهي تشرح توافق خدمات البيانات في أمازون ويب مع دورة حياة البيانات ومراحلها المختلفة مثل التخزين والمعالجة والتمثيل الرسومي للبيانات وغيرها من الوظائف الضرورية التي يجب على أي مهندس بيانات معرفتها. شهادة Azure Data Engineering تفيد شهادة DP-900 Exam Preparation: Microsoft Azure Data Fundamentals الأفراد التقنيين وغير التقنيين الراغبين في اكتساب معرفة بالمفاهيم الأساسية للبيانات وكيفية تنفيذها باستخدام خدمات بيانات Azure. ستتعلم من خلال هذه الشهادة أساسيات مفاهيم البيانات، بالإضافة إلى بيانات Azure العلاقية وغير العلاقية، وتتعلم كيفية وصف التحليلات التي تقوم بها على البيانات من خلال Azure analytics. كما تفيد شهادة DP-203 Exam Preparation: Data Engineering on Microsoft Azure في تعلم كيفية إدارة ونشر مجموعة من حلول بيانات Azure، ومعرفة كيفية تصميم وبناء تخزين البيانات وتصميم وتطوير وإدارة معالجة البيانات وكيفية الحفاظ على أمانها وتحسين طرق تخزينها. شهادة Google Cloud Data Engineering تساعد شهادة Google Data Engineer Exam – Professional Certification Preparation في فهم تقنية الاستعلامات الضخمة BigQuery وهو خدمة لتحليل البيانات تقدمها شركة Google Cloud Platform والتعامل مع مستودع البيانات السحابي المُدار من جوجل. كما ستتعلم في هذه الدورة كيفية تحميل واستعلام ومعالجة بياناتك وكيفية استخدام تعلم الآلة في تحليل البيانات، وبناء أنابيب البيانات، واستخدام الجداول الضخمة BigTable لتطبيقات البيانات الضخمة. ما الفرق بين مهندس البيانات وعالم البيانات؟ قد يقوم نفس الشخص بمهام مهندس البيانات وعالم البيانات في بعض مواقع العمل لكنهما وظيفتان متكاملتان فعلماء البيانات ومهندسو البيانات يدرسون تخصصين مختلفين ويحتاجون لمجموعة مهارات مختلفة ويقومون بمهام مختلفة مرتبطة بكل تخصص. إذ يهتم مهندسو البيانات بتصميم البيانات واختبارها وصيانتها، بينما يهتم علماء البيانات بتنظيم البيانات ومعالجتها من أجل اكتساب رؤى ومعرفة مفيدة منها. بمعنى آخر مهندسو البيانات هم المسؤولون عن إنشاء وتجهيز البيانات التي يستخدمها علماء البيانات. يمكن اعتبار مهندس البيانات المتحكم الأساسي في البيانات وبنيتها التحتية فهو من يقوم بإعدادها وتجهيزها، بينما يعد عالم البيانات الشخص المتخصص الذي يستنتج رؤى وقرارات من هذه البيانات التي عالجها مهندس البيانات وأعدها له بالصورة المناسبة، وكلا هذين الدورين مهمان ويحتاجان إلى تعاون وثيق لتحقيق النتائج المرجوة. ما هي هندسة البيانات الضخمة إن هندسة البيانات الضخمة Big Data كلمة رائجة اليوم وهي مصطلح شامل يتضمن كل ما يتعلق بعالم هندسة البيانات. ففي تخصص هندسة البيانات الضخمة يتوجب التعامل مع أنظمة معالجة البيانات الضخمة وقواعد بيانات موجودة في بيئات حوسبة سحابية واسعة النطاق والاستفادة من طبيعتها الموزعة وقابليتها للتوسع بالإضافة سهولة تثبيتها وإعدادها السريع الأمر الذي يساهم بشكل كبير في تسريع عملية التطوير والنشر. أسئلة شائعة حول هندسة البيانات نختم المقال بمجموعة من الأسئلة الشائعة حول هندسة البيانات ونوفر لك إجابات موجزة عليها. هل هندسة البيانات مجال سهل؟ لا تعد هندسة البيانات من التخصصات البرمجية السهلة، ولكنها بالتأكيد مهنة مميزة ومجزية ويمكن تعلمها ذاتيًا والتفوق بها في مجال العمل ولاسيما أنها مجال مطلوب بكثرة وهناك نقص في الكفاءات الفعلية في سوق العمل. هل يحتاج مهندس البيانات لمعرفة بالرياضيات؟ لا تتطلب هندسة البيانات معرفة متعمقة بالرياضيات، لكن من المفيد أن يعرف مهندس البيانات أساسيات الإحصاءات والاحتمالات لفهم ما سيقوم به علماء البيانات في فريق عمله، كما سيحتاج لامتلاك فهم جيد للتفكير المنطقي وحل المشكلات من منظور هندسة البرمجيات وهندسة السحابة لحل المشكلات المختلفة التي قد يواجهها في عمله. هل هناك طلب على مهندسي البيانات في سوق العمل؟ نعم، هناك طلب كبير على مهندسي البيانات، خاصة مع اهتمام شركات الأعمال مؤخرًا على علم البيانات المعتمدة على عمل مهندسي البيانات. فالطلب كبير على مهندسي البيانات الخبراء القادرين على التعامل مع البيانات بكفاءة واحترافية وإحداث تغيير إيجابي في العمل. هل يحتاج مهندس البيانات إلى معرفة بالبرمجة؟ نعم، فقد يحتاج مهندسو البيانات لكتابة العديد من الأكواد البرمجية لتنظيم وإدارة خطوط أنابيب البيانات data pipeline والتي تمثل سلسلة من الخطوات يتم خلالها تحميل وتنظيف وتحويل وتحليل البيانات من مصادر مختلفة إلى الوجهة المطلوبة، لذا يحتاج مهندس البيانات لمعرفة جيدبو بلغات البرمجة مثل بايثون وجافا و R ولغات التعامل مع قواعدالبيانات SQL وامتلاك مهارة حل المشكلات وتصحيح الأخطاء البرمجية. كم يكسب مهندسو البيانات؟ تعد هندسة البيانات مهنة مجزية وتوضح بعض الأرقام الموجودة على مواقع العمل الشهيرة أن متوسط رواتب مهندسي البيانات في الولايات المتحدة (عام 2022) مرتفع مقارنة ببقية المهن حيث يبلغ متوسط رواتب مهندسي البيانات حسب موقع Glassdoor حوالي 112,000 دولار سنويًا، ويبلغ 93.000 دولار سنويًا حسب موقع Payscale. الخلاصة بهذا نكون قد وصلنا لختام مقالنا الذي شرحنا فيه أهم المفاهيم المرتبطة بتخصص هندسة البيانات Data engineering وبينا أهميته وطرق دراسته والطلب عليه في سوق العمل، كما وضحنا أبرز مهام مهندس البيانات والأعمال التي يقوم بها جملة وتفصيلًا، ونرجو أن نكون قد أجبناك على أهم الأسئلة المرتبطة بهذا المجال الحيوي. إذا كان لديك أي سؤال حول ما ورد في المقال يمكنك تركه في قسم التعليقات أسفل المقال. ترجمة وبتصرف للمقال What is Data Engineering? Skills, Tools, and Certifications اقرأ أيضًا الدليل الشامل إلى هندسة البيانات Data Engineering علم البيانات Data science: الدليل الشامل ما هي فوائد تعلم البرمجة؟ تعرف على أعلى تخصصات البرمجة أجرًا مهندس البرمجيات من هو وما هي مهامه مدخل إلى تصميم قواعد البيانات من هو مهندس الذكاء الاصطناعي وما أبرز مهامه

في عالمنا الذي يتطور بسرعة هائلة ويعتمد على التقنية أكثر فأكثر، قد يرغب أي منا في ضمان مكانة مرموقة والعمل في إحدى التخصصات الحديثة، ولعل أبرز تلك التخصصات هندسة الذكاء الاصطناعي. فإذا كنت ترغب بأن تصبح مهندس ذكاء اصطناعي AI Engineer للحاق بركب الثورة الحاصلة في هذا المجال والتي أصبحت تؤثر على كافة مجالات الحياة، وتريد أن تعرف بدقة من هو مهندس الذكاء الاصطناعي، وما هي هندسة الذكاء الاصطناعي؟ وكيف تصبح مهندس ذكاء اصطناعي، وما هي وظائف الذكاء الاصطناعي وكيف يمكنك أن تحصل على فرصة عمل في هذا التخصص المميز الذي يشجع على ابتكار وتطوير تقنيات جديدة تحسن حياة البشر للأفضل، فأنت قبل كل شيء بحاجة لقراءة هذا المقال. تخصصات هندسة الذكاء الاصطناعي الذكاء الاصطناعي هو فرع من علوم الحاسوب يركز على إنشاء آلات ذكية يمكنها محاكاة الذكاء البشري وأداء المهام التي تتطلب عادةً تفكيرًا بشريًا، ويتضمن الذكاء الاصطناعي تطوير الخوارزميات والنماذج التي تمكّن الآلات من التعلم والتفكير والإدراك واتخاذ القرارات بناءً على البيانات. ويعد الذكاء الاصطناعي بالعموم مجالاً علميًا حديثًا جدًا، ويساهم المتخصصون فيه في التغيير الرقمي بشكل كبير، ويقودون التقدم في مختلف الصناعات من الرعاية الصحية إلى التعليم والاقتصاد وغيرها، ما يعكس الدور المحوري الذي يلعبه هذا التخصص في تشكيل مستقبلنا. يتضمن هذا التخصص عدة تخصصات أو مجالات فرعية، ومن أهمها نذكر: الرؤية الحاسوبية Computer Vision: هو تخصص يمكن الحواسيب من فهم وتفسير المعلومات المرئية كالصور ومقاطع الفيديو، ويستخدم تقنيات التعرف على الأنماط والأشكال والكائنات فيها. علم البيانات Data Science: هو تخصص يعنى باستخراج المعرفة المفيدة من البيانات باستخدام تقنيات وخوارزميات مختلفة تحلل كميات ضخمة من البيانات وتكتشف الأنماط والاتجاهات التي تساعد على اتخاذ القرارات. تعلم الآلة Machine Learning: هو تخصص ذكاء اصطناعي يركز على تطوير خوارزميات ونماذج تمكّن الحواسيب من التعلم من البيانات واتخاذ قرارات بنفسها دون برمجتها بشكل صريح. التعلم العميق Deep Learning: هو فرع من تعلم الآلة يتضمن تدريب شبكات عصبية اصطناعية مكونة من عدة طبقات لأداء مهام متنوعة مثل التعرف على الكلام وتصنيف الصور. معالجة اللغات الطبيعية Natural Language Processing أو اختصارًا NLP هو تخصص ذكاء اصطناعي يركز على تمكين الحواسيب من فهم وتحليل وتوليد اللغة البشرية، لإنجاز مهام مثل استخراج المعلومات من النصوص وتصنيف النصوص وترجمة اللغات. علم الروبوتيك Robotics: هو تخصص ذكاء اصطناعي يهتم بتصميم وبناء وبرمجة وتشغيل الروبوتات المستخدمة في العديد من المجالات مثل التصنيع والرعاية الصحية والألعاب وغيرها. من هو مهندس الذكاء الاصطناعي AI Engineer مهندس الذكاء الاصطناعي AI Engineer هو مهندس محترف مسؤول عن تصميم وتطوير وتنفيذ الحلول والتطبيقات الذكية، أي التطبيقات التي تعزز الحواسيب أو غيرها من الآلات المختلفة وتمكنها من أداء المهام بذكاء قريب من الذكاء البشري، مثل تطبيقات التعرف على الكلام، وتطبيقات التنبؤ واتخاذ القرارات، وروبوتات الدردشة الذكية وغيرها.. ويتميز مهندس الذكاء الاصطناعي بامتلاك خبرة برمجية قوية تمكنه من برمجة وأنظمة الذكاء الاصطناعي وتنفيذها على العديد من الأجهزة واختبارها وضمان تشغيلها بكفاءة، كما يمكنه العمل في عدة تخصصات ذكاء اصطناعي متنوعة كما شرحنا في الفقرة السابقة. أهمية دراسة الذكاء الاصطناعي قبل بضع سنوات كان الذكاء الاصطناعي ضربًا من الخيال العلمي، وكان استخدامه يقتصر على مجالات محددة، أما اليوم فقد أصبح الذكاء الاصطناعي تخصصًا مفيدًا وحيويًا في العديد من مجالات العمل والحياة، فجميع المجالات اليوم تحتاج إلى مهارات مهندس الذكاء الاصطناعي وهذا المجال في تقدم مستمر، ويُتوقع أن يزداد الطلب على مهندسي الذكاء الاصطناعي في السنوات القادمة، فمع التطورات السريعة في مجال الذكاء الاصطناعي، يُتوقع أن يكون مستقبل هذه الوظيفة واعدًا ومبشرًا، وأن تكون النماذج اللغوية الكبيرة والذكاء الاصطناعي التوليدي من المفاهيم والمهارات الأساسية التي ستهيمن على سوق العمل في السنوات القادمة. لذا فإن دراسة هندسة الذكاء الاصطناعي هي دراسة جيدة وواعدة، لكونها تجعل الحواسيب وغيرها من الأجهزة والآلات المختلفة ذكيةً وقادرةً على التصرف من تلقاء نفسها دون انتظار الأوامر منا، كما تعمل الشركات التقنية الكبيرة اليوم مثل جوجل أو فيسبوك على إنشاء أجهزة حاسوب قادرة على التفكير واتخاذ القرار بصورة ذاتية. راتب مهندس الذكاء الاصطناعي يختلف راتب مهندس الذكاء الاصطناعي بالطبع بناءً على عدة عوامل من بينها عدد سنوات الخبرة، إضافةً إلى تخصص مهندس الذكاء الاصطناعي الدقيق، فتخصص دقيق مثل التعلم العميق Deep Learning قد يوفر رواتب أعلى من غيره، كما يؤثر المكان الجغرافي أو الموقع الخاص بجهة العمل أو الشركة التي تود أن تعمل بها في الراتب الذي ستحصل عليه. على سبيل المثال بلغ متوسط راتب مهندس الذكاء الاصطناعي في الولايات المتحدة عام 2024 بين 113,000 و 210,000 دولار أمريكي بحسب Glassdoor فكما تلاحظ يُعد تخصص مهندس الذكاء الاصطناعي من التخصصات المجزية من الناحية المالية. ومع زيادة الطلب على المهارات في مجال الذكاء الاصطناعي، قد تزداد فرص الحصول على مزيد من العوائد المالية والمهنية في هذا المجال. مهام مهندس الذكاء الاصطناعي يعمل مهندسو الذكاء الاصطناعي على مجموعة واسعة من المهام، وقد تختلف هذه المهام من وظيفة لأخرى ومن أبرز هذه المهام نذكر ما يلي: استخدام تقنيات الذكاء الاصطناعي لتطوير التطبيقات الذكية في مختلف المجالات. التعامل مع الشبكات العصبية الاصطناعية من أجل تطوير نماذج ذكاء اصطناعي. تصميم وتنفيذ الخوارزميات التي تسمح للآلات بالتعلم من البيانات. تحليل كميات ضخمة من البيانات لتحديد الأنماط والرؤى. نشر نماذج الذكاء الاصطناعي المدرَّبة ودمجها مع التطبيقات المختلفة. استخدام تقنيات معالجة اللغة الطبيعية NLP في تطوير تطبيقات التعرف على الكلام التي تحلل اللغة وتعالجها وتستجيب للأوامر المقدمة باللغة الطبيعية. استخدام تقنيات الرؤية الحاسوبية التي تسمح للآلات بفهم وتفسير البيانات المرئية. برمجة الروبوتات الذكية وتمكينها من أداء المهام المعقدة. اختبار التطبيقات الذكية والتحقق من صحتها وضمان عملها بالشكل الصحيح. كيف تصبح مهندس ذكاء اصطناعي يمكنك أن تصبح مهندس ذكاء اصطناعي من خلال طريقتين: إما من خلال التعليم الرسمي أو الدراسة الأكاديمية والتسجيل في إحدى الجامعات المتخصصة في علوم الحاسوب أو علوم البيانات أو هندسة البرمجيات والتخصص لاحقًا في مجال الذكاء الاصطناعي للحصول على إحدى شهادات مهندس الذكاء الاصطناعي، وهو طريق طويل ويستهلك الكثير من الوقت، وقد تدرس فيه الكثير من المواد العامة والنظرية التي لا تهمك في سياق عملك كما أن التعليم الجامعي العربي لهذا التخصص لا زال ضعيف ولا يواكب أحدث التطورات في المجال. والطريقة الثانية لتعلم الذكاء الاصطناعي هي الدراسة الذاتية التي تركز على تعلم تقنيات الذكاء الاصطناعي وتعلم الآلة واكتساب كافة المهارات التي تحتاجها في تطوير تطبيقات ذكاء اصطناعي عملية تفيد في سوق العمل. لذا بالإمكان الدخول في هذا المجال واحترافه عن طريق الدورات الاحترافية والتعلم الذاتي لكسب الوقت. إذا كنت مهتمًا بتعلم هندسة الذكاء الاصطناعي ذاتيا فقد وفرت لك أكاديمية حسوب دورة الذكاء الاصطناعي التي تشرح لك ما تحتاجه لاكتساب خبرة عملية في تطوير مشاريع الذكاء الاصطناعي باستخدام لغة البرمجة بايثون Python التي تتميز بكونها سهلة التعلم وتوفر العديد من مكتبات الذكاء الاصطناعي وتعلم الآلة، حيث ستتعلم أهم أطر العمل والمكتبات التي توفرها بايثون في هذا المجال لبناء تطبيقات ذكية تفيدك في بناء معرض أعمال احترافي والحصول على فرصة عمل مناسبة، كما يمكنك الحصول على شهادة معتمدة من أكاديمية حسوب عند إتمامك للدورة لتفيدك في إثبات خبرتك وتضمن لك الحصول على وظيفة مرموقة في هندسة الذكاء الاصطناعي. دورة الذكاء الاصطناعي احترف برمجة الذكاء الاصطناعي AI وتحليل البيانات وتعلم كافة المعلومات التي تحتاجها لبناء نماذج ذكاء اصطناعي متخصصة. اشترك الآن أهم المهارات التي يحتاجها مهندس الذكاء الاصطناعي لعلك تتساءل ما هي المهارات التي عليك امتلاكها كي تصبح مهندس ذكاء اصطناعي؟ في الواقع يجب على مهندس الذكاء الاصطناعي أن يمتلك العديد من المهارات الفنية والشخصية، ويتمتع بمعرفة واسعة في طرق الذكاء الاصطناعي وعلم البيانات وهندسة البرمجيات، ومن أهم هذه المهارات نذكر: فهم لأساسيات علوم الحاسوب. معرفة جيدة بأسس الرياضيات والإحصاء الرياضي والجبر الخطي وحساب التفاضل والتكامل. خبرة متقدمة في التقنيات ولغات برمجة الذكاء الاصطناعي مثل بايثون وجافا و R و++C معرفة بأطر عمل الذكاء الاصطناعي للغة البرمجة التي يستخدمها مثل باي تورش PyTorch أو تنسرفلو TensorFlow للغة بايثون. فهم عميق بطرق نمذجة البيانات وهندستها. معرفة بقواعد البيانات العلاقية SQL وغير العلاقية NoSQL للاستعلام عن البيانات وإدارتها. معرفة بتقنيات الاستعلام عن البيانات الضخمة ومعالجتها مثل SparkSQL وApache Flink معرفة جيدة بالخوارزميات ولا سيما خوارزميات الذكاء الاصطناعي وخوارزميات تعلم الآلة وخوارزميات التعلم العميق. معرفة جيدة بنماذج تعلم الآلة وتقنيات التعلم المختلفة مثل التعلم بإشراف ودون إشراف. معرفة بخدمات الذكاء الاصطناعي المستندة إلى السحابة مثل Azure وGoogle Cloud Platform. مهارات شخصية مثل مهارات في التواصل والتفكير النقدي والتحليلي إلى جانب الدقة والانتباه للتفاصيل. القدرة على التطور والتعلم المستمر فمجال الذكاء الاصطناعي متجدد ويتطور باستمرار وتظهر فيه أدوات وتقنيات جديدة يوميًا. ما الفرق بين هندسة الذكاء الاصطناعي وعلوم البيانات؟ إن هندسة الذكاء الاصطناعي وعلم البيانات تخصصان متكاملان مع بعضهما البعض حيث يركز دور مهندس الذكاء الاصطناعي على تطوير منتجات ذكية تعمل بصورة ذاتية بينما يستخدم عالم البيانات الذكاء الاصطناعي كأداة لمساعدة المؤسسات على حل مشكلات العمل وتطوير تطبيقات تعتمد على البيانات في تعزيز اتخاذ القرارات التجارية الرابحة كما يطور نماذج تعلم آلة على بيئات تطوير البرمجيات ليدمجها مهندس الذكاء الاصطناعي هذه النماذج مع المنتج النهائي وقد يتولى مسؤولية بناء واجهات برمجية آمنة لنشر النماذج. فكل من مهندس الذكاء الاصطناعي وعالم البيانات يتعاونون مع بعضهما البعض لبناء حلول ذكاء اصطناعي تفيد في حل مشكلات العمل وتحسين الحياة اليومية والطلب على كل من تخصص علم البيانات وهندسة الذكاء الاصطناعي في ازدياد عالميًا. ما الفرق بين هندسة الذكاء الاصطناعي وتعلم الآلة؟ تعلم الآلة Machine Learning واختصاره ML هو تخصص فرعي من الذكاء الاصطناعي وكثيرًا ما يتم الخلط بين مهندس الذكاء الاصطناعي ومهندس تعلم الآلة، وفيما يلي أبرز الفروقات بينهما: إن عمل مهندس الذكاء الاصطناعي أكثر شموليةً، فهو يركز على جعل الآلات تقوم بأتمتة المهام المتكررة وأداء الأعمال بنفسها دون تدخل بشري، في حين يركز مهندس تعلم الآلة بشكل أكبر على تنفيذ التطبيقات المعتمدة على البيانات، فهو يعتمد على استخدام خوارزميات تعلم الآلة التي تسمح للحواسيب باتخاذ القرارات بناءً على مجموعات البيانات. كذلك يحتاج مهندس الذكاء الاصطناعي إلى فهم كافة تقنيات الذكاء الاصطناعي، في حين يركز مهندس تعلم الآلة على وجه الخصوص على لغات برمجة الذكاء الاصطناعي مثل لغة البرمجة بايثون التي توفر العديد من المكتبات وأطر العمل والتي تسهل مهام تحليل البيانات، وتعلم الآلة مثل باي تورش PyTorch أو تنسر فلو TensorFlow أو Scikit-learn أو Keras وغيرها، وعلى تقنيات معالجة وتحليل وتصوير البيانات. كما ينشئ مهندس تعلم الآلة نماذج يمكنها تحليل كميات هائلة من البيانات والتنبؤ من خلالها واتخاذ القرار بناءً عليها، ويهتم بالمعالجة المسبقة للبيانات وتقييم النماذج. بينما يعمل مهندس الذكاء الاصطناعي على تطوير الأنظمة والتطبيقات التي تستفيد من تقنيات الذكاء الاصطناعي بشكل عام، وقد تكون تطبيقات تعلم الآلة جزءًا منها. ما الفرق بين مهندس الذكاء الاصطناعي ومهندس البرمجيات من المجالات المتكاملة والمرتبطة ببعضها ارتباطًا وثيقًا أيضًا هندسة البرمجيات وهندسة الذكاء الاصطناعي، وللتمييز بينهما يمكن القول بأن هندسة البرمجيات هي مجال برمجي يركز على إكساب الشخص مهارات تصميم وتطوير واختبار وصيانة البرمجيات بمختلف أنواعها، وتطبيق المبادئ والممارسات الهندسية بهدف إنشاء برمجيات أو تطبيقات متنوعة موثوقة وعالية الجودة وتلبي متطلبات المستخدمين وتحل مشكلاتهم بالشكل المطلوب، سواء تطبيقات ويب أو تطبيقات الهاتف المحمول أو تطبيقات سطح مكتب أو تطبيقات أنظمة مدمجة …إلخ. أما مهندس الذكاء الاصطناعي فهو يهتم بشكل خاص بإنشاء أنظمة ذكية يمكنها أداء مهام شبيهة بالمهام البشرية، ويقوم كذلك بتصميم وتطوير وتنفيذ خوارزميات ونماذج الذكاء الاصطناعي، وتدريب النماذج وتحسين أنظمة الذكاء الاصطناعي. ويركز مهندسو البرمجيات على لغات البرمجة، وأطر تطوير البرمجيات، ومبادئ هندسة البرمجيات. ويتكامل هذان التخصصان مع بعضهما بالتأكيد فالالتزام بمبادئ هندسة البرمجيات مطلوب خلال تطوير تطبيقات الذكاء الاصطناعي لجعلها أكثر كفاءةً وموثوقية. خطوات تعلم الذكاء الاصطناعي إليك أهم الخطوات التي عليك اتباعها لتصبح مهندس ذكاء اصطناعي: تعرف على أبرز تخصصات الذكاء الاصطناعي مثل التعلم الآلي، والتعلم العميق، ورؤية الحاسوب ومعالجة اللغات الطبيعية، وعلم الروبوتيك وأهم التقنيات المرتبطة. طور مهاراتك في التفكير المنطقي وحل المشكلات. تعلم أسس البرمجة وركز على لغات برمجة الذكاء الاصطناعي مثل بايثون و R وجافا. تعلم استخدام مكتبات وأطر عمل الذكاء الاصطناعي طبّق معرفتك في خبرات عملية وطور مشاريع ذكاء اصطناعي لتعزز ما تتعلمه. طور عدة مشاريع ذكاء اصطناعي أكثر تقدمًا لحل مشكلات فعلية وساهم في مشاريع مفتوحة المصدر لبناء معرض أعمال يعكس مهاراتك وخبرتك. ابحث عن فرصة عمل للتدريب في مجال الذكاء الاصطناعي واكتساب الخبرة العملية وتطوير مهاراتك بشكل أكبر. اعتمد مصادر تعلم حديثة وموثوقة تساعدك على تعلم مفاهيم وتقنيات الذكاء الاصطناعي. وتنشر أكاديمية حسوب الكثير من الكتب والمقالات المفيدة حول هذا التخصص في قسم الذكاء الاصطناعي التي يمكنك قراءتها والاستفادة منها. الخلاصة تعرفنا في مقال اليوم على مهندس الذكاء الاصطناعي AI Engineer، وأبرز المهارات والتقنيات وأطر العمل التي يحتاج مهندس الذكاء الاصطناعي إلى تعلمها، وطرق دراسة الذكاء الاصطناعي، والفرق بينه وبين هندسة تعلم الآلة، كما وضحنا إمكانية تعلمه ذاتيًا والتفوق فيه في حال بذل الجهد والالتزام وتعلم كافة المهارات التقنية والشخصية المطلوبة للعمل في هذا التخصص الرائد والمرتفع الأجر. اقرأ أيضًا اسأل مهندس الذكاء الاصطناعي: أسئلة شائعة حول الذكاء الاصطناعي مكتبات وأطر عمل الذكاء الاصطناعي: القوة الكامنة خلف الأنظمة الذكية لغات برمجة الذكاء الاصطناعي إيجابيات وسلبيات الذكاء الاصطناعي

لا يوجد شخص مهتم بالذكاء الاصطناعي لا يعرف بأن لغة البرمجة بايثون هي واحدة من أهم لغات برمجة الذكاء الاصطناعي وتعلم الآلة فهي توفر الكثير من المكتبات وأطر العمل التي تعزز هذا المجال. وسنعرفك في مقال اليوم أحد أشهر أطر عمل الذكاء الاصطناعي والتعلم العميق Deep Learning في لغة بايثون وهو على إطار عمل باي تورش PyTorch الذي اكتسب شهرة واسعة خلال السنوات الأخيرة، وأصبح اليوم واحدًا من الأدوات الأكثر استخدامًا في العالم في مجال تعلم الآلة، ونوضح لك أبرز مميزاته واستخداماته وطريقة التعامل معه. ما هو باي تورش PyTorch باي تورش PyTorch هو إطار عمل مفتوح المصدر للتعلم العميق، والتعلم العميق هو أحد فروع الذكاء الاصطناعي (AI) يستخدم الشبكات العصبية artificial neural network للتعلم من البيانات وتنفيذ مهام مثل الرؤية الحاسوبية ومعالجة اللغة الطبيعية والتعرف على الكلام. طُوّرَ إطار PyTorch من قبل فريق بحث الذكاء الاصطناعي في شركة ميتا (فيسبوك سابقًا) عام 2016 استنادًا إلى مكتبة تورش السابقة Torch المستندة بدورها إلى لغة البرمجة Lua، وهو مكتوب بلغة البرمجة الشهيرة بايثون Python ويعد اليوم إطار عمل ذائع الصيت ويملك مجتمعًا كبيرًا من المساهمين والمطورين وهو يستخدم في العديد من الشركات الكبرى مثل Tesla و Uber وغيرها. وما نعنيه هنا بإطار التعلم العميق منصة برمجية توفر لك طبقة تجريدية تمكنك من بناء وتدريب الشبكات العصبية العميقة ونشرها بسهولة كبيرة، فالهدف من إطار العمل باي تورش PyTorch هو تمكين المستخدمين من تنفيذ مهام التعلم العميق بطريقة بسيطة وفعالة. فإنشاء نماذج من الصفر في تطبيقات الذكاء الاصطناعي المختلفة مثل التعرف على الصور أو معالجة اللغة الطبيعية، أمر صعب ومعقد لذا يجب الاعتماد على النماذج المدربة مسبقًا في البحث والتطوير وهذا ما يوفره لك إطار باي تورش PyTorch للمختصين في الذكاء الاصطناعي. فمن خلال استخدام أطر العمل مثل باي تورش PyTorch لن يكون هناك حاجة لكتابة الكثير من الشيفرات البرمجية ويمكن استخدام نماذج معقدة بعدد قليل من السطور البرمجية فقط وهذا ما يجعله يعتبر خيارًا ممتازًا للباحثين والمطورين الذين يبحثون عن أداة تعلم عميق مرنة وسهلة الاستخدام ويمكن تخصيصها لتلبية احتياجاتهم الخاصة. ملاحظة: تمثل الشبكة العصبية الاصطناعية نوعًا من الخوارزميات المستخدمة لنمذجة البيانات ذات الأنماط المعقدة. وتحاكي الشبكة العصبية عمل الدماغ البشري من خلال الاعتماد على طبقات متعددة متصلة ببعضها البعض بواسطة عقد Nodes تعالج البيانات قوم بالمعالجة وتتصرف مثل الخلايا العصبية البشرية. إذ تُنشئ هذه الطبقات المتصلة بالعقد شبكة معقدة قادرة على معالجة وفهم كميات ضخمة من البيانات. استخدامات PyTorch يتميز باي تورش PyTorch بمرونته الكبيرة ويستخدم في تطبيقات ومجالات عديدة على سبيل المثال من أهم استخدامات PyTorch ما يلي: في مجال الرؤية الحاسوبية حيث يتم استخدامه لتصنيف الصور والكشف عن الكائنات وتقسيم الصور. في مجال معالجة اللغة الطبيعية (NLP). ويوفر منصة قوية لبناء وتدريب الشبكات العصبية لمهام مثل تصنيف النصوص وتحليل المشاعر والترجمة الآلية. في مجال التعلم المعزز، حيث تم استخدامه لتطوير وكلاء يمكنها لعب ألعاب مثل Atari و Go. وفي تحليل وتوقع السلاسل الزمنية، وكذلك للتعرف على الأصوات وتوليد النصوص. في تطوير النماذج التي يمكنها معالجة سلاسل الدخل الديناميكية ذات الطول المتغير بفضل أسلوب الرسم البياني الحسابي الديناميكي التي يعتمدها. ميزات PyTorch يتمتع إطار باي تورش بالعديد من الفوائد والمميزات التي تجعله الخيار المفضل لدى مهندسي الذكاء الاصطناعي ومن أبرز مميزات باي تورش نذكر: سهل الاستخدام يعتمد على لغة البرمجة الشهيرة بايثون يوفر نماذج منوعة يصلح لتطبيقات متنوعة يملك دعم مجتمعي واسع يوفر ميزة التطوير التفاعلي يوفر ميزة رسم الحسابات الديناميكي يناسب مختلف أنواع العتاد لنوضح المزيد حول كل ميزة من هذه الميزات. سهل الاستخدام حيث يوفر PyTorch واجهة برمجة تطبيقات عالية المستوى تغنيك عن الخوض في العديد من التفاصيل منخفضة المستوى المتعلقة بالتعلم العميق وتسهل عليك التركيز على تصميم النماذج الخاصة بك. يعتمد على لغة البرمجة الشهيرة بايثون وهي واحدة من أشهر لغات البرمجة وأسهلها وتناسب مجال الذكاء الاصطناعي وتعلم الآلة بشكل مثالي، وبما أن باي تورش يعتمد على بايثون فهذا يعني أن مطوري البايثون سيـلفون العمل مع باي تورش بسرعة أكثر من العمل مع أطر برمجة الآلة العميقة الأخرى. كما أنه يتكامل بسلاسة مع مكتبات البايثون الشهيرة مثل NumPy وSciPy وPandas مما يجعل التعامل مع البيانات وتحليلها أمرًا سهلًا. يوفر نماذج متنوعة يوفر إطار باي تورش PyTorch مجموعة متنوعة من النماذج ومعماريات الشبكات العصبية المدربة مسبقًا التي يمكن ضبطها بشكل دقيق واستخدامها لمهام مختلفة في تعلم الآلة، وما نقصده بنموذج PyTorch هنا صنف برمجي بلغة بايثون Python class يمكن إعداده واستدعاؤه بسهولة من أجل إجراء الحسابات والتوقعات كما يمكنك ضبطه على مجموعة معينة من البيانات حسب احتياجاتك. يصلح لتطبيقات متنوعة يصلح PyTorch للاستخدام في طيف واسع من التطبيقات مثل تطبيقات معالجة اللغة الطبيعية، والرؤية الحاسوبية، والتعلم المعزز، والنمذجة التكرارية وغيرها من تطبيقات التعلم العميق. يملك دعم مجتمعي واسع على الرغم من أن بايتورش هو إطار عمل حديث نسبيًا، إلا أنه تمكن من تشكيل مجتمع كبير وضخم من الخبراء والمطورين نظرًا لأن لغة بايثون التي يعتمد عليها تملك أكبر المجتمعات البرمجية على مستوى العالم، وبهذا يستفيد مستخدمو باي تورش من المعرفة المشتركة كما أن توثيق باي تورش منظم جيدًا للغاية ويناسب المبتدئين. يوفر ميزة التطوير التفاعلي يمكنك استخدام محررات أو دفاتر ملاحظات تفاعلية مثل محرر جوبيتر Jupiter التفاعلي بتناغم مع باي تورش. وهذا يسمح لك بالتفاعل مع البيانات وتمثيلها وتصحيح أخطائها خطوة بخطوة ويجعل عملية التطوير أكثر فهمًا. يوفر ميزة رسم الحسابات الديناميكي يتضمن PyTorch ميزات مدمجة لتصور هياكل النماذج، ويستخدم الرسوم البيانية الحسابية الديناميكية dynamic computation graphs ويعني هذا أن رسم الحسابات يتم إنشاؤه أثناء تشغيل البرنامج بشكل فوري وليس ثابت ومحدد مسبقًا static computational graphs كما هو الحال في إطارات التعلم العميق الأخرى مثل TensorFlow. لوصف هذه الميزة بأسلوب أبسط، تخيل وجود قماش يمكنك فيه رسم، تعديل، ومحو أجزاء من رسمك في أي ترتيب يقدم لك إطار باي تورش هذه المرونة في التعامل عند بناء وتعديل نماذج الشبكات العصبية.وهذا يسهل تصحيح الأخطاء وتكرار النماذج وبمجرد تغيير هيكل النموذج سيُحدَّث الرسم البياني الخاص به تلقائيًا. يوفر وحدة مجموعات بيانات مدمجة جاهزة للاستخدام يوفر لك إطار باي تورش PyTorch العديد من مجموعات البيانات التي تناسب العديد من تطبيقات الذكاء الاصطناعي والتعلم العميق، مثل الرؤية الحاسوبية، والتعرف على الكلام، ومعالجة اللغة الطبيعية وبالتالي ستتمكن من بناء شبكة عصبية خاصة بك ولن تضطر لجمع ومعالجة البيانات بنفسك. يسهل تصحيح الأخطاء يمكنك استخدام العديد من أدوات تصحيح الأخطاء Debugging للغة بايثون Python مع إطار باي تورش، على سبيل المثال ، يمكن استخدام الوحدة pdb و ipdb لتصحيح الأكواد البرمجية التي تكتبها في إطار PyTorch. كما يعمل مصحح الأخطاء المدمج مع محرر بايثون باي تشارم PyCharm أيضًا بسلاسة مع كود PyTorch. يناسب مختلف أنواع العتاد يوفر الإطار إدارة فعالة للذاكرة، مما يتيح للمستخدم تدريب شبكات عصبية كبيرة باستخدام موارد الأجهزة المحدودة التي تستخدم وحدة المعالجة CPU كما يدعم تدريب GPU عالي الجود للأجهزة المتطورة التي تتضمن وحدة معالجة الرسومات GPU وهي معالج قوي مكون من مئات النوى التي يمكن أن تتعامل مع البرمجة المتزامنة التي تستخدم آلاف الخيوط Threads في نفس الوقت مما يقلل من وقت التدريب بشكل كبير ويناسب تدريب الشبكات العصبية الكبيرة والمعقدة. عيوب PyTorch على الرغم من أن المميزات والجوانب الإيجابية التي يتمتع بها إطار باي تورش PyTorch إلا أنه يشتمل كذلك من بعض الجوانب السلبية مثل: يفتقر باي تورش PyTorch لبعض الوظائف المدمجة مثل أدوات توسيع البيانات أو تكوين النموذج. وبالتالي يتطلب إنجاز هذه الوظائف بعض الجهد والوقت وقد يكون تنفيذها صعبًا على شخص لا يملك خبرة كافية بهيكلية الإطار والوظائف الخاصة به. إطار بايتورش PyTorch أقل توفقًا -مقارنة بالإطارات الأخرى- مع استخدام النماذج في بيئات الإنتاج بسبب عدم توافر بعض أدوات النشر والتكامل التي تتوفر عادة في إطارات أخرى مثل TensorRT أو ONNX Runtime التابعة لتنسرفلو TensorFlow. على الرغم من توفر خيارات لتحسين الأداء في إطار بايتورش إلا أنه قد يتطلب مزيدًا من الجهد مقارنة بالإطارات الأخرى لتحسين أداء التطبيقات ويعد أداؤه بطيئًا نسبيًا كما أن ميزة الرسم البياني الحسابي الديناميكي تقلل أداءه قليلًا. وعلى الرغم من هذه العيوب إلا أنه يظل واحدًا من الإطارات الأكثر شهرة وقوة في مجال الذكاء الاصطناعي، ويستخدم في العديد من المراكز البحثية والشركات التقنية. مقارنة بين باي تورش PyTorch وتنسرفلو TensorFlow هناك العديد من أطر التعلم العميق المتاحة للاستخدام وتعتبر كل من TensorFlowو PyTorch إطارين قويين لتعلم الآلة في لغة بايثون Python، فبايتورش PyTorch مطور قبل شركة فيسبوك كما ذكرنا سابقًا أما TensorFlow فقد طورته شركة جوجل وهما يقدمان وظائف أساسية مشابهة، إلا أنها يختلفان في بعض النواحي ومن بين أبرز الفروقات بينهما نذكر ما يلي: التنفيذ المتزامن: يستخدم باي تورش PyTorch التنفيذ المتزامن لأكواد لغة البرمجة بايثون من أجل تنفيذ عدة عمليات في نفس الوقت، في حين تحتاج لتهيئة كل عملية بشكل يدوي لتحقيق المعالجة المتزامنة للبيانات في تنسرفلو. تمثيل النماذج: يستخدم باي تورش PyTorch كما ذكرنا من قبل الرسوم البيانية الديناميكية، بينما يستخدم تنسرفلو أسلوب الرسوم الثابتة static computational graphs وهذا يجعله أسرع أداء لكن أقل مرونة. نشر النماذج: ، لا يوفر باي توش PyTorch خدمة لنشر النماذج على الويب، بينما يوفر تنسرفلو TensorFlow هذه الخدمة ويدعم نشر النماذج بسهولة باستخدام إطار عمل يسمى TensorFlow Serving وهو إطار يستخدم واجهات REST API لاستخدام نموذج التنبؤ بمجرد نشره مما يسهل استخدامه أكثر من بايتورش. وإضافة إلى باي تورش PyTorch وتنسرفلو TensorFlow ستجد الكثير من مكتبات وأطر عمل الذكاء الاصطناعي المفيدة الأخرى مثل Keras وMXNet وCaffe وكل إطار له مزاياه وعيوبه ولك الحرية في اختيار الإطار الذي يناسب احتياجاتك وتفضيلاتك، وتعلم خطوات استخدامه بفعالية وكفاءة. خطوات تعلم باي تورش PyTorch إليك أهم الخطوات التي عليك اتباعها كي تتمكن من استخدام إطار عمل بايتورش بكفاءة: قبل أن تتمكن من التعامل مع إطار باي تورش عليك أن تتعلم المفاهيم الرياضية الأساسية مثل الجبر الخطي وحساب التفاضل والتكامل والإحصاء والاحتمالات وتعلم أساسيات الخوارزميات وهياكل البيانات بعدها ابدأ بتعلم لغة البرمجة بايثون Python التي يعتمد عليها إطار باي تورش وتدرب على كتابة التعليمات البرمجية وتصحيح أخطائها الخطوة التي تليها هي تعلم أساسيات الذكاء الاصطناعي وتعلم الآلة والتعلم العميق وافهم تقنيات وخوارزميات التعلم العميق، ومفاهيم كثل التصنيف والانحدار، وتقييم النماذج وتحسينها فهذه المبادئ النظرية أساسية للتطبيق العمل على إطار العمل لاحقًا. تعلم طريقة تثبيت إطار باي تورش وإعداده محليًا وتعرف على واجهته ومكوناته وتآلف مع أسلوب التعامل معه كما يمكنك التعامل معه مباشرة على السحابة. تعرف على طريقة تحضير البيانات في باي تورش والمعالجة المسبقة لها واكتشف طريقة بناء الشبكات العصبية وتدريبها، بدءًا من تحديد النموذج وتدريب في مجالات مختلفة مثل في الرؤية الحاسوبية ومعالجة اللغة الطبيعية. تعلم آلية تقييم النماذج وعمل التنبؤات منها وكيفية تحسين دقة النموذج وسرعته وموثوقيته جرب تنفيذ نماذج التعلم العميق في تطبيقات فعلية في العالم الحقيقي مثل تطبيقات الويب لتعزز فهم المبادئ النظرية مثل تطبيقات التعرف على الصور وإنشاء النصوص وتحليل المشاعر واكتشاف الوجه لتبني معرض أعمال خاص بك. احرص على التعلم المستمر وتطوير مهاراتك كمتخصص في التعلم العميق فهذا المجال متجدد وسريع التطور وعليك دومًا مواكبة أحدث التطورات والاتجاهات. وفي الختام تذكر أن الذكاء الاصطناعي اليوم لم يعد مجالًا مقتصرًا على الباحثين والرياضيين والشركات التقنية المتطورة بل باي بإمكان أي شخص ملم بأساسيات الرياضيات والخوارزميات وبلغة البرمجة بلغة بايثون Python تحقيق نتائج مميزة في الذكاء الاصطناعي والتعلم العميق بسهولة كبيرة. فإذا كانت مهتمًا بتعلم هذا المجال الحديث والثوري وتبحث عن مصادر احترافية باللغة العربية فستجد الكثير من مصادر التعلم من خلال المقالات المنشورة في قسم الذكاء الاصطناعي في أكاديمية حسوب كما توفر الأكاديمية دورة تعلم الذكاء الاصطناعي وهي دورة مميزة وشاملة تساعدك على تعلم لغة بايثون وتطوير تطبيقات ذكية لمعالجة وتحليل البيانات وفهم كافة الخوارزميات والمفاهيم البرمجية التي تحتاجها لبناء نماذج ذكاء اصطناعي متخصصة وتطبيق مشاريع حقيقية وستكسبك هذه الدورة الشاملة الكثير من المعرفة النظرية والتطبيقات العملية التي توصلك من المستوى المبتدئ للاحتراف وتؤهلك لدخول سوق العمل بسرعة والمنافسة بقوة في هذا المجال. دورة الذكاء الاصطناعي احترف برمجة الذكاء الاصطناعي AI وتحليل البيانات وتعلم كافة المعلومات التي تحتاجها لبناء نماذج ذكاء اصطناعي متخصصة. اشترك الآن الخلاصة نرجو أن نكون قد وفقنا في هذا المقال لتعريفك على كل ما تحتاجه إطار عمل باي تورش وهو PyTorch أحد أقوى الأدوات المستخدمة لتدريب الشبكات العصبية العميقة والتعلم العميق وبينا لك أبرز مميزاته التي تجعل منه بيئة ملائمة تفيد أي شخص مهتم بالعمل في مجال الذكاء الاصطاعي، وأبرز الفروقات بينه وبين إطار عمل الذكاء الاصطناعي تنسرفلو TensorFlow، إذا كان لديك أي تساؤل حول ما ورد في المقال يمكنك تركه في قسم النقاش أسفل المقال. اقرأ أيضًا إيجابيات وسلبيات الذكاء الاصطناعي تعلم الذكاء الاصطناعي أهمية الذكاء الاصطناعي برمجة الذكاء الاصطناعي تطبيقات لغة بايثون

من منا لا يحب ألعاب الفيديو التي غزت العالم، فقد أصبحت ألعاب الفيديو جزءًا لا يتجزأ من أساليب الترفيه في حياتنا اليومية، مثل لعبة سوبر ماريو أو فيفا أو GTA، فإذا كنت من محبي الألعاب الإلكترونية، وتود معرفة المزيد عنها، وتتساءل كيف تطورت ألعاب الفيديو، وما هي أنواعها، وتفكر كيف يمكنك برمجة لعبة فيديو خاصة بك، وهل ستحتاج لتعلم الكثير من التقنيات وبرمجة الألعاب؟ فأدعوك لقراءة هذا المقال الذي يجيبك على كل تساؤلاتك هذه. ما هي ألعاب الفيديو ألعاب الفيديو هي ألعاب إلكترونية يمكن اللعب بها على شاشةٍ ما، سواء كانت هذه الشاشة هي شاشة حاسوب، أو جوال، أو تلفاز موصول بوحدات خاصة لتشغيل الألعاب video game console، مثل بلايستيشن أو Xbox أو Wii، كما توجد أنواع من ألعاب الفيديو تسمى ألعاب الأوركيد تعمل على أجهزة مستقلة بذاتها وتوجد في الأماكن العامة ومراكز التسوق. تاريخ تطور ألعاب الفيديو لقد ارتبط تطور ألعاب الفيديو بتطور الحواسيب وانتشارها، وكانت الألعاب الإلكترونية في البداية ألعابًا بسيطة، إذ تُعد لعبة Tennis for Two التي برمجها المطور الأمريكي ويليام هيجنبوثام في عام 1958، أول لعبة فيديو طورت لأغراض التسلية، حيث كانت اللعبة تتألف من شاشة تقفز عليها نقطة خضراء مضيئة، ويمكن لشخصين اللعب بهذه النقطة التي تقفز من جانب لآخر كما توضح الصورة التالية: مصدر الصورة كما يوضح هذا الفيديو طريقة اللعب بها ويبين كانت الآلعاب الإلكترونية الأولى بدائية وبسيطة، ولكنها كانت نقطة الانطلاق لعالم صناعة الألعاب المتطورة التي نستمتع بها اليوم، ولم تكن هذه الألعاب الأولية مشهورة، لأن تواجد أجهزة الحواسيب كان مقتصرًا بشكل أساسي على الجامعات الكبيرة والمراكز البحثية. وقد بدأ تحقق الانتشار الواسع لألعاب الفيديو في السبعينيات، عندما بدأت الشركات في تثبيت ألعاب الفيديو في المراكز التجارية والأماكن العامة، ففي عام 1972 قامت شركة أتاري بإصدار بونج Pong والتي اعتبرت أول لعبة فيديو ناجحة تجاريًا على مستوى العالم وهي لعبة أروكيد ثنائية الأبعاد تحاكي كرة الطاولة يمكن لعبها من قبل لاعبين اثنين إذ يتحكم كل لاعب في مضرب يمكنه التحرك عموديًا لضرب الكرةذهابًا وإيابًا، ويحصل اللاعب على نقطة عندما يفشل خصمه في صد الكرة. مصدر الصورة وبعدها زاد انتشار ألعاب الفيديو في ثمانينيات القرن الماضي مع تطور الحواسيب وصغر حجمها وزيادة كفاءتها وأدائها، مما مَكّن مبرمجي الألعاب من تصميم رسومات ألعاب احترافية وتحقيق تجربة لعب أكثر ابتكارًا، حيث حصلت الألعاب على شخصياتها الخاصة وقصص أكثر تعقيدًا، فمعظم ألعاب الفيديو الكلاسيكية التي نعرفها اليوم مثل لعبة باك مان ولعبة سوبر ماريو نشأت في هذا الوقت. وفي فترة التسعينيات ومطلع الألفية الثالثة انتقلت ألعاب الفيديو لمرحلة أكثر احترافيةً، وظهرت الألعاب ذات الرسومات ثلاثية الأبعاد، التي يستطيع فيها اللاعبون التحرك في ثلاث اتجاهات بدلاً من اتجاهين فقط، وأصبحت عوالم ألعاب الفيديو أكثر واقعيةً، وتنافست الشركات المصنعة للأجهزة والألعاب على السوق، فقدمت سوني عام 1994 جهاز البلايستيشن الذي مثل قفزة كبيرة تقنيًا ورسوميًا مقارنةً بالأجهزة الموجودة حينها، كما ظهرت أفكار ألعاب أكثر ابتكارًا من استوديوهات الألعاب، وظهرت أنواع ألعاب جديدة مثل ألعاب إطلاق النار من منظور الشخص الأول. كما ساهم ظهور الإنترنت في تحويل ألعاب الفيديو تدريجيًا إلى اللعب عبر الإنترنت بدل لعبها على الأجهزة المحلية، وأصبحت ألعاب مثل وورلد أوف ووركرافت World of Warcraft في عام 2004 تُلعب بشكل رئيسي عبر الإنترنت، كما ساعد ظهور تقنيات الذكاء الاصطناعي AI في جعل الألعاب أكثر ديناميكيةً وواقعيةً، فالخصوم لم يعودوا يتصرفون بنفس الطريقة في كل الحالات، بل يتفاعلون بشكل مستقل مع أحداث اللعبة، كما ظهرت ألعاب العالم المفتوح، حيث يمكن للاعبين استكشاف عوالم خيالية بمفردهم وتحديد سياق اللعب بحرية، أو يمكنهم إنشاء العالم الافتراضي بأنفسهم، كما في مفهوم ألعاب صندوق الرمل Sandbox. وهكذا جاء هذا العقد بعدد لا يحصى من الألعاب التي نالت شهرة واسعة وأكثر مبيعًا، من أهمها: The Sims (2000)‎: لعبة محاكاة واقع افتراضي، وفد حققت نجاحًا هائلاً بفضل الحرية الكبيرة في اللعب والقدرة على بناء وتخصيص المنازل والتفاعل مع العالم الافتراضي. Grand Theft Auto San Andreas (2004)‎: لعبة أكشن وعالم مفتوح، تتميز بوجود العديد من أساليب ‎‎اللعب. Super Mario Galaxy (2007)‎: لعبة ماريو ثلاثية الأبعاد، والتي تميزت بتصميم عالم احترافي والمستويات الإبداعية وحصدت الكثير من الإعجابات بفضل أسلوب لعبها المبتكر. Minecraft oder (2010)‎: لعبة ماينكرافت هي لعبة عالم مفتوح تتيح لك بناء عوالم خاصة بك، وقد نالت شهرةً عالميةً واسعة بفضل إمكانيات البناء اللامحدودة والإبداع الذي يتيحه اللعب بها. أهمية ألعاب الفيديو أصبحت ألعاب الفيديو اليوم صناعة تدرّ الكثير من الأرباح على صانعيها، إذ يقضي الكثير من الناس معظم الوقت وهم يلعبون على الشاشات ومن كل الفئات العمرية، لاسيما ألعاب الهواتف الجوالة ويقضون الكثير من فترات الانتظار في مواقف الحافلات أو خلال السفر أو قبل النوم في اللعب بها، وهناك ألعاب على الحاسوب أو وحدات تشغيل الألعاب تجعل اللاعب يدمنها ولا يتخلى عن اللعب بها مرات ومرات، كما انتشرت اليوم ظاهرة تصوير اللاعبين لأنفسهم أثناء اللعب والتعليق على أحداث اللعبة أو تقديم نصائح حول طريقة اللعب لنشر هذه المقاطع على يوتيوب والكسب من مشاهدتها, وهذه الشعبية الكبيرة أدت لزيادة شهرة الألعاب ورواجها الكبير لزيادة وجعلت من صناعة ألعاب الفيديو صناعة رائجة تدرّ الكثير من الأرباح على الشركات المطورة، فقد تم بيع ملايين النسخ من بعض الألعاب الإلكترونية، وتجاوزت أرباح صناعة الألعاب الإلكترونية المليارات، كما أن أرباح صناعة الألعاب الإلكترونية تفوق اليوم أرباح صناعات أخرى مثل صناعة الأفلام والسينما، وهناك العديد من استوديوهات الألعاب المستقلة التي تطور مختلف أنواع الفيديو لجميع أنواع الأنظمة كالحواسيب والجوالات والأجهزة المحمولة. ومن أنجح سلاسل الألعاب الإلكترونية التي حققت نجاحًا واسعًا في عالم ألعاب الفيديو نذكر لعبة سوبر ماريو ولعبة بوكيمون ولعبة فيفا ولعبة Grand Theft Auto أو GTA ولعبة The Sims. كيف تصبح مطور ألعاب فيديو؟ لا بد أن برمجة لعبة فيديو تعتمد على نوع اللعبة التي ترغب في برمجتها، فبرمجة لعبة فيديو ثنائية الأبعاد تختلف عن برمجة لعبة ثلاثية الأبعاد، كما أن برمجة لعبة جوال بسيطة أسهل من برمجة لعبة حاسوبية أو لعبة لمنصة تشغيل ألعاب مثل بلاي ستيشن PlayStation أو Xbox أو لعبة تحاكي الواقع الافتراضي وتتضمن الكثير من المراحل والخطوات والعديد من اللاعبين. فهناك ألعاب بسيطة يمكن برمحتها من قبل شخص واحد وخلال مدة قصيرة وهنالك ألعاب يعمل عليها فريق متكامل يضم مئات الأشخاص ويكلف تطويرها آلاف الدولارات، لكننا سنشرح هنا خطوات عامة يمكنك اتباعها لتصبح مطور ألعاب فيديو بسيطة وبخطوات سهلة: تحديد الهدف من لعبة الفيديو والمنصة التي ستوجه لها اللعبة وطريقة التفاعل معها، هل هو من خلال إدخالات لوحة المفاتيح والفأرة أو من خلال وحدة التحكم، وغيرها من التفاصيل الأخرى. تصميم لعبة الفيديو وتحديد كل ما يتعلق بها من تفاصيل، وما هي شخصيات اللعبة وكيف ستتحرك الشخصية وما ردة فعلها عندما تصدم بجدار أو تسقط في بركة ما مثلًا، وما هي قوانين اللعب وشروط الفوز، وغيرها من القوانين والحركات. رسم وتصميم شخصيات اللعبة الإلكترونية اللازمة على الشاشة، وتحديد تأثيرات الصوت التي ستصدر في كل مرحلة من الحركة أو التفاعل. برمجة لعبة الفيديو، فبعد أن تكون قد حددت جميع التفاصيل اللازمة لبرمجة لعبة الفيديو الخاصة بك ستكون الآن مرحلة برمجة اللعبة قد حانت، وتشبه برمجة اللعبة تطوير البرمجيات التقليدية، حيث يتوجب عليك في البداية إنشاء نموذج أولي للعبة واختبارها، وهنا يمكنك الاستعانة بالكثير من التقنيات مثل لغات برمجة الألعاب ومحركات الألعاب التي تسرع عملية التطوير. اختبار لعبة الفيديو، فبعد برمجة اللعبة عليك التحقق من عدم وجود مشكلات أو أخطاء في برمجتها وأن اللعبة تعمل كما هو متوقع، ويمكن مشاركتها مع الأصدقاء لتجربتها واختبار أي مشكلات فيها. ونذكر من جديد أن تطوير لعبة فيديو احترافية سيحتاج لفريق عمل مكون من عدة أشخاص من مختلف التخصصات، مثل مصممي الألعاب الذين يصممون عالم اللعبة وقصتها، والكتّاب أو رواة القصص الذين يكتبون قصة اللعبة، وموسيقيون يسجلون التأثيرات الصوتية المستخدمة، وأخيرًا مطورو الألعاب يكتبون الكود البرمجي الذي يحوّل اللعبة من فكرة لواقع فعلي. وتستغرق عملية صناعة لعبة فيديو احترافية بدءًا من التخطيط وحتى مرحلة ما بعد الإنتاج حوالي ثلاث إلى خمس سنوات في المتوسط بالنسبة لألعاب وحدات التحكم وأجهزة الحاسوب بينما يمكن تطوير لعبة جوال بسيطة بوقت أقل بكثير وهذا لا يمنع من فرصة نجاحها وانتشارها فهناك الكثير من أفكار الألعاب التي حققت شهرة واسعة حتى اليوم رغم بساطتها مثل لعبة لعبة كاندي كراش Candy Crash ولعبة باك مان Pac-Man. هل تطمح لتصبح مطور ألعاب فيديو محترف وتحويل شغفك إلى مهارة عملية. ستساعدك دورة تطوير الألعاب من أكاديمية حسوب على تحقيق هذا الهدف، حيث ستتعلم كيف تبني ألعابك الخاصة من الصفر حيث ستتقن مفاهيم البرمجة وتطوير شخصيات ألعاب تتفاعل مع بعضها بذكاء وإبداع. دورة تطوير الألعاب ابدأ رحلة صناعة الألعاب ثنائية وثلاثية الأبعاد وابتكر ألعاب ممتعة تفاعلية ومليئة بالتحديات. اشترك الآن مستقبل ألعاب الفيديو تطورت ألعاب الفيديو من مجرد نقاط بسيطة تتحرك على الشاشة إلى ألعاب برسومات عالية الدقة ومناظر ثلاثية الأبعاد رائعة وواقعية، ثم أصبح اللاعبون بفضل الواقع الافتراضي جزءًا من أحداث اللعبة وشخصياتها، ويتوقع أن يشهد مستقبل ألعاب الفيديو مزيدًا من التطور، ويستخدم فيه الذكاء الاصطناعي والواقع المعزز بصورة أكبر، وتتحسن دقة الرسومات وتستخدم وحدات تشغيل ألعاب أكثر تقدمًا، وأن تشكل الوحدات الأصغر حجمًا والأكثر تطورًا مستقبل صناعة الألعاب. كما سيشهد مستقبل ألعاب الفيديو برمجة مزيد من ألعاب الواقع المعزز AR التي تجمع بين العالم الواقعي والعناصر الرقمية المتفاعلة، مثل لعبة بوكيمون جو Pokémon Go التي تمكن اللاعبين من رؤية شخصيات اللعبة التي تنشئ بيئة لعب افتراضية كاملة، وتحتاج لارتداء نظارات VR أو أجهزة مشابهة للتفاعل مع بيئة اللعب باستخدام وحدات تحكم أو حركات الجسم مثل لعبة Beat Saber التي يقوم فيها اللاعبون بتحريك أضواء الليزر بواسطة مضارب ضوء لقطع الكتل المتحركة لتوليد تجربة لعب مثيرة، وكلا النوعين يقدمان تجارب متفردة ومثيرة، ويستخدمان تقنيات فريدة لإيصال اللاعبين إلى عوالم مختلفة وتفاعلية ويتوقع أن تلقى صناعة الألعاب المزيد من التقدم والرواج والازدهار في السنوات المقبلة ويزداد الطلب على مطوري الألعاب بشكل أكبر. الخلاصة تحدثنا في مقال اليوم موجزًا عن عالم ألعاب الفيديو، الذي أصبح جزءًا لا يتجزأ من حياتنا اليومية، من خلال استعراض تاريخها وتطورها، وصولاً إلى نظرة مستقبلية عن ألعاب الفيديو، والتي لم تعد مجرد وسيلة للترفيه والتسلية، بل أصبحت صناعة ضخمة تجذب ملايين اللاعبين وتحقق أرباحًا خيالية، وختمنا المقال بأهم الخطوات التي تساعدك كي تصبح مطور ألعاب فيديو محترف. اقرأ أيضًا مطور الألعاب: من هو وما هي مهامه كيف تصبح مبرمج ألعاب فيديو ناجح تعرف على أهمية صناعة الألعاب الإلكترونية نبذة عن صناعة الألعاب ومحرك Unity3D ما هي برمجة الألعاب؟

نوضح في مقال اليوم ما هي لغة Sass، وماهي استخداماتها، ولماذا تستخدم كبديل للغة CSS في تنسيق الواجهات الأمامية لمواقع الويب، فإذا كنت مهتمًا بمعرفة ماذا تعني Sass؟ وما الفرق بين لغة CSS و Sass وما هي أساسيات Sass التي عليك تعلمها، وماهي مصادر تعلمها باللغة العربية، والعديد من المعلومات المفيدة الأخرى حولها فهذا المقال سيفيدك بكل تأكيد. ما هي لغة Sass؟ لغة Sass هي اختصار لعبارة Syntactically awesome style sheets وتعني أوراق الأنماط الرائعة من الناحية النحوية وهي بمثابة توسعة أو تطوير للغة تنسيق صفحات الويب CSS وهي لغة مفتوحة المصدر تخضع لترخيص MIT -بالرغم من ذلك هنالك إصدارات معينة من لغة Sass تخضع لتراخيص ملكية، وتوفر مرونة وسهولة أكبر في التعامل معها- ولكي تفهم ماذا تعني Sass يجب أن تعرف بدايةً ما هي لغة CSS وما الهدف منها؟ ففي الأساس لغة CSS وهي اختصار لعبارة Cascading Style Sheet أي لغة تنسيق الأنماط المتعاقبة، هي اللغة الأساسية المستخدمة لتنسيق وتصميم عناصر المواقع الإلكترونية الممثلة بلغةHTML فلو كنت تصمم موقعًا إلكترونيًا خاصًا بك وأردت تغيير لون خلفية عنصر معين على إحدى صفحات هذا الموقع أو تغيير الخطوط المستخدمة في الكتابة أو تنسيق القوائم أو تعديل تموضع عنصر معين ضمن الصفحة، أو غيرها من التعديلات على مظهر موقعك فعليك كتابة كافة أكواد التنسيق المطلوبة باستخدام لغة CSS. لكن عندما تتعامل مع شيفرات CSS في تصميم صفحات الويب فستلاحظ أنها تعاني من محدودية وقيود عديدة لا سيما عند الحاجة لكتابة الكثير من التنسيقات إذ سيصبح التعامل معها مربكًا ومعقدًا وتصعب عملية صيانتها وتصحيح أخطائها لكونها لغة تنسيقية بحتة ولا تملك إمكانيات برمجية، وللتخفيف من هذه المشكلات والقيود ظهرت لغة Sass لكي تضيف العديد من المميزات الجديدة للغة CSS، مثل ميزة تداخل الكود وميزة التصريح عن الثوابت والمتغيرات وإمكانية تعريف الدوال وغيرها من المميزات المتقدمة التي سنوضحها بالأمثلة العملية في الفقرات التالية، والتي من شأنها أن تقلل حجم الكود وتنظم وتبسّط عملية كتابة التنسيقات اللازمة لتصميم مواقع الويب وصيانتها. باختصار Sass هي لغة تحسينية للغة CSS ولكن تجدر الإشارة لأنك ستحتاج لأن تترجم كل أكواد Sass إلى لغة CSS كي تتمكن من تطبيقها على عناصر صفحة الويب، أي لا يمكنك استخدم أكواد Sass مباشرة في صفحات موقعك كما هو الحال في CSS وستحتاج لاستخدام تقنيات مخصصة للقيام بعملية التحويل. طريقة تحويل لغة Sass إلى CSS قد تتساءل لماذا يتوجب عليَّ تحويل كود Sass إلى CSS وإليك السبب، يمكن لجميع متصفحات الويب الحديثة عرض أكواد CSS دون أي مشكلات، لكن هذا لا ينطبق على لغة Sass لذا تحتاج قبل ذلك لإجراء عملية تحويل أو ترجمة لكافة أكواد Sass إلى أكواد اللغة القياسية CSS ثم تطبيق هذه التنسيقات على عناصر الموقع الإلكتروني. لهذا السبب تعد لغة Sass بمثابة معالج مسبق للغة CSS أو ما يعرف بمصطلح CSS pre-processor لأنك تحتاج إلى تحويل أو ترجمة أكوادها المتقدمة للشكل المتبع في أكواد CSS التقليدية قبل عرض العناصر على صفحة الويب. حيث يتوجب عليك بداية كتابة تنسيقات أو أكواد Sass في ملف بالامتداد ‎.sass ثم ترجمتها أو تجميعها في ملف CSS وبعدها سيتم تحميل شيفرة CSS إلى المتصفح لتنسيق عناصر HTML، ولكي تتمكن من إجراء عملية التحويل تحتاج إلى تثبيت مترجم Sass على جهازك لترجمة كود Sass إلى كود CSS القياسي. وتتوفر عدة طرق يمكنك من خلالها تثبيت مترجم Sass على أنظمة التشغيل ويندوز Windows وماك Mac ولينكس Linux، إما من خلال تطبيق واجهة رسومية مثل scout-app أو من خلال استخدام أداة سطر الأوامر مثل Dart Sass أو Node sass وتختلف طريقة التثبيت بحسب نظام التشغيل وبيئة التطوير ومدير الحزم الذي تستخدمه. على سبيل المثال إذا كنت تستخدم مدير الحزم شوكولاتي Chocolatey لنظام ويندوز فيمكنك تثبيت Dart Sass عن طريق كتابة الأمر التالي: choco install sass اختر الطريقة التي تناسبك للتثبيت، وبعد اكتمال التثبيت سيكون بإمكانك تحويل ملفات sass إلى CSS من خلال كتابة التعليمة التالية: sass file_name.sass file_name.css مثال على تحويل ملف Sass إلى CSS على سبيل المثال لنفترض أن لدينا لدينا ملف Sass يسمى style.sass يحتوي على التنسيقات التالية: // ملف styles.sass $primary-color: blue body font-family: Arial, sans-serif .container width: 100% max-width: 960px margin: 0 auto .button padding: 10px 20px background-color: $primary-color color: white border: none border-radius: 5px لمعالجة هذا الملف وتحويله إلى كود CSS قياسي، افتح نافذة سطر الأوامر وانتقل إلى المجلد الذي يحتوي على ملف style.sass ثم نفذ هذا الأمر: sass style.sass style.css يحول هذا الأمر ملف style.sass إلى ملف style.css يحتوي على الكود التالي: /* ملف styles.css */ body { font-family: Arial, sans-serif; } .container { width: 100%; max-width: 960px; margin: 0 auto; } .button { padding: 10px 20px; background-color: blue; color: white; border: none; border-radius: 5px; } بهذا تكون قد حولت ملف Sass إلى CSS بكل بساطة وبتعليمة واحدة فقط. كما توفر Sass ميزة ضغط أو تقليص حجم ملفات CSS الناتجة عن طريق إزالة المسافات الزائدة والتنسيقات غير الضرورية وهذا يساعد في تقليل زمن تحميل ملفات التنسيق وتحسين أداء موقع الويب. فلتحويل ملف Sass إلى CSS مضغوط، يمكنك إضافة خيار إضافي لتفعيل ضغط الملفات كما يلي: sass style.sass styles.css --style compressed يحدد الخيار style compressed-- في الكود أعلاه بأن كود Sass يجب أن يُنتج لنا ملف CSS مضغوطًا يحتوي على نسخة مختصرة من شيفرات CSS إذا ستكون الشيفرة الناتجة بدون أي مسافات زائدة أو تنسيقات غير ضرورية، وهذا يقلل من حجم الملف الناتج ويساعد في تسريع تحميل الموقع. الفرق بين Sass و SCSS و Less كل من Sass و SCSS و Less هي مُعالجِات مسبقة للغة CSS لكنها تختلف عن بعضها بالقليل من المميزات والتي سنشرحها لك تباعًا. أولًا: الفرق بين Sass و SCSS بدايةً يتمثل الفرق بين Sass و SCSS في اعتمادهما على طريقة مختلفة لكتابة التنسيقات فلغة Sass تعتمد في تنظيم كتل الكود على المسافات البادئة Indented Syntax، ولها امتداد ملف sass. أما صيغة SCSS فهي صيغة أحدث وأكثر انتشارًا وتعرف باسم Sassy CSS وتعتمد على الأقواس المتعرجة {} لتجميع وتنطيم كتل الكود، وتستخدم الفواصل المنقوطة لفصل القواعد وهي تشبه CSS القياسية أكثر ولها امتداد ملف scss. فكلاهما بالتالي متشابهان ويفعلان نفس الشيء، لكنهما مكتوبتان بأسلوب مختلف. فيما يلي مثال بسيط على كود مكتوب بأسلوب Sass: $primary-color: blue body font-family: Arial, sans-serif color: $primary-color .header background-color: $primary-color padding: 10px nav ul margin: 0 padding: 0 list-style: none li display: inline-block في حين يبين المثال التالي كود مكتوب بأسلوب SCSS: $primary-color: blue; body { font-family: Arial, sans-serif; color: $primary-color; } .header { background-color: $primary-color; padding: 10px; } nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } ثانيًا: الفرق بين Sass و Less أما بالنسبة للفرق بين Sass و Less فكلاهما معالجان مسبقان شائعان تستخدمان لتسهيل عملية كتابة CSS وجعلها أكثر تنظيمًا وقابليةً للصيانة، لكنهما تختلفان أيضًا ببعض الجوانب حيث أن Sass مبنية على لغة روبي Ruby، بينما Less مبنية على لغة جافاسكريبت JavaScript كما أن Sass أكثر شعبيةً وانتشارًا من Less، وقد زادت شعبيتها بعد أن اعتمد عليها بوتستراب Bootstrap وتكتب شيفرات Less بنفس أسلوب Scss. باختصار الفرق بين Sass و Scss و Less هو الصياغة النحوية لكل منها، وإن كانت في نهاية المطاف كلها معالجات مسبقة تحول إلى CSS لكن تستخدم Sass صيغة نحوية خاصة به حيث يتم حذف الأقواس والفاصلات المنقوطة، بينما تشبه SCSS صيغة CSS مما يجعلها أسهل قراءةً وفهمًا، وأخيرًا تمتلك LESS صيغة نحوية مشابهة لصياغة SCSS، لكنها مبينة باستخدام لغة جافا سكريبت ويعتمد اختيار اللغة المناسبة من بينها على تفضيلاتك ومتطلباتك الشخصية. ما هي أساسيات Sass تضيف لغة Sass مجموعة من القواعد والمفاهيم الأساسية والإمكانيات التي لا توفرها لغة CSS كما وضحنا سابقًا، وفيما يلي أوضح أهم أساسيات Sass مع أمثلة عملية بسيطة توضح كيفية استخدام ميزات Sass المختلفة في توسيع أكواد CSS. 1. المتغيرات يمكنك تخزين معلومات التنسيق في المتغيرات باستخدام Sass وإعادة استخدامها لاحقًا. على سبيل المثال، يمكنك تخزين قيمة لون كمتغير كما في الكود التالي الذي يعرف متغيرين باسم my-fore-color$ و my-back-color$ ويسند لهما قيم لونية مختلفة. $my-fore-color: #3445db; $my-back-color: #78a3d1; .container { background-color: $my-back-color; } .text { color: $my-fore-color; } عند معالجة ملف Sass أعلاه، سيأخذ القيم المذكورة في المتغيرين my-fore-color$ و my-back-color$ ويستخدمها في الأماكن التي يذكر فيهما اسم كل متغير فيها وينسق ألوان العناصر بناءً عليها، ماذا لو أردت بعدها تغيير لون الخلفية أو لون النص في موقعك؟ يكفي أن تعدل القيمة التي أسندتها للمتغير فقط بكل سهولة. 2. العمليات الحسابية يمكن استخدام الدوال الحسابية كالجمع والضرب والقسمة في Sass لتنفيذ عمليات حسابية على قيم تنسيقات العناصر وتعديلها. على سبيل المثال، يحدد الكود التالي حجم الخط المستخدم في الموقع بشكل ديناميكي بناءً على حجم الخط الأساسي: $base-font-size: 16px; .element { font-size: $base-font-size + 2px; } 3. الحلقات التكرارية توفر Sass إمكانية استخدام الحلقات التكرارية لتكرار كود التنسيقات عدد من المرات وهو أمر غير متاح في لغة CSS، للتوضيح لاحظ الكود التالي الذي يطبق مجموعة من التنسيقات على ثلاثة عناصر، بحيث يتزايد عرض كل عنصر عن السابق بمقدار 50 بكسل. @for $i from 1 through 3 { .item-#{$i} { width: 100px + $i * 50px; } } 4. التعليمات الشرطية توفر Sass أيضًا إمكانية كتابة تعليمات شرطية مثل if و else بطريقة مماثلة لطريقة عملها في مختلف لغات البرمجة، وبهذه الطريقة تمكنك من تحقيق تنسيقات شرطية وتُنفذ التنسيقات المحددة فقط عند تحقق حالات معينة، على سبيل المثال يغير الكود التالي تنسيق العناصر في الوضع الليلي أو النهاري بحسب قيمة المتغير ‎dark-theme$. $dark-theme: true; @if $dark-theme { color: #b3b3b3; font-weight: 300; background-color: #333333; } @else { color: #333333; font-weight: 400; background-color: #f5f5f5; } 5. الدوال Functions توفر لك Sass إمكانية تعريف دوال برمجية يمكنها استقبال وسطاء أو بارامترات وإرجاع قيمة معينة، وهذا يسهل تطبيق التنسيقات على العناصر وإعادة استخدامها في أكواد التنسيق الخاصة بك. على سبيل المثال نعرف في الكود التالي دالة باسم add-numbers تستقبل وسيطين هما ‎first-number$ و ‎second-number$. وترجع مجموعهما: @function add-numbers($first-number, $second-number) { @return $first-number + $second-number } بعد تعريف هذه الدالة يمكننا استخدامها في كتابة قواعد التنسيق، لنفرض مثلًا أننا نريد استبدال قيمة الخاصية padding بمجموع قيمتين منفصلتين، سنستدعي الدالة ونمرر لها قيم الوسطاء بهذا الشكل: .box1 { padding: add-numbers(20px, 10px); } ولتفهم الأمر أكثر سيكون CSS الناتج عن تحويل الكود أعلاه على النحو التالي: box1 { padding: 30px; } 6. المخاليط mixins تمثل المخاليط mixins في Sass قوالب تحتوي على خليط أو تجمّع لعدة خصائص CSS متكررة بحيث يمكنك إعادة استخدامها في أماكن متعددة داخل الكود .ولتعريف مزيج في Sass نكتب كالتالي: @mixin name { properties; } ولاستداعئه نكتب كود كالتالي: element { @include name; } لنوضح الأمر بمثال عملي، لاحظ في المثال التالي كيف عرّفنا خليط وأسميناه button-styles ووظيفته هي تعريف مجموعة من خصائص التنسيق للأزرار مثل لون الزر والخط المستخدم في الكتابة عليه وحجمه وغيرها من الخصائص: @mixin button-styles($background-color, $text-color, $font-size, $padding) { background-color: $background-color; color: $text-color; font-size: $font-size; padding: $padding; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; بعدها يمكننا بسهولة استخدام هذا الخليط من القيم في تنسيق أي زر في الموقع وليكن الزر الذي يملك الصنف button-primary. من خلال كتابة التعليمة include@ وتمرير القيم المناسبة للمتغيرات كما يلي: .button-primary { @include button-styles(#3498db, #ffffff, 16px, 10px 20px); } كما يمكن تنسيق زر آخر وليكن الزر الذي يملك الصنف button-secondary.بتمرير قيم مختلفة على هذا النحو: .button-secondary { @include button-styles(#2ecc71, #ffffff, 14px, 8px 16px); } بهذه الطريقة أعدنا استخدام مجموعة الخصائص وطبقناها على أنماط متعددة بسهولة وبحجم كود قليل جدًا مقارنة بالكود المكافئ الذي سنكتبه بلغة CSS. 7. ميزة الأكواد المتشعبة Nesting لا تسمح CSS بالعمل مع التداخلات في الكود، بينما تمكننا Sass من كتابة أكواد متشعبة وفق تسلسل هرمي، لاحظ الكود التالي المكتوب بلغة CSS: .header { background-color: #333; } .header h1 { color: white; } .header p { font-size: 16px; } يمكن كتابته بكود Sass مكافئ باستخدام ميزة التضمين داخل المحدد header. كما يلي: .header { background-color: #333; h1 { color: white; } p { font-size: 16px; } } هذا يعني أن جميع قواعد لغة CSS التي تظهر داخل header. تنطبق على العناصر داخل header. فقاعدة h1 هنا سنطبق على العناصر h1 الموجودة داخل عنصر يملك الصنف header.فقط، وقاعدة p ستنطبق على العناصر p الموجودة داخل عنصر له الصنف header. فقط، والكتابة بهذا الأسلوب كما تلاحظ تجعل الكود أكثر تنظيمًا وسهولة في القراءة. كانت هذه أهم أساسيات لغة Sass، ولمطالعة المزيد حول أساسيات Sass ننصحك بمشاهدة الفيديو التالي: مميزات Sass توفر لنا لغة Sass مجموعة من المميزات من أبرزها: توفر لغة Sass مرونة في كتابة تنسيقات عناصر الموقع. إمكانية حفظ قيم التنسيقات في متغيرات بدلاً من استخدام قيم محددة. تُمكنك من توليد شيفرة منظمة وسهلة الفهم والصيانة. تُمكنك من توليد شيفرة قابلة لإعادة الاستخدام وتجنب تكرار الكود. سهلة الصيانة والتعديل حيث يتم التعديل في مكان واحد بدلاً من عدة أماكن. سهلة التعلم لا سيما إذا كنت ملمًا بأساسيات لغة CSS. متوافقة مع جميع إصدارات CSS ويمكنك استخدام أي مكتبات CSS متاحة. عيوب Sass من بين عيوب أو سلبيات لغة Sass نذكر التالي: لا يمكن تنفيذ أكواد Sass مباشرة بل يجب ترجمة الكود المكتوب إلى CSS قبل استخدامه، مما يضيف خطوة إضافية لعملية التطوير. عند إجراء أي تغييرات في تنسيق الموقع تحتاج من جديد لترجمة التغييرات. صعوبة التصحيح فقد تؤدي الترجمة إلى ظهور أخطاء وتجعل عملية التصحيح أصعب قد يستغرق تعلم استخدام مميزات Sass والتآلف معها لبعض الوقت. تعلم Sass إذا كنت مهتمًا بتعلم لغة Sass واحتراف التعامل مع شيفراتها البرمجة فإليك مجموعة من الخطوات التي عليك اتباعها لتحقيق هذفك: تعلم طريقة تثبيت Sass حسب بيئة التطوير ونظام التشغيل الذي تستخدمه. تعلم أساسيات البرمجة والتفكير المنطقي فهي تساعدك على فهم مبادئ Sass. تعلم القواعد الصياغية ومبادئ وأساسيات Sass وتدرب على أمثلة تطبيقية بسيطة حولها. ابدأ بكتابة أكواد Sass بسيطة تتضمن مفاهيم أساسية مثل تعريف المتغيرات في Sass والتعليمات الشرطية والحلقات في Sass وغيرها من المفاهيم، وتحويلها إلى ملفات CSS وافهم آلية عملها. انتقل إلى كتابة أكواد أكثر تعقيدًا تتضمن الدوال وخليط الميزات وغيرها من المفاهيم المتقدمة. طبَّق كل ما تعلمته على مشاريع فعلية، فالفوائد الحقيقى ستظهر لك عند العمل على مشاريع أكبر وأكثر تعقيدًا. ستجد في أكاديمية حسوب الكثير من المصادر التعليمية التي تساعدك على تعلم لغات تطوير الواجهة الأمامية من دورس ومقالات وكتب متنوعة، كما توفر الأكاديمية دورة متكاملة تأخذ بيدك خطوة بخطوة لتتعلم كل التقنيات التي تحتاجها لتصبح مطور واجهات أمامية محترف مع التطبيق العملي لمشاريع متنوعة تساعدك على بناء معرض أعمال مميز وشهادة معتمدة في ختام الدورة تثبت خبرتك وتعزز فرصتك في الحصول على فرصة عمل. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن الخلاصة أرجو أن يكون هذا المقال قد وضح لك ماذا تعني Sass وكيفية التعامل معها واستخدامها لتحسين وتسريع عملية تنسيق صفحات المواقع بدل استخدام لغة CSS القياسية، ووضح لك أهم الفروقات بين Sass و SCSS و Less وكيفية استخدام كل منهما وما هي أهم خطوات تعلمها. إذا كان لديك سؤال حول هذه التقنية المفيدة في تصميم الواجهات الأمامية يمكنك تركه في قسم التعليقات أسفل المقال أو كتابته في قسم الأسئلة والأجوبة في أكاديمية حسوب. اقرأ أيضًا توثيق Sass باللغة العربية مدخل إلى Sass أمثلة لبعض الدوال المساعدة (mixins) عند كتابة CSS باستخدام SASS لا تكرّر نفسك (DRY): أعد استخدام دوالّ Sass التي كتبتها