Hello World – en introduktion till programmering för Iphone

Apples IOS-plattform har vuxit till en enorm miljardindustri, inte minst tack vare de över hundra tusen registrerade utvecklare som tillsammans har pumpat ut över 800 000 appar för #Iphone och #Ipad. Många är de som har drömd om att själva sälla sig till denna skara, och det har faktiskt aldrig varit lättare att ta tag i den drömmen och göra något av det.

Att #utveckla för IOS är enklare än de flesta andra plattformar, det kryllar av guider och böcker som hjälper dig på vägen, och framför allt har det aldrig funnits ett enklare sätt att publicera program än via App Store.

Den här artikeln är den första i en serie av fyra. Här guidar 99mac dig som har en idé för en ny app eller ett nytt spel till att komma igång. Du lär dig också hur du bäst går vidare för att lära dig mer för att ha en grund att stå på för framtida programmeringsprojekt. Vem vet - kanske finns också du på #App Store snart?

Det här förväntas du ha för att kunna följa hela artikelserien:

• En någorlunda modern Mac med minst 4 gigabyte ramminne och OS X 10.7.4 eller senare för att kunna köra Apples utvecklingsverktyg.

• 99 dollar (cirka 650 kronor) för medlemskap i #IOS Developer Program – annars kan du bara köra appar i simulator och inte på en riktig Iphone eller Ipad.

• Gott om tid och viljan att verkligen komma någon vart.

• Bra engelsk läsförståelse – det finns inget sätt att komma runt att du måste kunna läsa en massa instruktioner och beskrivningar på engelska.

Stålsätt dig

Det första vi måste berätta är att trots att IOS har en av de lättaste och mest intuitiva processerna kring utvecklandet av ett nytt program handlar det ändå om programmering, design, grafisk formgivning och slit, slit och mer slit innan du kan ha en app att vara stolt över.

Det kommer ta betydligt fler timmar än att bara läsa den här artikelserien och prova våra exempel – du kommer behöva läsa på om grundläggande programmering, lära dig hundratals klasser och metoder (lugn, vi kommer till vad det är för något) och framför allt kommer du behöva prova dig fram och misslyckas många gånger med dina egna idéer. Men du ska veta att det går om du bara vill, och att inget enskilt moment är oöverkomligt eller så svårt att det krävs en civilingenjörsexamen för att förstå sig på.

I den här artikelserien kommer vi fokusera på att hjälpa dig komma över typiska fallgropar och förhoppningsvis göra vägen från fullständig novis till den som intresserade vänner frågar hur det går till.

Först det enkla. För att få en första titt på hur enkelt Apple har gjort det för utvecklare börjar vi med att installera #Xcode och köra en första superenkel testapp.

Öppna App Store och ladda ner Xcode, det är gratis. Starta programmet och ta en titt på vad som dyker upp. Det kommer verka som ett myller av kryptiska funktioner, men det mesta behöver du inte bry dig om. Inte ens när du har släppt din första app kommer du behöva veta vad alla dessa är.

Nytt projekt i Xcode.

För att testa att programmet fungerar och se vad du har att se fram emot under många timmar framöver kan du skapa ett nytt projekt och testköra det i simulatorn. Välj New -> Project från Arkivmenyn och välj Single View Application, ge det ett namn och fyll i övriga fält. Det är inte så noga den här gången.

Välkommen till Xcode.

När du har valt var projektet ska sparas öppnas det till den här vyn, där du förmodligen kan se själv att det handlar om att till exempel lägga till appens ikon och startbilder. Just nu behöver du inte göra något alls här, utan titta i listan över filer i kolumnen till vänster, och klicka på MainStoryboard.storyboard så får du fram följande vy.

Skapa en knapp.

För att du ska se något när du testkör programmet, dra in en knapp i dess så kallade Main View från listan längst nere till vänster. Skrolla tills du hittar Round Rect Button och dra helt enkelt in den i fönstret. Om du håller kring mitten av det kommer du se riktlinjer som hjälper dig att placera den precis i mitten. Dubbelklicka därefter på knappen och fyll i valfri text som ska synas på den. Klicka sedan på knappen Run längst upp till vänster (se till att det till höger om denna står ”Iphone 6.0 Simulator”).

Din första IOS-applikation i simulatorn.

Så här ser din superenkla app ut i simulatorn. Om det ligger i ett mindre och mer Iphoneliknande fönster kan du byta till Iphone 5-simulatorn i menyn Hardware -> Device och köra igen.

Hur du gör för att köra appen i din Iphone eller Ipad återkommer vi till en senare artikel – det kräver nämligen först medlemskap i IOS Developer Program som kostar cirka 650 kronor.

Det bästa är att först smaka lite på programmering och utveckling innan du bestämmer dig, men när du väl har gjort det är det en billig penning för allt du får för pengarna.

Ta en titt på gränssnittet

Innan vi kör igång och lägger till lite kod ska vi ta en liten koll på gränssnittet i Xcode så att du vet vad vi pratar om när vi senare börjar prata om att dra en outlet från en knapp till sitt interface och liknande saker som just nu låter som rappakalja.

Gränssnittet i Xcode.

1. Run och Stop är ganska självklara. Den tredje knappen använder du för att ställa in hur appen ska köras – via simulatorn eller via en inkopplad Iphone eller Ipad.

2. Vänsterkolumnen listar alla filer i projektet, både klasser, resurser som bilder och andra filer.

3. Storyboards kallar Apple numera de grafiska representationerna av ett programs layout av knappar, bilder, etiketter och andra element. Så här ser det ut när du redigerar dessa.

4. En kodfil ser ut så här. Notera att texten får olika färger – varje färg står för en viss typ av kod. När du skriver in ny kod får den automatiskt rätt färg.

5. Xcode används med fördel med två filer öppna sida vid sida. När du har den högra redigeraren aktiverad kan du ställa in vad som ska visas där härifrån. Assistant Editor innebär att programmet automatiskt byter vad som visas i den högra redigeraren när du öppnar en ny fil i den vänstra. Här öppnades den så kallade interface-fil (.h) som hör ihop med den Storyboard som vi öppnade till vänster.

6. Högerkolumnen har information om enskilda objekt, och en massa andra detaljer som inställningar av storlek och mycket annat. Vi kommer återkomma hit senare.
   

7. Längst ner till höger hittar du biblioteket över Cocoa Touch-objekt som du kan dra in i en Storyboard.

En första smak av programkod

Så här långt har du inte sett en enda rad programkod, och du ska veta att så ofta är fallet – rent kodande står oftast för 20-30 procent av en utvecklares tid, även om det så klart är väsentligt arbete.

För att avsluta den här inledande artikeln gör vi som alla andra alltid har gjort och skapar ett så kallat Hello World-program. Men istället för att bara skriva text på skärmen – det krävde ju uppenbarligen ingen kod i IOS – gör vi en knapp med texten ”Hej Iphone!” som får Iphone att svara ”Hej du!” när du trycker på den.

Än så länge går vi inte allt för djupt in i vad de olika delarna av koden gör, men läs hela koden vi skriver och skriv in den själv – det är aldrig bra att kopiera annan kod rakt av om du inte redan är helt säker på hur den fungerar och vad den gör.

Storyboard-vyn i Xcode.

Först byter vi text på knappen vi skapade tidigare, till ”Hej Iphone!”. Öppna sedan Assistant Editor så att du får din Storyboard och interface-filen för din ViewController sida vid sida. En ViewController är en så kallad klass, som agerar mellanhand mellan en View som visar innehåll (till exempel knappen du just lade till) och data i programmet.

Denna programmeringsmodell kallas Model-View-Controller (MVC) och är det dominerande sättet att dela in alla IOS-appar förutom spel. Model står för datan i appen, alltså exempelvis en databas över kontakter eller kartor som hämtas från internet.

Skapa en outlet i Xcode.

Nu ska vi göra något häftigt som Xcode har kunnat göra på sistone och som gör det mycket lättare att använda det grafiska gränssnittet för att bygga upp appen – för att skapa kontakt mellan de grafiska elementen som knappen vi nyss lade till och själva programkoden krävs något som kallas IBOutlet och IBAction. IB står för Interface Builder, Outlet är ett objekt som du påverkar i koden, till exempel en knapp, och en Action är en så kallad metod som innehåller kod som körs när något händer i appen. Metoder är Objective C:s motsvarighet till funktioner i vanliga C/C++ (som hämtar namnet från matematiken).

Markera knappen, håll pekaren över den och ctrl/höger-klicka och dra mot koden till höger. En blå linje ska nu följa pekaren. Dra tills du håller mellan raden som börjar @interface och den som börjar @end och släpp. Då dyker en liten meny upp där du kan göra inställningar. Välj Outlet, namnge den knapp och klicka Connect. Gör om proceduren, men välj Action, ge den namnet tryckaKnappen och klicka på Connect igen.

Alla outlets.

Dra en Label från listan nere till höger (ligger precis ovanför Round Rect Button). Placera någonstans ovanför knappen i huvudfönstret. Ctrl/höger-klicka och dra till interface-koden som ovan, välj Outlet och kalla den etikett.

Dra ut storleken på den så att den tar upp hela bredden på fönstret. Dubbelklicka sedan på texten och sudda så att etiketten inte har någon text från början.

Nu ska vi lägga till den lilla kod vi behöver skriva. Klicka på XXXViewController.m (XXX är de tre bokstäver du fyllde i när du skapade projektet, under termen Class Prefix).

Här ska du längst ner se metoden:

-(IBAction)tryckaKnappen:(id)sender { 
}

Detta är standardformatet på en #Objective C-metod. Vi går inte in på djupet i vad de olika delarna betyder, men vi kommer placera vår kod mellan de båda klamrarna.

Skriv in följande kod så att det ser ut så här:

-(IBAction)tryckaKnappen:(id)sender { 
    self.etikett.text = @"Hej du!"; 
}

Spara alla filerna och klicka på Run. Om allt har gått som det ska kommer du mötas av simulatorn med en ensam knapp, och när du trycker på knappen dyker texten ”Hej du!” upp där du placerade etiketten.

Här kan det hända att texten är vänsterjusterad istället för att dyka upp i mitten. Detta åtgärdar du genom att markera etiketten, klicka på den fjärde lilla symbolen från vänster i högerkolumnen, och klicka på knappen för centrerad text – inställningar för etiketter påminner väldigt mycket om inställningar i vanliga textredigerare.

Din första färdiga applikation!

Nästa steg

Så, nu har du tagit det första steget på vägen mot att bli en IOS-utvecklare! Det var inte mycket kod, men Apple har också ansträngt sig för att göra det så enkelt som möjligt för utvecklare.

En av de viktigaste poängerna med det här sättet att utveckla är att du i princip bara behöver skriva kod för just dina unika funktioner – allt som kan standardiseras finns redan och kan läggas till grafiskt eller med väldigt lite kod.

I nästa artikel i serien kommer vi titta lite mer på programmeringsspråket Objective C och Apples stora kodbibliotek för IOS – #Cocoa Touch. För dig som är ny på utveckling kommer det vara svårt att se vad som är vad här men det gör inget, huvudsaken är ändå att du börjar få ett hum om hur det hela går till rent praktiskt.