✅ في كل مرة تقوم فيها بإنشاء تطبيق قائمة مهام ، هل أنت جرو؟ يموت ؟

هل تعرف متى تحاول تعلم شيء جديد ، لكن تشعر بالملل مجددًا من إنشاء التطبيق الافتراضي كمثال؟

هذا هو الدافع №1 القاتل.

لا أريد أن يفقد طلابي الحماس ويستسلموا.

لذلك قمت بإعداد هذه القائمة الضخمة المكونة من 28 فكرة تطبيق ممتعة يمكنك إنشاؤها أثناء تعلم استخدام React مع Ruby on Rails.

ستفترض هذه القائمة أنك مرتاح بالفعل لـ Ruby on Rails (أو بعض أطر تطوير الويب الأخرى). لذلك قد يكون الجزء الخلفي معقدًا بعض الشيء للمبتدئين ، ولكن يجب أن يكون بت React للواجهة الأمامية بسيطًا نسبيًا.

المشروع رقم 1: تطبيق تقويم لتحديد المواعيد (مثل تقويم Google)

يمكن أن يبدأ هذا كتطبيق بسيط يمكنك تحسينه تدريجيًا عن طريق إضافة المزيد من الميزات وتحسينات UX.

سيساعدك على التدرب على استخدام المكونات المتداخلة (مثل مكون اليوم ، أو متداخل داخل مكون أسبوع ، أو مكون متداخل داخل مكون شهر).

أستخدم هذا كتطبيق مثال في دورة Free Complete React on Rails الخاصة بي. لذا تحقق من ذلك إذا كنت تريد تجربة ذلك.

يمكنك رؤية الكود الكامل خطوة بخطوة هنا:

Learnetto / calreact

calreact - تتفاعل والقضبان 5 تقويم التطبيق تعيين github.com

المشروع رقم 2: تطبيق Github explorer للعثور على مستودعات أكواد مثيرة للاهتمام

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

سوف تتدرب على استخدام واجهة برمجة تطبيقات خارجية والتعامل مع استجابة JSON. يمكنك تجربة العرض المسبق للمكون على الخادم.

شاهد هذا البرنامج المساعد للمتصفح بواسطة Algolia لتدفق الأفكار الخاصة بك:

algolia / جيثب-رهيبة-الإكمال التلقائي

github-awesome-autocomplete -: octocat: أضف إمكانيات البحث الفوري إلى شريط بحث GitHub github.com

المشروع رقم 3: تطبيق لتدوين الملاحظات

يمكنك أن ترى قوة React تتعامل مع الكثير من تغييرات الحالة ، على سبيل المثال ، من خلال تمكين الحفظ التلقائي. تحقق من Simplenote للحصول على مثال جيد لتطبيق ملاحظات بسيط ولكنه قوي.

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

الفيسبوك / مشروع- js

Draft-js - إطار عمل React لبناء برامج تحرير النصوص. github.com

المشروع رقم 4: إضافة أداة دردشة Slack إلى موقعك

استخدم مكون رد فعل-سلاك-دردشة لإضافة عنصر واجهة دردشة إلى موقع ريلز الموجود لديك. يقوم المكون بمعظم الرفع الثقيل ولكن يمكنك الاستمتاع بإنشاء الروبوت الخاص بك في ريلز وتخصيص عنصر واجهة المستخدم في React.

رمز المكون موجود على جيثب:

5punk / رد فعل-سلاك-دردشة

رد فعل-سلاك-محادثة - أداة دمج ويب سلاك شات / تصميم مواد جميلة. github.com

المشروع رقم 5: ميمي مولد

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

يمكنك إنشاء الميم على الخادم باستخدام ImageMagick أو في المتصفح باستخدام قماش. شاهد هذا الريبو بواسطة Hung Tran:

tranhungt / صانع ميمي

meme-maker - اصنع الميمات المفضلة لديك وأرسلها إلى صديقك! github.com

المشروع رقم 6: تطبيق Realtime Free Image search

استخدم Unsplash API للحصول على صور مجانية عالية الجودة:

unplash / unsplash_rb

unsplash_rb - غلاف روبي لـ Unsplash API. github.com

أضف رسومًا متحركة رائعة باستخدام إضافات React Animation.

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

المشروع رقم 7: نادي الكتاب

تطبيق بسيط حيث يمكنك أنت وأصدقاؤك مشاركة كتبك المفضلة ومناقشتها (مثل Goodreads). يمكن أن تكون الواجهة الخلفية تطبيق Rails CRUD بسيطًا ، ولكن يمكنك جعل الواجهة الأمامية تطبيق React من صفحة واحدة واللعب باستخدام جهاز التوجيه React و Redux.

المشروع رقم 8: عميل ويب Twitter لحسابات متعددة (مثل Tweetdeck)

تطبيق عميل ويب Twitter يمكنك من خلاله توصيل أكثر من حساب Twitter (باستخدام OAuth) ثم إضافة أعمدة متعددة إلى واجهة المستخدم - لأشياء مثل الخلاصة والإشعارات والبحث والرسائل المباشرة.

استخدم جوهرة Twitter بواسطة Erik Michaels-Ober:

سفيريك / تويتر

twitter - واجهة Ruby إلى Twitter API. github.com

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

يمكنك إضافة جلب تلقائي على غرار Tweetdeck للتغريدات والإشعارات الجديدة باستخدام الاقتراع أو Action Cable.

الكثير من المكونات المتداخلة ويمكنك تجربة بعض الرسوم المتحركة البسيطة في React.

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

المشروع رقم 9: OpenStreetMap Custom UI

هل تعلم أن موقع ويب OpenStreetMap هو تطبيق ريلز؟

يمكنك الحصول على الريبو هنا ، قم بإعداده على جهازك الخاص ثم العبث بإضافة React إلى الواجهة الأمامية!

openstreetmap / موقع ويب openstreetmap

openstreetmap-website - تطبيق Mirror of the Rails يعمل على تشغيل //www.openstreetmap.org (مستضاف على git: // git… github.com

المشروع رقم 10: لعبة روليت الغداء الجماعي

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

واستخدم React لبعض الرسوم المتحركة السخيفة!

إذا لم تكن تتناول الغداء ، فتناول القهوة أو الكوكتيلات أو أي شيء آخر أكثر إثارة.

المشروع رقم 11: المماطل الفائق

موقع ويب واحد يمكنك الانتقال إليه لتجنب العمل - اقرأ Reddit و Hacker News و Product Hunt و Medium و Slashdot والمزيد في مكان واحد.

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

هل تريد إنشاء هذه التطبيقات معي؟ تعال ، تحقق من دورة React Complete on Rails الخاصة بي ، حيث سأعلمك كيف تكون محترفًا في استخدام React مع Rails ، أثناء بناء بعض الأشياء الممتعة.

المشروع رقم 12: غرفة الدردشة مع Action Cable

بالإضافة إلى تعلم React ، فإن هذا من شأنه أن يجعل مشروعًا صغيرًا رائعًا لتجربة Action Cable ، وهي ميزة جديدة رائعة من Rails 5 تضيف دعم WebSocket إلى Rails. انظر إلى هذه الأمثلة لتبدأ:

القضبان / أمثلة قابلة للتنفيذ

الأمثلة-actioncable - أمثلة كابل العمل github.com

المشروع رقم 13: صغير جدًا (نسخة متوسطة)

تحقق من هذه السلسلة من منشورات المدونة بواسطة Andrea Mazzini ، والتي وصف فيها بالتفصيل كيف أنشأ نسخة Medium باستخدام تطبيق Rails API ، React و Flux.

FancyPixel / القضبان الصغيرة

القضبان الصغيرة - صغير ، استنساخ صغير من المتوسط. القضبان API github.com FancyPixel / الصغيرة الواجهة

small-frontend - صغير ، استنساخ صغير من Medium. React + Flux frontend github.com

يمكنك بنائه دون استخدام Flux ، ولكن قد يكون الأمر يستحق المحاولة إذا كنت على مستوى التحدي.

المشروع رقم 14: محدد الوجه

تطبيق يمكنك من خلاله تحميل الصور والإشارة إلى الأشخاص (مثل Facebook). استخدم جوهرة OpenCV Ruby للكشف التلقائي عن الوجه:

ruby-opencv / ruby-opencv

ruby-opencv - إصدار مفترق من جوهرة OpenCV لـ Ruby github.com

المشروع رقم 15: ActiveAdmin على المنشطات

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

انظر إلى رمز ActiveAdmin هنا:

Activeadmin / Activeadmin

Activeadmin - إطار عمل الإدارة لتطبيقات Ruby on Rails. github.com

المشروع رقم 16: متجر تجارة إلكترونية

مربى ، بيرة ، أعلام إنجلترا ، كاري ، كلها تخدمها React on Rails. إذا كنت لا ترغب في بناء ميزات المتجر في ريلز ، فما عليك سوى استخدام Spree والتركيز على ممارسة مكونات React للواجهة الأمامية.

فورة / فورة

spree - Spree هو حل كامل للتجارة الإلكترونية مفتوح المصدر لـ Ruby on Rails. github.com

خمين ما؟ أقوم ببناء فكرة المتجر عبر الإنترنت في سلسلة من البرامج التعليمية. سيتم نشر أول واحد هنا على مدونة freeCodeCamp! تأكد من متابعتي على Medium وقم بالتسجيل في Learnetto للحصول عليها في صندوق الوارد الخاص بك.

المشروع رقم 17: Just Mail No Chimp

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

لا يزال بإمكانك استخدام Mailchimp API أو استخدام Sendgrid. إذا كنت قد استخدمت Mailchimp ، فأنت تعلم أن هناك الكثير من الميزات التي يمكنك تجربتها - عرض / تصفية / إدارة المشتركين ، وتصميم النماذج ، وإنشاء الحملات ، والمزيد.

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

المشروع رقم 18: Gmail on Rails

يحتوي Gmail على واجهة مستخدم معقدة جدًا ولكن يمكنك البدء بمجرد إنشاء واجهة مستخدم لسرد رسائل البريد الإلكتروني وقراءتها. أو ربما يكون البحث أكثر متعة؟

استخدم جوهرة google-api-client وتحقق من هذا البرنامج التعليمي الرائع React واستعادة التعليمات البرمجية بواسطة Mark Brown ☕ للبدء:

markbrown4 / gmail-response

جوجل في رد الفعل - A React.js التعليمي - جوجل github.com

المشروع رقم 19: DJ Spotify

تطبيق DJ'ing مبني على Spotify. احصل على توصيات ، وأنشئ وخلط قوائم التشغيل ، بل اسمح للآخرين بإضافة الأغاني إلى قوائم التشغيل الخاصة بك.

استخدم جوهرة غلاف روبي لـ Spotify API:

guilhermesad / rspotify

rspotify - غلاف روبي لـ Spotify Web API github.com

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

المشروع رقم 20: لوحة معلومات Heroku

بصفتك مطورًا لريلز ، ربما تكون على دراية كبيرة بـ Heroku. إنها خدمة رائعة لنشر واستضافة تطبيقات Rails بسرعة - وهي مثالية عندما تقوم بالكثير من الأشياء الصغيرة للتعلم

أنشئ لوحة تحكم بسيطة تسرد تطبيقاتك وتتيح لك عرض المعلومات الأساسية حول كل منها بسرعة. يمكنك إضافة إمكانيات التحرير كخطوة ثانية.

استخدم هذه الأحجار الكريمة للوصول إلى واجهة برمجة تطبيقات Heroku:

heroku / platform-api

منصة المعهد - روبي العميل HTTP لAPI Heroku github.com

المشروع رقم 21: عميل AWS S3

أنشئ واجهة مستخدم حديثة وجميلة لإدارة حساب AWS S3 الخاص بك. استخدم جوهرة روبي وابدأ ببناء مكون متصفح ملفات بسيط. ثم أضف مكون نموذج لتحميل الملفات.

aws / aws-sdk-ruby

aws-sdk-ruby - حزمة AWS SDK الرسمية لـ Ruby. github.com

المشروع رقم 22: لوحة تحليلات شريطية

لوحة تحكم لعرض بعض الإحصائيات والمخططات بناءً على بيانات Stripe. تم توثيق واجهة برمجة التطبيقات جيدًا جدًا وهذه فرصة رائعة لمحاولة استخدام D3 مع React (انظر إلى هذا وهذا).

المشروع رقم 23: لوحة تحليلات جوجل

لوحة تحكم الويب الافتراضية لـ Google Analytics مزدحمة ومربكة. يمكنك بناء واحد أبسط يعرض فقط أهم المعلومات.

فرصة أخرى لاستخدام D3 أو يمكنك تجربة مكتبة أخرى.

يمكنك الوصول إلى GA API بهذه الأحجار الكريمة.

المشروع رقم 24: Habit Tracker

أنشئ تطبيقًا لتتبع عاداتك اليومية والأسبوعية - الروتين الصباحي ، وجلسات الجيم ، والجري ، والطبخ ، والتأمل ، وممارسة الجيتار ، ومراسم الشاي؟

للإلهام ، تحقق من Loop Habit Tracker أو Coach.

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

المشروع رقم 25: لوحة قياس اللياقة البدنية

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

اعتمادًا على ما تستخدمه أنت وعائلتك وأصدقائك ، يمكنك بسهولة سحب البيانات من عدد من واجهات برمجة التطبيقات - Fitbit و Google Fit و Moves و Runkeeper و Strava و Withings وغير ذلك الكثير!

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

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

لقد أنشأت لوحة تحكم بسيطة لبيانات Fitbit. انظر الكود هنا:

learnetto / رد فعل

reactfit - والتطبيق اللياقة البدنية لوحة أجهزة القياس بنيت باستخدام القضبان 5.1 و React.js github.com

المشروع رقم 26: Guess My Sketch (لعبة)

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

svrcekmichal / رد فعل الرسم التخطيطي

رد فعل - رسم تخطيطي - لوحة رسم تم إنشاؤها باستخدام canvas github.com

استخدم ريلز لتحميل الرسم وحفظه وإظهاره لشخص ما على جهاز كمبيوتر آخر.

كتدريب متقدم في المرح ، أضف التعلم الآلي واجعل الكمبيوتر يخمن؟

المشروع رقم 27: أنت تكتب مثل

قم بإنشاء تطبيق مصنف نصوص يطابق أسلوب كتابتك مع مؤلف مشهور - تمامًا مثل أنا أكتب أعجبني (صنعه Dmitry Chestnykh).

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

FormidableLabs / رد فعل الرسوم المتحركة

رد فعل الرسوم المتحركة - مجموعة من الرسوم المتحركة لمكتبات النمط المضمنة github.com

المشروع رقم 28: لوحة الأفكار

أنشئ تطبيق لوحة الأفكار باستخدام تطبيق Rails 5.1 API وتطبيق React منفصل تم إنشاؤه باستخدام تطبيق Create React. لوحة الأفكار هي لوحة بسيطة تعرض الأفكار على شكل مربعات مربعة. يمكنك إضافة أفكار وتعديل الأفكار الموجودة وحذف الأفكار.

لقد بنيت هذا بالفعل! تحقق من هذين الفيديوين التعليميين اللذين سيوضحان لك كيفية إنشاء هذا خطوة بخطوة:

الجزء 1:

البرنامج التعليمي Rails 5 و React.js - كيفية إنشاء تطبيق لوحة الأفكار | Learnetto

برنامج تعليمي Rails 5 و React.js - كيفية إنشاء تطبيق لوحة الأفكار | Learnettolearnetto.com

الجزء 2:

كيفية تحريك مكون باستخدام React Transition Group | Learnetto

كيفية تحريك مكون باستخدام React Transition Group | Learnettolearnetto.com

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

الآن هذه مجموعة كبيرة من الأفكار المثيرة للاهتمام لبدء رحلة React on Rails!

هل تريد إنشاء هذه التطبيقات معي؟ تعال ، وتحقق من البرامج التعليمية المجانية على React و Rails والمزيد على Learnetto.com.

هل لديك أي أفكار أخرى؟ شاركها في الرد أدناه.

من فضلك ؟ r ecommend / clap؟ وانشر هذا المقال!