Je hebt geen programmeerervaring, maar je wilt toch een eigen mobiele app maken? Onmogelijk? Niet met een gratis en krachtig duo als Android Studio en Cursor. Programmeerkennis is niet vereist, al helpt het als je precies weet wat je wilt en dat ook goed kunt verwoorden.
In dit artikel laten we zien hoe je eenvoudig een Android-app kunt ontwikkelen:
- Installeer en configureer Android Studio en Cursor
- Gebruik AI-prompts om functies toe te voegen en te optimaliseren
- Test en debug je app met behulp van ingebouwde tools
- Genereer een apk-bestand en installeer je app op een Android-toestel
- Personaliseer je app met een eigen pictogram en interface
Nog meer personaliseren? Lekker persoonlijk: zo maak je je Android-smartphone écht van jou
We richten ons op het maken van Android-apps met behulp van het gratis Android Studio. Dit is de officiële geïntegreerde ontwikkelomgeving (IDE) van Google. Die biedt een uitgebreide set tools voor het ontwerpen, ontwikkelen, testen en debuggen (foutopsporing) van Android-applicaties, en ondersteunt programmeertalen als java, C++ en Kotlin. Deze laatste wordt officieel door Google ondersteund en is erg geschikt voor het ontwikkelen van Android-apps. Deze taal wordt daarom ook standaard gekozen voor nieuwe projecten in Android Studio.
Leuk om te weten, maar eigenlijk hoef je je daar helemaal niet om te bekommeren, aangezien we zelf niet, of althans niet handmatig, aan de achterliggende code gaan sleutelen. Immers, we laten deze gewoon genereren met een andere gratis tool: Cursor. Dit is een codegenerator en -editor die op Visual Studio Code is gebaseerd en door AI wordt gestuurd. Beide tools kunnen netjes naast elkaar draaien en met prompts in een natuurlijke taal, zoals Nederlands, genereer, wijzig en optimaliseer je de nodige code automatisch.
Installatie en setup Android Studio
Je hebt inmiddels begrepen dat je twee tools nodig hebt: Android Studio en Cursor. We beginnen met de eerste. Ga hiervoor naar https://developer.android.com/studio en klik op Download Android Studio (in ons geval is dit de versie Ladybug Feature Drop). Accepteer de voorwaarden en bevestig de download (circa 1,14 GB).
Open het installatiebestand, druk driemaal op Next en klik op Install. Start Android Studio na de installatie. De set-upwizard verschijnt. Klik op Next, laat Standard geselecteerd en klik opnieuw op Next.
Er worden verschillende onderdelen geïnstalleerd, waaronder een emulator, een SDK voor Android en aanvullende modules. Klik op Finish om deze te downloaden. Bevestig met Ja en klik nogmaals op Finish. Het welkomstvenster verschijnt.
Android Studio is een IDE met verschillende handige componenten.
Begin nieuw project
Klik in het welkomstvenster op New Project. Kies bij Templates voor Phone and Tablet en selecteer Empty Activity. Druk op Next. Voer een naam in voor je app, afhankelijk van het type app dat je wilt maken. In ons voorbeeld maken we een app om de weersverwachting te bekijken en op basis van temperatuur, windkracht en regenkans te bepalen of een dag geschikt is voor een fietstocht, inclusief de mogelijkheid om een locatie in te voeren. We noemen deze app Fiets of Niets.
Bij Package Name kun je bijvoorbeeld invullen nl.<jenaam>.fietsofniets, een omgekeerde domeinnaam gevolgd door de appnaam. Pas eventueel Save Location aan en noteer deze. Laat de overige instellingen, zoals API 24 en Kotlin DSL, ongewijzigd.
Klik op Finish om de benodigde bestanden te laden. Er wordt een basisstructuur gegenereerd, waaronder MainActivity.kt, een Kotlin-bestand dat de code voor de hoofdactiviteit bevat. Dit kan intimiderend ogen, maar zoals gezegd: je hoeft hier zelf zo goed als niets aan te wijzigen.
Als Android Studio detecteert dat Microsoft Defender actief is en hierover een melding geeft, klik dan op Automatically en bevestig met Ja om te voorkomen dat deze beveiliging storend werkt. Je kunt het venster Assistent verbergen via het knopje rechtsboven. Laat het Android Studio-venster wel geopend. Dit bevat nu twee deelvensters: rechts de eigenlijke code, links de bestandsstructuur voor deze code.
De Studio-omgeving met de Kotlin-code oogt intimiderend, maar watervrees is nergens voor nodig.
Installatie en setup Cursor
Hoog tijd om AI-tovenaar Cursor erbij te halen. Open je browser en ga naar www.cursor.com. Klik op Download en voer het gedownloade exe-bestand uit.
Kies de gewenste taal, bijvoorbeeld English, ga akkoord met de licentieovereenkomst, selecteer de installatielocatie en laat de overige opties ongewijzigd. Klik op Next en vervolgens op Install. Laat Launch Cursor geselecteerd en druk op Finish.
Bij de eerste opstart kun je de meeste instellingen ongemoeid laten. Wil je AI-prompts in het Nederlands gebruiken? Vul dan Nederlands in bij Language for AI en bevestig met Continue. In het volgende venster kun je eventueel Private Mode inschakelen, zodat prompts en invoer niet worden opgeslagen. Klik op Continue en daarna op Sign Up om de AI-functionaliteit te activeren. Meld je nu in het geopende browservenster aan met je e-mailadres of via een Google- of GitHub-account. Volg de instructies en bevestig indien nodig met Yes, Log in.
De installatie en setup van Cursor heb je zo voor elkaar.
Nieuw project
Wanneer je terugkeert naar het Cursor-venster, ben je automatisch aangemeld. Aangezien zowel Cursor als Android Studio een donker thema gebruiken, kan dit in het begin wat verwarrend zijn. Je kunt het thema van Cursor daarom misschien het beste aanpassen. Ga hiervoor naar File / Preferences / Theme / Color Theme en kies bijvoorbeeld Red.
Klik in het startvenster op Open project en navigeer naar de map waarin Android Studio het project heeft opgeslagen. Standaard is dit C:\Users\AndroidStudioProjects\<app_naam>. Cursor importeert automatisch de code van je Android Studio-project. Je kunt nu AI-prompts gebruiken om je app helemaal vorm te geven.
Het project is geladen en het thema hebben we wat opvallender gemaakt.
Cursor Composer
Druk op Ctrl+I om het deelvenster Cursor Composer te openen. Rechts verschijnt nu een invoerveld waarin je je eerste AI-prompt kunt typen, oftewel je vraag of instructie.
Linksonder dit venster zie je dat standaard het AI-model Claude-3.5-sonnet wordt gebruikt. Wil je een ander model, zoals gpt-4o, klik dan op het pijlknopje en selecteer je voorkeur.
Wil je extra modellen inschakelen, klik dan op het tandwielpictogram rechtsboven, open de rubriek Models en vink de gewenste modellen aan. Let op: sommige modellen vereisen een betaalde API-sleutel, die je hier bij de juiste provider kunt invullen. In dit artikel werken we verder met het gratis Claude-3.5-sonnet.
Je kunt met verschillende AI-modellen aan de slag.
AI-prompts
Het komt erop neer dat je met prompts instructies geeft aan Cursor (Composer) om je app vorm te geven. Doe dit stapsgewijs en gestructureerd. Waarschijnlijk gebruikt je projectstructuur meerdere bestanden, zoals kt en xml. Om Cursor te dwingen hiermee rekening te houden, begin je prompts bij voorkeur met @codebase (bevestig met Enter). Dit is niet altijd nodig bij eenvoudige of algemene instructies, maar kwaad kan het eigenlijk nooit.
Hieronder een voorbeeld van een eerste prompt voor onze app Fiets of Niets:
@codebase, druk op Enter. Gebruik de gratis dienst Open-Meteo om een weersvoorspelling van de eerstvolgende 7 dagen te geven, telkens in één regel, druk op Enter.
Cursor genereert direct de nodige code (bestanden). Verschijnt de melding Accept file of Accept all, klik hierop om de aanpassingen door te voeren. Wij hebben Open-Meteo gekozen omdat deze geen API-sleutel vereist. Zo vermijd je dat Cursor een dienst gebruikt die dit wel nodig heeft. Moet er toch een sleutel worden ingevoerd, geef deze dan via een prompt aan Cursor door en vraag om deze op de juiste plek in de code te verwerken.
Alle begin is moeilijk: de eerste prompts voor de ontwikkeling van een app.
App testen
Test je app geregeld. Open het venster van Android Studio – de door Cursor gegenereerde code is hier ook opgenomen – en klik bovenaan op de groene knop Run App (Shift+F10). De app start dan in de Android-emulator, al kan dit vooral de eerste keer even duren.
Het is niet uitgesloten dat er foutmeldingen verschijnen in het deelvenster Build Output (onderaan) van Android Studio. Druk hiervoor indien nodig eerst op de knop Build in de knoppenbalk linksonder. Duiken er inderdaad foutmeldingen op (zoals ‘unresolved references’), geef deze dan via prompts door aan Cursor en vraag om ze op te lossen. Bevestig de voorgestelde wijzigingen telkens met Accept all en test opnieuw.
Cursor kan ook voorstellen om foutmeldingen uit de Logcat van Android door te geven. Open Logcat in Android Studio via de gelijknamige knop in de knoppenbalk linksonder, kopieer de meldingen met Ctrl+C en plak ze in het Cursor-promptvenster met Ctrl+V. Zijn de fouten verholpen, dan kun je de app verder vormgeven, telkens met gerichte prompts aan Cursor.
Desnoods open je de Logcat en geef je foutmeldingen als prompts aan Cursor door.
App gebruiken
Werkt je app goed en ziet deze er goed uit in de emulator, dan kun je deze overzetten naar een fysiek Android-apparaat. Je kunt hiervoor een apk-bestand laten genereren (Android Package Kit) dat alle code in één pakket verzamelt. Klik op het menuknopje linksboven in Android Studio, open bovenaan het tabblad Build en kies Build App Bundle(s)/APK(s) / Build APK(s).
Je kunt je app in een apk-bestand inpakken.
Even later verschijnt een melding en kun je hier op Locate klikken om de map in Verkenner te openen. Wil je de app installeren, stel dan het apk-bestand beschikbaar op je telefoon, bijvoorbeeld via cloudopslag, en dubbelklik erop. Zorg wel eerst dat in de Android-instellingen de installatie van onbekende apps is toegestaan (via een optie als Apps / Speciale app-toegang / Onbekende apps installeren). Je kunt het kant-en-klare apk-bestand van onze eigen Fiets of Niets-app hier downloaden.
Je kunt ook je fysieke Android-apparaat direct gebruiken via de knop Device Manager in de rechterzijbalk van Android Studio. Selecteer hier je eigen apparaat in plaats van het virtuele apparaat van de emulator, mits dit via usb is aangesloten en je de nodige machtigingen hebt ingesteld. Voor verdere details hebben we hier helaas niet de ruimte.
Of je verbindt rechtstreeks je fysieke Android-apparaat.
App-pictogram
Je kunt je app op je telefoon een eigen pictogram geven. Download of ontwerp een afbeelding, bijvoorbeeld met een AI-beeldgenerator, bij voorkeur 512 x 512 pixels, en bewaar deze (bijvoorbeeld) als png-bestand.
Open je project in Android Studio en navigeer in het linkerdeelvenster, met de projectstructuur, naar app > res. Klik met rechts op res en kies New / Image Asset. Vul bij Path het pad in naar je afbeeldingsbestand, bijvoorbeeld C:\Users<naam>\desktop\fietsofniets.png. Bevestig met Next en met Finish.
Wel zo leuk: een eigen pictogram voor je eigen app.