Izrada progresivnih web aplikacija

diplomski rad

• Autor: Anastasija Jezernik
• Mentor: Ivica Nakić (mentor)
• Član povjerenstva: Ivica Nakić (predsjednik povjerenstva)
• Član povjerenstva: Franka Miriam Bruckler (član povjerenstva)
• Član povjerenstva: Ilja Gogić (član povjerenstva)
• Član povjerenstva: Tina Bosner (član povjerenstva)
• Ustanova koja je dodijelila akademski / stručni stupanj: Sveučilište u Zagrebu; Prirodoslovno-matematički fakultet; (Matematički odsjek); Zagreb
• Datum i država obrane: 2020-02-28, Hrvatska
• Znanstveno / umjetničko područje, polje i grana: PRIRODNE ZNANOSTI; Matematika

Sažetak

PWA (Progressive Web Application) je naziv za web aplikaciju koja je prilagođena za korištenje na internet preglednicima i na mobilnim uređajima, neovisno o platformi. PWA su brze i pouzdane, čak i na sporim mrežama ili potpuno offline. Mogućnosti koje aplikacija nudi ipak ovise o uređaju: najnoviji uređaj će moći koristiti sve funkcionalnosti, a stariji uređaj samo dio, odakle i dolazi naziv ``progresivna" aplikacija. Neke od tehnologija koje se mogu koristiti za kreiranje PWA su: React, Preact, Angular, Vue, Ionic. Koristeći React alat Create React App koji u samo nekoliko koraka kreira osnovnu aplikaciju i njenom nadogradnjom razvijamo aplikaciju za seminare na Matematičkom odsjeku Prirodoslovno matematičkog fakulteta. U aplikaciji je omogućena prijava korisnika, dodavanje novih predavanja i članova, generiranje izvještaja i slanje emaila. Prikazujemo osnovne koncepte korištenja React biblioteke na isječcima koda iz aplikacije (renderiranje, routing, state, props, event handling). Kao bazu podataka i sustav autentifikacije koristimo Firebase. Mogućnost instaliranja aplikacije na mobilni uređaj ostvarujemo manifest datotekom, a offline rad i spremanje u priručnu memoriju generiranim service workerom. Na kraju analiziramo aplikaciju alatom Lighthouse koji potvrđuje da je naša aplikacija zaista PWA.

Sažetak (engleski)

PWA (Progressive Web Application) is a name for a web application that can be used on different web browsers and mobile devices, not depending on the platform or the device. PWAs are fast, reliable and work on slow networks and even offline. Functionalities that an app offers do depend on the device: the newest mobile would have an access to all functionalities, while an older device could only use its portion, hence the word “progressive” application. Some of the technologies used in creating a PWA are: React, Preact, Angular, Vue, Ionic. Using a React tool Create React App we can create a basic application in just a few steps, which we then rework to create an application for seminars that are held at the Department of Mathematics of the Faculty of Science. We offer user login, ability to create new lectures, add new members, generate a report and send emails. Using snippets of the app code we explain some main React concepts (rendering, routing, state, props, event handling). We use Firebase tools to handle our database and authentication. App installation is enabled by a manifest file, while offline work and caching is enabled by a service worker. In the end, we use a tool called Lighthouse which confirms that our created app is in fact a PWA.

• Ključne riječi: PWA; Progressive Web Application; web aplikacija; mobilni uređaj
• Ključne riječi (engleski): PWA; Progressive Web Application; web application; mobile device
• Jezik: hrvatski
• URN:NBN: urn:nbn:hr:217:788207
• Studijski program: Naziv: Računarstvo i matematika; Vrsta studija: sveučilišni; Stupanj studija: diplomski; Akademski / stručni naziv: magistar/magistra računarstva i matematike (mag. inf. et math.)
• Vrsta resursa: Tekst
• Način izrade datoteke: Izvorno digitalna
• Prava pristupa: Otvoreni pristup
• Datum i vrijeme pohrane: 2020-09-15 10:36:03