Verkkosovelluksen kehitys huomioiden käyttö offline-tilassa
Hyttinen, Heli (2021)
Hyttinen, Heli
2021
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2021120122888
https://urn.fi/URN:NBN:fi:amk-2021120122888
Tiivistelmä
Opinnäytetyön tavoitteena oli esitellä työssä toteutettavan sovelluksen kehitykseen käytetyt tekniikat ja kuvata sovelluksen kehitys rakentamalla palvelin- ja selainpuolen sovellukset. Lisäksi selvitettiin, mitä vaaditaan selainsovelluksen toimintaan verkkoyhteydettömässä tilassa. Opinnäytetyön kehittämistavoitteena oli toteuttaa responsiivinen verkkosovellus, joka käyttää REST API -rajapinnan yli tietokantaa ja toimii tarvittaessa ilman verkkoyhteyttä. Käyttöliittymän kehityksessä tuli huomioida QR-koodilukijan käyttö.
Palvelinsovellus kehitettiin ASP.NET Core -alustalle, jonka käyttämä tietokanta toteutettiin SQL Serverille. Relaatiotietokannan kanssa vuorovaikuttamaan valittiin Entity Framework Core -kehys. Selainsovellus rakennettiin Reactilla, jonka käyttöliittymän kehitykseen käytettiin Material-UI-komponentteja. QR-koodilukijaksi valittiin avoimen lähdekoodin sovellus, joka avaa laitteen kameran ja tunnistaa QR-koodin sisällön. Selainsovelluksen toiminta offline-tilassa toteutettiin progressiivisen verkkosovelluksen tekniikoin.
Kehitetyn sovelluksen tarkoituksena on auttaa tarkastusten, kuten teollisuuden laitetarkastusten, teossa. Sovellus esittää tietoja tarkastuksista ja niihin kuuluvista kohteista, lisäksi sillä voidaan suorittaa tarkastusten kirjauksia. Tietyn kohteen kirjausnäkymä voidaan avata lukemalla kohdetta vastaava QR-koodi.
Selainsovelluksen toimintaan verkkoyhteydettömässä tilassa vaaditaan Service Worker -koodi ja selaimen välimuisti. Työssä kehitetty selainsovellus käyttää lisäksi IndexedDB-tietokantarajapintaa ja sen välimuistin käyttöstrategioita ovat Cache-first sekä Network-first. Selainsovellus tallentaa välimuistiin REST API -rajapinnalta aina uusimman tiedon. Kun käyttäjä tekee kirjauksen offline-tilassa, kirjauksen tiedot tallennetaan selaimen paikalliseen tietokantaan. Verkkoyhteyden palautuessa tiedot siirretään selaimen paikallisesta tietokannasta palvelimelle.
Johtopäätöksenä yleisesti alan kannalta voidaan todeta PWA-tekniikoiden kaipaavan lisää kehitystä liittyen tietojen tallennustapaan verkkoyhteydettömässä tilassa. Opinnäytetyön tavoitteet saavutettiin, ja työn tuloksena saatu sovellus vastaa asetettuja vaatimuksia. Kehityskohteita jätettiin jatkokehitykseen ja myös työn rajauksen puolesta lisätoiminnallisuuksien jatkokehittäminen on tarpeen. Toteutukseen käytetyt tekniikat soveltuivat kehitystarpeisiin ja toimivat hyvin yhdessä. The objective of the bachelor's thesis was to develop a responsive web application that would use a database via REST API and be available without a network connection. Furthermore, the web application should have a possibility to use a QR code scanner. The thesis introduced technologies used and described the full stack development. In addition to the description of the development, it examined what was required for offline use of the developed web application.
The web application was created by using ASP.NET Core with React. ASP.NET Core was used as backend and the database was created on SQL Server. Entity Framework Core was chosen for the interaction with the database. Frontend was created with React and its component library called Mate-rial-UI. An open source application opening the camera of the device and identifying the contents of the QR code was chosen as a QR code scanner of the developed application. The offline functionality of the web application was carried out with the technologies of progressive web application. The purpose of the web application was to help inspect different targets, such as industrial equipment. The view of the inspection target would open by scanning the QR code.
The main results of this thesis were the actual web application with offline functionality and description of its development. Service Worker code enabled the web application to run offline using cache API. The caching strategies of the web application were Cache first and Network first. The web application uses the local IndexedDB database for storing data offline and it fetches data from the local database to the server when the network is available.
Based on the results it seemed that the PWA technologies would in general need more development for storing data offline. The thesis and the web application achieved their objectives. The web application would need further development due to the thesis framework and features which were identified during development. The technologies used for development were suitable and operated well together.
Palvelinsovellus kehitettiin ASP.NET Core -alustalle, jonka käyttämä tietokanta toteutettiin SQL Serverille. Relaatiotietokannan kanssa vuorovaikuttamaan valittiin Entity Framework Core -kehys. Selainsovellus rakennettiin Reactilla, jonka käyttöliittymän kehitykseen käytettiin Material-UI-komponentteja. QR-koodilukijaksi valittiin avoimen lähdekoodin sovellus, joka avaa laitteen kameran ja tunnistaa QR-koodin sisällön. Selainsovelluksen toiminta offline-tilassa toteutettiin progressiivisen verkkosovelluksen tekniikoin.
Kehitetyn sovelluksen tarkoituksena on auttaa tarkastusten, kuten teollisuuden laitetarkastusten, teossa. Sovellus esittää tietoja tarkastuksista ja niihin kuuluvista kohteista, lisäksi sillä voidaan suorittaa tarkastusten kirjauksia. Tietyn kohteen kirjausnäkymä voidaan avata lukemalla kohdetta vastaava QR-koodi.
Selainsovelluksen toimintaan verkkoyhteydettömässä tilassa vaaditaan Service Worker -koodi ja selaimen välimuisti. Työssä kehitetty selainsovellus käyttää lisäksi IndexedDB-tietokantarajapintaa ja sen välimuistin käyttöstrategioita ovat Cache-first sekä Network-first. Selainsovellus tallentaa välimuistiin REST API -rajapinnalta aina uusimman tiedon. Kun käyttäjä tekee kirjauksen offline-tilassa, kirjauksen tiedot tallennetaan selaimen paikalliseen tietokantaan. Verkkoyhteyden palautuessa tiedot siirretään selaimen paikallisesta tietokannasta palvelimelle.
Johtopäätöksenä yleisesti alan kannalta voidaan todeta PWA-tekniikoiden kaipaavan lisää kehitystä liittyen tietojen tallennustapaan verkkoyhteydettömässä tilassa. Opinnäytetyön tavoitteet saavutettiin, ja työn tuloksena saatu sovellus vastaa asetettuja vaatimuksia. Kehityskohteita jätettiin jatkokehitykseen ja myös työn rajauksen puolesta lisätoiminnallisuuksien jatkokehittäminen on tarpeen. Toteutukseen käytetyt tekniikat soveltuivat kehitystarpeisiin ja toimivat hyvin yhdessä.
The web application was created by using ASP.NET Core with React. ASP.NET Core was used as backend and the database was created on SQL Server. Entity Framework Core was chosen for the interaction with the database. Frontend was created with React and its component library called Mate-rial-UI. An open source application opening the camera of the device and identifying the contents of the QR code was chosen as a QR code scanner of the developed application. The offline functionality of the web application was carried out with the technologies of progressive web application. The purpose of the web application was to help inspect different targets, such as industrial equipment. The view of the inspection target would open by scanning the QR code.
The main results of this thesis were the actual web application with offline functionality and description of its development. Service Worker code enabled the web application to run offline using cache API. The caching strategies of the web application were Cache first and Network first. The web application uses the local IndexedDB database for storing data offline and it fetches data from the local database to the server when the network is available.
Based on the results it seemed that the PWA technologies would in general need more development for storing data offline. The thesis and the web application achieved their objectives. The web application would need further development due to the thesis framework and features which were identified during development. The technologies used for development were suitable and operated well together.