So, you’ve got a great idea but you need some help. iOS, Android, Windows, Web? Smartphone or Tablet? What platform and device should you focus on when building your first app? While I can’t answer that for you, I know there are tools that can help along the way, and that was the first topic we focused on this week.

Start by downloading the necessary tools so you can follow along, don’t worry they are all free, as long as it is for personal use. Once you are all set up, lets build your first app. We will call it the “Click Here App”.  If you are unsure as to what tools you need, check the helpful link section of this blog, but its always helpful to start at the Appcelerator Quick Start Site

Now, open Titanium on your Mac (For PC users, your first step is to buy a good hardware! I am kidding, but seriously do yourself a favor)

VCU_Week 2

Select “New Mobile App Project” and then select “Alloy” and “Two Tabbed Alloy Application”.

VCU_Week 2b

  1. Project Name: Give your app a name
  2. App ID: Reverse domain notation, you will need to use your own domain to deploy the app, but for now you can use anything.
  3. Deployment Targets: Lets focus on Android and iPhone for your first app, make sure these are selected and the rest are unselected

Lets start by changing our first files: index.xml, index.js, and index.tss

  1. In the first file, index.xml, you will add the following code:

<Alloy>

     <TabGroup>

                            <Tab title=”Tab 1″ icon=”KS_nav_ui.png”>

                                                   <Window title=”Tab 1″>

                                                                          <Label id = “Label1” onClick = ‘onTestClick’>Click Me</Label>

                                                   </Window>

                            </Tab>

                            <Tab title=”Tab 2″ icon=”KS_nav_views.png”>

                                                   <Window title=”Tab 2″>

                                                                          <Label>My Text</Label>

                                                   </Window>

                            </Tab>

     </TabGroup>

</Alloy>

In this file, we will focus on three things: (1) Assigning an ID for our Label; (2) Assigning a function to the Label; and finally (3) Changing the name of the field Next, lets update index.js; warning you will be adding your first function to the app

function onTestClick(evt) {

     alert(‘Hello Window 1’);

}

$.index.open();

Function, what?!?!  You just built your first function.

Now lets add some color, lets change the index.tss file. Its only two changes: Updating the label name and the label name color, lets make it orange, like Shockoe’s Logo

“Window”: {

     backgroundColor: “#fff”

}

“#Label1”: {

     width: Ti.UI.SIZE,

     height: Ti.UI.SIZE,

     color: “orange”,

     font: {

                            fontSize: 30,

                            fontFamily: ‘Helvetica Neue’

     },

     textAlign: ‘center’

}

VCU_Week 2c

There you have it, your first Titanium App for two platforms: Android and iOS. Your last step is to run it on the simulator. Lets run our first app on an iPhone 5s. Make sure that device is selected before you run your app.

VCU_Week 2d

Now that you are ready, lets talk design. Lets start with basics, but log in next week as we go into details. Lets start with basic design fundamentals to keep in mind:

  • The UI should be clear enough to help people interact with content; not compete with it
  • Text, Images, and Icons should be clear and legible at every size (Make sure to follow the guidelines)
  • Functionality should motivate the design
  • Visual layers and realistic motion are important to increase users understanding
  • Make sure you design for all devices and modes to make users enjoy your content

Apps don’t come with user manuals, but devices make it very easy to delete an unwanted app.

Some of the general design principles to keep in mind when designing your first app are: (1) Functional Design; (2) Design Consistency; (3) Feedback; (4) Real-life animation; and (5) User Autonomy

Helpful Getting Started Links:

Development Support:

  1. Titanium Studio
  2. Titanium Setup – Getting Started
  3. Xcode
  4. Android SDK
  5. Genymotion

Design Sites:

  1. Human Interface Guidelines
  2. Android Design
  3. Material Design