Karttakomponentin suunnittelu ja toteutus Wuudis-palveluun

Abstract

Tässä opinnäytetyössä suunnitellaan ja toteutetaan karttakomponentti mikkeliläisen MHG Systems Oy:n Wuudis-palveluun. Opinnäytetyö käsittelee karttakomponentin käyttöliittymän ja sen lähdekoodin toteutusta ja suunnittelua Angular 5 -ohjelmistokehyksen avulla. Myös siirtymistä AngularJs-ohjelmistokehyksestä Angular-ohjelmistokehykseen käsitellään toteutusvaiheessa.

Opinnäytetyö alkaa lähtökohdilla, jossa käydään läpi Wuudis-palvelun tämän hetkinen tilanne sekä uuden Wuudis-palvelun tavoitteet. Opinnäytetyössä käydään läpi käytettävät teknologiat ja käsitteet kuten Angular, Node.js ja Material Design.

Kun lähtökohdat ovat selitetty, aloitetaan suunnittelun ja toteutuksen esittely, alkaen rautalankamallintamisesta. Tässä opinnäytetyö käy lyhyesti läpi rautalankamallintamisen terminä sekä esittelee rautalankamallin uudesta karttakomponentista. Seuraavana aloitetaan opinnäytetyön tekninen toteutus, jossa esittelemme jokaisen karttakomponentin suunnittelun ja toteutuksen. Opinnäytetyö esittelee myös valmiita komponentteja sekä koodillisesti että kuvallisesti.

Opinnäytetyö onnistuu pääsemään tavoitteeseensa ja vastaa toimeksiantajan antamia vaatimusmäärittelyjä. Lopputuloksena uusi karttakomponentti on kehitetty siten, että sen ominaisuudet vastaavat pääpiirteittäin nykyisen karttakomponentin ominaisuuksia. Käymme myös läpi nykyisen karttakomponentin tilanteen sekä eri tapoja toteuttaa komponentteja.

The objective of this thesis was to design and implement a map component using the Angular framework. The component was commissioned by MHG Systems Ltd for their Wuudis forest management service. The thesis investigated planning and creating a map component using OpenLayers and the Angular 5 web application platform. It also touched the subject of migrating from AngularJs to Angular 5.

The thesis began by explaining the premise in which it surveyed the status of Wuudis and the requirements for the next version. In addition, it explained the technologies and concepts to be used in creating the map component. Terms such as the Angular platform, Node.js runtime and the Material Design language were briefly touched upon.

After the groundwork was done the thesis started on explaining the process of design and implementation. Beginning with planning and designing, it explained what a wireframe model was. Then the actual process of implementation was started by going through the design and implementation of every map component. It also shows completed components.

The thesis managed to reach its objective. The new map component managed to meet the requirements set by the client and paved way for further its development. It approximately had the same features as the map component in the current Wuudis service. The thesis also presented different ways to implement the component