Angular-ohjelmistokehys osana lapsettomuushoitoklinikan verkkosovelluksen kehittämistä

Abstract

Verkkosovellusten kehittämisen helpottamiseksi on luotu ohjelmistokehyksiä, joista Angular on yksi suosituimmista. Insinöörityön tarkoituksena oli tutkia Angularia. Se on Googlen kehittämä ohjelmistokehys, ja sitä käytetään verkkosovellusten selainpuolen kehittämiseen. Angular on rakenteellinen ja toistuva, minkä takia se soveltuu erityisesti suuriin projekteihin.

Insinöörityössä esiteltiin Angular-sovelluksen rakennetta. Sovellus koostuu moduuleista, jotka sisältävät komponentteja. Komponentit sisältävät suurimman osan toiminnallisuudesta, ja niiden rinnalle kannattaa luoda palveluja tietojen välittämiseen. Projektin ylläpitämistä varten on Angular CLI, joka helpottaa Angularilla kehittämistä ja tekee siitä säännöllisempää.

Insinöörityössä osallistuttiin Aline-verkkosovelluksen kehittämiseen. Aline on lapsettomuushoitoklinikoiden työntekijöiden käyttöön tarkoitettu sovellus, jonka selainpuolen kehittämiseen käytetään Angularia. Insinöörityön tavoitteena oli luoda sovellukseen sperma-analyysisivu käyttäen Angularin sisältämiä ominaisuuksia. Sivulle haluttiin monta välilehteä, joista kuhunkin kirjataan osa sperma-analyysin vaiheista. Välilehtiä varten annettiin tarkat ohjeet, mitä niiden kuuluisi sisältää.

Insinöörityössä saatiin valmiiksi toimiva sperma-analyysisivu. Sivun selainpuoli koostuu useasta Angular-komponentista, joiden sisältämät lomakkeet ja muut toiminnot hyödyntävät Angularin ominaisuuksia. Angular on ollut hyvä työkalu Aline-verkkosovelluksen kehittämiseen, joka on suuri ja rakenteellinen projekti ja sisältää paljon toistuvia elementtejä. Sperma-analyysisivu vastaa annettuja vaatimuksia, ja sitä voidaan käyttää mallina sovelluksen muita osia varten.

In recent years, several software frameworks have been created to make web development more efficient.

The goal of this thesis was to examine the Angular framework. Angular is a frontend framework developed by Google. Development with Angular is structural and repetitive which makes it a suitable tool for big projects.

The thesis demonstrates the structure of an Angular application. The application consists of modules which contain components. Most of the application’s functionality is handled through the components. It is also useful to create services for handling and transferring data. An additional tool recommended is Angular CLI which eases maintaining the application.

To demonstrate the use of Angular in practice, a page was developed for the Aline web application. Aline is an application designed to be used by fertility clinic employees. The frontend of Aline has been developed with Angular. The page created for the application is meant to be used for keeping track of the sperm analysis process. The page is meant to contain multiple tabs, each of which have the contents needed for a phase of the analysis.

The thesis concluded in a finished sperm analysis page. Its frontend consists of multiple Angular components. The forms and other features contained within them make use of Angular’s features. It has been a useful tool for developing the Aline web ap-plication, which is a large and structural project. The sperm analysis page matched the given requirements and can be used as a base for other parts of the application in future development.