Не вбивайте свою мотивацію: освоюйте Ruby on Rails на цікавих прикладах

Всі ж пам'ятають, як це буває: ти вчишся чомусь новому, але раптом раз і зажурився. А все чому? Тому що розробка типових програм при навчанні нудне до зубовного скреготу.

Подібні завдання стають ВБИВЦЯМИ мотивації №1.

Особисто я не хочу, щоб мої учні втрачали мотивацію і здавалися на півдорозі. Тому я створив цей кілометровий список з 27 кумедних ідей для додатків, які ви можете створити, поки навчаєтеся використовувати React на пару з Ruby on Rails.




Цей перелік передбачає, що ви вже достатньо комфортно чувтсвуете себе при роботі з Ruby on Rails (або з яким-небудь іншим фреймворком для web-розробки). Тому частина, що відноситься до бэкенду, може здатися новачкам досить складною, але ось фронтенд не повинен викликати серйозних труднощів.



Проект #1 – Календар-планувальник (типу Google календаря)



Ви можете розпочати цей проект як саме просте додаток, яке поступово будете покращувати, додаючи більше функцій і покращуючи UX.
Це допоможе вам практикуватися в роботі з вкладеними компонентами (такими, як компонент дня, поміщений в компонент тижня, який в свою чергу розташований у компоненті місяця).

Я використовую подібне додаток в якості прикладу в своєму безкоштовному курсі для Rails-розробників.

Ви можете подивитися повну покрокову версію коду тут.

Проект #2 — Пошуковик цікавих репозиторіїв коду на Github



Можна зробити так, щоб пошук здійснювався на стороні клієнта, але значно кумедніші буде, якщо зберігати пошукові запити в базі за допомогою Rails і відображати найпопулярніші з них.

Подібний проект — хороша практика у використанні зовнішніх API і роботі з JSON відповідями. Також можете поекспериментувати з пре-рендерингом компонента на сервері.

Перегляньте ось цей плагін Algolia, щоб розжитися свіжими ідеями.

Проект №3 — Додаток для нотаток



Ви зможете повною мірою оцінити можливості React при роботі з численними змінами стану — скажімо, якщо підключіть автозбереження. Поизучайте Simplenote, якщо вам потрібен приклад простого, але потужного програми для нотаток.

Якщо вам здається, що для першого проекту це важкувато, можете спочатку потренуватися зовнішнім компонентом редагування тексту, щоб зрозуміти, як це все працює, а потім вже впровадити свій власний.

Проект №4 — Додайте на свій сайт Slack-чат



Використовуйте компонент react-slack-chat, щоб додати віджет чату на існуючий сайт, написаний на Rails. Компонент зробить більшу частину роботи за вас, але зате можна розважитися, створивши власного бота на Rails або погравши з налаштуваннями віджету на React.

Код компонента доступний на Github.

Проект #5 — Генератор мемасиков



Rails дозволяє підтримувати зберігання і обслуговування бібліотеки картинок і прикольних мемів. Використовуйте React для візуалізації та керування формою для створення мема.
Ви можете створювати мем на сервері за допомогою ImageMagick або в браузері, використовуючи canvas. Ознайомтеся з цим репозиторієм Tran Hung.

Проект №6 — Додаток для пошуку безкоштовних картинок в реальному часі



Скористайтеся API Unsplash як джерелом безкоштовних картинок відмінної якості.

Додавайте класні анімації за допомогою React Animation Add-Ons.

Надайте користувачам можливість заносити вподобані зображення в обране. Можна поекспериментувати: зробити простий бекенд для API додатка на Rails, а для фронтенда створити окремий додаток на React.

Проект №7 — Клуб читачів



Нехитра додаток, в якому можна обговорювати улюблені книги і ділитися ними з друзями (щось на зразок Goodreads). Бекенд можна виконати як просте додаток Rails CRUD, а фронтенд — як додаток-одностраничник на React, заодно погравшись з Router і Redux.

Проект №8 — Веб-клієнт для управління декількома акаунтами на Twitter (в дусі Tweetdeck)



Веб-клієнт для Twitter, який можна пов'язати з декількома акаунтами (за допомогою OAuth), а потім додати його інтерфейс безліч колонок для відображення різних екранів — стрічки, повідомлень, пошуку, листування.

Радимо скористатися цим незамінним Twitter gem від Erik Michaels-Ober.

З ним ви пізнаєте ні з чим не порівнянне задоволення, яке приносять розробнику сміховинні обмеження швидкості запитів API від найлояльнішої компанії у світі.

Ви можете також ввести автоматичну підвантаження нових твітів і оповіщень, як в Tweetdeck, застосувавши polling або Action Cable.

Тут теж вистачає вкладених компонентів і є можливість спробувати реалізувати простенькі анімації на React.

Можливо, найкраще для початку обмежитися функцією читання. Коли розберетеся з нею, можна підключати і інші можливості — постинг, лайки, ретвіти.

Проект №9 — OpenStreetMap з кастомным UI



Чи Знали ви, що вебсайт OpenStreetMap — це додаток, написаний на Rails?

За адресою ви можете знайти репозиторій, встановити його на свій девайс і попрацювати з фротендом за допомогою React!

Проект №10 — Російська рулетка з обідами для всієї команди



Вебсайт, який допоможе команді визначитися, куди сьогодні відправитися в обідню перерву. У плані бекенду досить CRUD-додатки, яке дає вашим колегам можливість пропонувати різні заклади. Для функцій пошуку та автозаповнення API від Foursquare. А React дозволяє додати прикольні анімації!

Якщо ідея з обідами вас не приваблює, організуйте таким чином кава-брейк, або похід в бар після роботи, або ще що-небудь цікавіше.

Проект №11 — Майстер прокрастинації



Все, що потрібно, щоб ухилятися від роботи — на одному сайті. Читайте пости з Reddit, Hacker News, Product Hunt, Medium, Slashbot і так далі не перемикаючись.

Використовуйте бекенд на Rails, щоб зберігати користувальницькі акаунти і переваги, а також щоб встановлювати зв'язок з різними API. Інший варіант — отримувати дані від API безпосередньо з боку клієнта.

Проект №12 — Чат з Action Cable



Це не тільки привід підучити Rails, але і чудова можливість випробувати Action Cable — цікаву функцію з Rails 5, яка забезпечує підтримку WebSocket на Rails. Для початку можете ознайомитися з цими прикладами.

Проект №13 — Клон Medium



Почитайте серію постів з блогу Andrea Mazzini, в яких він детально розповідає про процес створення клону Medium за допомогою Rails API додатка, React і Flux.

Можна обійтися і без Flux, але, якщо хочете трохи ускладнити собі завдання, має сенс його підключити.

Проект №14 — Face tagger



Програма, яка дозволяє завантажувати фотографії і відзначати на них користувачів (як на Facebook). Для автоматичного розпізнавання осіб використовуйте OpenCV Ruby gem по посиланню.

Проект №15 — ActiveAdmin на стероїдах



Ви напевно користувалися ActiveAdmin, щоб відслідковувати процес роботи над додатком. Але інтерфейс у нього, чесно кажучи, так собі. Ви можете це виправити, перетворюючи один екран за іншим стилізовані компоненти React.

Повивчати код ActiveAdmin можна тут.

Проект №16 — Магазин Brexit



React на Rails пропонує відвідувачам джем, пиво, англійські прапори, каррі і багато іншого. Якщо не хочете реалізовувати функції, необхідні для магазину, на Rails, використовуйте Spree, а самі зосередьтеся на застосуванні компонентів React при роботі над фронтендом.

Проект №17 — Просто пошта і ніяких шимпанзе



Поштовий клієнт з гарним інтерфейсом, від якого користувачеві не захочеться рвати на собі волосся. І без всяких там дурниць на кшталт миленьких мавп.

API від Mailchimp вам, тим не менш, згодиться. Або можете в якості альтернативи звернутися до Sendgrid. Якщо вам доводилося працювати з Mailchimp, то самі знаєте, що багато функцій, які можна спробувати впровадити, маса — перегляд, фільтри, управління передплатниками, створення форм і кампаній і так далі.

Виберіть щось одне і постарайтеся реалізувати. Більша частина функцій передбачає наявність певної форми, так що це ваш шанс попрактикуватися в поділі інтерфейсу на компоненти React, які відображають зміни стану, і функціональні компоненти, з станом не пов'язані.

Проект №18 — Gmail на Rails



У Gmail інтерфейс досить складний, однак можна для початку обмежитися створенням UI для виводу списку листів і читання. Або, може бути, для пошуку, якщо вам так цікавіше?

Скористайтеся цим API gem для Gmail, а також туториалом і сховищем коду Mark Brown, щоб простіше було почати.

Проект №19 — DJ Spotify



DJ додаток на основі Spotify. Отримуйте рекомендації, створюйте і міксуйте плейлисти і навіть дозвольте іншим додавати пісні в плейлисти.

Використовуйте Ruby wrapper gem для отримання API Spotify.

Я як-то раз зробив додаток-крихітку з його допомогою, і працювати з ним було досить просто. Spotify дозволяє програвати музику тільки через власний додаток, так що доведеться запускати його паралельно з вашою.

Проект №20 — Панель Heroku



Як Rails-розробник, ви швидше за все відмінно знайомі з Heroku. Це прекрасний сервіс для швидкого розгортання та хостингу Rails додатків – особливо добре він підходить для тих випадків, коли ви працюєте над безліччю невеликих проектів, просто щоб набити руку.

Створіть просту панель, яка згрупує ваші програми в список і дозволить вам швидко виводити ключову інформацію про кожного з них. Наступним кроком може стати додавання функції редагування.

Використовуйте цей gem, щоб отримати доступ до API Heroku.

Проект №21 — AWS S3 клієнт



Зробіть гарний сучасний інтерфейс для управління своїм акаунтом AWS S3
Використовуйте Ruby gem по посиланню і почніть зі створення простого компонента управління файлами. Потім додайте компонент форми для завантаження файлів.

Проект №22 — Панель аналітики Stripe



Панель, яка показує статистику та графіки, створені на підставі даних Striple. У цього API відмінно йдуть справи з документацією, і до того ж у вас буде можливість спробувати використовувати D3 з React (подивіться тут і тут).

Проект №23 — Панель Google analytics



У своєму початковому вигляді веб-панель Google аналітики занадто перевантажена і важка для сприйняття. Ви можете зробити версію простіше, на якій буде відображатися тільки найважливіша інформація.

Ще одна можливість випробувати D3. Або ж зверніться до інший бібліотеці. Ви можете отримати API Google analytics за допомогою цього gem-а.

Проект №24 — Додаток для відстеження звичок



Розробіть додаток для відстеження своїх щоденних і щотижневих справ – ранкові збори, відвідування тренажерного залу, пробіжки, готування, медитація, гра на гітарі, чайні церемонії. Джерелом натхнення вам можуть послужити Loop Habit Tracker або Coach.
Пристосовуйте свій додаток для мобільних пристроїв, щоб можна було використовувати його на ходу. Коли подружіться з React, можна навіть зробити мобільний додаток, використовуючи React Native.

Проект №25 — Фітнес-панель



Створіть панель зі своїми персональними фітнес-даними, яка збирає інформацію з різних додатків і виводить корисну статистику на симпатичний інтерфейс.

Можна без проблем отримувати дані з різних API, в залежності від того, якими сервісами користуєтеся ви та ваші близькі — Fitbit, Google Fit, Moves, Runkeeper, Strava Withings і так далі.

Ви можете навіть дозволити користувачеві вручну вводити якусь нескладну інформацію типу змін у вазі або режиму вправ.
Почати краще просто з виведення звітів, а далі вже покращувати панель, додаючи нові функції, наприклад, можливість робити замітки або ділитися результатами.

Проект №26 — Вгадай, що я намалював (гра)



Створіть програму-рисовалку, в якому потрібно малювати з допомогою мишки, щоб ваш друг вгадував, що за каляки-маляки ви зобразили. Для малювання ви можете використовувати canvas. Перегляньте приклад Michal Svrček, щоб зрозуміти, з чого можна почати.

Використовуйте Rails, щоб зберегти зображення, а потім показувати їх кому-небудь на іншому девайсі. Або ще веселіше: підключіть машинне навчання — і нехай вгадує ваш комп'ютер. ;)

Проект #27 — Ви пишете, як...



Зробіть додаток для класифікації текстів, яка порівняє ваш стиль зі стилем якогось відомого автора – прямо як додаток I Write Like (створене Дмитром Чесних).

Використовуйте classifier-reborn для класифікації і React для роботи з формою. Основна складність тут полягає в бэкенде, тому експериментуйте з різними UI-анімаціями. Перегляньте цей репозиторій, щоб почерпнути якісь круті ідеї.

Тепер у вас є цілий список цікавих ідей, щоб прокачати свої навички в React, в процесі освоєння Rails!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.