Progressiivinen verkkosovellus

Abstract

Insinöörityön tarkoituksena oli kehittää progressiivisen verkkosovelluksen prototyyppi. Sovelluksen kehitystyö toteutettiin Webpack 5 -työkalulla, Googlen taustapalveluilla ja HTML-, CSS- ja JavaScript-kieltä käyttäen.

Progressiivinen verkkosovellus on natiivisovelluksen kaltainen verkossa toimiva sovellus, joka pystyy hyödyntämään laitteen ominaisuuksia palvelunvälittäjien avulla, toisin kuin perinteinen verkkosovellus. Progressiivinen verkkosovellus voidaan asentaa laitteelle ilman sovelluskauppaa, ja se luo lähes saman käyttökokemuksen kuin natiivisovellus. Palvelunvälittäjä on selaimeen asentuvaa JavaScript-koodia, jolla voidaan taustalla hakea tai tallentaa tietoa palvelimelta tai välimuistista.

Sovelluksen kehityksessä pystytettiin ensin kehitysympäristö Visual Studio Code -ohjelmassa asentamalla Webpack 5 -työkalu ja sen progressiivisen verkkosovelluksen kehittämiseen tarkoitetut liitännäiset. Sovellukseen valittiin Googlen tarjoamat Firebase- ja Cloud-taustapalvelut, joista sovellettiin autentikointia, tietokantaa, tallennustilaa ja Geocoding-ohjelmointirajapintaa. Käyttöliittymän rakentamiseen hyö-dynnettiin Bootstrap-käyttöliittymäkehyksen valmiita komponentteja, joita muokattiin sovelluksen teeman mukaisesti.

Insinöörityön lopputuloksena oli progressiivinen verkkosovellus, jolla kirjautuneet käyttäjät voivat lisätä ruoka-arvosteluja käyttäjien luettavaksi. Ruoka-arvostelut ovat blogikirjoituksen tyyppisiä yksinkertaisia kuvalla varustettuja kortteja, josta käyttäjä näkee ravintolan, annoksen ja kaupungin nimen, annoksen arvosanan ja kuvauksen sekä blogikirjoituksen päivämäärän ja kellonajan.

Progressiivista verkkosovellusta voidaan soveltaa isoissa ja pienissä projekteissa, ja sen kehittäminen tulee halvemmaksi verrattuna natiivisovelluskehittämiseen. Se tarjoaa useita teknologioita, joiden avulla voidaan kehittää käyttäjäkokemusta parantavia toiminnallisuuksia, joita ei perinteisillä verkkoteknologioilla voida toteuttaa samalla tavalla tai ollenkaan.

The purpose of the final year project was to develop a progressive web application prototype. The development of the application was implemented using the Webpack 5 module bundler, Google backend services and HTML, CSS and JavaScript.

A progressive web application is similar to a native application, which is able to utilize the device's features with the help of service workers, unlike a traditional web application. A progressive web application can be installed on a device without an app store, and it creates almost the same user experience as a native application. The service worker is JavaScript code installed in the browser, which can be used to retrieve or save information from the server or cache in the background.

In the development of the application, the development environment was first set up in Visual Studio Code by installing the Webpack 5 module bundler and its plugins intended for the development of a progressive web application. The Firebase and Cloud backend services offered by Google were chosen for the application, from which authentication, database, storage and the Geocoding application programming interface were applied. To build the user interface, the ready-made components of the Bootstrap framework were used, and they were modified according to the theme of the application.

In the final year project, a progressive web application was developed where registered users can add food reviews for users to read. The food reviews are simple cards with a picture in the style of a blog post, where the user can see the name of the restaurant, the dish, and the city, the rating and description of the dish, as well as the date and time of the blog post.

The project shows that a progressive web application can be applied in large and small projects and its development becomes cheaper compared to native application development. It offers several technologies that can be used to develop functionalities that improve the user experience, which cannot be implemented in the same way or at all with traditional network technologies.