Tehdään minimaalinen PWA-sovellus puhtaalla Javascriptillä,
HTML:llä ja CSS:llä (ilman mitään sovelluskehyksiä/kirjastoja) tämän tutoriaalin avulla. Kirjoita ylös
erilliseen tekstidokumenttiin kaikki vaiheet, joissa sovellukseen
lisätään ne osat, jotka tekevät siitä PWA-sovelluksen. Kokeile
sovellusta esim. Live serverin avulla. Kokeile sovelluksen
asentamista koneesi työpöydälle selaimen oikeasta yläkulmasta.
Huomaa että Lighthouse-työkalusta on poistettu kesällä 2024
PWA-auditointi, joten sitä ei tarvitse kokeilla. Tutoriaali on
muuten edelleen täysin käyttökelpoinen.
Tehdään PWA-aloitustutoriaali Your First Progressive Web App, jossa luodaan valmiina annetusta JS/HTML/CSS-koodista PWA-sovellus. Sovellus on melko monimutkainen, mutta PWA:n toimintaperiaate, Chrome Devtoolsin käyttö, ja monia web-kehityksen tärkeitä piirteitä esitetään erittäin hyvin. API-keytä ei tarvitse hakea tutoriaalin alussa, koska mukana oleva serveri tarjoaa "feikkidataa" jonka avulla sovellus toimii hyvin. Seuraa ohjetta: Alternative: Download code & work locally. Lataa siis projektirunko omalle koneellesi, ja ryhdy tekemään tutoriaalia omalla koneellasi VSCode-editorilla.
Testaa tekemääsi PWA-sovellusta omalla koneellasi tutoriaalin ohjeiden mukaan. Koska PWA-auditointi on poistettu Lighthousesta, siihen ei kannata kiinnittää huomiota. Selosta PWA-sovelluksen toimintaperiaate pääpiirteittäin erillisessä dokumentissa. Listaa jälleen sovelluksen osat/tiedostot, joiden ansiosta sovellus noudattaa PWA-standardia. Koeta tehdä tutoriaalin osan 6 perusteella lyhyt selvitys siitä, kuinka Service Worker toimii. Mitä kehittäjän pitää ottaa cachen (välimuistin) suhteen huomioon, kun hän päivittää sovellusta? Mikä on sovelluksen staattisen ja dynaamisen välimuistin ero ja kuinka ne toimivat? Miksi sovellukselle tehdään lopuksi erillinen asennuspainike?
Kokeillaan Angularin automaattista PWA-sovelluksen rakentamista. Päivitä aluksi Angular-CLI komennolla npm i -g @angular/cli@latest. Tee sitten uusi sovellus komennolla:
ng new ang-pwakoe --minimal -t=false -s=false
Hae syntyneeseen oletussovellukseen dataa JSONPlaceholder fake REST-API:sta. Käytä datan hakemiseen serviceä (esim. TodoService) ja luo Todo-oliolle tietotyyppi. Voit hakea vaikkapa etusivulla olevan ensimmäisen todo-olion, ja esittää sen title-arvon (delectus at autem) oletussivun yläosassa. Älä poista oletussivulla olevaa staattista sisältöä. Nyt sovelluksessa on sekä staattista että dynaamista (REST-API:sta tulevaa) dataa, jotka tallentuvat staattiseen ja dynaamiseen cacheen, kun teet sovelluksesta PWA-sovelluksen.
Tee sitten sovelluksesta PWA tämän ohjeen avulla. Testaa sovellusta http-server -testipalvelimen avulla. Katso että sovellus toimii offline-tilassa. Katso että sekä staattinen että dynaaminen cache toimivat.
Laita sovelluksen buildauksessa syntyvän dist/ang-pwakoe/browser -kansion sisältö sitten oikealle SSL-protokollaa tukevalle palvelimelle. Käytetään ensisijaisesti Firebasea, tässä ohje. Huomaa että uudemmissa Angularin versioissa julkaisukansion polussa on myös hakemisto browser: dist/ang-pwakoe/browser. Kokeile sovellusta menemällä sovelluksen Firebase-osoitteeseen. Palauta "ratkaisuna" kuvankaappaus Firebasessa olevasta sovelluksesta, jonka oikealle puolelle on avattu selaimen Developer Toolsin Application näkymään dynaaminen cache, jossa näkyy REST-API:sta tullut dynaaminen sisältö.
Tehdään Angularilla PWA-karttasovellus, joka antaa ilmoituksen kun sovelluksen käyttäjä saapuu koordinaattien määrittämälle alueelle. Sovelluksen kartassa näkyy käyttäjän reaaliakainen sijainti selaimen Geolocation API:iin perustuen. Kartan luontiin käytetään Open Street Map:ia ja Leaflet-kirjastoa, jotka ovat täysin ilmaisia, eivätkä vaadi edes API-keytä. Tee ensin osa1 tutoriaalista, jossa on opastus kartan laittamiseen Angular-sovellukseen. Luo sovellusrunko kuitenkin tällä komennolla: ng new ang-pwakartta --minimal -t=false -s=false, joka on hieman erilainen kuin tutoriaalissa käytetty. Laita kartta peittämään koko selaimen ruutu, koska sovelluksesta tehdään lopuksi PWA-sovellus.
Kopioi sitten mallikartan JS-koodi Angular-sovelluksen map.component.ts:n initMap()-metodiin. Älä tee mitään ulkoista json-tietovarastoa tai serviceitä, kuten tutoriaalin osassa 2 on tehty, koska näin yksinkertaisessa sovelluksessa niitä ei kannata tehdä. Huomaa, että Angular-sovellus ei aluksi löydä marker-ikonin ja sen varjon kuvia. Katso tutoriaalin osasta 2 koodit, jotka lisäät angular.json ja map.component.ts -tiedostoihin, minkä jälkeen käynnistettyäsi sovelluksen uudelleen, karttamerkki ja sen varjo näkyvät.
Huomaa että paikannus ei ole kannettavan koneen selaimella välttämättä aivan tarkka, koska se perustuu WLAN-tukiasemien sijaintiin, mutta mobiililaitteen GPS:llä saadaan aina tarkka paikannus.
Kun käyttäjä saapuu tietylle alueelle, hänelle annetaan ilmoitus saapumisesta selaimen Notification API:n avulla. Tee map.component.ts:ään notifyMe()-metodi, joka laukaistaan kun käyttäjä on esim. ylittänyt 61 leveyspiirin. Huomaa että kyseessä on asiakaspuolen notification, eikä push notification, koska notifikaatio ei tule serveriltä vaan Angular-sovelluksesta.
Kun kokeilet, käy ensin poistamassa mahdolliset notifikaatioiden luvat selaimen asetuksista (chromessa asetukset löytyvät url-osoitteesta: chrome://settings/content/notifications). Huomaa, että jos koneesi (Windows) asetuksissa on "Do not disturb"-toiminto päällä, jäävät notifikaatiot piiloon, vaikka ne muuten toimisivat. Ota tällöin kyseinen toiminto pois päältä käyttöjärjestelmän asetuksista.
Notifikaatio toimii myös muistiin buildatusta sovelluksesta, osoitteesta http://localhost:4200. Sovellus pitää aina ladata uudestaan (esim. selaimen refresh), jotta notifikaatio tulee, koska se luodaan metodissa, joka suoritetaan aina kun karttakomponentin view eli HTML-templaatti on ladattu muistiin. Voit tehdä sovelluksesta PWA:n vasta lopuksi, kun olet saanut sen toimimaan.
Huom! Tämän ja seuraavan tehtävän notifikaatiot eivät toimi Zoomissa jaetulla ruudulla, jos koko ruutu on jaettu. Jos jaat ruudulta vain tietyn alueen (advanced-välilehti), niin silloin notifikaatiot toimivat.
Jatketaan edellistä PWA-sovellusta. Tehdään siihen push notification, eli notifikaatio tulee nyt serveriltä, ja lähtee kaikille sovelluksen käyttäjille. Kyseessä on nyt siis Push API, joka vaatii toimiakseen service workerin. Eli sovelluksesta pitää tehdä PWA ja se pitää buildata ng build -komennolla, jotta push notificationia voi kokeilla. Kun teet sovelluksesta PWA:n, käytä @angular/pwa-kirjaston versiota, joka on sama kuin se Angular-versio, jota on muutenkin projektissa käytetty.
Ohje push-notifikaation tilaamiseen Angular-sovelluksesta on tässä tutoriaalissa. Vaikka tutoriaali on vanha, on push-notifikaation tilaus edelleen samanlainen. Älä tee uutta Angular-sovellusta, kuten tutoriaalissa on tehty, vaan jatka tehtävän 4 sovellusta, ja tee sovellukseen ohjeen mukaisesti pushnotificationservice, ja tilaa sen avulla push-notifikaatio serveriltä app.component.ts:ssä. Tutoriaalissa on käytetty npm:n sijasta vaihtoehtoista yarn-pakettimanageria. Sitä on hyödytöntä käyttää, joten anna vain samat komennot npm:llä. Huomaa, että servicessä käytetyn HttpClient-olion toiminta vaatii, että provideHttpClient on otettu käyttöön app.config.ts:n providers-taulukossa.
Älä käytä tutoriaalin serveriä, sillä valmiiksi tehdyn serverin saat tästä. Ratkaisussa on sitten kaksi notifikaatiota. Ensin tulee tavallinen notifikaatio asiakassovelluksesta, ja sitten push-notifikaatio serveriltä.
Käy ensin poistamassa mahdolliset vanhat tilaukset selaimen asetuksista (chromessa asetukset löytyvät url-osoitteesta: chrome://settings/content/notifications). Käynnistä sitten push-serveri ja kokeile frontend-sovellusta: http-server -p 8080 dist/sovelluksennimi/browser/. Voit joutua refreshaamaan frontend-karttasovelluksen, ennen kuin push-notifikaation tilaus lähtee serverille.
Tehdään Ionicilla Android-mobiiliapplikaatio, jossa on yksinkertaiset kotisivut. Toimi tämän ohjeen mukaan. Voit kopioida suurimman osan koodista tästä Angular-sovelluksesta. Tee sivut Ionicin tabs-sovelluspohjan tab-komponentteihin. Muunna ulkoasukomponentit ja tyylit Ionicin mukaisiksi (ion-alkuiset tagit templaateissa). Voit testata sovellusta aluksi ihan normaalisti selaimessa.
Seuraavaksi pitäisi paketoida sovellus Android -mobiilisovellukseksi (.apk -paketti). Tämä tehdään omalla koneella, mikä vaatii Android Studion asentamisen. Huomaa että Android Studio ja Android-emulaattori vaativat toimiakseen melko suorituskykyisen koneen. Jos koneesi ei jaksa pyörittää niitä, unohda kääntäminen .apk-paketiksi omalla koneellasi. Jos saat .apk:n luotua, testaa sitä Android-emulaattorilla. Palauta ratkaisuna Ionic-lähdekoodi (ja valmis .apk-paketti jos saat sen tehtyä).
Muunna Angular-kotisivu Android-mobiiliapplikaatioksi (.apk) Nativescriptin avulla. Säädä ensin ohjelmointiympäristö kuntoon tämän ohjeen avulla. HUOM! asenna JDK:n versio 17, kuten ohjeessa on tehty, koska uudempia ei välttämättä tueta. Voit asentaa JDK:n Windowsille suoraan asennuspaketista (esim. .exe tai .msi). Mitään asennusohjemia ei tarvita. Voit käyttää tabs-sovelluspohjaa: ns create ns-kotisivu --template @nativescript/template-tab-navigation-ng. Jos sovelluspohjan latautuminen on erittäin hidasta, voit ladata kaikki sovelluspohjat nopeasti Githubista, ja valita kansiosta tarvitsemasi. Huomaa, että tämä templaatti käyttää vielä Angularin versiota 18 (K2025), ja on modulaarinen. Se ei kuitenkaan tässä tehtävässä haittaa, koska koodiin ei tarvitse tehdä paljonkaan muutoksia.
Avaa Android-emulaattori Android Studiosta. Anna VSCode-projektissa komento ns run android, ja näet hetken kuluttua sovelluspohjan emulaattorissa. Nyt voit ryhtyä koodaamaan sovellusta VSCodessa, ja aina kun tallennat koodisi, näkymä päivittyy emulaattoriin. Sovellus on helppo rakentaa valmiin sovelluspohjan päälle. Lähinnä tarvitsee lisätä kuvat, tekstidata ja vaihtaa komponenttien GridLayoutit StackLayouteiksi, jotta kuva voidaan esittää ListViewin (tekstilista) päällä. Voit vielä antaa komennon ns build android, jolloin .apk-paketti rakennetaan projektin android/app/build/outputs/apk/debug -kansioon.
Muunna ristinolla-peli Android-mobiiliapplikaatioksi (.apk) Nativescriptin avulla. Käytä Nativescriptin Angular blank -sovelluspohjaa (ns create ns-ristinolla --template @nativescript/template-blank-ng), ja rakentele peli sen päälle olemassa olevaa koodia hyödyntäen. Käytä NS:n layout-ratkaisuja ja UI-komponentteja. Huomaa, että selaimen localstorage ei toimi Nativescript-sovelluksessa. Käytä pelien tulosten tallentamiseen siis puhelimen ApplicationSettings-datavarastoa. ApplicationSettings, joka muistuttaa hieman selaimen localstoragea, on suositeltavin vaihtoehto pienen datamäärän lokaaliin tallennukseen.
Jos olet suorittanut React-kurssin, tai muuten osaat Reactia, voit vaihtoehtoisesti tehdä tämän saman tehtävän käyttäen React Nativea. Ristinollan yksinkertaisen version React-koodin saat Reactin aloitustutoriaalista. Tehtävä kannattaa tehdä siten, että lähtee tekemään tutoriaalia vaihe kerrallaan, ja vaihtaa joka vaiheessa elementit RN:n natiivielementeiksi. Huomaa että React Nativessa käsitellään CSS-tyylejä JS-olioina, eli et voi käyttää tyylejä samalla tavalla kuin web-sivulla ja NS:ssä. React Nativessa ei ole ApplicationSettingsia, mutta voit käyttää localstoragen korvaavana datavarastona asyncstoragea.
Tutustu ensin tämän tutoriaalin avulla Firebasen Firestore-tietokannan käyttöön AngularFiren metodeilla, eli tee tutoriaali. Tutoriaalin viimeistä osaa, eli hakutoimintoa (Search-komponentti), ei tarvitse tehdä, sillä sitä ei tarvita tehtävässä. Tutoriaali on vanha, mutta AngularFiren metodit toimivat edelleen samalla tavalla, ja tutoriaalista selviää hyvin AngularFiren CRUD-metodien toimintaperiaate. Tarvittaessa voit katsoa AngularFiren uusimman version dokumentaatiota ja soveltaa sitä tutoriaaliin, mutta se ei ole välttämättä tarpeen. Aloita tekemällä uusi Angular-projekti komennolla:
ng new ang-firebookapp --minimal -t=false -s=false
Valitse tyylitiedostoksi SCSS ja vastaa SSR:n käyttöön N (No). Huomaa, että environments-kansiota ei tarvitse enää tehdä, sillä Firebase-konfiguraatio laitetaan automaattisesti app.config.ts -tiedostoon. Myös app.module.ts-moduuliin liittyvän kohdan voit hypätä yli. Kohdassa, jossa laitetaan tyyliviittaukset styles.css-tiedostoon, laita viittaukset tällä tavalla. Tutoriaalissa on myös komponenttien Import-poluissa pieniä virheitä, jotka pitää korjata.
Kun olet saanut toimimaan tutoriaalin CRUD-toiminnot, katso mallia tekemästäsi tutoriaalista, ja yhdistä Frontend-sovelluskehitys -kurssilla esimerkkinä käytetty kontaktimuistio-sovellus Firestore-tietokantaan. Poista kontaktimuistiosta in-memory-web-api, ja laita sovelluksen data Firestoreen. Käytä Firestorea Angularfire-kirjaston tarjoamilla metodeilla, eli poista Angular-sovelluksen contactservicen REST-metodit ja laita tilalle Angularfiren Firestore-metodit. Joudut tekemään muutoksia myös metodien käyttöön komponenteissa.
Tässä vaiheessa Angular-frontendiä käytetään vain omalta koneelta, eli sitä ei saa julkaista oikealla palvelimella, koska Firestorea käytetään test-modessa ja autentikaatio puuttuu.
Jatketaan Firebase-backendin kehittämistä kontaktimuistio-sovellukselle. Huomaa että olet käyttänyt Firestorea koko ajan test-modessa, mikä tarkoittaa sitä, että kantaa voi muokata kuka tahansa sovelluksen käyttäjä. Vaihdetaan nyt test-mode locked-modeen. Tällöin joudut säätämään kannan turvallisuussääntöjä, ja tekemään autentikaation. Autentikaation tekemisen apuna kannattaa käyttää tätä esimerkkiä. Tee sovellukseen login-lomake, johon syötät emailin ja salasanan, tai Google-tunnarit. Voit laittaa login-lomakkeen samaan näkymään, jossa on kontaktin lisäys- ja muokkaus, jolloin näytät tai piilotat lomakkeet @If:llä tilanteen mukaan. Voit halutessasi tehdä myös guardilla suojatun reitin. Onnistunut Firebase-kirjautuminen avaa frontendin muokkausnäkymän ja samalla suojatun tietokannan muokattavaksi. Sovellus jossa on autentikaatio voidaan julkaista turvallisesti webissä.
Tee vapaamuotoinen pieni mobiilisovellusprojekti web-teknologioilla. Sovelluksesi voi olla PWA-sovellus, hybridisovellus (Ionic) tai natiivi hybridisovellus (Nativescript tai React Native). Pyri tekemään sovelluksesta mahdollisimman mobiiliystävällinen sopivien UI/UX-kirjastojen ja/tai -komponenttien avulla. PWA sovelluksen tulisi lisäksi olla responsiivinen, jolloin se toimii sekä mobiilisovelluksena että suuremmalla näytöllä. Hybridi- tai natiivihybridisovelluksen ei tarvitse toimia isolla näytöllä, koska sitä on tarkoitus käyttää vain mobiililaitteella. Sovelluksen datan ei tarvitse sijaita tietokannassa, vaan se voi olla laitteen muistissa tai localstoragessa/ applicationSettingsissä. Esim. Firebasen käytöstä saa toki plussaa. Työssä voi vapaasti käyttää haluamaansa frontend-kirjastoa (esim. Angular, Svelte tai React).
Työn aihe voi olla samantapainen kuin Frontend-sovelluskehitys -kurssilla. Esim. ulkoisesta web-API:sta dataa hakeva sovellus, pieni peli, tietovarastoon yhdistetty käyttöliittymä tms. Mobiililaitteen laiterajapintojen (esim. kamera, GPS, notifikaatio yms.) käytöstä saa plussaa.
Sovelluksen voi kehittää myös älykellolle (esim. Android Wear OS). Sovelluskehitys älykellolle on muuten samalaista kuin matkapuhelimessa toimivan sovelluksen kehitys, mutta näytön koko ja laiterajapinnat asettavat tiettyjä rajoituksia. Esim. Android Studiossa on emulaattorit myös älykellosovelluksille. Wear OS -kehitystä voi tehdä kaikilla kurssilla esitellyillä tekniikoilla ja alustana on WebView (PWA, Ionic) tai natiivi ympäristö (Nativescript, React Native).
Webissä olevia tutoriaaleja saa vapaasti käyttää, mutta sovelluksen tulee sisältää myös itse toteutettua koodia. Tutoriaalista kopioitua sovellusta pitää siis laajentaa/jatkokehittää.
Lopuksi täytä kurssipalaute Peppi-järjestelmässä.
***