Проєктування та реалізація інтерфейсу мобільного застосунку Calorify з технологією доповненої реальності

Abstract

Мобільний смартфон є невід’ємною частиною сучасного світу, і не лише для зв’язку, але і для можливості застосування його для багатьох інших функцій, починаючи від розваг закінчуючи заходами безпеки. Важливою складовою програмного забезпечення мобільних сматрфонів є мобільні застосунки, з кожним роком на які зростає попит. Одним з напрямків є мобільні застосунки для підтримання, менеджменту, моніторингу та супроводу здорового способу життя. Дана робота присвячена розробленню та реалізації «fronend» частини програмного забезпечення інтерфейсу користувача мобільного застосунку Calorify гібридного типу призначеного для підрахунку калорій. Незважаючи на велику кількість мобільних застосунків для підрахунку калорій, існує необхідність розроблення мобільного застосунку гібридного типу з більш ергономічними дизайнерськими рішеннями, підтвердженим розрахунком калорій на основі аналітичних математичних залежностей, з імплементацією технології доповненої реальності шляхом сканування продуктів. Для реалізації поставленої мети спочатку було проведено прототипування у середовищі шаблонізатора Figma та створено дизайн майбутнього інтерфейсу користувача Calorify. Далі для реалізації інтерфейсів Calorify використано сучасну технологію UI toolkit у зв’язці з UI builder у рушії Unity. UI Builder дозволяє візуально створювати та редагувати ресурси інтерфейсу користувача, такі як документи інтерфейсу користувача (.uxml) і таблиці стилів (.uss), які використовуються з UI Toolkit. В загальному застосунок Calorify складається зі сторінок реєстрації, користувача, головної сторінки та нижнього меню. Сканер розташовано у блоці нижнього меню, це основна функція застосунку Calorify, що становить основну відмінність та новизну розробленого мобільного застосунку. Ця кнопка відкриває можливість фотографування страви для автоматичного визначення її калорійності та поживності. Це швидкий та зручний спосіб отримати інформацію про продукт процес сканування продуктів у Calorify, за допомогою чого відбувається імплементація технології доповненої реальності. Для подальших розробок планується розширити можливість реєстрації доменів електронних адрес, розширити базу даних та наповнення сторінок.

A mobile smartphone is an integral part of the modern world, and not only for communication, but also for the possibility of using it for many other functions, from entertainment to security measures. An important components of mobile smartphone software are mobile applications, the demand for which is growing every year. One of the directions is mobile applications for maintenance, management, monitoring and support of a healthy lifestyle. This work is devoted to the development and implementation of the "fronend" part of the user interface software of the Calorify mobile application of a hybrid type intended for calorie counting. Despite the large number of mobile applications for counting calories, there is a need to develop a mobile application of a hybrid type with more ergonomic design solutions, confirmed by calculating calories based on analytical mathematical dependencies, with the implementation of augmented reality technology by scanning products. To realize the set goal, prototyping was first carried out in the Figma templating environment and the design of the future Calorify user interface was created. Next, modern UI toolkit technology was used in conjunction with the UI builder in the Unity engine to implement Calorify interfaces. UI Builder allows you to visually create and edit user interface resources, such as user interface documents (.uxml) and style sheets (.uss), used with the UI Toolkit. In general, the Calorify application consists of registration, user, main page and bottom menu pages. The scanner is located in the lower menu block, it is the main function of the Calorify application, which is the main difference and novelty of the developed mobile application. This button opens the option of taking a photo of the dish to automatically determine its calorie and nutritional value. This is a quick and convenient way to get product information the process of scanning products in Calorify, which implements augmented reality technology. For further development, it is planned to expand the possibility of registering domains of electronic addresses, to expand the database and filling of pages.