Android Developer Roadmap 2021 🚀🚀🔥🔥
السلام عليكم ورحمة الله وبركاته
في هذا المقال سوف نقوم بتوضيح خارطة الطريق لكي تصبح مطور تطبيقات اندرويد
للإنطلاق في تطوير تطبيقات اندرويد يجب عليك اختيار لغة تطوير programimg language وهنا نكون بين خيارين جافا او كوتلن , ماهي الكوتلن هي احدث لغة معتمد من طرف قوقل لتطوير تطبيقات اندرويد و اسرع من لغة الجافا ب 3 مرات من خلالها لن تجد صعوبة في عمل تطبيقات كبيرة مثل انستغرام ,اوبر ... و مستعملين لغة في ازدياد بشكل رهيب اذا انت جديد وليس معك اي لغة برمجية يمكنك البدأ مع الكوتلن مباشرتا.. بعد تعلم اساسيات اللغة اقترح عليك ان تتعرف على بيئة اندرويد ستوديو وخفياها واحترافها لأن احترافك للمنصة و معرفة كل tools التي بها يوفر عليك 50% من الجهد ولا تسمع لأي شخص يقول لك استعمل منصة اخرى لتطوير عاد اندرويد ستوديو ... بعدها تعرف على المنصة و تعرف على كيفية عملها انصحك بلتجريب عليها اول تطبيق صغير لك تطبيق حساب العمر او كيفية اضافة صورة طبع رسالة عند تشغيل التطبيق الان يمكن القول انك مطور تطبيقات مبتدأ بعدها تثقف في مجال تصميم وتعلم ماذا يميز اندرويد عن ios والعكس او اي نظام اخر لكي يعني ماذا تعمل وماذا لا تعمل في تطبيقات اندرويد تعرف على وحدات dp , px sp ... وكيف تصل او تصالح بين تصميم و التطوير الخاص ب تطبيقك بعد كل هذا تحتاج الان للغوص في عالم الاندرويد و تعرف على اساسيات تطوير اندرويد تفهم كل من البنية التحتية و مركبات اساسية لتطوير و الية انتقال من صفحة لصفحة اخرى وتمرير البيانات بينهما وكيف يقدر تطبيق يتكلم مع تطبيق اخر ( يوجد شرح لي في فيديو عن اساسيات تطوير جزء النظري سيكون في اول تعليق ) بعد فهمك لنظري الان تهتم بلجانب التطبيقي للذي تعلمته في رحلتك بعدها تقوم ببناء تطبيقات حقيقية تعتمد على ماتعلمته وتتعلم منها كذالك كيفية التعامل مع البيانات اما بإستخدام قاعدة بيانات داخلية (رووم او sqlit..) او backend as servise مثال على ذالك (firebase...)او تقوم بعمل تطبيق يعتمد على apis مثال تطبيق اخبار ( تتعلم منه كيفية التعامل مع api هنا ستتعرف على الكثير من المكتبات مثل volly و retrofit .. )
بعد تعلم لكل هذا ستواجهك مرحلة انه معك كل شيئ لكن لا تجد اين تطبق و تحس انك تحتاج افكار.. انصحك اما بلعمل فريلانسر عمل حر تكون ضربت عصفورين بحجر واحد يكون عندك مدخول و تتعلم اكثر اما اذا لم تجد من تعمل له تطبيق قم بإعادة عمل تطبيقات كبيرة فقط النظام system الخاص بها مثل تطبيق انستغرام او واتس اب او اوبر و كل تطبيق ستتعلم فيه العجب
هنا يكون نهاية المقال ارجو اني وفقت في ايصال المعلومة ولو لشخص واحد استفاد منه

كل شخص قام بقرائة المنشور كاملا يترك لنا تعليق بخصوص المقال 👇👇

"مسارك الى تطوير المواقع"

الكثير من النّاس تريد الدخول في عالم البرمجة وخاصة "تطوير المواقع"، وكل شخص يختلف في نواياه، ولكن أغلبهم يفعل ذلك لأجل المال كون المجال مربح نوعا ما، فتراهم يبحثون عن دورات مختصرة لكي يبدؤوا العمل فورا، وهذه من الاخطاء الشائعة التي يقع فيها اي مبتدئ يريد دخول اي مجال في البرمجة، فالبرمجة تحتاج الى صبر ووقت والربح لا يأتي الا بعد احترافك للمجال.

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

مجال تطوير المواقع ينقسم الى قسمين:
✅ تطوير واجهات الويب الامامية ( Front End Development )
✅ تطوير انظمة المواقع او تطوير الويب فلا يوجد ترجمة دقيقة والذي نقصد به ( Back End development ).

ولتضع في ذهنك نقطة مهمة يخلط فيها الكثيرون وهي ان تطوير واجهات الويب الامامية لا تعني تصميم المواقع، فتصميم المواقع هو Web Design ، وتصميم المواقع هو تصميم نموذج للموقع (mockup) باستخدام احد برامج التصميم كالفوتوشوب او Adobe XD ..الخ ، اما تطوير واجهات الويب الامامية فهو تكويد (اي كتابة الكود) هذه النماذج (ان كانت موجودة طبعا، فيمكن كتابة الكود مباشرة دون وجود نموذج) و جعلها عبارة عن اكواد باستخدام تقنيات الويب التي سوف نتحدث عنها في الاسطر القليلة القادمة ان شاء الله تعالى.

✅ مطور واجهات الويب الامامية يدعى Front End Developer
✅ مطور انظمة المواقع يسمى Back End Developer
✅ المطور الذي يعمل في كلا المجالين يدعى Full Stack Web Developer
✅ مصمم المواقع يدعى Web Designer

نبدأ على بركة الله ونقول بسم الله الرحمن الرحيم:

@في حالة ما اذا اخترت تطوير واجهات الويب الأمامية فإليك هذا المسار والذي قسمته الى 6 مستويات رئيسية :

ملاحظة: - تقسيم المستويات هو حسب منظوري وليس تعميما ابدا.

#المستوى_الأول

✅ تعلم HTML : وهي اول لغة يجب ان تتعلمها، وهي ليست لغة برمجة بل لغة هيكلية، ستتعلم من خلالها طريقة هيكلة صفحة الويب الخاصة بك وادراج الكتابات والصور والجداول ...الخ
وبالطبع هناك اصدارات لهذه اللغة واهمها HTML5، ففيها الكثير من التحديثات المهمة، كالـ Semantic Elements والكثير من الامور التي سوف تكتشفها اثناء تعلمك لها.
ملاحظة: الأغلبية تظن ان الامور الجديدة في HTML5 تخص لغة ال HTML فقط، لكن هناك الكثير من الامور الجديدة فيها والتي تحتاج منك تعلم
الجافاسركيبت كالـ GeoLocation و ما الى ذلك فلا تتعجل اثناء تعلمك.

بعض النقاط يجب ان تركز عليها اثناء تعلمك للـ HTML:
- الـ Semantic Elements
- النماذج ( Forms & Validations )
- الـ Accessibility (هذا يعني استخدام عناصر HTML الصحيحة للغرض المقصود منها قدر الإمكان.)
- أساسيات SEO (ارشفة المواقع)

✅ تعلم CSS : وهي لغة تنسيقية وليست لغة برمجة ايضا، سوف تتعلم من خلالها طريقة تنسيق عناصر ال HTML و جعلها جميلة، وتتعلم طريقة التعامل مع الالوان ...الخ
هذه اللغة ايضا لها اصدارات اهمها CSS3 لما فيها من امور جديدة كالـ Animation و Transition ...الخ

بعض النقاط يجب ان تركز عليها اثناء تعلمك للـ CSS :
- الصندوق المرن Flex Box
- التصميم المتجاوب Responsive Design (لدعم اجهزة الموبايل واللوحات)
- الـ Grid System
- الانيمشن ( Animation )
- و Transition
- عمل الكثير من المشاريع وتقليد بعض التصاميم

اذا اردت تعلم HTML5/CSS3 اليك هذه الدورة الاجنبية الاحترافية:
https://www.youtube.com/watch?v=mU6anWqZJcc
ان اردت دورة عربية اليك هذه الدورة (عبارة عن مستويات):
https://www.youtube.com/playlist?list=PLPTNqXpQ2tbj12WDefiTH0VgnrTacD9cE

✅تعلم JavaScript : وهذه اول لغة برمجة سوى تتعلمها، لغة كبيرة وضخمة تدخل في الكثير من المجالات، وبما انك في مسار تطوير واجهات الويب الامامية سوف تتعلم طريقة التعامل مع DOM (اي التعامل مع شجرة الدوم ومن خلال هذا الامر يمكنك مثلا التعامل مع HTML و CSS عن طريق الجافاسكريبت ) و عمل تأثيرات جميلة والكثير من الامور الاخرى التي سوف تتعرف عليها اثناء تعلمك لهذه اللغة.

بعض النقاط يجب ان تركز عليها أثناء تعلمك JavaScript:
- التعامل مع DOM & BOM
- تعلم Modern JavaScript ( اي ES6+)
- تعلم Ajax
- تعلم Fetch API
- تعلم البرمجة الكائنية بالجافاسكريبت JS OOP
- فهم بعض المبادئ المهمة كالـ : Scope , strict, Prototype ...الخ
- عمل الكثير من المشاريع

ان اردت تعلم الجافاسركيبت اليك دورة اجنبية رائعة :
https://www.youtube.com/watch?v=PkZNo7MFNFg
ان اردت تعلم Modern JS اليك دورة أجنبية رائعة :
https://www.youtube.com/watch?v=NCwa_xi0Uuc
ان اردت دورة عربية في تعلم الجافاكسريبت ارشح لك التالي:
https://www.youtube.com/watch?v=1l_8nECYRvQ
ان اردت دورة عربية في تعلم Modern JS ارشح لك دورتي:
https://www.youtube.com/watch?v=F5XM929HMJs

#المستوى_الثاني

الان بعد احترافك لهذه التقنيات، سوف تصبح محترفا فيها ولا تحتاج الى كتابة الكود من الصفر، فربما تصبح لديك مشاريع كبيرة تحتاج لربح الوقت والجهد من اجل انهائها في الوقت المحدد، وهنا سوف نتحدث عن اطارات CSS او كما يُقال لهم "CSS Frameworks" ، بمعنى لست بحاجة الى كتابة اكواد التنسيق من الصفر سوف يكون لديك كلاصات تتعامل معها فقط مع اضافة لمستك الخاصة ان اردت ذلك طبعا، ومن اشهرها :

✅ اطار Tailwind CSS (انصح به بشدةو تحية لاخي Housseyn Belhadja)
✅ اطار Bootstrap
✅ اطار Bulma
والكثير منها طبعا.

بعض النقاط يجب التركيز عليها أثناء تعلم هذه الاطارات :
- عمل الكثير من المشاريع

ان اردت دورة اجنبية لتعلم Tailwind CSS ارشح لك الدورة التالية:
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw
ان اردت دورة عربية لتعلم Tailwind CSS ارشح لك دورة اخي اسامة:
https://www.youtube.com/playlist?list=PLfDx4cQoUNOY1nRXPd3o03lVQzpppY9xe
ان اردت دورة اجنبية لتعلم Bootstrap ارشح لك الدورة التالية :
https://www.youtube.com/watch?v=c9B4TPnak1A
ان اردت دورة عربية لتعلم Bootstrap ارشح لك التالي:
https://www.youtube.com/watch?v=iL0IEmTTjYU

#المستوى_الثالث

الان بعد احترافك لهذه الامور، سوف تنتقل الى مستوى اخر سوف تستعمل فيه Component وهو مبدئ مهم جدا ولديه 3 اطارات شهيرة تستخدم هذا المبدئ والذي لابد من اي مطور لواجهات الويب ان يتعلم احداها او كلّها، واختيارك سوف يرافقك في المستويات القادمة.
وهي :

✅ اطار React JS
✅ اطار Vue JS
✅ اطار Angular

وهذه الاطارات تركز كثيرا على Modern JS، وهذه الاطارات بحد ذاتها تحتاج الى مقالات كاملة لشرحها واترك لك المساحة للبحث والتعمق عندما تصل الى هذا المستوى.

بعض النقاط يجب التركيز عليها أثناء تعلم هذه الاطارات :
- عمل الكثير من المشاريع
- ان اخترت Angular سوف يتوجب عليك تعلم Typescript وهي لغة برمجة ايضا.
- عليك بالتعمق في الاطار الذي اخترت التعامل معه لانّ لكل منهم مفاهيم كثيرة وادوات يمكنك اضافتها اليهم لتسهيل امورك كالـ Vuex و Redux ...الخ

ان اردت دورة اجنبية لتعلم React JS ارشح لك الدورة التالية :
https://www.youtube.com/watch?v=DLX62G4lc44
ان اردت دورة عربية لتعلم React JS ارشح لك الدورة التالية :
https://www.youtube.com/watch?v=QDGe4emCPG0
ان اردت دورة اجنبية لتعلم Vue JS ارشح لك الدورة التالية :
الاصدار الجصري (الاصدار الثالث)
https://www.youtube.com/playlist?list=PL4cUxeGkcC9hYYGbV60Vq3IXYNfDk8At1
الاصدار الثاني
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa
ان اردت دورة عربية لتعلم Vue JS ارشح لك الدورة التالية :
https://www.youtube.com/playlist?list=PLDoPjvoNmBAxr5AqK3Yz4DWYKVSmIFziw
ان اردت دورة اجنبية لتعلم Angular ارشح لك الدورة التالية :
https://www.youtube.com/watch?v=k5E2AVpwsko

#المستوى_الرابع

في هذا المستوى سوف تستفيد من تعلمك لاحد الاطارات التي ذكرتها في المستوى الثالث لاجل بناء تطبيقات الويب التقدمية ( PWA )
تطبيقات الويب التقدمية (progressive web application) تم تطويرها بناءً على علامات تبويب المتصفحات ليتم استخدامها كمواقع وتطبيقات بنفس الوقت، ويتم بنائها كما هو الحال في مشاريع الويب لتعمل على جميع الأجهزة بمختلف مشغلاتها من جوالات وحواسيب مكتبية أو محمولة أو لوحية، دون الحاجة لاختلاف طريقة البناء. -تعريف من اكادمية حاسوب-

بعض النقاط يجب التركيز عليها أثناء تعلم هذه التقنية :
- عمل الكثير من المشاريع
- التعمق في المفاهيم الخاصة بهذه التقنية كالـ Service Worker ...الخ

ان اردت دورة اجنبية لتعلم PWA ارشح لك الدورة التالية :
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gTxqJBcDmoi5Q2pzDusSL7

#المستوى_الخامس

وهنا سوف تتعلم شيئا جديدا يدعى SSR
والـ Server Side Rendering - اختصارا SSR - هي عملية يتم خلالها توليد كود HTML الخاص بتطبيقات جافاسكريبت الحديثة في الخادم عوضا عن المتصفح. - تعريف من مدونة توتومينا-

هناك اطارات خاصة بهذا الامر واختيار احداها راجع الى اختيارك لاحد الاطارات في المستوى الثالث:

✅ ان اخترت Vue Js يمكنك العمل بالـ Nuxt JS
✅ ان اخترت React JS يمكنك العمل بالـ Next JS
✅ ان اخترت Angular يمكنك بالعمل بالـ Universal

بعض النقاط يجب التركيز عليها أثناء تعلم هذه الاطارات :
- عمل الكثير من المشاريع

ان اردت دورة اجنبية لتعلم Nuxt JS ارشح لك الدورة التالية :
https://www.youtube.com/watch?v=ltzlhAxJr74
ان اردت دورة اجنبية لتعلم Next JS ارشح لك الدورة التالية :
https://www.youtube.com/playlist?list=PL4cUxeGkcC9g9gP2onazU5-2M-AzA8eBw

#المستوى_السادس

تطوير تطبيقات الموبايل وسطح المكتب

✅ ان اخترت Vue JS يمكنك استخدام Vue Native
✅ ان اخترت React JS يمكنك استخدام React Native
✅ بالنسبة الى Angular يمكنك استخدام Ionic .

بعض النقاط يجب التركيز عليها أثناء تعلم هذه الاطارات :
- عمل الكثير من المشاريع
ان اردت دورة اجنبية لتعلم React Native ارشح لك الدورة التالية :
https://www.youtube.com/watch?v=qSRrxpdMpVc
ان اردت دورة اجنبية لتعلم Vue Native ارشح لك الدورة التالية :
https://www.youtube.com/watch?v=8e0XHPylhj0
ان اردت دورة اجنبية لتعلم Ionic ارشح لك الدورة التالية :
https://www.youtube.com/watch?v=r2ga-iXS5i4

بالنسبة الى برامج سطح المكتب فالاطار المشهور هو :
✅ اطار ElectronJS

بعض النقاط يجب التركيز عليها أثناء تعلم هذا الاطار :
- عمل الكثير من المشاريع

ان اردت دورة اجنبية لتعلم ElectronJS ارشح لك الدورة التالية :
https://www.youtube.com/watch?v=2RxHQoiDctI

#مستوى_اضافي
في هذا المستوى عليك تعلم :
✅ الـ Git
✅ التعمق في مفاهيم Web Security (مثل: Cors، https ... الخ)

في الاخير الامر راجع اليك في التقدم الى الامام والبحث عن التقنيات الجديدة والتعمق اكثر واكثر.

----------------------------------------------------------------------

@في حالة ما اذا اخترت تطوير انظمة المواقع فإليك هذا المسار والذي قسمته الى 6 مستويات رئيسية :

#الصفر

تعلم بعض اساسيات Front End (المستوى الاول، والثاني وان شئت الثالث فلا بأس)

#الأول

في هذا المستوى سوف تختار لغة برمجة تتعامل معها، وسوف ترافقك طيلة المشوار، و على اي اساس سوف تختار فالامر اتركه لك في البحث والمقارنة بين اللغات و اختيار ما يُناسبك.
وارشح لك التالي :

✅ لغة PHP
✅ لغة Java Script (تحدثنا عنها سابقا ان اخترتها فانت متقن لأساسياتها)
✅ لغة Python
✅ لغة C#

كل لغة لديها اساسيات يجب ان تتعلمها مثل: المتغيرات، حلقات التكرار، الحالات الشرطية ... الخ

ان اردت دورة اجنبية لتعلم PHP ارشح لك الدورة التالية :
https://www.youtube.com/watch?v=OK_JCtrrv-c
ان اردت دورة عربية لتعلم PHP ارشح لك الدورة التالية :
https://www.youtube.com/watch?v=pszZMzI9a7A
ان اردت دورة اجنبية لتعلم Python ارشح لك الدورة التالية :
https://www.youtube.com/watch?v=rfscVS0vtbw
ان اردت دورة عربية لتعلم Python ارشح لك الدورة التالية :
https://www.youtube.com/watch?v=nyz2sieUtsI
ان اردت دورة اجنبية لتعلم C# ارشح لك الدورة التالية:
https://www.youtube.com/watch?v=GhQdlIFylQ8
ان اردت دورة عربية لتعلم C# ارشح لك الدورة التالية :
https://www.youtube.com/playlist?list=PLF8OvnCBlEY0UEgX-PDJduL5Tyv4Estam

#الثاني

الان لو اخترت لغة PHP يمكنك الشروع في تطوير اول صفحاتك الديناميكية دون اي مشكل، لكن ان اخترت احد اللغات الاخرى سوف يتحتم عليك التالي:

✅ ان اخترت لغة JS سوف يتحتم عليك تعلم NodeJS (اضافة الى ExpressJS )
✅ ان اخترت لغة Python سوف يتحتم عليك تعلم Django
✅ ان اخترت لغة C# سوف يتحتم عليك تعلم ASP.NET
✅ للـ PHP اطار جميل ايضا يدعى Laravel

ان اردت دورة اجنبية لتعلم NodeJS ارشح لك الدورة التالية:
https://www.youtube.com/watch?v=RLtyhwFtXQA
ان اردت دورة عربية لتعلم NodeJS ارشح لك دورة اخي اسامة :
https://www.youtube.com/playlist?list=PLfDx4cQoUNOa3EiUpjO04DVxEE9Ox12ta
ان اردت دورة اجنبية لتعلم Django ارشح لك الدورة التالية:
https://www.youtube.com/watch?v=F5mRW0jo-U4
ان اردت دورة أجنبية لتعلم ASP.NET ارشح لك الدورة التالية:
https://www.youtube.com/watch?v=C5cnZ-gZy2I
ان اردت دورة اجنبية لتعلم Laravel ارشح لك الدورة التالية:
https://www.youtube.com/watch?v=MFh0Fd7BsjE
ان اردت دورة عربية لتعلم Laravel ارشح لك دورة اخي اسامة (وتحية له Djaidri Oussama ) :
https://www.youtube.com/playlist?list=PLfDx4cQoUNOaQBbxWm4HhZ8l6aEdPiO6T

#الثالث

في هذا المستوى سوف تتعلم التعامل مع قواعد البيانات:
✅ ان اخترت SQL: يمكنك تعلم PostgreSQL، MySQL، MariaDB
✅ ان اخترت NoSQL: يمكنك تعلم MongoDB.

الدورات في هذه التقنيات لا تعد ولا تحصى يمكنك ايجادها بسهولة

#الرابع

في هذا المستوى سوف تتعلم REST APIs، ويمكنك البحث عن هذا الموضوع والتعمق فيه بنفسك حتى تعتاد طريقة البحث.

#الخامس

في هذا المستوى سوف تتعلم Testing :
✅الـ Integration Testing
✅الـ Unit Testing
✅ الـ Functional Testing

#السادس

في هذا المستوى سوف تتعلم امور الحماية مثل :
✅الـ Hashing Algorithms
✅الـ SSL/TLS
✅الـ OWASP Securtiy Risks
والكثير من الامور التي يجب عليك القراءة والتعمق فيها.

والباقي عليك الان في التعمق اكثر وتعلم التقنيات الجديدة والحصرية.

ملاحظة:
✅ ان اخترت ReactJS في Front End كتقنية تتعامل بها، واخترت NodeJS (والاطار الخاص بها ExpressJS)، واخترت MongoDB فسوف تكون MERN Developer، وكلمة MERN تعني ( MongoDB ExpressJS ReactJS NodeJS)
✅ ان اخترت VueJSفي Front End كتقنية تتعامل بها، واخترت NodeJS (والاطار الخاص بها ExpressJS)، واخترت MongoDB فسوف تكون MEVN Developer، وكلمة MEVN تعني ( MongoDB ExpressJS VueJS NodeJS)

#selmani
بالتوفيق للجميع.❤🖤

مجموعة خاصة بتعلم برمجة تطبيقات الهاتف رااح تنفعكم بزااف :

https://www.facebook.com/groups/1170952826758537/?ref=share

Step by step guide to becoming a modern backend developer : https://roadmap.sh/backend

لمن يهمه الامر :

خيير عليييكم 🧡

بزااف ناس تسمع عن أهمية " Linkedin "🤔

👈 كيفاه تولي قادر علي تكوين شبكة علاقات كبيرة مع أصحاب الخبرة في مجالك؟ 👥
👈 و كيفاه تزيد فرصتك في ال Interview الي راح تشارك فيهم؟

⚡مراكش عارف كيفاه تخدم بيه ؟ صح 😢


⏪ ما ستتعلمه في الورشة؟

📌 ما هو موقع Linkedin؟
📌 كيفية إنشاء حساب مجاني احترافي عليه!
📌 كيفية التعامل مع الموقع "شرح مفصل له"
📌 أهم الفرص التي يقدمها الموقع و مميزاته"؟
📌 معايير صورة لينكدان المثالية؟
📌 لماذا تختار linkedin في الأعمال؟
📌 كيف تستغل هذه المنصة في تطوير مهاراتك 👈 Linkedin Learning""؟
📌 كيف تجد الوظائف المتاحة من خلاله؟
📌 كيف تعرف من شاهد ملفك الشخصي؟
📌 ما يمكن للأشخاص رؤيته في ملف التعريف الخاص بك؟

🔹 الورشة من تقديم المدرب:
- عثمان عباسي.
👈 مدير البرامج في مؤسسة إنجاز - قطر -


[ الورشة مجانية كالعادة ✅ ]

رابط التسجيل في الورشة تجدونه في التعليقات 👈
https://www.facebook.com/groups/algerianspositivevibes/permalink/935030113743247/

مــاهو الــDOM ! كمطور front end لازم تعرفو ولازم تفهمو.
حسنا أي صفحة HTML تتكــون من مجمـوعة Tags حتى تتمكن الجافاسكريبت من التحكم في الصفحة كاملة نستعمل الدوم حسنا نبداو بالعقل لأي Tag في. Html. قلنا لازم الجافاسكريبت تقدر تتحكم فيه هذا يتم عبر DOM هو ببساطة تمثيل لصفحة HTML بواسطة الجافاسكريبت أي تققدر تقول انه ملف جافاسكريبت يجتوي على كل عناصر ال HTML مثلا عندنا في ملف HTML :
<h1 class="par" >Hi i'm inside html</h1>
يقابله في DOM :
{ H1 class=par }
خليني نقولكم حاجة DOM يوفرو Web أي انه API يوفرولك BROWSER بلا ماتدير والو يعني هو INTERFACE للبنية تع الصفحة... بالمنابسبة هو عبارة عن binary tree لي يعرفو data structures....
في الحقيقة DOM مابناوهش غير الجافاسكريبت باش تتعامل معه لانو كيما قلنا هو API متوفر يعني تقدر تستعملو بلغة أخرى كالبايثون... بصح نت في أغلب الحالات راح تستعمل الجافاسكريبت في الفرونت.
كيفية إستعماله؟
إستعمالDOM بسيط جدا حيث ان الجافاسكريبت توفر دوال سهلة الإستعمال مثلا للجلب عنصر h1 في المثال السابق نستعمل مايلي :
const title = document. querySelector('h1') ;
أو عبر الكلاس :
const title = document.getElementsByClassName("par");
هنا راه عندك تحكم كامل لهاذا العنصر بواسطة الجافاسكريبت.
من أهم الأشياء التي نستطيع القيام بها هي تغيير ال. Style
title.style( { font-weight: "bold"});
و أهم شيء أننا نستطيع إضافة عناصر للصفحة عبر DOM بواسطة دوال ك append appendChild...
هذي أهم الأشياء اللي يوفرهانا الدوم ومزال بزااف اكتشفهم

الــسلام عليكم 😊
ليوم نفهمو الــlocalhost أو 127.0.0.1 أو موطن المطورين هههه...
قبل نفهموه نعرفو على الســريع IP Adress ولي تعني Internet protocol Adress هي عبارة عــن رقم معين وحيد يعرف جهازك بأنه مربوط بالإنترنت ( يعني تقدر تقول كيما matricule تع السيارة) هنا الحديث علي ipv4
تتكون من أربع أعداد أكبر رقم نوصلو ليه لي هو 255 أي 8 bit.
مثال عن أدريس IP
142.250.65.227
شوف هنا يلا عندك الوقت و راك حاب تفهم كوبيي هذي الإدريس لي مديتهالك و دير coller فالمتصفح تاعك
راح تردلك صفحة Google لان هذي Adress IP تع واحد من السيرفرات تع Google 😊 روح سيي كي تتوشي حاجة تفهمها خير. روح 😉
ملاحظة : دير coller برك مشي تروشارشي بGoogle
========================
صح ضك تقدر تكمل المــقال
IP Adress
هي شــرط أساسي لكي يمكنك الإتصال بسيرفر على شبكة الإنترنت أي بدونها لا تستطيع التواصل ( شوفو IP ليوم عرفتها على السريع نهار آخر نــفصل فيها بيسك مشي هي محور الحديــث تعنا اليوم)
جرى تقسيم Adress IP إلى أربع عائلات :
__________________________________________
القسم A :
0.0.0.0 - - - - - - - > 127.0.0.0
مثال : 2.134.213.2
__________________________________________
القسم B :
128.0.0.0 - - - - - - - > 192.255.0.0
مثال : 135.58.24.17
__________________________________________
القسم C :

192.0.0.0 - - - - - - - - - - > 223.255.255.0
مثال : 192.168.178.1
__________________________________________
القسم D :
224.0.0.0 - - - - - - - - - - > 239.255.255.255
مثال : 232.164.89.28
__________________________________________
القسم E :
240.0.0.0 - - - - - - - - - - > 255.255.255.255
مثال : 243.164.89.28
__________________________________________

أوكي هنا لاحظ معايا بين class A حتى class B كاين
ADRESS IP
ماهيش مستخدمة رأي تحبس عندها A و B تتخطاها و تديماري..
نعم إيه لي هي 127.0.0.1 ولي هي localhost 😍
هذي Adress IP محرمة و ممنوعة على أي سيرفر في العالم أي يديها أنها reserved..
لأنها مستخدم لغرض واحد فقط و هو test أي انها خاصة بالجهاز عندما تدخلها في المتصفح يفهم بلي راك تاستي في موقع راه عندك فالحاسوب تاعك أي أن ألـم ألمواصلات والبيانات ميخرجوش من local لهذا يسموها localhost. و يسموها أيضا loopback أي يذا كتبتها الجهاز تاعك راح يبقا يدور داخليا ميخرجش ل network لي راهي برا.
باش تمشي هذي لادراس يجب أن يكون web server يشتغل في حاسوبك لكي يأخذ هذي لادراس مثال عن واب سيرفر.
apache, HTTP node js, ngnix....
ان شاء الله تكونو فهمتو يا لوكان الغرض منها ننصحكم تزيدو تفهمو networking باش يكون عندك فكرة واضحة علــى الإنترنت كيفاش يمشي بما أنك حاب تكون مطور.
#newgenerationdz

مــرحبا بيكم في شــرح جـديد عــلى المــتصفحات ( browser navigateur ).
أولا دعــعنا نتعرف عـلى ماهو المتصفح : أساسا هو برنامج يتيح لك الولوج إلى عالم الويب ولكن كيف؟ هو يستطيع أن يــقرأ الملفات التي تستعمل لبناء صفحات الــويب! كيفاش؟
يفهم اللغة المستعملة لبناء الواجهات 😊 الحديث هنا عــن :
HTML, Css, images, videos, audio, svg....
و هو قادر علـى فهم اللغة البرمجية المستعملة في إعطاء الموقع حيوية و تجاوب مع المستخدم وهــي
JAVASCRIPT
في الأساس هذا واش يفهم بصح هناك لغات أخرى يستطيع التعامل معها كالـXML VBSSCRIOT...
بالإضافة إلى هذه المميزات المــتصفحات قادرة على إرسال طلبات السيرفرات الموجودة عـلى الإنترنت بإستعمال بروتوكول HTTP الذي سبق و أن شرحناه، طريقة عملو بسيطة جدا نلخصها في خطوتين.
1 - يبعـث REQUEST لسيرفر المقصود... السيرفر يردلو بالملفات الازمة
2 - يقوم بفهم تلك الملفات و يعرضها على المستخدم بالنسبة للCSS HTML و يبقى يسنى في المستخدم واش يدير باش ينفذ جافاسكريبت ( التفاعل مع المستخدم) .
أي أنه بكل بساطة يتيليشارجي هذو الملفات و يبقا يتفاعل معاهم.
نت كي تيليشارجي صورة تروح لــGALLERY باش تــشوفها نفس المـبدأ تماما. ان شاء الله تكون وصلت الفكرة نروحو نشوفو منين يتكون أســاسا :
======================
1 User interface
الواجهة الخــاصة بالمستخدم هي الواجهة التي نراها دائما حيث يعرض فيها صفحة الويب و وين ندخلو URL و شويا settings راكو تعرفوها..
2 Browser engine
وهو مــحرك المتصفح يعمل كجسر بين User interface و Rendering engine.. ضك نفهمكم شفت مــثلا كي تصغر النافذة راح يتفاعل معاك المتصفح هنا مكش جافاسكريبت غير صغرنا الواجهة.. واش يصرى أول واحد مســؤول عن ردة الفعل هذي هو Browser engine هو لي يخبر الـRedering engine عاود أرسمنا الصفحة بيسك المستخدم صغر الواجهة.
3 Rendering engine
يلا تعرف شوية إنجليزية من أسمو تقدر تفهم واش يدير.. هو المسؤول عن عرض محتوى الصفحة html و تنسيق الصفحة عبر ملفات css.. مهمته الأساسية الرسم على الواجهة من خلال ملفات html لي بعثهملو السيرفر.
4 Network
أهم خاصية بالنسبة للمتصفح وهي التي تتيح له الأتصال بالإنترنت عبر بروتوكولات الويب HTTP FTP. تتواصل مباشرة مع NETWORK CARD الخاصة بجهازك لكي تستطيع الوصول إلى الإنترنت.
5 JAVASCRIPT intreper
أو دعنا نسميه محرك الجافاسكريبت يأتي مدمج في المتصفح و همته الأساسية واضحة.. فهم ملفات جافاسكريبت و البحث عن الأخطاء و تنفيذ الكود
6 UI backend
المكونات الأساسية اي الملفات التي برمج بها التصفح لأنه برنامج و في النهاية عبارة عن ملفات تعيش في جهازك.
7 Data Persistence/Storage
هذي مسـؤولة عن حفظ البيانات مثلا بيانات المواقع التي تصفحتها كلمات المرور history cockies....
=======================
هنا نكون كملنا architecture تع معضم متصفحات الحديثة أرجو أن يكون المقــال نال إعجابكم.

حسنا مــاهو الــMVC
بلاك سمعت عليه ولا جربتو ولا مراكش فاهمو ... أنا ليوم كي لعادة خدمتي نبسط الويب للناس لي حابة تتعلم 😊
نبداو MVC. يشير إلى Model View Controller هو يعتبر Design patterns ولكن أنا نحب نسميه Architecture هو الأكثر إستعمالا في بناء تطبيقات الويب خلال العشرين السنة الماضية و يقوم على مبدأ بسيط وهو مبدأ separation of concern يعني كل واحد عندو مهمة يديرها لا أكثر و لاأقل .. تبدا الرحلة من المتصفح ( أشفى على هذي النقطة لأني راح نولي ليها ) قلنا المتصفح قادر على إرسال طلب http يستقبله السيرفر حيث يتحقق من صلاحيته والمعلومات التي حملها معه هذا الطلب ثاني حاجة يديرها السيرفر يتعامل مع هذا الطلب المسؤول عن هذا التعامل هو Controller حيث أنو بعدما ي يتعرف على الطلب ينفذ بعض اللوجيك للحصول على نتيجة و إرسالها للزبون قد تكون هذه العملية بسيطة مثلا اريد صفحة فيها معلومات ثابتة هنا راح يردنا Controller صفحة HTML فيها معلومات ثابتة تسما مكاش إتصال بقواعد البيانات ... في حالة ما كان الطلب معقد نوعا ما مثال تحميل صفحة
السلع المباعة هنا راح يكون المحتوى ديناميك يعني يتغير على حساب السلع واش عندنا فقاعدة البيانات هنا الـController يحتاج واحد يعاونو باش يعرف كيفاش يجيب البيانات و هو الـModel يعني المنتج عبارة عن مودل فيه خصائص كالسعر و الكمية .... تسما المودل يرسمنا الطريق برك و خلي بالك controller هو المسؤول عن اللوجيك هنا نكونو قد كملنا الاتصال بقواعد البيانات و أنشئنا صفحة HTML على مستوى السيرفر و ملأنها ببيانات اتتنا ديناميكيا هنا الخطوة الأخيرة و هي إرسالها لل View اللي مهمتو عرض المحتوى واللي أصلا بدات منو أول خطوة وهو المتصفح. ( ياك قتلكم اشفاو 🙄 ) وهذي تعتبر loop جامي تخلاص مادام المستخدم فاتح السيت .....
الملخص كل واحد واش يدير و أهم شيئ أنهم يتناقلو البيانات بيناتهم..
هنا نكون قد كملت الشرح تاعي متقلق ماوالو controller , modal عبارة عن كلاسات و فونكسيون مشي حاجة جديدة ولا 🤣 جوست هذي طريقة عمل ، يجدر بالذكر أن هذي الطريقة تسمى أيضا ب server side rendring يعني اننا ننشئ صفحات على مستوى السيرفر و نرسلها للمتصفح .. هناك طريقة جديدة اللي تعد حاليا أكثر إستعمالا و هي Rest API لي راح نشرحها طبعا إن شاء الله . كي العادة كلمة شكر تكفيني 😚
ملاحظة : المعلومات هذو أنا مسؤول عليهم منيش ندي من منشورات و نعاود ننشر هذي فقط مجرد خبرة أكتسبها أريد مشاركتها و ربما تكون هناك أخطاء أرحو من الناس تصحيحها 😊

دخلنا في مرحلة جديدة وين راح تكون ثورة في المحتوى الهادف إن شاء الله 🔥
شعارنا الجديد :
Pass from story mode
To revolution mode 🇩🇿
1001 ↗️ 1954 ✅
مجموعاتنا بحلتها الجديدة 💙 :

Web Development:

https://www.facebook.com/groups/1248004662326247/?ref=share

Desktop App dev:

https://www.facebook.com/groups/565455007809490/?ref=share

Mobile app dev :

https://www.facebook.com/groups/1170952826758537/?ref=share

Cyber Security :

https://www.facebook.com/groups/568875430814196/?ref=share

Artificial Intelligence ( ai ) :

https://www.facebook.com/groups/334785548287619/?ref=share

Arduino :

https://www.facebook.com/groups/501395681090286/?ref=share

قناتنا على تيليغرام :
https://t.me/programming1001dz ✅

#Processors

مكانش فينا لي ماراهوش مهتم بمجال الهواتف النقالة ولا على الأقل عندو معرفة سطحية بيها 😅
على الأغلب ديما كي تجي تشوف مواصفات هاتف و بالتحديد في الProcessor تشوف ولا تسمع كلمة "دقة التصنيع" و أرقام مثل 5 نانومتر و 7 نانومتر الخ ...

اليوم جينا نوضحولكم مفهوم دقة التصنيع 🤗
صحا تخيلو معايا البروسيسور كيما المصنع لي يعالجلنا المعلومات
هذا المصنع فيه عمال اسمهم "Semi Conductors" و لي نسموهم "سامي" باش نسهلوا علينا الأمور 😅

كلما كان عددهم اكبر كلما راح يكون العمل اكثر و اسرع بطبيعة الحال
لكن لو تلاحظو أنو تقريبا كل الProcessors عندهم حجم واحد و شكل واحد كيفاش راك يكون واحد عندو ساميات اكثر من الأخر ؟ 🤔 😅
الإجابة هي : بتصغير حجم سامي نفسه حتى يتسع الProcessor لعدد أكبر 🤗
حتى لهنا وين نقدر نقولك أنو هذيك النانومتر (nm) ماهي إلا وحدة لقياس طول سامي 🥰

و منه نديرو استنتاج خفيف 😅
كلما كان سامي أقصر ازدادت قوة الProcessor 🤭
فهمتوا ضرك علاش يقولك : "لي صغير محاينو كبار ؟" 😂

من صفحة Algerian Tech Makers
https://www.facebook.com/107805688302035/posts/113372231078714/

مدخل إلى لغة النمذجة المعيارية UML

كأي لغة برمجة لها:
1. Syntax
2. Keywords
3. Concept

التي وجب علينا احترامها!
بالممارسة:
- تعتاد على أي لغة برمجة!
- تتحسن عندك مهارة حل المشكلات (problems solving) لأنك كلما حللت مشاكل أكثر كلما طوّرت هذه المهارة و أصبحت تركّز على جودة البرنامج!

كذلك الحال بالنسبة إلى لغة النمذجة المعيارية UML، يكفي أن تعرف عنها خصائصها و خصائص كل مخطط على حدى، ثم بالممارسة ستتحسن مهارتك في النمذجة تدريجياً!

في الأعداد المقبلة سنتعرّف على:
- المجالات التي تحتاج هذا النّوع من النمذجة.
- شروحات لكّل مخطّطاتها على حدى.
- كيفية قراء تمرين و تحويله لمخطط.
- تمارين عملية خلال لقاء على قوقل مييت.

#Holà_UML
#design_pattern

من صفحة :
https://www.facebook.com/107805688302035/posts/113731354376135/