Title Izrada hibridne mobilne aplikacije pomoću Capacitora
Title (english) Developing a hybrid mobile application with Capacitor
Author Bruno Srnec
Mentor Vladimir Stanisavljević (mentor)
Committee member Dean Valdec (predsjednik povjerenstva)
Committee member Vladimir Stanisavljević (član povjerenstva)
Committee member Andrija Bernik (član povjerenstva)
Granter University North (University centre Varaždin) (Department of Multimedia, Design and Application) Koprivnica
Defense date and country 2024-09-27, Croatia
Scientific / art field, discipline and subdiscipline TECHNICAL SCIENCES Graphic Technology Processes of Graphic Reproduction
Abstract Hibridne aplikacije postaju sve popularnije zbog svoje sposobnosti da se jednom razvijena aplikacija koristi na više platformi, čime se smanjuju troškovi i vrijeme razvoja. Ovaj rad se bavi izradom hibridne mobilne aplikacije koristeći Capacitor, moderni alat za razvoj mobilnih aplikacija temeljenih na web tehnologijama. Cilj rada je pružiti uvid u mogućnosti Capacitor-a te demonstrirati njegovu primjenu kroz izradu konkretne aplikacije za prikaz mjerenja kvalitete zraka u Hrvatskoj.
U prvom dijelu rada predstavljena je platforma Capacitor, koja omogućava kreiranje hibridnih mobilnih aplikacija koristeći standardne web tehnologije poput HTML-a, CSS-a i JavaScript-a. Capacitor je posebno osmišljen kako bi olakšao integraciju nativnih funkcionalnosti uređaja, čime se postiže gotovo nativno iskustvo za korisnika. Detaljno su opisane ključne značajke Capacitor-a, kao što su podrška za više platformi, jednostavna integracija s popularnim JavaScript frameworkovima i podrška za nativne plugine. Također, u ovom dijelu rada razmatra se konkurencija Capacitoru, uključujući platforme kao što su Apache Cordova i React Native, te su analizirane njihove prednosti i nedostaci u usporedbi s Capacitorom.
Drugi dio rada fokusira se na praktičnu primjenu Capacitor-a kroz izradu mobilne aplikacije koja prikazuje mjerenja kvalitete zraka u Hrvatskoj. Opisan je proces konfiguracije radnog okruženja, uključujući instalaciju Capacitor-a i potrebnih ovisnosti. Razvoj aplikacije obuhvaća korake od inicijalizacije projekta, dodavanja platformi, do integracije API-ja za prikupljanje podataka o kvaliteti zraka. Posebna pažnja posvećena je dizajnu korisničkog sučelja, optimizaciji performansi te testiranju aplikacije.
Kroz razvoj aplikacije, obrađena su i pitanja vezana uz interakciju s korisnicima te prikaz i vizualizaciju podataka o kvaliteti zraka. Aplikacija omogućava korisnicima da u realnom vremenu prate kvalitetu zraka u različitim dijelovima Hrvatske, što je od velike važnosti za informiranje i osvješćivanje javnosti o ekološkim pitanjima.
Zaključno, rad ističe prednosti korištenja Capacitor-a u razvoju hibridnih aplikacija, uključujući bržu isporuku i bolju iskoristivost resursa, te naglašava važnost dostupnosti ekoloških podataka kroz moderne tehnologije.
Abstract (english) Hybrid applications are becoming increasingly popular due to their ability to be used across multiple platforms with a single development effort, reducing both costs and development time. This paper focuses on the development of a hybrid mobile application using Capacitor, a modern tool for developing mobile applications based on web technologies. The goal of the paper is to provide insight into the capabilities of Capacitor and to demonstrate its application through the development of a specific app for displaying air quality measurements in Croatia.
The first part of the paper introduces the Capacitor platform, which allows for the creation of hybrid mobile applications using standard web technologies such as HTML, CSS, and JavaScript. Capacitor is specifically designed to simplify the integration of native device functionalities, providing users with a nearly native experience. The key features of Capacitor are described in detail, including support for multiple platforms, easy integration with popular JavaScript frameworks, and support for native plugins. Additionally, this part of the paper examines Capacitor's competition, including platforms such as Apache Cordova and React Native, analyzing their advantages and disadvantages compared to Capacitor.
The second part of the paper focuses on the practical application of Capacitor through the development of a mobile application that displays air quality measurements in Croatia. The process of configuring the development environment is described, including the installation of Capacitor and the necessary dependencies. The development of the application covers the steps from project initialization and platform addition to API integration for collecting air quality data. Special attention is given to the design of the user interface, performance optimization, and application testing.
Throughout the development of the application, issues related to user interaction and the display and visualization of air quality data are addressed. The application enables users to monitor air quality in real-time across different regions of Croatia, which is crucial for informing and raising public awareness of environmental issues.
In conclusion, the paper highlights the advantages of using Capacitor in hybrid application development, including faster delivery and better resource utilization, and emphasizes the importance of making environmental data accessible through modern technologies.
Keywords
Ionic
Capacitor
HTML
CSS
JavaScript
JSON
jQuery
Tailwindcss
Ajax
hibridne aplikacije
Keywords (english)
Ionic
Capacitor
HTML
CSS
JavaScript
JSON
jQuery
TailwindCSS
Ajax hybrid applications
Language croatian
URN:NBN urn:nbn:hr:122:710755
Study programme Title: Graphical Studies: Multimedia, Design and Application Study programme type: professional Study level: undergraduate Academic / professional title: prvostupnik/prvostupnica (baccalaureus/baccalaurea) inženjer/inženjerka multimedijske i grafičke tehnologije (prvostupnik/prvostupnica (baccalaureus/baccalaurea) inženjer/inženjerka multimedijske i grafičke tehnologije)
Type of resource Text
File origin Born digital
Access conditions Open access
Terms of use
Created on 2024-10-22 14:51:21