Rapid native mobile app development with Drupal and ...2012.pnwdrupalsummit.org/sites/default/files/sessions/PNWDS2012.… · What we’ll cover • What are native apps. • Why
Post on 26-Jul-2020
0 Views
Preview:
Transcript
Rapid native mobile app development with
Drupal and Titanium / PhoneGap
Scott FalconerPNWDS 2012
Scott Falconer
• getFork.com
• @scottFalconer
• http://drupal.org/user/52557
What we’ll cover
• What are native apps.
• Why native?
• Why Drupal?
• Mobile tools and frameworks.
• Drupal modules and tools.
• Putting it together.
What we won’t cover
• Objective-C
• Java
My goals
• More Drupal powered native apps.
Native apps?
• Installed on device.
• Deeper level of access / functionality.
• Not directly accessible from web.
Why native?
Distribution
You can charge.
Native functionality
• Camera / Gallery.
• Contacts.
• Accelerometer, gyroscope.
• Location, compass, mapping.
• File System.
• Background services.
Should You?
• You can always do a mobile accessible site.
• You still need a mobile accessible site.
Be aware of the rules
• Read the TOS.
• IOS is very strict.
• Google is becoming more strict.
Common rejections
• Crashes / bugs.
• ‘Beta’ / ‘Demo’ / ‘Test’.
• Duplication of functionality.
• Overt marketing or advertising materials.
Deadlines
• There are things out of your control.
• Start early!
Why Drupal?
• You know it!
• Users / Content.
• Permissions.
• Existing tools and modules.
• Offload heavy lifting, secondary functionality.
How to
• Device.
• Drupal.
Questions to ask
Platforms
• iOS.
• Android.
• Blackberry.
• Windows Phone
• Others.
Resources
• Timeline.
• Current skill set.
Product
Getting started
Dev accounts
• iOS: $99 / $299 yr
• Google Play: $25
• Start early!
Tools and simulators
Provisioning/certificates
Develop!
Hard way
• Objective-C
• Java
Frameworks
• PhoneGap
• Titanium
• Sencha Touch
• Unity
• Others
Titanium / PhoneGap
• Popular and widespread.
• Free and Open Source.
• Existing Drupal tools.
• Same end goal, fundamentally different approach.
License
• Apache 2.0
• Some proprietary tools / services.
How
• WebView
• Local WWW folder
• Rendered by local browser.
<html><head>
<title>Capture Photo</title> <script src="cordova-2.1.0.js"></script> <script type="text/javascript">
// Button click calls this function. function capturePhoto() {
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ]
); }
</script></head>
<body><button onclick="capturePhoto();">Capture Photo</button>
</body></html>
Pros
• HTML5 / JS / CSS.
• You can use things like jQuery.
• Supports tons of platforms.
• Stable.
Cons
• Can be difficult to feel ‘native’.
• Limitations of HTML / JS
Tools
• Any JS/ HTML library.
• Be aware of size / resources.
Examples
• NBC flagship.
• Zipcar.
• PNWDS 2012.
License
• Apache 2.0
• Some proprietary tools / services.
How
• Write in JS.
• JS compiled on device / mapped to native code.
function capturePhoto() {Titanium.Media.showCamera({ success: success(), error: error(), options ...});
}
var button = Titanium.UI.createButton({title: 'Open Camera',
}); button.addEventListener("click", function() {
capturePhoto();});
• Window.
• View.
• Label.
var window = Ti.UI.createWindow({title: ‘my title’,
}); var myView = Ti.UI.createView({});window.add(myView);
var label = Ti.UI.createLabel({text: 'Hello PNWDS 2012',
});myView.add(label);
window.open();
webView
var webview = Titanium.UI.createWebView({url: 'http://www.drupal.org'
});
var webview = Titanium.UI.createWebView({html: '<html><body>Hello.</body></html>'
});
Extend
Pros
• Easily feels native.
• Lots of control.
• Same API across devices.
Cons
• Not direct HTML / CSS.
• New API.
• Fewer platforms.
Tools
• Titanium Studio
• Kitchen Sink
• Alloy
• Backbone / node.js
The main difference
• UI
Drupal
• Services
• RESTWS
• Views Datasource
Services
Server
Auth
Resources
Online?
Integration
Assumptions
• Services
• REST server
• JSON
• Session based auth.
System connect
Authenticate
Post node
Images / Files
• Base64
• Multipart / form-data
Tools - Drupal general
• Service views.
• Service rules.
• MASt.
• Content API.
• Any module when exposed as a service.
Tools - PhoneGap
• DrupalGap
• drupal.org/project/phonegap
• drupal.org/project/mag
• github.com/jefflinwood/Drupal-Plugin-for-PhoneGap-for-iOS
Tools - TI
• Drupanium
• Sets up endpoints
• common.js rewrite
• github.com/palantirnet/drupalcon_mobile
• github.com/teglia/pnwds_mobile
• TiaAjax
Tips
• Drupal performance matters.
• Perform actions optimistically.
• Test in real conditions (3g, etc).
• Don’t run remote code.
Tools - General
• TestFlight
• Flurry
• LiveView
• Urban Airship
Questions
top related