Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205
4 likes467 views
This document provides an overview of mobile application development. It discusses the different platforms for building mobile apps, including native apps built for a single device platform and HTML apps that can work across multiple devices. The document outlines the typical process for developing a mobile app, including analysis, planning, design, development, quality assurance, delivery, and marketing. It also provides a demonstration of using PhoneGap to quickly build a basic mobile app using HTML, CSS, and JavaScript that can be deployed to both Android and iOS devices.
Learning the Fundamentals of App Development: Nickey Khem at SMECC - 20140205
- 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
- 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