Introduction to Titanium and how to connect with a PHP backend

Introduction to
Titanium and how
to connect with a
PHP backend.
Patrick JL Laso
@jl_laso
www.patricklaso.com
!
!
#SMNYC
New York, October, 5th 2014

Basic principles of Titanium
• Easy to learn
• Multiplatform
• Based on javascript
• Free to use
• Good documentation
• Good community

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

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.

Prepare to publish
in Apple Market

http://docs.appcelerator.com/titanium/3.0/#!/guide/Deploying_to_iOS_devices-section-
27595262_DeployingtoiOSdevices-Obtainadevelopmentcertificate
• Obtain a development
certificate
• Register your test
devices
• Create an App ID
• Create and install a
development
provisioning profile
• Build your app,
embedding the profile
within the app's bundle

Need to complain certain rules on resources
• http://docs.appcelerator.com/titanium/3.0/#!/guide/
Icons_and_Splash_Screens-section-
29004897_IconsandSplashScreens-iTunesConnectAssets

Prepare to publish
in the Google Play

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

Prepare push
notifications for
Android

Push notifications (Android) >= 4.2.2
• http://docs.appcelerator.com/titanium/3.0/#!/guide/Configuring_push_services-section-
37551713_Configuringpushservices-
ConfiguringpushservicesforAndroiddevices
• http://developer.android.com/google/gcm/gs.html#create-proj
Old Android versions need to add permission to GET_ACCOUNTS:
install module: https://github.com/appcelerator/titanium_modules
ti.cloudpush 2.3.3 https://github.com/hieupham007/
Titanium_Mobile/tree/b33102312f137fb8ee6c1aa02374aba9c0968f68/
support/module/packaged
<uses-permission android:name="android.permission.GET_ACCOUNTS" />

Prepare push
notifications for iOS

Push notifications (iOS)
• http://docs.appcelerator.com/titanium/3.0/#!/guide/
Configuring_push_services-section-
37551713_Configuringpushservices-
ConfiguringpushservicesforiOSdevices
• https://developer.apple.com/account/ios/certificate/
certificateCreate.action

Introduction to Titanium and how to connect with a PHP backend

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

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.

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!

Playing screenshot
Scores.
!
Button to claim a point.
!
Button to quit match (surrender).

Winner screenshot
This screenshot shows the winner
of the match.

Force App to
portrait mode
http://docs.appcelerator.com/
titanium/3.0/#!/guide/Orientation

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.

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);
}
});

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);

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')) { … }

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');
}

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

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

The data
• Players
!
• Matches
ìd`
int(11)
NOT
NULL
AUTO_INCREMENT,
`nick`
varchar(100)
DEFAULT
NULL,
`password`
char(40)
DEFAULT
NULL,
èmail`
varchar(100)
DEFAULT
NULL,
`hash`
char(40)
DEFAULT
NULL,
`cloud_id`
char(50)
DEFAULT
NULL,
`match_id`
int(11)
DEFAULT
NULL,
ìd`
int(11)
NOT
NULL
AUTO_INCREMENT,
`player1`
int(11)
DEFAULT
NULL,
`player2`
int(11)
DEFAULT
NULL,
`created_at`
datetime
DEFAULT
NULL,
`finished_at`
datetime
DEFAULT
NULL,
`score1`
int(11)
DEFAULT
NULL,
`score2`
int(11)
DEFAULT
NULL,
`to_points`
int(11)
DEFAULT
21,
DB

Connecting the app to server
• REST-API endpoints.
• Some security issues.
• Call's sequence.

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

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

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"]}

Thanks
!
http://www.github.com/jlaso/pingpongserver
http://www.github.com/jlaso/pingpongapp
!
@jl_laso

Introduction to Titanium and how to connect with a PHP backend

More Related Content

What's hot (20)

Similar to Introduction to Titanium and how to connect with a PHP backend (20)

Recently uploaded (20)

Introduction to Titanium and how to connect with a PHP backend