Monialustainen verkkosovellus Angular 2 -Ohjelmakehystä käyttäen

Abstract

Nykyään on useita erilaisia ohjelmistokehyksiä, ja niiden käyttö eroaa toisistaan aika paljon. Suosituimmat näistä ovat Reactjs ja Angular. Angular-ohjelmistokehyksestä on hiljattain tullut versio 2, jonka mukana tuli paljon uudistuksia. Ennen julkaisua, Angular 2 -testiversiot olivat erittäin vaikeakäyttöisiä.

Opinnäytetyön tarkoituksena oli selvittää, kuinka helppoa on toteuttaa Angular 2 -sovellus joka myöhemmin muutetaan Ionic 2 -sovellukseksi. Näin luotiin sekä nettisivusto että mobiilisovellus samalla koodipohjalla.

Näiden sovellusten ohella tuotettiin palvelinsovellus Node.js-alustalla. Opinnäytetyössä käytettiin Amazon Web Services -pilvipalveluita verkkosovelluksen ja palvelinsovelluksen käyttöönottoon.

Kehittämisen aikana huomattiin, että Angular 2 -ohjelmistokehyksen mukana tulevalla Angular-cli-komentorivityökalulla pystytään luomaan Angular 2 -sovellus helposti ja nopeasti, verrattuna aikaisempiin Angular-versioihin, jolloin ei ollut kyseistä komentorivityökalua. Samalla komentorivityökalulla voitiin myös luoda esimerkiksi lisää komponentteja sovellukseen. Angular-cli-komentorivityökalulla voitiin myös pystyttää testauspalvelin omalle tietokoneelle, jotta pystyttiin testaamaan ja kehittämään sovellusta selaimessa.

Ionic 2 -ohjelmistokehyksen mukana tulee oma Ionic-cli-komentorivityökalu, joka nopeuttaa Ionic 2 -sovelluksen kehitystä. Kehityksessä kuitenkin huomattiin, että siitä puuttuu joitain Angular-cli-työkalun ominaisuuksia. Näin katsottiin paremmaksi tehdä ensin Angular 2 -sovelluksessa jokin ominaisuus ja sitten kopioida se Ionic 2 -sovellukseen.

Opinnäytetyön tarkoituksena oli tehdä sekä Android- että iOs-alustoille sovellukset. Mutta kävi ilmi että iOs-alusta vaatii kehittäjältä oman Mac-tietokoneen sekä iPhone-puhelimen. Ilman näitä iOs-alustalle ei voitu kehittää mobiilisovellusta.

Android-sovellusta kehittäessä huomattiin, että Android Studio käyttää eri SDK-versioita kuin Cordova. Tämä loi ongelmia mobiilisovelluksen testauksessa. Tästä syystä on parempi tehdä sovellus valmiiksi käyttämällä vain selainta, ja vasta lopuksi testata sovellus puhelimessa.

This thesis documents the making of a web application that utilizes the Angular 2 framework, and how such an application could be changed into a mobile application that utilizes the Ionic 2 framework.

The purpose of this thesis was to determine how easy it is to develop an Angular 2 application which will then be migrated into an Ionic 2 application. In this way, we could create both a web application and a mobile application with a single codebase.

Along with these applications, a server application was created using the Node.js platform. For deployment, Amazon’s Web Services were used to host web and server applications.

During development, it was noticed that the Angular 2 framework comes with a command line tool, that can be used to create an Angular 2 application with ease. The same command line tool was also used to generate more components for the application, and to host a local development server, which allowed testing and development of the application within the browser.

It emerged that the Ionic 2 framework had a similar command line tool, however it was not as robust as Angular 2 had. Thus, it was determined that it was better to first develop a feature on Angular 2, and then copy and paste it to Ionic 2.

After the development work had been completed, it was time for testing. It was planned to have two mobile applications, for Android and iOs. However, the documentation revealed that development for iOs requires the developer to own a Mac computer from Apple, and an iPhone. Without these, the iOs application could not be developed.

While making the Android application, the Android Studio apparently had version differences with the Cordova framework. This made testing the Android application very hard. It was concluded that it is better to first develop the application using the browser and only after development is finished, test it on a mobile phone.