Develop your first mobile App for iOS and Android

download Develop your first mobile App for iOS and Android

of 70

  • date post

    14-Jan-2015
  • Category

    Technology

  • view

    1.111
  • download

    5

Embed Size (px)

description

 

Transcript of Develop your first mobile App for iOS and Android

  • 1. Develop your rst mobile Appfor iOS and Android!Ricardo Alcocer // Platform Evangelist! March 12, 2013! Silicon Valley Titanium User Group!

2. !Format of this talk! 3. Our objective for today!!BUILD AN APP! 4. 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! 5. About Appcelerator Titanium! Not a language, but a high-levelJavascript SDK! Allows you build Native Apps foriOS (iPhone, iPod Touch, iPad),Android (Phone and Tablet),Mobile Web, Blackberry 10 (beta),soon for Windows 8 and Tizen! Free/Open Source!! Its Native, NOT web app ! 6. The design of your App isSUPER important! If the users dont like howyour App LOOKS ! !they will delete it!!h"p://www.itexico.com/blog/bid/91499/Why-your-Mobile-App-s-UX-UI-must-be-Awesome 7. h"p://blog.planetargon.com/entries/2010/3/1/designer-vs-developer 8. Harmony between design and functionalities! 9. The MVC Pattern! JS Model XML JS View TSS Controller User Interface Components Invisible to the end-user 10. Designers and developers can now get along!h"p://images.elephantjournal.com/wp-content/uploads/2012/01/dog-and-cat-sleeping-together.jpg 11. Download Titanium Studio! 12. Make sure you download Studio! 13. Congure platform SDKs!SDKs allow you to compile with the naRve tools and provide you with Phone Simulators for tesRng 14. Success!! 15. Now you can follow the Quick StartGuide, or.! 16. you can try to y!h"p://amazingjpg.blogspot.com/2012/11/reckless-abandon-photo-by-peter-brannon.html 17. Titanium is very powerful, so better get your training wheels on!h"p://www.justsaypictures.com/images/training-wheels-01.jpg 18. Lets build a Jokes App! 19. Lets create a new project! 20. Select Titanium Project! 21. Select Alloy as your Titanium Project Type! 22. Congure 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? 23. Titanium Studio! 24. These one implement funcRonaliRes and interacRvity We wont look at these These two work together to build UI Remember? 25. Running an App! Youll only see the target plaYorms you explicitly congured iPhone is only available on Mac Android is available on Win, Mac and Linux 26. Default App running on iPhone Simulator! 27. Default index.xml! Hello, World 28. Objects in index.xml! Hello, World 29. index.xml + index.tss working together!XML Hello, World TSS ".container": { backgroundColor:"white" }, "Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000" } 30. !Enough of the basics.Lets get started!! 31. Back to our Jokes App! 32. Thinking as a Web developer! PAGE DIV DIV DIV DIV DIV DIV DIV DIV 33. Thinking as a Web developer! PAGE DIV DIV DIV DIV 34. 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/ 35. Titanium allows you to use native platform elements!h"p://docs.appcelerator.com/Rtanium/3.0/#!/api 36. The vocabulary is well documented!h"p://docs.appcelerator.com/Rtanium/3.0/#!/api/Titanium.UI.Window 37. In Titanium Terms!Window VIEW VIEW VIEW TableView VIEW VIEW VIEW VIEW VIEW 38. In Titanium Terms! WINDOW VIEW VIEW VIEW VIEW 39. Building the App Structure (XML)!Expected Result Funny Stuff Some Title Type: Some Type 40. Building the App Structure (XML)!Expected Result Funny Stuff Some Title Type: Some Type 41. Hey! Thats not what I wanted!We need to apply styling to the elements. Lets start with container and header 42. Styling the main container and header!".container": { backgroundColor:"white", layout: vertical }, "#header":{ height: "50dp", backgroundColor: "blue" } Next: the appicon area 43. Styling the appicon!"#appicon":{ width: "50dp", height: "50dp", left: "0", backgroundColor: "#fff" } Next: lets specify a height for the rowContainer 44. The App so far! "#rowContainer":{ height: "60dp" } Next: the rowIcon area 45. The App so far!"#rowIcon":{ lek: 5dp, height: "50dp", width: "50dp", backgroundColor: "red " } Next: the rest of the elements in the rowContainer 46. 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 47. 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 48. The App so far! "#header":{ height: "50dp", backgroundColor: "#4698D6" }, "#appRtle":{ font: { fontSize: "20dp", fontWeight: "bold" }, color: "#f" } Next: more styling on the table rows 49. 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 50. 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 51. The App so far! Images live inside the /assets folder. Well make this change on the XML, so we can assign dierent images to each row: Next: the icon on the header 52. The App so far! "#appicon":{ width: "50dp", height: "50dp", lek: "0", backgroundImage: "/topicon.png" } Finally: some real data on the table row 53. The App so far!Go to your index.xml le and change the placeholder data Why did the turkey cross the road? Type: Joke To add more rows, copy and paste this code block! 54. The nalized main screen!! 55. The App so far!Use the same procedure to create the template for the second page. Ill leave that to you TIPS: 1. In Studio, right-click in the les area, select New > Alloy Controller 2. You could move ALL your TSS to app.tss. This is a global le that holds styling that will be shared by all screens 56. A little bit of code to link both les (1/4)!The index.xml le needs to know what to do when you click on the rows The name of a previously created XML le 57. A little bit of code to link both les (2/4)!The index.js needs to dene 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 les: XML, TSS, JS 58. A little bit of code to link both les (3/4)!On each joke page, dene the acRon for the back bu"on Back"on> 59. A little bit of code to link both les (4/4)!Dene the acRon for the closeme var ezR=require(ezR); funcRon closeme(e){ ezR.closeWin($.turkeycrossing); } 60. Startup images and App Icons!Titanium provides templates for all the images you need. Simply replace with your own. 61. h"p://ratking.de/2012/10/06/mini-ludum-dare-37-a-not-game-jam-part-2/ 62. The same code could be repurposed! 63. Some Apps built with Titanium! 64. Much more! Command-line interface! Modules, Widgets, Sync Adapters! ACS Appcelerator Cloud Services! Gaming via Lanica.com! Enterprise-ready!! 65. Code + Slides!Code available at !http://github.com/ricardoalcocer!!Slides available at! http://speakerdeck.com/ricardoalcocer! http://slideshare.net/ralcocer!!! 66. Community Support!! !Appcelerator Q&A !https://developer.appcelerator.com/questions/newest! ! Twitter!https://twitter.com/appcelerator! ! ! ! 67. ? Questions? ! 68. Thank you!ralcocer@appcelerator.com!!Twitter: @ricardoalcocer!