Artikel top billede

(Foto: Computerworld)

Guide: Sådan laver du selv mobilapps helt uden at kode

Vil du prøve at lave mobilapps? Så kan du skyde en genvej med MIT App Inventor, en applikation, hvor du ikke behøver skrive så meget som en linje kode.

Af Michell Cronberg, Alt om Data

Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.

Det er nok de færreste, som vil give sig i kast med at udvikle apps til mobile platforme som Android og iOS – det lyder simpelt hen for kompliceret. Men det behøver det ikke være. Der er nemlig en genvej, MIT App Inventor, som gør det muligt at udvikle apps uden selv at skulle skrive så meget som en linje kode.

App Inventor er en webapplikation, altså et program, som kører i en webbrowser. Det blev født hos Google og efterfølgende overtaget af Massachusetts Institute of Technology (MIT) – det amerikanske svar på DTU – for omkring 10 år siden.

Applikationen benytter en blokbaseret programmeringsform, som også kendes fra programmeringssproget Scratch. Denne form for programmering gør det muligt at skabe en brugerflade ved hjælp af komponenter som tekstbokse, knapper, lister samt mere avancerede funktionalitetsbaserede komponenter som sensorer, databaser, social kommunikation og meget andet.

Denne brugerflade kan så bindes sammen med blokke med indbygget funktionalitet. På den måde kan man uden kode skabe en funktionalitet som eksempelvis denne: Når der klikkes på knappen, så find længde- og breddegrad fra GPS-komponenten, og send en SMS til et angivet nummer med besked om, hvor jeg er.

Skulle samme funktionalitet skabes i An­droid Studio, XCode eller andre udviklingsmiljøer, ville det være en langt mere kompleks opgave. I App Inventor kan en sådan applikation skabes uden installation af noget som helst og uden viden om programmering i Java eller Swift – eller om programmering i det hele taget.

Kom godt i gang

Det kræver ikke meget at komme i gang med App Inventor. Du åbner websiden http://ai2.app­inventor.mit.edu i en moderne og opdateret browser, logger ind med en (måske til formålet oprettet) Google-konto, og så er du klar til at skabe et projekt.

Klik på ”Start new project”, og opret et projekt, som du kan kalde Test. Herefter ender du i Designer-vinduet (se billede 1).

Her kan du fra venstre side i ”User interface”-rammen trække en tekstboks (”TextBox”), en knap (”Button”) og en etiket (”Label”) over på telefonen i midten af skærmen. Ret teksten på knappen til ”Sig hej” ved at klikke på knappen og finde ”Text” i ”Properties”-rammen til højre. Skriv teksten ind i tekstfeltet.

Billede 1: Når du har oprettet et projekt, ender du i ”Designer”-vinduet.

Klik på knappen ”Blocks” i øverste højre hjørne, for nu skal der skrives noget ”kode”. Klik på knappen ”Button 1” i ”Blocks”-rammen til venstre, og træk ”when Button1. Click do”-blokken ind i Viewer-rammen i midten.

Klik på knappen ”Designer” øverst til højre. Vælg ”Label” til venstre, og træk ”Set Label1 Text” ind i Click-blokken. Find Join-blokken under Build in > Text i rammen til venstre, og træk den ind i ”Set Label1 Text”-blokken.

Den giver mulighed for at kombinere to tekster til en. Den ene kan være en statisk tekst, du kan trække fra Build in > Text og give værdien ”Hej”. Den anden kan være indholdet fra tekstboksen. Den kan tilføjes ved at klikke på ”Textbox1” og trække ”Textbox1.Text” til ”Join”-blokken. Så vil det se ud som på billede 2.

Billede 2: Med blokken ”Join” kan du for eksempel kombinere to tekster.

Afprøvning af appen

Næste skridt er at prøve applikationen, og det kan gøres på flere måder – se Connect-menuen (figur 3). Nemmest er at installere MIT AI Companion fra Play Store (Android eller iOS) på telefonen og så klikke ”AI Companion”.

Det vil skabe en QR-kode, som kan scannes af den netop installerede applikation (billede 4). Herefter åbner applikationen på telefonen, og der kan nu indtastes et navn i tekstboksen og klikkes på knappen. Nu skulle ”Hej” og det indtastede navn dukke op i etiketten – se billede 5.

Da applikationen er tilknyttet websiden, kan du prøve at tilrette eksempelvis teksten på knappen. Læg mærke til, at teksten også ændrer sig på telefonen, og det er pointen i udviklingsprocessen. Det er supernemt at ændre og se resultatet omgående.

Billede 3: Ved hjælp af MIT AI Companion fra Play Store kan appen testes.

Så skal den installeres

Når applikationen er færdig, kan den nemt installeres. I skrivende stund kan den kun installeres på Android, men en installationsprocedure på iOS er lige på trapperne.

I Android sker installationen ved at klikke på ”Android App” i ”Build”-menuen, hvorefter applikationen kompileres på serveren, og efter lidt tid kan den downloades til installation som en apk-fil (billede 6). Også her er en ellers meget kompliceret proces kogt ned til næsten ingenting.

Billede 4: Herefter vises en QR-kode, du kan bruge til at aktivere testen.

De mange kontroller

Noget af det, som gør mobil udvikling kompleks, er kommunikation med telefonens styresystem for eksempelvis at arbejde med sms, gps, nfc og meget andet. I App Inventor er det ikke svært. Du skal blot lede efter en ønsket komponent, og så ”kode” med blokke.

I den grundlæggende installation findes der komponenter relateret til kort (Open­StreetMap), et hav af sensorer til acceleration, scanner, ur, gyro, lys, lokation, nfc og mange andre. Der er kommunikation over sms, Twitter, e-mail, telefon og web samt mulighed for Bluetooth og seriel kommunikation.

Derfor kan en applikation med meget kompliceret funktionalitet skabes i App Inventor på meget kort tid. Du behøver eksempelvis ikke vide en masse om, hvordan man via kode sender en sms – det handler blot om at sætte et par blokke sammen.

Billede 5: Appen er på mobilen, og du kan indtaste et navn i tekstboksen.

Nærværende skribent er selv udvikler, og hvis man med den baggrund fik til opgave at skabe en mobilapplikation, som eksempelvis sætter telefonen på lydløs, når den er 50 meter inden for et specifikt område på et kort, ville det koste en del blod, sved og tårer i et udviklingsmiljø som Android Studio.

I App Inventor tager det maksimalt 10 minutter. Det er ret tankevækkende og er en af grundene til, at App Inventor bruges i professionel udvikling, hvor applikationen især foretrækkes som værktøj til at skabe en nem og funktionel prototype.

Der er masser af muligheder for udvikling af applikationer. Da denne skribents yngste dreng var yngre, udviklede vi en ”Sms, hvor jeg er, til mor og far”-applikation og installerede på hans telefon. Da han blev ældre, udviklede han selv et Yatzy-spil og en nem beregning af sinus, cosinus og tangens.

Billede 6: I Android kan appen downloades til installation som en apk-fil.

Til den ældste, som er tømrerlærling, har vi udviklet en app med nem tilgang til de beregninger, han bruger i hverdagen – herunder eksempelvis beregning af skønnet forbrug af tagsten og tid, når der skal lægges et tag.

Der er masser af muligheder i MIT App Inventor, men selvom det er nemt at flytte en applikation til Google Playstore, skal man nok ikke regne med, at den bliver en kæmpe succes. Det skyldes især de begrænsede muligheder i udvikling af brugerflade. Abstraktion har trods alt en pris.

Men personlige projekter af enhver art er absolut mulige. Der er ligeledes masser af dokumentation og inspiration at finde på nettet – både på projektets hjemmeside samt i en masse YouTube-videoer, naturligvis.
Prøv det selv. Du vil uden tvivl opdage, at det både er simpelt og sjovt – slip bare kreativiteten løs.