الأربعاء، 6 يناير 2016

100 100 100

كيف تقوم ببرمجة موقع بنفسك في ثمان خطوات إحترافية - منهاج برمجة المواقع

ن مُعظم الأفكار التي نقوم بالتدوين عنها مأخوذة من إستفسارات و مشاكل المتابعين الخاصة بنا على الفيسبوك ، ففي كل مرة يطرح أحد المتابعين سؤالا او استفسارا نرى انه لا يمكن الإجابة عليه الا بتقديم مقال كامل يعالج كل أطرافه ، و نرى ان للجميع الحق في الحصول على الإجابة لتساؤلهم ذاك .



لذلك ، و في هذا الموضوع سنساعد كل شخص يبحث عن المسار الصحيح لصناعة موقع ويب كامل في هذا المقال ، و لنقوم بذلك ، فقد قمنا بتقسيمه الى 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 ، يقوم صديقنا مصمم الويب بصناعة الموقع على شكل صورة واحدة لكل صفحة ، يتم تعديل تلك الصورة و الألوان و كل ذلك حتى نأخذ فكرة نهائية عن شكل الموقع فقط ، الفوتوشوب ليس أداة برمجة ، بل فقط نقوم من خلاله بصناعة صورة تجسيدية للموقع حتى نتطلع على شكله النهائي .
بعدها يتم تمرير هذه الصور الى نفس الشخص وهو Web Designer الذي من المفترض ان يكون Coder أيضا ، يقوم صديقنا ببدئ تصميم كل قطعة من الموقع كما جائت في الصورة ، شيئا فشيئا ، هنا الـ Header و هنا الـ Footer و ذاك الـ Sidebar و هنا الـ Login Form و ما الى ذلك ، يستطيع الـ 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 و غيرها .
- السرعة : من الصعب علينا التحدث عن سرعة إرسال و إستقبال البيانات اثناء التعامل مع مجموعة من البيانات القليلة و ذات الحجم الخفيف ، لكن لنقل مثلا انه لديك 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 للولوج إلى الإستضافة و لوحة التحكم و كل شيئ ، ثم رفع الموقع الخاص بك على ذلك السيرفر من أجل تمكين الجميع من رؤية و إستخدام مشروعك النهائي الا و هو الموقع الذي تم صناعته بواسطتك و فريقك ( إطلع على اخر المقال من أجل الحصول على بعض الإقتراحات لإستضافات ) .
اما تسويق الموقع ، فقد قدمنا مقالات عديدة في هذا الأمر أيضا ، و ستجد كل ما تحتاجه من تلك المقالات في اخر المقال بالتأكيد .

في الاخير أتمنى أن تكون إستفدت من الموضوع فلا تبخل علينا بمشاركة هذا الموضوع على شبكات التواصل الإجتماعي .

مواضيع تهمك ؟


  1. كيف تقوم بإنشاء موقع وردبريس Wordpress إحترافي و تحقيق المال منه - كورس إحترافي
  2. حقيقة العمل الحر و الحصول على اَلاف الدولارات! كل ما تود معرفته عن العمل الحر
  3. الحاجة ام الإبداع ! كيف تربح من الأنترنت و هل هو الأمر بتلك الصعوبة ؟
  4. نصائح ذهبية تجعل منك تحقق اكثر من 1000$ دولار من أدسنس
  5. كيف يتمكن المسوق من بيع وهم و ربح 1000$ بكل سهولة

إرسال تعليق

مواضيع حصرية

...
لن تجد مثلها على أي موقع اَخر

Whatsapp Button works on Mobile Device only