2. Introduction
Mobile apps with Web Standards
Environment Configuration
Mobile Tooling
Mobile Frameworks
App Emulation
Release Builds
Deployment
3. Joseph Labrecque
Senior Interactive Software Engineer | Adjunct Faculty
Proprietor | Owner
Adobe Community Professional
Adobe Education Leader
Adobe Certified Expert
Adobe Certified Educator
Adobe Influencer
Author
Artist
University of Denver
Fractured Vision Media, LLC
Lynda.com | Peachpit Press | Adobe Press | Packt Publishing |
O’Reilly Media | video2brain
An Early Morning Letter, Displaced | shivervein
4. Developing Mobile Apps
Lots of choices out there…
Native (Objective-C, Java)
Web (hosted like websites)
Hybrid (compiled/wrapped)
Compiled (Adobe AIR)
Wrapped (PhoneGap)
6. PhoneGap and Cordova
Hybrid apps which leverage Web
Standards
Command line API
Apache Cordova
(similar to Apache Flex in structure)
Adobe PhoneGap
(Adobe’s version of Cordova)
7. HTML5, CSS, JavaScript
Use HTML and CSS for design and layout
Use JavaScript for functionality
PhoneGap is a wrapper
Basically an uber-WebView
Adds native capabilities
11. Node.js and NPM
PhoneGap is installed and run
locally from Node.js
NPM handles installation and
updates
Command line driven
Easy to automate
12. PhoneGap Configuration
npm install -g phonegap
This will install the latest PhoneGap
build into your local system.
Pretty well automated.
This is also how you update PhoneGap
to a new version.
13. Project Generation
phonegap create test-app
This is the command to create a basic
application within your local system in order
to begin development.
The project at this point contains no platform
specific code at all.
14. Project Directory
cd test-app
Enter the app directory to begin
invoking app-specific
commands like build or emulate.
www is where the development
occurs!
16. Developing with PhoneGap
Using native SDKs
Configure tools
Configure dependencies
Download additional tools
Lots of work, initially
Using plain web technology
Simply write HTML, CSS, and
JavaScript
Upload to PhoneGap Build to
compile and test
17. Brackets
Code editor for HTML, CSS, and
JavaScript
Open source software
http://brackets.io/
Node.js is built in – no separate local
web server needed for testing!
Live view – see changes in the browser
as you make them.
Edge Code CC is based upon
Brackets.
18. Dreamweaver CC
Multiple styles of working; design,
develop, hybrid…
Split view with live WebKit
rendering allows for immediate
verification of edits
Phonegap Build integration
Backend support as well
19. Edge Animate CC
DOM based HTML animation and
interactivity.
Fully responsive scaling of content
just like with Flash. Even images
and text!
Create rich content to include
within PhoneGap applications.
20. Edge Reflow CC
Visually prototype responsive
web design.
Uses a system of breakpoints just
like CSS media queries.
Design your complete UI visually
in Reflow – use it in your
PhoneGap app!
21. Flash Professional CC
“Flash is Dead!” - false
Installed over 500 million times in
the second half of 2013.
More than 175,000 applications
using AIR 3.8 or greater.
Reach 11 times more people than
the best-selling hardware game
console!
Plus: publish to HTML5 Canvas and
integrate with PhoneGap :)
http://www.adobe.com/products/flashruntimes/statistics.html
22. Mobile UI & Development Frameworks
jQuery Mobile
Twitter Bootstrap
TopCoat
Angular.js
Backbone.js
Sencha
And many more…
27. Emulating with Ripple
npm install -g ripple-emulator
Installs the Ripple device
emulator to your local system.
ripple emulate
Launches Chrome with Ripple
enabled for testing.
Be sure to build first!
28. Emulating with Native SDKs
phonegap run android
If you have a native emulator running,
PhoneGap will detect it, install the app, and
launch it for testing.
You can also test upon a device which is
connected to your local machine in this way.
29. Building a Release Locally
phonegap build android
Will build an app package based upon the
particular platform specified.
Android… in this case.
Do NOT edit files within “platforms”…
30. Updating an App
phonegap platform update android
Will update the app to use a newer
version of PhoneGap.
Of course… you have to update
PhoneGap itself first!
32. ConfiGAP Utility
Create config.xml files easily
Used with PhoneGap Build
Create new config.xml files or
edit existing ones
Made with AIR/Flash – crossplatform
http://configap.com/
33. App Deployment and Publication
Take each properly signed
release build and upload to
the appropriate distribution
point.
Every mobile app store is
different.
34. Joseph’s Workflow…
1.
Test using Brackets via www directory. No compile step!
2.
Emulate via Ripple
3.
Emulate via native tools
4.
Debug on device
5.
Use Hydration to test on multiple devices
6.
Release build
7.
Distribution
36. Building a Mobile App with
Feathers and Starling
Downloading the frameworks and
the AIR SDK
Configuring the project
Implementing a theme
Creating the screen classes
Adding a navbar component
Building the classes
Returning saved files
Publishing a project
Installing and running the app
http://www.lynda.com/JosephLabrecque
37. Learning Adobe Edge Animate
Master the Edge Animate interface and unleash your
creativity through standard HTML, CSS, and JavaScript
Packed with an abundance of information regarding
the Edge Animate application and related toolsets
Robust motion and interactivity through web standards
Those approaching Edge Animate from Adobe Flash
Professional will find many references and tips for a
smooth transition
A comprehensive guide for creating engaging content
with Adobe Edge Animate.
http://www.amazon.com/Joseph-Labrecque/e/B0057R7UO0/