Створення вебсайту з використанням фреймворку Sinatra

pic

Бути студентом у Flatiron Bootcamp — це дуже захопливо! У другому модулі ми вивчали Sqlite3 для роботи з базами даних, фреймворк ActiveRecord для маніпуляції даними в базі за допомогою мови Ruby, а також фреймворк Sinatra, який дозволяє розгортати веб-застосунки та додавати до них маршрути.

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

Крок 1. Вибір ідеї

У цьому проєкті вам не обмежують можливість виражати себе, тож вибирайте те, що вам подобається або чим ви цікавитеся, щоб розробка була цікавішою. Звісно, іноді задумане не відповідає вимогам проєкту через необхідний рівень складності. З урахуванням цього я вирішив створити застосунок соціальної мережі, схожий на Facebook, але такий, яким він був 10 років тому: проста базова мережа, де можна знаходити людей, дружити та залишати повідомлення на стіні.

Крок 2. Розробка стратегії

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

pic

Це далеко не ідеально, але наприкінці проєкту я зробив лише одну зміну до свого початкового плану: замінив зв’язок багато-до-багатьох на таблицю самозв’язків (self-join table). Таким чином, хороша стратегія допоможе вам успішно завершити проєкт.

Крок 3. Налаштування репозиторію

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

Крок 4. Міграції

Це перше, що я роблю, коли починаю писати код. Мій улюблений ярлик для роботи зі схемою — rake db:create_migration NAME='action’, де ‘action’ — це призначення вашої міграції, наприклад, ‘createuserstable’ або щось подібне, щоб ви розуміли її мету. Після налаштування схеми не забудьте запустити rake db:migrate, щоб переконатися, що схема застосована або оновлена.

Крок 5. Моделі

Настав час налаштувати класи, щоб ActiveRecord міг допомогти вам створити зв’язки між класами і базою даних. ActiveRecord робить багато за вас, і варто почитати про нього, щоб повністю розкрити його потенціал. Мій виклик був із класом ‘Friends’, для якого я хотів правильно налаштувати зв’язки. Якщо клас ‘Post’ є досить простим (User має багато Post, а Post належить User), то для класу ‘Friendship’ потрібен був зв’язок багато-до-багатьох. Після дослідження я дізнався про нову функцію ActiveRecord із таблицями самозв’язків (self-join tables), яка створює зв’язки між двома екземплярами одного класу через іншу таблицю. Не буду брехати, мені знадобився час, щоб зрозуміти цю концепцію, але коли я це зробив, я усвідомив, наскільки це чудово і який великий потенціал це має.

У моєму прикладі була таблиця користувачів (users) і таблиця друзів (friends), яка мала лише два стовпці: ‘sender’ і ‘receiver’. Ці стовпці містять ID користувачів і їхні стосунки, що дозволяє відстежувати, хто запитує дружбу і хто її приймає.

pic

У класі Friend я вказую, що екземпляр Friend належить відправнику (sender) і отримувачу (receiver), які є екземплярами класу User.

pic

Налаштування у класі User стає трохи складнішим і заплутанішим. Воно створює асоціації між екземплярами класу User, використовуючи зовнішній ключ у таблиці friends. Це, по суті, зв’язок багато-до-багатьох.

Це налаштування дозволяє виконувати такі дії:

pic

Крок 6. Контролери (Controllers) і маршрути (Routes)

На цьому етапі потрібно переконатися, що всі маршрути налаштовані для підтримки функціональності CRUD — створення (Create), читання (Read), оновлення (Update) та видалення (Delete).

Щоб використовувати маршрути patch і delete, не забудьте додати Rack::MethodOverride у ваш config.ru. Це дозволить Sinatra перехоплювати POST-запити і перенаправляти їх до patch або delete, якщо у формі є такий рядок:

pic

із значенням, яке дорівнює “patch” або “delete”.

Висновок

Файли erb, які містять ваш HTML та Ruby разом, можуть змінюватися залежно від того, як ви хочете, щоб ваш сайт виглядав. Важливо розуміти ActiveRecord і те, що він робить для вас. Спочатку це здається магією, але насправді це не так. Коли ви розберетеся з ним, вся "магія" почне працювати, і це стане основою вашого веб-застосунку. Успіхів!

Перекладено з: Making Website With Sinatra Framework

Leave a Reply

Your email address will not be published. Required fields are marked *