The first Cross-Platform App with Design On Your Mind

The first Cross-Platform App with Design On Your Mind

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:



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

                                                   <Window title=”Tab 1″>

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



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

                                                   <Window title=”Tab 2″>

                                                                          <Label>My Text</Label>





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’);



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
Teaching Course 491 – Week #1

Teaching Course 491 – Week #1

It seems like every day brings news of yet another development or venture at Shockoe; this time it was Adjunct Professor Roles at VCU. Last fall we met with the Chair of the Computer Science Department who asked Edwin and I to teach the first Mobile Development Course at VCU. Dr. Cios was very well aware with the challenges facing graduating students and the needs for skilled mobile developers in the market place. Just last year it was estimated that over of 40% of Internet Traffic was conducted through mobile devices, which means mobile is no longer something anyone can ignore, including universities.

It seems like we are approached every day by vendors, partners, clients, and developers with new mobile challenges and requests. While Shockoe is challenged every day to help build and define new mobile platforms and capabilities to solve these challenges and define new ways to solve every day problems or conduct business we feel lucky to impart some of this knowledge and experience with VCU. Although the primary purpose of the course is teach students how to develop mobile applications for iOS and Android, the students will have the opportunity to learn the fundamentals of mobile strategy, design, and key mobile application architecture techniques. We will use real world examples to give students the opportunity to learn the benefits of mobile application planning, design, development, and deployment.

While our primary purpose will be to teach and better prepare students at VCU to design and develop incredible mobile solutions, we are offering our readers the opportunity to follow along over the next 12 to 14 weeks. We will summarize our lectures and post helpful links, with the end goal of giving you some insight into our class.

The challenge for this semester’s students will be to build a classroom app. In order to do so, we took concepts from Google’s brand new Classroom App as well as the Mobile Mind Shift Book. The first and most important part of building an app is to understand the “Mobile Moment” you are solving for. To learn more about Mobile Moments and Google’s classroom app, check out the following sites.

Google Classroom App

Julie Ask’s Blog