Ik weet dat ik waarschijnlijk druk bezig zou moeten zijn om ChatGPT 5 uit te testen, maar dat doen al genoeg mensen. En ik sta nog in vakantiemodus, dus focus ik daar nog even op. Die vakantie bestond uit 15 dagen op de Galapagos eilanden. Het was een reis geboekt via EWDR bestaande uit verschillende activiteiten (wandelen, duiken) op verschillende eilanden (Santa Cruz, Isabella, San Cristóbal) met boottochten naar duikstekken, veerdiensten etc.
Daarom had ik vooraf met behulp van ChatGPT, de pdf’s van EWDR en online beschikbare informatie een json gemaakt met informatie over de reis. En met AI-studio van Google had ik daarna een HTML-bestand gemaakt dat dit overzichtelijk weergeeft. Die versie staat inmiddels niet online, ik heb de json aangepast met onze ervaringen tijdens de reis zelf, foto’s en video’s, dat is de versie die je nu online ziet staan. Maar dat is niet het onderwerp van deze blogpost. Voorafgaand aan de reis hadden we, van online berichten, begrepen dat toegang tot internet een uitdaging zou kunnen zijn. Niets bleek minder waar, dus de use-case voor dit verhaal bleek niet te bestaan. Desondanks schrijf ik het op zodat ik het daarna weer kan vergeten en terug kan zoeken als ik het ooit weer nodig heb.
De uitdaging
Het idee was dat ik een Android applicatie wilde ontwikkelen die ik dan op mijn telefoon kon installeren en die lokaal het json-bestand dat ik ook voor de online website gebruikte kon openen en dan kon weergeven op mijn telefoon zodat ik ook alle informatie over de reis (programma, adressen van de hotels, duikschool etc, wat Spaanse zinnetjes die we mogelijk nodig hadden) offline beschikbaar kon hebben. Maar ik had nog nooit een Android applicatie geprogrammeerd, dus ging ik er vanuit dat ik daar AI bij kon inzetten.
(ja, die aanname is heel fout maar ook met opzet).
Firebase Studio
Tot nu toe maak ik vooral gebruik van AI-studio van Google om ‘wegwerpapplicaties’ te maken die bestaan uit een HTML-bestand, wat CSS, meestal json voor opslag van data. Dat werkt prima. Als je op YouTube zoekt naar voorbeelden die vergelijkbaar werken, dan bestaan die nauwelijks, er wordt altijd gebruik gemaakt van, meestal betaalde, online diensten. Logisch dat die diensten geld kosten, maar voor een ‘app die ik tijdens een vakantie van 2 weken wil gebruiken’ vond ik dat niet zinvol. Firebase Studio van Google is gratis te gebruiken, dus ging ik daarmee aan de slag.
Belangrijkste eerste beperking en uitdaging: Firebase Studio heeft geen ondersteuning voor het maken van Android applicaties. Ik kon geen gratis vibecoding tool vinden die dat wel had (en ja, ik noem het nog steeds vibecoding ook al is ‘context engineering’ het nieuwe buzzwoord). Met Firebase Studio kon ik een Next.js applicatie maken, maar dat was eigenlijk een stap terug ten opzichte van de html-versie die ik met AI-studio gemaakt had, want ik had nog steeds een live internetverbinding nodig en een server. En als ik geen eigen server in de lucht wilde brengen dan moest ik Google gaan betalen voor het hosten van de app. Ook geen goed idee. Maar Firebase Studio had één handige optie: github ondersteuning. Daarmee kon ik de code die Firebase Studio maakte voor Next.js pushen naar github. Ik heb de repository openbaar gezet zodat je hem daar kun bekijken, forken, downloaden, hergebruiken. Let maar even niet teveel op de wat vreemde submit berichten, Firebase Studio gebruikt soms je laatste opmerking voor het submitten. Dus als je ziet staan “No, the *subtitle* NOT the *background* !!!” dan was dat een bericht richting de AI. 😉
Capacitor + Android Studio
Ik vroeg ChatGPT hoe ik de code die Firebase Studio gemaakt had kon converteren naar een Android applicatie. De initiële uitleg maakte duidelijk dat dat heel veel werk zou zijn. Toen ik dat aangaf kwam het systeem gelukkig met een beter alternatief: een wrapper gebruiken. Een van de opties die genoemd werd was Capacitor. Een open source runtime om webapplicaties op iOS en Android te draaien. De iOS optie heb ik niets mee gedaan, ik ging voor Android. Naast Capacitor had ik Android Studio nodig.
- Check op Node.js (v16‑20+)
node --version
- Installeer Android Studio, inclusief Android SDK (minimaal API 23+). Capacitor 7 vereist minimaal Android Studio 2024.2.1
- Installeer git op je computer indien nodig
- Haal de repository naar je lokale schijf, in een lege map:
git clone https://github.com/PiAir/galapagos-itinerary.git
- Ga naar de map galapagos-itinerary
- Installeer Capacitor CLI & Core:
npm install @capacitor/core npm install -D @capacitor/cli
- In dezelfde map initialiseer je Capacitor (ik heb gekozen voor com.gosoftonline.galapagos – kies zelf wat anders):
npx cap init "GalapagosItinerary" "com.jouwbedrijf.galapagos" --web-dir=out
- Maak (of update) het bestand next.config.js met:
/** @type {import('next').NextConfig} */ const nextConfig = { output: 'export', images: { unoptimized: true }, }; module.exports = nextConfig;Dit zorgt ervoor dat Next.js automatisch een statische out/-map genereert wanneer je next build draait.
- Je hoeft tegenwoordig geen next export meer te doen. Alles zit verwerkt in next build. Dus in je package.json:
"scripts": { "dev": "next dev", "build": "next build" }Run dan:
npm run build
Na afloop staat je volledige statische site in de map out/.
- Je kunt testen over alles werkt door:
npx http-server out
Je kunt de Next.js website nu lokaal draaien, maar het gaat ons om de Android app, dus nog 1 stap te gaan:
npm install @capacitor/android
npx cap add android
npx cap syncGa nu verder in Android Studio. Open de map waar je in hebt zitten werken.
Android Studio
- Sluit je Android-toestel aan via USB (zet USB-debugging aan op je telefoon).
- In Android Studio kies je bovenaan rechts je apparaat of emulator als target.
- Klik op de Run ▶️-knop.
- De app wordt gebouwd, geïnstalleerd en gestart op je telefoon.
- Gebruik Logcat onderin Android Studio voor debugging
Visual Studio Code
Natuurlijk zou het te gemakkelijk zijn geweest als het verhaal daarmee klaar was. De app werkte bijna helemaal. Maar een belangrijke functionaliteit, de mogelijkheid om de json te openen en (met je eigen opmerkingen) weer op te slaan werkte niet. ChatGPT wist te vertellen dat dat logisch was, want die functionaliteit was bij Next.js nou eenmaal anders dan bij Android. Mijn fout op dat moment was dat ik gewoon door ging met het vragen aan ChatGPT hoe dit aan te passen. Toegegeven, voor ChatGPT niet gemakkelijk om dat dan goed te doen aangezien die omgeving alleen toegang had tot mijn screenshots en tekst van de foutmeldingen. Het werkte uiteindelijk wel in Android, maar Firebase Studio flipte helemaal van de code die het daarna terug kreeg. Op zich geen probleem aangezien Android het doel was, maar ik zag dat er toch nog een paar dingen in de functionaliteit ontbraken en wilde graag weer de prototyping mogelijkheden van Firebase Studio gebruiken.
De oplossing bleek te liggen in de AI-ondersteuning van Visuals Studio Code. Die kon namelijk wél de hele codebasis zien, had toegang tot het internet en kon voor mij de benodigde aanpassingen direct in de code maken. Hoera!
Het voordeel van Visual Studio Code is dat ik ook daar meteen de github repository kon benaderen, dus de aanpassingen werden door VSC in de code gemaakt, doorgestuurd naar Firebase Studio, die vond de code weer begrijpbaar (de truc was dat bepaalde libraries alleen geladen worden als het niet als onderdeel van Next.js gedraaid wordt en dan vindt de sandboxomgeving van Firebase Studio die de preview van de app laat zien het ook weer okay), ik kon daar verder vragen voor nieuwe functionaliteit, via github weer synchroniseren naar mijn lokaal systeem, met Capacitor en Android Studio een nieuwe versie van de .apk maken om te draaien.
Het logo voor de app kwam van ChatGPT, met één prompt een logo dat er netjes uitziet, heerlijk gewoon. De app heeft een paar functionaliteiten die de website niet heeft zoals het kunnen opslaan van de json. Dat is handig omdat de notities niet “alleen lezen” zijn, maar je kunt ze op de telefoon aanpassen. Daarbij begrijpt de app Markdown dus je kunt zelfs opmaak toepassen op je notities. Jammer dat we alweer terug van vakantie zijn, de app was heel handig geweest. Natuurlijk waren de video’s en afbeeldingen niet bruikbaar als ik geen internettoegang had, maar zoals gezegd, dat viel reuze mee.
Conclusie
Veel gedoe? Jazeker. De commerciële aanbieders van tools weten waar ze geld voor vragen. Zij bieden je meer gemak dan wanneer je met losse tools aan de slag gaat. Maar de tijd dat je Javaprogrammeur moet zijn om Android applicaties te kunnen maken ligt gelukkig al lang achter ons. De kans dat ik vaker Android apps ga ontwikkelen op deze manier is niet heel erg groot, maar het was leerzaam. Visual Studio Code blijf ik overigens wel gebruiken, want ook in een andere voorbeeld waar ik later over zal rapporteren heeft de AI ondersteuning me daar al uit de brand geholpen.
