ЗМІСТ

ВСТУП.......................................................................................................................................................2
1 ЗАГАЛЬНИЙ РОЗДІЛ..........................................................................................................................4
1.1 Desktop програма..........................................................................................................................4
1.2 Веб-додаток....................................................................................................................................5
1.3 Різниця між веб-програмою та веб-сайтом..............................................................................6
1.4 Види веб-застосунків....................................................................................................................7

ДП 123 ПЗ
Змн. Арк. № докум. Підпис Дата
Розроб. . Літ. Арк. Акрушів
Перевір.
Розробка піскельної гри в
Н.Контроль
жанрі RPG "Обман памяті"
Н.Контроль
Реценз. ОФККТ , гр. 19ОКС2
Н.Контроль
Затвердив Козуб С.А.
 5

ВСТУП

На просторах інтернету, зустрічаються додатки подібні до нашого,

проте, CityFood, поєднує воєдино додатки: адміністрування ресторанного
бізнесу, доставки, карти (для пошуку закладів громадського харчування), так
само за допомогою програми можна зробити замовлення дистанційно, вам
залишається тільки прийти і забрати свою їжу, далі, є можливість забронювати
стіл на певний час, ще в додаток зберігатимуться різні купони від ресторанів.
Далі ми розглянемо все докладніше. Для споживачів воно буде повністю
безкоштовним, а також у ньому зовсім не буде реклами, ми дбаємо про те, щоб
наші клієнти могли із задоволенням користуватися додатком і не відволікалися
від вибору своєї «вечері».
Що стосується власників ресторанного бізнесу, для них додаток буде
доступний за підписку, що буде значно дешевше ніж додатки такого типу.
Зручність програми для споживача. CityFood допоможе користувачеві підібрати
оптимальний ресторан для побачення або для того, щоб відзначити підвищення
на роботі, особливо не витрачаючи на цей процес ні свій час, ні сили. За
допомогою стрічки споживач зможе наочно ознайомитися з оцінкою закладу
окремо за двома критеріями: їжа та сервіс, а також із загальною оцінкою. На
картці ресторану, користувач, зможе побачити найпопулярнішу страву та її
вартість. Усі картки розподілені в різні категорії, наприклад, на відстані до
найближчого закладу, за відгуками інших користувачів, нещодавно відвідані,
заклади яких зараз є акції на різні страви і на заклади акції яких є
безпосередньо у самого користувача (раніше згадані купони).
Так само, у стрічці головного вікна, користувач зможе зустріти меню
закладів. У самому верху, знаходиться пошук по всіх закладах, користувач з
легкістю зможе знайти будь-який заклад, який йому ненароком порадив колега
на роботі, йому досить просто ввести назву і в стрічці залишаться тільки
заклади з такою назвою. Поруч із пошуком, розташувалася кнопка фільтрації.
Функції фільтра дозволяють відсортувати філії за типом, замовлення, яке
 6

планується користувачем, тобто хоче людина відвідати особисто заклад або

хоче отримати свої страви з доставкою. Так само є функція фільтрації закладів
на відстані до них за часом ходи в хвилинах, за типом закладу, що віддається
перевагу, наприклад, бар, кафе, ресторан або ж філії швидкого харчування. Є
функція фільтра тому чи є у закладі акції, чи є у вас особисті акції від цього
закладу. Після того як користувач визначився з вибором закладу, де хоче
зробити замовлення, він може одним дотиком по картці, перейти і докладніше
ознайомиться із самим закладом. Там людина зможе побачити зверху чотири
кнопки, зліва кнопка може повернути користувача на головне вікно, праворуч
три кнопки.
Додати заклад до обраного, здійснити пошук за стравами у меню
закладу та показати всі філії на карті. Трохи нижче розташовані три невеликі
вікна: загальна оцінка закладів, відстань до найближчої філії в метричному
обчисленні. Також, третє вікно, відповідає за стан роботи закладу. Ще нижче
знаходиться опис закладу. Далі, знаходиться меню і зараз ми розглянемо його
докладніше. У меню знаходяться картки з ціною на різні страви, а також їх вагу
та зразкову картинку товару. До того ж, там будуть акції самого закладу. При
натисканні на одну з карток товару відкривається вікно з докладним описом
самого товару та його конструктор (якщо заклад передбачає це). Нижче можна
натиснути кнопку і додати товар у кошик і вказати його кількість.
Тепер ми перейдемо в зовсім інше русло, користувачеві програми
відкривається можливість спілкування з іншими присутніми в одному закладі.
Якщо людина прийшла одна і хоче знайти компанію на вечір і соромиться
підійти, вона зможе собі спокійно написати людині і дізнатися, чи шукає вона
собі теж компанію на вечір. Є можливість текстового зв'язування та можливість
дзвінка. Насамперед, користувачеві доведеться зареєструватися. Для цього
йому потрібно буде ввести свої дані: електронну пошту, телефон, ім'я,
прізвище, а також придумати пароль для захисту свого облікового запису в
нашій мережі та за бажанням додати свою фотографію, прикрасити свій
профіль, так би мовити. Також, споживач, зможе включити геолокацію, щоб
 7

одержувати актуальні рекомендації закладів у сфері його безпосереднього

перебування. Після реєстрації користувачеві прийде код підтвердження.
 8

1 ЗАГАЛЬНИЙ РОЗДІЛ

1.1 Desktop додатки

Desktop додаток – програма, яка встановлюється на комп'ютер

користувача та працює під керуванням операційної системи. Такі програми
високопродуктивні, можуть працювати безпосередньо з принтерами,
сканерами, факсами та іншою технікою.
Основні переваги Desktop додатків:
 автономна робота як із підключенням, так і без підключення до
інтернету;
 завжди запускається із завантаженням даних із пам'яті пристрою, на
якому встановлено, не вимагає щоразу завантаження параметрів із мережі;
 доступ до функцій операційної системи та графічних бібліотек, таких
як gdi, directx, opengl;
 ефективна робота за рахунок можливості багатопроцессорних систем,
можливість безпосередньої роботи та з пам'яттю та з файловою системою,
локальні бази даних;
 настільному додатку доступні всі пристрої, що підключаються до
комп'ютера, через фірмові драйвера або з використанням низького рівня
взаємодії - com, lpt, ethernet тощо (рис. 1.1).

Рисунок 1.1 – Приклад desktop програми

 9

1.2 Веб-додаток

Веб-додаток – це програмне забезпечення або програма, яку можна

відкрити за допомогою будь-якого браузера. Зовнішній інтерфейс веб програми
розробляється за допомогою таких мов програмування: HTML, CSS, Javascript,
які підтримуються на будь-якому браузері (Opera, Chrome, Mozilla, Yandex). У
той час як для написання серверної частини (Back-end) може
використовуватися будь-яка інша мова програмування або фреймворк, чи то
Python, PhP, Ruby, Java.
Основні переваги веб-додатків:
1. Веб-програми можуть застосовуватися на будь-якій операційній
системі (Linux, Mac, Windows) оскільки всі вони підтримують сучасні браузери.
2. У зв'язку з тим, що веб-додаток використовується один і той же код
порівняно з desktop додатками їх набагато легше підтримувати.
3. Веб-додаток простіше програмувати оскільки вони не включають
багато роботи з елементами ПК (ядро, процесор, відеокарта).
4. На відміну від мобільних програм, для веб-додатків не потрібно
схвалення жодних платформ, щоб випустити свою програму.
5. Веб-додатки це більш економний варіант для будь-якого підприємства
оскільки, веб-додатки не вимагають підписки або покупки ліцензій, а може
використовуватися як SaaS-сервіс, що значно дешевше (рис. 1.2).
 10

Рисунок 1.2 – Приклад веб-програми

1.3 Різниця між веб-програмою та веб-сайтом

Незважаючи на те, що і веб-сайтом, і веб-програмою користуються за

допомогою браузера, між ними є суттєві відмінності.
Веб-сайт – це сукупність веб-сторінок, найчастіше інформаційного
характеру. Він може містити контент у вигляді тексту, зображень, аудіо або
відео тощо.
Веб-сайти видають користувачеві готові HTML-сторінки, доступні для
перегляду. Взаємодія із нею обмежена. Найчастіше ви можете лише
скористатися пошуком або передплатити новини.
Аутентифікація не є обов'язковою. Сайт компанії – характерний приклад
веб-сайту. Також такі сайти часто називають статичними.
Веб-додаток носить інтерактивний характер і дозволяє вводити дані,
динамічно обробляти їх та отримувати деякі результати. Крім того, веб-
програми можна настроювати відповідно до своїх вимог. Різні фрагменти
сторінки веб-застосунку оновлюються «на льоту» після взаємодії з
користувачами, як, наприклад, стрічка новин у соціальній мережі (табл. 1.1).

Таблиця 1.1 – Різниця між веб-сайтом та веб-додатком

Веб-сайт
Дозволяє переглядати дані
Можна користуватися без аунтифiкацiї
Видає заздалегідь підготовлені HTML-
сторінки в основному зі статичними
файлами
Простіше у розробці; менше налаштувань
для відвідувача
Веб-додаток
Дозволяє маніпулювати даними
Потребує аунтифікації
Фрагменти HTML-сторінки генеруються
та оновлюються «на льоту»
Потребує розробки; дає більше
налаштувань для користувача. Це
породжує складність, зворотний бік чого
— потенційні помилки.
 11

1.4 Види веб-додатків

SPA (Single Page Application) – односторінковий інтерактивний додаток.

Важливо, що воно не тільки знаходиться на одній сторінці, а й, подібно до
повноцінної програми, є інтерактивним. Так інформаційний веб-сайт може
складатися з однієї сторінки, але, по суті, не є SPA. В односторінковій програмі
користувач, перемикаючись між вкладками, залишається на одній сторінці.
Причому довантажуються та оновлюються лише потрібні частини контенту, що
грає на користь швидкодії SPA (рис. 1.3).

Рисунок 1.3 – Принцип дії програми SPA

Приклад односторінкової програми – Gmail. Зверніть увагу – коли ви

перемикаєтеся між списками повідомлень, адреса сторінки не змінюється. Це
відмінна ознака SPA.
Основна мова створення SPA – JavaScript. Невеликий односторінковий
додаток можна зробити за допомогою бібліотеки jQuery. Однак цей варіант не
найоптимальніший для великих проектів. Краще використовувати фреймворки
Vue, React чи Angular.
MPA (Multi Page Application рисунок 1.4) – традиційні багатосторінкові
веб-програми. Коли користувач взаємодіє з веб-сайтом, завантажуються нові
 12

HTTP-сторінки. Тому обмін даними відбувається повільніше, ніж у SPA.

Особливо якщо є проблеми з інтернет-з'єднанням або з хостингом веб сайту.

Рисунок 1.4 – Принцип дії програми MPA

Приклади MPA – інтернет-магазини, такі як Rozetka та Amazon.

PWA (progressive web application рисунок 1.5) – Прогресивний додаток
близько за своїми можливостями, функціями та якістю користувальницького
досвіду до нативних комп'ютерних та мобільних додатків (таблиця 1.2).
Чіткого розподілення між не-PWA та PWA додатком немає. Але можна
виділити ряд показників. Зокрема, PWA має містити проксі-шар (Service
Worker) та Web App маніфест. По суті, браузер виступає віртуальною машиною
для запуску веб додатків, подібно до того, як Windows запускає exe-файли, а
Android – apk.
 13

Рисунок 1.5 – Основний принцип дії PWA

Таблиця 1.2 – Переваги та недоліки різних типів веб-додатків
Вид додатку SPA MPA PWA
Переваги Велика швидкість Можливість Працюють на будь-
сайту досягається використання якому пристрої.
завдяки тому, що готових рішень, Інтерфейс PWA
контент, який не таких як OpenCart та підлаштовується під
змінюється, не WordPress з його ширину екрана
потрібно плагіном комп'ютера або
перезавантажувати. WooCommerce. будь-якого
Кешування. SPA SEO. Пошукові телефону бренду.
ефективніше в двигуни Можна закріпити
роботі з кешем. пристосовані для значок на
індексації домашньому екрані
багатосторінкових телефону.
програм.
Недоліки Користувачі можуть Швидкість На відміну від
відключити взаємодії. MPA мобільних програм,
JavaScript у своїх перезавантажують PWA не
браузерах. У цьому контент, коли представлені в
випадку програма користувач магазинах AppStore
може частково не взаємодіє з ним. та Google Play.
працювати. Складність Споживання енергії
Проблеми із розробки. Потрібно вище, ніж у
 14

безпекою. SPA окремо писати простого веб-сайту.

більш уразливі для фронт та
атак (XSS). повноцінний бек.

Класифікація веб-додатків на основі їх використання:

1. E-commerce системи - Дані системи створюються для того, щоб клієнти
могли замовляти та продавати товари без сторонніх осіб, тільки дві людини в
ланцюжку продажу. Найбільш яскравими видами e-commerce платформ
виступають: маркетплейси, онлайн-каталоги, інтернет-магазини.
2. CRM-системи – Ці системи розробляються для автоматизації відділу
продажу та всіх заявок, що надходять у вашу фірму. За рахунок CRM-системи
ви зможете: бачити та відстежувати всю вирву продажів компанії, призначати
зустрічі та бачити історію взаємодії з усіма клієнтами.
3. ERP-системи - це веб-системи, які включають не тільки автоматизація
відділу продажів, але і всіх ресурсів і підрозділів компанії. Завдяки ERP-
системі можна бачити ефективність кожного підрозділу та ставити відповідні
завдання.
4. Корпоративні портали – це веб-додатки, які виступають у ролі
соціального модуля для вашого холдингу. За рахунок цього веб-програми
можуть вирішуватись такі проблеми як: швидке інформування всіх
співробітників компанії, корпоративне навчання, контроль співробітників (hr-
модуль).
 15

2 ЗАГАЛЬНИЙ РОЗДІЛ

2.1 Visual Studio Code (VScode)

VScode (рис. 2.1) обладает превосходным, стильным и интуитивно

понятным дизайном. Является прямым наследником графического редактора
“Brackets” после того как сама разработка перешла под контроль компании
“Microsoft”.
 16

Рисунок 2.1 – Дизайн VScode

За счет возможности установки различных расширений и очень

большому количеству разнообразных настроек, может быть настроен
индивидуально под каждого пользователя. Так же, за счет тех же расширений и
встроенной консоли возможно использовать VScode с совершенно разными
языками программирования и для совершенно разных целей.
Так же, на левой панели есть несколько вкладок:
1. Дерево файлов. С помощью этой вкладки, можно удобно управлять
файлами не закрывая самого приложения, можно: переименовывать файлы,
удалять, выбирать для редактирования, перемещать файлы по директориям,
сравнивать два файла по содержимому и так же, найти путь к выбранному
файлу.
2. Поиск слова или группы одних и тех же слов с дальнейшей их
заменой.
3. Система управления версиями. У текстового редактора VScode есть
непосредственная связь с системой управления версиями Git. Эта функция дает
возможность удобно синхронизировать свои файлы с аккаунтом без обращения
к консоли. Так же имеет довольно красивый и интуитивно понятные элементы
интерфейса.
4. Запуск и отладка. Эта функция дает возможность пользователю
запускать строки кода в определенной области для облегчения поиска ошибок в
отдельных частях кода.
5. Расширения. Ранее упоминались расширения? Однако сейчас, мы
рассмотрим их более детально. Вкладка расширения, служит для возможности
кастомизации приложения для разных пользователей, а также увеличения
возможностей текстового редактора. Так, Visual Studio Code, может быть как
простым редактором текста, так и мощным инструментом для создания
большого обьема работы и запуска кода в самом редакторе.
 17

Рисунок 2.2 – Расширения и настройка