Code Monkey home page Code Monkey logo

leffalegendat's Introduction

LeffaLegendat

PWA study project that searches MovieDB API for actor names and then try finds their movies from YLE API.

Code in the Woods

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

Screenshotteja applikaatiosta

Etusivu

Haku näkymä ja linkit käytettyihin API palveluihin.


Haku

Haun tulokset

Haun tulokset listautuvat näytön koosta riippuen 1-4 vierekkäin. "Areenassa" -nappi aktivoituu, jos elokuva löytyy YLEn Areenasta.


Haku

Push-notifikaatio

PWA tekniikan keskeisimpiä ominaisuuksia on käyttäjän mahdollisuus tilata muistutuksia.


notifikaatio



Käytetyistä välineistä

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

Projektista

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ä.

leffalegendat's People

Contributors

tainalepisto avatar pxnk avatar pinkgranny avatar

Stargazers

Eero Forss avatar  avatar

Watchers

James Cloos avatar Eero Forss avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.