Vi udruller beta 0.1 af klima-appen trods benspænd fra Github

23. marts kl. 03:451
Foto af CO2-lommeregneren i en mobil-browser
Illustration: Version2.
Vi dummer os, og så går Github ned midt i det hele, i nærmest farce-agtige omstændigheder. Men nu er klima-appen parat til brugertest i ‘cyberspace.’
Artiklen er ældre end 30 dage
Manglende links i teksten kan sandsynligvis findes i bunden af artiklen.

Ej men altså. Det skal heller ikke være for nemt. Det der med at udvikle og udrulle en CO2-lommeregner til at beregne udledning fra madvarer.

Men nu er den her: https://tania-andersen.github.io/CO2-app/ – og jeg har også lavet en kort URL, som er lidt nemmere at taste på en telefon: https://rb.gy/cfuama.

Den er ikke specielt køn, har visse mangler, og den er lidt skrøbelig – men det er min baby.

Vi startede for lidt over et år siden, så det er dæleme også på tide at blive færdig – som i ‘beta-færdig’.

Artiklen fortsætter efter annoncen

Vi havde fin damp på kedlen indtil sommeren.

Og så gik det lidt i stå – jeg havde frygtelige problemer med hardware, og måtte skifte og nulstille pc tre gange. Det kunne være sejt, hvis jeg havde haft hele udviklingsmiljøet i en container, så var det gået hurtigere med at komme tilbage på sporet. Det må jeg se på ved lejlighed, siger jeg til mig selv.

I sidste episode lagde vi den endelige sten på værket.

I sin tid valgte vi frameworket Gatsby, der skaber websites med statiske sider – og masser af Javascript. Én af grundene til at vælge Gatsby var, at vi så kunne udrulle appen på Github Pages, og det er gratis for vores open source-projekt.

Og det er dagens øvelse, ganske simpelt.

Ånden bevæger sig gennem tiden

Gatsby lovede i sin tid at være et nemt framework med god produktivitet, og her et år efter må jeg sige, at det er jeg enig i. Dokumentationen er formidabel, og indeholder et dokument, der forklarer, hvordan Gatsby fungerer med Github Pages.

Sidstnævnte er i øvrigt blot en webserver, der leverer statiske sider fra et repository på kodetjenesten.

Det er ikke særligt svært, men det lykkes mig alligevel at dumme den, ikke sandt. På siden står der:

»Naviger til dit repository. Klik på ‘settings’ under navnet for repository’et. I afsnittet Github Pages skal du bruge source-menuen til at vælge main (for udgivelse til rodens underdomæne) eller gh-pages (for udgivelse til en sti som /docs) som din GitHub Pages-kilde. Klik på Save.«

Det var nemt nok. Man kan også bruge en NPM-pakke med navnet gh-pages. Den udruller mere eller mindre automatisk fra den lokale Git, som Gatsby benytter.

Men jeg er lidt forvirret omkring Git, det må jeg indrømme.

Den Git, som Visual Studio Code benytter, er den, der bor i Windows. Gatsby bor hos Ubuntu i min Windows Subsystem for Linux, som er Windows’ indbyggede virtualiseringslag for Linux. Det forvirrer mig lidt, af en eller anden grund, men nu hvor jeg skriver disse linjer, står det ganske klart for mig. Måske var jeg bare lidt træt den torsdag.

Ånden bevæger sig gennem tiden, som G.W.F. Hegel sagde engang.

Hvorom alting er, så gemmer jeg det smarte gh-pages-værktøj til en anden gang. Nu skal jeg bare ha’ skidtet op på serveren.

Jeg vil altså publicere fra /docs-folderen i gh-pages-grenen i mit repository. Den gren opretter jeg bare via Githubs webkonsol. I Gatsbys dokumentation står der, at jeg skal tilføje et par linjer i filen gatsby-config.js:

  1. module.exports = {
  2. pathPrefix: '/reponame',
  3. // ...
  4. }

Her står der klart og tydeligt reponame, som er CO2-app, men jeg bommer den og skriver /docs i stedet for.

Nu builder jeg projektet med kommandoen

  1. gatsby build --prefix-paths

– så stierne prefixes med /CO2-app/, der er roden i websitet.

Så uploader jeg docs-folderen, også via webkonsollen, til gh-pages-grenen i mit Github-repository.

Showtime!

Og så er det showtime! Ind på webadressen, og den siger… ‘NOT FOUND’. Nånå. Hvad er den af? Jeg åbner Chromes udviklingsværktøjer med ‘prikkemenuen’ > Flere værktøjer > Udviklingværktøjer.

Her klikker jeg på fanen Console, og ser en masse 404-svar. Her ser jeg at der står /docs/, i stedet for /CO2-app/ i URL’ernes filsti. Den fejl var nem at finde, for en gangs skyld.

Jeg ændrer til det rigtige repo-navn i gatsby-config.js og builder igen. Jeg losser det op på Github med webkonsollen, og det virker sørme! Hurra hurra.

Sådan da. Jeg prøver på min vante mobilbrowser, og det er Firefox. Min telefon er en Samsung i mellemprisklassen, med et halv-stor skærm. Brugeroplevelsen er ikke god. Appen er lang tid om at loade, og Androids copy-paste-menu ligger foran komponenterne. Der er også en hel del latency. Komponenterne er heller ikke så nemme at beherske.

Lige i øjeblikket er jeg lidt skuffet, det må jeg sige.

Men så prøver jeg med Chrome og Samsungs egen browser, der vist også er afledt af Chromium. Her loader appen meget hurtigere, den dumme copy-paste-menu dukker ikke op, og det er også nemmere at benytte komponenterne, synes jeg. Det var rart. Og dagen efter virker den meget bedre og responsiv i Firefox, dog stadig med den uhensigtsmæssige copy-paste-menu.

Der er et umiddelbart problem i brugerfladen. I bunden er der en fixeret bjælke, hvorpå der står ‘Beta 0.1’ – en klar og vigtig udmelding. Men bjælken ligger oven på komponenterne, når man tilføjer nok CO2-linjer. Den skal vi lige have fjernet.

I kildefilen src/components/layout/footer.tsx, som stammer fra vores starter-projekt, finder vi footeren, som vi blot udkommenterer. Det kan vi altid rydde op i på et senere tidspunkt.

Nu er footer-bjælken væk, og det ser pænt ud med den lokale udviklingsserver, som jeg starter med kommandoen gatsby develop i Bash, som sædvanlig.

Jeg losser filerne op på Github igen, med webkonsollen, men jeg må gøre det i to omgange, for webkonsollen vil kun acceptere 100 filer ad gangen, og mit projekt er vokset en smule.

En dårlig dag for Github

Ind på Github Pages, men det virker slet ikke. Uha – har repo-navnet i gatsby-config.js på mystisk vis regresseret til den tidligere forkerte værdi? Nej, det har den ikke, viser en inspektion. Det er bare det sædvandlige her i værktøjskassen – lige foran målstregen, og så driller det.

Det morer mine kolleger på en venskabelig facon – de har set det hele før, med mit banderi og misfornøjelse.

Jeg sletter det hele og lægger den tidligere udgave på, for lige at tjekke. Og den virker fint. Nu er jeg forvirret. Men der er et rødt kryds et sted på Github, og det fører til punktet Actions. Det er her, at Github kan udføre continuous integration-opgaver, som vi har set i en anden serie her i værktøjskassen.

Github benytter en action, når den udruller de statiske sider fra min gh-pages-gren. Og den har ikke kunne udføre deploy-fasen af jobbet.

En mystisk fejlmeddelelse siger, at mit job venter på et andet job, som ikke er fuldført. Men i listen af Actions-jobs er alle afsluttet.

Nu er jeg bare et stort spørgsmålstegn. Er det måske, fordi jeg uploader i to hug? Det fungerer jo med den gamle version, som jeg kan uploade i et hug. Jeg tænker, at jeg må prøve at uploade på en anden måde. Github har et kommandolinjeværktøj, Github CLI, det prøver jeg. Her skal jeg bruge et autentifikations-token, som jeg får via webkonsollen… Der kvitterer med en fejl 500, serveren er gået ned!

Hvad hulen, spøger det her på redaktionen, eller hvad pokker er der galt? Jeg prøver et par gange til, stadig fejl 500. På fejlsiden er der et link til siden Github Status og – for dælen da, Github har det slet ikke godt, her torsdag eftermiddag.

Selv en kodeserver kan have en dårlig dag. Mon ikke det er her, problemet ligger.

Jeg holder fyraften, og næste morgen kører jeg deploy-jobbet på Actions-siden. Og den bliver pænt grøn. Ind på pages-siden, og nu virker det, som det skal. Py-ha, så klarede vi den endnu engang.

Brugertest

Jeg lægger et link i redaktionens Slack-kanal, så mine kolleger kan få fornøjelsen af at være brugertestere.

»Man skal kun spise otte poser Taffelchips mindre for at kunne flyve 25 km længere,« bemærker en kollega, helt korrekt.

»Så æder jeg 16 poser og tager toget de sidste 50 km,« svarer en anden.

Så kom vi så langt. Der er masser af forbedringer at kigge på i den lille beta-app. Til at starte med skal tilstanden bevares. Hvis man genindlæser siden, eller bare skifter lidt rundt mellem apps, forsvinder brugerens indtastninger, og den går ikke.

Det kigger vi på i næste episode - jeg håber, vi ses.

1 kommentar.  Hop til debatten
Denne artikel er gratis...

...men det er dyrt at lave god journalistik. Derfor beder vi dig overveje at tegne abonnement på Version2.

Digitaliseringen buldrer derudaf, og it-folkene tegner fremtidens Danmark. Derfor er det vigtigere end nogensinde med et kvalificeret bud på, hvordan it bedst kan være med til at udvikle det danske samfund og erhvervsliv.

Og der har aldrig været mere akut brug for en kritisk vagthund, der råber op, når der tages forkerte it-beslutninger.

Den rolle har Version2 indtaget siden 2006 - og det bliver vi ved med.

Debatten
Log ind eller opret en bruger for at deltage i debatten.
settingsDebatindstillinger
1
23. marts kl. 07:30

Beta-tillykke

Æder fint frokosten:

  • oksekød mødbrad, 150g
  • broccoli, 250g
  • champignon, 100g
  • rødvin, 100g
  • CO2, 23204.5g

men ingen bearnaisesovs; nå med 100+ filer i kittet må jeg nok vente på Beta-2;)?

Source ekspedition må nok også vente, men det jeg har set indtil nu, virkede fint! ********

Ingen 'Forhåndsvisning' endnu, så fremtoning er uvis - indtil 'Udgiv'. /Nis