Mobiilikäyttöön optimoidun web-sovelluksen kehittäminen Angular-sovelluskehyksellä

Abstract

Opinnäytetyön tarkoituksena oli tutkia, kuinka kehitetään mobiilikäyttöön optimoitu websovellus käyttäen Angular-sovelluskehystä, ja kehittää sellainen toimeksiantajan asiakasyritykselle heidän vaatimuksien mukaisesti. Sovelluksen käyttöliittymä toteutettiin käyttäen Angular Material -ulkoasukomponenttikirjastoa.

Kehitystutkimus aloitettiin etsimällä web-sovelluksen kehittämiseen tarvittavaa teoriatietoa eri verkkolähteistä. Angular-sovelluskehys on jatkuvan kehityksen alla, joten tietoa kerättiin vain tuoreista lähteistä. Löydettyjä tietoja ja Angularin omaa dokumentaatiota käytettiin hyödyksi sovelluksen kehittämisessä.

Tutkimuksen aikana löydettiin web-sovelluksen kehittämiseen tarvittavat tiedot. Sovelluksen toteuttaminen onnistui ja vaatimusten mukainen mobiilikäyttöön optimoitu web-sovellus julkaistiin asiakasyrityksen käyttöön marraskuussa 2018.

Tutkimuksessa todettiin, että mobiilikäyttöön optimoidun käyttöliittymän tulee olla yhdenmukainen, minimaalinen ja yksittäisen näkymän tulee palvella vain yhtä päätarkoitusta. Lisäksi käyttöliittymän kannattaa muistuttaa natiivia mobiilisovellusta, jotta se on käyttäjälle tuttu jo ennestään. Kun käyttöliittymä toteutetaan noudattaen näitä ohjeita, se on käyttäjäystävällinen ja helposti opittava.

Angular-sovelluskehyksen parhaat kehityskäytänteet ovat litteä hakemisto- ja tiedostorakenne, yhdenmukaiset nimeämiskäytänteet sekä yhden sääntö. Yhden säännön mukaan yksittäinen toiminto palvelee vain yhtä tarkoitusta ja yksittäinen tiedosto sisältää vain yhden toiminnon. Angularin parhaat käytänteet eivät välitä sovellusalustasta, mutta niitä kannattaa aina noudattaa parhaan mahdollisen lopputuloksen takaamiseksi.

The purpose of the thesis was to research how to develop a web application optimized for mobile use with Angular framework and develop it to the assigner’s client company according to their requirements. The application’s user interface was implemented using the Angular Material library.

The development research started by searching from different online sources for the theoretical information needed to develop the web application. As the Angular framework is under constant development, information was only collected from recent sources. The found information and Angular’s own documentation were used in the development of the application.

The necessary information to develop the web application was found during the research. The application was developed successfully, and a web application optimized for mobile use was published for the client company’s use in November 2018.

The research discovered that a user interface optimized for mobile use must be uniform, minimal and a single view must serve only one main purpose. Additionally, the user interface should resemble a native mobile application, so it is already familiar to the user. When the user interface is implemented following these guidelines, it is user friendly and easy to learn.

The best development practices of the Angular framework are flat directory and file structure, uniform naming practices and the rule of one. According to the rule of one, a single feature serves only one purpose and a single file contains only one feature. The best practices of Angular do not pay attention to the software platform; however, they should be always followed to guarantee the best possible result.