5 مشاريع تفاعلية تحتاجها في محفظتك

لقد بذلت العمل وأصبح لديك الآن فهم قوي لمكتبة React.

علاوة على ذلك ، لديك فهم جيد لجافا سكريبت وتضع ميزاتها الأكثر فائدة لاستخدامها في شفرة React الخاصة بك.

لقد أحرزت تقدمًا كبيرًا ... ولكن ماذا تفعل الآن؟

كيف يمكنك سد الفجوة بين معرفة أساسيات React وبين أن تصبح مطورًا محترفًا؟

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

لماذا يجب عليك إنشاء التطبيقات

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

ولكن ما التطبيقات التي يجب أن تبنيها باستخدام React لرفع مستوى قدرتك كمطور؟

في هذه المقالة ، سنستعرض 5 أنواع مختلفة من التطبيقات التي يجب أن تفكر في إنشائها بعد تطبيق todo الأساسي. الفائدة العظيمة لبناء التطبيقات هي أنه بمجرد نشرها ، يمكن ربطها بمحفظة أعمالك كطريقة قوية وفورية لإظهار خبرتك لأصحاب العمل.

لكل نوع من التطبيقات ، سأغطي الأمثلة الشائعة التي يمكنك استخدامها كمصدر إلهام ، والأدوات التي أوصي بها لبناء كل ميزة ، إلى جانب عرض توضيحي قصير لمثل هذا التطبيق الذي صنعته شخصيًا باستخدام React.

كيف تبدأ في بناء تطبيقات باستخدام React

على عكس تعلم React نفسه ، حيث يمكنك العثور على عشرات المقالات للتعمق أكثر في أي مفهوم ذي صلة ، فإن عملية بناء التطبيق هي إلى حد كبير نشاط موجه ذاتيًا دون الكثير من التوجيه.

إذا كنت تبدأ في إنشاء التطبيقات بنفسك ، فإنني أوصي بالبحث عن المقالات التي تعلمك أساسيات إنشاء تطبيق والتعمق في كود مصدر التطبيق الذي توفره. حتى عملية قراءة الكود نفسه ستجعلك مطورًا أفضل.

إذا كانت هذه الأمثلة تبدو شاقة للغاية بحيث لا يمكنك بناء نفسك ، فتذكر ما تعرفه كمطور React— لتقسيم التطبيقات إلى مكونات قابلة للإنشاء. يجب أن يتم إنشاء كل تطبيق قطعة قطعة ، مكونًا بمكون. ركز على بناء ميزة واحدة في كل مرة. من خلال الممارسة ، ستحصل على فكرة أفضل عن الأدوات التي ستحتاجها لكل ميزة بالإضافة إلى الأنماط الشائعة وراء إنشاء التطبيقات بشكل عام.

ملاحظة: كان أحد المفاهيم الخاطئة التي كانت لدي عند البدء في إنشاء تطبيقات حقيقية مثل هذه أنه كان عليّ إنشاء واجهة خلفية / واجهة برمجة تطبيقات كاملة باستخدام Node أو Python للحصول على الوظائف التي أحتاجها. لا تحتاج إلى القيام بذلك. ابحث عن تقنيات قوية بدون خادم مثل Firebase أو AWS Amplify أو Hasura التي تمنحك خلفية كاملة خارج الصندوق دون الحاجة إلى إنشاء ونشر بنفسك. استثمر في الأدوات التي تجعلك أكثر إنتاجية وتوفر الوقت.

أنشئ تطبيق وسائط اجتماعية

إذا اضطررت إلى التوصية بتطبيق واحد فقط لإضافته إلى محفظتك ، فسيكون تطبيق وسائط اجتماعية. تعد Twitter و Facebook و Instagram متطورة للغاية ، وتتضمن عددًا متزايدًا من الميزات للحفاظ على تفاعل المستخدمين. علاوة على ذلك ، إنه نوع التطبيق الذي من المحتمل أن تعرفه بشكل أفضل فيما يتعلق بكيفية عمله.

هناك عدد من الميزات المشتركة بين جميع تطبيقات الوسائط الاجتماعية تقريبًا:

  • قدرة المستخدمين على إنشاء منشورات تحتوي على نصوص و / أو ملفات وسائط ،
  • بث مباشر لتلك المنشورات ،
  • تمكين المستخدمين الآخرين من الإعجاب والتعليق على المنشورات ،
  • وكذلك مصادقة المستخدم.

وبمجرد الانتهاء من ذلك ، يمكنك إضافة ملفات تعريف لكل مستخدم ، حيث يمكنهم تخصيص حساباتهم وكذلك إدارة المستخدمين الذين يتابعونهم.

أمثلة على التطبيقات: Instagram و Twitter و Snapchat و Reddit

تقنيات للاستفادة منها:

  • قم بإنشاء تطبيق React أو Next.js لإنشاء واجهة مستخدم ديناميكية للمشاركات والإعجابات والرسائل
  • Firebase أو AWS Amplify أو Hasura (باستخدام GraphQL مع الاشتراكات) لبيانات الوقت الفعلي
  • وظائف بدون خادم مثل AWS Lambda أو وظائف Firebase للإشعارات
  • التخزين السحابي أو Firebase لتحميل الصور أو الفيديو

بناء تطبيق التجارة الإلكترونية

اختر عددًا قليلاً من مواقعك المفضلة وأضمن أن واحدًا منها على الأقل يحتوي على تطبيق للتجارة الإلكترونية مضمن فيه ، حتى لو كانت مجرد واجهة متجر صغيرة. تطبيقات التجارة الإلكترونية منتشرة في كل مكان ، وأراهن أنه سيتم دعوتك لبناء واحد في مرحلة ما من حياتك المهنية كمطور.

من المغري بناء منصة تجارة إلكترونية رائعة وواسعة النطاق مثل أمازون ، لكنني أوصي بالعمل على شيء أصغر وأكثر تركيزًا.

بدلاً من سوق يوفر كل الأشياء لجميع الأشخاص ، اذهب مع صناعة تهمك. على سبيل المثال ، إذا كنت تحب السلع المنزلية ، فيمكنك إلقاء نظرة على ما صنعه Crate & Barrel أو Williams-Sonoma لمواقعهم.

بصرف النظر عن المنتجات ، قد توفر تطبيقات التجارة الإلكترونية خدمة للمستهلكين. إذا كانت خدمة يتم توفيرها محليًا ، فيمكن إضافة خريطة تفاعلية إلى التطبيق لتزويد مزود الخدمة والعميل بمعرفة موقع كل منهما. تتبادر إلى الذهن تطبيقات توصيل الطعام مثل UberEats و Doordash ، والتي تتطلب موقع الشخص الذي يطلب الطعام.

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

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

أمثلة شائعة: Airbnb و Uber و UberEats و Doordash و Etsy و Udemy

تقنيات للاستفادة منها:

  • إنشاء تطبيق React أو Gatsby لواجهة المتجر وعرض المنتجات
  • شريط مع عناصر شريط رد الفعل الحزمة للتعامل مع معالجة الدفع
  • وظيفة بدون خادم مثل Netlify / AWS Lambda للتعامل مع عملية الخروج
  • Algolia للبحث عن المنتجات بسرعة البرق
  • Snipcart لإنشاء عربة بسهولة وإدارة منتجات العربة

أنشئ تطبيقًا ترفيهيًا

هذا هو الأوسع من بين كل الفئات. ماذا أعني بالترفيه؟ تطبيق يركز على نوع معين من الوسائط. قد تكون هذه الأفلام أو البودكاست أو الموسيقى على سبيل المثال لا الحصر.

بعض الأمثلة الرائعة على ذلك ، على التوالي ، ستكون Netflix و Audible و Soundcloud أو Spotify. إذا قمت بتضمين فن أو تصميم في هذه الفئة ، فيمكننا إضافة مواقع مثل Behance أو Dribbble إلى القائمة.

الأمر المثير للاهتمام في هذه الفئة هو أن العديد من تطبيقات الترفيه تقع على حدود تطبيقات الوسائط الاجتماعية. على سبيل المثال ، تطبيق مثل Tiktok ، الذي يتميز بمقاطع فيديو قصيرة ومبتكرة ، مدفوع بمشاركة المستخدم العالية. يتمركز تطبيق آخر مثل YouTube على تفاعلات المستخدم من خلال الإعجابات والتعليقات والاشتراكات.

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

أمثلة شائعة: YouTube و Netflix و Audible و Spotify و Tiktok

تقنيات للاستفادة منها:

  • أنشئ تطبيق React أو Next.js أو Gatsby لإنشاء واجهة مستخدم التطبيق
  • npm حزمة رد فعل لاعب لتشغيل الوسائط
  • التخزين السحابي أو Firebase لتحميل الوسائط
  • Algolia للبحث عن الوسائط بالاسم (أي مسار صوتي ، فيديو ، فيلم ، إلخ.)

أنشئ تطبيق مراسلة

تطبيقات المراسلة ضخمة. من المحتمل أن يكون لديك خدمة مراسلة مجانية مثل WhatsApp أو Viber على هاتفك ، أو خدمة مضمنة في نظام الوسائط الاجتماعية الخاص بك مثل Facebook Messenger. تتوفر أيضًا خدمات مثل Intercom مع المراسلة الفورية كتطبيقات ويب حتى تتمكن الشركات من تقديم دعم العملاء الفوري لمستخدميها.

سيتكون أي تطبيق مراسلة من محادثة مع شخصين أو أكثر حيث يتم إرسال الرسائل في الوقت الفعلي. على غرار تطبيق الوسائط الاجتماعية ، أوصي بخدمة مثل Firebase أو Hasura التي تنقل البيانات عبر WebSockets للرسائل ليتم عرضها على الفور في المحادثة.

غالبية تطبيقات المراسلة موجودة على الأجهزة المحمولة أو الأجهزة اللوحية. إذا لم تكن هذه هي أول نسخة من تطبيقك ، فهذه فرصة رائعة لتجاوز الويب وإنشاء تطبيق جوال باستخدام React Native. والأفضل من ذلك ، أنه يمكنك إنشاء تطبيق مراسلة على الويب والجوال في وقت واحد باستخدام حزمة مثل React Native Web.

أمثلة شائعة: WhatsApp و Viber و Discord و Messenger و Slack

تقنيات للاستفادة منها:

  • React Native أو React Native Web لإنشاء تطبيق جوال أو تطبيق مختلط (الويب + الهاتف المحمول)
  • Firebase أو AWS Amplify أو Hasura (باستخدام اشتراكات GraphQL) لإرسال الرسائل في الوقت الفعلي
  • التخزين السحابي أو Firebase لإرسال الرسائل مع محتوى الصور أو الفيديو
  • حزمة npm emoji-mart لمنتقي الرموز التعبيرية الشبيه بـ Slack للمستخدمين لتضمينها في رسائلهم

بناء تطبيق الإنتاجية

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

إن الشيء الرائع في إنشاء تطبيق إنتاجي أولاً هو أنه يوفر مقدمة جيدة لبناء التطبيق بسبب البساطة النسبية للعديد من ميزاته.

يمكنك البدء بشيء بسيط ، مثل محرر نصوص لكتابة نص منسق مع تخفيض السعر بسهولة ثم التوسع فيه. ثم أضف القدرة على حفظ النص كملفات فردية على جهاز الكمبيوتر الخاص بك. بعد ذلك ، هناك ميزة لتصدير ذلك التخفيض كـ HTML لكتابة رسائل بريد إلكتروني منسقة.

لبدء إنشاء تطبيق إنتاجي ، اسأل عن الميزات التي يمكن أن يمتلكها التطبيق لجعل جدولك اليومي أسهل وانطلق من هناك.

أمثلة شائعة: Todoist و Notion و Things وما إلى ذلك.

تقنيات للاستفادة منها:

  • أنشئ تطبيق React للويب أو React Native للجوال
  • npm package reaction-markdown لعرض تخفيض السعر في واجهة مستخدم التطبيق
  • حزمة npm رد فعل codemirror2 لكتابة التعليمات البرمجية في ملاحظاتك
  • حزمة npm قابلة للتفاعل - السحب لإعادة ترتيب محتوى القائمة عن طريق النقر والسحب

حظًا سعيدًا في رحلة بناء التطبيق الخاص بك وسأراكم في المقالة التالية.

هل تريد أن تصبح سيد JS؟ انضم إلى 2020 JS Bootcamp

انضم إلى 2020 JS Bootcamp

اتبع + قل مرحبا! ؟ تويتر • codeartistry.io