جميل بيلوني

في عالمنا المتغير بسرعة، يعد الذكاء الاصطناعي أحد أكثر التكنولوجيات انتشارًا وتأثيرًا في حياتنا. فالذكاء الاصطناعي يُعدّ من أكثر التطورات المثيرة والمهمة في عصرنا، إذ يوفر فرصًا جديدة لتطوير حياتنا وأعمالنا بطرق لم نكن نتخيلها من قبل. ومن بين تطبيقات الذكاء الاصطناعي، تأتي العديد من التطبيقات المميزة، مثل التعرف على الصوت والصور والترجمة الفورية، وحتى الروبوتات التي تستطيع العمل بدلاً من الإنسان في بعض المهام. فالذكاء الاصطناعي يوفر العديد من المزايا والفرص لتحسين حياتنا وأعمالنا بشكل كبير. وبالنظر إلى الذكاء الاصطناعي في نطاق الشركات، فهو يتيح لها الفرصة للتحسين من كفاءة عملياتها وتقليل الأخطاء، إلى جانب توفير تحليلات وإحصاءات دقيقة عن البيانات المخزنة والمعالجة. ومن بين أفضل التطبيقات على الذكاء الاصطناعي هي تطبيقات معالجة اللغات الطبيعية و التي انبثقت منها أدوات مثل ChatGPT التي تتيح للمستخدمين التفاعل مع النظام والحصول على إجابات دقيقة وفعالة عن الأسئلة المختلفة التي تتعلق بالمواضيع المختلفة. ChatGPT المقدم من openAI هو مثالٌ على كيف يمكن للذكاء الاصطناعي أن يساعد في التواصل بين الناس، فهو يوفر فرصة للتفاعل الفعال والدقيق بين المستخدمين والنظام. وبفضل تقنيات الذكاء الاصطناعي الحديثة، يستطيع ChatGPT التعرف على مواضيع وأسئلة مختلفة وتقديم إجابات دقيقة ومفيد ما هي OpenAI API هل تريد تطوير تطبيقات وأدوات تعتمد على تقنيات الذكاء الاصطناعي بسهولة وبدون الحاجة إلى دراسة عميقة في هذا المجال؟ هذا بالضبط ما يوفره OpenAI API، حيث يمكن للمطورين الاستفادة من الأدوات المتطورة لتطوير التطبيقات التي تستند إلى الذكاء الاصطناعي. يعد OpenAI API من أكثر الواجهات البرمجية شيوعًا في مجال الذكاء الاصطناعي، حيث يوفر للمطورين الوصول إلى النماذج الأكثر تطورًا للتعلم الآلي والتي تدعم العديد من التطبيقات والأدوات. فباستخدام هذه الواجهة البرمجية، يمكن للمطورين إنشاء تطبيقات متطورة تعتمد على الذكاء الاصطناعي في مجالات مختلفة مثل التسويق والتعليم والصحة والإدارة والمالية وغيرها. ومن بين أهم التطبيقات التي يمكن استخدام OpenAI API فيها هي التحدث مع الآلة والتعرف على الصور والنصوص والتحكم في الأجهزة الذكية. كما يمكن استخدامها في مجالات مختلفة مثل الروبوتات والألعاب والتصميم والترجمة والعديد من التطبيقات الأخرى. وبفضل تقنياتها المتطورة، تمكّن OpenAI API المستخدمين من الوصول إلى أدوات ونماذج التعلم الآلي الأكثر تطورًا، مما يجعلها خيارًا جيدًا للمطورين الذين يبحثون عن الحلول الفعالة لتطوير التطبيقات التي تعتمد على الذكاء الاصطناعي. نتعلم في هذا المقال كيفية الاستفادة من واجهة OpenAI API والاتصال بخدمة ChatGPT واستعمالها في تطبيق عملي بسيط، ويمكنك أنت بعد ذلك استعمالها في أي تطبيق تريده. فكرة المشروع ومتطلباته في هذا المقال، سنستكشف كيفية إنشاء مساعد شخصي باستخدام ChatGPT API بطريقة فعالة ومبتكرة، وكيفية تخصيص تجربة المستخدم لتلبية احتياجاتهم الفردية، سنتحدث أيضًا عن أهمية هذه التقنية في عالمنا الرقمي الحديث، وكيف يمكن أن يكون بناء مساعد شخصي باستخدام ChatGPT API استثمارًا قيماً و لكن قبل الشروع في التنفيذ علينا أن نلقي نظرة خاطفة على التقنيات المستخدمة لربط ChatGpt برمجيًا باستخدام Node.js. المتطلبات المسبقة لبناء المشروع: تثبيت بيئة Nodejs: لمن لا يعرفها، هي بيئة تشغيل JavaScript خارج المتصفح. إطار العمل Express.js: لتطوير تطبيقات الويب باستخدام Node.js، وارجع إلى مقال إعداد بيئة تطوير Node مع Express من أجل تثبيته مع Node.js. واجهة OpenAI API: توفر خدمات وأدوات للمطورين لإنشاء تطبيقات وأنظمة تعتمد على تقنيات الذكاء الاصطناعي. وتشمل خدمات OpenAI API العديد من الأدوات والتقنيات مثل GPT-3 وDALL-E ومنصة الاستكشاف للتحليلات اللغوية وتطبيقات الروبوتات والعديد من الخدمات الأخرى. الآن سنقوم بكتابة الكود البرمجي خطوة بخطوة، بدءًا من إعداد بيانات الواجهة API وصولاً إلى بناء بوت دردشة يمكنه فهم استفسارات المستخدمين والرد عليها بلغة طبيعية. تهيئة المشروع ننشئ مجلدًا جديدًا عن طريق إدخال التعليمات التالية في الطرفية terminal ونطلق عليه اسم خاص بالمشروع: $ mkdir chatgpt-api-bot $ cd chatgpt-api-bot ننشئ ملف package.json عبر الأمر التالي: $ npm init -y نضيف الحزم التالية: openai: توفر مكتبة OpenAI Node.js وصولاً إلى واجهة OpenAI API من تطبيقات Node.js readline-sync: توفر قراءة متزامنة إدخالات المستخدم من سطر الأوامر Dotenv: تسمح لنا بادارة المتغيرات في الملف ‎.env داخل بيئة المشروع إطار العمل Expressjs body-parser: تسمح لك بمعالجة الطلبات بتنسيقات مختلفة مثل JSON و XML. $ npm i openai@4.20.0 readline-sync@1.4.10 dotenv@16.3.1 express@4.18.2 body-parser إنشاء مفتاح api من OpenAI لكي نتمكن من استخدام واجهة OpenAI API داخل تطبيق Node.js، نحتاج أولاً إلى إنشاء مفتاح API من لوحة تحكم OpenAI. لإنشاء المفتاح، نتحتاج إلى إنشاء حساب مستخدم على https://openai.com والوصول إلى قسم مفاتيح واجهة برمجة التطبيقات في لوحة تحكم OpenAI ثم إنشاء مفتاح جديد. هذا المفتاح سري ويجب ألا يتم مشاركته مع أي شخص آخر، سنحتاج إلى استخدام هذا المفتاح لاحقًا عند تنفيذ برنامج Node.js للوصول إلى OpenAI API. نضيف هذا المفتاح إلى متغير البيئة في المشروع الخاص بنا، حيث ننشئ ملفًا جديدًا: touch .env نضيف في هذا الملف المتغير OPENAI_API_KEY ونسند له قيمة المفتاح api الذي نسخناه للتو: OPENAI_API_KEY="YOUR OPEN AI API KEY" بناء الواجهة الخلفية backEnd الخاص بالمشروع ننشئ ملف المشروع و ليكن اسمه index.js: $ touch index.js داخل ملف index.js نبدأ في كتابة الكود ونقوم أولا باستدعاء الحزم التي قمنا بتحميلها داخل المشروع: const express = require("express"); const bodyParser = require("body-parser"); const OpenAI = require("openai"); require("dotenv").config(); Configuration و OpenAIApi هي كائنات من حزمة OpenAI، والتي تستخدم للاتصال بواجهة OpenAI API واستخدامها dotenv لتحميل متغيرات بيئة المشروع من ملف ‎.env ننشئ بعد ذلك خادم المشروع عبر Express: const app = express(); const port = 3000; app.listen(port, () => { console.log(`Server is listening on port ${port}`); }); بناء كود الربط بين openAI api والتطبيق نضبط مكتبة openai بتمرير قيمة المفتاح الموجود في ملف بيئة المشروع: const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY, }); ننشئ الآن مصفوفة فارغة لتخزين سجل المحادثة ضمنها والتي من شأنها توفير سياق المحادثة للذكاء الاصطناعي لتوليد الإجابات المناسبة: const history = []; ننشئ مصفوفة للرسائل ثم نستخدم حلقة for لتكرار سجل المحادثة وإنشاء قائمة بالرسائل بالتنسيق المناسب لبوت الدردشة ChatGPT الخاص بـ OpenAI. و إعطاء كل رسالة دور role (إما "مستخدم" أو "مساعد ") والمحتوى (نص الرسالة)، ولمزيد من التفصيل يمكن الإطلاع على صفحة Text generation models من openAI. نضيف بعد ذلك مدخلات المستخدم user_input ودوره الحالي إلى نهاية مصفوفة الرسائل: const messages = []; for (const [input_text, completion_text] of history) { messages.push({ role: "user", content: input_text }); messages.push({ role: "assistant", content: completion_text }); } messages.push({ role: "user", content: user_input }); الآن نستخدم openai.createChatCompletion لتوليد رد من OpenAI API وندخل معامل نموذج الذكاء الاصطناعي الخاص بتوليد الرد وهو نموذج gpt-3.5-turbo: const completion = await openai.createChatCompletion({ model: "gpt-3.5-turbo", messages: messages, }); يوجد أكثر من معامل ويمكنك زيارة صفحة models لمعرفة المعاملات المتوفرة واختلافها ومعامل الرسائل messages أيضًا. نستخدم بعد ذلك التابع createChatCompletion لتوليد الاجابة من خلال الواجهة openAi API، ويتم استخراج الاستجابة التي تم إنشاؤها من نموذج ذكاء اصطناعي AI من الكائن completion ونخزنها في المتغير completion_text، ثم نطبع الاجابة في الطرفية. const completion_text = completion.choices[0].message.content; console.log(completion_text); ندخل البيانات التالية إلى مصفوفة سجل المحادثة: النص الحالي الذي أدخله المستخدم user_input والرد الذي تم إنشاؤه من قبل نموذج الذكاء الاصطناعي completion_text: history.push([user_input, completion_text]); ثم نعالج الأخطاء التي يمكن أن تحدث أثناء تنفيذ الطلب بطباعة كود الخطأ ومعلومات عن الخطأ عن طريق استخدام try/catch في JavaScript: try{ // code here } catch (error) { if (error.response) { console.log(error.response.status); console.log(error.response.data); } else { console.log(error.message); } } ما هي عمليات CRUD؟ عمليات CRUD هي اختصار للعمليات الأربعة الأساسية التي يتم استخدامها في إدارة البيانات وهي الإنشاء Create والقراءة Read والتحديث Update والحذف Delete، ويتم استخدام هذه العمليات في العادة في تطوير تطبيقات الويب والبرمجيات المختلفة التي تتعامل مع قواعد البيانات. ويوفر إطار العمل Express وظائف مختلفة لتسهيل عمليات الإنشاء والقراءة والتحديث والحذف والتي تتماشى مع عمليات CRUD. على سبيل المثال، يوفر Express وظائف لمعالجة طلبات http مثل: app.post()‎ للإنشاء app.get()‎ للقراءة app.put()‎ للتحديث app.delete()‎ للحذف ويمكن استخدام هذه الوظائف لتنفيذ عمليات CRUD بسهولة في تطبيقات Express، مما يساعد في إدارة البيانات بشكل فعال. بناء نقاط الوصول الخاصة بالمشروع سنستخدم في مشروعنا عمليتين فقط لإدارة البيانات وهما عملية الإنشاء وعملية القراءة حاليًا. نقوم بقراءة ملف index.html الذي سننشئه لاحقًا لعرض الواجهة الأمامية للتطبيق: // Serve the index.html file app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); لمعالجة الرسائل القادمة من المستخدم نستخدم app.post ونقوم بكتابة كود الربط بين واجهة openAi APi والتطبيق داخل الدالة ونضيف الاستجابة اللي سوف تعود لنا من openAi APi: … app.post('/message', async (req, res) => { const message = req.body.message; // If there is a previous message, include it in the prompt const user_input = history.length > 0 ? `سجل المحادثة:\n${history.join('\n')}\nأنت: ${message}\n` : `أنت: ${message}\n`; const messages = []; for (const [input_text, completion_text] of history) { messages.push({ role: "user", content: input_text }); messages.push({ role: "assistant", content: completion_text }); } messages.push({ role: "user", content: user_input }); try { const completion = await openai.chat.completions.create({ model: "gpt-3.5-turbo", messages: messages, }); const completion_text = completion.choices[0].message.content; console.log(completion_text); history.push([user_input, completion_text]); res.json({ message: completion_text }); } catch (error) { if (error.response) { console.log(error.response.status); console.log(error.response.data); res.status(500).json({ error: 'Something went wrong' }); } else { console.log(error.message); res.status(500).json({ error: 'Something went wrong' }); } } }); لاحظ أننا قمنا بتخزين الرسائل القادمة من طلب http المرسل من المستخدم داخل المتغير message: message = req.body.message; وأعدنا الاستجابة التي نحصل عليها عبر: res.json({ message: completion_text }); انتهينا الآن من بناء الواجهة الخلفية للتطبيق وهي جاهزة للعمل، وكخطوة إضافية تُطلب عادة في اختبار الواجهات الخلفية، يمكنك تجربة نقاط الوصول عبر تطبيق postman أو Insomnia والتأكد من أن كل شيء يعمل بشكل صحيح. بناء الواجهة التفاعلية للتطبيق سنبدأ الآن بناء الواجهة الأمامية للتطبيق وهي صفحة HTML بسيطة تمكن من التفاعل مع خدمة ChatGPT ورؤية النتيجة مباشرةً. إنشاء الصفحة الرئيسية ننشئ ملف index.html الذي يمثل واجهة التطبيق الذي نعمل على بنائه: $ touch index.html نضيف كود HTML الأساسي ونضع ضمن وسم title عنوان الصفحة ولتكن دردش مع البوت chatbot: <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <title>دردش مع البوت chatbot</title> </head> <body> </body> </html> الآن نكتب كود الصفحة داخل وسم body: <div id="container"> <h1>دردش مع البوت chatbot</h1> <div id="conversation"></div> <form> <input type="text" id="message" placeholder="اكتب رسالتك هنا" /> <button type="submit">إرسال</button> </form> </div> هنا قمنا بإضافة عنوان يظهر بأعلى الصفحة واستمارة form تحوي قسمًا لإدخال استفسارات المستخدم وزر الإرسال، ثم نعرض المحادثة داخل العنصر <div id="conversation"></div>. تنسيق الصفحة الرئيسية نقوم بوضع الكود التالي ضمن وسم <head> وهو تنسيق جاهز بسيط أضفناه للصفحة ويمكنك تعديله أو كتابة التنسيق الخاص بك: <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } #container { padding: 8rem 16rem; } h1 { text-align: center; margin: 2rem 0; } form { display: flex; justify-content: space-between; align-items: center; margin: 2rem 0; } input[type="text"] { height: 2rem; flex: 1; padding: 1rem; font-size: 1.2rem; border-radius: 0.5rem; border: none; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); } button[type="submit"] { height: 4rem; padding: 0 1.2rem; margin-right: 1rem; font-size: 1.2rem; border-radius: 0.5rem; border: none; background-color: #007bff; color: white; cursor: pointer; } #conversation { margin: 2rem; } p { margin: 0.5rem 0; } .user { color: #007bff; font-weight: bold; } .chatbot { color: #333; font-weight: bold; width: 50%; } </style> الصفحة بسيطة وستظهر بالشكل التالي: سنعمل بعدها على تركيب أجزاء المشروع مع بعضها بربط الواجهة الأمامية مع الخلفية وتجربة خصائصه. ربط الواجهة الأمامية مع الواجهة الخلفية الآن نكتب الكود الخاص بربط الواجهة الخلفية مع الواجهة التفاعلية الأمامية ونضيفه ضمن وسم body: <script> const conversationElem = document.getElementById('conversation'); const messageInput = document.getElementById('message'); // Send message to chatbot on form submit document.querySelector('form').addEventListener('submit', async (event) => { event.preventDefault(); const message = messageInput.value; messageInput.value = ''; // Send message to server and wait for response const response = await fetch('/message', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message }) }).then(res => res.json()); // Add user message and chatbot response to conversation conversationElem.innerHTML += `<p class="user">أنت: ${message}</p>`; conversationElem.innerHTML += `<p class="chatbot">البوت: ${response.message}</p>`; console.log(response.message) }); </script> قمنا بتعريف متغيرين الأول هو conversationElem لقسم المحادثة والثاني messageInput لمدخلات المستخدم ثم قمنا باختيار النموذج الذي انشأناه في ملف index.html لمعالجة البيانات المدخلة وإرسالها إلى الواجهة الخلفية، ونستخدم لذلك الغرض دالة fetch من خلال عملية post التي قمنا بشرحها سابقًا. ثم نقوم باضافة رسالة المستخدم واستجابة بوت المحادثة المرسلة من الواجهة الخلفية للتطبيق من خلال استخدام الدالة innerHTML ونضيف العناصر ضمن وسم النص <p> ونكون بذلك قد انتهينا من المشروع النموذجي. الكود النهائي للمشروع ملف index.js: const express = require("express"); const bodyParser = require("body-parser"); const OpenAI = require("openai"); require("dotenv").config(); const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY, }); const app = express(); const port = 3000; // Array to store previous messages const history = []; // Middleware to parse JSON in the request body app.use(bodyParser.json()); // Serve the index.html file app.get("/", (req, res) => { res.sendFile(__dirname + "/index.html"); }); // Handle incoming messages app.post("/message", async (req, res) => { const message = req.body.message; // If there is a previous message, include it in the prompt const user_input = history.length > 0 ? `سجل المحادثة:\n${history.join("\n")}\nأنت: ${message}\n` : `أنت: ${message}\n`; const messages = []; for (const [input_text, completion_text] of history) { messages.push({ role: "user", content: input_text }); messages.push({ role: "assistant", content: completion_text }); } messages.push({ role: "user", content: user_input }); try { const completion = await openai.chat.completions.create({ model: "gpt-3.5-turbo", messages: messages, }); const completion_text = completion.data.choices[0].message.content; console.log(completion_text); history.push([user_input, completion_text]); res.json({ message: completion_text }); } catch (error) { if (error.response) { console.log(error.response.status); console.log(error.response.data); res.status(500).json({ error: "Something went wrong" }); } else { console.log(error.message); res.status(500).json({ error: "Something went wrong" }); } } }); // Start the server app.listen(port, () => { console.log(`Server is listening on port ${port}`); }); ملف index.html: <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } #container { padding: 8rem 16rem; } h1 { text-align: center; margin: 2rem 0; } form { display: flex; justify-content: space-between; align-items: center; margin: 2rem 0; } input[type="text"] { height: 2rem; flex: 1; padding: 1rem; font-size: 1.2rem; border-radius: 0.5rem; border: none; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); } button[type="submit"] { height: 4rem; padding: 0 1.2rem; margin-right: 1rem; font-size: 1.2rem; border-radius: 0.5rem; border: none; background-color: #007bff; color: white; cursor: pointer; } #conversation { margin: 2rem; } p { margin: 0.5rem 0; } .user { color: #007bff; font-weight: bold; } .chatbot { color: #333; font-weight: bold; width: 50%; } </style> <title>دردش مع البوت chatbot</title> </head> <body> <div id="container"> <h1>دردش مع البوت chatbot</h1> <div id="conversation"></div> <form> <input type="text" id="message" placeholder="اكتب رسالتك هنا" /> <button type="submit">إرسال</button> </form> </div> <script> const conversationElem = document.getElementById("conversation"); const messageInput = document.getElementById("message"); // Send message to chatbot on form submit document .querySelector("form") .addEventListener("submit", async (event) => { event.preventDefault(); const message = messageInput.value; messageInput.value = ""; // Send message to server and wait for response const response = await fetch("/message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message }), }).then((res) => res.json()); // Add user message and chatbot response to conversation conversationElem.innerHTML += `<p class="user">أنت: ${message}</p>`; conversationElem.innerHTML += `<p class="chatbot">البوت: ${response.message}</p>`; console.log(response.message); }); </script> </body> </html> تجربة التطبيق ندخل الأمر التالي بالطرفية لتشغيل التطبيق: $ node index.js ثم نذهب للمتصفح ونقوم بإدخال العنوان التالي localhost:3000 لتظهر لنا واجهة التطبيق، ندخل أي سؤال وليكن كتابة قصة قصيرة وننتظر الرد من التطبيق كما في الصورة التالية: يمكنك تحميل كود التطبيق من هنا chatgpt-api-bot.zip تطويرات يمكن إضافتها للمشروع يمكننا تطوير المشروع السابق بالعديد من الطرق، ومنها: إضافة ميزات لبوت الدردشة: يمكنك إضافة ميزات جديدة مثل إضافة قائمة من الخيارات للمستخدم للاختيار من بينها مثل إضافة طريقة رد البوت هل هي بطريقة جدية أو بطريقة مضحكة أو بسخرية …إلخ، أو تمكين البوت من إجراء بعض العمليات الرياضية أو توفير إجابات علمية أو حتى إنشاء بوت لتعلم شيء جديد مثل تعلم البرمجة أو تعلم الإنجليزية وهكذا. تحسين واجهة المستخدم: يمكنك تحسين واجهة المستخدم لتبدو أكثر جاذبية وسهولة في الاستخدام، ويمكنك استخدام مكتبات CSS المختلفة لتحسين التصميم والإضاءة على المكونات المهمة في الصفحة. تخزين المحادثات: يمكنك إضافة القدرة على تخزين المحادثات السابقة بين المستخدم والشات بوت، وعرضها للمستخدم عند الضرورة. إضافة تحليلات: يمكنك إضافة تحليلات للمحادثات، مثل عدد المحادثات الناجحة والمحادثات التي تم إنهاؤها بشكل مبكر التي قام المستخدم باغلاقها، وعرضها بشكل رسومي لمساعدتك في تحسين أداء البوت. استخدام مكتبة React أو Vue لتصميم واجهة أمامية تفاعلية أكثر وأداء أفضل. ربط البوت مع خدمات openAI الأخرى المختلفة مثل استعمال رده في توليد صورة من خدمة DALL·E هذه بعض الأفكار التي يمكن تطبيقها لتطوير مشروع الدردشة ويمكنك استخدامها كنقطة انطلاق لمشاريعك المستقبلية، ويمكنك أن تطلع على صفحة الأمثلة من openAI التي تحوي على عشرات الأمثلة والتطبيقات التي يمكن الاستلهام منها والبناء عليها. الخلاصة بهذا نكون قد انتهينا من هذا المقال الذي شرحنا فيه كيفية ربط واجهة برمجة تطبيقات OpenAI API عبر خدمة ChatGPT مع Node.js لإنشاء بوت دردشة بسيط. وباستخدام هذه التقنيات يمكن للمطورين إضافة قيمة كبيرة لتطبيقاتهم على الويب، وتوفير تجربة مميزة للمستخدمين، وكما رأينا، فإن استخدام OpenAI's ChatGPT في Node.js ليس صعبًا بقدر ما يبدو، ويمكن لأي مطور أن يبدأ في تجربتها والاستفادة منها. ومن المؤكد أننا سنشهد مزيدًا من التطورات والتحسينات في مجال الذكاء الاصطناعي والبوتات الذكية في المستقبل، ولذلك يجب أن نستعد لمواكبة هذه التحولات والتطورات بالاستمرار في تعلم وتحسين مهاراتنا في هذا المجال، فلا شك أنه بالعمل الجاد والاستمرار في الابتكار، يمكن للجميع أن يحققوا نجاحات كبيرة في هذا المجال الواعد. اقرأ أيضًا دليل استخدام ChatGPT API لتحسين خدماتك عبر الإنترنت تطوير تطبيق 'وصفة' لاقتراح الوجبات باستخدام ChatGPT و DALL-E في PHP تطوير تطبيق 'علمني' لاستكشاف المواضيع باستخدام جافا سكريبت و ChatGPT

كيف تتعلم البرمجة هو سؤال من أشهر الأسئلة على الإنترنت التي تدور في فلك البرمجة وعلوم الحاسوب وشهرته تأتي من كون البرمجة programming من أهم المجالات وأكثرها طلبًا في وقتنا الحالي، ولا أحد ينكر أنها جزءٌ أصيلٌ مرتبط بالتقنية التي تشكل حاضرنا ومستقبلنا، فكل شيء أصبح مرتبط بالحواسيب ويحتاج الحاسوب إلى أن نخاطبه بلغته للتواصل معه وتوجيهه وتلقينه الأوامر. وبذكر الحاسوب، فقد أصبحنا محاصرين بكم كبير من الحواسيب حولنا بدءًا من هواتفنا الذكية التي هي حواسيب مصغَّرة مرورنا بآلة الغسيل وجلي الصحون وحتى الطائرات، ولنذكر أن عالمنا الآن يتجه إلى أتمتة المعلومات وحوسبة العمليات على جميع الأصعدة بطريقة سريعة وبعيدًا عن الروتين، كما يتجه إلى الاعتماد على التطبيقات الحاسوبية اعتمادًا كبيرًا وكل ذلك لا يتحقق إلا بوجود عدد كبير من المبرمجين لبرمجتها. تعد البرمجة من المهارات الرائعة صراحة إذ تمكنك من بناء تطبيقات مفيدة تحل الكثير من المشكلات الحياتية كما قد تخترع أنظمة وتقنيات مفيدة للبشرية مثل أنظمة الاتصالات وأيضًا الأنظمة البنكية وأنظمة البيع والشراء وغيرها التي سهلت حياة البشر وزادت من إنتاجيتهم وقدراتهم، فعملك كبمرمج يكسبك دومًا خبرات متجددة تزداد مع زيادة سنوات عملك كمبرمج، ولا ننسَ أن أشهر أثرياء عالمنا اليوم هم مبرمجون في الأصل. أضف إلى أن البرمجة توسع من خبرتك باطراد دائم، وتفتح لك أبوابًا لمهن مطلوبة في يومنا الحالي وبشدة أكثر من أي مهنة أخرى، لتؤمن لك دخلًا جيدًا بل وحتى حرية ومرونة في العمل أينما كنت حتى من منزلك فلا يتطلب في بعض الحالات وجود المبرمج في موقع العمل. بناءً على ما سبق، من الطبيعي أن ترى أعداد المتوافدين على باب تعلم البرمجة كبيرًا يزداد يومًا بعد يوم، وتحتاج قبل دخوله وبدء تعلم البرمجة إلى امتلاك بوصلة تهديك طيلة الطريق فبدونها ستضيع في هذا العالم الكبير الواسع وقد تنسحب منه وتعود أدراجك لعدم سلوكك الطريق الصحيح، لذا ستحصل في نهاية هذا المقال على بوصلة كيف تتعلم البرمجة تعينك على دخول هذا الطريق من أسهل طرقه وأسرعها إلى امتلاك الخبرة ودخول سوق العمل، فهل أنت جاهز؟ لننطلق! فهرس المحتويات ماذا تعني البرمجة؟ لماذا تتعلم البرمجة؟ طرق لتعلم البرمجة تعلم البرمجة عبر الجامعة تعلم البرمجة عن بعد عبر الإنترنت كيف تتعلم البرمجة مفاهيم تعلم البرمجة: التأسيس الصحيح أدوات تعلم البرمجة: اختيار الوجهة والتخصص نصائح لتعلم البرمجة أسئلة شائعة حول كيف تتعلم البرمجة هل تعلم البرمجة صعب؟ هل يؤثر نمط شخصيتي على تعلم البرمجة؟ هل احتاج إلى إتقان اللغة الإنجليزية لتعلم البرمجة؟ هل هناك مصادر عربية لتعلم البرمجة؟ هل احتاج إلى خبرة في الرياضيات لتعلم البرمجة؟ كيف تتعلم البرمجة من الصفر؟ أنا لست منظمًا فكيف ألتزم في تعلم البرمجة بنفسي؟ هل يمكنني تعلم البرمجة عبر الجوال؟ ماذا تعني البرمجة؟ البرمجة -كما ذكرنا باختصار في المقدمة- هي الطريقة الوحيدة للتخاطب مع الحواسيب والأجهزة الإلكترونية الذكية لإخبارهم بكيفية تنفيذ الأوامر والمهام التي يجب عليهم تنفيذها، فعلى الرغم من ظننا بأن الحواسيب والأجهزة ذكية كما يقال، إلا أن تلك المقولة خطأ لأن تلك الأجهزة لا تفكر ولا تتمتع بذرة من الذكاء وإنما تتسم بالسرعة والدقة الكبيرة في تنفيذ ما يُقال لها فقط. إذًا، البرمجة هي الطريقة وأسلوب سرد الخطوات المراد تنفيذها للحاسوب بناء على خوارزمية معينة أما الأداة المستخدمة في توضيح تلك الطريقة والخطوات فهي لغة البرمجة وبما أنها أداة فالأدوات كثيرة لتناسب مختلف الاحتياجات لهذا تجد الكثير من لغات البرمجة أما المفهوم والأسلوب فهو شبه ثابت لا يتغير وهنا قد تتطرق في طريق تعلم البرمجة إلى مفهوم لخوارزميات التي يمكن تنفيذها بأكثر من لغة برمجة. لماذا تتعلم البرمجة؟ هناك طلب كبير على مطوري البرامج اليوم، إذ سيزداد الطلب عليهم بنسبة 22 بالمائة بين عامي 2022 و 2030 وفقًا لمكتب إحصاءات العمل الأمريكي وذلك موازنةً بأربعة بالمائة بالنسبة للوظائف الأخرى، إذ تُعَدّ البرمجة مجال العصر والأكثر طلبًا في الوقت الحالي بين المهن الأخرى كما ذكرنا، فامتلاكك لهذه المهارة بمثابة امتلاكك لنقطة من نقاط قوة هذا العصر وتفتح لك أبوبًا واسعة في سوق العمل وضمن قطاعات مختلفة بسبب التقدم الرهيب في التقنية. كما تتعدد الأسباب حول الهدف من تعلم البرمجة، ولكن أكثرها انتشارًا هو ما يلي: تُعَدّ البرمجة مهنة عالمية عابرة للدول والقارات، إذ يمكن تطبيقها وتوظيفها في أيّ بلد كان مهما كانت ثقافته أو لغته. تعلم البرمجة مهم كون العالم يتجه إلى أتمتة المعلومات كما ذكرنا، وبالتالي تسريع المهام الروتينية وتوفير المزيد من الوقت والجهد البشري. يتعلق تعلم البرمجة بصورة أساسية بتعلم المنطق والرياضيات، لذا فهي توجّه ممتع لمن يهتم بمثل هذه المجالات. تحقيق مكاسب مادية، إذ يتقاضى المبرمجون رواتب عالية من خلال وظائف في شركات كبرى أو من خلال مشاريع ذاتية يصممها المبرمج بذاته ويبيعها لجهة معينة. تمكّنك من العمل الحر عبر منصات عمل حر مثل مستقل دون التقيد بجهة معينة كما يمكنك العمل من أيّ مكان كان من منزلك مثلًا، وبالتالي ستوفر عليك العديد من الالتزامات مثل قوانين بيئة العمل، وبعض النفقات مثل المواصلات. ممارسة البرمجة على أساس هواية إلى جانب عمل رئيسي آخر، فكثير من الأحيان قد تصادف أشخاصًا مهتمين بتعلم البرمجة وهم أساسًا أطباء على سبيل المثال وذلك لكونها شيء مكتسب بالتعلم والقراءة والممارسة وليست موهبةً أو شيئًا موروثًا. تعلم خوارزميات من خلال البرمجة يعزز عدد من المهارات لديك مثل مهارات التواصل وحل المشكلات وحتى مهارة الصبر. تفيد البرمجة في توسيع المعرفة وتعلّم تصميم حلول لأيّ مشكلة تواجهك، إذ تُعَدّ البرمجة طريقة تفكير منظمة وطريقة لتبسيط المشكلة وتفكيكها إلى أجزاء صغيرة يمكن التعامل معها بصورة أسهل. تعزيز الإبداع والاختراع لدى المبرمج، إذ سيصبح توّاقًا لتقديم أفضل ما لديه ومنافسة ذويه والسعي نحو تقديم مشاريع جديدة غير متوفرة سابقًا. طرق لتعلم البرمجة هنالك عدة طرق لتعلم البرمجة ودخول مجال علوم الحاسوب ولكن سأصنفها ضمن مسارين عريضين، الأول عبر التعليم الجامعي والثاني عبر التعليم الحر، وسأشرح كل منهما بالتفصيل مع توضيح مزايا وتحديات كل منهما. وإن كنت مهتمًا بتعلم البرمجة والتخصص بها ولم تختر مسارك بعد، فأنصحك أن تركز على هذا القسم بعناية لتحديد مسارك التعليمي. تعلم البرمجة عبر الجامعة يمكن تعلم البرمجة عبر مسار الجامعة بدخول إحدى التخصصات المرتبطة بها مثل تخصص علوم الحاسوب computer science أو تخصص هندسة البرمجيات software engineering أو هندسة الحاسوب computer engineering وستدرس بانتظام وعبر سنوات بين 4 إلى 5 سنوات هذا التخصص لتتخرج بدرجة بكالوريوس ويمكنك أن تكمل بعدها إلى مرحلة الماجستير والدكتوراه، وهذا الخيار مناسب تمامًا لك إن كنت تفكر في تسلق هذا السلم والذي تكون نهايته المهنية غالبًا العمل في مهنة التدريس في المؤسسات التعليمية. هذا الطريق أشهر الطرق لتعلم البرمجة ويتسم بأنه الأطول ولا يمكن البدء به إلا عند الدخول بالمرحلة الجامعية، ومن خلال هذه الطريق سيتلقى الشخص شهادة جامعية رسمية ومعترف عليها في سوق العمل بغض النظر عن الخبرة العملية التي يكتسبها خلال مسيرته الدراسية والتي تكون قليلة نوعًا ما وغير كافية. ضع في بالك أمر مهم في هذا المسار وهو أنك ستتعلم الكثير من المواد -وأحيانًا بتعمق- كما ذكرنا مثل الرياضيات المتقدمة وقواعد البيانات وأنظمة التشغيل والأنظمة المتقدمة والدارات الكهربائية والمنطقية والشبكات الحاسوبية وغيرها من المواد النظرية التي أما قد لا تهمك ولا ترغب في التخصص فيها والعمل فيها وإما أنها لا تفيد بشكل مباشر في الحياة العملية التطبيقية لاحقًا (تضيف مثلًا بعض الجامعات مواد إثرائية مثل تاريخ وجغرافية وأدب) مما يعني نسيانها لاحقًا وإضاعة للوقت والجهد. العائق الوحيد للدخول في هذا الطريق هو المُعدَّل الدراسي المطلوب بالنسبة للجامعات الحكومية والذي يكون مرتفعًا، وذلك لأن المقاعد الدراسية محدودة؛ أما بالنسبة للجامعات الخاصة، فستحتاج إلى مبلغ مالي قد تجده كبيرًا لتستطيع التسجيل في الجامعة وتتمة سنواتها الدراسية، فضلًا عن التفرغ الكامل للجامعة وتأمين النفقات اليومية البسيطة ما بين مواصلات ومعيشة ووربما تحتاج إلى كتب وقرطاسية وغيرها من نفقات إضافية طارئة، ولا ننسى أنه إذا كنت من محافظة تختلف عن المحافظة التي تقع فيها الجامعة، فإنك ستحتاج إلى مصروف إضافي يخص المواصلات بالإضافة إلى مصروف مخصص للسكن إذا لم ترغب في المكوث في السكن الجامعي أو إذا اخترت التسجيل في جامعة خاصة غير موجودة في مدينتك. والأهم مما سبق كله أن مجال علوم الحاسوب عمومًا والبرمجة خصوصًا مجال سريع التغير والتطور، فقد تتعلم تقنيات قديمة في بداية دراستك الجامعية لن تُستخدم في سوق العمل عند تخرجك بعد عدة سنوات أو أنها على الأقل تغيرت تغيرًا كبيرًا عما تعلمته وكم أسمع مشكلات تواجه طلاب الجامعات اليوم من هذا القبيل، لهذا السبب تجد أن أغلب الشركات لا تقبل بالشهادة الجامعية بمفردها بل تجري للمتخرج الجامعي اختبارًا تقنيًا أو تطلب منه مشروعًا يطلع عليه فريق برمجي متخصص ليتأكد من مواكبة معلوماته لأحدث التقنيات الحالية آنذاك. ومن الجدير بالذكر أنّ تعلم البرمجة عن طريق الجامعة يجبرك على الدراسة لسنين طويلة قد تصل إلى خمس سنوات وربما أكثر إذا لم تجتاز مواد محددة خلال السنة الدراسية، كما أنّ هذا الطريق لوحده لا يكفي للدخول إلى سوق العمل على الرغم من امتلاكك شهادة جامعية قوية وامتلاكك خلفية ثقافية علمية غير متاحة في الوسائل الأخرى، إذ ينبغي عليك اكتساب الخبرة اللازمة لتدعم سيرتك الذاتية، ولكن على الرغم من ذلك فبعض الشركات تهتم بالشهادة الجامعية في الدرجة الأولى وبعدها تنظر في الخبرة التي تملكها على أساس درجة ثانوية، إذ قد تمتلك برنامجًا تدريبًا خاصًا بالخريجين الجدد. والخلاصة، قد لا يكون هذا الخيار متاحًا لك -بسبب مجموعك في المرحلة الثانوية من التعليم- وباهظًا أيضًا وقد لا تملك وقتًا له وغيرها من التحديات وهنا ننصحك بخيار آخر لتعلم البرمجة وهو التعلم الحر عبر الإنترنت. تعلم البرمجة عن بعد عبر الإنترنت هنالك طريق آخر لتعلم البرمجة يعد الأسرع من بين عدة طرق لتعلم البرمجة غير التعليم التقليدي في الجامعات وهو التعلم الموجه عن بعد عبر الإنترنت نظرًا لانتشار الإنترنت في كل الأرجاء وازدياد سرعته، فأصبح بالإمكان اليوم مشاهدة فيديوهات والتواصل مرئيًا بدقة عالية دون الاكتراث لتكلفة الإنترنت أو سرعته. ونظرًا لأن مجال البرمجة لا يتطلب أي أمور وأدوات فيزيائية فأصبح تعلمه عبر الإنترنت شائعًا جدًا وسهلًا وعزز من ذلك تطوره السريع كما أشرنا وحاجة سوق العمل الكبير للمبرمجين مما جعل الشركات الموظفة تتنازل عن شرط وجود شهادة جامعية وأصبحت تطلب بدلًا من ذلك الخبرة والمشاريع العملية مع اجتياز اختبار أو مقابلة تقنية تجريها الشركة للمتقدمين المرشحين. تنقسم عملية تعلم البرمجة عبر الإنترنت إلى عدة مسارات فرعية تكون عمومًا إما منظمة ومهيكلة أو متفرقة. الدورات التعليمية تُعَدّ الدورات التعليمية من أشهر الطرق التي يلجأ إليها مَن يرغب في تعلم البرمجة سواءً كانت على أرض الواقع أو عبر الانترنت، إذ تأخذ بيده بدءًا من الصفر وتساعده كثيرًا في تعلم أيّ شيء جديد بصورة عامة وفي تعلم البرمجة بصورة خاصة وذلك عن طريق تسلسل مدروس ينتج عنه في ختام الدورة تعلم الأساسيات والتمكن بعض الشيء في النقاط التي تقدمها الدورة ليتابع بعدها المتلقي رحلة تعلمه عن طريق مصادر أخرى أو التسجيل في دورة تعليمة جديدة بمستوى أعلى. غالبًا ما تقترن الدورات التعليمية بجانب تطبيقي عملي يبني المتعلم عبرها مشاريع عملية تحاكي المشاريع المطلوبة في سوق العمل كما تفيده في بناء معرض أعمال عملية يغنيه عن عرض الشهادات النظرية. وقد يحتاج الطالب الأكاديمي الذي يدرس في الجامعة -كما ذكرنا في المسار الأول السابق- إلى دورات برمجية تعليمية مخصصة لترميم ما ينقصه أو اكتساب خبرة أوسع والتخصص فيه وبناء مشاريع عملية. لن تعيقك الدورات التعليمية من ناحية العدد المحدود للحضور والتكلفة الباهظة، إذ توجد العديد من الدورات البرمجية منخفضة التكلفة ومقبولة بالنسبة للطلاب مقابل الفائدة التي سيتلقونها، كما أنك لن تحتاج إلى إهدار 4 أو 5 سنوات من حياتك -على الأقل- كما في المرحلة الجامعية. تحدي مسار تعلم البرمجة عبر دورات تعليمية هو التسويف والتقصير، إذ يحتاج إلى تنظيم وعزيمة وإصرار وحمل النفس على التعلم وطلب العلم ووضع مخطط صارم وخطة واضحة من بداية الطريق، وهذا عكس المسار الأكاديمي الذي يكون فيه دور الجامعة تلقين المعلومة والتخطيط نيابة عنك مثل تحديد أوقات الامتحانات. ومن الجدير بالذكر أنه تهدف أكاديمية حسوب إلى توفير دورات تعليمية باللغة العربية تساعدك في تعلم البرمجة، كما يمكنك طرح أيّ سؤال على المدرِّبين أثناء التعلم إذا صادفت أيّ صعوبة، بالإضافة إلى أنه يمكنك مشاهدة أيّ دورة اشتركت فيها متى ما شئت، وفي حال أردت الانسحاب فبإمكانك التواصل مع فريق الأكاديمية لاسترداد ثمنها. دورة علوم الحاسوب دورة تدريبية متكاملة تضعك على بوابة الاحتراف في تعلم أساسيات البرمجة وعلوم الحاسوب اشترك الآن الورشات والمخيمات البرمجية Bootcamps تعد المخيمات البرمجية فكرة أخرى منبثقة عن الدورات التعليمية فهي عبارة عن دورة تعليمية مكثفة ومضغوطة بفترة زمنية قد تقصر أو تطور بحسب البرنامج والتخصص وعادةً ما تمتد المخيمات البرمجية المتخصصة في مجال تطوير الويب أو تطوير تطبيقات الجوال من ستة أشهر إلى سنة. وتركز المخيمات البرمجية على تعلم البرمجة وتطبيقها مباشرةً على مشاريع عملية كبيرة تختمها بمشروع تخرج شامل، فيتخرج الطالب منها بحقيبة مشاريع مشرفة يعرضها في مقابلات العمل. القنوات والفيديوهات التعليمية هذه القنوات منتشرة انتشارًا كبيرًا على اليوتيوب مثل قناة أكاديمية حسوب، كما يوجد العديد من المبرمجين المحترفين الذين لديهم قناة على اليوتيوب تحتوي على سلسلة من المحاضرات التعليمية النظرية والعملية أو حتى مواضيع متفرقة، وفي هذا الطريق لن تحتاج إلى التقيد بمكان معيّن لحضور دورة تعليمية ما ولن تضطر إلى دفع تكاليفها، إذ تكون أغلبها مجانية، ولن تضطر إلى دفع أي تكلفة إضافية مثل المواصلات والسكن، كما أنك غير مقيّد بوقت محدد بما أنها عبر الانترنت ومسجَّلة مسبقًا. القيد الوحيد في هذا المسار أنه من المسارات الموجهة وغير المنظمة أو المهيكلة إذ ستتقيد بما هو موجود وقد تجد المعلومة وقد لا تجدها وغالبًا ستكون ضمن المستويات الأساسية دون المتقدمة ولن تجد من يجيب على أسئلتك أيضًا. الكتب والمقالات يفضل العديد من الأشخاص اللجوء إلى كتب برمجية للوصول إلى فهم أكثر دقة، والعديد من هذه الكتب توفرها أكاديمية حسوب مترجمة ومدققة جيدًا، كما يلجأ العديد من الراغبين في تعلم البرمجة إلى المقالات البرمجية لأخذ لمحة عامة حول تعلم البرمجة أو لتعلم البرمجة بصورة خاصة. تمتلك كل طريقة من الطرق السابقة ميزات ومساوئ وضحنا لتتمكن من تحديد الطريق الأنسب لك والذي يخدم أهدافك، ولكن ستكون أنت الرابح مهما كان طريقك في تعلم البرمجة، لذلك لا بد من تعلم البرمجة بصورة احترافية مهما كانت الوسيلة لتحقيق رغبتك في الدخول إلى سوق العمل بقوة وتحقيق دخل ممتاز. وفي نهاية هذا القسم، أنصحك بمشاهدة الفيديو التالي الذي يناقش فكرة الشهادات مقابل الخبرة في سوق العمل: المسابقات والتدريبات البرمجية تعزز المسابقات البرمجية والتدريبات البرمجية من عملية تعلم البرمجة تعزيزًا كبيرًا وتكسب المبرمج خبرة كبيرة واسعة تميزه عن بقية المبرمجين وترفع من قدره ومنصبه خصوصًا أن سمة البرمجة عمومًا هي حل المشكلات والبعد عن النمطية والروتين، فستصادف خلال رحلة البرمجة مشكلات منها القديم ومنها الجديد وغالبًا ستجد لكل مشكلة عدة حلول. أضف إلى ذلك أن أغلب أسئلة المقابلات البرمجية تكون على شكل مشكلة تتطلب إيجاد حل لها وكتاب شيفرته وغالبًا تكون تلك المشكلة شائعة وبسيطة وبمقابلة مباشرة يعني أن الفريق التقني يكون حاضرًا أثناء حلك للمشكلة، وينصب جل تركيزهم على كيفية إيجادك الحل وأسلوب كتابتك للشيفرة، فأحيانًا تجد حلًا لمشكلة يخلق مشاكل أخرى لم تخطر على بالك أو تفكر بها والأصوب أن يكون حلك شاملًا لا يؤدي إلى مشاكل أخرى ولا يسبب تأثيرات جانبية، ولا يمكن الوصول إلى تلك الدرجة من الخبرة والإتقان دون إطلاع على حلول مشاكل سابقة والتمرن على حل مشاكل جديدة ومناقشة الحلول للوصول إلى الحل الأفضل. هنالك الكثير من منصات التدريب تختلف باختلاف المواضيع ولغة البرمجة التي تريد التدرب عليها يمكنك البحث والسؤال وتجرب عدة منصات لتختار ما يناسب وشاع منها هذه الأيام منصة HackerRank ومنصة Codewars، ولكن لا أرى اللجوء إلى هذا الخيار إلى بعد تعلم المفاهيم الأساسية وعلى الأقل أساسيات لغة برمجة وعمومًا هنالك دومًا مستويات لكل تدريب يمكنك اختيار ما يناسب مستواك آنذاك. كيف تتعلم البرمجة؟ البرمجة عالم كبير مترامي الأطراف متباين التضاريس فيه السهل وفيه الصعب وإن كان الصعب يغلب على بدايته إذ يتسم طريق بداية تعلم البرمجة بالصعوبة وشدة الانحدار فهنالك الكثير من الأساسيات والمفاهيم التي عليك تعلمها وفهمها مثل مفهوم التعابير expressions والمتغيرات variables وأنواع البيانات data types والعمليات وحلقات التكرار والتعابير الشرطية والدوال والأصناف …إلخ. ثم تعلم تطبيق تلك المفاهيم بلغة البرمجة التي تريد استخدامها والتقنيات والمكتبات المرتبطة بها وقد تصل إلى بعض الطرق المسدودة -من جملة المشاكل الكثيرة التي تواجهك- التي تتطلب أن تشق طريقًا جديدًا لحلها. لا تخشَ مما سبق فكلما كان الطريق صعبًا ذقت حلاوة الوصول! مفاهيم تعلم البرمجة: التأسيس الصحيح ابدأ أولًا بتعلم المفاهيم البرمجية الأساسية، فعندما تتقن تلك المفاهيم تصبح قادرًا على تطبيقها على الأدوات مهما اختلفت وكثرت، وهنا وجب الفصل بين المفاهيم والأدوات، لأن الأدوات كما ذكرنا كثيرة وإن بدأت بها فقد تضيع وقد تواجه صعوبة في استخدام أداة لكثرة المفاهيم البرمجية المعقدة المبنية عليها وبدلًا من ذلك يجب البدء بصب أساس متين وإتقان المفاهيم البرمجة التأسيسية التي ستمكنك من استخدام أي أداة أو تقنية برمجية موجودة أو حتى مستحدثة جديدة قد تظهر مستقبلًا. أهم المفاهيم التأسيسية البرمجية التي يمكنك البدء بها هي: التفكير المنطقي الخوارزميات وحل المشكلات التعابير المنطقية أو البوليانية العمليات الرياضية الأساسية الأصناف classes والكائنات objects الدوال functions والتوابع methods بنى التحكم مثل التكرار Loop والشروط conditions التعاود Recursion المكتبات والحزم وأطر العمل أنواع البيانات أنواع لغات البرمجة البرمجة كائنية التوجه والبرمجة الوظيفية ننصحك بإتقان تلك المفاهيم وصقلها قبل البدء في تعلم أي لغة برمجة والتعمق فيها لأنك إن فعلت، فستلجأ إلى الرجوع إلى كل مفهوم والتعرف عليه مما يصعب عملية التعلم ويطيل الطريق عليك، وبعد التعرف عليها، يمكنك الانتقال إلى تعلم لغة البرمجة التي تمثل إحدى أدوات تعلم البرمجة والتخصص في المجال الذي تريده. أدوات تعلم البرمجة: اختيار الوجهة والتخصص لا أقصد بذكري أدوات تعلم البرمجة محررات النصوص وما سيلزمك أثناء البرمجة وكتابة الشيفرة، بل أقصد بها الأدوات والوسائل التي تتعلم البرمجة بها وتطبقها وأقصد تحديدًا لغات البرمجة والتقنيات المرتبطة بها التي تتعلم البرمجة بها. هنالك الكثير من لغات البرمجة والتقنيات البرمجية وهي ليست ثابتة بل تزداد وتتوسع يومًا بعد يوم، فلا تلبث إلا أن تسمع عن نزول لغة برمجة جديدة أو تقنية أو إطار عمل Framework جديد فإن تعلمت المفاهيم وأسست نفسك بها، فستطبقها مع أي لغة برمجة أو تقنية برمجية، فلغات البرمجة تنتمي إلى عائلات وتُشتق اللغات الجديدة من لغات سابقة وتُبنى تقنيات جديدة على أخرى سابقة أو مشابهة لها فلا وقت لاختراع العجلة من جديد، وفي هذا الصدد أنصحك بالاطلاع على مقال دليلك الشامل إلى لغات البرمجة. وقد تتساءل، كيف تتعلم البرمجة دون الاهتمام بتعلم لغة برمجة والانشغال بها؟ سؤالك صحيح، فستحتاج أثناء تعلم المفاهيم إلى أداة أي لغة برمجة تطبق عليها ما تعلمته ولكن في الوقت نفسه لا تريد الانشغال بتعلم لغة البرمجة تلك وتفاصيلها وشيفراتها وهنا لحل المشكلة جاءت لغات البرمجة المرئية مثل سكراتش Scratch وما شابهها. سكراتش هي لغة برمجة مرئية مؤلفة من كتل جاهزة يمكنك عبر سحبها وتركيبها بناء برنامج كامل، وهي مناسبة جدًا للبدء بتعلم البرمجة من الصفر وتأسيس المفاهيم البرمجية التي ذكرناها أهمها الخوارزميات والتفكير المنطقي، وبناءً على ذلك، تجد أن دورة علوم الحاسوب من أكاديمية حسوب تؤسس تلك المفاهيم أولًا بلغة سكراتش. بعد أن تتعلم المفاهيم، تبدأ بتطبيقها على لغة برمجة حقيقية ويمكنك بعدها التخصص بلغة البرمجة التي تريد تعلمها ودخول مجالها، وهنا يمكن أن أنصحك بدلًا من ذلك البدء بأساسيات لغة برمجة سهلة مثل لغة جافاسكربت JavaScript أو لغة بايثون والسبب سهولة كتابة الشيفرات فيهما وتنفيذها دون الحاجة إلى أي تعقيد في ضبط البيئة البرمجية لهما، ثم بعد ذلك يمكنك الانتقال إلى لغة البرمجة التي تُستخدم في المجال الذي تريد التخصص فيه مثل مجال تطوير مواقع الويب أو تطوير تطبيقات الجوال أو برمجة أنظمة التشغيل والأنظمة المدمجة. قد تسألني عن الأدوات والبرامج المطلوبة لكتابة الشيفرات وهنا أقول لك، لا تشغل نفسك بها فستتعرف عليها متى ما احتجتها فكل لغة برمجة أو تقنية لها محرر وأدوات تدعمها أكثر من غيرها. نصائح لتعلم البرمجة توجد بعض النصائح لتعلم البرمجة التي ستحتاجها أثناء رحلتك نسردها فيما يلي. حدد هدفك من تعلم البرمجة عليك تحديد هدفك حتى يسهل عليك تحديد التخصص الذي تريد الدخول إليه وبالتالي اللغة المستعملة في ذلك التخصص الأمر، فاللغات التي تُستخدم في مجال برمجة تطبيقات الويب مثلًا تختلف عن لغات برمجة تطبيقات الهاتف المحمول والتطبيقات المكتبة، كما سيسهل عليك تحديد طبيعة الجهاز الذي سيكون موجه إليه هذا التطبيق. تعلم لغة واحدة على الرغم من تشابه لغات البرمجة من حيث المفهوم، إلا أنّ لكل لغة برمجية بنية لغوية syntax تختلف عن غيرها، لذا من الأفضل عدم إجهاد نفسك في تعلم أكثر من لغة على التوازي حتى لا تتشتت وخاصةً إذا كنت في بداية طريقك في تعلم البرمجة. وعمومًا، يمكنك تعلم المفاهيم البرمجية بدايةً بلغة سكراتش ثم الانتقال إلى اللغة التي تريد التخصص فيها فالمفاهيم متشابهة كما ذكرنا ولكن صياغة اللغة وطريقة كتابة شيفراتها وترتيبها هي التي تختلف ولن يكون الاختلاف كبيرًا عادةً. ابدأ ببرامج بسيطة البرمجة مثلها مثل أيّ مجال آخر، أي حتى تتقنها عليك البدء من مكونات صغيرة وذلك بتصميم برامج بسيطة ثم تعديلها وتطويرها على عدة مراحل للوصول إلى تطبيق متكامل، فعلى سبيل المثال تطبيق الآلة الحاسبة يبدأ بعملية واحدة وبعدها يُطوّر ليشمل كافة العمليات وبعد ذلك يمكن تطويره ليتعامل مع المعادلات الرياضية المعقدة وهكذا. تحلى بالصبر جميعنا يريد أن يكتسب الخبرة بين ليلة وضحاها، لكن الأساس مهم جدًا وهذا يحتاج لأيام وأيام، لذا خذ الطريق من بدايته وأساسياته ولا تستعجل فتندم وتفقد الشغف وربما تتعب من مواصلة التعلم وتقرر الابتعاد نهائيًا، ولا تيأس عندما تواجهك أخطاء، فكلها ستدعم مسيرتك البرمجية في المستقبل وتكسبك الخبرة، ففي النهاية إنما العلم بالتعلّم وإنما الحلم بالتحلّم. صاحب مبرمجًا بما أنك قررت دخول عالم البرمجة، فحاول مصاحبة المبرمجين بدخول مجتمعات البرمجة على وسائل التواصل الاجتماعي وإبداء اهتمامك بأي محتوى برمجي على الإنترنت والتفاعل مع أصحاب المحتوى والتواصل معهم والاستفسار أو السؤال عما يلزمك أن احتجت، فبذلك يصبح لديك شبكة من الأصدقاء تستفيد منهم وتفيدهم بتبادل الخبرات. اعتمد على نفسك في حل الأخطاء البرمجية لا شك أنه كل منا سيواجه أخطاء في مسيرته التعليمية، ولكن من الأفضل عدم الاعتماد على الغير في حلها إلا بعد البحث والتقصي عن سبب المشكلة وإيجاد حلها بأفضل طريقة ممكنة، وفي حال عدم التوصل إلى حل بعد البحث المتواصل، فلا مانع من الرجوع إلى مبرمج محترف يبيّن لك سبب المشكلة وطريقة حلها، فاللجوء فورًا إلى مبرمج محترف لن يفيدك وربما قد تكون عبئًا عليه في حال تواصلت معه على أبسط الأخطاء وباستمرار دون بذل أيّ جهد منك في البحث. لا تتوقف عن الممارسة والتدريب كل علم لا يُمارس فمصيره الزوال والنسيان وكذلك البرمجة، إذ عليك التدرب أكثر فأكثر إلى حين إتقان هذه اللغة وعدم التوقف عن ممارستها بين الحين والآخر لتجنب خسارتها. أسئلة شائعة حول كيف تتعلم البرمجة هل تعلم البرمجة صعب؟ قد يقول قائل أن البرمجة صعبة وتعلمها أصعب، ولكن هل هذا صحيح؟ أقول أنه لا شيء سهل وأي مهنة فيها مستوى متفاوت من السهولة والصعوبة، والبرمجة من المهن التي تتطلب بذل جهد ذهني وفكري كبير ولا تتطلب بذل جهد بدني بينما تجد بعض المهن تتطلب بذل جهد بدني أكثر من الجهد الذهني وهكذا، وقد لا يناسب البعض بذل هذا الجهد الذهني الكبير والجلوس لفترات طويلة أمام الشاشة بتركيز كبير وهنا يجد تلك الصعوبة التي يشير إليها. إن أردت إجابة تفصيلية على هذا السؤال، فشاهد فيديو هل البرمجة صعبة. هل يؤثر نمط شخصيتي على تعلم البرمجة؟ التعامل مع البرمجة والحاسوب يتطلب بعض الانعزال عن الناس والأنشطة الاجتماعية والتعامل مع آلة أمامك بمخاطبتها عبر شيفرة طويلة تمضي أيامًا وأسابيعًا في كتابتها على انفراد وهذا قد لا يناسب بعض الأشخاص الاجتماعيين الذين يفضلون التعامل مع الناس والاحتكاك بهم، وهنا تظهر فكرة أن غالبية المبرمجين انطوائيين وأرى أنها صحيحة بنسبة ما، ويمكنك الاطلاع على مناقشة شخصيتك كمبرمج ومناقشة هل فعلاً تخصص البرمجة يؤثر بالسلب على الحياة الاجتماعية؟ في حسوب IO. هل احتاج إلى إتقان اللغة الإنجليزية لتعلم البرمجة؟ صحيح أن شيفرات لغات البرمج كلها مكتوبة باللغة الإنجليزية ولكن الحقيقة أنك لا تحتاج إلى إتقانها لتكون مبرمجًا محترفًا، إذ أن كل لغة برمجة مكونة من كلمات مفتاحية keywords محصورة العدد يمكنك حفظها وحفظ استخداماتها وقد قابلت عدة مبرمجين من بلدان آسيا وأوربا غير ناطقين باللغة الإنجليزية ولا يعرفونها بل أتحدث معهم بالإنجليزية فلا يستطيعون الرد علي وفي الوقت نفسه أتفاجأ من أنهم بنوا الكثير من المواقع وتطبيقات الجوال، حتى أن أحدهم بنى مكتبة CSS بلغته ويستطيع أي متحدث بتلك اللغة استخدامها. هل هناك مصادر عربية لتعلم البرمجة؟ قد يقول قائل، مراجع تعلم البرمجة قليلة في اللغة العربية أو ليست بجودة عالية، وأنا أقول أن المحتوى العربي غني جدًا بمصادر تعلم البرمجة بالعربية وهنا أحيلك إلى مقال الدليل الشامل لتعلم البرمجة باستخدام المصادر العربية لتتأكد من نفسك. كما يوجد دورات برمجة عربية تأخذ بيدك من الصفر وحتى الاحتراف مثل دورات أكاديمية حسوب، فالمميز في دوراتها أن الشرح بلغة عربية فصيحة وأنها توفر بيئة عربية متكاملة بدءًا من توفير التوثيقات البرمجية العربية التي تجدها في موسوعة حسوب وحتى المقالات البرمجية والكتب البرمجية في كافة المواضيع واللغات البرمجية وأخيرًا بمنصة أسئلة وأجوبة برمجية لطلب أي مساعدة أو الإجابة عن سؤال كما تجد دعمًا أيضًا في مجتمع البرمجة العربي في منصة حسوب IO. هل أحتاج إلى خبرة في الرياضيات لتعلم البرمجة؟ لا تحتاج إلى خبرة متقدمة في الرياضيات بل كل ما تحتاج إليه في البداية هو معرفة بالعمليات الرياضية الأساسية من جمع وطرح وضرب وقسمة ورفع للأس، وهنالك الكثير من القصص عن أطفال ويافعين بأعمار صغيرة تعلموا البرمجة وبدؤوا بكتابة برامج وألعاب. كيف تتعلم البرمجة من الصفر؟ إن لم تكن تريد الالتحاق بمسار جامعي، فهنا أنصحك باتباع دورات تعليمية أو ورشات أو مخيمات برمجية منظمة ومهيكلة ولا تتطلب أي خبرة برمجة مسبقة بحيث تبدأ معك من الأساسيات وتنطلق حتى المواضيع المتقدمة يقترن ذلك ببناء مشاريع عملية. وإن سألتني عن ترشيحات في المحتوى العربي، فأرشح دورات أكاديمية حسوب فكلها لا تتطلب خبرة برمجة مسبقة وتشرح المواضيع من الصفر، كما أنك عندما تشترك بدورة ما، فإن المسارات الأساسية من كل الدورات تصبح متاحة لك وهي ميزة ممتازة تساعدك على صب أساس قوي في كل المجالات البرمجية، وأضف إلى تلك الميزة، هنالك فريق من المبرمجين جاهز للرد على استفساراتك ومساعدتك بأي شيء، فهي خيار جيد تستحق النظر. أنا لست منظمًا فكيف ألتزم في تعلم البرمجة بنفسي؟ تعلم البرمجة -خصوصًا عبر دورات- يحتاج إلى حمل النفس على ما تكره وهو التنظيم، والتنظيم يحتاج إلى روتين، لذا ألزم نفسك بروتين قاسٍ وعاقبها إن تخلَّفت وقصرت مثل عدم الخروج إلى مكان محبب لك في عطلة نهاية الأسبوع، وفي الوقت نفسه كافئها إن أنجزت وثابرت، وفي هذا الصدد أنصحك بمقال دليلك لتنظيم حياتك ففيه فوائد كبيرة تساعدك على التنظيم لا تفوتها. وتذكر دومًا أن لذة الوصول تنسيك تعب الطريق وهذا يجب أن يدفعك دومًا إلى بذل الجهد ورفع الهمّة، وصحيح أن طريق تعلم البرمجة قد يكون طويلًا لكن بدايته متعبة فقط أما بعد ذلك فيصبح سهلًا، وتذكر أن المبرمج الخبير المتمرس يملك الكثير من المزايا بدءًا من الراتب المرتفع بقدر خبرته وحتى قدرته على تأسيس شركات برمجية أو إدارتها. هل يمكنني تعلم البرمجة عبر الجوال؟ حقيقةً، لا! يتطلب تعلم البرمجة حاسوبًا لتعلم البرمجة وكتابة الشيفرات البرمجية، فمن الصعب كتابة شيفرات برمجية على الهاتف الجوال هذا لم نتحدث عن إمكانية تنفيذ الشيفرات عليه وتجريبها وتنقيحها وتصحيح الأخطاء فيها. أما إن سألتني عن مواصفات الحاسوب، فيمكن استعمال أي حاسوب بدايةً وبعدها ستجد نفسك إما مرتاحًا بمواصفاته آنذاك أو تحتاج إلى مواصفات أخرى محددة، وقد تحتاج من البداية إلى وجود بطاقة شاشة منفصلة إن أردت التخصص في مجالات برمجة تتطلب معالجة رسوميات عالية مثل تطوير الألعاب أو محاكاة تطبيقات جوال أثناء تطويرها، وقد تحتاج إلى حاسوب ماك إن أردت تطوير أي شيء يتعلق بأنظمة ماك مثل تطوير تطبيقات iOS وهو حالة خاصة ومحددة فقط بمنتجات ماك. خاتمة أرجو أن أكون قد وفقت في الإجابة على سؤال "كيف تتعلم البرمجة؟" إجابة وافية شاملة في هذا المقال وأرجو أيضًا أن يكون هذا المقال بوصلة ترشدك للسير في الطريق الصحيح نحو تعلم البرمجة. وتذكر أنه بالنسبة لبعض المبرمجين، رحلة البرمجة لا تنتهي، فهنالك دومًا أشياء جديدة يمكن تعلمها وتطبيقها! وفي نهاية المقال، أحيلك لقراءة المقالات التالية المرجعية بعده التي تدور في فلك تعلم البرمجة ولكن قبل ذلك، قم وخذ قسطًا من الراحة! ملاحظة: كُتب هذا المقال سابقًا عام 2015 وقد جرى تعديله وتحديث محتواه لاحقًا. اقرأ أيضًا المدخل الشامل لتعلم علوم الحاسوب تعلم بايثون تعلم PHP فوائد تعلم البرمجة دليلك الشامل إلى أنواع البيانات تعلم لغة HTML أسهل لغات البرمجة البرمجة باستخدام سكراتش Scratch

نعيش حرفيًا في عالم من البيانات، فما نقرؤه وما نكتبه وما نفكر به أنواع من البيانات، وما تستند عليه أفعالنا اليومية وسلوكنا هي أنواع من البيانات. قد تقرر الذهاب إلى التسوق لأنك تحتاج إلى بعض الحاجيات التي سجلتها على قائمتك، إن ما سجّلته على قائمتك هي بيانات، ثم تمضي في طريقك لتقف عند إشارة مرور حمراء، إن وقوفك عند الإشارة الحمراء عائد إلى بيانات أيضًا، فالأحمر للوقوف والأخضر للمتابعة، ثم تصل بعد ذلك إلى المتجر لتتفقد ما تحتاج إليه، فقد تنظر إلى العلامة التجارية للمنتج وهذه بيانات قد تعطيك فكرة عن جودة المنتج، وقد تنظر إلى سعر المنتج وهذه أيضًا بيانات تستخدمها لاتخاذ قرار الشراء وفقًا لميزانيتك، وإن كان المنتج غذائيًا مثلًا ستهتم بتاريخ الإنتاج وتاريخ انتهاء الصلاحية والمكوّنات، فهي بيانات ستؤثر على صحتك، وأخيرًا عندما تنتهي من التسوق وتتوجه إلى كوة المحاسبة سيقرأ الماسح الضوئي رمز المنتج وهو نمط من البيانات التي تعرّف هذا المنتج وتحدد هويته وقد خُزّنت ضمن هذا الرمز وفق سلسلة من الأرقام أو الأحرف أو كليهما كما خزّنت على حاسوب كوة المحاسبة أيضًا بطريقة ما. ما هي البيانات إذًا وما هي أنواع البيانات؟ من أين تأتي البيانات؟ كيف نستقبلها وكيف نفهمها؟ كيف نصنّف أنواع البيانات المختلفة وأين نخزّنها وكيف نسترجعها ونحللها؟ وكيف نستفيد منها في المحصلة؟ سنحاول في هذا المقال الإجابة عن الأسئلة السابقة بشيء من التفصيل لتكون عونًا لك في تعاملك مع أنواع البيانات سواء كنت راغبًا في أن تكون مصممًا لقواعد البيانات أو محللًا لأنواع البيانات أو مبرمجًا لها. إليك فهرس بعناوين المقال لتسهيل الوصول إلى مختلف أجزاء المقال: تعريف البيانات الفرق بين البيانات والمعلومات من أين تأتي البيانات؟ أنواع تخزين البيانات تصنيف أنواع البيانات Data Types البيانات الكمية البيانات النوعية البيانات المنطقية أنواع البيانات في الحاسب تصنيفات البيانات الرقمية أنواع البيانات في لغات البرمجة أنواع البيانات المستخدمة في قواعد البيانات خاتمة تعريف البيانات البيانات Data تُعرَّف بأنها مقادير منفصلة على شكل رموز أو إشارات قابلة للتحليل والمعالجة، ويمكن للبيانات أن تكون واضحةً ومفهومة لنا دون سياق محدد -أي دون أي تسلسل أو ترابط- مثل مجموعة أرقام تمثل أحجية، فالأرقام مقاديرٌ مفهومةٌ بالنسبة لنا، لكن الربط بينها لحل الأحجية قد يكون عصيًا. وقد لا تكون البيانات مفهومةً كخطوط رمز الماسح الضوئي (بار كود). تُدعى النتيجة المستخلصة من تحليل مجموعة من البيانات والربط بينها بالمعلومة أو المعلومات عمومًا information، كما تُدعى أصغر وحدة من مجموعة بيانات يمكن أن تُستخدم أو تفهم باستقلالية بعنصر البيانات datum. عندما نجمع المعلومات المتعلقة بموضوع معين وننظمها ثم نفهمها من خلال التطبيق والممارسة، سيكون توثيق هذه المعلومات المصنّعة انطلاقًا من البيانات معرفةً knowledge، أما الأسلوب الأمثل في تطبيق هذه المعرفة فقد ندعوه حكمة wisdom. إذًا فالبيانات عمومًا هي وسيلة للحصول على معلومات أو وسيلة لتمثيلها بطريقة أفضل كي تُعالح وتُستخدم. وقد تكون هذه البيانات مجرّدة كأسماء علامات تجارية وقد تكون مقاسة كدرجات الحرارة أو نسبة الفائدة أو عدد الولادات خلال عام. تُنظم البيانات ضمن بنىً خاصة تسمى بنى البيانات أو هياكل البيانات data structure لتسهيل الوصول إليها واستخلاص المعلومات منها مثل الجداول، وقد جُمعت أنواع البيانات ما قبل الثورة الرقمية في مراجع وكتب ووثائق، لكن مع بزوغ فجر الحوسبة كان الانتقال إلى البيانات الرقمية أمرًا حتميًا لتقود بالفعل العالم الرقمي منتجات ومختصين نحو تقنيات أكثر قدرة وترابطًا ابتداءً بقواعد البيانات النمطية databases إلى تقنيات التعامل مع البيانات الضخمة Big data وصولًا إلى تطوير الذكاء الصنعي AI. الفرق بين البيانات والمعلومات يجري الخلط في مواضع عدة بين البيانات والمعلومات على أنها الشيء ذاته وهذا أمر خطأ، فهناك فرق بيّن بين المصطلحين تعريفًا وغاية، ولقد أشرنا سابقًا أن البيانات تعرّف حقائق مفردة، بينما تمثل المعلومات تنظيمًا لهذه الحقائق أو تفسيرًا لها. تأتي البيانات بأشكال مختلفة، نصوصًا وأرقام وأشكال وصور وتواريخ لكنها لا تحمل دلالات على أهميتها أو الحاجة لوجودها، فقد يشير جهاز قياس تردد الصوت إلى القيمة 12 كيلو هرتز عندما يعجز المريض عن سماع أي صوت في عيادة تخطيط السمع، إذ القراءة بحد ذاتها لا دلالة لها ولن يتمكن سوى المختص من تأويلها إلى المعلومة التالية "المريض يعاني نقصًا في السمع". وقد تجد أيضًا أن مقدار المبيعات من منتج ما هو 20 جهازًا في العام، لن يقدم كذلك عنصر البيانات هذا أي دلالة ما لم يحلل ويوازن ويتحول إلى معلومة مثل "حققت الشركة هذا العام نسبة مبيعات عالية!". وهكذا يمكن أن نلخص الفرق بين البيانات والمعلومات كالتالي: البيانات مجموعة من الحقائق غير المنظمة، أما المعلومات فهي من يضع تلك البيانات في سياقها الصحيح. البيانات مصدر خام للحقائق دون أية دلالات وقد لا تتمكن من قراءتها أحيانًا، أما المعلومات فهي التي توضّح أنواع البيانات وتستخلص منها ما يُفهم ويُطبق ويُختبر. البيانات حقائق مستقلة بذاتها وقد لا تربط بينها أية علاقات، بينما تجد المعلومات العلاقات التي تربط بين أنواع البيانات لعرض صورة أوسع عن الظاهرة المدروسة. لا تعتمد البيانات على المعلومات لكن العكس صحيح. لا يمكن الاعتماد على البيانات لاتخاذ القرارات، فلا بد من وجود معلومات حتى يُتّخذ القرار الصحيح. من أين تأتي البيانات؟ تأتي البيانات -والتي تتنوع إلى أنواع البيانات- من تطور الفهم البشري للبيئة المحيطة به، وبالتالي من تطور معارفه والحاجة إلى توثيق هذه المعارف ووضعها حيز التنفيذ بالأسلوب الأمثل والأكثر كفاءة من جميع النواحي تحليلًا ومعالجة وسرعة، لكن يمكننا القول أن الأساليب الأساسية التي نحوز بها على بيانات أو نحدّث الموجودة منها قد تنحصر بما يلي: الافتراض assumption المراقبة observations القياس measurement التحليل analysis الافتراض assumption عادة ما يكون الافتراض منهجيًا، أي يستند إلى أفكار مسبقة عن موضوع ما أو إلى معلومات غير دقيقة أو بياناتها غير كافية. عادة ما تكون أنواع البيانات المفترضة خطوة مرحلية تُلغى لاحقًا عند حيازة البيانات المطلوبة، إلا أن توثيقها ضروري جدًا. فلو أردنا مثلًا أن نقدّر عدد المشترين المتوقعين لمنتج جديد في مدينة ما لدراسة جدوى توزيعه فيها سيكون هذا الرقم مفترضًا والنتائج التي تتأتى عنه افتراضيةً أيضًا ستصحح مع الوقت لكن بالطبع سيكون عدد المشترين متوقعًا بناء على أفكار أو دراسات مشابهة. المراقبة observations وهي إحدى الطرق الإحصائية Statistics المتبعة في حيازة البيانات، إذ تجري مراقبة ظاهرة اجتماعية أو اقتصادية أو غيرها ضمن جماعة population محددة للحصول على أنواع بيانات محددة تتعلق بالحالة المدروسة، كأن نسجل بيانات عن عدد المتزوجين تحت سن الثلاثين في منطقة معينة مثل سن الزواج وتاريخه وعدد الأطفال. تقدم هذه البيانات قاعدة قوية للحصول على الكثير من المعلومات التي يحتاجها الإحصائي للإجابة عن الأسئلة التي صمم هذه الدراسة لأجلها. القياس measurement تُعنى هذه الطريقة بالحصول على بيانات كمية (سنتحدث عنها لاحقًا) ثابتة توصّف الحالة المدروسة، ويقصد بالحصول على قيمة: إجراء ما يلزم من الاختبارات لتحديد القيمة المقاسة بأقل خطأ ممكن. من الأمثلة على البيانات المحازة عن طريق القياسات درجات الحرارة في مدينة محددة أو منسوب المياه في نهر خلال العام أو كمية المشتريات من منتج محدد وغيرها. التحليل analysis تهدف هذه العملية إلى تفكيك ظاهرة مجهولة أو مجموعة معلومات مجهولة التكوين إلى بياناتها الأولية لفهمها والاستفادة منها كالبيانات الناتجة عن تحليل الطيف الضوئي لنجم بعيد أو تحليل إشارة لاسلكية مركبة إلى مكوناتها الأساسية للحصول على بيانات تتعلق بالتردد والشدة. إذًا فعمليات الحصول على أنواع البيانات أو حيازتها تتعلق بالظاهرة المدروسة والهدف النهائي من هذه الدراسة والمعلومات التي يجب الحصول عليها أو فهمها تمهيدًا لتخزينها أو وضعها حيز التطبيق. أنواع تخزين البيانات تخزن البيانات في وسائط تخزين والتي إما أن تكون فيزيائية باستعمال الأوراق والدفاتر وكل ما يصلح للكتابة عليه أو باستعمال وسائط تخزين رقمية عبر الحواسيب التي هي الأشيع حاليًا بما أنها تسهل عمليات البحث والفهرسة ومعالجة البيانات. فبالنسبة لتخزين البيانات في الحواسيب، فإنها تعتمد على وسائط تخزين رقمية مثل الأقراص المدمجة والأقراص الصلبة HDD وذواكر الحالة الصلبة SSD والتي تتطور تدريجيًا مع الزمن وفيها إما أن تخزن البيانات مباشرةً باستعمال نظام ملفات يوفره نظام التشغيل أو تخزن بطريقة مهيكلة عبر جداول مثلًا لتسهيل معالجتها والوصول إليها وهنا يمكن استعمال برامج بسيطة مثل برنامج إكسل من مايكروسوفت أوفيس وقواعد بيانات أكسس وحتى استعمال قواعد بيانات مخصصة تكون عادة الأساس الذي ترتكز عليه تطبيقات الحاسوب كلها. تصنيف أنواع البيانات Data Types أنواع البيانات Data Types تُصنّف ضمن ثلاثة فئات رئيسية هي: البيانات الكمية quantitative data البيانات النوعية qualitative data البيانات المنطقية logical data وسنشرح كل تصنيف منها. البيانات الكمية البيانات الكمية هي البيانات التي تأخذ قيمًا عددية أو ناتجة عن الموازنة مع مقاييس عددية ومن الأمثلة عليها ارتفاع بناء، فلا بد من أن يكون قيمة عددية محددة 30 متر مثلًا، أو أن تحدد مستوى مهارتك في لغة برمجة معينة على مقياس من 1 إلى 10. تنتج هذه البيانات عن طريق قياس المقادير عبر الأجهزة المختلفة كمقاييس الضغط والحرارة والارتفاع، وقد نحصل عليها من الاستبيانات questionnaire التي تُنشر وتتطلب الإجابة عنها عن طريقة التقييم العددي لأسئلتها. قد نجد أيضًا تصنيفات فرعية لهذا النوع من البيانات: بيانات منفصلة discrete data: وهي بيانات كمية تأخذ قيمها من مجموعة قيم محددة سلفًا كعدد الوجبات التي يمكن للمطاعم أن تقدمها أو عدد الأولاد في عائلة محددة. بيانات مستمرة continuous data: وتمثل عادة القيم التي تقيسها التجهيزات والتي يمكن أن تأخذ أي قيمة عددية ضمن مجال محدد مثل درجات الحرارة، ويمكن تصنيف هذه الأخيرة إلى: بيانات مجالية interval data: وهي بيانات تمثل قيم عددية مرتبة تزيد كل قيمة عن التي تسبقها بمقدار محدد تمامًا كأن نعرض تسلسل طلبات الشراء، أو أن نسجل ارتفاع بالون في الجو كلما ارتفع 10 أمتار عن سطح البحر. بيانات نسبية Ratio data: وهي بيانات مستمرة تمثل نسبة تكرار حالة إلى جميع الحالات الممكنة كأن تحدد احتمال إصابة هدف أو إمكانية ولادة طفل مصاب بمرض وراثي. بيانات إحصائية: وهي البيانات التي تنتج عن تطبيق العلاقات الرياضية الخاصة بالإحصاء ومن أنواع البيانات الإحصائية: المتوسط الحسابي mean: ويقيس مجموع عدة قراءات إلى عددها كأن نحسب المتوسط الحسابي لأطوال الذكور في بيئة معينة بجمع أطوال جميع الذكور المشاركين في الدراسة ثم تقسيم الناتج على عددهم. المتوسط الهندسي geometric mean: وهو الجذر من المرتبة n لجداء القراءات المتعلقة بظاهرة معينة. الوسيط median: ويحدد القيمة التي تأتي في وسط مجموعة قيم مرتبة أي بمعنى آخر القيمة التي تقسم مجموعة قيمة مرتبة إلى مجموعتين متساويتين. الانحراف المعياري standard deviation: ويمثل مقدار ابتعاد عينة عن المتوسط الحسابي. المدى range: الفرق بين أعلى وأدنى قراءة من مجموعة قراءات. المنوال mode: ويحدد القيمة أو القيم الأكثر ورودًا. البيانات النوعية البيانات النوعية هي البيانات التي تصف نوعية أو خصائص الظاهرة المدروسة وبالتالي هي غير قابلة للعد وصعبة القياس والتحليل الدقيق، كأن تكون ملاحظات مأخوذة عن نوعية الوجبات المقدمة في مطعم أو أسماء الناجحين في اختبار. قد تكون هذه البيانات على شكل كلمات تصف الظاهرة ولا تحتاج إلى تحليل أبعد أو يمكن أن تكون لهذه البيانات أنماط محددة أو معانٍ محددة لا بدّ من تحليلها للحصول على المعلومات المطلوبة مثل سمات السلوك العدواني لعينة من المرضى النفسيين أو الميزات الأنسب لأحد المرشحين للحصول على وظيفة معينة. كما قد تكتب البيانات النوعية على شكل بيانات رقمية لكنها لا تحتمل معنى الأعداد الرياضي ولا توازن بأعداد لا تماثلها كأن نجعل الرقم 1 يدل على جنس المولود إن كان أنثى و 0 إذا كان ذكرًا. وقد نجد أيضًا تصنيفات فرعية لهذا النوع من أنواع البيانات مثل: بيانات فئوية categorical data: وهي بيانات تمثل ميزة محددة للعينة المدروسة مثل العمر، والجنس، واللغة. بيانات مسماة nominal data: وهي بيانات نوعية تأخذ قيمها ضمن مجموعة محددة من الخيارات كأن تختار لغة من بين خمس لغات محددة سلفًا أو أن تختار تقييمًا لخدمة زبائن من بين عدة تقييمات متاحة. بيانات مرتبة ordinal data: وهي ببساطة بيانات مسماة لكنها مرتبة على أساس محدد كأن تحدد البيانات قائمة العقوبات التدريجية التي تطبق على مخالفي النظام الداخلي لمؤسسة او شركة أو تسلسل خطوات إصلاح خلل في برنامج. ما الفرق بين البيانات الكمية والنوعية؟ شرحنا ما هي البيانات الكمية والنوعية ويجدر الذكر أنه يمكن لعينة بيانات نفسها أن تنقسم إلى بيانات كمية ونوعية في الوقت نفسه مثل عينة بيانات من مجموعة مدارس، فقد تنقسم إلى بيانات كمية من عدد الطلاب وقد تنقسم إلى بيانات نوعية بناءً على جنس الطلاب بين ذكر وأنثى وهكذا لذا وجب التفريق جيدًا بين البيانات الكمية والنوعية. أمر آخر وهو أن العمليات المطبقة على البيانات الكمية قد تختلف أغلب الأحيان عن تلك المطبقة على البيانات النوعية فقد يصلح تطبيق عمليات إحصائية وعمليات رياضية على بيانات كمية في وقت لا يصلح تطبيقها على بيانات نوعية بما أن قيمة البيانات الكمية تمثَّل مباشرةً بعدد، وهذا خلاف البيانات النوعية فحتى لو مثلناها بعدد مثل تمثيل الطلاب الذكور بعدد 1 والطلاب الإناث بعدد 2 فهو طريقة لعرض البيانات بشكل آخر. البيانات المنطقية وهي أبسط أنواع البيانات، وتجيب عن سؤال ما بصحيح أو خاطئ، نعم أو لا وقد تأخذ إحدى القيمتين الرقميتين 0 أو 1، وتدعى أيضًا البيانات البوليانية نسبة إلى الجبر البولياني. قد تصنف هذه البيانات على أنها بيانات نوعيّة إذا جاءت على شكل "صحيح/خاطئ" أو "نعم/لا"، وقد تصنّف أنها بيانات كمية إن جاءت على شكل "0/1". أنواع البيانات في الحاسب عزز ظهور الحواسب قدرة البشر على حيازة وتخزين كميات هائلة من البيانات وأمنت الوسائل اللازمة لتحليلها واستخلاص المعلومات عنها والاستفادة من تلك المعلومات في عمليات اتخاذ القرار، ولا تختلف أنواع البيانات في الحاسب وفي العالم الرقمي من حيث التعريف والغاية لكنها تخزّن وتعالج بطريقة أفضل وأسرع، لهذا السبب وضعت بعض التصنيفات الفرعية وحددت أنواع للبيانات تلائم طريقة عمل الحواسيب. تمثّل البيانات في الحواسيب على شكل سلاسل من الواحدات والأصفار وهي ما يفهمه الحاسوب أولًا وآخرًا ويُدعى أصغر حجم لتخزين عنصر البيانات "بت Bit" ويخزن القيمة 0 أو 1 ومن البت يتكون البايت Byte الذي هو 8 بت والكيلو بايت والميغا بايت …إلخ. تصنيفات البيانات الرقمية تُدعى أنواع البيانات التي تُخزّن على شكل سلاسل من الأصفار والواحدات وتعالج وفق هذه الطريقة بالبيانات الرقمية digital data، وقد نجد أن البيانات الرقمية قد تأخذ أصنافًا جديدة منها: بيانات مهيكلة structured: تُرتب البيانات المهيكلة وفق نموذج بيانات محدد لتسهل معالجتها وتخزينها والوصول إليها مثل الجداول المكوّنة من أسطر وأعمدة والتي تُعد أساس قواعد البيانات العلاقيّة relational databases أو على شكل بنية هرمية متداخلة hierarchical data structure أو أنها قادرة على تخزين كائنات objects لها هيكليات محددة سلفًا. بيانات غير مهيكلة not structured: البيانات غير المهيكلة هي تلك التي تُنظّم فيها البيانات بطريقة محددة كأن توضع في ملفات نصية أو تُستخدم بعض اللغات التوصيفية في تنظيمها. بيانات وصفية metadata: وهي بيانات نصية تصف بيانات أخرى كأن تحدد إصدار برنامج وتاريخ الإصدار ومعلومات عن ترخيص الاستخدام وهكذا. بيانات خام raw Data: وهي تسلسل غير منسّق من الواحدات والأصفار يُخزّن للمعالجة اللاحقة. القواميس dictionary: وهي نوع من أنواع البيانات التي يمكن الوصول إليها بطريقة "مفتاح-قيمة" أي تُفهرس فيها بيانات "القيمة" وفقًا لبيانات "المفتاح" وللوصول إلى القيمة قراءةً أو تخزينًا لا بد من معرفة المفتاح المرتبط بها. البيانات الضخمة big data: ظهر هذا المصطلح في فترة قريبة نسبيًا ليدل على أنواع البيانات التي تتجاوز أحجامها البيتا بايت (1000 تيرا بايت)، وبالتالي سيصعب معالجة هذا الكم الهائل من البيانات من قبل حاسوب واحد أو تنظيمها باستخدام قواعد البيانات النمطية، لهذا توزّع المهام على عدة حواسب رئيسية تتمتع بقدرات كبيرة في المعالجة من خلال استخدام خوارزميات واختبارات متقدمة بغية استخلاص المعلومات والرؤى التي تقدمها تلك البيانات خلال فترة زمنية مقبولة. أنواع البيانات في لغات البرمجة تختلف أنواع البيانات التي تستخدمها لغات البرمجة للتعبير عن القيم التي تتعامل معها وفقًا للغة البرمجة نفسها فكل لغة برمجة لها مجموعة أنواع بيانات محددة تتعامل معها توضحها في توثيقها الرسمي فانظر مثلًا مقال أنواع البيانات في لغة بايثون في أكاديمية حسوب وقسم أنواع البيانات في لغة بايثون في توثيق موسوعة حسوب وكذلك صفحة أنواع البيانات في لغة PHP وصفحة أنواع البيانات الأساسية في لغة TypeScript وصفحة أنواع البيانات الأساسية في لغة كوتلن وغيرها، فكل لغة كما أشرنا تملك أنواع بيانات تحددها صراحة لما يترتب عليها لاحقًا من ضبط العمليات التي يمكن تنفيذها على كل نوع بيانات، فمثلًا الأعداد تطبق عليها عمليات رياضية من جمع وطرح وضرب والنصوص تطبق عليها عمليات القص والجمع مع نصوص أخرى والتنسيق وغيرها. دورة تطوير التطبيقات باستخدام لغة Python احترف تطوير التطبيقات مع أكاديمية حسوب والتحق بسوق العمل فور انتهائك من الدورة اشترك الآن وتنقسم لغات البرمجة في طريقة تحديد أنواع البيانات إلى قسمين إما بتحديدها صراحةً أثناء كتابة الشيفرة وتدعى آنذاك لغات برمجة صارمة في تحديد الأنواع Strongly typed language أو بترك الأمر للغة البرمجة لتحديدها أثناء تنفيذ الشيفرة وتدعى آنذاك لغات برمجة متهاونة في تحديد الأنواع Loosely typed language. أما في لغات البرمجة التي تعد صارمة في تحديد الأنواع مثل لغة سي C وجافا Java، فهي تفرض على المبرمج تحديد نوع المتغير عند تعريفه أول مرة ويبقى هذا النوع ملازمًا له طيلة عمل البرنامج ولا يمكن تغييره مطلقًا ولا يمكن استعماله إلا في العمليات المرتبطة بنوعه المحدد وغيرها من القواعد الأخرى التي تختلف باختلاف اللغة، فالمثال التالي من لغة سي يعرِّف ثلاثة متغيرات الأول عدد صحيح والثاني عدد عشري والثالث محرف واحد: int intNumber = 2; float floatNumber = 2.3; char character = 'e'; وإن لم يتبع المبرمج هذه القواعد فسيحصل على خطأ قبل تنفيذ الشيفرة وقت تصريفها (إن كانت اللغة مصرَّفة compiled مثلًا)، فستحصل على خطأ إن جربت جمع العدد الصحيح intNumber السابق مع الحرف character بالشكل intNumber + character مباشرةً وكذلك إن أردنا جمعه مع العدد العشري floatNumber وهنا يجب إجراء عملية تحويل صريحة للنوع انظر مثلًا: int intNumber = 2; float floatNumber = 2.3; int sum = intNumber + (int)floatNumber; printf("Value of sum : %d\n",sum); عندما جمعنا العدد الصحيح intNumber مع العدد العشري floatNumber حولنا الأخير إلى عدد صحيح عبر تحديد النوع بين القوسين قبل المتغير ثم جمعنا العدد لنحصل على الناتج التالي: Value of sum : 4 ولاحظ أن الفاصلة العشري قد أُهملَت بما فيها من أجزاء عشرية وهذا ناتج عملية التحويل. تختلف لغات البرمجة أيضًا من ناحية التصريح والتلميح في عمليات التحويل بين الأنواع casting ففي التصريح يضطر المبرمج إلى ذكر النوع المراد التحويل إليه صراحةً وسيحصل على خطأ إن لم يفعل، وفي التلميح تكون اللغات ذكية في استنتاج النوع المراد التحويل إليه وتدعى smart casting فمثلًا إن جربت ما يلي في لغة سي: int intNumber = 2; float floatNumber = 2.3; int sum = intNumber + floatNumber; printf("Value of sum : %d\n",sum); فستحصل على الناتج 4 كعدد صحيح لأن لغة سي مباشرةً حولت العدد العشري إلى صحيح بما أن المتغير الذي سنخزن فيه النتيجة من نوع عدد صحيح وكذلك العدد الأول عدد صحيح، أما إن جربنا ما يلي: int intNumber = 2; float floatNumber = 2.3; float sum = intNumber + floatNumber; printf("Value of sum : %f\n",sum); فستحصل على ناتج 4.3 حتى لو كان العدد الأول صحيح إلا أن المتغير المراد تخزين القيمة فيه اختلف نوعه فاختلفت عملية التحويل الآلية وجرى تحويل العدد الصحيح إلى عدد عشري. وأما في لغات البرمجة التي تعد متهاونة في تحديد النوع مثل جافاسكربت وبايثون ولغة PHP فلا حاجة لتحديد أنواع البيانات للمتغيرات ويكتفي المبرمج بالتصريح عن المتغير فقط دون نوعه، فانظر إلى المثال التالي في لغة جافاسكربت الذي يعرف المتغيرات الثلاثة كما في المثال السابق: let intNumber = 2; let floatNumber = 2.3; let character = 'e'; سيُترك الأمر إلى لغة البرمجة لتحديد نوع المتغير أثناء وقت تنفيذ الشيفرة runtime لتحديد العمليات التي يمكن تنفيذها مع كل متغير وفق نوع، ولاحظ أنه يمكن لمتغير أخذ نوع عدد صحيح أن يأخذ نوع آخر مثل عدد عشري أو نص ولا يُعد ذلك خطأ: let intNumber = 2; intNumber = 'e'; وأما بخصوص عمليات التحويل بين الأنواع فهو أمر متروك كليًا إلى لغة البرمجة وذكائها، فإن جربنا الجمع بين العدد الصحيح والعشري كما فعلنا مع لغة سي الصارمة في تحديد الأنواع: let intNumber = 2; let floatNumber = 2.3; let sum = intNumber + floatNumber; console.log('Value of sum: ' + sum) فسنحصل على النتيجة التالية: Value of sum: 4.3 لاحظ أن عملية التحويل مالت إلى كفة العدد العشري ولاحظ أيضًا أننا جمعنا نصًا 'Value of sum: ‎' مع عدد sum أثناء طباعة النتيجة وكان الناتج نصًا ولم نحصل على خطأ بل اجتهدت لغة جافاسكربت في عملية التحويل ما يمكنها قبل أن تطلق أي خطأ للمبرمج، وقد شاعت الكثير من الدعابات بين المبرمجين حول عثرات لغة جافاسكربت تحديدًا في ضبط عملية التحويل بين أنواع البيانات بدقة. وهذا الأمر يربك المبرمجين بعض الأحيان في اللغات المتهاونة في تحديد النوع لعدم معرفة نوع البيانات النهائي للعملية بالضبط، فتخيل مثلًا في تطبيق بنكي مبني بلغة متهاونة في ضبط النوع أو أن الأمر متروك للغة البرمجة لاستنتاج نوع البيانات أثناء وقت التنفيذ فيرسل مستخدمًا مبلغ 100.54 دولار لصديقه ليستلم الأخير مبلغ 100 فقط ويُعلل الأمر بأن لغة البرمجة قد أخطأت في عملية تحويل نوع البيانات لذا اختيار طريقة التعامل مع البيانات أمر مهم جدًا يعتمد على نوع التطبيق المراد العمل عليه! في النهاية، المتغيرات في لغات البرمجة هي حاويات للبيانات التي تصنف إلى أنواع وقد تُحدد أحجام تلك الحاويات وفقًا لحجم البيانات المخزنة فيها تلقائيًا كما في اللغات المتهاونة في تحديد النوع أو وفقًا لنوع البيانات المحدد لها ويحصل خطأ إن تجاوزت البيانات الحجم المضبوط بنوع البيانات ذاك كما في اللغات الصارمة في تحديد النوع فمثلًا يأخذ متغير بنوع بيانات short حجم 2 بايت من الذاكرة لتخزين أعداد تتراوح بين القيمة ‎-32768 والقيمة 32767 فقط بينما يأخذ متغير من النوع bool حجم 1 بت فقط في لغة سي. وأيًا كانت أنواع البيانات التي تُعرّفها لغات البرمجة المختلفة إلا أنها تشترك جميعها بأنواع بيانات عامة سنتحدث عنها بالتفصيل. الأعداد الصحيحة تعبّر الأعداد الصحيحة Integer عن البيانات بالأعداد الكاملة أي دون فواصل عشرية سواء كانت الأعداد موجبة أو سالبة مثل 5، 110-، 42345، وهكذا، وتُستخدم الأعداد الصحيحة لتمثيل مقادير مثل عدد الولادات في عام أو عدد مرات وقوع حدث معين أو الأرقام التسلسلية لمنتجات أو رقم جواز السفر وما شابه. تمثل لغات البرمجة الأعداد الصحيحة ببايت واحد أو 2 بايت أو 4 بايتات، ويعود السبب في ذلك إلى حجم البيانات التي تريد تمثيله فإن أردت أن تمثل أعدادًا صحيحة من 0 إلى 100 مثلًا لا حاجة عندها لأربعة بايتات ويُكتفى ببايت واحد، أما إن احتجت إلى تخزين أرقام ضخمة ككتلة الأرض مثلًا فستحتاج إلى عدد صحيح من أربع بتات بالتأكيد. إليك بعض الأمثلة: في اللغة C++/C: // متغير حجمه أربعة بايتات ويخزّن فيه بيانات عددية صحيحة سالبة وموجبة int a =0; // متغير حجمه بايت واحد ويخزّن فيه بيانات عددية صحيحة موجبة وسالبة int8_t a=0; // متغير حجمه بايتين ويخزّن فيه بيانات عددية صحيحة موجبة وسالبة int16_t a=0; // متغير حجمه بايت واحد ويخزّن فيه بيانات صحيحة موجبة فقط uint8_t a=0; في اللغة Java: // متغير حجمه بايت واحد ويخزّن فيه بيانات عددية صحيحة موجبة وسالبة byte x=0; // متغير حجمه بايتين ويخزّن فيه بيانات عددية صحيحة موجبة وسالبة short x=0; // متغير حجمه أربعة بايتات ويخزّن فيه بيانات عددية صحيحة موجبة وسالبة int a=0; إذًا تختلف طريقة تمثيل الأعداد الصحيحة وفقًا للحجم المحجوز من الذاكرة من لغة إلى أخرى ويمكنك العودة إلى ويكيبيديا لتتعرف على طريقة تمثيل البيانات الصحيحة في أكثر اللغات انتشارًا. الأعداد الحقيقية تمثل الأعداد الحقيقية Real numbers جميع الأعداد الصحيحة والعشرية ذات الفاصلة الموجبة منها والسالبة مثل 2.56 أو 2341.234- وهكذا، وتُستخدم هذه الأعداد عند الحاجة إلى تخزين قراءات لمقادير فيزيائية مثل درجات الحرارة أو نواتج العمليات الحسابية المتنوعة كناتج عملية قسمة أو حساب الجذور التربيعية وما شابه. تمثل لغات البرمجة الأعداد الحقيقية بكلمة ذات أربع بايتات 232 عددًا أو كلمة ذات ثمان بايتات 264 عددًا، وتختلف تسمية الأعداد الحقيقية من لغة إلى أخرى. إليك بعض الأمثلة: في اللغات #C++/Java/C: // متغير حجمه أربعة بايتات ويخزّن فيه بيانات عددية حقيقية بإشارة float a=0; // متغير حجمه ثمان بايتات ويخزّن فيه بيانات عددية حقيقية بإشارة double a=0; الاختلاف بين نوع البيانات float ونوع البيانات double هو في دقة الأجزاء العشرية أي الأرقام المخزنة بعد الفاصلة العشرية، فالثاني هو عدد عشري مضاعف الدقة عن الأول. البيانات المنطقية البوليانية تمثل هذه البيانات إحدى القيمتين 0 أو 1 وتحجز بتًا واحدًا من الذاكرة، تُستخدم هذه البيانات لتخزين البيانات الناتجة عن أسئلة تحتمل فقط جوابًا بنعم/لا أو صح/خطأ، كأن تكون غرفة في فندق ما محجوزة أو هل اشترى عميل منتج معين أم لا وهكذا. إليك بعض الأمثلة: في لغة JAVA: // متغير حجمه بت واحد ويخزّن فيه قيمة منطقية 0 أو 1 boolean a=1; في لغة ++C: // متغير حجمه بت واحد ويخزّن فيه قيمة منطقية 0 أو 1 bool a=0; المحارف والنصوص تُمثّل هذه البيانات محرفًا واحدًا character كحرفٍ "ب" مثلًا أو رمزٍ "#" مثلًا أو علامة ترقيمٍ ":" مثلًا أو بعض المحارف الخاصة (لها استخدامات خاصة ولا تطبع على الشاشة كالمحارف التي تهيئ موقع الحركات في اللغة العربية)، وتُمثّل المحارف بكلمة من بايت أو بايتين أو ثلاثة أو أربعة وذلك وفقًا لطريقة الترميز. فترميز ASCII مؤلف من 128 أو 256 محرفًا أي يستخدم بايت واحد وقد وُسِّعت إلى الترميز الموحد UTF-8 الذي يستخدم من بايتين إلى أربعة بايتات ويرمز ملايين المحارف التي تغطي معظم الرموز والحروف في جميع اللغات المعروفة كما ظهرت توسيعات أخرى لمحارف ASCII مثل ISO وOEM وwindows125x وغيرها. تتعامل مختلف لغات البرمجة مع المحارف وتعرفها بطرق مختلفة، وإليك بعض الأمثلة: في لغات ++JAVA/C#/C: // متغير يعبّر عن محرف واحد char ch="#"; هذا بخصوص المحارف ولكن ماذا لو أردنا تخزين نص في متغير؟ النص String هو في الواقع سلسلة متلاحقة من المحارف أو مصفوفة من المحارف array of characters وبالتالي تُشتق الأنواع النصية انطلاقًا من المحارف وتتعامل معها انطلاقًا من العمليات على المحارف أيضًا، وتُعرف معظم اللغات هذا النوع بالاسم string. إليك مثالًا: في لغة ++C: #include <string> //إدراج المكتبة المعيارية الخاصة بالتعامل مع النصوص using std::string // استخدام فضاء أسماء النوع النصي int main(){ string s1= "مرحبًا"; sting s2="أيها العالم"; cout<< s1+s2;// "ستكون النتيجة "مرحبًا أيها العالم return 0; } انتبه إلى أنَّ لغة البرمجة قد تعامل المحرف معاملة النص وتدخله ضمن نوع النص String مثل لغة جافاسكربت وقد تميز اللغة بين المحرف Char وبين النص أو السلسلة النصة String كما في لغة جافا وسي. أنواع البيانات مقابل هياكل البيانات تُدعى الأنواع المدمجة في أي لغة بالأنواع الأساسية basic أو البدائية primitive ويمكنك استخدامها مباشرة في تعريف المتغيرات دون أية مقدمات فلغة جافاسكربت مثلًا التي تتصف بأنها متهاونة في تحديد أنواع البيانات تملك الأنواع الأساسية التالية: String: يمثل النصوص والسلاسل النصية. Boolean: يمثل القيم المنطقية مثل صح/خطأ. Number: يمثل الأعداد. BigInt: يمثل الأعداد الكبيرة جدًا. Undefined: يمثل عدم التعريف. Null: يمثل القيمة الفارغة أو عدم وجود قيمة. Symbol: يمثل الرموز الفريدة الخاصة. Object: يمثل هيكلة لتخزين البيانات. ناقشنا بعض الأنواع السابقة في القسم السابق والتي قلنا أن أغلب لغات البرمجة تشترك فيها ولكن أريد التركيز على النوع الأخير Object فقد تطلق لغة البرمجة على طريقة وهيكلة محددة لتخزين البيانات بنوع بيانات وقد تكون من ضمن الأنواع الأساسية كما رأينا في لغة جافاسكربت التي هي عبارة عن طريقة تخزين بيانات على شكل مفتاح/قيمة key/value مثل: const colorsObj = { black: '#000000', white: '#ffffff', red: '#ff0000', cyan: '#00ffff', pink: '#ffc0cb' } لاحظ أننا ربطنا اسم كل لون بقيمته الست عشرية والتي تمثِّل سلسلة نصية string ويمكننا الوصول إلى قيمة اللون الأسود مثلًا بالشكل colorsObj.black، ويمكن وضع أي نوع بيانات من الأنواع السابقة مكان النص. ومن هذه الهيكلة تُشتق هياكل بيانات أخرى أشهرها على الإطلاق المصفوفات Arrays التي تمثل بالشكل التالي في جافاسكربت: const colorsObj = [ '#000000', '#ffffff', '#ff0000', '#00ffff', '#ffc0cb' ] ستجد الكثير من أشكال هياكل البيانات ولا يسعنا في هذا المقال حصرها كلها ولكن وجبت الإشارة إليه بأنه وسيلة مهمة جدًا لتنظيم البيانات وهيكلتها وقد يعدها البعض نوعًا من أنواع البيانات إلا أنها عبارة عن حاويات تحوي البيانات وتسهل الوصول إليها. أنواع البيانات المستخدمة في قواعد البيانات تحدد معظم قواعد البيانات -وهي برمجيات صممت لاحتواء البيانات وتنظيمها والتعامل معها- أنواع البيانات التي تخزّنها كي يسهل التعامل معها وتعديلها، وتستعمل قواعد البيانات جميع الأنواع التي تستخدمها لغات البرمجة أي: الأعداد الصحيحة integer. الأعداد العشرية (وهي أعداد حقيقية) ذات الفاصلة العائمة float. البيانات المنطقية (0 أو 1). المحارف character. القيم النصية string. ويضاف إليها: المحارف متغيرة الطول varchar: وتمثل مجموعة محددة الطول من المحارف المتتابعة فعندما نحدد نوع أحد البيانات على أنه varchar(20)‎ أي أن العدد الكلي للمحارف في هذا المتغير هو 20 محرفًا. القيم الزمنية والتاريخ date-time: وتخزن بيانات تتعلق بالتاريخ (يوم:شهر:سنة) والوقت (ساعة:دقيقة). إن كنت ستتخصص في قواعد البيانات وستعمل مع أحد أنظمة قواعد البيانات، فيمكنك آنذاك التحقق من توثيقات قاعدة البيانات التي ستستخدمها وما ستوفره من أنواع بيانات يمكن استخدامها، وعمومًا ننصحك بالاطلاع على مقال البيانات في SQL: أنواعها والقيود عليها وانظر أيضًا توثيق أنواع البيانات في لغة SQL العربي من موسوعة حسوب. ملاحظة: تطور حاليًا ما يُدعى بقواعد البيانات الكائنية OODB التي تخزّن بياناتها على شكل كائنات بدلًا من الأنواع الأساسية التي تعرفنا عليها وستجد لنفسها قريبًا مكانًا في عالم البيانات الضخمة المتغير. خاتمة رأينا في هذا المقال أن الأساس المتين للمعرفة البشرية مبني على البيانات التي نستخلصها من بيئتنا المحيطة عند محاولة فهم أو توصيف أو تحليل ما يجري حولنا. لقد حُفظت البيانات على جدران الكهوف وعلى جلود الحيوانات وعلى الأوراق وفي الكتب وصولًا إلى الخوادم المخصصة التي تخزن كميات هائلة من أنواع البيانات وتساعد عبر إمكاناتها التقنية في معالجة هذه البيانات وإيجاد الروابط فيما بينها والحصول على معارف ورؤىً جديدة. تحدثنا أيضًا عن طرق حيازة المعلومات وكيفية تصنيفها، وتعرفنا على الطريقة الرقمية في تخزين واسترجاع البيانات، وفصلنا الشرح في أنواع البيانات في لغات البرمجة وضربنا مختلف الأمثلة عليها لما لها من أهمية كبيرة في فهم أي لغة برمجة تريد أن تتعلمها. وهكذا نكون قد أحطنا ببعض المفاهيم الأساسية التي قد تجدها عونًا لك إن أردت الخوض في مجال البيانات المزدهر وسريع التطور كتحليل البيانات وتصميم قواعدها وتحليل الأنظمة والحوسبة الحدية والتنقيب في البيانات الضخمة أو حتى العمل في البرمجة التي ستعالج البيانات أولًا وآخرًا. اقرأ أيضًا تعلم البرمجة المدخل الشامل لتعلم علوم الحاسوب علم البيانات Data science: الدليل الشامل مفهوم علم البيانات Data Science المرجع الشامل إلى تعلم لغة بايثون

هل فكرت يومًا خلال تصفحك لموقع ما أن تخزّن إحدى الصفحات على حاسوبك لجودة المحتوى أو لأهمية المعلومات التي قرأتها؟ فهل لاحظت -إن فعلت ذلك- أن امتداد هذا الملف (آخر ثلاث أو أربعة أحرف من اسم الملف) من الشكل html أو htm؟ هل وصلك بريد إلكتروني من شركة أو من مجلة إلكترونية أو حتى من صديق ووجدته مميزًا يضم صورًا وعناوين وكل ما اعتدت أن تفعله هو كتابة بضعة أسطر توجز فيها ما تريد ثم ترسل بريدك؟ هل دخلت يومًا إلى منتدى إلكتروني وأردت أن تكتب تعليقًا وقرأت عبارة "يُسمح باستخدام أكواد HTML" وتساءلت ما هي أكواد HTML؟ هل فكّرت أخيرًا وأنت تتصفح الإنترنت، أنّ جميع المواقع دون استثناء تتشابه في هيكليتها؟ فجميعها يضم شكلًا من قوائم التنقل وأقسامٍ أعلى وأدنى الصفحات تبقى كما هي عند التنقل بين صفحات الموقع نفسه، ونماذج لتعبئتها وعناوين رئيسية وفرعية وروابط لتنظيم المحتوى وتسهيل الوصول إلى المعلومات المطلوبة. إن الوصفة السحرية خلف كل ذلك هي لغة ترميز النص التشعبي Hyper Text Markup Language واختصارًا لغة HTML. سننتعرف في هذا المقال على لغة HTML وذلك إن أردت أن تتعلم لغة HTML من الصفر، إذ سنتحدث بإيجاز عن بدايات اللغة وتاريخ تطورها، ثم ننتقل إلى أساسيات استخدام لغة HTML وأهمية تعلم لغة HTML لأي شخص يرغب في دخول عالم ويب من بوابة المصممين والمبرمجين. نتحدث بعد ذلك عن قدرات HTML ونقاط قصورها، ونستعرض أهم وسوم HTML المستخدمة في كتابة أكواد HTML. جدول المحتويات سنذكر هنا جدول المحتويات باختصار حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة: ما هي لغة HTML؟ الفرق بين اللغات التوصيفية ولغات البرمجة تاريخ وتطور لغة HTML أهمية تعلم لغة HTML ما الذي أحتاج إليه لأبدأ العمل مع لغة HTML استخدامات لغة HTML أساسيات لغة HTML السمات في لغة HTML الوسوم البنائية والعناصر السطرية الوسوم الأساسية في لغة HTML إيجابيات وسلبيات لغة HTML مصادر تعلم لغة HTML ما هي لغة HTML؟ لغة HTML أو لغة ترميز النص التشعبي هي لغة توصيف للمحتوى markup language بمعنى أنها توصِّف محتوًى معينًا كي تتمايز أجزاءه عن بعضها فيسهل تنظيمه وهيكلته، إذ تشير لغة HTML إلى جزء من المحتوى على أنه فقرة وتميز عدة كلمات على أنها عنوان رئيسي وأخرى على أنها عنوان فرعي وقد تسلسل جزءًا آخر من المحتوى على شكل قائمة من النقاط وكل ذلك باستعمال ما يُدعى وسوم HTML التي تُعطي صفحة ويب هيكليتها وتعطي كل جزء منها دلالة semantic معينة. تُستخدم إذًا لغة HTML في إعطاء هيكل عام لصفحة الويب وبالتالي يُعد تعلم لغة HTML أساسيًا لدخول عالم تطوير الويب. بالإضافة إلى قدرة لغة HTML على تضمين الكثير من ملفات الوسائط المتعددة الصوتيات والمرئيات دون الحاجة إلى أية أدوات أو برمجة إضافية، وتساعدك على تصميم نماذج لإرسال البيانات واستقبالها من خلال الإنترنت وغيرها الكثير. الفرق بين اللغات التوصيفية ولغات البرمجة لغة HTML كما أشرنا هي من اللغات التوصيفية markup languages ولا تعد لغة برمجة programming language ويكثر الخلط بينهما ويظن حديث العهد بمجال علوم الحاسوب أن تعلمه لغة HTML يعني دخوله للمجال واحترافه للبرمجة وهذا خلط وخطأ، ويجب التفريق بين لغة التوصيف ولغة البرمجة. يشير مصطلح اللغات التوصيفية إلى نظام لترميز النصوص وتوصيفها وهيكلتها للتحكم بتنسيقها أو بإيجاد علاقات بينها وإغناء محتواه لتسهل عرض النص والتعامل معه والتحكم به، فماذا لو قرأت المقال الحالي بوتيرة واحدة وكأنه نص مثل نص هذه الفقرة فهل ستميز العناوين والأقسام والفقرات؟ هل فكرة أو قرأت كتابًا وكان بتنسيق ووتيرة واحدة؟ لن تميز أقسامه عن بعضها، وهذا ما تفعله اللغات التوصيفية بالضبط وما تراه أمامك الآن بعينيك. تضم اللغات التوصيفية مجموعة من الوسوم أو القواعد التي يشير كل منها إلى دلالة معينة وتستخدم لتنظيم البيانات النصية وعرضها بطريقة يسهل تمييزها بالنسبة للإنسان أو الحاسوب كأن تشير إلى عبارة على أنها عنوان وتبرز عبارة أخرى بكتابتها بخط ثخين وهكذا. لا تُعرض تلك القواعد أو الوسوم ولا تُضاف إلى المحتوى الفعلي بل وظيفتها وصف البيانات فقط وترتيبها، وتتطلب هذه اللغات فقط برنامجًا ليحلل الوسوم ويعرض المحتوى وفقًا لمدلول كل وسم وغالبًا ما تحلل المتصفحات أكواد HTML وأكواد XML ثم تعرض النتائج بينما تحلل برمجيات أخرى مخصصة لغات توصيفية أخرى مثل مارك داون Markdown ودوك بوك DocBook اللتان تستخدمان في المحررات النصية ولاتخ LaTex لكتابة الأوراق البحثية الأكاديمية وغيرها الكثير. أما اللغات البرمجية فوظيفتها توجيه أوامر للحاسوب لإنجاز مهمة أو وظيفة محددة مثل توجيهه لجمع عددين مع بعضهما كأبسط مثال أو طلب بيانات من مستخدم ومعالجتها وعرضها له أو استعمالها في غرض ما فأنت حين تسجل في موقع مثل أكاديمية حسوب أو تدفع لشراء شيء ما تتدخل لغة برمجية في الخلفية لإنجاز هذه المهام وغيرها من الأمثلة المتقدمة، وهنالك الكثير من لغات البرمجة التي تتفاوت وظيفتها ومجال استخدامها فمنها عام الاستخدام الذي يُستخدم في بناء البرامج والتطبيقات الحاسوبية مثل لغة البرمجة بايثون، ومنها ما هو خاص الاستخدام مثل لغة PHP التي تستخدم في أغلب الحالات في تطوير الويب بدمج لغة HTML معها. تأتي بساطة HTML وسهولتها من كونها لغة توصيفية خفيفة وسهلة الفهم، ولا يتطلب العمل معها الكثير من الأدوات أو البرمجيات وبالتالي استقلالية ومحمولية portability أفضل. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن تاريخ وتطور لغة HTML قد لا تتوقع إطلاقًا أين ولدت لغة HTML! وهذا دليل إضافي على صحة مقولة "الحاجة أم الاختراع". لقد أراد مهندس الحاسوب تيم بيرنرز لي Tim Berners-Lee الذي يعمل في قسم خدمات الحاسب في مؤسسة CERN لفيزياء الجزيئات أن يُمكّن الزملاء في مختلف المواقع داخل وخارج المؤسسة من تبادل الدراسات والأوراق البحثية وربطها مع بعضها بدلًا من تحميل نسخ عن جميع هذه الأوراق والأبحاث على كل حاسوب. أي بكلمات أخرى، سيتمكن أي باحث أثناء قراءته لمقال ما أن ينتقل إلى مقال آخر أو يستعرض معلومات أخرى جرى ذكرها في المقال الذي يقرأه دون أن يُضطر إلى إغلاق مقاله ثم البحث من جديد في أرشيف المقالات عن الموضوع الذي صادفه ثم العودة إلى المقال الأصلي. لا أعتقد أن بيرنرز-لي قد توقع من فكرته الثورية ميلاد تقنية شبكة الويب بأكملها فقد أثبتت هذه الفكرة قدرتها على التوسع لبناء شبكة عنكبوتية من الصفحات المترابطة التي تتيح لك التنقل فيما بينها جيئةً وذهابًا. لقد اعتمد بيرنرز-لي على لغة توصيف موجودة بالفعل ومحط اتفاق بين جميع العاملين في مجال الحواسب وهي لغة الترميز المعياري العام SGML فبدون أساس متين تستند عليه لم يكن ليُكتب البقاء لهذه اللغة. إذًا اعتمد بيرنرز-لي على فكرة الوسوم التي تُستخدم في SGML وهي مفاتيح تحيط بنص معين في بدايته ونهايته ليكون لهذا النص دلالة معينة وفقًا لنوع الوسم مثل <p/>...نص ما هنا...<p>، لكنه أضاف وسمًا جديدًا للمساهمة في الربط بين الصفحات وهو وسم المربط أو المرساة <a>. ولكي تُفسّر هذه الوسوم لا بد من وجود أداة تحللها وتعرض المطلوب على الشاشة لهذا صمم بيرنيرز لي أول أداة لتحليل أكواد لغة HTML دُعيت حينها WorldWideWeb وتختصر إلى www وهو اختصار معروف لك تجده اليوم في أغلب الروابط، وكانت هذه الأداة أصل ما يُدعى اليوم بالمتصفحات Browsers. شجّع بيرنرز-لي المهتمين بلغة HTML على كتابة برمجيات لتحليل هذه اللغة وعرضها على الشاشة كما اخترع بنفسه بروتوكولًا لنقل وتوزيع النصوص التشعبية سماه بروتوكول HTTP أي بروتوكول نقل النصوص التشعبية HyperText Transfer Protocol. لا زلنا حتى اللحظة في عام 1991 لكن مع ظهور فكرة أسماء النطاقات DNS (دُعيت حينها خدمة الأسماء الموزّعة) وعناوين إنترنت IP أمكن الربط بين الحواسب بطريقة أسهل وأكثر أمانًا وأصبح كل شيء مهيئًا لولادة الويب. تصاعد اهتمام الباحثين والعاملين في مجال الحواسب بلغة HTML لاحقًا من خلال عدة اجتماعات ومراسلات لتظهر للعلن أولى نسخ لغة HTML الرسمية عام 1993 وهي HTML 1.0. مع زيادة اهتمام الفعاليات بهذه اللغة أضيفت وسوم وميزات جديدة لها وبدأت الكثير من الشركات بالعمل على إنتاج المتصفحات فظهرت النسخة HTML 2.0 وتلاها ظهور متصفحات معروفة مثل نتسكيب Netscape وإنترنت إكسبلورر Internet Explorer. قدم ديفيد راغيت David Raggett نسخة HTML+‎ عام 1993 وأضافت هذه النسخة الكثير من الميزات إلى اللغة مثل الجداول ونماذج إرسال البيانات، والتي اعتمدت أغلبها لاحقًا في نسخة HTML 3.0 عام 1995 لكنها سببت في بطء المتصفحات مما دفع لاعتماد نسخة جديدة محسّنة هي HTML 4.0 عام 1999 ثم تلتها النسخة HTML 4.01 في وآخر العام ذاته وكانت بالفعل أكثر نجاحًا. تبنت منظمة W3C وهي رابطة الشبكة العالمية World Wide Web Consortium التي أسسها بيرنرز-لي اعتماد معايير لغة HTML وتطويرها منذ عام 1996 ثم تكونت لاحقًا مجموعة WHATWG عام 2004، وضمت الكثير من الشركات المهتمة بصناعة تقنيات الويب آنذاك وقد أخذت على عاتقها تطوير نسخة HTML 5 لتصدر رسميًا عام 2015، وتُعد HTML 5 امتدادًا لسابقتها والأكثر اعتمادًا حاليًا وتقدم الكثير من الميزات المتقدمة مثل الموقع الجغرافي ودعم الفيديو والصوتيات ضمنيًا واستخدام لوحات الرسوم الديناميكية من خلال من خلال العنصر Canvas وكذلك العمل مع مقابس ويب web sockets وغيرها، وصدرت بعد ذلك نسختي HTML 5.1 و HTML 5.2 في عامي 2016 و 2017 تباعًا. لن تكون هناك نسخة HTML 6 في المدى المنظور بل سيستمر العمل على تطوير HTM 5 بما يتناسب مع التطور التكنولوجي وفقًل لتقارير تصدرها مجموعة WHATWG ومن يدري في النهاية، فالويب متطور بسرعة رهيبة وقد تنقلب الموازين وتتغير الأحكام. أهمية تعلم لغة HTML أهمية تعلم لغة HTML تأتي من كونها المفتاح الرئيسي للبدء بتعلم البرمجة وتطوير مواقع وتطبيقات الويب كما ذكرنا في أول عبارة في المقال. ولعل وجودك هنا يدل على رغبتك في خوض مغامرة جديدة في عالم ويب تتجاوز حدود تصفح المواقع والنشاط على مواقع التواصل والمنتديات. فإن كنت محقًا في تخميني، إليك بعض الأسباب التي تدفعك إلى تعلم لغة HTML: لغة HTML هي مدخلك الرئيسي إلى علوم الحاسب عمومًا وإلى تصميم مواقع وتطبيقات ويب خصوصًا: فإن شبهنا موقع ويب بالمنزل فستكون لغة HTML بمثابة هيكل المنزل من أعمدة وأسقف وجدران. لغة HTML بسيطة التعلم: كل ما عليك فعله بداية هو تذكر وسوم لغة HTML ودلالاتها ثم استخدام هذه الوسوم وفق تسلسل منطقي لتكوين الصفحة فالوسم <title> مثلًا لإضافة عنوان للصفحة والوسم <p> لإضافة فقرة نصية والوسم <img> لإدراج صورة وهكذا. لا يحتاج تعلم لغة HTML واستخدامها إلى أدوات معقدة: يمكنك استخدام أي محرر نصي بسيط لكتابة أكواد HTML ثم حفظ الملف بالامتداد html ليتحول إلى صفحة HTML ساكنة يستطيع أي متصفح تحليلها. مع ذلك قد تستفيد من محررات متقدمة لتسريع وتيرة عملك والتأكد من عدم وجود أخطاء. لغة HTML لغة مرنة: ارتكب ما تشاء من الأخطاء وسيحاول المتصفح جاهدًا فهم ما تريده. يشجعك ذلك غالبًا على الانطلاق في العمل، فرؤية نتاج ما فعلته أمر محفز، بينما ستحبطك بالتأكيد قائمة بعشرات الأخطاء لا تعرف معها أين اخطأت وكيف تتجاوز تلك الأخطاء. فإن شجعتك النقاط السابقة على البدء في تعلّم لغة HTML، تابع القراءة معنا لتتعرف على أساسيات لغة HTML وأين وكيف تُستخدم. احصل على موقع إلكتروني مخصص لأعمالك أبهر زوارك بموقع احترافي ومميز بالاستعانة بأفضل خدمات تطوير وتحسين المواقع على خمسات أنشئ موقعك الآن ما الذي أحتاج إليه لأبدأ العمل مع لغة HTML كما أشرنا سابقًا لن تُضطر إلى شراء أية أدوات أو أن تتكلف أية مبالغ إضافية ولا حتى تعلم العمل على برامج جديدة، فكل ما تحتاجه: محرر نصي: مثل المفكرة Notepad إن كنت من مستخدمي ويندوز أو محرر النصوص الافتراضي تكست Text أو كايت Kate إن كنت تستخدم إحدى توزيعات لينكس. إذ ستكتب أكواد HTML كما تكتب أي نص ثم تحفظ عملك تحت اسم معبّر ينتهي بالامتداد html، وهذا كبداية. متصفح ويب: لن يخلو حاسوبك من هذه البرامج طالما أنك تستخدم الإنترنت. يُفضّل مع ذلك استخدام إحدى المتصفحات الحديثة مثل غوغل كروم أو موزيللا فايرفوكس أو مايكروسوفت إيدج أو غيرها، وبإمكانك تنزيلها مجانًا. يحلل المتصفح أكواد HTML ويعرض محتوى الصفحة وفقًا لأكواد HTML التي استخدمتها. قد تحتاج لاحقًا إلى محررات نصية أكثر تقدمًا لتسريع إنتاجيتك مثل VS code لتسهيل كتابة أكواد لغة HTML خصوصًا إن كنت مقبلًا على تعلم البرمجة. إذ تقدم هذه المحررات النصية الخاصة ميزات إضافية كالإكمال التلقائي للشيفرة بمجرد كتابة الأحرف الأولى وتنبيهك إن ارتكبت بعض الأخطاء واقتراح الحلول وغير ذلك. استخدامات لغة HTML رأينا أن لغة HTML هي لغة توصيفية أي توصِّف النصوص لذا تُستخدم مع النصوص عمومًا لتنسيقها وهيكلتها ولكن شاع استخدامها مع نصوص صفحات الويب خصوصًا (التي هي نصوص في النهاية) وبالتالي تعتبر وسيلة يستخدمها مصممو ويب في: نشر الملفات والمستندات بطريقة مهيكلة ومرتبة على الإنترنت، إذ يمكن أن تضم صورًا وجداول وقوائم ونصوصًا. الوصول إلى معلومات من الإنترنت من خلال الروابط التشعبية بمجرد نقرها. تصميم نماذج لتنفيذ عمليات على مزودات خدمة بعيدة على الإنترنت وإعادة النتائج، كأن تبحث عن معلومات أو تحجز رحلة طيران أو تشتري منتجًا. تضمين مقاطع فيديو مرئية ومقاطع صوتية وغيرها لعرضها وتشغيلها ضمن ملفاتك مباشرة. إن تحدثنا على عملية تطوير الويب وتحديدًا تطوير الواجهات الأمامية في صفحات الويب، فيُستخدم ثلاثي ذهبي أساسي فيها أولها لغة HTML لهيكلة النصوص وتوصيفها كما رأينا وثانيها لغة CSS صفحات الأنماط الانسيابية لإضافة تنسيقات وتأثيرات مرئية تضفي جمالية وبهجة على النصوص، وثالثها لغة جافاسكربت البرمجية التي تمنحها قدرات تفاعلية كبيرة مثل التفاعل عند النقر أو تنفيذ وظائف معينة في الخلفية، إذ تشكل هذه اللغات الثلاثة أساسًا للصفحات الديناميكية وتطبيقات الويب. لا يقتصر استخدام لغة HTML على بناء صفحات ويب مخصصة للنشر على الإنترنت، فقد تُستخدم لأغراض بناء النماذج الأولية للبرمجيات أو الأنظمة، إذ تُستخدم صفحات HTML لبناء واجهات مستخدم تجريبية تحاكي الواجهات الفرعية والنوافذ وكيفية التنقل بينها أثناء مرحلة التصميم (بالتنقل بين هذه الصفحات بدلًا من توضيح الأمر عن طريق الرسوميات) نظرًل لسهولة التعامل معها موازنة بلغات البرمجة. إضافة إلى ذلك تُستخدم HTML حديثًا كأساس لكتابة واجهات تطبيقات سطح مكتب تعمل على أنظمة تشغيل مختلفة في وقت واحد عبر استعمال الثلاثي الذهبي السابق مع إطار العمل إلكترون Electron، وذلك اعتمادًا على المعايير الموحدة في تطوير الويب بدلًا من تعلم لغة مخصصة لكل نظام تشغل لبرمجة تطبيقاته فلا تستغرب أن بعض واجهات التطبيقات التي تستعملها الآن مكتوبة بلغة HTML، وتشرح دورة تطوير التطبيقات باستخدام JavaScript من أكاديمية حسوب كيفية تطوير تطبيق سطح مكتب باستخدام Electron.js مرة واحدة ولكن يعمل على كل أنظمة التشغيل كما أشرنا. أساسيات لغة HTML تعتمد لغة HTML على مفهوم الوسم tag وهو مفتاح دلالي يحيط بنص ليعطيه مظهرًا أساسيًا ودلالة محددة. لنلق نظرة على المثال التالي: <h1> HTML مرحبا بك إلى </h1> <p> هي لغة توصيفية تُستخدم لهيكلة صفحات ويب HTML لغة </p> لو كتبت هذه الشيفرة في محرر نصي (يمكنك نسخها ولصقها أيضًا) ثم حفظت التغييرات بالاسم test.html ونقرت على هذا الملف الجديد سيستدعي نظام التشغيل المتصفح الافتراضي ليعرض النتيجة التالية: عرض المتصفح عبارة "مرحبًا بك إلى HTML" بخط ذو حجم كبير وثخين لأنه أحيط بالوسم <h1> والذي يُعرف بأنه وسم عنوان من المستوى الأول ويدلّ على أن النص الذي يغلّفه هو عنوان لفقرة ما. بينما عرض العبارة الأخرى التي أحيطت بالوسم <p> في سطر جديد وبالشكل الاعتيادي كما يعرضه أي محرر نصي. يُدعى وسم HTML هذا بوسم الفقرة النصية ويدل على أن النص الذي يُغلّفه هو فقرة نصية سردية تورد محتوى معينًا. يتألف عنصر HTML من الأجزاء التالية: وسم البداية Opening tag: وتتكون من اسم العنصر (p أو h1 في مثالنا) محاطًا بقوسي زاوية <>. ويشير هذا الوسم إلى النقطة التي يبدأ عندها العنصر. وسم النهاية Closing tag: يشابه وسم البداية لكنه يبدأ بشرطة أمامية / تسبق اسم العنصر. ويشير هذا الوسم إلى نهاية العنصر (<p/> و <h1/>). المحتوى Content: ويشير إلى المحتوى النصي الموجود بين وسمي البداية والنهاية. وقد لا يغلف وسمي البداية والنهاية أي محتوى، فيُدعى العنصر في هذه الحالة عنصرًا فارغًا empty element. وهكذا نرى أن صفحة ويب مبنية أساسًا باستخدام وسوم HTML المتتالية أو المتداخلة كما سنرى لإعطاء الصفحة الهيكلية المميزة لها. وكل ما عليك فعله لتعلم لغة HTML هو الاطلاع على تلك الوسوم ومعرفة دلالاتها ثم محاولة إدراج كود HTML الخاص بها في المكان المناسب. لا تُعد لغة HTML لغة ًحساسة لحالة الأحرف عند كتابة الوسوم، فالوسمين <p> أو <P> مثلًا متطابقين ويعطيان النتيجة ذاتها. السمات في لغة HTML سمات HTML هي مفاتيح داخلية توضع داخل وسم بداية العنصر لتقدم معلومات أو ميزات إضافية لهذا العنصر، ويمكن تشبيه العنصر بطفل والسمة بصفات ذلك الطفل مثل اسمه التي تحمل قيمة عبد الله وطوله ووزنه وغيرها من الصفات. وتتكون السمة من اسم السمة يليها إشارة مساواة ثم قيمة السمة ضمن إشارتي تنصيص مزدوجتين (" ") أو مفردتين (' '). ولا بد من وجود فراغ بين السمة واسم العنصر وبين السمة والسمة التي تليها إن وجدت. إليك مثالًا عن عرض صورة باستعمال الوسم <img>: <h1>جمال الطبيعة</h1> <img src="nature.jpg" width="300px" alt="صورة من الطبيعة"> وضعت صورة بجانب صفحة text.html باسم nature.jpg وأشرت إليها في الخاصية src التي يأخذها عنصر الصورة ولاحظ أنني حددت عرضها عبر الخاصية width واسم بديل للصورة إن لم تُعرض لأي سبب عبر الخاصية alt، والنتيجة: ضع في بالك أن السمات التي يأخذها عنصر قد لا يأخذها عنصر آخر وأن لبعض العناصر سمات خاصة فريدة بها، فانظر مثلًا إلى سمات العنصر <img> في توثيقه في موسوعة حسوب وبالطريقة نفسها يمكنك الرجوع إلى توثيق كل عنصر على حدة ومعرفة سماته التي يأخذها. ملاحظة: إن وجدت سمة HTML بلا قيمة أو كانت قيمتها نفس اسمها مثل "disabled="disabled تُدعى حينها بالسمة المنطقية وتُنفّذ ما يوحي به اسمها. نفذ مشاريعك البرمجية باللغة التي تحتاجها استعن بأفضل المبرمجين في كتابة وتصحيح الأكواد البرمجية على خمسات اطلب خدمتك الآن الوسوم البنائية والعناصر السطرية تصنف وسوم HTML ضمن مجموعتين مهمتين هما مجموعة الوسوم الكتلية أو البنائية Block elements والسطرية inline elements وسنشرح الفرق بينهما. أما الوسوم الكتلية، فهي وسوم تظهر في سطر جديد بعد العنصر الذي يسبقها أي لا يمكن أن تقع على نفس السطر مع عنصر آخر لأنها تحتل سطرًا كاملًا من أوله لآخره وسيظهر العنصر الذي يليها في سطر جديد أيضًا. تُعد الوسوم الكتلية في الصفحة عناصر هيكلة وتنظيم ومن أمثلتها وسم الفقرة النصية <p> والعناوين <h> وقوائم تعداد <ol> و <ul> وغيرها، وتجدر الإشارة إلى أن الوسوم الكتلية لا توضع ضمن وسوم سطرية لكنها العكس صحيح. وأما الوسوم السطرية، فتقع داخل الوسوم البنائية وتحيط بأجزاء صغيرة من المحتوى (أي جزء من فقرة نصية أو مجموعة من بنود قائمة). لا تسبب هذه اوسوم ظهور سطر جديد في المستند أي لا تشغل بنفسها السطر بالكامل من هذه الوسوم نذكر الوسم <span> الذي يطبق تنسيقًا على جزء من فقرة والوسم <em> الذي يعرض جزءًا من النص بخط مائل. <h1> أنا وسم كتلي</h1> <p>عندما لا أقع على سطر خاص بي <em>وسمًا سطريًا </em> وأكون </p> الوسوم الأساسية في لغة HTML إليك قائمة بأهم وسوم لغة HTML ودلالاتها: عنصر الفقرة p يغلف عنصر الفقرة Paragraph أي فقرة نصية تريد عرضها كما هي ضمن صفحة ويب. يبدأ العنصر بسطر جديد وينتهي بسطر جديد عناصر عناوين الفقرات h يُضاف إلى الوسم أرقام من 1 إلى 6 لتحديد مستوى العنوان Header لتصبح على الشكل <h1> و <h2> وهكذا حتى <h6>. إليك مثالًا: <hgroup> <h1>عنوان من المستوى الأول</h1> <h2>عنوان من المستوى الثاني</h2> <h3>عنوان من المستوى الثالث</h3> <h4>عنوان من المستوى الرابع</h4> </hgroup> ستكون النتيجة كالتالي: عنصر القائمة ol/ul وتضم مجموعة من وسوم HTML تُدعى وسوم القائمة <li> ينبغي ترتيبها وفق تسلسل معين باستخدام قائمة مرتبة <ol> كأن تصف طريقة تحضير وصفة طعام أو خطوات الوصول إلى وجهة معينة أو دون تسلسل باستخدام قائمة غير مرتبة <ul>. إليك مثالًا عن قائمة مرتبة: <ol> <li>أفرغ محتويات ظرف الكريمة ضمن وعاء نظيف</li> <li>أسكب كوبًا من الماء البارد وحرك المزيج بلطف حتى التجانس</li> <li>استخدم خفاقة كهربائية لخفق المزيج بشدة من 4 إلى 5 دقائق</li> <li>ضع الكريمة في البراد حتى يحين وقت استخدامها</li> </ol> ستكون النتيجة كما يلي: وهذا مثال عن قائمة غير مرتبة: <ul> <li>C++</li> <li>Python</li> <li>Java</li> <li>PHP</li> </ul> ستكون النتيجة كما يلي: للاطلاع على المزيد من الوسوم لتعلم لغة HTML وطريقة استخدامها أنصحك بالتوجه إلى التوثيق العربي للغة HTML ضمن موسوعة حسوب لعلوم الحواسب وتكنولوجيا المعلومات. عنصر الرابط a يولد عنصر <a> رابطًا إلى صفحة HTML أخرى أو إلى قسم آخر ضمن صفحة HTML نفسها ويأخذ سمة href التي تحوي رابط الوجهة المطلوبة: <a href="https://academy.hsoub.com/"> أكاديمية حسوب </a> يسمى النص بعد تحويله إلى رابط بالمربط anchor ومن هنا جاءت تسمية العنصر <a> اختصارًا لأول حرف. أخيرًا وليس آخرًا، لا يسعنا في هذا القسم شرح كل عناصر HTML ولا حتى في مقال واحد، وسنحيلك في قسم المصادر إلى مراجع تتعرف فيها على كل وسوم لغة HTML. إيجابيات وسلبيات لغة HTML لا يمكن الحكم على إيجابيات لغة أو سلبياتها إلا من خلال منظور معين يتعلق أولًا وأخيرًا بحاجتك إلى استخدام هذه اللغة أو غيرها، ولا تمثل لغة HTML استثناءً فهي لغة محددة الوظيفة ولا بد من أخذ ذلك بعين الاعتبار. إيجابيات لغة HTML تستخدم لغة HTML على نطاق واسع في بناء هيكلية صفحات ومواقع ويب. تدعم جميع المتصفحات الحديثة لغة HTML وعلى مختلف المنصات. تعلم لغة HTML أمر سهل. حجم أكواد لغة HTML صغير وسريعة التحميل. لا حاجة لشراء برمجيات إضافية للتعامل مع لغة HTML بل يمكن أن تكتفي بمحرر نصي ومتصفح. لغة HTML شديدة المرونة وتحاول تجاهل الأخطاء التي ترتكبها أو تفسير ما هو مكتوب لإظهار نتيجة. يمكن أن تتكامل لغة HTML بسهولة مع لغات أخرى مثل JavaScript. من السهل كتابة أكواد HTML حتى بالنسبة للمبتدئين. تضم لغة HTML عددًا كبيرًا من العناصر التي تمتلك دلالات مختلفة مما يساعد في تنظيم وهيكلة صفحة الويب بطريقة أكثر احترافيةً ووضوحًا. سلبيات لغة HTML لا يمكن استخدام لغة HTML في تقديم صفحات ديناميكية تتجاوب مع المستخدم (كتنفيذ شيء ما عند نقر زر) لوحدها بل صفحات ساكنة فقط. قد تتداخل وسوم HTML مع بعضها عندما يكون هيكل الصفحة معقدًا وبالتالي سنجد صعوبة في تفسير أكواد HTML المكتوبة. تسبب مرونة لغة HTML وتغاضيها عن الأخطاء في أحيان كثيرة أخطاء قاتلة ومكلفة. قد تضطر إلى كتابة كمية كبيرة من اكواد HTML لإنشاء صفحة واحدة بسيطة. محدودية الميزات الأمنية التي تقدمها اللغة. قد تستغرق وقتًا طويلًا في إنشاء بعض المخططات وصيانتها كالجداول الكبيرة والقوائم المتداخلة والنماذج. مصادر تعلم لغة HTML إن كونت تصوّرًا واضحًا عن لغة HTML فلابد أنك تريد تعلم لغة HTML من الصفر أو إن كان لديك الأساسيات فتريد أن تتعمق فيها أكثر، وسندلك في هذا القسم إلى المصادر العربية التي وفرناها والتي تخولك لاحتراف لغة HTML. بدايةً، وفرت أكاديمية حسوب دورة تطبيقية كاملة عن تطوير الواجهات باستخدام لغة HTML وهي دورة تطوير واجهات المستخدم تزيد عن 50 ساعة فيديو أُعدت على يد نخبة من المبرمجين العرب وبلغة عربية تشرح الدورة الثلاثي الذهبي لغة HTML مع لغة CSS ولغة جافاسكربت وستصبح بإنهائك للدورة مطور واجهات مستخدم أمامية مع شهادة معتمدة تشهد بذلك وستتقن فيها تلك اللغات السابقة وستستعملها في بناء واجهات تطبيقات حقيقية. دعمت موسوعة حسوب الدورة هذه بتوفير توثيق HTML العربي وهو توثيق كامل عن لغة HTML بكل عناصرها وتفصيلاتها والسمات التي تأخذها وقيمها وكل شيء بلغة عربية لن تحتاج معه إلى مصادر أجنبية. نضيف إلى ما سبق المنشورات التي تنشرها أكاديمية حسوب ومنها: كتاب نحو فهم أعمق لتقنيات HTML5 وهو كتاب يخص إصدار HTML 5 وما فيه من ميزات وتقنيات أضيفت للغة HTML. قسم لغة HTML: وتُنشر فيه دروس ومقالات عن لغة HTML عمومًا بمختلف المواضيع وفيه ما يزيد عن 80 مقال ودرس عملي تطبيقي ننصح بالإطلاع عليه دوريًا ومتابعته. ستتعلم بتلك المصادر لغة HTML باتقان واحتراف وستستخدمها في مكانها أحسن استخدام لبناء واجهات وصفحات الويب احترافية وستدخل عالم الويب من أوسع أبوابه متجهًا نحو إتقان البرمجة والتطوير، وإن واجهت في رحلتك تلك أي عقبة، فضع سؤالك ضمن قسم الأسئلة والأجوبة لتحصل على إجابة من مبرمجين آخرين معك ولا تنسى مشاركة تجاربك في مجتمع حسوب IO البرمجي. خاتمة تُعد لغة HTML لغة توصيفية سهلة الاستخدام تعتمد على مجموعة من الوسوم لتنظيم النصوص وهيكلتها لتسهيل قراءتها وتوضيح مدلولاتها من فقرات وعناوين وقوائم وكذلك لتسهيل الوصول إلى أجزائها آليًا. تعرفنا في هذا المقال على طبيعة لغة HTML كجزء من عائلة اللغات التوصيفية، واطلعنا على تاريخها واستخداماتها وأساسيات العمل معها، كما ناقشنا إيجابيات لغة HTML وأماكن قصورها لتتكون لديك عزيزي القارئ قاعدة من المعارف الأساسية التي تمكّنك من الانطلاق في رحلتك لتعلم لغة HTML اعتمادًا على مصادر التعلم التي اخترناها لك أو أية مصادر قد تقع عليها وتجدها يسيرة ومحفزّة. اقرأ أيضًا دليلك الشامل إلى تعلم البرمجة المدخل الشامل لتعلم تطوير الويب ما هي فوائد تعلم البرمجة؟ المرجع الشامل إلى تعلم لغة بايثون دليلك الشامل للتحضير للعمل كمستقل عندما تكون مبرمجا تعلم البرمجة بنفسه

تطوير الويب Web Development هو أحد أشهر مجالات العمل الحر حاليًا، فهو واحدٌ من بين أكثر المجالات طلبًا في السوق التقنية، نظرًا لكونه يتعلّق بإنشاء وصناعة المواقع الإلكترونية وتطبيقات الويب بصورةٍ أساسيةٍ، حيث تحتاج إليه جميع المؤسسات والشركات والأفراد العاملون في هذا المجال. ونظرًا لزيادة اعتماد العالم على الإنترنت لإدارة وإتمام الأعمال قد يحتاج الجميع إلى مواقع وتطبيقات وخدمات إلكترونية، هذا بالإضافة إلى التحول الرقمي للمؤسسات والحكومات الذي يزداد يومًا بعد يومٍ منذ اختراع الإنترنت وظهور الويب، حيث زاد بصورةٍ ملحوظةٍ في الآونة الأخيرة بما تحْمله من أحداث ومُستجدات. سيساعدك تعلم تطوير الويب على إنشاء المواقع الإلكترونية وتطبيقات الويب سواءً لك أو لعملائك المحتملين، وهو ما سيُحسّن من خبرتك أو سيجلب لك مصدر دخلٍ إضافيٍ، وقد يصبح مصدر دخلك الأساسي. جدول المحتويات سنذكر هنا جدول المحتويات حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة: ما هي علوم تطوير الويب؟ مجالات تطوير الويب الواجهات الأمامية Front-End لغات تطوير الواجهات الأمامية المكتبات وأطر العمل المتوفرة للواجهات الأمامية مصادر تعلم تطوير الواجهات الأمامية Front-End الواجهات الخلفية Back-End ما هي اللغات المتوفرة لبرمجة الواجهات الخلفية لمواقع الويب؟ أطر العمل المتوفرة لبرمجة الواجهات الخلفية للويب ماذا سيمكنك أن تفعل بعد تعلم إحدى اللغات البرمجية؟ مصادر لتعلم تطوير الواجهات الخلفية Back-End المطور الشامل Full-Stack ما هي فرص العمل بعد تعلم تطوير الويب؟ كيف أختار مجال تطوير الويب المناسب لي؟ خاتمة ما هي علوم تطوير الويب؟ تطوير الويب Web Development هو المجال المختص بإنشاء وتطوير المواقع الإلكترونية وتطبيقات الويب التي تهدف إلى توفير ميزة أو خدمة معينة عبر الإنترنت. توجد عدة مجالات فرعية لمجال تطوير الويب من أبرزها تطوير الواجهات الأمامية front-end web development وتطوير الواجهات الخلفية back-end web development، كما توجد هناك بعض المجالات الأخرى المرتبطة بتطوير الويب إلا أنها لا تتصل به بصورةٍ مباشرةٍ، مثل إدارة العمليات DevOps، وعملية إنشاء وإدارة وتأمين الخوادم Servers وكل ما يرتبط بها، فهي لا تندرج تحت علوم تطوير الويب بصورةٍ مباشرةٍ، إلا أن أي موقع إلكتروني يحتاج إليها لكي يعمل ويُواصل العمل بصورة جيدة. ومطور الويب قد لا يهتم بهذه التخصصات، وغير مطلوب منه دراستها، فهي تَتبَع تخصصات إدارة النظام System Administration وإدارة العمليات DevOps Engineering وما يَتفرّع منهما ولكن من الجيد لمطور الويب أن يتعلم بعض أساسيات هذين الفرعين وهذا ما سنعرضه في المقال. بخصوص مجال الواجهات الأمامية Front-End ومجال الواجهات الخلفية Back-End فالأمر أشبه بالتسوّق في متجرٍ، فعندما يدخل الزبائن إلى متجر أو مطعم يتعاملون مع موظف الاستقبال مثلًا، دون أن يروا أو يعرفوا ما الذي يجري في الخلفية من أعمال تصنيع أو طهو أو تحضير أو غير ذلك، فهم يجلسون في غرفة الاستقبال وينتظرون الحصول على مشترياتهم أو طعامهم ثم يخرجون دون أن يتعاملوا مباشرةً مع جهة أخرى غير موظف الاستقبال أو المحاسب (واجهة المتجر). ويتشابه الأمر ذاك في تطوير الويب فمواقع الويب لها واجهات أمامية تشمل كل ما يراه المستخدم أمامه على موقع الويب ويتفاعل معه أيضًا من رسوميات وأزرار وألوان وعناصر المرئية وشعارات …إلخ، وهذه هي التي يتعامل معها الزائر، بينما تعالج الواجهة الخلفية Backend الطلبات وتدير العمليات بصورة حقيقية، إذ تتصل بقاعدة البيانات عند كل طلب Request لجلب وإحضار المعلومات التي يطلبها الزائر مع معالجتها. ويتخصص بعض الناس في تطوير الواجهات الأمامية لمواقع الويب، بينما يتخصص آخرون في تطوير الواجهات الخلفية، إلا أن هناك بعض المطورين قادرين على تطوير كلا الواجهتين معًا، ونُطلِق عليهم المطورين الشاملين Full-Stack Developers. مجالات تطوير الويب سنتحدث الآن عن مجالات تطوير الويب التي يمكنك التخصص بها، سواءٌ بأحدها أو بها جميعًا، كما سنذكر أبرز المصادر المتوفرة لتَعلّم هذه التخصصات، كلّ على حدة. الواجهات الأمامية Front-End ذكرنا سابقًا أن مجال الواجهات الأمامية Front-End في تطوير الويب يختص بالمظهر الجمالي والهيكلة الأمامية للمواقع والتطبيقات الإلكترونية، واللغات المطلوبة لتطوير الواجهات الأمامية هي HTML و CSS و JavaScript. لغات تطوير الواجهات الأمامية يجري تطوير الواجهات الأمامية باستعمال لغة HTML ولغة CSS التوصيفية ولغة JavaScript البرمجية، وإليك شرح كلّ واحدةٍ على حِدة: HTML: هي لغة هيكلة أو توصيف بِنية صفحات الإنترنت، إذ تفهمها جميع متصفحات الويب؛ ويُحدِّد المطورين في هذه الهيكلة الأجزاء المختلفة من الصفحات الإلكترونية عبْر كتابة رموز بطريقة معينة لكي تفهمها المتصفحات، وبالتالي فهي تَعرِض في نهاية الأمر النصوص والعناصر بهيكلية وطريقة ظاهرة في الواجهة الأمامية يراها المستخدم وتشبه هذه اللغة هيكل السيارة وعناصرها الداخلية. CSS: هي لغة تنسيق تُستعمَل لتنسيق هيكلة وعناصر HTML لتسمح للمطورين بتغيير تنسيق العناصر التي تُعَرض للمستخدمين مثل الألوان والحدود والأشكال والخلفيات والرسوميات والصور، بمعنى أنه من دون CSS ستحصل على صفحاتٍ عديمة التنسيق والألوان، قد تبدو مثل صفحة ويب في عام 1991م، أي أن CSS تتحكم في كلّ شيءٍ مرئيٍ، وتشبه هذه اللغة عملية الطلاء والألوان التي تُضاف على هيكل السيارة. جافاسكربت: وهي لغة برمجة أصيلة، وعلى عكس اللغتين السابقتين فهي تحتوي على المنطق البرمجي المُتضِّمن للخوارزميات والمتغيرات وهياكل البيانات وإجراء الاتصالات وقواعد البيانات …إلخ، وتدعمها جميع متصفحات الويب، ويمكن تطوير مواقع إنترنت لا تستعمل جافاسكربت، إلا أن هذا سيُصِّعب العمل، كما سيحد من مميزات وخصائص الموقع بصورةٍ كبيرةٍ. لاحظ كذلك نظرًا لقدرة جافاسكربت ودعمها القوي، قد تُستعمل مثل لغة برمجية للواجهة الخلفية Back-End فلا يقتصر استخدامها في برمجة الواجهة الأمامية فقط. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن وتُعَد اللغات الثلاثة السابقة بمثابة الثلاثي الذهبي لتطوير الواجهات الأمامية لمواقع الويب، وهناك إضافاتٌ لكلّ منها بالطبع، وكذلك أُطر عمل Frameworks ومكتباتٍ توفّر مزايًا إضافية لهذه اللغات، مما يُسهّل أو يُسِرع من عمل المطورين ولكن هذه مرحلةٌ لاحقةٌ لتعلّمها، فمطور الويب يجب أن يبدأ أولًا بتَعلّم أساسيات هذه اللغات الثلاثة وطريقة تفاعلها مع بعضها بعضًا، ثم يَنتقل بعد ذلك إلى المكتبات والإضافات وأُطر العمل وما شابه. تجد توثيق كل هذه اللغات في موسوعة حسوب لمزيد من التفصيل والتوسع. المكتبات وأطر العمل المتوفرة للواجهات الأمامية سنذكر الآن سريعًا بعض أشهر المكتبات واُطر العمل الشهيرة المتوفرة لتلك اللغات، وبينما تُعَد أُطر العمل Frameworks برمجياتٌ ومكوَّناتٌ جاهزةٌ بالفعل تسهّل من عمل المطورين، بحيث أنهم لن يعودوا بحاجةٍ إلى برمجتها من الصفر في كل مرةٍ،تُعرّف المكتبات Libraries بأنها إضافاتٌ برمجيةٌ على اللغات نفسها، وذلك لإكسابها مميزاتٍ أكثر أو أفضل من السابق. اسم اللغة المكتبات والإضافات وأُطر العمل المتوفرة مصادر التَعلّم HTML لا يوجد إطار عمل مخصوصٍ للغة HTML، وذلك لأنها لغةٌ معياريةٌ لهيكلة صفحات الويب والمحتوى، فلا يمكن الزيادة عليها هي نفسها لأنها ليست لغةً برمجيةً، ورغم ذلك ستجد أن أُطر عمل CSS، وجافاسكربت قد تضيف مميزاتٍ أو طرق تلاعبٍ مختلفةٍ بلغة HTML. توثيق HTML العربي. CSS هناك العديد من أُطر العمل والمكتبات الشهيرة للغة CSS، ويجب علينا التفريق بينهما في هذا السياق؛ فمكتبات CSS هي نوعٌ إضافيٌ من لغات التنسيق التي تَستعمل أغلب خصائص CSS، ولكن تضيف عليها مميزات أخرى أو تكتبها بطريقة مختلفة، ثم تترجم وتصرَّف Compiled تلك الملفات المختلفة إلى ملفات CSS عاديةٍ، بحيث يمكن لمتصفّحات الويب فهمها، بينما أُطر العمل للغة CSS هي مجرد عناصر وتنسيقات جاهزة يمكن استخدامها لبناء وتنسيق المواقع الإلكترونية بسرعة بدلًا من البدء من الصفر، وأبرز مكتبات لغة CSS هي LESS و SASS، بينما أبرز أطر عملها هو Bootstrap و Compass و Foundation و Pure.CSS، كما يوجد العشرات من أُطر العمل المختلفة غيرهم. توثيق SASS وتوثيق Bootstrap مصدران جيّدان لتعلمهما باللغة العربية، أما البقية فلا توثيق عربيٍ لهم على الشبكة حتى الآن، إلا أنك قد تجد بعض الفيديوهات على يوتيوب عند البحث عنهم. JavaScript تُعَد أُطر العمل المتوفرة للواجهة الأمامية بجافاسكربت كثيرةٌ جدًا، وضخمةٌ كذلك، إذ تدعم وتقف خلف كل واحدٍ منها شركةٌ من الشركات التقنية العملاقة مثل جوجل وفيسبوك وتويتر ومايكروسوفت، ومن أبرز هذه الإطارات React و Angular و Vue.js و jQuery، وكما ذكرنا في حالة CSS، فهناك أيضًا مكتباتٌ أخرى تستعمل تنسيق جافاسكربت ولكن بمميزاتٍ وطريقة كتابةٍ مختلفةٍ مثل TypeScript. توفر موسوعة حسوب توثيقاتٍ لكلّ من: TypeScript و React و jQuery، وهناك دروسٌ ومقالاتٌ لكثيرٍ منها على الأكاديمية على قسم جافاسكربت. كتاب أساسيات إطار العمل Vue.js ونُشر قبل فترةٍ من طَرَف الأكاديمية. table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } وليس مطلوبًا منك تَعلّم كلّ هذه المكتبات وأُطر العمل، ولا حتى نصفها بالطبع، ولكن بمجرد أن تنتهي من أساسيات لغات الويب السابقة، يمكنك الانتقال بعد ذلك إلى تَعلّم إطار عملٍ أو مكتبةٍ شهيرةٍ لواحدةٍ من بين كلٍ هذه اللغات لتُصقل خبرتك فيها وتصبح أكثر طلبًا في سوق العمل. مصادر تعلم تطوير الواجهات الأمامية Front-End تُعَد دورة تطوير واجهات المستخدم من أكاديمية حسوب أشمل مصدر عربي متوفر حاليًا لتعلم مجال تطوير الواجهات الأمامية؛ حيث تُشرح فيها جميع هذه التقنيات بالإضافة إلى المكتبات وأُطر العمل الشهيرة في السوق، فهي دورةٌ شاملةٌ تزيد مدتها عن خمسين ساعةً، وهي مشروحةٌ بالكامل باللغة العربية الفصحى، وستحصل على ضمان استرداد ما أنفقته من نقودٍ خلال 6 أشهرٍ، هذا بالإضافة إلى أمرٍ مهمٍ جدًا، وهو المتابعة المستمرة أثناء تعلّمك من مدربين متخصصين مع تسليمك مشاريع عملية لتنفيذها ومراجعتها لك. كما يمكنك الاطلاع على المصادر التالية: HTML: كتاب نحو فهم أعمق لتقنيات HTML5، حيث سيعلّمك كل ما تحتاجه عن HTML، كما يشمل الإصدار الأخير منه تقنية HTML5، وستتعمق في أساسيات لغة HTML، وكيف نشأت وما هي معاييرها كما ستطّلع على أهم المعلومات التي يجب عليك معرفتها لإنشاء الصفحات بها، وذلك في أكثر من 350 صفحة. CSS: مقال تعرف على أساسيات CSS، وهو مدخلٌ جيدٌ للغة التنسيق الشهيرة CSS، وبعدها يمكنك قراءة ما تشاء من المقالات الأخرى المتقدِّمة على قسم CSS من أكاديمية حسوب، كما يمكنك تحميل كتاب التحريك في CSS لرؤية بعض أهم مميزات هذه اللغة وهي التأثيرات الحركية. جافاسكربت: دليل تعلم جافاسكربت، وهي سلسلةٌ شاملةٌ وكاملةٌ لتعلم جافاسكربت من الألف إلى الياء، ويمكنك تصفّحِ كلّ المقالات المنشورة حاليًا على الأكاديمية والاستفادة منها (ارجع إلى أول مقال منشور في السلسلة وابدأ القراءة من هناك). هنالك أيضًا موسوعة حسوب، وهي موسوعة عربية شهيرة تخصص في ترجمة توثيقات لغات البرمجة وتقنيات تطوير الويب ومكتباتها، فهي تحتوي على توثيقات كاملة لهذه اللغات البرمجية بالإضافة إلى مكتباتها وإضافاتها الشهيرة، ويمكنك الاطلاع عليها متى ما احتجت إلى فهم شيء، ومن بين توثيقاتها: توثيق HTML وتوثيق CSS وتوثيق جافاسكربت، وننصح كذلك بقراءة مقال أساسيات بناء تطبيقات الويب لفهم طريقة تفاعل وعمل HTML و CSS و JavaScript مع بعضهم البعض. محتوى أكاديمية حسوب وموسوعة ضخم لا ينضب لذا أترك لك تصفح بقية المقالات والمصادر فيها ومتابعة كل المنشورات الجديدة التي تنشر فيهما. الواجهات الخلفية Back-End ذكرنا سابقًا أن الواجهة الخلفية في مجال تطوير الويب هي التي تعالج البيانات وتخزنها في قواعد البيانات وتستخرجها منها ثم ترسلها إلى الواجهة الأمامية لكي تعرضها للمستخدم كما أنها تُعالج طلبات المستخدمين والصفحات التي يتصفحونها وعمليات تسجيل الدخول والخروج …إلخ، لذلك فهي بمثابة الهيكل العظمي لمواقع الإنترنت. ما هي اللغات المتوفرة لبرمجة الواجهات الخلفية لمواقع الويب؟ تُعَد لغة PHP أشهر لغة برمجية لتطوير الواجهات الخلفية لمواقع الويب وتطبيقات الويب إذ لا يوازيها في ذلك أي لغة أخرى، وذلك لأنها واحدةٌ من أقدم اللغات البرمجية المستخدمة في تطوير الويب، وزادت شهرتها بعد انتشار أنظمة إدارة المحتوى CMS مثل ووردبريس WordPress وجوملا Joomla ودروبال Drupal، فجميعها تعمل بلغة PHP، مما أجبر أغلب شركات الاستضافة آنذاك (في العقد الأول من القرن الحالي) على دعمها افتراضيًا عِوضًا عن اللغات الأخرى. وأنظمة إدارة المحتوى هي أنظمة جاهزة لإنشاء المواقع الإلكترونية بسهولة وسرعة من قوالب ونماذج موجودة يمكنك أن تعدل عليها أو حتى تبنيها أنت بما يناسب متطلباتك، وتُثبّت على الخوادم وتُستعمَل لإنشاء أي نوع من المواقع الإلكترونية وتطبيقات الويب، وظهرت أدوات البناء هذه لتسهّل الأمر على من يريد امتلاك موقع إلكتروني، فلا يريد الجميع بناء موقعه من الصفر وتحمّل التكاليف والوقت والجهد. وتُعَد أنظمة إدارة المحتوى سوقًا بذاتها؛ فتطوير قوالب ووردبريس WordPress بمثابة سوق عملاق عالميًا عليه الكثير من العرض والطلب، وبينما تُستعمَل لغة PHP في تطوير الواجهة الخلفية (حيث أن سكربت ووردبريس يعمل بها)، تُستعمل لغات HTML و CSS وجافاسكربت لإنشاء الواجهات الأمامية كما ذكرنا آنفًا. بعد لغة PHP، تأتي مجموعةٌ أخرى من اللغات البرمجية التي يمكن من خلالها برمجة مواقع وتطبيقات الإنترنت مثل بايثون وذلك عن طريق إطاريْ العمل فلاسك وجانغو، وروبي مع إطار العمل ريلز Ruby on Rails، وجافا، كما يمكنك أن تستخدم جافاسكربت للواجهة الخلفية، فهي لغةٌ تدعم كلا الواجهتين الأمامية والخلفية، وذلك عن طريق إطار Node.js. وفي الحقيقة هنالك لغات أخرى يمكن استخدامها في تطوير الواجهات الخلفية ولكن اقتصرنا على أشهرها وسيأتي لاحقًا مخطط يوضح جميع اللغات التي يمكن تعلمها أطر العمل المتوفرة لبرمجة الواجهات الخلفية للويب إليك قائمةٌ بأشهر أطر العمل المتوفرة التي يمكنك تعلمها بعد تعلم لغة البرمجة: table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } اللغة أُطر العمل المتوفرة مصادر الَتعلّم PHP إطار العمل Laravel وهو واحدٌ من أشهر أطر العمل المتوفرة للغة PHP، وهناك أيضًا Symfony. توثيق موسوعة حسوب متوفر لإطار لارافيل، وهناك مجموعةٌ من الدروس المنشورة له على أكاديمية حسوب. Python إطار العمل جانغو وهو مشهورٌ بإنشاء المواقع العملاقة والضخمة، بينما يُعَد فلاسك إطار عملٍ مصغّرٍ وقويٍ، كما يسْهُل استخدامه لمعظم المواقع. دروس أكاديمية حسوب عن فلاسك وجانغو كافيةٌ لتمضي قُدمًا فيهما. Ruby إطار العمل الأشهر بها هو Ruby on Rails، وهو من أوائل أُطر العمل على الإطلاق. هناك توثيقٌ كاملٌ بالعربية عن إطار العمل Ruby on Rails على الموسوعة، بالإضافة لدروس ومقالات على الأكاديمية. جافاسكربت يَكثُر استخدام إطار Node.js لتشغيل جافاسكربت خارج المتصفح، وذلك لتعمل مثل واجهةٍ خلفيةٍ على خوادم الويب. دروس node.js بالعربية على أكاديمية حسوب. وليس مطلوبًا منك تعلّمها جميعًا كما ذكرنا، بل عليك اختيار مسار واحد والتركيز فيه كبداية، أي متى ما تعلمت لغة برمجة فستتعلم أطر العمل والمكتبات المرتبطة بها والمتعلقة بتطوير الواجهات الخلفية. ماذا سيمكنك أن تفعل بعد تعلم إحدى اللغات البرمجية؟ سيُمكّنك تعلم البرمجة بإحدى لغات برمجة الواجهة الخلفية في مجال تطوير الويب التي أشرنا إليها آنفًا مما يلي: تطوير موقعٍ إلكترونيٍ بالكامل من الصفر؛ بحيث يتواصل مع نظام قاعدة بيانات معين ثم يَعرِض كلّ ما يحتاجه الزائر من خدمات أو معلومات. تطوير تطبيقات ويب توفر خدمات للمستخدمين مثل مواقع الشبكات الاجتماعية ومواقع ضغط المستندات ومواقع تشفير الملفات ومواقع تجميع الصور… إلخ. بناء قوالب جاهزة لأنظمة إدارة المحتوى الشهيرة مثل ووردبريس WordPress أو روبي Ruby أو دروبال Drupal، بحيث تُبرمج بنفس اللغة. بيع أنظمةٍ جاهزةٍ (سكربتات برمجية) تؤدي خدمات معينة على مواقع مثل بيكاليكا، حيث يشتريها المستخدمين منك ويُثبّتوها على خواديمهم، وبذلك يحصلوا على تطبيقات الويب الخاصة بهم. مصادر لتعلم تطوير الواجهات الخلفية Back-End تَعلّم أحد اللغات البرمجية التي أشرنا إليها للتو لا يعني أنك تتعلم شيئًا منفصلًا عن المنطق البرمجي العام؛ وبالتالي أنت تحتاج لفهم بعض المبادئ مثل الخوارزميات وهياكل البيانات والمنطق الرقمي وقواعد البيانات …إلخ، لذلك ستحتاج إلى بعض أساسيات علوم الحاسوب قبل الشروع بتعلم البرمجة ودخول مجال تطوير الويب. ونرشّح دورة علوم الحاسوب من أكاديمية حسوب لأجل ذلك، فهي دورةٌ شاملةٌ تزيد مدتها عن 35 ساعة، وستُعلّمك كل ما ستحتاج إليه للبدء، وإذا كانت لديك المعرفة الأساسية حول البرمجة أو علوم الحاسوب عمومًا وأردت الدخول مباشرةً في تطوير الويب بإحدى هذه اللغات البرمجية، فيمكنك الاطلاع على دورة تطوير الويب بلغة PHP أو دورة تطوير الويب بلغة Ruby، وكلاهما من أكاديمية حسوب أيضًا. ولمزيدٍ من الاطلاع، لديك هذه المصادر الإثرائية: توثيقات موسوعة حسوب العربية التالية: PHP - Python - Ruby - Node.js. كتاب البرمجة بلغة بايثون، وهو كتاب مهم، يشرح معظم أجزاء اللغة باللغة العربية. ملاحظات للعاملين بلغة PHP، وهو كتاب قيد الإنشاء من الأكاديمية، ولكن يمكنك الاطلاع على الدروس المنشورة، حيث تُمثّل أغلب محتوى الكتاب إلى اللحظة. كما ستحتاج لفهم بعض أنظمة قواعد البيانات بالطب، ولهذا يمكنك الاطلاع على كتاب الدليل العملي إلى قواعد بيانات PostgreSQL وكتاب ملاحظات للعاملين بلغة SQL وكتاب تصميم قواعد البيانات. وقواعد MySQL، و MariaDB المشتقة عنها، فهي أشهر مشتقاتها، ويمكنك البحث عن أي فيديوهاتٍ عنها على يوتيوب. المطور الشامل Full-Stack يشمل تطوير الواجهتين الأمامية والخلفية معًا Full-Stack Developer، وهو تَخصُّصٌ آخر من تخصصات تطوير الويب، يجمع بين تطوير الواجهتين الأمامية والخلفية، إلا أنه يزيد عليهما بإمتلاك الشخص لبعض الخبرة في إدارة العمليات DevOps، حيث سيُطلب منه استلام كامل المشروع من الألف إلى الياء بما في ذلك النشر Deployment. وعادةً ما تكون رواتب وأجور المطورين الشاملين العاملين في سوق العمل الحر أعلى من غيرهم، وذلك لأنهم يتقنون العمل على كِلا الجانبين، حيث خبرتهم الكبيرة وقدرتهم على تنفيذ المشاريع بصورةٍ أفضل، ويُطلب كثيرًا على مواقع العمل الحر مثل مستقل تنفيذ مشاريع تطبيقات ويبٍ من الألف إلى الياء، ويُسند إلى مستقلٍ واحدٍ فقط؛ وهو ما يعني أنه عليه أن يكون مطورًا شاملًا، يجيد برمجة كِلا الواجهتين الأمامية والخلفية. ولكن بعض الناس يتخصص في مجالٍ واحدٍ بدلًا من المجالين معًا فتجد من يستطيع تصميم واجهة موقع ووردبريس، ولكنه لا يجيد لغة PHP، وبالتالي سيأخذ مبلغًا معينًا فقط لبرمجة ملفات HTML و CSS وجافاسكربت، وآخرون لا يجيدون تصميم الواجهات الأمامية بصورةٍ جيدةٍ، ولكنهم يجيدون لغة PHP مثلًا أو روبي باحترافيةٍ شديدةٍ، وهؤلاء قادرون على أخذ ملفات الواجهة الأمامية وبناء واجهة خلفية لتكتمل بها أو مثلًا بناء قالب WordPress متكامل يمكن استعماله وغيرها من الحالات. ولكي تكون مطور ويب شامل أي مطور واجهات أمامية وخلفية، فيجب عليك دراسة كلِا المجالين السابقين معًا (بدءًا من الواجهة الأمامية وانتهاءًا بالواجهة الخلفية)، كما ستحتاج إلى بعض الخبرة في إدارة العمليات، ويمكنك الاطلاع عليها من دروس DevOps بالعربية على أكاديمية حسوب. ويمكنك كذلك الاطلاع على دورة تطوير التطبيقات بجافاسكربت، فهي دورةٌ شاملةٌ تشرح لك كيفية استخدام جافاسكربت، سواءًا للواجهة الأمامية أو الخلفية، وكذلك كيفية تطوير تطبيقات الهواتف. وهناك أيضًا دروس متوفرة حول تعلم برمجة قوالب ووردبريس على الأكاديمية، يمكنك الاطلاع عليها. ما هي فرص العمل بعد تعلم تطوير الويب؟ بعد أن تنتهي من تَعلّم تطوير الويب والتخصص بالواجهات الأمامية مثلًا، فسيصبح اسمك مطور واجهات أمامية front end developer، وسيكون بمقدورك: تطوير الواجهات الأمامية لأي موقع ويب مثل المتاجر الإلكترونية ومواقع المحتوى والمدونات ومواقع الخدمات ولوحات التحكم وتطبيقات الويب …إلخ. إنشاء مواقع ويب ثابتة Static Websites تسمح لك بعرض محتوى ثابت لا يتغير للزوار، مثل مواقع المحتوى والمدونات التي يزورها القُرّاء للاستفادة والقراءة. إنشاء صفحات هبوط Landing Pages أو مواقع إنترنت بسيطة للشركات والمؤسسات التي تريد عرض صفحات تحتوي على معلومات موجزة مثل معلومات التواصل وصور للمنتجات بحيث يمكن للزوار قراءتها بصورة سريعة. تحويل أي قالب واجهة أمامية مُصوّر مثل القوالب المُصوّرة على فوتوشوب Adobe Photoshop أو التصميمات المنفذة على برامج مثل adobe XD أو فيجما figma أو أي تطبيق يصمم الواجهات الأمامية إلى شيفرات ويب حقيقية (تدعى الوظيفة تحويل قالب PSD إلى HTML عادة). ومجال تصميم الواجهات الأمامية في عملية تطوير الويب مرتبط بمجال واجهات المستخدم وتجربة المستخدم UI / UX ويكون لمطور الواجهات الأمامية عادةً تواصل مباشر أو عبر قائد الفريق مع مصمم الواجهة وفريق تجربة المستخدم أثناء العمل على المشروع لأي استفسار أو تعديلات مطلوبة. تجد أحيانًا مشاريع عمل متعلقة فقط بتحول تصميم جاهز إلى شيفرة (تدعى عملية تكويد أحيانًا)، وأقتبس صورة عن مشروع من منصة مستقل على سبيل المثال لا الحصر: أما إن تخصصت في مجال تطوير الواجهات الخلفية، فسيصبح مسماك الوظيفي مطور واجهات خلفية back end developer وسيكون بمقدورك: التعامل مع قواعد البيانات من إنشاء وتعديل وإدارة (عبر أنظمة إدارة قواعد البيانات DBMS) لإنشاء قاعدة بيانات الموقع وإدارتها. بناء الواجهة الخلفية لموقع ويب التي تكون من طرف الخادم عبر إحدى أطر العمل المتوفرة التي ذكرناها في الأعلى. بناء واجهات برمجية API بما يتناسب مع متطلبات الموقع أو التطبيق، ومن الممكن العمل على موقع موجود مسبقًا لتطويره والإضافة عليه. صيانة الواجهات الخلفية وقواعد البيانات وتأمين الأنظمة وحمايتها وتوليد التقارير اللازمة. التطرق أحيانًا لعمليات النشر وإداة العمليات DevOps البسيطة وأنظمة التشغيل وأنظمة الحوسبة السحابية وخدماتها. وأما بخصوص المطور الشامل، فيمكنك أداء مهام مطور الواجهات الأمامية ومطور الواجهات الخلفية مجتمعين، ويمكنك العمل على بناء مواقع وتطبيقات ويب بالكامل بمفردك وذلك للمشاريع الصغيرة وبعض المشاريع المتوسطة أما المشاريع المعقدة والكبيرة فتتطلب فريق عمل برمجي لتنفيذها. إن كنت تنوي العمل بمفردك على منصات العمل الحر، فتصفح قسم البرمجة وتطوير المواقع والتطبيقات على منصة مستقل للاطلاع على فرص عمل في مجال تطوير الويب وتصميم الواجهات الأمامية والخلفية، ويمكنك حتى فتح خدمة في أي مواقع خدمات مثل منصة خمسات لبناء الواجهات الأمامية أو الخلفية أو كلاهما وتنفيذ المهام المتعلقة بمجال تطوير الويب عمومًا من مواقع وتطبيقات وغيرها من المهام، فانظر مثلًا قسم البرمجة والتطوير وأيضًا قسم برمجة HTML و CSS لتصفح خدمات مشابهة. إن أحببت العمل في وظيفة مع شركة، فيمكنك البحث عن فرص العمل كمطور واجهات أمامية أو خلفية، وميزة العمل كمطور ويب بهذا المجال أنه لا يتطلب العمل في شركة تقليدية ولا يتطلب شهادات جامعية متخصصة بل يمكنك تجهيز معرض أعمال مع عرض خبراتك السابقة والعمل من منزلك عن بعد، انظر مثلًا فرص العمل المتاحة على موقع مثل منصة بعيد تحديدًا في قسم وظائف برمجة وتطوير عن بعد. كيف أختار مجال تطوير الويب المناسب لي؟ حسنًا، وصلنا الآن إلى أهم قسم من هذا المقال، والسؤال المطروح هو: كيف أختار المسار واللغات وأطر العمل المناسبة لي من بين كل هذه الخيارات المحيّرة؟ والجواب بسيطٌ: جرّبها، ثم انظر في نفسك هل تستمع بالعمل معها أم لا. وبلا شكّ إن كنت ستدخل مجال تطوير الويب من كلا بابيه، فستحتاج أولًا إلى تعلم لغة HTML ثم تعلم لغة CSS وبعدها تعلم لغة جافاسكربت، فهذه اللغات أساسيةٌ لأي مطور ويب مهما كان تخصصه، ولكن التعمّق فيها خاصٌ بتطوير الواجهات الأمامية كما رأينا ويأخذ مطور الواجهات الخلفية بعدها مسارًا آخر كما وضحنا في خارطة الطريق لمطور الواجهات الأمامية ومطور الواجهات الخلفية لذلك فهما تخصصان مختلفان كما شرحنا. بناءً على ما سبق، تكون البداية بتَعلّم أساسيات لغات الويب HTML و CSS وجافاسكربت، ثم تجرب هذه اللغات والمسارات لفترةٍ قصيرةٍ مدة شهر أو شهرين مثلًا، وبعدها ترى إذا ما كنت ستحب العمل في هذا المجال وصَرفِ معظم وقتك فيه أم لا. ومع الوقت، وستجد المجال المناسب الذي قد ترتاح فيه وستقترب منه شيئًا فشيئًا، وعمومًا، مجال تطوير الواجهات الأمامية مرتبط بالفن والتصميم بعض الشيء إذ يتعلق من قريب أو بعيد بتصميم الواجهات وما يظهر على الشاشة، أما مجال تطوير الواجهات الخلفية فمرتبط أكبر بالمنطق البرمجي والخوارزميات ويبتعد عن كل ما يتعلق بالتصميم. كما يمكنك التسجيل في إحدى دورات أكاديمية حسوب وبذلك ستفتح لك المسارات الأولى من جميع الدورات المتوفرة على الأكاديمية ويمكنك بحضور المسارات الأولى التأكد من اختيارك الصحيح، كما توفر الدورات بطبيعة الحال مدربين يرشدونك إلى الطريق لتوجيهك إلى أفضل مسار يناسبك، كما أنها تضمن لك بعد تخرجك الحصول على فرصة عمل خلال فترة قصيرة، ويمكنك تقديم طلب انسحاب إذا لم تناسبك الدورة. خاتمة غصنا في هذا المقال في أعماق مجال تطوير الويب وشرحنا المجالين الرئيسين فيه حتى تصبح مطور الويب من واجهة أمامية وواجهة خلفية هذا بالإضافة للتطوير الشامل، كما عرضنا أهم المصادر العربية المتوفرة لتَعلّم كل هذه التقنيات كلّ على حدة، ونأمل أن يكون هذا المقال عونًا ومرشدًا لك إن كنت داخلًا جديدًا على مجال تطوير الويب ومساعدًا لك في تكملة ما ينقصك من مهارات خلال رحلتك في تطوير الويب بما عرضناه من خارطة طريق لكلا مجالي تطوير الويب، مجال تطوير الواجهات الأمامية ومجال تطوير الواجهات الخلفية. سعداء لاستقبال أي تعليق أو استفسار في مربع التعليقات أدناه، ونرجو أخيرًا لك كل التوفيق والسداد! اقرأ أيضًا ما هي فوائد تعلم البرمجة؟