![Page 1: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/1.jpg)
Introduction to Module Development
Aaron K. SaundersFounder/CTO
Clearly Innovative Inc@aaronksaunders
![Page 2: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/2.jpg)
• Founder & CTO Clearly Innovative Inc.• Full stack development for mobile and
web integrations w/javascript & nodejs• Appcelerator Platform Evangelist; Titan• IOS and Android Module Development• 2yrs of Appcelerator blogging • Working on book with ACS and Alloy
Integration
About Me
![Page 3: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/3.jpg)
What this presentation is about
![Page 4: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/4.jpg)
• Introduction to module development, not advanced
• Basic integration of third party library and intent based library
• Understand the Titanium Studio Menu commands for scripts
• Understanding Ant build script on Android
Android Topics
![Page 5: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/5.jpg)
• Introduction to module development, not advanced
• Basic integration of third party library
• Understand the Titanium Studio Menu commands for scripts
• Understanding command line scripts
IOS Topics
![Page 6: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/6.jpg)
What this presentation is not about
![Page 7: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/7.jpg)
• Advanced view integration in modules
• Additional information on NDK integration on Android
• Addressing complex third party library conflicts on IOS
Out of Scope
![Page 8: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/8.jpg)
Android first because it needs some love
![Page 9: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/9.jpg)
• Instructions on the wiki are your best starting point
• Use the commands provided in Titanium Studio
• Be sure you have followed instructions for setting up Titanium Studio• Installing Java Development Tools
Your Environment
![Page 10: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/10.jpg)
Android Module Quickly
![Page 11: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/11.jpg)
• Select “New Titanium Mobile Module Project” from Menu
• Fill out all of the fields presented
• Save the project
• Edit the build.properties to point to the ANDROID_NDK path
• Run project
Create Android
Module
![Page 12: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/12.jpg)
Run through script on device
![Page 13: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/13.jpg)
Add some functionality
![Page 14: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/14.jpg)
Skyhook SDK
![Page 15: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/15.jpg)
• Import 3rd party library• Pass authentication credentials into
module • Setup callbacks in module• Pass results back from module• Render results
Integration Steps
![Page 16: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/16.jpg)
• Instantiate the module object
• Create a proxy object
• Provide credentials to module
• Setup success and error callback
• Execute API method on proxy object
Edit app.js
![Page 17: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/17.jpg)
Edit app.js
![Page 18: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/18.jpg)
• Remove the template method calls generated by script
• Create property for the username
• Create property for realm
Edit module file
![Page 19: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/19.jpg)
Edit module file
![Page 20: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/20.jpg)
• Get properties for username and realm; framework does most of the heavy lifting for you
• Get the callback functions from the passed in parameters
Edit proxy file
![Page 21: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/21.jpg)
Edit proxy file
![Page 22: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/22.jpg)
Edit proxy file
![Page 23: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/23.jpg)
• So now we have all the data in… We need to get the data out
• Create hashMap, add the objects and call our callback
Edit proxy file
![Page 24: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/24.jpg)
![Page 25: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/25.jpg)
Code for completed module
![Page 26: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/26.jpg)
IOS module
![Page 27: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/27.jpg)
• Instructions on the wiki are your best starting point
• Use the commands provided in Titanium Studio
• Be sure you have followed instructions for setting up Titanium Studio• Installing IOS & Xcode
Development Tools
Your Environment
![Page 28: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/28.jpg)
Card.io SDK
![Page 29: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/29.jpg)
• Import 3rd party library• Pass application key into module• Setup callbacks in module• Pass results back from module• Render results
Integration Steps
![Page 30: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/30.jpg)
Libraries &
Headers
![Page 31: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/31.jpg)
• Instantiate the module object
• Provide application key to module
• Setup success and error callback
• Execute API method on module
Edit app.js
![Page 32: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/32.jpg)
Edit app.js
![Page 33: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/33.jpg)
• Set the interface for the card.io delegate
• Set up private variable for the function callback with success or error information
Edit header file
![Page 34: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/34.jpg)
Edit header file
![Page 35: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/35.jpg)
• Remove the template method calls generated by script
• Make sure we de-allocate any memory that we have allocated
• Get the parameters from the javascript passed into objective-c
• Make card.io API call to display card capture information
Edit module file
![Page 36: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/36.jpg)
Edit module file
![Page 37: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/37.jpg)
• Handle the response from the UI after it is rendered
• Handle the two delegates from API for user cancel or data entered
• Pass a new hashmap containing results back to the javascript app
Edit module file
![Page 38: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/38.jpg)
Edit module file
![Page 39: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/39.jpg)
Edit module file
![Page 40: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/40.jpg)
OVERLOAD!!
• Blog posting next two weeks
• All code provided on github
• Additional Intent based module included
![Page 41: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/41.jpg)
![Page 42: Introduction to Module Development with Appcelerator Titanium](https://reader033.vdocument.in/reader033/viewer/2022061206/548225e0b4af9f40088b4714/html5/thumbnails/42.jpg)
Aaron K. Saunders@aaronksaunders