إن مُعظم الأفكار التي نقوم بالتدوين عنها مأخوذة من إستفسارات و مشاكل المتابعين الخاصة بنا على الفيسبوك ، ففي كل مرة يطرح أحد المتابعين سؤالا او استفسارا نرى انه لا يمكن الإجابة عليه الا بتقديم مقال كامل يعالج كل أطرافه ، و نرى ان للجميع الحق في الحصول على الإجابة لتساؤلهم ذاك .
نفس الشيئ حدث مؤخرا عندما نشرنا مقالا في صفحتنا على الفيسبوك بعنوان : 8 خطوات لبناء تطبيق اندرويد ناجح إبتداءا من الفكرة الى تسويق التطبيق ، فحدث ان بعض المعجبين، او نقول مُعظمهم قد إقترحو علينا بتقديم موضوع مشابه ، لكن هذه المرة لكيفية صناعة مواقع الويب و صفحات الويب و ليس تطبيق أندرويد ، كون ان الكثير يعاني من مُعضلة إيجاد الطريق الصحيح لتصميم و تطوير موقع ويب كامل و متاكمل .
لذلك ، و في هذا الموضوع سنساعد كل شخص يبحث عن المسار الصحيح لصناعة موقع ويب كامل في هذا المقال ، و لنقوم بذلك ، فقد قمنا بتقسيمه الى 8 خطوات نرى ان إتباعها بالترتيب سيقودك الى صناعة موقع ويب في النهاية ، لنتابع .
1 - تحديد التقنيات المناسبة لفكرة الموقع :
لا يمكنك صديقي ان تبدأ قبل ان تعرف التقنيات التي يجب عليك إستخدامها ، و من أجل معرفة التقنيات يجب عليك معرفة فكرة الموقع أولا و كيف يمكن تطبيقها ، و هنا سأبدأ الحديث عن الأشخاص الذين يسألون دائما : " ما الأفضل الـ Php ام Asp ؟ " او يسألون : " هل Django افضل من Rails ام العكس ؟ " و تلك المقارنات التي يقوم بها العديد من الأشخاص ، للأسف صديقي تلك المقارنات خاطئة كليا ، نعم ففكرة الموقع هي التي تفرض عليك التقنيات التي يجب عليك إستخدامها ، صحيح ان تقنيات برمجة مواقع الويب يمكن إستخدامها تقريبا في صناعة أي موقع ، لكن صناعة موقع مخصص لشيئ ما بلغة او تقنية برمجية في فترة وجيزة و عدد اكواد اقل بإستخدام التقنية الصحيحة أفضل من قضاء أسابيع في برمجته بالاف الاكواد البرمجية بالتقنية الخاطئة .
لذلك ، و أولا سيتوجب عليك ان تبحث عن التقنيات التي يتم إستخدامها في صناعة موقع بالفكرة التي لديك ، يمكنك ان تزور مجموعتا على الفيسبوك من هنا تطرح فكرة موقعك و ستجد إجابتك من طرفنا او طرف أصدقائنا للتقنيات الأفضل لفكرتك ، او تابع مقالاتنا عن تحليل موضوع لإكتساب مهارة التحليل من تلقاء ذاتك من هنا .
2 - إفهم التقسيمين : الـ Back End و الـ Front End :
عندما تقوم بتحليل مشروعك ، و تجد التقنيات المناسبة، سيتوجب عليك البدئ في برمجته بالتأكيد ، و برمجة موقع يتم على مرحلتين ، او تقسيمين كما احب ان اسميهما ، و هما كالتالي :
الـ Back End : و يُقصد بها الواجهة الخلفية للموقع ، اي الأشياء التي لا تظهر للمستخدم لكن يتعامل معها ، مثل المعلومات المُخزنة و ما الى ذلك ، يمكننا إختزالها على انها التعامل مع قواعد البيانات ، من إنشاء الجداول و العلاقات بينها ، و ربط الموقع مع تلك الجداول و تمرير و تخزين البيانات في قواعد البيانات من خلال الموقع ، وتُسمى كل هذه الخطوات بالـ Back End .
الـ Front End : و هي الواجهة التي يتعامل معها المستخدم ، من أزرار ، و رسومات و صور و ألوان و Header و ما الى ذلك ، للواجهات دور مهم في برمجة أي موقع ، فهي تسهل على المستخدم الوصول لأي قسم يريده في الموقع و توفير كل ما يقدمه موقعك للمستخدمين بكل سهولة ، ناهيك على إجتذاب الزائر من خلال الستايل الجميل ، ببساطة الـ Style الخاص بالموقع يُسمى بالـ Front End .
3 - إبدأ دائما بالـ Back End ... عن تجربة !
( سأجزم مسبقا انه لديك خبرة في التعامل مع الـ Back End اي لديك خلفية عن لغات و تقنيات برمجية مثل SQL , MVC , PDO و ما الى ذلك ... )
لقد صنعت طيلة خبراتي في مجال البرمجة بعض المواقع ، حسنا مُعظمها باء للفشل لكن ليس برمجيا ، بل بسبب ضعف المال ، فإنشاء موقع يتطلب منك إستضافة و تسويق و ما الى ذلك و المشاركين في الموقع ( نعم ليس وحدي بل فريق ) لم يتوفر يوما على المال الكافي لفعل ذلك و هذا عائد لنقص المهتمين بما قمنا ببرمجته ، لكن ما أحاول إيصاله هنا ، انه و من خلال خبراتي في برمجة المواقع ، أنصحك دائما بالبدئ في الـ Back End .
عليك أولا ان تنشئ قواعد البيانات ، و الصفحات التي يتطلبها ، فلنقل ان موقعك لديك مثلا جدولين و هما المستخدم ، و المنتوج ، ستحتاج مثلا الى صناعة الـ CRUD ( و معناها Create , Read , Update , Delete ) الخاص بكل جدول ، اي انك ستحتاج إلى صفحة مخصصة لكل جدول للقيام بعملية الـ CRUD ، أخبرني ، هل كنت ستعرف انك ستحتاج صفحتين لو لم تكن تعرف عدد الجداول الخاصة بك ؟ لا بالتأكيد ، لذلك معرفة الجداول التي ستستخدمها ، و تنظيمها و تنسيقها و ربطها مع الموقع الأولي من الخطوات الأولية التي يجب عليك القيام بها اثناء برمجة موقع ، لذلك صديقي و خذها نصيحة ، إياك ان تضع كود CSS واحد حتى تُنهي كل ما يتعلق بقواعد البيانات و تمرير و جلب البيانات و كل شيئ خاص بالـ Back End .
4 - ثم بعدها الـ Front End :
( سأجزم مسبقا انه لديك خبرة في التعامل مع الـ Front End اي لديك خلفية عن لغات و تقنيات برمجية مثل : HTML / CSS / JS / Bootstrap / و ما الى ذلك .. )
الـ Front End ضروري لبناء واجهة المواقع ، يبدأ الأمر كله بتصميم أولي للموقع ، يتم ذلك عبر أحد أدوات التصميم مثل ( الفوتوشوب ، إلستراتور ... ) ، يتم صناعته من طرف مصمم الويب او Web Designer ، يقوم صديقنا مصمم الويب بصناعة الموقع على شكل صورة واحدة لكل صفحة ، يتم تعديل تلك الصورة و الألوان و كل ذلك حتى نأخذ فكرة نهائية عن شكل الموقع فقط ، الفوتوشوب ليس أداة برمجة ، بل فقط نقوم من خلاله بصناعة صورة تجسيدية للموقع حتى نتطلع على شكله النهائي .
ضع في الحسبان أيضا ،أنه يمكن تصميم موقع دون الحاجة الى الـ Back End ، مثل مثلا الـ Landing Pages او صفحات الهبوط او الصفحات التعريفية و ما الى ذلك ، فأنت لا تحتاج إلى قاعدة بيانات ، نحتاج لقواعد البيانات فقط عندما نريد تخزين المعلومات .
5 - كيف أبدأ في الـ Back End ؟ و أساسيات يجب أخذها بعين الإعتبار :
إذن لقد فهمت سيرورة العمل الآن اليس كذلك ، تقوم بأخذ الفكرة ، تقوم بتحديد تقنيات بنائها ، تقوم بالبدئ بالـ Back End ثم بعدها الـ Front End .
لكن إليك بعض الأشياء التي يجب عليك أخذها بعين الإعتبار أثناء عملك في مجال الـ Back End :
- الحماية : عليك ان تعرف ان الحماية هي أهم شيئ في الـ Back End ، مبادئ الحماية كثيرة و متعددة و سيكون علي ن الصعب ان اتطرق لها كلها ، لكن مبدئيا ، قم بتشفير بعض البيانات مثل كلمات سر المستخدمين ، و أيضا ، ننصحك بتقنيات Back End متقدمة مثل MVC سيكون أفضل .
- تقنيات العمل : أصبح التعامل مع قواعد البيانات عبر الـ Queries أمر سهل التعقب كما تعرف ، و يستطيع العديد من الأشخاص إكتشاف ثغرات و نقاط ضعف مثل SQL Injection في البيانات المُرسلة و المستقبلة ، لذلك و لتجنب كل هذا يُستحسن ان تختار تقنيات عمل جيدة ، و أقصد بذلك إطارات العمل مثل : Laravel , Ruby on Rails , Django , CideIgniter و غيرها ، تفضل راجع المقال التالي سيفيدك كثيرا : إليك 7 إطارات عمل (Framworks) مخصصة لصناعة المواقع عليك معرفتها .
- السرعة : من الصعب علينا التحدث عن سرعة إرسال و إستقبال البيانات اثناء التعامل مع مجموعة من البيانات القليلة و ذات الحجم الخفيف ، لكن لنقل مثلا انه لديك 3 ملايين مستخدم لموقعك ، إرسال البيانات و إستقبالها سيكون جد متأخر ، فمثلا تسجيل دخول مستخدم سابق سيضطر النظام للبحث في كل ال3 ملايين مستخدم الى ان يجد المطلوب ، لذلك عليك إبتكار او العمل بخوارزميات أقل إستهلاكا للوقت من أجل تسريع العمل .
- الـ Real Time : مع الوقت عزيزي المبرمج ، عليك ان تجيد بعض التقنيات الجديدة في مجال الـ Back End و العمل بإطارات اخرى أيضا مثل الـ Angular او الـ React و ذلك من أجل القيام بعملية الـ Real Time أي إرسال و إستقبال البيانات دون الحاجة الى تحديث الصفحة ، و لنقل على سبيل المثال ستحتاج إلى تقنية مماثلة اثناء برمجة موقع شات على سبيل المثال .
اما بالنسبة لطريقة البدئ في مجال الـ Back End فسيكون جيدا لو راجعت كورسات التعامل مع قواعد البيانات و ما الى ذلك ، يمكنك دائما تفقد كورساتنا في صفحتنا التالية .
6 - كيف أبدأ في الـ Front End ؟ و أساسيات يجب اخذها بعين الإعتبار :
سيتوجب عليك اولا ان تتوفر على بعض الحس الإبداعي ، ان تكون مُبدعا و ذو ذوق رفيع ، ان تكون أيضا على دراية باخر مستجدات تصميم مواقع الويب و أشكالها و ما الى ذلك ، حتى تستطيع تنفيذ ما تريده من ستايلات و تقنيات على الموقع الذي انت في صدد برمجة واجهته ، لذلك ، إليك بعض الأساسيات التي يجب عليك العمل بها :
- سرعة الموقع : انا متأكد الى انك ستضطر إلى استخدام العديد من المكتبات من أجل إضافة لمسات مختلفة على الموقع اثناء تصميم واجهته ، لكن كثرة المكتبات يعني وقتا أطول في تحميل الوقع لذلك تجنب هذا الأمر و حاول تقليص المكتبات قدر الإمكان و لا تنسى ان تجعل الكود الخاص بك في النهاية أيضا Minimized حتى يكون تحميل الكود أسرع .
- أتقن الـ UI و الـ UX : أرجوك صديقي ، قبل ان تبدأ في مجال الـ Front End من أساسه ، خذ لك دورة او دورتين في فهم مجال الـ UI و الـ UX ، و كيف يجب لموقعك ان يتعامل مع المستخدم و كيف يمكن توفير كل ما يحتاجه المستخدم امام عينيه في الموقع ، و كيف يجب ان تكون الألوان و الأشكال متناسقة و كيف يجب ان يكون الموقع متكامل من ناحية التصميم .
- لا تنسى الـ Responsive او التجاوب : جعل الموقع متجاوب مسألة ضرورية اليوم في ظل إستخدامنا المتواصل للأجهزة الذكية الأخرى مثل الهاتف و الTablet و باقي القياسات ، لذلك لا تنسى هذه النقطة إطلاقا .
- أضف لمستك الخاصة : لا تنسى صديقي ان تكون لديك تلك اللمسة الإحترافية التي تضيفها دائما على تصاميمك ، خذ مثالا لجوجل ، نعم اعلم جيدا ان مقارنة جوجل بنا في هذه الحالة مقارنة صعبة لكن فقط لنحاول ، تلاحظ ان تصاميمها كلها تعتمد على الـ Material Design و ان لها نفس المبادئ في التصميم كما لو ان شخصا واحدا فقط صمم جوجل كاملة ، فهل ستكون أنت ذلك الشخص الذي صمم كل المواقع الخاصة بشركتك ؟ ربما .
7 - العمل التشاركي :
سيكون عليك من الصعب ان تشتغل في كل من الـ Front End و الـ Back End ، و بالمناسبة ، فإن كنت تتقن كليهما ، فيُسمى Full Stack Developer ، لكن ان تمتهن كليهما أمر جد صعب و ستحتاج لسنوات من الخبرة في كل منهما ، لذلك ستضطر في وقت لاحق الى ان تشتغل انت و صديقك ( إثنين على الأقل ) و ربما أكثر على مشروع برمجي واحد ، و حتى ستحتاجون جميعا الى مشاركة الأكواد بشكل تشاركي ، بحيث يستطيع كل واحد الإطلاع على الكود الذي تم إضافته من طرف الشخص الآخر دون المزج السيئ بين الكل .
لفعل هذا انت ملزم بتعلم العمل التشاركي ، و هو رفع المشروع البرمجي على أحدى منصات العمل التشاركي و أكبرها Github و يوجد أيضا BitBucket ، و مشاركة الكود مع كل العاملين في المشروع ، و بذلك القيام بعمليات الـ Pull و الـ Push و ما الى ذلك من أجل تنسيق أكبر للمشروع و الكود البرمجي في ذات الوقت .
نعدكم قريبا بمقال عن العمل التشاركي البرمجي بإذن الله في موقعنا .
8 - إطلاق الموقع و تسويقه :
من أجل إطلاق الموقع ستحتاج إلى إستضافة ، و إستضافة او Hosting هي عبارة عن حجز سيرفر او خادم يمكن الولوج إليه اونلاين من أي مكان ، مع إمكانية الحصول على نطاق Domaine للولوج إلى الإستضافة و لوحة التحكم و كل شيئ ، ثم رفع الموقع الخاص بك على ذلك السيرفر من أجل تمكين الجميع من رؤية و إستخدام مشروعك النهائي الا و هو الموقع الذي تم صناعته بواسطتك و فريقك ( إطلع على اخر المقال من أجل الحصول على بعض الإقتراحات لإستضافات ) .
اما تسويق الموقع ، فقد قدمنا مقالات عديدة في هذا الأمر أيضا ، و ستجد كل ما تحتاجه من تلك المقالات في اخر المقال بالتأكيد .