Цей блог-пост є загальним оглядом використання веб-фреймворку (web framework) Sinatra. Для детального розгляду застосунку “Vacation Budget Tracker”, створеного з використанням Sinatra, зверніться до відео та посилання на GitHub нижче.
Попередній перегляд застосунку:
Відео загального огляду роботи застосунку
Репозиторій GitHub:
[
stabassum/sinatra-project-vacation-budget-tracker-
Застосунок Vacation Budget Tracker створений для допомоги користувачам у відстеженні витрат на подорожі до конкретних місць…
github.com
](https://github.com/stabassum/sinatra-project-vacation-budget-tracker-.git?source=post_page-----ee8f4811c065--------------------------------)
Подорожі — це те, чим багато з нас займається часто, будь то свята, технічна конференція чи просто дослідження світу, в якому ми живемо. Це, безсумнівно, приносить задоволення, але, як і багато інших приємних речей, подорожі теж мають свою ціну.
Я задумався: чому б не створити застосунок, який відстежує витрати на певні подорожі? Застосунок, який міг би відстежувати місце відправлення, пункт призначення, дату подорожі, а також бюджет і фактичну вартість поїздки. Ці дані могли б надати зв'язок між датами подорожей, витратами, пунктами призначення і навіть місцями відправлення. Найважливіше те, що такий застосунок став би базовим способом відстеження витрат.
Отже, давайте зробимо огляд створення простого застосунку ‘Vacation Budget Tracker’!
Перш за все, потрібно визначитися з інструментами, які знадобляться для створення такого веб-застосунку. У нашому випадку ми зосередимося на мові програмування Ruby і фреймворку Sinatra для роботи з бекендом (backend), а також файлах .erb, які містять код HTML і CSS для фронтенд-частини (frontend) застосунку.
Що таке Sinatra?
Sinatra — це легкий веб-фреймворк (web framework), розроблений для надання користувачам мінімальних абстракцій для створення простих і динамічних веб-застосунків на Ruby. Важливо зазначити, що основи мови програмування Ruby необхідно розуміти перед тим, як створювати застосунки на Sinatra.
Причина використання Sinatra, а не потужніших веб-фреймворків, таких як Rails, полягає в розумінні базових функцій застосунку. Після того як ви зрозумієте, як працюють основні функції з використанням легкого інструменту для створення застосунків, буде практичніше перейти до складніших інструментів, таких як Rails.
Загальні функції застосунку
Принаймні, будь-який застосунок має складатися з даних і логіки, з якими працює користувач. Додавання зображень покращить взаємодію з користувачем. Також має бути зв'язок між відображенням на екрані та даними — підключення для передачі даних з боку сервера до екрана на стороні клієнта. Ці концепції даних і логіки, відображення на екрані та зв'язку між даними і відображенням можна краще пояснити за допомогою патерну MVC.
Що таке патерн MVC?
У веб-застосунках MVC означає Модель-Представлення-Контролер (Model-View-Controller).
MVC — це патерн проєктування програмного забезпечення, який розділяє логіку при створенні застосунку, тобто MVC акцентує увагу на розділенні логіки в нашому застосунку.
М — моделі (models), у нашому застосунку слугують основною логікою і містять дані, необхідні для роботи застосунків. Моделі можна представити через класи, які взаємодіють із базою даних для збереження даних. Щоб ефективно працювати з нашими класами моделей, важливо ознайомитися з Active Record ( https://guides.rubyonrails.org/activerecordbasics.htm ), який використовується для створення застосунків на Sinatra.
Active Record — це об'єктно-реляційний маппер (Object Relational Mapper, ORM), який надає попередньо визначені методи, що дозволяють розробникам взаємодіяти з класами моделей і базами даних, заощаджуючи час у процесі розробки застосунків.
В — представлення (views) у нашому застосунку є інтерфейсом, через який користувач взаємодіє із застосунком. Представлення містять наші HTML, CSS і JavaScript.
І, нарешті, К — контролери (controllers) у нашому застосунку є "посередником", який взаємодіє з моделями і базою даних, щоб реалізувати певну функцію у браузері відповідно до запиту (наприклад, вхід у систему, вихід, створення облікового запису тощо), який зробив користувач. У простому застосунку на Sinatra, згаданому вище — “Vacation Budget Tracker”, використовується патерн MVC.
Структура файлів
Нижче наведена одна з багатьох ідеальних структур файлів для використання в застосунку:
Чітка структура файлів під час створення застосунку має велике значення, оскільки розробники (ви або інші) повинні мати змогу знайти потрібний код для модифікації чи відлагодження. Щонайменше, для створення цього застосунку необхідно створити папку “app”, яка міститиме підпапки структури MVC. У межах папки “app” потрібно створити три додаткові папки з назвами “models”, “views” та “controllers”.
Також слід створити додаткові папки, такі як “db”. У межах папки “db” необхідно створити підпапку з назвою “migrate”. Ці папки дозволять зберігати дані та взаємодіяти з базою даних.
Файл config.ru є одним із найважливіших у нашому застосунку, оскільки він забезпечує взаємодію між моделями, поданнями і контролерами. По суті, це файл, який дозволяє обмін даними між кількома файлами. Файл Gemfile містить усі Ruby-геми (gems), які використовуються у нашому застосунку, а Rakefile дозволяє розробникам легко взаємодіяти з базою даних.
(Зверніться до зображення структури файлів вище для довідки)
Налаштування бази даних і зв’язків моделей
Перед створенням будь-яких функцій застосунку важливо розуміти, які зв’язки між даними будуть у нашому застосунку. Наприклад, ми точно знаємо, що в застосунку буде користувач, який захоче виконувати певні дії.
Користувач може захотіти створити нову “відпустку” (Vacation), яка буде збережена як об'єкт у нашій базі даних (нагадуємо, Ruby — це об’єктно-орієнтована мова програмування). У відпустки буде кілька пов’язаних властивостей, таких як короткий опис, дата, місце відправлення, пункт призначення, бюджет і витрати. Щоб користувач зміг виконати цю дію, конкретна відпустка повинна належати користувачу після її створення. Щоб дозволити користувачу виконувати цю дію кілька разів, створюючи кілька відпусток, користувач повинен мати зв’язок has many з відпустками.
Ці два приклади — відпустка належить користувачу і користувач має багато відпусток — встановлюють зв’язки у застосунку. Ці зв’язки визначаються у класах моделей, які відображаються у базі даних.
“Користувач має зв’язок has many із відпустками”
“Конкретна відпустка повинна належати користувачу”
Ці зв’язки, визначені у класах моделей, також створюють методи через ActiveRecord, які користувачам не потрібно визначати вручну у класах моделей.
Загальний метод — це метод .all, який використовується, якщо користувач хоче побачити всі свої відпустки. Простий виклик User.all, і записи відпусток для цього користувача будуть відображені.
Подання (Views)
Логіка дуже важлива для нашого застосунку, але не менш важливими є подання — те, що бачить користувач.
Без подань (views) користувач абсолютно не може взаємодіяти із застосунком. Важливо зрозуміти, що єдиний спосіб доступу користувача до застосунку — це “подання”.
У звичайних статичних вебсайтах для відображення інформації користувачам використовуються HTML-файли з розширенням “.html”. У застосунках Sinatra наші подання будуть рендеритись за допомогою файлів embedded ruby (erb) із розширенням “.erb”. Ці файли дозволяють розробникам вставляти код Ruby в HTML-код. Код Ruby, визначений у файлі .erb, викликатиме об’єкти класів моделей. У застосунку “Vacation Budget Tracker” використовується багато файлів .erb, які дозволяють користувачу успішно переміщатися по застосунку.
Файл index.erb відповідає за домашню сторінку застосунку. Нам також потрібен файл login.erb, щоб рендерити сторінку входу користувача в застосунок, і файл signup.erb, щоб відобразити сторінку реєстрації, якщо користувач ще не зареєстрований. Для виходу з застосунку також потрібна кнопка "вийти", тому для цієї функції можна використовувати форму, яка виконає дію завершення сеансу користувача.
Файл index.erb відповідає за домашню сторінку застосунку
Зображення вище показує, що буде відображено на екрані відповідно до коду у файлі index.erb
Контролери (Controllers)
Ми розглянули наші класи моделей та їх зв’язок із базою даних, а також подання, які рендерять контент у браузері за допомогою файлів .erb. Тепер виникає питання: як класи моделей у взаємодії з базою даних передають дані до подань?
Контролери! Контролери є "посередником" у нашому застосунку, який отримує запит від користувача через подання і передає цей запит до класів моделей, що взаємодіють із базою даних, щоб відповісти на запит. Ці запити визначаються через HTTP-методи — найпоширенішими є GET-запити та POST-запити.
У застосунку Sinatra контролер наслідує від Sinatra::Base, щоб розробник міг використовувати всі методи, пов’язані з діями контролера. Наприклад, контролер виконає HTTP-запит у застосунку “Vacation Budget Tracker”, коли користувач намагатиметься увійти з неправильним паролем. Після цієї дії контролер відправить запит від користувача до сервера, щоб перевірити, чи збігається пароль, збережений у базі даних для певного імені користувача, із введеним користувачем. Якщо пара логін і пароль не збігається, контролер відправить відповідь користувачу, перенаправивши його назад на сторінку входу із повідомленням про невірні дані.
RESTful Маршрути
Дотримання конвенцій завжди необхідне для створення якісного застосунку. Використовуючи онлайн-застосунки, ми помічаємо певні патерни. Наприклад, це видно за маршрутами. На майже всіх вебсайтах, якщо звернути увагу на URL, https://www.index.html зазвичай відображає домашню сторінку, а https://www.logout.html — дозволяє вийти із застосунку. Маршрути, визначені в наших контролерах, направляють користувача до певних URL. Для кожного HTTP-дієслова маршрут асоціюється з дією, яка визначає його призначення.
На зображенні вище показано, як HTTP-дієслово пов’язане з певним маршрутом, дією та її призначенням.
Підсумок
MVC — це простий патерн розробки програмного забезпечення або веб-застосунків, який дозволяє розділяти логіку під час етапу розробки.
Цей патерн можна реалізувати за допомогою веб-фреймворків (web frameworks), таких як Sinatra, під час створення веб-застосунку. Застосунок Vacation Budget Tracker — це один із багатьох, який використовує фреймворк Sinatra, дозволяючи користувачам відстежувати фінанси та інші деталі своїх подорожей.
Перекладено з: General Overview of Building a Basic Sinatra Application