Embed Size (px)
DESCRIPTION
Citation preview
Introduction to Mobile Development
Nickey Khem @nickeyk
COURSE DIRECTOR
Beyond Skin Deep Code and Design Academy
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?
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
Which system to build for?
-‐‑ Source: TechCrunch 2014
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
Layers of a HTML App
Hypertext Markup Language Hypertext Markup Language describes:
- Structure
- Content
- Typographic hierarchy
- Rudimentary style (bold, italics, etc.)
What is HTML?
HTML Document
It might feel chaotic and unstructured … But the entire content of the page exists here.
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
What is CSS?
CSS Document
Analysis -‐‑ Study current market requirements
-‐‑ LISTEN
-‐‑ Define goals
-‐‑ Study competition (if any!)
Analysis Planning Design Development Quality Assurance
Delivery Marketing
Analysis Planning Design Development Quality Assurance
Delivery Marketing
Planning After you green-‐‑light the project -‐‑ Wireframe app
-‐‑ Timeline planning
Planning -‐‑ Wireframe
Analysis Planning Design Development Quality Assurance
Delivery Marketing
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
Development -‐‑ Begin coding of your App
-‐‑ Frameworks
Analysis Planning Design Development Quality Assurance
Delivery Marketing
Quality Assurance -‐‑ Test on various speed se>ings
-‐‑ Debugging
-‐‑ Crash reports
Analysis Planning Design Development Quality Assurance
Delivery Marketing
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
Analysis Planning Design Development Quality Assurance
Delivery Marketing
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
Analysis Planning Design Development Quality Assurance
Delivery Marketing
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>
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
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
