Dashboard for iPad

Laget for første generasjon iPad

Laster inn bilde
Bilde av iPad med dashboard av Helge Johnsen

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

Dette innlegget er eldre enn 1 år. Hele eller deler av innholdet kan være utdatert eller ikke aktuelt lengre.

Helge Johnsen

Dette er mitt private nettsted. Jeg jobber til daglig som seniorkonsulent i et Norsk IT-selskap. I denne bloggen skriver jeg om store og små ting som rører seg i min private verden. Bloggen består stort sett av tips, egne prosjekter og tanker. Les mer om meg her.

Har du noen tanker eller kommentarer om dette blogginnlegget så finner du meg på en rekke sosiale medier.