هل انت متحمس لبناء أول موقع الكتروني لك ؟ هل تريد معرفة أهم التقنيات الحديثة المستخدمة في 2020 ؟

ٍسأعرض في هذا المقال :

-الفرق بين الfront end وال back end واهم التقنيات المستخدمة فيهما .

  • الادوات والتقنيات المستخدمة لنشر المواقع .

  • الادوات المستخدمة في التعاون بين افراد الفريق عن بعد .

  • نظم ادارة المحتوى .

هيا بينا!

تتغير التقنيات المستخدمة في تطوير الويب باستمرار الا اني في هذا المقال سألخص أهم التقنيات التي لابد لك من معرفتها حتى تبدأ مسيرة تطوير مواقع الويب .

أولا يجب أن تعلم ان تطوير الويب ينقسم الى :

front end - واجهات أمامية

back end - واجهات خلفية

او الاثنان معا ويسمى full stack

لنبدأ ب front end :

الواجهة الامامية أو front end هي الواجهة الظاهرة للمستخدم أي شكل الموقع الخارجي والازرار ولون الخلفية والنصوص وغيرها ، يتم تنفيذ هذه الواجهات بشكل اساسي ب 5 تقنيات هي :

HTML / HTML5:

لغة html هي اللغة الاساسية في تطوير كل مواقع الويب وهي بسيطة جدا ، تتكون من tags أو وسوم ، ويمكن عن طريقها اضافة الصور والمستندات وتنسيق النص .

css /css3 :

وهي مكملة ل html تستخدم لتجميل الواجهات واضفاء المظاهر والالوان عليها ، وتخصيص كل عناصر الموقع مثل الصور والنصوص وغيرها .

CSS frameworks and library :

هناك الكثير من اطارات العمل التي تسهل لنا العمل مع css اشهرها بوتستراب bootsrtap والذي يختصر علينا الكثير من الوقت والجهد ، وكذلك يوجد مكتبات لcss مثل sass والتي تسهل ايضا ممن كتابة كود الcss حيث يمكننا اضافة الشروط وتقليل مرات التكرار .

java script :

بالنسبة للواجهات فلغة جافا سكريبت تضيف الحركة والحياة لموقعك حيث يمكنك اضافة الدوال وبناء الالعاب وغيرها .

frameworks of java script:

يوجد الكثير من أطر العمل المندرجة تحت جافا سكريبت والتي تمكننا من التعامل مع الAPI - او واجهة برمجة التطبيقات ، وكذلك تحسين الUI او واجهة الموقع أشهرها :

Angular - تستخدم في المشاريع الضخمة ، يأخذ تعلمها وقت اطول من باقي الأطر الاخرى ، وهي تستخدم لغة Type script

react - ايضا من أطر العمل المشهورة والسمتخدمة بشكل واسع وهي مطورة من شركة فيسبوك .

vue - تعتبر أخف وأسهل أطر العمل ، ولا يأخذ تعملها وقتا طويلا وايضا اصبحت مشهورة ومنتشرة في الفترة الاخيرة بسبب سرعتها وفاعليتها .

الback end :

تحدثنا عن front end وهي تطوير الموقع من جانب المتصفح ، اما الback end وهي تطوير الموقع من جانب السيرفر - Server side language . للبدأ في الباك اند يتوجب عليك أن يكون لديك معرفة بالخوارزميات وبنائيات البيانات (المصفوفات وغيرها ) ، يندرج تحت الback end معرفة 4 أشياء :

1/اللغات المستخدمة هي كثيرة نذكر منها: ( أختر واحدة على الاقل) Python node js - ليست لغة ولكنها بيئة تشغيل لجافا سكريبت PHP

2/أطر العمل : بعد أن تتعلم احد الللغات ، يمكنك تعلم اطار العمل المستخدم للغة وهي: (Python : (Django, Flask (Node.js: (Express (PHP:( Laravel

3/قواعد البيانات - Database : تحتاج معظم تطبيقات الويب إلى مكان لتخزين البيانات ، سأذكر أكثرها استخداما في 2020 والامر متروك لك ، ويمكنك اختيار واحدة على الاقل: Relational Database: My sql

NoSQL: MongoDB

Cloud Database: Firebase, Azure Could DB, AWS

4/ API : عند استخدام تطبيق على هاتفك المحمول ، يتصل التطبيق بالإنترنت ويرسل البيانات إلى الخادم. يقوم الخادم بعد ذلك باسترداد تلك البيانات وتفسيرها وتنفيذ الإجراءات اللازمة وإرسالها مرة أخرى إلى هاتفك. ثم يفسر التطبيق تلك البيانات ويقدم لك المعلومات التي تريدها بطريقة قابلة للقراءة. هذا هو API . لنأخذ مثالا لنفرض انك ذهبت الى "اوزون" لتطلب مشروبا ساخنا مع صديقتك ، تنظر الى القائمة ثم تختار المشروب ، ثم تنادي النادل ليستلم الطلبية ثم يحضر لك المشروب الساخن . النادل هنا هو الApi بشكل اساسي هناك طريقتين لكتابة الapi REST API وهي المشهورة والمستخدمة بشكل كبير حاليا . و GRAPQL التي بدأت تلمع اضوائها في السنوات الاخيرة .

تحدثنا عن الbackend وال frontend ، سأعرض الان ادوات نشر الموقع ونظم ادارة المحتوى :

basic dyployment - نشر الموقع & Devops :

بعد ان انشئنا موقعنا الالكتروني حان الوقت لننشره على الانترنت ، اذا كان الموقع لا يحتوي على back end فيسكون من السهل جدا نشره ، اما اذا احتوى على اكواد ال back end فيستطلب من معرفة اشياء اساسية مثل : SSH - Secure Shell Web Server Environment: NGINX, Apache App Hosting: Heroku. CLI and Git.

وفي الحالتين يجب علينا المعرفة عن : Domain Registartion Managed Hosting - InMotion, Hostgator, Bluehost, etc Static Hosting - Netlify, Github Pages SSL Certificate. FTP -File Transfer Protocol

نظم ادارة المحتوى : CMS

وهي تتيح للعميل أو صاحب الموقع اضافة العناصر (الصور / النصوص/ المقالات ) الى الموقع دون أن يكون ملما بلغة html او جافا سكريبت او غيرها ، تحتاج في بعض الاحيان الى تعديل بعض الاكواد لغرض تخصيص الموقع ولكن في الاصل كل ما في الامر أنها قوالب جاهزة وانت تختار القالب المناسب لموقعك . اشهرها word press. كما انه يوجد مفهوم جديد لنظم ادارة المحتوى وهي نظم ادارة المحتوى عديمة الرأس - Headless cms مثل (Contentful, Prismic.io, Strapi.) أي اننا نختار أين سيكون الرأس ، او نختار كيف سنقوم بعرض موقعنا بدلا من أن يكون العرض متكاملا مع النظام مثل ووردبريس .

لا يتطلب الامر أن تكون ملما بكل هذه التقنيات ، عليك اختيار ما اذا كنت تريد أن تصبح مطور front end او backend ومن ثم البدأ في تعلم التقنية المناسبة لك ، اذا كنت قد بدأت فعلا شاركنا تجربتك في بناء أول موقع الكتروني لك .

حسابي على linkedin :

لاتنسى تصحيحي اذا اخطأت !

references :