Skapa din dröm-app utan programmering

I den här artikeln går jag igenom hur du skapar appar till Iphone och Android utan att du behöver kunna programmeringsspråken till de mobila operativsystemen. Jag kommer börja med att ta en titt på Android och längre ner hittar du en guide till Iphone. Igår nåddes vi dock av den tråkiga nyheten att App-inventor, sajten som används för att skapa Android-appar, inte längre kommer drivas vidare av Google efter årsskiftet. Verktyget kommer bli öppen källkod men det kommer också påverka funktionaliteten en del. Därför bör du, om du tänkt skapa en Android-app via den här guiden, se till att du slutför projektet före årsskiftet så att du inte springer på några problem i slutfasen. Men nu kör vi!

SKAPA EN ANDROID-APP
App-inventor är Googles egna utvecklarverktyg för de som inte kan programmera

Pris: Gratis
Kompatibilitet dator: Windows, Mac, Linux
Hur funkar det: Du bygger appen genom att lägga till bilder och pussla ihop koder
Vad behövs: Du behöver en dator med Java installerat och ett Google-medlemskap.
Länk: appinventor.googlelabs.com



Så fungerar App Inventor
1. Skapa konto. Surfa in på appinventor.googlelabs.com och skapa ett konto, om du redan har ett Google-konto kan du logga in och använda dig av det istället. Välj därefter My Projects längst upp i högra hörnet och tryck på New längst upp i vänstra hörnet när du kommit in i din projektmapp. Döp din app till något passande, därefter skickas du vidare till design-delen.

2. Konceptet. App Inventor är uppdelat i tre olika delar, det första är webbverktyget som du befinner dig i nu, här sköter du designen på appen. Det andra är en så kallad Blocks Editor där du pusslar ihop koder för att skapa funktioner i appen. Slutligen finns det även en simulator där du kan följa utvecklingen av din app i realtid.

3. Så funkar design-delen. Design-verktyget är uppdelat i tre delar, till vänster ser du alla paletter som du använder för att exempelvis skapa knappar, lägga in bilder och annat, i mitten ser du en ruta som ska föreställa din app och till höger gör du inställningar för de paletter du lägger till. Du kan börja med att döpa skärmen (Screen 1) till ditt appnamn - fyll helt enkelt i ditt app-namn längst ner till höger i rutan under Title. Här kan du även lägga till en bakgrundsbild och en app-ikon. Det andra du bör göra är att välja hur du vill att appens olika delar ska visas på skärmen, det gör du genom att välja olika Screen Arrangements i vänstermenyn. Vill du till exempel ha en stor bild och därefter knappar under drar du två HorizontalArrangements till mittendelen. Därefter drar du in de delar du vill att din app ska bestå av. Vill du till exempel ha en bild i den övre Arrangementrutan och knappar i den undre drar du helt sonika en Image till den övre rutan och knappar till den undre. Glöm inte att döpa varje del till ett bra namn genom att klicka på den och välja rename i botten av sidan.

4. Så funkar Blocks Editor. Om du i design-delen klickar på Blocks Editor så kommer du ladda ner och öppna nästa del i App Inventor, delen där det magiska händer. Här hittar du pusselbitar som representerar olika delar i din app och olika funktioner. Genom att pussla ihop dessa skapar du funktionalitet i din app.

Skapa en simpel app
Vi kommer nu att skapa en väldigt simpel app bestående av tre knappar och en bild på en hund. Knapparna kommer få hunden att säga olika saker.

1. Arrangera rutorna. Det första du bör göra är att välja hur du vill att appens olika delar ska visas på skärmen, det gör du genom att välja olika Screen Arrangements i vänstermenyn. Jag behöver två horisontella rutor, en för bilden på hunden och en för menyn. Jag drar två HorizontalArrangement och väljer Fit parent under Properties Width och Height på dessa.

2. Knappar. Därefter drar jag tre knappar (Basic → Button) till den nedre utav de två horisontella rutorna. Jag döper knapparna genom att markera dem och skriva in texten i den vita rutan under Text till höger i gränssnittet (Properties). Jag döper även knapparna genom att markera dem i Components och välja Rename så att de har namn som representerar dess funktion.

3. Infoga bild. Du måste ladda upp den bild du vill använda till App Inventor, och för att göra det drar du Image-paletten till mittenrutan och under properties klickar du på den vita rutan under Picture, välj Add och därefter bläddra, leta sedan upp din bild och ladda upp den.

4. Ljud. För att motivet på din bild ska kunna säga något måste du även dra tre Sound-paletter till mittenrutan, en för varje knapp och ladda upp tre ljudklipp. Jag spelar in tre ljudklipp via programmet Mp3mymp3. Markera varje Sound-palett och under Properties Source klickar du på den vita rutan, väljer Add och letar upp ditt ljudklipp. Glöm inte att döpa ljud-paletterna.

5. Öppna Blocks Editor. Klicka på Blocks Editor i designdelen om du inte redan har den öppen och välj att öppna den när du får frågan om vad du vill göra med filen. När du väl fått igång den klickar du på New emulator för att skapa en simulator där du kan se appen, när den laddat klart klickar du på Add to device och väljer din emulator i listan.

6. Koppla ihop knapp med ljud. För att få varje knapp att göra ett ljud ifrån sig måste du koppla ihop dem. Blocks Editor fungerar på så vis att du pusslar ihop olika delar för att skapa funktioner. Klicka på My Blocks i vänstermenyn så att du får upp de delar du skapat i designdelen. Välj den första knappen och tryck på det första alternativet: when.namn.click.do, där jag skriver namn kommer du istället ha ditt knappnamn, och dra ut den pusselbiten på den fria ytan. Nu har du en pusselbit som säger att när du klickar på den här knappen ska något hända. Men vad är det som ska hända? Jo, den ska ju spela upp ett ljud. Klicka därför på den ljudfil som hör ihop med knappen, i mitt fall heter ljudfilen hejljud eftersom jag valde att börja med hej-knappen, och välj call.namnpåljud.play och dra den till mittendelen av den andra pusselbiten. Nu har du ett pussel som säger: när användaren klickar på hej-knappen ska appen spela upp hej-ljudet.

7. Upprepa. Nu måste du upprepa processen så att även de andra två knapparna får ljud kopplade till sig. Du kan hela tiden testa så att appen fungerar via simulatorn.

När appen är klar
När du har byggt din dröm-app och du känner att den är helt färdig väljer du Package for phone i designdelen och skapar en apk-fil som du kan installera i din mobiltelefon.

SKAPA EN IPHONE-APP
Red Foundry är ett webbverktyg där du kan skapa appar utan programmeringskunskap

Hur funkar det: Du bygger appen via färdiga moduler.
Vad behövs: Du måste vara med i Apples utvecklarprogram, det kostar 99 dollar (cirka 625 kronor) per år, du behöver även en dator och en Iphone, Ipad eller Ipod Touch.
Länk: www.redfoundry.com
Priser: Det finns fyra olika kontotyper: Ett gratismedlemskap som gör att du kan publicera din app, ett silvermedlemskap (250 kronor per månad) där du även får tillgång till statistikverktyget, ett guldmedlemskap (625 kronor per månad) som utöver det även ger dig 50 000 pushmeddelanden per månad och möjlighet att hantera användarnas interaktion med appen, och slutligen ett platinamedlemskap (1 900 kronor per månad) som istället ger 500 000 pushmeddelanden samt telefonsupport. Det finns även ett medlemskap som riktar sig till företagare (3 800 kronor per månad) och som ger massor av extrafunktioner så som ett personligt supportteam för direkthjälp, obegränsat antal pushmeddelanden med mera. Du bestämmer dig inte för en prisplan förrän du är klar med appen och redo att publicera den.
Kompatibilitet dator: Windows- eller Mac-miljö men det är enklast att skapa alla certifikat som krävs om du har en Mac
Kompatibilitet mobila enheter: Iphone, Ipad eller Ipod Touch
Rekommenderade webbläsare: Chrome eller Safari

Kom igång i sex enkla steg
1. Skapa ett konto. Knappa in redfoundry.com i webbläsaren, skapa ett konto, logga in och välj Create an app längst upp i högra hörnet. Skriv därefter in ett namn på appen och tryck på Create app.

Välj därefter det första alternativet, use the Module Builder för det andra alternativet kräver viss programmeringskunskap.

2. Så funkar det. Du möts nu av det gränssnitt som du kommer arbeta i under tiden som du skapar din app. Längst till vänster har du huvudmenyn där du sköter app-ikoner, inställningar för appen i allmänhet och eventuella sociala nätverkskopplingar samt temat för din app. Underst hittar du alternativet Add a tab module. Varje modul är en egen del i din app. Hemskärmen för appen är till exempel en modul och om du vill ha en facebooksida eller en karta så är det en annan modul. Det är de här modulerna som tillsammans bildar din app. Klicka på Add a tab module.

3. Börja bygga. Nu får du upp en pop-up-ruta med massvis av olika färdiga moduler som du kan välja bland. Om du tänkt skapa en hemskärm med menyer väljer du bland meny-modulerna, vill du lägga till en foto-modul väljer du Photo sparks, vill du lägga till en karta med intressepunkter väljer du Map Sparks och så vidare.

Jag väljer att skapa en RSS Spark som heter Foundry Magazine, döper den till Iphonebloggen och väljer Add, du kan så klart välja en annan modul. Därefter lägger jag till rss-adressen till Mobils Iphoneblogg och trycker Save i nederkant.

4. Fler moduler. Upprepa processen för varje funktion/del som du vill ha med i din app. Jag lägger till ytterligare två RSS-moduler (två andra sorter) för våra två andra bloggar här på Mobil samt en kontakt-modul (Text and content sparks) som heter Foundry about us och den döper jag till Hem. Slutligen justerar jag ordningen på alla moduler genom att dra i pilarna till vänster om dem så att kontakt-modulen blir det första användaren möter när den öppnar appen.

5. Personifiera modulerna. För att varje modul ska innehålla rätt information, rätt språk och annat viktigt måste du nu klicka på dem och fylla i det. Det är olika information som krävs för olika moduler. Kartmodulen kräver till exempel att du skapar en databas med de intressepunkter du vill ha med, menymodulerna kräver att du lägger till undermenyer och fyller i titel på dem med mera. Glöm inte trycka på Save efter att du ändrat klart i modulen.

Jag klickar mig in på varje RSS-modul, fyller i webbadressen till mina bloggars RSS-flöden och byter ut texterna på knappar och annat till svenska. Jag kan även välja att byta ut ikoner och annat för att personifiera utseendet på modulen. I kontakt-modulen fyller jag i den text jag vill att modulen ska innehålla, kontaktuppgifter och svenska rubriker.

6. Ikoner, laddningsskärmar och inställningar. I Red Foundrys webbverktyg kan du även ladda upp och lägga till de ikoner och bilder du vill att appen ska använda sig av. Du informeras tydligt om vilka mått alla bilder ska ha under respektive menyalternativ. Du kan även experimentera med olika utseendeteman på appen genom att välja App Theme.

Testa appen fortlöpande i mobilen eller surfplattan
Förr kunde du ladda ner testappen Viz direkt i App Store, det kan du inte längre. För att kunna följa utvecklingen av appen direkt i mobilen eller surfplattan måste du vara medlem i Apples utvecklarprogram, det behöver du ändå vara för att i ett senare skede kunna publicera appen i App Store. När du har betalat och blivit godkänd som medlem måste du logga in och välja Ios Provisioning Portal där du registrerar den enhet du vill använda för test av appen, skapa ett distributionscertifikat, ett App ID och en så kallad distribution provisioning.

I din dator behöver du även skapa ett p12-certifikat. Därefter laddar du ner till din distribution provisioning profile till din dator för att slutligen ladda upp både den och ditt p12-certifikat till Viz-byggaren hos Red Foundry. Sistnämnda hittar du genom att logga in på ditt Red Foundry-konto och välja Get Viz i webbläsarverktyget.