Building a Documentation Portal with React

Abstract

This thesis was ordered by Wärtsilä Finland Oy. The task was to create an easily usable single-page application documentation portal. The documentation portal is to be used by suppliers and Wärtsilä’s internal workers. The application was ordered because there are about ninety suppliers and managing multiple SharePoint site collections is time-consuming. One of the most important requirements was that the application frontend should be done with JavaScript module React. The backend should be done with SharePoint and the application hosted on Azure Portal.

The theoretical part of the thesis goes through the fundamentals of the programming languages used in JavaScript module React. What JavaScript modules React and Vue.js 3 are and how their components, functions, and navigation are built. Different ways to plan and execute an application when working alone or in a team and what their benefits are. The last part consists of methods to test the application manually and by using code.

The empirical part begins by going through the planning phase of the application. The next part describes the backend and how SharePoint is used to store data and manage user access. The empirical part describes the frontend and its functions, initialization, navigation, requirements, and components. The last part describes the results of the application.

The results describe how the application meets the requirements set by Wärtsilä. Application usability and guidance, as well as how the testing functions, the code, the backend, and the planning worked out.

Detta examensarbete blev beställt av Wärstilä Finland Oy. Uppgiften var att skapa en lätt användbar ensidig applikation för en dokumentationsportal. Dokumentationsportalen skall användas av leverantörerna och Wärtsiläs interna anställda. Applikationen blev beställd för att det finns ungefär nittio leverantörer och hanteringen av deras SharePoint-webbplatssamlingar tar mycket tid. En av de viktigaste kraven var att applikationens webbläsarsida skall skapas med JavaScript-modulen React. Serversidan skall skapas med SharePoint och applikationen körs på Azure-portalen.

Den teoretiska delen av examensarbetet går igenom grunderna av programmeringsspråken som används i JavaScript modulen React. Den går också igenom JavaScript-modulen React och Vue.js 3 är och hur deras komponenter, funktioner och navigationen är uppbyggda. Att planera och utföra applikationen när man jobbar ensam eller i ett team och fördelarna med det, ingår också i den teoretiska delen. Sista delen går igenom metoderna för att testa applikationen manuellt och med kod.

Den empiriska delen börjar med att gå igenom planeringsdelen av applikationen. Nästa stycke av empiriska delen beskriver hur serversidan använder SharePoint till att lagra data och hantera användarrättigheter. Empiriska delen beskriver webbläsarsidan och dess funktioner, initiering, navigation, krav och komponenter. Sista delen beskriver resultaten av applikationen.

Resultaten beskriver hur applikationen möter kraven givna av Wärtsilä. Denna del berättar även om applikationens användbarhet och instruktioner samt hur testning, funktioner, koden, serversidan och planering lyckades.

Tämän opinnäytetyön tilasi Wärtsilä Finland Oy. Tehtävänä oli luoda helposti käytettävä yksisivuinen sovellus dokumentaatio portaali. Dokumentaatio portaali tulee käytettäväksi maahantuojille sekä Wärtsilän sisäisille työntekijöille. Sovellus tilattiin, koska maahantuojia on noin yhdeksänkymmentä ja heidän SharePoint sivustokokoelmien hallinnointi on erittäin aikaa vievää. Yksi tärkeimmistä vaatimuksista oli, että sovelluksen selainpuoli on tehty JavaScript moduulilla React. Palvelinpuoli kuului tehdä käyttäen SharePoint:ia ja sovellus hostataan käyttäen Azure portaalia.

Opinnäytetyön teoreettisessa osuudessa käydään läpi ohjelmointikielien perusteet, joita käytetään JavaScript moduulissa React. Siinä käydään läpi, mitä JavaScript moduulit React ja Vue.js 3 ovat sekä miten niiden komponentit, toiminnot ja navigaatio on rakennettu. Lisäksi kuvaillaan eri tapoja suunnitella ja toteuttaa sovelluksia, työskenneltäessä yksin tai ryhmässä sekä niiden hyötyjä. Opinnäytetyön viimeinen osa käsittelee menetelmiä testata sovellusta manuaalisesti ryhmän avulla sekä käyttäen ohjelmointi koodia ja JavaScript kirjastoa.

Opinnäytetyön empiirinen osuus alkaa käymällä läpi sovelluksen suunnitteluvaiheen. Seuraavassa osassa kuvaillaan miten palvelinpuoli käyttää SharePoint:ia tiedon tallentamiseen ja käsittelyyn sekä käyttäjien oikeuksien hallinnointia ja jakamista. Opinnäytetyön empiirinen osuus kuvailee selainpuolta sekä sen toimintoja, käyttöönottoa, navigaatiota, edellytyksiä ja komponentteja. Viimeisessä osassa opinnäytetyön empiiristä osuutta kuvaillaan sovelluksen lopputulosta ja miten eri osiot toteutuivat.

Lopputuloksessa kuvaillaan kuinka sovellus vastaa Wärtsilän luomia edellytyksiä. Lisäksi kuvaillaan sovelluksen käytettävyyttä sekä ohjeistusta ja muun muassa toimintojen, ohjelmoinnin, palvelinpuolen ja suunnittelun toteutumista.