STEG FÖR STEG: BÖRJA BYGGA DIN APP


1. Starta ditt projekt. Vi ska bygga en enkel app för barn, och vi kallar den Djurkul. Till appen har vi använt fyra bilder och fem ljudfiler. Har du inga egna filer hittar du gratis ljud på Freesound (www.freesound.org) och fotografier på Morguefile (www.morguefile.com). Tänk på att filerna ska vara små och att bilderna ska få plats på skärmen. Cirka 147 punkters bredd är lagom. När allt ligger på plats öppnar du Appinventor på datorn och klickar på New project. Ge programmet ett namn (till exempel Djurkul) och klicka på OK.


2. Dra in designen. Du kommer nu till designpanelen. Till vänster hittar du en mängd designelement som du drar in i skärmen i mitten. Den visar hur appens startskärm ser ut. Längst till vänster visas designelementets egenskaper. Markerar du ett element som du lagt i skärmen kan du ändra egenskaperna.


3. Börja designa. Vår app Djurkul består av fyra bilder som fungerar som knappar. Första steget är att klicka på Button-ikonen och dra och släppa den på skärmen. Med knappen på skärmen markerad går du till Properties och klickar på rutan under Image. Välj Add och välj en fil från din dator att ladda upp. Nu har knappen förvandlats till bilden. För att bli av med texten över bilden tar du bort texten under Properties, Text.


4. Fler knappar. För att få fyra knappar upprepar du steg 3 med en ny bild för varje knapp. När du är klar ligger det fyra knappar i en rad. För att få lite ordning kan du använda Table Arrangement i menyn Screen Arrangement. Dra komponenten till skärmen.

Tabellen består i grundinställningen av två kolumner och två rader. Klicka och dra bildknappar till cellerna i ­tabellen, så att de får varsin ruta.


5. Byt bakgrund. Som sista designsteg lägger du till AccelerometerSensor genom att dra och släppa den från Sensors-menyn. Du lägger också till komponenten Notifier som du hittar under Other stuff. Vi återkommer till dessa senare.

Du ändrar appens bakgrundsfärg genom att klicka någonstans i appens skärm och ändra egenskaperna. I vårt exempel ändrar vi Backgroundcolor till svart, Title till Djurkul och väljer Screen­Orientation, Portrait. Du kan också definiera appens ikon. Vi valde bilden på en gris. Vill du kan du också lägga in text i appen genom att dra komponenten Label till skärmen och exempelvis skriva Klicka på bilderna i textrutan, som du hittar i egenskapsmenyn. Här kan du också ändra textens färg, storlek med mera.


6. Lägg till ljuden. Tanken är att djuren ska låta när du pekar på knapparna. I nästa steg fixar du det här, men innan dess måste du ladda upp ljuden.

I komponentmenyn Media finns Sound, och du drar denna komponent till skärmen. Den lägger sig, liksom AccelerometerSensor, under skärmen som en Non-visible component. Med Sound1 markerad går du in egenskapsmenyn under Source och får fram en rull­gardinsmeny. Här klickar du på Add och väljer ett ljud från hårddisken som ska spelas. Därefter gör du om samma procedur med de spelbara ljud du vill ha i appen.

Fakta

Svårighetsnivå: Medel.
Tid: 15 minuter.

Det här behöver du:

  • En Android-telefon och usb-drivrutiner till den.
  • Dator med Windows XP/Vista/7.
  • Webbläsaren Firefox 3.6, Safari 5.0, Chrome 4.0, IE 7 eller nyare versioner.
  • Java 6.0 installerat (kallas även Java 1.6).
  • Programmet App Inventor.
  • Bild och ljudfiler.


Det här lär du dig:

  • Hur du kommer igång med App Inventor.
  • Att skapa en enkel app som du kan köra på en Android-mobil.

Fotnot: Observera att skolan är enkel och snabb att komma igång med, men att det kräver mycket tid att skapa en bra app.