1. Introduction to Mobile
Development

2. Nickey Khem
@nickeyk
COURSE DIRECTOR
Beyond Skin Deep
Code and Design Academy

3. What we will see today?
-­‐‑ Introduction to Mobile Apps
-­‐‑ The Data.One App Competition
and platforms to launch and
promote application
-­‐‑ Ge>ing Started
-­‐‑ Choosing a direction
-­‐‑ Structure of starting an App
-­‐‑ PhoneGap Demo
-­‐‑ Where to go from here?

4. Mobile Apps
Benefits for Business – Apps:
Build relationships
Build loyalty
Reinforce your brand
Increase your visibility
Increase your accessibility
Solve the problem of getting stuck in spam folders
Increase exposure across mobile devices
Connect you with on-the-go consumers
Give you tools that are driving the "New App Economy"
Enhance your social networking strategies

5. Which system to build for?
-­‐‑
Source: TechCrunch 2014

6. Native App? HTML App?
Native (built for single device)
-­‐‑
iOS (objective-­‐‑c), Android (java)
-­‐‑
Access to phone’s internal features
-­‐‑
Faster runtime
-­‐‑
Harder learning curve
-­‐‑
More development time and costs
HTML APP (built for all devices at once)
-­‐‑
Using universal website language
(HTML, CSS, Javascript)
-­‐‑
Support for various API, JSON files and etc…
-­‐‑
Quicker to develop and easy to update
-­‐‑
Does not support all phone’s internal features
such as Camera

7. Layers of a HTML App

8. What is HTML?
Hypertext Markup Language
Hypertext Markup Language describes:
- Structure
- Content
- Typographic hierarchy
- Rudimentary style (bold, italics, etc.)

9. HTML Document
It might feel chaotic and unstructured …
But the entire content of the page exists here.

10. What is CSS?
Cascading Style Sheets
- Separates style from content
- Easier to change formatting and update an entire Web site
- Eliminates page load
- Flexible design
- Better user accessibility for search bots and screen readers
- Allows you to design for multiple browsers and multiple Operating
System (Linux, PC or Mac) environments

11. CSS Document

12. Analysis
Planning
Design
Analysis
-­‐‑
Study current market requirements
-­‐‑
LISTEN
-­‐‑
Define goals
-­‐‑
Study competition (if any!)
Development
Quality
Assurance
Delivery
Marketing

13. Analysis
Planning
Design
Planning
After you green-­‐‑light the project
-­‐‑ Wireframe app
-­‐‑
Timeline planning
Development
Quality
Assurance
Delivery
Marketing

14. Planning -­‐‑ Wireframe

15. Analysis
Planning
Design
Development
Design
The entire experience of the mobile app is
dependent on the design and interface, here are
some focus points
-­‐‑ Less interaction
-­‐‑
Clean interface
-­‐‑
Easy to use
-­‐‑
Font selection
Quality
Assurance
Delivery
Marketing

16. Analysis
Planning
Design
Development
-­‐‑
Begin coding of your App
-­‐‑
Frameworks
Development
Quality
Assurance
Delivery
Marketing

17. Analysis
Planning
Design
Quality Assurance
-­‐‑
Test on various speed se>ings
-­‐‑
Debugging
-­‐‑
Crash reports
Development
Quality
Assurance
Delivery
Marketing

18. Analysis
Planning
Design
Development
Delivery
Finally, your app is complete! Well, not quite.
-­‐‑ Delivery to App Store
-­‐‑
Delivery to Play Store
-­‐‑
(Couple of weeks + feedback)
*Learn more of platform delivery at
phonegap.com
Quality
Assurance
Delivery
Marketing

19. Analysis
Planning
Design
Development
Marketing
-­‐‑
App Store Optimization, Description, Title and
Keywords on the app
(such as in the config.xml file in PhoneGap)
-­‐‑
Social Media
-­‐‑
Blogs
-­‐‑
Make a website for promoting the App
Quality
Assurance
Delivery
Marketing

20. PHONEGAP DEMO
GOTO http://www.phonegap.com/install/
- CLICK NODEJS Link
- INSTALL NODEJS
- OPEN TERMINAL on MAC | CMD on PC
- Navigate to Desktop (cd Desktop)
- Type “phonegap create myApp”
- On desktop you will see all the files created for you, open “WWW”
- This is where you store your web files (a demo is added for you)
- Open config.xml and rename between
- <name> and </name>
- End of Widget id
- <description> </description>

21. PHONEGAP DEMO
BUILD APP
- COMPRESS your folder on desktop (create myApp.zip)
GOTO http://build.phonegap.com
- Sign up
- Upload .zip from desktop
- Download APK for Andriod or ipa for iPhone
- *iPhone requires apple developer account

22. Where next?
- Check out Data.One competition
- www.gov.hk/en/theme/psi/contest
- Learn more on app development with some
resources like
• Codeacademy.com
• Google.com
• Or hands on with BSD Courses in Central

23.
For more information
INFO@BSDACADEMY.CO
M