Kom igång med Appcelerator Titanium

Appcelerator har idag ett nätverk med över 400 000 utvecklare från 150 olika länder som tillsammans har lanserat över 50 000 appar. Imponerande siffror som tydligt visar hur populärt och framgångsrikt deras Titanium SDK idag är.

Denna guide är för dig som snabbt vill komma igång med utveckling av appar, jag kommer därför inte gå in speciellt djupt i de grundläggande delarna som krävs för att komma igång. Programmering ska vara roligt och för att testa något nytt ska det inte krävas varken skolbänk eller timmar av teori. För mig har alltid det bästa sättet att lära sig varit att sitta och testa själv. ”Learning by doing” som det så fint heter.

Jag ska i denna guide förklara hur du i Titanium Studio kommer igång med utvecklingen av iOS-appar. Att sätta upp utvecklingsmiljön för Android skiljer inte så mycket men för enkelhetens skull ska jag fokusera på endast en plattform. Eftersom de appar vi bygger med Titanium översätts till respektive plattforms ursprungliga programmeringsspråk krävs det först att vi förbereder vår utvecklingsmiljö med förutsättningar för detta. I praktiken innebär detta att vi installerar de verktyg som används för att bygga appar helt från grunden i dess ursprungliga språk, för iOS-appar är detta språk Objective-C. Det fina med Appcelerator är att de sköter hela översättningen av din JavaScript-programmerade app till Objective-C med hjälp av Titanium.

Steg 1: Installera Xcode och iOS SDK

Xcode är det utvecklingsprogram som används för att utveckla iOS-appar med Objective-C och iOS SDK. Det finns två olika vägar att installera detta. Snabbast (och enklast) är att ladda ner det från App Store (direktlänk). Vi behöver inte göra några speciella inställningar i Xcode för vår utveckling med Titanium men vi bör alltid hålla Xcode uppdaterat eftersom det innehåller iOS SDK med stöd för nya enheter, buggfixar och liknande.

Steg 2: Installera och konfigurera Titanium Studio

När du installerat Xcode är det dags att ladda ner och installera Titanium Studio. I Titanium Studio kommer du sköta hela utvecklingsprocessen av din app. Du behöver skapa ett kontoAppcelerator Network för att komma åt installationsfilen. Installationen är en enkel steg-för-steg-process där du följer instruktionerna på skärmen.

Första gången du startar Titanium Studio behöver du ange ditt användarnamn och lösenord till Appcelerator Network. Du blir också ombedd att välja en mapp för ditt workspace, dvs den mapp som dina appar och dess inställningar sparas i.

Nu är du redo att skapa din första app!

Steg 3: Din första app

Skapa ett nytt projekt genom att i menyn klicka ”File -> New -> Titanium Project”.

Välj ”Default Project”, klicka ”Next”. steg1

I nästa steg får du fylla i ett antal fält för din app.

steg2

  • ”Project name” – Ange applikationens namn.
  • ”Use default location” – Vi lämnar denna kryssad och lägger automatiskt vår applikations filer i vårt fördefinierade workspace.
  • ”App Id” – En unik sträng som används för att identifiera din app. Här använder du förslagsvis en omvänd domänhierarki med appens namn som avslutning. Undvik mellanslag och andra speciella tecken.
  • ”Company/Personal URL” – Fyll i din hemsida eller låt vara ”http://”.
  • ”Titanium SDK Version” – Här väljer du den senaste versionen för att få med stöd för samtliga nya funktioner i Titanium SDK.
  • ”Deployment Targets” – Eftersom vi endast installerat Xcode med iOS SDK kan vi bara välja iPhone och iPad. Vi väljer i detta exemplet även bort ”Mobile Web”.
  • ”Cloud Settings” – Appcelerator Cloud Services eller ACL är en tjänst som Appcelerator erbjuder. Precis som namnet avslöjar så erbjuds möjligheten att hantera och lagra data i deras moln vilket innebär att du inte behöver bygga och hosta något eget backend. Detta är något som jag kommer ta upp mer i ett annat inlägg. Denna checkbox kan du låta vara kryssad men jag kommer inte gå in något på dess funktioner i denna artikel.

strukturNär du är klar och klickar på ”Finnish” skapas projektet. Ditt projekt innehåller nu all den filstruktur som är helt vital för att din app ska starta. I mappen ”Resources” sparas alla filer som används av appen. Filen ”tiapp.xml” innehåller de inställningar du valde för appen och appens versionsnummer medans ”app.js” innehåller all kod som genererats för att skapa en app innehållandes två tabbknappar och tillhörande fönster till dessa.

 // this sets the background color of the master UIView (when there are no windows/tab groups on it)
 Titanium.UI.setBackgroundColor('#000');

// create tab group
 var tabGroup = Titanium.UI.createTabGroup();

//
 // create base UI tab and root window
 //
 var win1 = Titanium.UI.createWindow({
 title:'Tab 1',
 backgroundColor:'#fff'
 });
 var tab1 = Titanium.UI.createTab({
 icon:'KS_nav_views.png',
 title:'Tab 1',
 window:win1
 });

var label1 = Titanium.UI.createLabel({
 color:'#999',
 text:'I am Window 1',
 font:{fontSize:20,fontFamily:'Helvetica Neue'},
 textAlign:'center',
 width:'auto'
 });

win1.add(label1);

//
 // create controls tab and root window
 //
 var win2 = Titanium.UI.createWindow({
 title:'Tab 2',
 backgroundColor:'#fff'
 });
 var tab2 = Titanium.UI.createTab({
 icon:'KS_nav_ui.png',
 title:'Tab 2',
 window:win2
 });

var label2 = Titanium.UI.createLabel({
 color:'#999',
 text:'I am Window 2',
 font:{fontSize:20,fontFamily:'Helvetica Neue'},
 textAlign:'center',
 width:'auto'
 });

win2.add(label2);

//
 // add tabs
 //
 tabGroup.addTab(tab1);
 tabGroup.addTab(tab2);

// open tab group
 tabGroup.open();

appOm du tidigare har programmerat JavaScript så känner du dig sannolikt ganska bekväm med den kod som genererats. Du bör med fördel gå igenom den kommenterade koden för att ganska lätt förstå uppbyggnaden av applikationen.

Du kan testköra din app i simulatorn genom att klicka i menyn ”Run -> Run”.

För att kunna köra din app direkt i din iPhone/iPad och i slutändan publicera den i App Store krävs det att du blir medlem i ”iOS Developer Program” som kostar 99$/år. Att köra dina appar i Simulatorn räcker sannolikt en bit på vägen innan suget för att kunna köra din app direkt i din enhet blir för stor.

I kommande guider ska jag gå igenom lite mer konkreta exempel och funktioner och kanske till slut sätta ihop en lite vettigare exempelapp, steg för steg.

5 reaktion på “Kom igång med Appcelerator Titanium

  1. Pingback: Skapa appar med Appcelerator Titanium | Baronen

Lämna ett svar till Béatrice Karjalainen Avbryt svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>