Dashboard for iPad
Laget for første generasjon iPad
Dette er et lite og enkelt prosjekt jeg lagde for meg selv de første dagene når jeg lærte meg Vue.js. Til tross for at resultatet blir brukt daglig i mitt hjem så ble koden glemt og funnet igjen på maskinen min under en opprydding.
Noen har spurt om hva jeg har laget og hvordan. Så derfor deler jeg denne uferdige og langt ifra perfekte koden og forklaringen på bruk og oppsett. Koden ligger på GitHub: https://github.com/sjsd/dashboard-for-ipad-1gen
Tilbakeblikk
Som nevnt så ble koden skrevet ila de første dagene hvor jeg lærte meg Vue.js. Noe koden bærer preg av. Jeg kunne ikke alt om Vue.js eller best practice. Noe jeg forsåvidt ikke gjør i dag heller. Men jeg ville nok valgt en litt annen fremgangsmåte nå enn da.
iPad 1.gen Safari
Siden jeg har en gammel iPad liggende ubrukt i skuffen så tenke jeg å bruke den som et slags dashboard som viser klokken, været, kalender og busstider. I dag er det ikke noe moderne nettleser tilgjengelig for en så gammel iPad. Så valget endte (påtvunget) å bruke den medfølgende Safari. Igjen så er ikke denne versjonen av Safari spesielt moderne og takler ikke nyere standarder.
Så som en rask vei til mål endte jeg opp med å bruke Bootstrap 2 for frontend og en god dose Babel for å kompilere javascript til noe den tilårskommende Safari kunne takle.
Hosting
Hvor du evt. velger å hoste koden er opp til deg. Jeg bruker en Raspberry Pi Zero W som jeg hadde liggende. Noe som gjør at selve dashboardet ikke er tilgjengelig utenfor mitt lokale nettverk i hjemmet.
Dette har jeg gjort av tre grunner: jeg har ikke gjort noe forsøk på å skjule API-nøkler eller kalender-ID, dashboardet er ment å vises på en iPad i hjemmet og det som vises på skjermen er ment for oss som bor i hjemmet og ikke nødvendigvis alle andre.
Det er litt overkill å kjøre Apache for å vise en HTML-fil + JS. Men den har en del andre ting som gjør det kjekt og enkelt å sette opp. Jeg fulgte oppskriften til Pi My Life Up: https://pimylifeup.com/raspberry-pi-apache/
Forutsetninger
Jeg har en Google-kalender som jeg deler med min bedre halvdel. Her legger vi inn alt som kommer til å hende i fremtiden (for vår del). Som treninger, foreldremøter, osv osv.
Du trenger en API-nøkkel og ID-en til kalenderen. Google Calendar API.
For å vise neste bussavgang trenger du også API-tilgang til Entur. Developer Entur.org.
Hva nå?
Skal du bruke denne koden så forutsetter det at du kan litt om Vue.js og javascript fra før. Dette er ikke et ferdig produkt som du kan bruke rett ut av boksen. Så jeg er rimelig sikker på at du selv finner veien videre. Skulle du ta hele eller deler av koden i bruk så vet du selv hva du driver med. Derfor kommer jeg ikke med noe utdypende forklaring på oppsett, utvikling og produksjon av koden.
Veien videre?
Næhh.. skulle jeg finne tid til å pusse på den så vil det komme en eller annen oppdatering som sjekkes inn på GitHub. Så følg med her https://github.com/sjsd/dashboard-for-ipad-1gen