Develop your first mobile App for iOS and Android
2 likes2,337 views
This document provides instructions for building a mobile app using Appcelerator Titanium. It begins by explaining the objectives of building an app and the assumptions about the intended audience's experience level. It then provides an overview of Titanium, describing it as a JavaScript SDK that allows building native apps for iOS, Android, and other platforms. The document proceeds to guide building an example "Jokes" app, demonstrating how to set up the project structure in XML, apply styles, and construct the user interface with elements like windows, views, and table views.
Develop your first mobile App for iOS and Android
- 2. Develop your first mobile App for iOS and Android! Ricardo Alcocer // Platform Evangelist! March 12, 2013! Silicon Valley Titanium User Group!
- 3. ! Format of this talk!
- 4. Our objective for today! ! BUILD AN APP!
- 5. Base assumptions! • You are not a “hardcore coder”! • You know how to build websites with HTML and CSS! • You have seen at least a little bit of Javascript!
- 6. About Appcelerator Titanium! • Not a language, but a high-level Javascript SDK! • Allows you build Native Apps for iOS (iPhone, iPod Touch, iPad), Android (Phone and Tablet), Mobile Web, Blackberry 10 (beta), soon for Windows 8 and Tizen! • Free/Open Source!! • It’s Native, NOT web app !
- 7. The design of your App is SUPER important! If the users don't like how your App LOOKS ! ! they will delete it!! h"p://www.itexico.com/blog/bid/91499/Why-‐your-‐Mobile-‐App-‐s-‐UX-‐UI-‐must-‐be-‐Awesome
- 9. Harmony between design and functionalities!
- 10. The MVC Pattern! JS Model XML JS View TSS Controller User Interface Components Invisible to the end-‐user
- 11. Designers and developers can now get along! h"p://images.elephantjournal.com/wp-‐content/uploads/2012/01/dog-‐and-‐cat-‐sleeping-‐together.jpg
- 13. Make sure you download Studio!
- 14. Configure platform SDKs! SDKs allow you to compile with the naRve tools and provide you with Phone Simulators for tesRng
- 15. Success!!
- 16. Now you can follow the “Quick Start Guide”, or….!
- 17. …you can try to fly! h"p://amazingjpg.blogspot.com/2012/11/reckless-‐abandon-‐photo-‐by-‐peter-‐brannon.html
- 18. Titanium is very powerful, so better get your training wheels on! h"p://www.justsaypictures.com/images/training-‐wheels-‐01.jpg
- 19. Let’s build a “Jokes” App!
- 20. Let’s create a new project!
- 22. Select Alloy as your Titanium Project Type!
- 23. Configure your project! Name for your App In reverse URL format: ie. (com.mycompany.myapp) Select target plaYorms for this project Are you using Appcelerator Cloud Services?
- 24. Titanium Studio!
- 25. These one implement funcRonaliRes and interacRvity We won’t look at these These two work together to build UI Remember?
- 26. Running an App! You’ll only see the target plaYorms you explicitly configured iPhone is only available on Mac Android is available on Win, Mac and Linux
- 27. Default App running on iPhone Simulator!
- 28. Default index.xml! <Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy>
- 29. Objects in index.xml! <Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy>
- 30. index.xml + index.tss working together! XML <Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy> TSS ".container": { backgroundColor:"white" }, "Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000" }
- 31. ! Enough of the basics. Let’s get started!!
- 32. Back to our “Jokes” App!
- 33. Thinking as a Web developer! PAGE DIV DIV DIV DIV DIV DIV DIV DIV
- 34. Thinking as a Web developer! PAGE DIV DIV DIV DIV
- 35. Native iOS and Andoroid UI Elements! h"p://www.teehanlax.com/blog/ios-‐6-‐gui-‐psd-‐iphone-‐5/ h"p://www.teehanlax.com/blog/android-‐2-‐3-‐4-‐gui-‐psd-‐high-‐density/
- 36. Titanium allows you to use native platform elements! h"p://docs.appcelerator.com/Rtanium/3.0/#!/api
- 37. The vocabulary is well documented! h"p://docs.appcelerator.com/Rtanium/3.0/#!/api/Titanium.UI.Window
- 38. In Titanium Terms! Window VIEW VIEW VIEW TableView VIEW VIEW VIEW VIEW VIEW
- 39. In Titanium Terms! WINDOW VIEW VIEW VIEW VIEW
- 40. Building the App Structure (XML)! Expected Result <Alloy> <Window class="container"> <View id="header"> <View id="appicon"></View> <Label id="apptitle">Funny Stuff</Label> </View> <TableView id="mainlist"> <TableViewRow id="listrow"> <View id="rowContainer"> <View id="rowIcon"></View> <Label id="rowTitle">Some Title</Label> <View id="rowTypeContainer"> <Label id="rowTypeCaption">Type:</Label> <Label id="rowTypeData">Some Type</Label> </View> </View> </TableViewRow> </TableView> </Window> </Alloy>
- 41. Building the App Structure (XML)! Expected Result <Alloy> <Window class="container"> <View id="header"> <View id="appicon"></View> <Label id="apptitle">Funny Stuff</Label> </View> <TableView id="mainlist"> <TableViewRow id="listrow"> <View id="rowContainer"> <View id="rowIcon"></View> <Label id="rowTitle">Some Title</Label> <View id="rowTypeContainer"> <Label id="rowTypeCaption">Type:</Label> <Label id="rowTypeData">Some Type</Label> </View> </View> </TableViewRow> </TableView> </Window> </Alloy>
- 42. Hey! That’s not what I wanted! We need to apply styling to the elements. Let’s start with container and header
- 43. Styling the main “container” and “header”! ".container": { backgroundColor:"white", layout: 'vertical' }, "#header":{ height: "50dp", backgroundColor: "blue" } Next: the “appicon” area
- 44. Styling the “appicon”! "#appicon":{ width: "50dp", height: "50dp", left: "0", backgroundColor: "#fff" } Next: let’s specify a height for the “rowContainer”
- 45. The App so far! "#rowContainer":{ height: "60dp" } Next: the “rowIcon” area
- 46. The App so far! "#rowIcon":{ lek: “5dp”, height: "50dp", width: "50dp", backgroundColor: "red " } Next: the rest of the elements in the “rowContainer”
- 47. The App so far! "#rowTitle":{ lek: "60dp", top: "5dp", width: Ti.UI.SIZE, }, "#rowTypeContainer":{ bo"om: "5dp", height: "20dp", width: Ti.UI.SIZE, layout: "horizontal", lek: "60dp" }, "#rowTypeCapRon":{ height: Ti.UI.SIZE, width: Ti.UI.SIZE }, "#rowTypeData":{ height: Ti.UI.SIZE, width: Ti.UI.SIZE } Next: some colors on the row elements
- 48. The App so far! "#rowTypeCapRon":{ height: Ti.UI.SIZE, width: Ti.UI.SIZE, font: { fontSize: "12dp" } }, "#rowTypeData":{ height: Ti.UI.SIZE, width: Ti.UI.SIZE, font: { fontSize: "12dp" } } Next: some colors on the “header” area
- 49. The App so far! "#header":{ height: "50dp", backgroundColor: "#4698D6" }, "#appRtle":{ font: { fontSize: "20dp", fontWeight: "bold" }, color: "#fff" } Next: more styling on the table rows
- 50. The App so far! "#rowContainer":{ height: "60dp", top: "5dp", right: "5dp", bo"om: "5dp", lek: "5dp", borderWidth: 1, borderColor: "#cacaca", borderRadius: 5 } Next: some more colors on the table row
- 51. The App so far! "#rowContainer":{ height: "60dp", top: "5dp", right: "5dp", bo"om: "5dp", lek: "5dp", backgroundColor: "#f9f9f9", borderWidth: 1, borderColor: "#cacaca", borderRadius: 5 }, "#rowTypeCapRon":{ height: Ti.UI.SIZE, width: Ti.UI.SIZE, font: { fontSize: "12dp", fontWeight: "bold" }, color: "#B73B22" } Next: the icon on the row
- 52. The App so far! Images live inside the /assets folder. We’ll make this change on the XML, so we can assign different images to each row: <View id="rowIcon" backgroundImage="/happyface.png"></View> Next: the icon on the “header”
- 53. The App so far! "#appicon":{ width: "50dp", height: "50dp", lek: "0", backgroundImage: "/topicon.png" } Finally: some real data on the table row
- 54. The App so far! Go to your index.xml file and change the placeholder data <TableViewRow id="listrow"> <View id="rowContainer"> <View id="rowIcon" backgroundImage="/happyface.png"></View> <Label id="rowTitle">Why did the turkey cross the road?</Label> <View id="rowTypeContainer"> <Label id="rowTypeCapRon">Type:</Label> <Label id="rowTypeData">Joke</Label> </View> </View> </TableViewRow> To add more rows, copy and paste this code block!
- 55. The finalized main screen!!
- 56. The App so far! Use the same procedure to create the template for the second page. I’ll leave that to you TIPS: 1. In Studio, right-‐click in the files area, select New > Alloy Controller 2. You could move ALL your TSS to “app.tss”. This is a global file that holds styling that will be shared by all screens
- 57. A little bit of code to link both files (1/4)! The index.xml file needs to know what to do when you click on the rows <TableView id="mainlist" onClick="onTableClick"> <TableViewRow id="listrow" ezawin="turkeycrossing"> The name of a previously created XML file
- 58. A little bit of code to link both files (2/4)! The index.js needs to define the acRon for onTableClick var ezR=require('ezR'); funcRon onTableClick(e){ ezR.openWinFromRow(e.rowData); } $.index.open(); Remember: every screen or controller is a combinaRon of 3 files: XML, TSS, JS
- 59. A little bit of code to link both files (3/4)! On each “joke” page, define the acRon for the “back” bu"on <Bu"on id="backbu"on" plaYorm="ios" onClick="closeme">Back</Bu"on>
- 60. A little bit of code to link both files (4/4)! Define the acRon for the closeme var ezR=require('ezR'); funcRon closeme(e){ ezR.closeWin($.turkeycrossing); }
- 61. Startup images and App Icons! Titanium provides templates for all the images you need. Simply replace with your own.
- 63. The same code could be repurposed!
- 64. Some Apps built with Titanium!
- 65. Much more! • Command-line interface! • Modules, Widgets, Sync Adapters! • ACS – Appcelerator Cloud Services! • Gaming via Lanica.com! • Enterprise-ready!!
- 66. Code + Slides! Code available at ! http://github.com/ricardoalcocer! ! Slides available at! http://speakerdeck.com/ricardoalcocer! http://slideshare.net/ralcocer! ! !
- 67. Community Support! ! ! Appcelerator Q&A ! https://developer.appcelerator.com/questions/newest! ! Twitter! https://twitter.com/appcelerator! ! ! !
- 68. ? Questions? !
- 69. Thank you! ralcocer@appcelerator.com! ! Twitter: @ricardoalcocer!