8 مشاريع دراسية

"المعلم يرتكب أخطاء أكثر مما يرتكبه المبتدئ"

نحن نقدم 8 خيارات للمشاريع يمكن تنفيذها "من أجل المتعة" من أجل اكتساب خبرة تنموية حقيقية.

المشروع 1. استنساخ تريلو

استنساخ Trello بواسطة Indrek Lasn.

ماذا ستتعلم:

• تنظيم مسارات معالجة الطلب (التوجيه).
• السحب والإسقاط.
• كيفية إنشاء كائنات جديدة (لوحات ، قوائم ، بطاقات).
• معالجة والتحقق من صحة بيانات الإدخال.
• من جانب العميل: كيفية استخدام التخزين المحلي ، وكيفية تخزين البيانات في التخزين المحلي ، وكيفية قراءة البيانات من التخزين المحلي.
• من جانب الخادم: كيفية استخدام قواعد البيانات ، وكيفية تخزين البيانات في قاعدة البيانات ، وكيفية قراءة البيانات من قاعدة البيانات.

هنا مثال مستودعمصنوع من React + Redux.

المشروع 2. لوحة الإدارة

مستودع جيثب.

تطبيق CRUD بسيط ، مثالي لتعلم الأساسيات. هيا نتعلم:

• إنشاء المستخدمين وإدارة المستخدمين.
• التفاعل مع قاعدة البيانات - إنشاء المستخدمين وقراءتهم وتحريرهم وحذفهم.
• التحقق من صحة الإدخال والعمل مع النماذج.

المشروع 3. متعقب العملات المشفرة (تطبيق الهاتف المحمول الأصلي)

مستودع جيثب.

أي شيء: Swift ، Objective-C ، React Native ، Java ، Kotlin.

لندرس:

• كيف تعمل التطبيقات الأصلية.
• كيفية استرداد البيانات من API.
• كيف تعمل تخطيطات الصفحة الأصلية.
• كيفية العمل مع أجهزة محاكاة الجوال.

جرب هذا API. تجد أفضل - اكتب في التعليقات.

إذا كنت مهتمًا ، هنا هنا برنامج تعليمي.

المشروع 4. قم بإعداد تكوين حزمة الويب الخاصة بك من البداية

من الناحية الفنية ، هذا ليس تطبيقًا ، ولكنه مهمة مفيدة جدًا لفهم كيفية عمل webpack من الداخل. الآن لن يكون "الصندوق الأسود" ، ولكنه أداة مفهومة.

المتطلبات:

• تجميع es7 إلى es5 (الأساسيات).
• ترجمة jsx إلى js - أو - .vue إلى .js (سيتعين عليك تعلم أدوات التحميل)
• قم بإعداد خادم تطوير حزمة الويب وإعادة تحميل الوحدة الساخنة. (vue-cli و create-reaction-app استخدم كلاهما)
• استخدم Heroku ، now.sh أو Github ، وتعلم كيفية نشر مشاريع webpack.
• قم بإعداد المعالج المسبق المفضل لديك لتجميع css - scss ، أقل ، قلم.
• تعرف على كيفية استخدام الصور و svgs مع حزمة الويب.

هذا مصدر رائع للمبتدئين.

المشروع 5. استنساخ Hackernews

مطلوب من كل جدي أن يصنع Hackernews الخاصة به.

ما سوف تتعلمه على طول الطريق:

• كيفية التفاعل مع hackernews API.
• كيفية إنشاء تطبيق صفحة واحدة.
• كيفية تنفيذ ميزات مثل عرض التعليقات والتعليقات الفردية وملفات التعريف.
• تنظيم مسارات معالجة الطلب (التوجيه).

المشروع 6. تودوشكا

TodoMVC.

بجد؟ تودوشكا؟ وهناك الآلاف منهم. لكن صدقوني ، هناك سبب لهذه الشعبية.
يعد تطبيق Tudu طريقة رائعة للتأكد من فهمك للأساسيات. حاول كتابة تطبيق واحد في Vanilla Javascript وآخر في إطار العمل المفضل لديك.

يتعلم:

• قم بإنشاء مهام جديدة.
• تحقق من إكمال الحقل.
• تصفية المهام (مكتملة ، نشطة ، الكل). يستخدم filter и reduce.
• فهم أساسيات جافا سكريبت.

المشروع 7. قائمة السحب والإسقاط القابلة للفرز

مستودع جيثب.

من المفيد جدا أن نفهم سحب وإسقاط API.

هيا نتعلم:

• سحب وإسقاط API
• إنشاء واجهات مستخدم ثرية

المشروع 8. استنساخ Messenger (التطبيق الأصلي)

سوف تفهم كيفية عمل كل من تطبيقات الويب والتطبيقات الأصلية ، مما يميزك عن الكتلة الرمادية.

ما سوف ندرسه:

• مآخذ الويب (الرسائل الفورية)
• كيف تعمل التطبيقات الأصلية.
• كيف تعمل القوالب في التطبيقات الأصلية.
• تنظيم مسارات معالجة الطلبات في التطبيقات الأصلية.

سيكون هذا كافيًا لك لمدة شهر أو شهرين.

تمت الترجمة بدعم من الشركة برنامج اديسونالذي يشارك مهنيا تطوير التطبيقات والمواقع الإلكترونية بلغة PHP للعملاء الكبار، وكذلك تطوير الخدمات السحابية وتطبيقات الهاتف المحمول في جافا.

المصدر: www.habr.com