ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/6193| Title: | Мобільний інформаційний додаток з відео ігор на фреймворку Flutter |
| Authors: | Дяченко, Петро Васильович Утєнков, В'ячеслав Олегович |
| Keywords: | FLUTTER;FIREBASE;ВІДЕО ІГРИ;ANDROID STUDIO;FIREBASE TEST LAB. |
| Issue Date: | 12-Jun-2024 |
| Abstract: | У наш час, коли відео ігри міцно увійшли в життя людей різного віку і захоплень, мобільний додаток, присвячений цій темі, стає не просто розвагою, а справжнім порталом у світ віртуальних пригод. Було створено інформаційний додаток з відео ігор, який дає актуальну інформацію про ігрову індустрію. В додатку є інформація про відеоігри та новини, яку надають офіційні сайти ігрових компаній. Метою кваліфікаційної роботи бакалавра є проєктування та створення мобільного інформаційного додатку з відео ігор. Об’єкт дослідження: процес розробки та проєктування інформаційно довідкових систем. Предмет дослідження: інформаційні додатки з відео ігор. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6193 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Утєнков В'ячеслав_КНС-2201_2023-2024.pdf Restricted Access | 3.14 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Мобільний інформаційний додаток з відео ігор на фреймворку
Flutter»
Виконав: студент 4 курсу, групи КНC-2201
спеціальності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування»
Утєнков В’ячеслав Олегович
Керівник __________ Дяченко П.В.
(прізвище та ініціали)
Рецензент __________ _____________
(прізвище та ініціали)
Черкаси 2024 року
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2024 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Утєнкову В’ячеславу Олеговичу
(прізвище, ім’я, по батькові)
1. Тема роботи Мобільний інформаційний додаток з відео ігор на фреймворку Flutter
Керівник роботи Дяченко П.В., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «26» лютого 2024 р. №60/04.
2. Строк подання студентом роботи до 10 червня 2024 року
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з переддипломної практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Дослідження предметної області.
4.2. Проєктування та розробка інформаційний додаток з відео ігор на фреймворку Flutter.
4.3. Програмна реалізація.
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 42289-01.
5.2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.
5 .4. Додаток Г. Структура бази даних.
5.5. Презентація у вигляді 25 слайдів.
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 15.01.2024
КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№ з/п Назва етапів кваліфікаційної роботи бакалавра Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу
15.01.2024 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету
до 12.02.2024 Виконано
дослідження.
3 Написання теоретичного розділу кваліфікаційної
до 18.03.2024 Виконано
роботи бакалавра.
4 Написання аналітичного розділу кваліфікаційної
до 01.04.2024 Виконано
роботи бакалавра.
5 Написання практичних розділів й висновків до
до 01.05.2024 Виконано
кваліфікаційної роботи бакалавра.
6 Передзахист кваліфікаційної роботи бакалавра
03.06.2024 Виконано
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА. до 10.06.2024 Виконано
8 Захист кваліфікаційної роботи бакалавра. 12.06.2024 Виконано
Студент _____________________________ Утєнков В. О.
(підпис)
Керівник роботи ____________________________ Дяченко П. В.
(підпис)
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 75 с., 25 рис., 1 таблицю, 10
використаних джерел, 4 додатки.
Актуальність теми. У наш час, коли відео ігри міцно увійшли в життя людей
різного віку і захоплень, мобільний додаток, присвячений цій темі, стає не просто
розвагою, а справжнім порталом у світ віртуальних пригод.
Було створено інформаційний додаток з відео ігор, який дає актуальну
інформацію про ігрову індустрію. В додатку є інформація про відеоігри та новини,
яку надають офіційні сайти ігрових компаній.
Мета роботи і задачі дослідження. Метою кваліфікаційної роботи бакалавра є
проєктування та створення мобільного інформаційного додатку з відео ігор. Для
досягнення поставленої мети в дослідженні необхідно вирішити такі задачі:
− виконати огляд методів та засобів для розробки мобільного додатку;
− провести порівняльний аналіз існуючих аналогів мобільних додатків;
− обрати програмно-технічні засоби для реалізації задачі;
− спроєктувати і створити мобільний додаток;
− провести тестування розробленого мобільного додатку.
Об’єкт дослідження: процес розробки та проєктування інформаційно
довідкових систем.
Предмет дослідження: інформаційні додатки з відео ігор.
Методи дослідження. Для вирішення поставлених завдань були застосовані
наступні методи дослідження:
теоретичний (аналіз літератури з проблеми дослідження);
емпіричний – полягав у спостереженні та налаштуванні додатку;
порівняльний – для здійснення порівнянь існуючих аналогів мобільних
додатків.
Перелік ключових слів: FLUTTER, FIREBASE, ВІДЕО ІГРИ, ANDROID
STUDIO, FIREBASE TEST LAB.
ABSTRACT
Master’s work contains. 75 pages, 25 figures, 1 table, 10 sources used, 4
attachments.
Actuality of theme. Nowadays, when video games have become a part of the lives
of people of all ages and hobbies, a mobile application dedicated to this topic is becoming
not just entertainment, but a real portal to the world of virtual adventures.
A video game information app was created that provides up-to-date information about
the gaming industry. The app contains information about video games and news provided
by the official websites of gaming companies.
Purpose of the work and research objectives: The purpose of the bachelor's thesis
is to design and create a mobile information application for video games. To achieve this
goal, the research needs to solve the following tasks:
− review methods and tools for developing a mobile application;
− conduct a comparative analysis of existing analogues of mobile applications;
− choose software and hardware tools to implement the task;
− design and create a mobile application;
− to test the developed mobile application.
Object of research: The following research methods were used to solve the tasks set:
theoretical (analysis of the literature on the research problem);
empirical - to observe and customize the application;
comparative - to compare existing analogs of mobile applications.
Subject of research: video game information apps.
Research methods. The study of practical developments, analysis of existing video
game information applications were used in the work.
List of key words: FLUTTER, FIREBASE, VIDEO GAMES, ANDROID STUDIO,
FIREBASE TEST LAB.
7
ЗМІСТ
ВСТУП 10
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ 11
1.1 Аналіз сучасного стану мобільних інформаційних додатків з відео ігор 11
1.2 Огляд існуючих аналогів мобільних інформаційних додатоків з відео ігор 13
1.2.1 Аналіз додатку «Fandom» 13
1.2.2 Аналіз додатку «IGN Entertainment» 15
1.2.3 Аналіз додатку «Game Informer» 16
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та постановка 18
завдання
Висновки до розділу 1 20
2 ПРОЄКТУВАННЯ ТА РОЗРОБКА МОБІЛЬНОГО ІНФОРМАЦІЙНОГО 21
ДОДАТКУ З ВІДЕО ІГОР
2.1 Опис функціонального програмного середовища для розробки 21
2.1.1 Опис мови програмування Dart та фреймворку Flutter 23
2.2 Основні принципи розробки мобільних додатків 26
2.3 Архітектура Flutter 26
2.4 Розробка діаграми варіантів використання 29
2.5 Проєктування структури бази даних 30
2.6 Опис процесу проєктування структури мобільного додатку 33
2.7 Проєктування інтерфейсу користувача 35
Висновки до розділу 2 37
3 ПРОГРАМНА РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ МОБІЛЬНОГО ДОДАТКУ 38
3.1 Постановка завдання 38
3.2 Інтерфейс мобільного інформаційного додатоку з відео ігор 39
3.3 Програмна реалізація мобільного додатку «RRG_Games» 40
3.4 Особливості тестування мобільного додатку 42
3.5 Тестування мобільного додатку «RRG_Games» 44
Висновки до розділу 3 49
8
ВИСНОВКИ 50
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 51
Додаток А. Специфікація 482.ЧДТУ. 42289-01 52
Додаток Б. Текст програми 54
Додаток В. Інструкція користувача 70
Додаток Г. Структура бази даних 74
9
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
БД – база даних;
ОС – операційна система;
ПЗ – програмне забезпечення;
ПК – персональний комп’ютер;
UI – інтерфейс користувача (user interface);
API – інтерфейс прикладного програмування (application programming interface);
IDE – інтегроване середовище розробки (integrated development environment);
SDK – набір розробника програмного забезпечення (software development kit);
CPU – центральний процесор (central processing unit).
10
ВСТУП
У наш час відеоігри не просто асоціюються з розвагою, вони стали невід'ємним
феноменом сучасної культури і незмінним супутником дозвілля для людей різного
віку. Занурюючись у захопливі віртуальні світи, гравці відчувають не тільки
задоволення від відпочинку, а й можливість виразити себе, прийняти різні ролі,
дослідити нові горизонти та отримати неповторні емоції.
Сьогоднішні відеоігри стали потужним засобом не тільки розваги, а й навчання.
Багато з них мають освітній потенціал, даючи змогу гравцям розвивати навички
розв'язання проблем, критичного мислення, співпраці та навіть управління часом.
Наприклад, деякі ігри пропонують складні головоломки або стратегічні завдання, які
вимагають аналізу та пошуку оптимальних рішень, тим самим сприяючи розвитку
інтелектуальних здібностей гравців.
У сучасному світі вибір відповідної гри може бути непростим завданням. Сотні
нових ігор випускаються щорічно, і кожна з них обіцяє бути захопливою та
захопливою. Однак, не всі вони відповідають очікуванням гравців. Критерії, за якими
можна оцінити якість гри, охоплюють не тільки графіку і геймплей, а й якість сюжету,
тривалість ігрового процесу, наявність багатокористувацького режиму і багато
іншого.
Тому для цього потрібен мобільний інформаційний застосунок з відео ігор,
розробка якого є метою цього проєкту. Успішна реалізація такого застосунку дасть
змогу значно поліпшити користувацький досвід геймерів, роблячи процес вибору та
гри у відеоігри зручнішим і захопливішим.
Для досягнення поставленої мети в кваліфікаційній бакалаврській роботі
розв’язуються наступні завдання:
− виконати огляд методів та засобів для розробки мобільного додатку;
− провести порівняльний аналіз існуючих аналогів мобільних додатків;
− обрати програмно-технічні засоби для реалізації задачі;
− спроєктувати і створити мобільний додаток;
− провести тестування розробленого мобільного додатку.
11
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Аналіз сучасного стану мобільних інформаційних додатків з відео ігор
Мобільні інформаційні додатки про відеоігри надають користувачам зручний і
швидкий доступ до останніх новин, оглядів, оновлень та іншої актуальної інформації
про світ ігор. Вони стають незамінним інструментом для любителів ігрової індустрії,
забезпечуючи своєчасне інформування про вихід нових ігор, події в ігровому світі,
конкурси та акції.
Однак, незважаючи на значущість і затребуваність таких додатків, їхня
кількість на ринку все ще залишається відносно невеликою. Це створює простір для
нових розробок і пропозицій у цій галузі. Розширення асортименту мобільних
інформаційних застосунків про відеоігри сприятиме подальшому задоволенню
потреб геймерів у доступі до актуальної інформації та розвитку ігрової спільноти.
Розширення асортименту мобільних інформаційних додатків про відеоігри
сприятиме подальшому задоволенню потреб геймерів у доступі до актуальної
інформації та розвитку ігрової спільноти.
З урахуванням динамічного розвитку ігрової індустрії, створення мобільного
інформаційного додатку з відео ігор стає важливим кроком для компаній, що
займаються розробкою ігор, видавців ігрових журналів та інтернет-ресурсів. Такі
додатки дають їм змогу ефективно взаємодіяти з аудиторією, надаючи їй актуальну
та цікаву інформацію.
Однією з основних переваг мобільних додатків є їхня мобільність і доступність.
Користувачі можуть отримувати інформацію про свої улюблені ігри в будь-який час
і в будь-якому місці, що робить такі додатки незамінним інструментом для тих, хто
захоплений ігровою культурою.
Одним із важливих аспектів таких додатків є можливість навчання. Вони
можуть містити в собі рубрики і статті про різні аспекти розробки ігор, історію ігрової
індустрії, технологічні інновації тощо. Це дає змогу користувачам отримати глибше
12
розуміння про те, як створюються ігри, їхній вплив на культуру та суспільство, а
також про поточні тренди та перспективи розвитку індустрії.
Крім того, мобільні інформаційні додатки про відеоігри можуть стимулювати
розвиток креативності та критичного мислення у користувачів. Вони можуть
пропонувати контент, присвячений аналізу ігрових механік, сюжетів, геймдизайну та
інших аспектів ігрового процесу. Це допомагає гравцям розвивати свої аналітичні
здібності та вміння критично оцінювати ігри.
Таким чином, мобільні інформаційні додатки про відеоігри не лише
забезпечують доступ до актуальної інформації та сприяють формуванню ігрового
співтовариства, а й відіграють важливу роль в освіті та розвитку користувачів,
сприяючи розширенню та поглибленню їхніх знань про світ ігор.
Створюваний мобільний інформаційний додаток із відео ігор має забезпечувати
такі можливості:
1. Пошук ігор: Дозволяє користувачам знаходити відеоігри, які їх цікавлять.
2. Новини та оновлення: Дає можливість отримувати свіжі новини про ігрову
індустрію, анонси майбутніх релізів, оновлення та події у світі відео ігор.
3. Трейлери та геймплей: Дає змогу користувачам переглядати трейлери та
геймплейні відеоролики різних ігор, щоб отримати уявлення про графіку, механіку
гри та загальну атмосферу.
4. Календар ігрових подій: Включає календар із датами релізів ігор, проведення
ігрових заходів, турнірів і виставок.
5. Передплатні сервіси та пропозиції: Надає інформацію про різні передплатні
сервіси, як-от Xbox Game Pass, PlayStation Plus, EA Play та інші, даючи змогу
користувачам отримати доступ до великої бібліотеки ігор за фіксовану щомісячну
плату.
6. Список обраного: Дозволяє користувачам зберігати ігри, новини, трейлери та
інші матеріали, які їх цікавлять, до списку обраного для швидкого доступу та
подальшого перегляду. Це допомагає користувачам організувати й упорядкувати
інформацію про свої улюблені ігри та матеріали.
13
1.2 Огляд існуючих аналогів мобільних інформаційних додатоків з відео
ігор
В кваліфікаційній роботі бакалавра проведено огляд існуючих аналогів
мобільних інформаційних додатоків з відео ігор, таких як: «Fandom», «IGN
Entertainment», «Game Informer».
1.2.1 Аналіз додатку «Fandom». «Fandom» - це мобільний застосунок і веб-
платформа, створена для фанатів різних фільмів, телешоу, коміксів, ігор, книг та
інших форм розваг. Це свого роду соціальна мережа, де люди можуть обговорювати,
ділитися своїми думками, фотографіями та відео про свої улюблені твори та
персонажів.
Однією з основних функцій додатка є можливість створення та редагування
вікі-сторінок, присвячених різним аспектам популярної культури. Це дає змогу
користувачам збирати й організовувати інформацію про свої улюблені франшизи,
створювати огляди, аналізувати сюжети та персонажів, а також ділитися своїми
теоріями.
Крім того, «Fandom» пропонує користувачам персоналізовані новини та статті
про найактуальніші події у світі поп-культури, оновлення в іграх, анонси нових
фільмів і багато іншого. Користувачі також можуть брати участь в опитуваннях,
конкурсах і спілкуватися в чатах і форумах з однодумцями.
Додаток «Fandom» (рис. 1.1) став невід'ємною частиною життя багатьох
фанатів, надаючи їм можливість поділитися своєю пристрастю до улюблених світів і
знаходити нових друзів і спільників.
Загалом, «Fandom» являє собою не тільки зручний інструмент для спілкування
та обміну інформацією для фанатів, а й цінний ресурс для тих, хто хоче бути в курсі
останніх новин і подій у світі розваг і поп-культури.
14
Рисунок 1.1 – Додаток «Fandom»
Недоліки додатку «Fandom»:
оскільки контент на «Fandom» створюється користувачами, якість інформації
може бути нерівномірною;
інтерфейс програми не завжди зручний для користувачів;
деякі менш відомі або непопулярні теми можуть бути недостатньо
представлені або зовсім відсутні в додатку.
Переваги додатку «Fandom»:
має доступ до величезної кількості інформації про різні культурні явища, як-
от фільми, телесеріали, ігри, комікси та багато іншого;
статті та матеріали на «Fandom» регулярно оновлюються і доповнюються,
щоб відображати останні події, анонси та зміни у світі культури і розваг;
«Fandom» часто надає функціонал для створення персональних списків,
колекцій або закладок, що дає змогу користувачам зберігати й організовувати
матеріали, які їм цікаві, для подальшого доступу.
15
1.2.2 Аналіз додатку «IGN Entertainment». Другим в роботі проаналізовано
сервіс «IGN Entertainment». Головна сторінка сервісу «IGN Entertainment»
представлена на рис. 1.2.
Рисунок 1.2 – Головна сторінка додатку «IGN Entertainment»
На початку 1990-х років, коли інтернет тільки починав завойовувати свої
позиції, низка ентузіастів із різних галузей, пов'язаних з іграми, об'єднали свої
зусилля для створення платформи, присвяченої відеоіграм і культурі навколо них.
Саме так у 1996 році народився IGN (Imagine Games Network).
Під керівництвом засновника Пірса Снайдера, IGN почав свій шлях як веб-сайт,
що пропонує новини, огляди та поради щодо ігор. Завдяки своїй пристрасті до ігор і
16
бажанню надати спільноті все найсвіжіше й найактуальніше, IGN швидко завоював
популярність серед геймерів.
З плином часу IGN розширив свою діяльність, включивши в себе такі розділи,
як кіно, комікси, телебачення і розважальна індустрія в цілому. Це дало змогу
компанії залучити ще більше аудиторії та стати одним із провідних медіа-ресурсів для
геймерів і шанувальників поп-культури.
Недоліки додатку «IGN Entertainment»:
тимчасові збої, помилки або інші технічні проблеми можуть заважати
нормальній роботі програми;
іноді інформація може бути неактуальною через затримки в оновленні
контенту або відсутність своєчасного оновлення новин та оглядів;
деяким користувачам може не подобатися відсутність можливості активної
взаємодії з іншими користувачами або участю в обговореннях;
деякі користувачі можуть вважати, що функціонал застосунку обмежений,
особливо якщо вони звикли до більш різноманітних можливостей в альтернативних
застосунках.
Переваги додатку «IGN Entertainment»:
IGN часто пропонує ексклюзивні інтерв'ю, статті та матеріали про ігри та
фільми, які недоступні на інших платформах;
користувачі можуть зберігати цікаві статті, відео та огляди для перегляду в
майбутньому, а також створювати списки бажаного контенту для відстеження виходу
нових матеріалів;
додаток надає можливість отримувати оновлення в реальному часі про
останні події у світі ігор та розваг, як-от анонси нових ігор, подій в індустрії та
оновлення у вже наявних іграх.
1.2.3 Аналіз додатку «Game Informer». Game Informer – це американський
журнал про відеоігри та мультимедійні розваги, заснований 1991 року. Компанія
швидко зросла, ставши одним із провідних видань в індустрії. У 2000 році GameStop
придбала Game Informer, що дало змогу журналу розширити свій вплив і охоплення
17
аудиторії. За роки журнал продовжив розвиватися, ставши шанованим джерелом
інформації про відеоігри для мільйонів геймерів.
Головна сторінка додатку «Game Informer» представлена на рис. 1.3.
Рисунок 1.3 – Головна сторінка додатку «Game Informer»
Недоліки додатку «Game Informer»:
користувачі можуть зіткнутися з проблемами, такими як вильоти програми,
зависання або уповільнення роботи, що може погіршити загальний досвід
використання;
18
деякі користувачі можуть зіткнутися з проблемами сумісності програми з
певними пристроями або версіями операційної системи Android, що може призвести
до неполадок під час інсталяції або запуску;
відсутність оновлень або затримки в їх випуску.
Переваги додатку «Game Informer»:
можливість зберігати статті або матеріали для читання в офлайні, що зручно
для користувачів, які перебувають у місцях із поганим інтернет-з'єднанням;
додаток пропонує контент різними мовами і прагне забезпечити локалізацію
для різних регіонів, що робить його доступним для широкої аудиторії по всьому світу.
Користувачі можуть залишати відгуки та коментарі, давати зворотний зв'язок
розробникам і брати участь в обговореннях, що допомагає поліпшити якість контенту
та ігор.
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та
постановка завдання
Проаналізувавши існуючі рішення розглянутих реалізацій, в кваліфікаційній
роботі бакалавра є кілька пропозицій щодо усунення обмежень існуючих додатків:
1. Оптимізація продуктивності: Мобільні пристрої мають обмежені ресурси
порівняно з ПК чи консолями. Тому додатки мають бути максимально оптимізовані
для роботи на мобільних пристроях різних моделей і специфікацій.
2. Поліпшення користувацького інтерфейсу: Інтуїтивний і зручний інтерфейс
відіграє ключову роль у залученні й утриманні користувачів.
3. Оптимізація інтерфейсу для мобільних пристроїв: Розробка інтерфейсу, який
оптимально адаптований для екранів мобільних пристроїв, враховуючи їхню
роздільну здатність і розмір.
У таблиці 1.1 представлено порівняльний аналіз розглянутих мобільних
інформаційних додатоків з відео ігор, а саме: «Fandom», «IGN Entertainment», «Game
Informer».
19
Таблиця 1.1 – Таблиця порівнянь існуючих рішень розглянутих реалізацій
Критерії Назва додатку
порівняння «IGN
«Fandom» «Game Informer»
додатків Entertainment»
Зручність
інтерфейсу 4 3 2
(0-5)
Продуктивність і
оптимізація 4 4 1
(0-5)
Функціональність і
зміст 4 3 2
(0-5)
Як видно із таблиці 1.1, що у якості критеріїв для порівняння було обрано:
зручність інтерфейсу; продуктивність і оптимізація; функціональність і зміст.
Підсумовуючи перегляд та оцінку приведених вище додатків, варто зазначити,
що кожному з них притаманні такі характеристики:
− зрозумілий дизайн;
− продуктивність та оптимізація;
− змістовність додатку.
Проаналізувавши існуючі рішення розглянутих реалізацій, в кваліфікаційній
роботі бакалавра при розробці мобільного ійнормаційного додатку з відео ігор варто
звернути увагу на такі моменти:
− додаток повинен мати зручний, зрозумілий та приємний інтерфейс;
− додаток повинен мати швидкість завантаження серед оцінок (0-5), а саме: 4.
Постановка завдання
1. Аналіз аналогів: Дослідіть уже наявні застосунки, які надають аналогічну
інформацію або вирішують подібні проблеми. Визначте їхні сильні та слабкі сторони,
щоб ви могли створити унікальний і конкурентоспроможний застосунок;
20
2. Проєктування інтерфейсу користувача: Спроєктувати зручний та інтуїтивно
зрозумілий інтерфейс, що дасть змогу користувачам легко знаходити потрібну
інформацію та взаємодіяти з додатком;
3. Розробка мобільного додатку.
Висновки до розділу 1
В даному розділі досліджено предметну область, а саме: мобільні інформаційні
додатоки з відео ігор; основні проблеми створення мобільних інформаційних
додатків.
Виконано порівняльний аналіз існуючих мобільних інформаційних додатків з
відео ігор: «Fandom», «IGN Entertainment», «Game Informer».
Представлено таблицю порівнянь існуючих рішень розглянутих реалізацій та
визначено постановку завдання кваліфікаційної роботи бакалавра.
21
2 ПРОЄКТУВАННЯ ТА РОЗРОБКА МОБІЛЬНОГО ІНФОРМАЦІЙНОГО
ДОДАТКУ З ВІДЕО ІГОР
2.1 Опис функціонального програмного середовища Android Studio
Розглянемо детальніше програмне середовище та його особливості для
розробки мобільного додатку «RRG_Games».
Android Studio – це офіційне інтегроване середовище розробки (IDE) Google для
операційної системи Android, побудоване на основі програмного забезпечення
JetBrains IntelliJ IDEA і розроблене спеціально для розробки під Android. Система
збірки Android – це набір інструментів, які використовуються для створення,
тестування, запуску та пакування ваших додатків [3].
Однією з ключових особливостей Android Studio є його інтуїтивно зрозумілий
користувальницький інтерфейс, який забезпечує зручність у роботі. Він оснащений
безліччю інструментів і функцій, які допомагають спростити процес розробки та
збільшити продуктивність розробника.
Одним із головних компонентів Android Studio є редактор макетів, який дає
змогу створювати користувацькі інтерфейси додатків за допомогою простого у
використанні візуального інтерфейсу. Розробники можуть перетягувати та
налаштовувати різні елементи інтерфейсу, а потім миттєво бачити результати своєї
роботи.
Android Studio також забезпечує інтеграцію з Android SDK, що дає змогу
розробникам легко отримувати доступ до різних API та інструментів, необхідних для
створення повнофункціональних додатків. Крім того, він підтримує різні мови
програмування, включно з Java, Dart і Kotlin, що дає розробникам можливість обирати
мову, яка найбільше підходить для них.
Одним із найкорисніших інструментів Android Studio є інтегрована система
складання та налагодження додатків. Розробники можуть легко налаштовувати
параметри збірки, виконувати налагодження коду в реальному часі та профілювати
22
продуктивність додатків, щоб забезпечити їхню оптимальну роботу. Інструменти для
аналізу батареї показують, яке навантаження лягає на пристрій.
Крім того, Android Studio надає широкий набір додаткових інструментів і
плагінів, які допомагають розробникам прискорити процес розроблення та
розширити функціональність своїх додатків.
Особливості Android Studio [6].
Особливості Android Studio відкривають двері для інновацій і творчості,
забезпечуючи розробників усім необхідним для створення високоякісних і
продуктивних додатків під Android.
Основні собливості:
− інтегроване середовище розробки (IDE): Android Studio являє собою
повнофункціональну IDE, спеціально розроблену для створення додатків під
операційну систему Android;
− графічний редактор макетів: Android Studio має інтегрований редактор
макетів, який дає змогу візуально створювати користувацькі інтерфейси для ваших
додатків. Це спрощує процес створення інтерфейсів без необхідності писати багато
коду вручну;
− підтримка різних пристроїв: Android Studio дає змогу розробляти додатки,
які можуть працювати на широкому спектрі пристроїв, від смартфонів і планшетів до
розумних годинників, телевізорів та інших пристроїв, що працюють на Android;
− інтеграція з Firebase: Firebase - це платформа для розробки мобільних і веб-
додатків від Google. Android Studio забезпечує інтеграцію з Firebase, що спрощує
додавання аналітики, хмарних сервісів, автентифікації та інших функцій у ваші
додатки;
− підтримка мов програмування: Android Studio підтримує різні мови
програмування, включно з Java, Dart і Kotlin;
− автоматичне завершення коду та налагодження: Android Studio надає
функціональність автоматичного завершення коду (code completion), що спрощує
процес написання коду та зменшує кількість помилок.
23
2.1.1 Опис мови програмування Dart та фреймворку Flutter. Dart – мова
програмування, розроблена компанією Google. Її було представлено 2011 року, і вона
здобула широке визнання як мова для створення веб-застосунків, мобільних
застосунків і серверних застосунків. Dart було створено з метою полегшити розробку
великих веб-проєктів, що мають високу продуктивність і масштабованість.
Однією з ключових особливостей Dart є його здатність забезпечувати як швидку
розробку додатків, так і високу продуктивність під час виконання. Для досягнення
цих цілей у Dart вбудовано різні інструменти та можливості, такі як сувора типізація,
компіляція в машинний код, асинхронне програмування та багато іншого. Dart також
має простий та інтуїтивно зрозумілий синтаксис, що спрощує процес написання і
підтримки коду.
Ще одним значущим аспектом Dart є його використання в розробці мобільних
застосунків із використанням фреймворка Flutter. Flutter дає змогу створювати
красиві та високопродуктивні мобільні додатки для платформ Android та iOS з
використанням Dart як основної мови програмування. Цей фреймворк швидко
набирає популярності завдяки своїй ефективності та простоті у використанні.
Загалом, Dart є потужною та універсальною мовою програмування, яка
знаходить застосування в різних галузях розроблення програмного забезпечення,
починаючи від веб-розробки та закінчуючи мобільною і серверною розробкою. Її
ефективність, продуктивність і зручність використання роблять її привабливим
вибором для багатьох розробників по всьому світу.
Flutter – це кросплатформений фреймворк, розроблений компанією Google для
створення високопродуктивних мобільних, веб- і настільних застосунків з
використанням одного і того ж коду. Він надає розробникам інструменти для
створення красивих користувацьких інтерфейсів, а також можливості для роботи з
анімаціями, асинхронними операціями, управлінням станом і багатьма іншими
важливими аспектами додатків.
Flutter заснований на мові програмування Dart, яка також була розроблена
Google. Dart є ефективною і простою у використанні мовою, яка має як статичну, так
і динамічну типізацію, що робить її зручною для розроблення великих додатків.
24
Однією з головних особливостей Flutter є його «гаряче перезавантаження» (hot
reload), що дає змогу розробникам миттєво бачити зміни, внесені до коду, без
необхідності перезапуску всього застосунку. Це значно прискорює процес розробки
та полегшує налагодження.
Flutter також має багату екосистему бібліотек і плагінів, які допомагають
розробникам реалізовувати різноманітні функції та інтегрувати сторонні сервіси у
свої додатки. Завдяки цьому, Flutter дає змогу створювати додатки з високою
продуктивністю та багатим користувацьким інтерфейсом для різних платформ,
включно з Android, iOS, веб і навіть настільними операційними системами.
Незважаючи на те що Flutter це новий фреймворк, він уже отримав широке
визнання у світі розробки мобільних додатків завдяки своїй продуктивності,
гнучкості та простоті використання. Він стає дедалі популярнішим серед розробників
і продовжує привертати увагу нових компаній і проєктів.
На додаток до своїх багатьох можливостей, Flutter також забезпечує високий
ступінь настроюваності та розширюваності. Він пропонує широкий набір віджетів і
бібліотек, які дають змогу розробникам створювати інтерфейси будь-якої складності
та функціональності, починаючи від простих кнопок і текстових полів, і закінчуючи
складними анімаціями та 3D-ефектами.
У рамках розробки на Flutter, StatefulWidget є ключовим елементом, який
підтримує змінний стан. У цьому тексті ми розглянемо основні аспекти життєвого
циклу StatefulWidget, а також методи його керування, щоб ефективно реалізувати
логіку застосунку та забезпечити високу продуктивність інтерфейсу.
Виявлення змін стану цього життєвого циклу може бути необхідним у таких
ситуаціях:
− оновлення даних, коли додаток повертається з фонового стану;
− зупинка виконання будь-якого завдання, коли додаток переходить у фоновий
режим.
Нижче наведено схему (рис. 2.1), яка демонструє поведінку додатка, коли його
встановив користувач.
25
Рисунок 2.1 – Життєвий цикл додатку
1. Відновлений стан (resumed). У цьому стані застосунок видно користувачеві й
активно (на екрані). Можна відловлювати події за допомогою слухача
AppLifycycleListener – onInactive.
2. Неактивний стан (inactive). У цьому стані застосунок може, як і раніше, бути
видимим для користувача (наприклад, у фоновому режимі), але він не отримує дані,
які вводить користувач, і може перейти в стан паузи в будь-який час.
3. Прихований стан (hidden). Усі подання застосунку приховані, або тому, що
застосунок ось-ось буде призупинено (на iOS і Android), або тому, що він згорнутий
або поміщений на робочий стіл, який більше не відображається. Тут працюють
методи onPause (перехід у стан паузи) і onShow (перехід в inactive).
4. Стан паузи (paused). У цьому стані застосунок не видно користувачеві, він не
відповідає на дані, що вводяться користувачем, і працює у фоновому режимі. Методи:
onRestart (перехід у перезапуск) і onDetach (перехід у відокремлений стан).
5. Відокремлений стан (detached). Додаток взагалі не запущено. Можливі
умови: коли екран ініціалізується вперше (у процесі приєднання стану) або
знищується з Navigator.pop() (наприклад, натискання кнопки «Назад» на домашній
сторінці додатка).
26
2.2 Основні принципи розробки мобільних додатків
Основні принципи розробки мобільних додатків включають:
Розуміння потреб користувачів: Перш ніж розпочати розробку, важливо
ретельно вивчити цільову аудиторію застосунку та їхні потреби. Це допоможе
визначити функціональні вимоги і створити застосунок, який буде корисним і
привабливим для користувачів.
Простота та інтуїтивність інтерфейсу: Мобільні додатки мають бути
простими та зручними у використанні. Інтуїтивно зрозумілий інтерфейс дає змогу
користувачам легко розуміти, як користуватися додатком, навіть без інструкцій.
Висока продуктивність і швидке завантаження: Користувачі очікують, що
мобільні додатки працюватимуть швидко і без затримок. Тому важливо оптимізувати
застосунок для високої продуктивності та швидкого завантаження даних.
Врахування особливостей мобільної платформи: Під час розроблення
мобільного застосунку потрібно враховувати специфічні особливості обраної
платформи (iOS, Android тощо).
Безпека: Забезпечення захисту особистих даних користувачів є ключовим
аспектом при створенні мобільних застосунків, що вимагає розробки надійних
механізмів шифрування.
2.3 Архітектура Flutter
У Flutter основний підхід до створення користувацького інтерфейсу полягає в
написанні коду. Замість використання drag-and-drop редактора для розміщення
елементів, ви конструюєте ієрархію віджетів безпосередньо у вашому коді. Це
означає, що потрібно вручну створювати дерево віджетів, що визначають
розташування і зовнішній вигляд елементів інтерфейсу вашої програми. Немає
можливості просто перетягнути і кинути кнопки або текст на екран.
27
Рисунок 2.2 – Особливості роботи Flutter
Flutter надає унікальну можливість створювати додатки, що охоплюють як
Android, так і iOS, за допомогою одного і того ж коду. Це означає, що розробники
можуть працювати над одним додатком, який буде сумісний з обома платформами,
мінімізуючи дублювання зусиль. Завдяки гнучкості Flutter, розробники можуть також
створювати різні користувацькі інтерфейси в різних частинах програми залежно від
потреб, зберігаючи єдність кодової бази.
Віджети у Flutter – це конструкції для побудови користувацького інтерфейсу.
Вони являють собою будівельні блоки, з яких складаються додатки.
Віджети можуть бути як базовими, так і складовими. Базові віджети являють
собою прості елементи користувацького інтерфейсу, як-от текстові поля, кнопки,
зображення тощо. Складові віджети – це комбінації базових віджетів або інших
складових віджетів, що дають змогу створювати складні макети та інтерактивні
елементи.
Flutter надає багату бібліотеку зумовлених віджетів, які можна використовувати
для створення різних типів додатків. Деякі з цих віджетів включають в себе
MaterialApp, Scaffold, Container, Row, Column, ListView, GridView, AppBar і багато
інших (рис. 2.3).
28
Рисунок 2.3 – Приклад віджетів
Flutter також надає механізми для створення власних користувацьких віджетів,
що дає змогу розробникам створювати повторно використовувані компоненти та
покращувати процес розробки.
Процес компіляції Flutter/Dart у нативний додаток починається з написання
коду мовою Dart. Цей код містить інструкції для створення користувацького
інтерфейсу, опрацювання бізнес-логіки та взаємодії із зовнішніми сервісами.
Після написання коду застосунку розробники використовують інструменти
Flutter для його збирання та компіляції. Flutter використовує власний рушій
візуалізації, який можна скомпілювати в нативний код для різних платформ, як-от iOS
і Android.
Для компіляції програми під Android розробники використовують Android
Studio або інструменти командного рядка. Flutter надає інтеграцію з Android Studio,
що спрощує розробку та налагодження додатків під Android. Після складання коду на
Dart у нативний код для Android, можна використовувати Android Studio для
налаштування проєкту, додавання ресурсів та інших завдань, пов'язаних із розробкою
під Android.
29
Після завершення компіляції додатка для Android, розробники можуть
протестувати його на реальних пристроях або в емуляторах, що надаються відповідно
Apple та Google. Після успішного тестування додаток може бути розгорнуто в Google
Play Store для доступу до кінцевих користувачів.
2.4 Розробка діаграми варіантів використання
Діаграми варіантів використання (Use Case Diagrams) є важливим інструментом
моделювання в розробці програмного забезпечення, допомагаючи зрозуміти
взаємодію між системою та її оточенням. Вони описують різні сценарії використання
системи шляхом ідентифікації акторів, які взаємодіють із системою, та основних
функціональних можливостей, які надає система для цих акторів. Діаграми варіантів
використання зазвичай складаються з акторів, варіантів використання та зв'язків між
ними.
Актори представляють ролі або зовнішні сутності, які взаємодіють із системою.
Це можуть бути кінцеві користувачі, інші системи або зовнішні сервіси. Варіанти
використання описують різні дії, які можуть бути виконані акторами в системі. Вони
являють собою сценарії або потоки подій, які описують, як система реагує на дії
акторів.
В кваліфікаційній роботі бакалавра розроблена діаграма Use Case на основі
інформації про користувача додатку, а також можливих варіантів взаємодії з ним.
Варіанти використання мобільного додатку наступні:
− реєстрація;
− авторизація;
− відновлення паролю;
− перегляд списку турнірів по іграм;
− перегляд новин;
− перегляд списку ігор;
− перегляд списку ігрових підписок;
− підтримка додатку.
30
На основі сформованих даних про актора та всі можливі варіанти використання
мобільного додатку, отримали Use Case діаграму (рис. 2.4).
Рисунок 2.4 – Діаграма варіантів використання Use Case
2.5 Проєктування структури бази даних
Проєктування структури бази даних відіграє ключову роль у розробці
програмного забезпечення. Ефективна організація бази даних гарантує оптимальне
збереження, доступність і оновлення інформації. Розглянемо кілька важливих етапів
проєктування бази даних.
Першим етапом є розуміння вимог до даних. Необхідно визначити не тільки які
дані потрібні, а й їхні взаємозв'язки та призначення. Важливо виділити основні
об'єкти, для яких зберігатимуться дані, так звані сутності. Наприклад, при створенні
бази даних для онлайн-магазину такими сутностями можуть бути «користувач»,
«новини», «обране» тощо.
31
У кожної сутності є свої характеристики, що описують їхні особливості.
Наприклад, для сутності «користувач» можуть бути атрибутами «ім'я», «прізвище»,
«електронна пошта» тощо.
Визначення зв'язків між сутностями є ключовим аспектом проєктування бази
даних. Відносини можуть бути один-до-одного, один-до-багатьох або багато-до-
багатьох. Наприклад, в онлайн магзині замовлення можуть мати відношення один-до-
багатьох із продуктами, оскільки одне замовлення може містити безліч продуктів.
Під час розроблення структури бази даних важливо підібрати відповідні типи
даних для кожного атрибута. Наприклад, числові значення можуть бути представлені
типом INTEGER, а текстова інформація - типом VARCHAR. Крім того, можна
встановити обмеження на значення атрибутів, такі як обов'язковість заповнення або
унікальність. На основі визначених сутностей, атрибутів і зв'язків формуються
таблиці бази даних. Кожна таблиця являє собою сутність, а кожен атрибут – стовпець.
Взаємозв'язки між таблицями встановлюються через зовнішні ключі.
Щоб оптимізувати продуктивність запитів до бази даних, можна скористатися
створенням індексів. Індекси прискорюють процес пошуку даних за певними
стовпцями та підвищують швидкість виконання запитів. Крім того, важливо
забезпечити цілісність даних у базі. Це включає в себе встановлення правил перевірки
даних, застосування обмежень цілісності та використання транзакцій для підтримки
консистентності даних.
Після розробки структури бази даних важливо оптимізувати запити, які будуть
виконуватися. Це може включати створення ефективних запитів, застосування
індексів і подань для поліпшення продуктивності.
Firebase – це платформа для розробки мобільних і веб-додатків, що надає
розробникам набір інструментів і сервісів для спрощення процесу створення,
розгортання і монетизації додатків. Вона охоплює такі функції, як автентифікація
користувачів, база даних у реальному часі, хмарне сховище, управління
повідомленнями, аналітика, тестування та багато іншого. Firebase також забезпечує
інтеграцію з іншими продуктами Google, що дає змогу створювати потужні та
масштабовані додатки без необхідності управління інфраструктурою.
32
Realtime Database – це гнучка і масштабована хмарна база даних, що надається
Google. Вона призначена для розробки мобільних і веб-додатків, де потрібне
зберігання і синхронізація даних у реальному часі між різними клієнтами. Firebase
Realtime Database заснована на моделі даних JSON і надає миттєвий доступ до даних
додатка без необхідності розробки власного сервера. Це дає змогу швидко
створювати додатки з функціями обміну даними в реальному часі, такими як чати,
месенджери, мультиплеєрні ігри. За допомогою Realtime Database ви можете легко
синхронізувати дані між клієнтами і сервером, а також виконувати операції читання і
запису з мінімальною затримкою. Вона також пропонує можливості автентифікації
користувачів, автоматичного масштабування і прав доступу, що робить її корисним
інструментом для швидкого розроблення та масштабування додатків, які потребують
оновлення даних у реальному часі.
Authentication – це сервіс автентифікації, що надається Firebase, який забезпечує
просте і безпечне управління автентифікацією користувачів у ваших мобільних і веб-
додатках. Він надає набір готових методів автентифікації, як-от автентифікація за
електронною поштою та паролем, автентифікація через соціальні мережі (наприклад,
Google, Facebook, Twitter), а також автентифікація за допомогою номера телефону.
Firebase Authentication дає змогу вам додавати функції автентифікації у ваш
застосунок лише за кілька рядків коду, забезпечуючи безпечне зберігання облікових
даних користувачів і забезпечуючи захист від атак на злом. Він також інтегрується з
іншими сервісами Firebase, як-от Firebase Realtime Database і Firebase Cloud Functions,
що забезпечує безпечний доступ до даних і автоматичну обробку аутентифікаційних
подій. Firebase Authentication спрощує процес автентифікації користувачів і робить
його зручнішим і безпечнішим для розробників додатків.
Firestore Database – це гнучка, масштабована і повністю керована хмарна база
даних, що надається Google в рамках платформи Firebase. Вона розроблена для
зберігання і синхронізації даних у реальному часі між вашими мобільними, веб- і
серверними додатками. Firestore пропонує багату модель даних, яка дає змогу вам
зберігати і структурувати дані вашого застосунку у вигляді колекцій і документів,
організованих в ієрархічну структуру. Це дає змогу ефективно організовувати дані та
33
швидко виконувати запити до бази даних, навіть під час роботи з великими обсягами
даних і високим навантаженням. Firestore підтримує реальний час синхронізації
даних між клієнтами та сервером, що забезпечує миттєве оновлення даних на всіх
пристроях у разі їхньої зміни. Він також надає можливості автоматичного
масштабування, гарантуючи високу доступність і продуктивність навіть у разі
зростання вашого застосунку. Firestore інтегрується з іншими сервісами Firebase, як-
от Firebase Authentication, Firebase Cloud Functions і Firebase Hosting, що дає змогу вам
швидко розробляти, розгортати й масштабувати свої додатки без необхідності
керування інфраструктурою бази даних.
2.6 Опис процесу проєктування структури мобільного додатку
Для кваліфікаційної роботи бакалавра необхідно не тільки описати предметну
область і вибрати програмно-технічні засоби, а й реалізувати мобільний застосунок
«RRG_Games» і протестувати його. Для повного представлення функціоналу цього
мобільного додатка слід виділити такі процеси:
− процес реєстрації користувача в додатку;
− процес авторизації користувача в додатку;
− процес використання інформації.
Процес реєстрації користувача в застосунку (рис. 2.5) являє собою один із
ключових етапів. Для завершення реєстрації користувач має ввести свої дані, після
чого їх буде перевірено на валідність, і, в разі успішної перевірки, користувача буде
зареєстровано.
Рисунок 2.5 – Діаграма процесу реєстрації користувача
Процес авторизації користувача (рис. 2.6) є не менш важливим етапом у
функціонуванні програми, оскільки кожному користувачеві необхідна особиста
сторінка, на якій він може зберігати свою персональну інформацію.Для авторизації
користувач повинен:
34
− ввести дані;
− перевірити їх валідність;
− підтвердити авторизацію.
Рисунок 2.6 – Діаграма процесу авторизації користувача
Провівши аналіз аналогів додатків, в кваліфікаційній роботі бакалавра було
обрано структуру мобільного додатку, що складається з таких розділів:
− головна сторінка;
− навігація;
− профіль;
− реєстрація;
− авторизація;
− список підписок;
− сторінка з підпискою;
− список відео ігор;
− стрінка з відеогрою;
− список турнірів з відео ігор;
− список обраного;
− екран з обраними іграми;
− сторінка з інформацією турніру.
Структура мобільного додатку «RRG_Games» представлена на рисунку 2.7.
Рисунок 2.7 – Структура мобільного додатку «RRG_Games»
35
2.7 Проєктування інтерфейсу користувача
Під час виконання бакалаврської кваліфікаційної роботи було поставлено
завдання розробити макети сторінок, що сприятимуть зручності, зрозумілості та
легкості у використанні системи для користувачів.
Adobe Photoshop – це потужне програмне забезпечення, яке широко
застосовується для створення графічних макетів, редагування зображень та їх
обробки. Цей інструмент надає величезний набір функцій, які роблять його
незамінним для дизайнерів, фотографів і художників.
Однією з ключових особливостей Adobe Photoshop є його можливість
створювати складні макети з нуля. Користувачі можуть працювати з різними типами
шарів, додавати текст, форми, зображення та застосовувати різні ефекти для
досягнення бажаного візуального ефекту. Завдяки безлічі інструментів для
малювання та редагування, користувачі можуть створювати унікальні графічні
елементи та макети, які відповідають їхнім потребам.
Ще однією з важливих функцій програми є можливість роботи з растровими та
векторними зображеннями. Це дає змогу дизайнерам створювати високоякісні
макети, які можуть бути масштабовані без втрати якості. Крім того, Adobe Photoshop
надає широкий вибір інструментів для кольорокорекції та ретушування, що робить
його незамінним інструментом для фотографів.
Програма також має безліч можливостей для роботи з текстом. Користувачі
можуть створювати текстові блоки, застосовувати до них різні стилі та ефекти, а
також працювати зі шрифтами. Це дає змогу створювати унікальні дизайни з
використанням різноманітних текстових елементів.
Крім того, Adobe Photoshop надає безліч інструментів для роботи з кольорами і
градієнтами, що дає змогу дизайнерам створювати яскраві та привабливі макети.
Завдяки можливості роботи з декількома шарами і масками, користувачі можуть
створювати складні композиції та ефекти, роблячи свої макети більш виразними і
оригінальними.
36
Загалом, дана програма є невід'ємним інструментом для дизайнерів, який надає
широкі можливості для створення високоякісних графічних макетів. Його зручний
інтерфейс і багатофункціональність роблять його незамінним помічником у роботі
над проєктами будь-якої складності.
За допомогою програми «Adobe Photoshop» були розроблені приблизні макети
екранів додатку (рис. 2.8, 2.9).
Рисунок 2.8 – Макет екранів авторизацій та реєстрації
У процесі розроблення дизайну особливу увагу було приділено двом аспектам:
компактності подачі інформації та використанню мінімалістичного інтерфейсу. Ці
фокуси не тільки сприяють зручності в роботі, а й забезпечують комфортне
користування додатком. Прагнення до компактності дає змогу ефективно упакувати
необхідні дані, мінімізуючи надмірність і знижуючи завантаження користувача
інформацією.
37
Рисунок 2.9 – Макет основних екранів додатку
Висновки до розділу 2
У цьому розділі було представлено опис функціонального програмного
середовища для розробки мобільного додатка під назвою «RRG_Games».
Також проведено аналіз основних принципів створення мобільних додатків і
баз даних. Було створено діаграму Use Case на основі інформації про
функціональність мобільного додатка для ігор. Крім того, було розроблено макети
мобільного застосунку «RRG_Games» з використанням програми Adobe Photoshop.
38
3 ПРОГРАМНА РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ МОБІЛЬНОГО ДОДАТКУ
3.1 Постановка завдання
Завданням кваліфікаційної роботи бакалавра є написання мобільного
інформаційного додатоку з відео ігор на фреймворку Flutter.
Програма буде створена з використанням мови програмування Dart та
фреймворку Flutter для покращення навиків програмування за допомогою Android
Studio. Управління здійснюватиметься за допомогою камп’ютерної мишки в
емуляторі.
Меню буде створено з урахуванням різноманітних потреб користувачів. Воно
буде являти собою інтуїтивно зрозумілу навігацію, що надає доступ до різних
розділів. У розділі «News» користувачі можуть ознайомитися з актуальними
новинами з відео ігор. «Esport» надаватиме можливість дізнатися про останні події у
світі кіберспорту, включно з турнірами та результатами. Розділ «Games subscriptions»
інформуватиме про доступні ігрові плани. «Favorite» буде давати змогу користувачам
зберігати та швидко знаходити свої улюблені ігри та розділ «Profile» надаватиме
можливість реєстрації та авторизації.
Для запуску додатку телефон або емулятор повинен мати наступні
характеристики:
− телефон або емулятор з API 26 (Android 8.1);
− постійний доступ до Інтернету;
− Діагональ екрана 6.3";
− 1.5 Гб оперативної пам’яті на телефоні та 8 ГБ для емулятора.
На рисунку 3.1 представлено основні класи, що складають структуру
мобільного додатка. Тут представлено класи, що відповідають за виведення і
зчитування даних із бази даних. Кожен клас акуратно розділений за відповідними
папками, що полегшує розуміння його функціоналу та зв'язків з іншими
компонентами програми.
39
Рисунок 3.1 – Класи програми
3.2 Інтерфейс мобільного інформаційного додатку з відео ігор
У папці «screens» (рис. 3.2) містяться всі стилі екранів, які створюються в
процесі розробки. Увесь користувацький інтерфейс програми формується у файлах із
розширенням «.dart». Для створення інтерфейсу застосовуються віджети, які
відповідають, наприклад, за кнопки, поля введення, зображення та багато іншого.
Рисунок 3.2 – Файли екранів
Якщо відкрити такий файл, то можна його змінювати через програмний код.
40
3.3 Програмна реалізація мобільного додатку «RRG_Games»
У методі singIn() відбувається виклик signInWithEmailAndPassword об'єкта
FirebaseAuth.instance, який намагається автентифікувати користувача,
використовуючи введену адресу електронної пошти та пароль. Firebase SDK надсилає
запит на сервер Firebase з наданими обліковими даними. Сервер Firebase перевіряє
надані облікові дані, намагаючись знайти відповідний обліковий запис користувача і
перевірити, чи збігаються введені адреса електронної пошти та пароль з тими, що
зберігаються на сервері. У разі успішної аутентифікації Firebase повертає токен
доступу, підтверджуючи справжність користувача.
Рисунок 3.3 – Метод singIn()
Для екрану списку ігор використовує пакет cloud_firestore для роботи з Firebase
Firestore.
Визначається клас GamesPage як StatefulWidget, усередині якого
_GamesPageState містить список docIDs для зберігання ідентифікаторів документів.
Метод getDocId() асинхронно отримує їх із колекції «games».
Метод build() створює Scaffold з AppBar і стовпчик для центрованого вмісту.
FutureBuilder використовується для завантаження даних. ListView.builder створює
ListTile для кожного елемента списку docIDs. Для кожного елемента створюється стек
із трьома ListTile: GetImgGames, GetListGames і GetUrlGames (рис. 3.4), що
41
відображають відповідні дані про ігри. У результаті сторінка GamesPage показує
список ігор з їхніми зображеннями, списками та URL-адресами з бази даних.
Рисунок 3.4 – Стек ListTile
Файл subscription_list_page.dart містить список ігрових підписок. Віджет
SubscriptionListPage є StatefulWidget, який містить список підписок, представлених
віджетами ListTile всередині ListView.builder (рис. 3.5). Кожен ListTile відображає
назву підписки і має функцію onTap, яка перенаправляє користувача на відповідний
екран підписки при натисканні.
Список підписок зберігається у вигляді списку об'єктів Subscription (рис. 3.5), де
кожен об'єкт містить назву підписки та відповідний віджет сторінки підписки.
Крім того, для кожного ListTile додано додатковий віджет Icon, який відображає
стрілку вправо для вказівки на можливість переходу до деталей.
42
Рисунок 3.5 – Код віджета ListView.builder та списку об'єктів Subscription
Файл ea_news_page.dart містить список новин компанії Electronic Arts. В основі
списку використовується FutureBuilder, який викликає getDocId() для отримання
ідентифікаторів документів з колекції 'ea'. Потім ListView.builder використовується
для побудови списку новин на основі отриманих ідентифікаторів. Для кожного
елемента списку використовується Stack, у якому відображаються віджети
GetImgNewsEA, GetListNewsEA, GetDescriptionNewsEA і GetLinkEA, що відповідно
представляють зображення новини, список новин, опис новини та посилання на
новину.
Рисунок 3.6 – Стек з відображенням елементів новини
3.4 Особливості тестування мобільного додатку
Тестування мобільного застосунку відіграє ключову роль у процесі його
розробки. Цей етап дає змогу виявити помилки, перевірити функціонал і забезпечити
високу якість застосунку перед його випуском на ринок. Важливість тестування
полягає не тільки у виявленні проблем, а й у впевненості розробників і користувачів
43
у тому, що застосунок працює коректно і безпечно. Під час тестування мобільного
застосунку необхідно звертати увагу на різні особливості.
Платформи: мобільні додатки можуть бути розроблені для різних платформ,
включно з Android та iOS. Для забезпечення якості та сумісності необхідне тестування
застосунку на різних платформах, оскільки можливі проблеми та несумісності,
специфічні для кожної з них.
Різні пристрої: для забезпечення належної роботи мобільних застосунків
необхідно враховувати відмінності в характеристиках пристроїв, як-от роздільна
здатність екрана, версія операційної системи, доступний обсяг пам'яті та інші
параметри.
Адаптивний дизайн: мобільні додатки мають бути здатні адаптуватися до
різних розмірів екранів і орієнтацій. У процесі тестування необхідно переконатися,
що дизайн коректно відображається на різних пристроях.
Тестування різних сценаріїв використання: необхідно переконатися в коректній
роботі основних функцій, а також перевірити різні варіанти взаємодії користувача з
додатком. Крім того, важливо здійснити перевірку правильності обробки даних.
Тестування безпеки: забезпечення безпеки є критичним аспектом для
мобільних додатків. Перевірка повинна включати аналіз вразливостей, захист
особистої інформації користувачів і забезпечення безпечного обміну даними із
зовнішніми сервісами.
Тестування продуктивності: ефективне функціонування застосунку потребує
ретельного тестування, включно з оцінкою швидкості завантаження, відгуку на
запити, а також оптимальне використання ресурсів пристрою та енергії батареї.
Тестування сумісності: включає перевірку того, наскільки мобільні додатки
можуть працювати ефективно з різними версіями операційної системи, апаратними
конфігураціями та іншими додатками, встановленими на пристрої. Воно спрямоване
на забезпечення того, що додаток функціонує коректно на різноманітних пристроях
та операційних системах.
Тестування з'єднання з мережею: Перевірка з'єднання з мережею в тестуванні
мобільних застосунків включає аналіз взаємодії застосунку з різними типами мереж,
44
такими як Wi-Fi або мобільний інтернет. Цей процес включає в себе оцінку
стабільності з'єднання, коректності передачі даних і забезпечення нормального
функціонування програми в різних умовах мережі.
Тестування відповідності вимогам та специфікаціям: тестування спрямоване на
перевірку того, чи відповідає розроблений додаток заздалегідь визначеним вимогам і
специфікаціям. Цей процес охоплює аналіз виконання всіх встановлених вимог,
відповідність функціоналу заданим специфікаціям і впевненість у тому, що
застосунок працює згідно з передбачуваними очікуваннями користувачів.
Тестування резервного копіювання та відновлення даних: дане текстирування
включає перевірку правильності процесу резервного копіювання даних, а також
успішність відновлення даних для забезпечення захисту від втрати інформації та
гарантованого відновлення в разі потреби.
Тестування локалізації та міжнародного використання: тестування включає
перевірку коректності відображення локалізованого тексту, правильності
форматування дат, часу і чисел відповідно до місцевих стандартів. Також у процесі
тестування перевіряється взаємодія з місцевими налаштуваннями та регіональними
особливостями для забезпечення оптимального користувацького досвіду в різних
регіонах.
Тестування апаратної відмови та витривалості: Мобільні додатки мають
демонструвати надійну роботу навіть за можливих збоїв апаратного обладнання та
забезпечувати стабільну продуктивність протягом тривалого часу без
необґрунтованої витрати ресурсів.
3.5 Тестування мобільного додатку «RRG_Games»
В кваліфікаційній роботі бакалавра для тестування мобільного додатку
«RRG_Games» використано сервіс Firebase Test Lab.
Firebase Test Lab – це платформа для автоматизованого тестування мобільних
додатків на пристроях реальних користувачів, що надається Google Firebase. Вона дає
змогу розробникам перевіряти свої додатки на різних пристроях, версіях операційних
45
систем і конфігураціях, що допомагає виявити та виправити проблеми сумісності та
стабільності до випуску додатка в продакшн. Firebase Test Lab інтегрується з
процесом безперервної інтеграції та розгортання, що дає змогу автоматизувати
тестування і поліпшити якість застосунку.
Для перевірки правильної роботи програми було використано ручне тестування
програмного забезпечення. Цей процес охоплює запуск додатка, введення різних
даних і перевірку результатів з метою забезпечення його коректного функціонування
та виявлення можливих помилок і дефектів.
Тестування може бути здійснене різними способами, зокрема:
1. Тестування інтерфейсу користувача: це процес перевірки функціональності
інтерфейсу програми, включно з роботою кнопок та інших елементів.
2. Тестування відмови: перевірка реакції програми на помилки або збої,
наприклад, на неправильні вхідні дані.
3. Функціональне тестування: перевірка відповідності виконання додатком
його функціональності очікуванням. Воно включає тестування різних сценаріїв
взаємодії з програмою та перевірку отриманих результатів.
4. Тестування продуктивності: процес перевірки швидкості та ефективності
роботи застосунку, який містить аналіз обсягу даних, часу відгуку та інших ключових
параметрів.
Під час тестування тестувальник повинен володіти уважністю,
систематичністю і здатністю виявляти потенційні помилки і проблеми. Після
завершення тестування, тестувальник повинен скласти звіт із результатами, у якому
описано виявлені дефекти та їхній поточний статус.
Результати тестування мобільного інформаційного додатка з відео ігор свідчать
про його видатну продуктивність. Додаток успішно пройшов перевірку швидкості
відгуку, обробки великих обсягів даних та інших критично важливих параметрів. Ці
результати підтверджують його здатність забезпечувати швидку та ефективну
роботу, що робить його привабливим вибором для користувачів.
Це сприятливий результат, що підтверджує відповідність функціональним
вимогам мобільного застосунку та його здатність забезпечувати оптимальну
46
продуктивність. Ці результати тестування свідчать про успішну розробку та надійну
роботу програми.
Важливо розуміти, що оцінка продуктивності лише одна зі складових усього
комплексу тестування. Для повноцінної перевірки функціональності та якості
застосунку перед його випуском необхідно проводити й інші види тестів, включно з
функціональним тестуванням, аналізом безпеки та іншими. Кожен із цих аспектів
доповнює оцінку продуктивності, забезпечуючи комплексний підхід до забезпечення
якості продукту.
Завдяки високим результатам продуктивності, як наші розробники, так і
тестувальники можуть бути впевнені в тому, що наш застосунок забезпечує швидку
та ефективну роботу для користувачів, сприяючи поліпшенню загального
користувацького досвіду. На малюнку 3.7 показано меню тестування мобільного
застосунку «RRG_Games» для запуску тестів на сервісі Firebase Test Lab. Тут можна
вибрати тести та пристрої для тестування.
Рисунок 3.7 – Меню тестування мобільного додатку «RRG_Games» сервісом
Firebase Test Lab
Після успішного завершення тестування ми отримали графіки, що
відображають навантаження на процесор і графічний процесор під час роботи
програми (рис. 3.8, 3.9).
Рисунок 3.8 – Результати тестування мобільного додатку «RRG_Games»
47
Рисунок 3.9 – Графіки навантаження
Результати тестування мобільного додатку «RRG_Games» у сервісі Firebase
Test Lab також представлені скріншотами та відео (рис. 3.10).
Рисунок 3.10 – Результати тестування мобільного додатку «RRG_Games»
Тестування додатка з використанням методу Robo в сервісі Firebase Test Lab
зайняло 5 хвилин та 6 секунду (рис. 3.11). Цей результат є дуже хорошим, оскільки в
процесі тестування було протестовано функції «Реєстрація» та «Авторизація». Це
свідчить про те, що додаток має високу швидкість завантаження та оптимізований для
різних версій Android.
Рисунок 3.11 – Час тестування
48
Після проведення тестування сервіс виявив деякі зауваження і запропонував
рекомендації щодо поліпшення роботи додатка (рис. 3.13, 3.14). Для підвищення
ефективності додатка «RRG_Games» рекомендується оновити бібліотеки, що
використовуються, до останніх версій і змінити дизайн назви додатка, обравши колір,
який контрастуватиме з поточним дизайном.
Рисунок 3.13 – Попередження та зауваження в додатку
Рисунок 3.14 – Бібліотеки, які варто змінити
49
Висновки до розділу 3
У цьому розділі була представлена програмна реалізація. Було вирішено
використати мову програмування Dart та Android Studio для покращення навичок
розробки. Керування здійснюватиметься за допомогою миші в емуляторі.
Було описано інтерфейс і програмну реалізацію розробленого мобільного
інформаційного додатка з відео ігор, а також інформацію про тестування цього
додатка.
Проведено тестування розробленого мобільного додатка для інформації про
відеоігри. Виходячи з результатів тестування, можна зробити висновок про те, що
мобільний застосунок розроблено успішно і працює належним чином.
50
ВИСНОВКИ
Мета кваліфікаційної роботи бакалавра досягнута. В ході її виконання
спроєктовано та розроблено мобільний інформаційний додаток з відео ігор на
фреймворку Flutter.
Для досягнення поставленої мети в роботі розв’язувалися наступні завдання:
виконано огляд методів та засобів для розробки мобільного додатку;
проведено порівняльний аналіз існуючих аналогів мобільних додатків;
обрано програмно-технічні засоби для реалізації задачі;
спроєктовано і створити мобільний додаток;
проведено тестування розробленого мобільного додатку.
Мобільний інформаційний додаток з відео ігор «RRG_Games» розроблений на
мові Dart з використанням фреймворка Flutter. Створення та робота з базою даних
відбувалась із застосуванням Firebase. Контроль проєкту та написання коду
здійснювалось у середовищі Android Studio.
Обрані технології повністю відповідають усім функціональним і
нефункціональним вимогам, що висуваються до програмного забезпечення цього
типу.
Розроблений мобільний додаток має зручний, інтуїтивно зрозумілий і
привабливий інтерфейс.
51
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Огляд архітектури Flutter. URL: https://docs.flutter.dev/resources/architectural-
overview (дата звернення: 15.01.2024).
2. Документація по Firebase. URL: https://firebase.google.com/docs (дата звернення:
23.02.2024).
3. Створення мобільних додатів за допомогою Flutter. URL:
https://www.freecodecamp.org/news/how-to-build-mobile-apps-with-flutter/ (дата
звернення: 07.03.2024).
4. Підключення бази даних. URL: https://firebase.google.com/docs/flutter/setup (дата
звернення: 28.04.2024).
5. Програмування для Android. URL: https://metanit.com/dart/flutter (дата
звернення: 04.05.2024).
6. Переваги та особливості Android Studio. URL:
https://qagroup.com.ua/publications/android-studio-perevagy-ta-osoblyvosti/ (дата
звернення: 12.02.2024).
7. Теоретичні відомості фреймворка Flutter. URL:
https://ru.wikipedia.org/wiki/Flutter (дата звернення: 03.05.2024).
8. Програмування під Android на Flutter. URL: https://docs.flutter.dev/codelabs (дата
звернення: 30.03.2024).
9. Тестування android додатків в Firebase Test Lab. URL:
https://firebase.google.com/docs/test-lab (дата звернення: 18.04.2024).
10. Тестування WEB-додатків. URL: https://usersnap.com/blog/web-application-
testing/ (дата звернення: 09.05.2024).
52
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
______________ Юрій ТРИУС
«____»____________2024 р.
МОБІЛЬНИЙ ІНФОРМАЦІЙНИЙ ДОДАТОК З ВІДЕО ІГОР НА
ФРЕЙМВОРКУ FLUTTER
Специфікація
482.ЧДТУ. 42289-01
Листів 2
Розробник ____________________ Утєнков В.О.
Керівник ____________________ Дяченко П.В.
Черкаси – 2024
53
482.ЧДТУ. 42289-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 42289-01 12 01 Текст програми
482.ЧДТУ. 42289-01 34 01 Інструкція користувача
482.ЧДТУ. 42289-01 90 01 Структура бази даних
54
ДОДАТОК Б
МОБІЛЬНИЙ ІНФОРМАЦІЙНИЙ ДОДАТОК З ВІДЕО ІГОР НА
ФРЕЙМВОРКУ FLUTTER
Текст програми
482.ЧДТУ. 42289-01 12 01
Листів 16
Розробник _____________ Утєнков В.О.
Черкаси – 2024
55
Фрагмент програми
Екран новин main_page.dart:
import 'package:flutter/material.dart';
import 'package:program/screens/pages/favorite_page.dart';
import 'package:program/screens/pages/news/bandai_news_page.dart';
import 'package:program/screens/pages/news/blizzard_news_page.dart';
import 'package:program/screens/pages/news/ea_news_page.dart';
import 'package:program/screens/pages/news/hoyoverse_news_page.dart';
import 'package:program/screens/pages/news/other_news_page.dart';
import 'package:program/screens/pages/news/ubisoft_news_page.dart';
import '../../auth/check_login_page.dart';
import 'subscription_list_page.dart';
import 'games_page.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key:key);
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 0,
length: 6,
child: Scaffold(
appBar: AppBar(
backgroundColor: const Color.fromRGBO(23,27,42,1),
title: const Text(
'News',
style: TextStyle(color: Colors.white),
),
iconTheme: const IconThemeData(
color: Colors.white,
),
bottom: TabBar(
isScrollable: true,
tabs: <Widget>[
Tab(
text: 'Electronic Arts',
),
Tab(
text: 'Ubisoft',
),
Tab(
text: 'Blizzard',
),
Tab(
text: 'Bandai Namco',
),
Tab(
text: 'HoYoverse',
),
Tab(
text: 'Other',
),
],
labelStyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
),
56
unselectedLabelColor: Colors.white,
),
),
body: const TabBarView(
children: [
EANewsPage(),
UbisoftNewsPage(),
BlizzardNewsPage(),
BandaiNewsPage(),
HoYoverseNewsPage(),
OtherNewsPage()
]
),
drawer: Drawer(
backgroundColor: const Color.fromRGBO(23,27,42,1),
child: Container(
child: ListView(
children: [
const DrawerHeader(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://media.contentapi.ea.com/content/dam/eacom/common/e
a-library-header-16x9-xl.png.adapt.1920w.png'),
fit: BoxFit.cover,
),
),
child: Center(
child: Text(
'RRG_Games',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 35.0,
),
),
)
),
ListTile(
leading: const Icon(
Icons.library_books_sharp,
color: Colors.white,
),
title: const Text(
'News',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
),
ListTile(
leading: const Icon(
Icons.gamepad,
57
color: Colors.white,
),
title: const Text(
'Games',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => GamesPage(),
),
);
},
),
ListTile(
leading: const Icon(
Icons.business,
color: Colors.white,
),
title: const Text(
'Game subscriptions',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context)=> const SubscriptionListPage()
),
);
},
),
ListTile(
leading: const Icon(
Icons.favorite,
color: Colors.white,
),
title: const Text(
'Favorite',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => FavoritePage()
),
);
},
),
Container(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Container(
child: Column(
58
children: <Widget>[
const Divider(),
ListTile(
leading: const Icon(
Icons.person,
color: Colors.white,
),
title: const Text(
'Profile',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context)=> const CheckLoginPage(),
),
);
},
),
],
),
),
),
),
],
),
)
),
),
);
}
}
Екран підписок subscription_list_page.dart:
import 'package:flutter/material.dart';
import 'package:program/screens/pages/Subscriptions/ea_play_subscriptions_page.dart';
import 'package:program/screens/pages/Subscriptions/xbox_subscriptions_page.dart';
import 'package:program/screens/pages/subscriptions/ps_plus_subscriptions_page.dart';
import 'package:program/screens/pages/subscriptions/ubisoft_plus_subscriptions_page.dart';
import 'main_page.dart';
class SubscriptionListPage extends StatefulWidget {
const SubscriptionListPage({Key? key}) : super(key: key);
@override
_SubscriptionListPageState createState() => _SubscriptionListPageState();
}
class _SubscriptionListPageState extends State<SubscriptionListPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: const Color.fromRGBO(20, 23, 36, 1),
leading: IconButton(
59
color: Colors.white,
icon: const Icon(Icons.arrow_back),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const HomePage(),
),
);
},
),
title: const Text(
'Games subscriptions',
style: TextStyle(color: Colors.white),
),
),
body: ListView.builder(
itemCount: subscriptions.length,
itemBuilder: (context, index) {
final subscription = subscriptions[index];
return Stack(
children: [
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
color: Color.fromRGBO(20, 23, 36, 1),
child: ListTile(
title: Text(
subscription.name,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => subscription.page,
),
);
},
),
),
Positioned(
right: 16.0,
bottom: 16.0,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
padding: EdgeInsets.all(4.0),
child: Icon(
Icons.arrow_circle_right_outlined,
color: Colors.black,
),
),
),
60
],
);
},
),
);
}
}
class Subscription {
final String name;
final Widget page;
const Subscription({required this.name, required this.page});
}
const List<Subscription> subscriptions = [
Subscription(name: 'EA Play', page: WebViewContainerEA()),
Subscription(name: 'PlayStation Plus', page: WebViewContainerPS()),
Subscription(name: 'Xbox Game Pass', page: WebViewContainerXbox()),
Subscription(name: 'Ubisoft Plus', page: WebViewContainerUbisoft()),
];
Екран з іграми games_page.dart:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import '../../read_data/games/get_img_games.dart';
import '../../read_data/games/get_list_games.dart';
import '../../read_data/games/get_url_games.dart';
import 'main_page.dart';
class GamesPage extends StatefulWidget {
const GamesPage({super.key});
@override
State<GamesPage> createState() => _GamesPageState();
}
class _GamesPageState extends State<GamesPage> {
List<String> docIDs = [];
Future getDocId() async {
await FirebaseFirestore.instance.collection('games').get().then(
(snapshot) => snapshot.docs.forEach(
(document) {
print(document.reference);
docIDs.add(document.reference.id);
}
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: const Color.fromRGBO(20, 23, 36, 1),
61
leading: IconButton(
color: Colors.white,
icon: const Icon(Icons.arrow_back),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const HomePage(),
),
);
},
),
title: const Text('Games',
style: TextStyle(color: Colors.white),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: FutureBuilder(
future: getDocId(),
builder: (context, snapshot){
return ListView.builder(
itemCount: docIDs.length,
itemBuilder: (context,index){
return Stack(
children: [
ListTile(
title: GetImgGames(documentId: docIDs[index])
),
Container(
child: Padding(
padding: const EdgeInsets.only(
left: 115,
top: 10,
right: 50,
),
child: ListTile(
title: GetListGames(documentId: docIDs[index]),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(
top: 25,
left: 300,
),
child: ListTile(
title: GetUrlGames(documentId: docIDs[index]),
),
),
),
]
);
}
);
}
62
Екран авторизації login_page.dart:
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import '../pages/main_page.dart';
import 'fogot_pw_page.dart';
class LoginPage extends StatefulWidget {
final VoidCallback showRegisterPage;
const LoginPage({Key? key,required this.showRegisterPage}) : super(key: key);
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
Future singIn() async {
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: _emailController.text.trim(),
password: _passwordController.text.trim(),
);
}
@override
void dispose() {
_emailController.dispose();
_passwordController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromRGBO(20, 23, 36, 1),
appBar: AppBar(
backgroundColor: const Color.fromRGBO(20, 23, 36, 1),
leading: IconButton(
color: Colors.white,
icon: const Icon(Icons.arrow_back),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const HomePage(),
),
);
},
),
title: const Text('Sign in to your Account',
style: TextStyle(color: Colors.white),
),
centerTitle: true,
63
),
body: SafeArea(
child:Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: const Image(
image: NetworkImage('https://media.contentapi.ea.com/content/dam/eacom/common/med
allion-violet.png'),
width: 200,
height: 200,
),
),
const SizedBox(height: 50),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
border: Border.all(
color: Colors.white
),
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: EdgeInsets.only(left: 20.0),
child: TextField(
controller: _emailController,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Email',
),
),
),
),
),
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
border: Border.all(
color: Colors.white
),
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: EdgeInsets.only(left: 20.0),
child: TextField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Password',
),
64
),
),
),
),
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return FogotPasswordPage();
}
)
);
},
child: Text(
'Fogot Password?',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: GestureDetector(
onTap: singIn,
child: Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.circular(12),
),
child: const Center(
child: Text(
'Sign In',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18
),
),
),
),
),
),
const SizedBox(height: 25),
Row(
mainAxisAlignment: MainAxisAlignment.center,
65
children: [
Text(
'Not a member?',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
GestureDetector(
onTap: widget.showRegisterPage,
child: Text(
' Register now',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
),
),
)
Екран реєстрації register_page.dart:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import '../../auth/check_login_page.dart';
class RegisterPage extends StatefulWidget {
final VoidCallback showLoginPage;
const RegisterPage({Key? key,required this.showLoginPage}): super(key: key);
@override
State<RegisterPage> createState() => _RegisterPageState();
}
class _RegisterPageState extends State<RegisterPage> {
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
final _confirmpasswordController = TextEditingController();
final _nickNameController = TextEditingController();
@override
void dispose() {
_emailController.dispose();
_passwordController.dispose();
_confirmpasswordController.dispose();
_nickNameController.dispose();
super.dispose();
}
Future signUp() async {
if (passwordConfirmed()) {
await FirebaseAuth.instance.createUserWithEmailAndPassword(
email: _emailController.text.trim(),
password: _passwordController.text.trim(),
);
66
addUserDetails(
_nickNameController.text.trim(),
_emailController.text.trim(),
);
}
}
Future addUserDetails(String nickName, String email) async {
await FirebaseFirestore.instance.collection('users').add({
'nickname': nickName,
'email': email,
});
}
bool passwordConfirmed(){
if (_passwordController.text.trim() == _confirmpasswordController.text.trim()) {
return true;
} else {
return false;
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromRGBO(20, 23, 36, 1),
appBar: AppBar(
leading: IconButton(
color: Colors.white,
icon: const Icon(Icons.arrow_back),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const CheckLoginPage(),
),
);
},
),
title: const Text(
'Create your Account',
style: TextStyle(color: Colors.white),
),
backgroundColor: const Color.fromRGBO(20, 23, 36, 1),
centerTitle: true,
),
body: SafeArea(
child:Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: const Image(
image: NetworkImage('https://media.contentapi.ea.com/content/dam/eacom/common/medal
lion-violet.png'),
width: 200,
height: 200,
),
),
67
const SizedBox(height: 20),
const Text(
'Register below with you details!',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
const SizedBox(height: 20),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
border: Border.all(
color: Colors.white
),
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: EdgeInsets.only(left: 20.0),
child: TextField(
controller: _emailController,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Email',
),
),
),
),
),
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
border: Border.all(
color: Colors.white
),
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: EdgeInsets.only(left: 20.0),
child: TextField(
controller: _nickNameController,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Nickname',
),
),
),
),
),
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
68
child: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
border: Border.all(
color: Colors.white
),
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: EdgeInsets.only(left: 20.0),
child: TextField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Password',
),
),
),
),
),
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
border: Border.all(
color: Colors.white
),
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: EdgeInsets.only(left: 20.0),
child: TextField(
controller: _confirmpasswordController,
obscureText: true,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Confirm Password',
),
),
),
),
),
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: GestureDetector(
onTap: signUp,
child: Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.circular(12),
),
child: const Center(
child: Text(
69
'Sign Up',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18
),
),
),
),
),
),
const SizedBox(height: 25),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'I am a member!',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
GestureDetector(
onTap: widget.showLoginPage,
child: Text(
' Login now',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
),
),
),
],
)
],
),
),
),
),
);
70
ДОДАТОК В
МОБІЛЬНИЙ ІНФОРМАЦІЙНИЙ ДОДАТОК З ВІДЕО ІГОР НА
ФРЕЙМВОРКУ FLUTTER
ІНСТРУКЦІЯ КОРИСТУВАЧА
482. ЧДТУ. 42289-01 34 01
Листів 4
Розробник _____________ Утєнков В.О.
Черкаси – 2024
71
При вході в додаток користувач бачить головний екран з новинами (рис. В.1):
Рисунок В.1 – Головний екран з новинами
При натисканні на кнопку Read More користувач може дедальніше
ознайомитися з новиною (B.2):
Рисунок В.2 – Екран з детальним описом новини
72
На головному екрані користувач може перейти до меню додатку (рис. В.3), де
він може вибрати один з пунктів навігації:
Рисунок В.3 – Навігаційне меню додатку
Обравши Esports користувач переходить до списку ігор(рис. В.4) по яким
існують кіберспортивні дисципліни та при натисканні можна побачити побробиці
турнірів:
Рисунок В.4 – Список ігор з турнірами
73
Обравши Games користувач переходить до списку ігор (рис. В.5) де може
детальніше про неї дізнатися натиснувши на будь-яку гру із списку:
Рисунок В.5 – Список ігор з інформацією
При переході в Profile відкриється екран в якому потрібно авторизуватися(рис.
В.6), якщо у користувача немає профілю йому торібно натиснути Register Now то
зареєструватися:
Рисунок В.6 – Екрани авторизації та реєстрації
74
ДОДАТОК Г
МОБІЛЬНИЙ ІНФОРМАЦІЙНИЙ ДОДАТОК З ВІДЕО ІГОР НА
ФРЕЙМВОРКУ FLUTTER
Структура бази даних
482. ЧДТУ. 42289-01 90 01
Листів 3
Розробник _____________ Утєнков В.О.
Черкаси – 2024
75
Рисунок Г.1 – Структура бази даних
Рисунок Г.2 – Таблиця новин в базі даних
76
Рисунок Г.3 – Таблиця ігор в базі даних
Рисунок Г.4 – Таблиця користувачів у базі даних