Introduction to Appcelerator Titanium with a full application developed and how to connect with a PHP backend (provided as well), all the sources are available in github.com/jlaso
3. Basic principles of Titanium
• Easy to learn
• Multiplatform
• Based on javascript
• Free to use
• Good documentation
• Good community
4. What is the objective of this presentation?
• Illustrate how to implement a very simple application
• Integrate with a PHP backend through an API rest
• Deal with the most normal questions that can be in a real
app
• Show how to solve the server side in PHP
• Show how to solve push notifications
5. Our application
• A simple score control for ping pong matches.
• We need to control players and their scores.
• With only two tables we can implement all the system.
Principle: the application will run in the smartphone of each
player. First: one player logs in and starts a match, then: the
opponent signs in too and selects a match by player, that
have to be online. There are one big button in the screen
that each player taps to add a point to his score, that will be
updated to the other player via push notification.
8. Need to complain certain rules on resources
• http://docs.appcelerator.com/titanium/3.0/#!/guide/
Icons_and_Splash_Screens-section-
29004897_IconsandSplashScreens-iTunesConnectAssets
10. Google Play:
every time you upload new APK needs to be another version,
how to maintain a custom AndroidManifest
http://developer.appcelerator.com/doc/mobile/android-custom-androidmanifest
17. Match life cycle
Login
Player
Start
match
Opponent
Login
Join
match
Match
started
push notification
push notification
Claim
point
Score
updated
push notification
Claim
point
You
loose
9 times
DB
18. Main screen
To enter into the application user
have to sign in with his nick and
password.
!
It's possible to register online with
the app.
19. Rival screenshot
This screenshot is updated to show
players connected sorted by distance.
!
At bottom we can see the hall of fame (*)
!
To start a match he have to choose the
number of points to win (15/21).
* Not implemented yet!
22. Force App to
portrait mode
http://docs.appcelerator.com/
titanium/3.0/#!/guide/Orientation
23. How to integrate a
third part module
Why reinvent the wheel ?
!
Use modules of third-part that are
tested and approved by
Appcelerator.
!
Or use other modules.
24. Use third-part location module
• cd project-path/Resources
• git clone https://github.com/Who828/titanium-location-module.
git location
!
Where you want to access location …!
var location = require('/location/location');
location.start({
action: function(responseLocation) {
// save gps position
appc.gps = responseLocation;
Titanium.API.info(responseLocation);
location.stop();
},
error: function() {
alert('Error: ' + e.error);
}
});
26. Graphic elements
var
win1
=
Titanium.UI.createWindow({
title:'Settings',
backgroundColor:'#fff'
});
!!
var
labelNick
=
Titanium.UI.createLabel({
color:
appc.colors.label,
text:
'User',
top:
'15dp',
font:
appc.fonts.labelFont,
textAlign:
'center',
width:
'auto'
});
win1.add(labelNick);
!!
var
inputNick
=
Titanium.UI.createTextField({
borderStyle
:
Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
backgroundColor:'#FFF',
borderColor
:
'#333',
borderWidth
:
1,
font
:
appc.fonts.inputFont,
color
:
'#336699',
top
:
'50dp',
left
:
'10%',
width
:
'80%',
height
:
'40dp',
hintText
:
'Nick',
value
:
''
});
win1.add(inputNick);
27. Multiplatform
In some cases we need to distinguish
in which platform is running our app.
var
simulator
=
(Titanium.Platform.model
==
"Simulator");
if (Titanium.Platform.osname == 'android') { … }
if ((Titanium.Platform.osname == 'ipad') ||
(Titanium.Platform.osname == 'iphone')) { … }
28. GPS
Don't forget to add permission in build/android/
AndroidManifest.xml:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
if (Titanium.Geolocation.locationServicesEnabled) {
!
// message that presents to user when device ask for permission
Titanium.Geolocation.purpose = 'Determine Current Location';
!
Titanium.Geolocation.accuracy = Titanium.Geolocation.ACCURACY_BEST;
!
Titanium.Geolocation.distanceFilter = 10;
!
Titanium.Geolocation.preferredProvider = Titanium.Geolocation.PROVIDER_GPS;
!
Titanium.Geolocation.addEventListener('location', function(e) {
if (e.error) {
alert('Error: ' + e.error);
} else {
Titanium.API.info(e.coords);
// save the coordinates in order to use later
appc.gps = e.coords;
}
});
} else {
alert('Please enable location services');
}
29. Best Practices and Recommendations
http://docs.appcelerator.com/titanium/3.0/#!/guide/
Best_Practices_and_Recommendations
• Coding Best Practices
• CommonJS Modules in Titanium
• Application Frameworks
• Image Best Practices
• Database Best Practices
• Style and Conventions
31. The server side
• API very very simplified
• Security is also simplified for educational purposes: api-key
and user & password in the major part of actions
• routes following REST standard:
• GET: get information
• PUT: modify records
• POST: create records
• DELETE: delete info
35. Push notifications
• To send push notifications to a
device through ACS first the
device need to be subscribed.
• In the login process in the app,
ACS gives a cloud id to identify
this user.
• We save this cloud id in the user
table to know how to
communicate with this user.
• And finally we can address some
kind of messages to this user.
• We need API and KEY to
establish connection with ACS
36. Routes
GET
• /api/v1/version
• /api/v1/players.json
• /api/v1/search-match
• /api/v1/match-info
PUT
• /api/v1/login
• /api/v1/set-cloud-id
• /api/v1/start-match[?toPoints=11|21]
• /api/v1/join-match/:matchId
• /api/v1/claim-point
POST
• /api/v1/register
37. Some responses to API requests (see /api-doc/v1)
• GET /api/v1/version
{"result":true,"version":"1"}
• GET /api/v1/players.json
{"result":true,"players":
[{"id":"1","nick":"player1","email":"player1@pingpongserver.ahiroo.com"},
{"id":"2","nick":"player2","email":"player2@pingpongserver.ahiroo.com"},
{"id":"3","nick":"player3","email":"player3@pingpongserver.ahiroo.com"}]}
• GET /api/v1/players.json?criteria=player1
{"result":true,"players":
[{"id":"1","nick":"player1","email":"player1@pingpongserver.ahiroo.com"}]}
• PUT /api/v1/start-match?toPoints=11
{"result":true,"match":"2"}
• GET /api/v1/search-match?criteria=player2
{"result":true,"matches":
[{"id":"2","player1":"2","player2":null,"created_at":"2014-‐08-‐03
07:47:45","finished_at":null,"score1":0,"score2":
0,"to_points":"21"}],"players":["2"]}