Using Appcelerator Titanium and Figma to simulate a Derby App

 For our assignment this week ( Assignment 8), my aim is for you to understand how Appcelerator Titanium would be used to build a Derby app – a Derby menu. Like last week, we will use a design/modeling tool (Figma) https://www.figma.com to design an app interface that looks like the one in Figure 10-10, p. 295. This can be an interface for iOS, Android, or Windows phone (your choice). Although we can only see a top view from the figure, several UI elements are needed to make the app functional. Our authors provide both a description and the associated JavaScript code for each UI element that can be used to create the Derby app (pp.292-307). In addition to modeling, your goal is to choose at least six (6) UI elements which you would use. Explain what and how these UI elements contribute to your app functionality as you modeled. If possible, draw a line on the interface to the UI functionality and explain. Remember that although you are using Titanium Studio, you are actually developing an iOS, Android, or Windows app. Therefore, discuss use of particulars for that platform. For example: a VIEW  is a basic UI element for either iOS or Android – Android apps always need “accelerator”  and “GPS” UI functionality; whereas these are native (built-in) for the iOS platform, etc. Discuss “JSON is your friend” (p. 302), regardless of which app platform you are building.

  • First download and install Figma (can use comparable SW of your choice) on your computer. This is same as last week.

Make one screen shot here that shows you have install the Figma wireframing tool (or a comparable tool of your choice )* You are ready to start adding UI elements for (to model) your app matching the layout shown in Figure 10-10, p. 295

  • Use Figma widgets/icons and create a mock interface (add at least six appropriate UI elements) that follow and match the Figure 10-10 example 

* Your app is using JavaScript coding, but you ARE NOT required to do/show any coding for this assignment.  Make a second screen shot showing the final placement of the UI elements on your model. Except for coding, this is a simulated app as it would appear if you used Titanium Studio. Lastly, review the coding that our authors provide (pp. 292-307); based on that coding:Write a brief explanation of each UI element you used – try to explain what specific function/method each UI provides that make your app functional.These two screen shots and UI explanations is the deliverable for Assignment. If you used supporting literature/videos other than your own, remember to properly cite and then include an APA style reference list.  

Tags: No tags