learning the fundamentals of app development: nickey khem at smecc - 20140205
DESCRIPTION
TRANSCRIPT
![Page 1: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/1.jpg)
Introduction to Mobile Development
![Page 2: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/2.jpg)
Nickey Khem @nickeyk
COURSE DIRECTOR
Beyond Skin Deep Code and Design Academy
![Page 3: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/3.jpg)
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?
![Page 4: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/4.jpg)
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
![Page 5: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/5.jpg)
Which system to build for?
-‐‑ Source: TechCrunch 2014
![Page 6: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/6.jpg)
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
![Page 7: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/7.jpg)
Layers of a HTML App
![Page 8: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/8.jpg)
Hypertext Markup Language Hypertext Markup Language describes:
- Structure
- Content
- Typographic hierarchy
- Rudimentary style (bold, italics, etc.)
What is HTML?
![Page 9: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/9.jpg)
HTML Document
It might feel chaotic and unstructured … But the entire content of the page exists here.
![Page 10: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/10.jpg)
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?
![Page 11: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/11.jpg)
CSS Document
![Page 12: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/12.jpg)
Analysis -‐‑ Study current market requirements
-‐‑ LISTEN
-‐‑ Define goals
-‐‑ Study competition (if any!)
Analysis Planning Design Development Quality Assurance
Delivery Marketing
![Page 13: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/13.jpg)
Analysis Planning Design Development Quality Assurance
Delivery Marketing
Planning After you green-‐‑light the project -‐‑ Wireframe app
-‐‑ Timeline planning
![Page 14: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/14.jpg)
Planning -‐‑ Wireframe
![Page 15: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/15.jpg)
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
![Page 16: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/16.jpg)
Development -‐‑ Begin coding of your App
-‐‑ Frameworks
Analysis Planning Design Development Quality Assurance
Delivery Marketing
![Page 17: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/17.jpg)
Quality Assurance -‐‑ Test on various speed se>ings
-‐‑ Debugging
-‐‑ Crash reports
Analysis Planning Design Development Quality Assurance
Delivery Marketing
![Page 18: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/18.jpg)
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
![Page 19: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/19.jpg)
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
![Page 20: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/20.jpg)
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>
![Page 21: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/21.jpg)
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
![Page 22: Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205](https://reader038.vdocuments.site/reader038/viewer/2022103109/54583f3fb1af9f40378b50a0/html5/thumbnails/22.jpg)
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