ASP.NET Web API 2:ta hyödyntävä Angular 4 -sovellus

Transkriptio

1 Atte Aspiola ASP.NET Web API 2:ta hyödyntävä Angular 4 -sovellus Metropolia Ammattikorkeakoulu Insinööri (AMK) Tietotekniikan koulutusohjelma Insinöörityö

2 Tiivistelmä Tekijä(t) Otsikko Sivumäärä Aika Atte Aspiola ASP.NET Web API 2:ta hyödyntävä Angular 4 -sovellus 40 sivua + 2 liitettä Tutkinto Insinööri (AMK) Koulutusohjelma Tietotekniikka Suuntautumisvaihtoehto Ohjelmistotekniikka Ohjaajat Lehtori Simo Silander Osastopäällikkö Mikko Ristikangas Insinöörityön tavoitteena oli päivittää VäestöWeb-niminen sovellus käyttämään uusimpia web-ohjelmoinnissa käytettäviä tekniikoita: Angular 4:ää ja ASP.NET Web API 2:ta. Sovelluksen tarkoitus on tarjota kunnille dataa ikäjakauman, väestönmuutoksen sekä kuntaan ja kunnasta muuttaneiden muodossa. Sovellus myytiin ja otettiin käyttöön kahdeksassa kunnassa. Sovellus jakautuu kahteen osaan: käyttöliittymään ja back-endiin. Käyttöliittymä toteutettiin Angular-sovelluskehyksellä ja ohjelmoitiin käyttäen TypeScript-, HTML- ja CSS-ohjelmointikieliä. Sovelluksen back-end ohjelmoitiin C#-ohjelmointikielellä ASP.NET Framework -sovelluskehystä käyttäen. Kirjallinen osuus jakautuu kahteen osaan: Angular 4- ja Web API -osuuksiin. Angular 4 - osuudessa keskitytään Angularin ominaisuuksiin ja niiden esittelyyn. Web API -osuudessa esitellään sovelluksessa käytettyjä ohjelmointiratkaisuja. Avainsanat Angular 4, C#, Web API, ASP.NET, TypeScript

3 Abstract Author(s) Title Number of Pages Date Atte Aspiola Angular 4 Application with ASP.NET Web API 2 40 pages + 2 appendices September 13, 2017 Degree Bachelor of Engineering Degree Programme Information Technology Specialisation option Software Engineering Instructors Simo Silander, Senior Lecturer Mikko Ristikangas, Head of Department The goal of this bachelor s thesis was to update an application called VäestöWeb using the latest technologies, Angular 4 and ASP.NET Web API 2. The application offers data to municipalities in form of age distribution, population change and about people who have moved into or out of the municipality. The application was sold to and introduced to eight municipalities. The application is divided into two parts: front-end and back-end. The front-end of the application was programmed using Angular framework and TypeScript-, HTML- and CSS programming languages. The back-end of the application was programmed using C# programming language and ASP.NET Framework. The written part of the bachelor s thesis is divided into two parts: Angular 4 and Web API. Angular 4 part focuses on the features of the framework using examples. The Web API part is all about the solutions used in this particular application. Keywords Angular 4, C#, Web API, ASP.NET, TypeScript

4 Sisällys Lyhenteet 1 Johdanto 1 2 Sovelluksen käyttötarkoitus 1 3 Tärkeimmät käytetyt tekniikat ja sovelluksen arkkitehtuuri Angular ASP.NET SpatialWeb Sovelluksen arkkitehtuuri 3 4 Sovelluksen käyttöliittymä Komponentit Näkymät Ikäjakauma-näkymä Kuntaan muuttaneet -näkymä Väestönmuutos-näkymä Palvelut 4 5 Web API Ohjaimet DTO:t Apuluokat 4 6 Yhteenveto 4 Lähteet 6 Liitteet Liite 1. VäestöWeb dokumentaatio Liite 2. Koodiesimerkki - app.module.ts

5 Lyhenteet API Application programming interface. Sovelluksen osa, jonka tehtävänä on vastaanottaa HTTP -pyyntöjä ja vastata niihin. CRUD Create, read, update, delete. Tiedonhallinnan perusfunktiot. DTO Data transfer object. Olio, jonka avulla siirretään dataa komponenttien välillä. HTTP Hypertext transfer protocol. Asiakas-palvelin-protokolla, joka koostuu pyynnöistä ja vastauksista. Datan siirto internetissä perustuu JSON JavaScript object notation. Tiedostotyyppi, jonka avulla voidaan siirtää olioita tekstinä avain-arvo muodossa. LINQ Language integrated query. C# -ohjelmointikieleen sisäänrakennettu komponentti, jonka avulla voi tehdä tietokantakyselyjä. SPA Single-page application. Web-sovellus, jossa ei liikuta sivulta toiselle, vaan sivulla olevat komponentit ja niiden sisältö muuttuvat käyttäjän valintojen perusteella. SQL Structured query language. Ohjelmointikieli, joka on suunniteltu datan hallintaan relaatiotietokannoissa.

6 1 1 Johdanto Tämän insinöörityön päämääränä oli päivittää Siton VäestöWeb-sovellus käyttämään uusia tekniikoita, Angular 4:ää ja ASP.NET Web API 2:ta. Vanhassa sovelluksessa käytettiin Visual Basic-, Javascript- ja HTML-ohjelmointikieliä, joten sovelluksen kehittäminen aloitettiin ns. puhtaalta pöydältä. Projekti toteutettiin kolmen hengen ryhmässä, jossa tehtäväni oli Web API:n toteutus ja osittain Angular-projektin toteutus. Sovellus oli ryhmän ensimmäinen edellä mainituilla tekniikoilla toteutettu sovellus. Raportin Angular-osuudessa keskitytään ikäjakauma-näkymään ja sen eri komponenttien välisiin vuorovaikutuksiin sekä Angularin ominaisuuksien esittelyyn. Web API -osuudessa esitellään projektissa käytettyjä ohjemointiratkaisuja. En osallistunut sovelluksen ulkoasun toteutukseen, joten tässä raportissa ei käsitellä sovelluksen tyyliin tai ulkoasun rakenteeseen liittyviä seikkoja. Sovellus valmistui ja toimitettiin asiakkaille ajallaan huolimatta vaikeuksista sovelluksen ydintekniikoihin liittyen. Esimerkiksi kehys, jonka avulla tietokantakyselyt piti suorittaa, jouduttiin korvaamaan toisella ratkaisulla, mikä aiheutti useamman henkilötyöviikon työn menettämisen. Sovelluksen lisäksi insinöörityön tuloksena syntyi liitteen 1 dokumentaatio, joka sisältää sovelluksen asennusohjeen, sekä tietoa admin-paneelin asetuksista ja sovelluksen eri raporteista. 2 Sovelluksen käyttötarkoitus VäestöWeb-sovellus on kunnille suunnattu palvelu, jonka avulla kunta voi suunnitella esimerkiksi, mille alueelle olisi suurin tarve rakentaa uusi päiväkoti tai miten uudet koululaiset jaetaan kouluihin. Sovelluksessa on kolme näkymää: ikäjakauma, kuntaan muuttaneet ja väestönmuutos. Ikäjakauma-näkymässä käyttäjä voi luoda ikäjakaumaraportin kartalta valitsemaltaan alueelta tai listalta valitsemiltaan kaupunginosilta. Ikäjakauma tulostetaan ikävuosittain tai syntymävuosittain äidinkielen ja haluttaessa myös sukupuolen perusteella taulukon 1

7 2 mukaisesti. Raportissa olevat ihmiset voidaan piirtää kartalle asuinrakennuksen perusteella. Taulukko 1. Esimerkki ikäjakaumasta ikävuosittain, äidinkielen perusteella (luvut esimerkkilukuja) Ikäryhmä Suomi Ruotsi Muut Yhteensä 14 vuotiaat vuotiaat Yhteensä Kuntaan muuttaneet -näkymässä voidaan luoda raportti, josta nähdään valittujen päivämäärien välillä kaupunginosittain kuntaan muuttaneiden ihmisten lukumäärä. Käyttäjä voi halutessaan myös tulostaa samankaltaisen raportin kunnasta muuttaneista. Esimerkki tulostetusta raportista on taulukossa 2. Raportista voidaan muodostaa myös graafinen kuva kartalle, jossa kaupunginosat, joihin muutto on ollut vilkkaampaa, värjätään tummemmalla kuin kaupunginosat, joihin on muuttanut vähemmän ihmisiä. Näitä kuvia kutsutaan jatkossa teemakartoiksi. Taulukko 2. Esimerkki kuntaan muuttaneet-näkymän raportista kaupunginosittain (luvut esimerkkilukuja) Kaupunginosa Kuntaan muuttaneet Lauttasaari 64 Kulosaari 26 Yhteensä 90 Väestönmuutos-näkymässä tulostettavasta raportista nähdään vuosittain ja kaupunginosittain kuntaan muuttaneet, kunnasta muuttaneet, kuolleet ja syntyneet ihmiset. Esimerkki tulosteesta on taulukossa 3. Myös tässä näkymässä voidaan muodostaa teemakartta.

8 3 Taulukko 3. Esimerkki väestönmuutos-näkymän raportista. Tarkasteltavaksi kaupunginosaksi on valittu Kulosaari ja tiedot on ryhmitelty vuosittain (luvut esimerkkilukuja). Kulosaari Kuntaan muuttaneet Kunnasta muuttaneet Kuolleet Syntyneet Jokaisesta näkymästä on mahdollista viedä tulokset Exceliin ja muuttaa tulokset tulostusystävälliseen muotoon. 3 Tärkeimmät käytetyt tekniikat ja sovelluksen arkkitehtuuri Luku 3 poistettu luottamuksellisena toimeksiantajan pyynnöstä. 3.1 Angular ASP.NET 3.3 SpatialWeb 3.4 Sovelluksen arkkitehtuuri 4 Sovelluksen käyttöliittymä Luku 4 poistettu luottamuksellisena toimeksiantajan pyynnöstä.

9 4 4.1 Komponentit 4.2 Näkymät Ikäjakauma-näkymä Kuntaan muuttaneet -näkymä Väestönmuutos-näkymä 4.3 Palvelut 5 Web API Luku 5 poistettu luottamuksellisena toimeksiantajan pyynnöstä. 5.1 Ohjaimet 5.2 DTO:t 5.3 Apuluokat 6 Yhteenveto Insinöörityön Angular-osuudessa keskityttiin Angularin eri komponenttien välisiin vuorovaikutuksiin ja Angularin ominaisuuksien esittelyyn. Web API -osuudessa esiteltiin projektissa käytettyjä ohjemointiratkaisuja. Sovelluksen kehittämiseen kului aikaa noin kolme kuukautta, mikä vastasi Siton odotuksia. Suurimmat viivästykset sovelluskehityksessä johtuivat siitä, että tehtävän määrittely oli vajavainen. Olen todella tyytyväinen siihen, että saimme sovelluksen valmiiksi ja asennettua asiakkaille ajoissa, huolimatta kohtaamistamme vaikeuksista.

10 5 Projektissa jäi toteuttamatta ikäjakaumaan liittyvä yksityiskohtaisempi Excel-tiedosto. Muutoin onnistuimme toteuttamaan kaikki asiakkaiden toivomat uudet ominaisuudet, sekä joitain ominaisuuksia, joita ei oltu erikseen toivottu, mutta ne toteutettiin, koska niiden pois jättäminen olisi vienyt enemmän aikaa kuin niiden toteuttaminen. Opin projektin aikana, kuinka tärkeää on saada asiakkaalta tarkka määrittely sovelluksen toiminnasta. Aika moni tehtävä kesti huomattavasti odotettua pidempään johtuen joko asiakkaan tai työnantajan puutteellisesta määrittelystä. Lisäksi opin, että on parempi kysyä kokeneemmilta työntekijöiltä apua kuin yrittää tuskailla tehtävän kanssa. Projektissa oli ongelma, jota yritin ratkaista useamman päivän ajan. Lopulta kysyin apua ongelmaan, ja se ratkesi viidessä minuutissa. Kehityin projektin aikana ohjelmoijana ja ennen kaikkea sosiaalisessa kanssakäymisessä. En ollut ennen projektia ohjelmoinut C#-kielellä, joten on selvää, että opin ainakin jotain uutta. VäestöWeb oli ryhmämme ensimmäinen tällä kokoonpanolla kehitetty sovellus. Löysin oman paikkani ryhmässä ja uskon, että seuraava projekti tulee onnistumaan vielä paremmin, koska olemme oppineet tuntemaan toisemme paremmin. Insinöörityö oli kokonaisuudessaan positiivinen ja opettavainen kokemus.

11 6 Lähteet 1 Fain, Y., Moiseev A Angular 2 Development with TypeScript. Shelter Island: Manning Publications Co. 2 Angular 2 tutorial Services Verkkodokumentti. Google. < Luettu Angular 2 documentation NgModules Verkkodokumentti. Google. < Luettu Ngx-translate core documentation Verkkodokumentti. NGX-Translate. < Luettu Angular 2 documentation Routing & Navigation Verkkodokumentti. Google. < Luettu Pascal Precht Two-way data binding in Angular. Verkkodokumentti. Thoughtram. < Luettu Angular 2 documentation User Input Verkkodokumentti. Google. < Luettu Angular 2 documentation NgIf Verkkodokumentti. Google. < Luettu Angular 2 documentation NgForOf Verkkodokumentti. Google. < Luettu Angular 2 documentation HTTP Verkkodokumentti. Google. < Luettu What is an SRID Verkkodokumentti. ESRI. < Luettu Entity Framework Provider Support for Spatial Types Verkkodokumentti. Microsoft. < Luettu How and Why to Use Parameterized Queries Verkkodokumentti. Microsoft. < Luettu

12 Liitteet Liite 1. VäestöWeb dokumentaatio Liite 2. Koodiesimerkki - app.module.ts Liitteet poistettu luottamuksellisena toimeksiantajan pyynnöstä.