PWA study project that searches MovieDB API for actor names and then try finds their movies from YLE API.
Code in the Woods oli huikea viiden päivän leiri, jonka aikana opimme tekemään web-sovelluksia kännykälle PWA-tekniikalla. Samalla opimme kurssin mentoreilta käytäntöjä mm. käyttöliittymäsuunnittelusta, versionhallinnasta, työkaluista ja monista muista asioista.
Tapahtuman aikana suunniteltiin ja rakennettiin mobiilisovellus 4 hengen pienryhmissä. Meidän ryhmäämme kuuluivat Eero, Kaisa, Taina ja Teemu.
Leirin järjestivät Barona Technologies ja Forenom
Haku näkymä ja linkit käytettyihin API palveluihin.
Haun tulokset listautuvat näytön koosta riippuen 1-4 vierekkäin. "Areenassa" -nappi aktivoituu, jos elokuva löytyy YLEn Areenasta.
PWA tekniikan keskeisimpiä ominaisuuksia on käyttäjän mahdollisuus tilata muistutuksia.
Tech Stack
- PWA (webbisivun kehitys mobiiliapsiksi)
- -Service Worker (offlinetuki ja notifikaatiot)
- -Web App Manifest (miten applikaatio näkyy mobiilisti)
- SinglePageApp (vain index.html ja kaikki muu JS tiedostoissa)
- Node.js
- Git (versionhallinta)
- Insomnia (REST-selaintyökalu)
- hyperHTML
- JavaScript (ES6)
- HTML, CSS
- SASS (CSSn seuraava taso)
- Gulp (buildinhallintatyökalu)
- Webpack (moduulien yhteenniputtaja julkaisua varten)
- Babel (Javascript versioiden yhteensovittaja)
- Lint (kielipoliisi)
- Material Components-komponenttikirjasto (käyttöliittymän ulkoasuun)
- Googlen Workbox-kirjasto (helpotusta service workkerin hallintaan)
- Web-API kutsut
- JSON (rakenteellisen tiedon kuvausmuoto)
Työvälineet
- Atom-tekstieditori
- Chrome-selain (erityisesti debuggaus)
- Android-puhelin
Projektinhallinta
- Trello
Kurssia varten rakennettiin (järjestäjien toimesta) yksinkertainen Web-sovellus, joka otettiin tämän appsin pohjaksi
Järjestäjät olivat myös valmistelleet meille materiaalipaketin
Pohja
- toteuttaa Service Workereista Offline-tuen ja PUSH-viestit
- käyttää YLE APIa
- soveltaa Googlen Web Starter Kit - pohjaa
Näin päästiin suoraan asiaan tehokkaasti.
Työskentelimme suunnilleen näin..
ma tiimiytyminen, tutustumisleikit, alustava hahmotelma appsille
ti desing suunnittelu ja koodauksen aloitus
ke koodausta, koodausta..
to viimeistelyt ja pitch night
pe wrap up, retro, fiilistelyt
Päätimme tiimimme kesken, että tämä jätetään siihen muotoon, johon saimme sen leirin aikana. Mikäli joku meistä intoutuu sen kanssa jatkamaaan, tekee hän tästä oman branchin tai muuten kopion omaan gittiinsä.