AppStudio Course: Difference between revisions
(40 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
== Web Apps for Mobile Devices - BASIC == | |||
These are the notes for our course. It assumes the trainees have some programming background. You can follow through the course notes and lab sessions on your own: if you would like on site training please contact us for details. | |||
= | |||
The notes here can be used for self study or to conduct a course. It can be taught in as little as 4 long days (one day per section), or through a term. | |||
You should have AppStudio installed on your desktop (Windows or Mac) and an iOS or Android device. You can download AppStudio [https://www.nsbasic.com/app/downloads/ here]. | |||
The lab session apps, as well as their solutions, are installed with AppStudio, in Samples Folder 6. | |||
= Section 1: The IDE and the Language = | |||
'''1. [[Opening remarks]]''' | '''1. [[Opening remarks]]''' | ||
# History of | # History of NSB Corporation and AppStudio | ||
# Preview of next 4 days | # Preview of next 4 days | ||
# Let me know if… | # Let me know if… | ||
# Questions | # Questions | ||
'''2. Hello World - Demonstration''' | '''2. [[Hello World - Demonstration]]''' | ||
# Load sample and run it | # Load sample and run it | ||
Line 22: | Line 29: | ||
# Questions | # Questions | ||
'''4. Lab Session | '''4. [[Lab Session: Hello World]]''' | ||
# Joint step by step with entire class | # Joint step by step with entire class | ||
Line 28: | Line 35: | ||
# jQuery Mobile | # jQuery Mobile | ||
# jqWidgets | # jqWidgets | ||
# Others | # Others | ||
Line 40: | Line 46: | ||
# Form | # Form | ||
'''7. Lab Session | '''7. [[Lab Session: Create an app with some Controls]].''' | ||
The app will be built on in subsequent labs. | The app will be built on in subsequent labs. | ||
Line 50: | Line 56: | ||
# Questions | # Questions | ||
'''9. [[Chrome Debugger]]''' | '''9. [[Using the Chrome Debugger|Chrome Debugger]]''' | ||
# Sources Tab | # Sources Tab | ||
# Console Tab | # Console Tab | ||
'''10. Lab Session | '''10. [[Lab Session: Fix a program with syntax errors and make some enhancements]].''' | ||
= | <div class="page-break"></div> | ||
''' 11. [[Web Services Fundamentals]]''' | = Section 2: Web Services and Device Features = | ||
''' 11. [[Web Services Fundamentals]]''' | |||
# Introduction | # Introduction | ||
# CORS and Same Origin Policy | # CORS and Same Origin Policy | ||
# AJAX | # AJAX | ||
''' 12. [[Data Formats]]''' | ''' 12. [[Data Formats]]''' | ||
# JSON | # JSON | ||
# JSONP | # JSONP | ||
# XML | # XML | ||
'''13. [[Asynchronous Calls]]''' | '''13. [[Asynchronous Calls]]''' | ||
'''14. Lab Session:''' | '''14. [[Lab Session: Weather Data]]''' | ||
Pull in some data from a Weather site and display the data in an app. | Pull in some data from a Weather site and display the data in an app. | ||
'''15. [[Mobile Device Features 1]]''' | '''15. [[Mobile Device Features 1]]''' | ||
# Camera | # Camera | ||
# Emoji | # Emoji | ||
# | # Orientation | ||
'''16. Lab Session: Device features''' | '''16. [[Lab Session: Device features]]''' | ||
'''17. [[Mobile Device Features 2]]''' | '''17. [[Mobile Device Features 2]]''' | ||
# Compass | # Compass | ||
# Geolocation | # Geolocation | ||
# Accelerometer | # Accelerometer | ||
'''18. Lab Session: Play with Features''' | '''18. [[Lab Session: Play with Features]]''' | ||
= | <div class="page-break"></div> | ||
= Section 3: MultiMedia, Social Media and Saving Data = | |||
'''19. [[Saving Data]]''' | '''19. [[LocalStorage made Simple|Saving Data: LocalStorage]]''' | ||
# | # LocalStorage | ||
# | # Sample Program | ||
# Chrome Debugger Resources tab | # Chrome Debugger Resources tab | ||
'''20. Lab Session | '''20. [[Lab Session: Saving data to localStorage]]''' | ||
'''21. [[SQLite | '''21. [[SQLite made Simple|Saving Data: SQLite]]''' | ||
# | # SQLite Overview | ||
# | # Asynchronous Results | ||
# | # Sample Program | ||
'''22. Lab Session: Saving data into SQLite''' | '''22. [[Lab Session: Saving data into SQLite]]''' | ||
'''23. [[MultiMedia]]''' | '''23. [[MultiMedia]]''' | ||
# PictureBox: images, | # PictureBox: Drawing, text, images, sprites | ||
# Multimedia: Audio and Video | # Multimedia: Audio and Video | ||
# HTMLView | # HTMLView | ||
'''24. Lab Session: Multimedia''' | '''24. [[Lab Session: Multimedia]]''' | ||
'''25. [[Social Media]]''' | '''25. [[Social Media]]''' | ||
# Twitter | # Twitter | ||
# Facebook | # Facebook | ||
# PayPal | # PayPal | ||
'''26. Lab Session: Add Twitter feed to the app.''' | '''26. [[Lab Session: Add Twitter feed to the app]].''' | ||
<div class="page-break"></div> | |||
= | = Section 4: JavaScript, Device Quirks and Deploying = | ||
'''27. [[JavaScript, HTML, CSS]]''' | '''27. [[JavaScript, HTML, CSS]]''' | ||
# What’s behind the scenes? | # What’s behind the scenes? | ||
# JavaScript libraries | # JavaScript libraries | ||
'''28. [[iOS and Android]]''' | '''28. [[Lab Session: Use a library]]''' | ||
'''29. [[iOS and Android]]''' | |||
# Quirks, things to know | # Quirks, things to know | ||
# Dealing with different screensizes | # Dealing with different screensizes | ||
''' | '''30. [[Lab Session: Screen size and rotation]]''' | ||
# Differences between | |||
'''31. [[Deploying]]''' | |||
# Differences between AppStudio and AppStudioEDU | |||
# Servers | # Servers | ||
# PHP | # PHP | ||
# | # Web Apps vs Hybrid Apps | ||
# | # VoltBuilder | ||
# Chrome Packaged Apps | # Chrome Packaged Apps | ||
''' | '''32. Open Lab Session''' | ||
# Complete work if not done | # Complete work if not done | ||
# One on one for those who want some extra | # One on one for those who want some extra |
Latest revision as of 14:24, 13 November 2020
Web Apps for Mobile Devices - BASIC
These are the notes for our course. It assumes the trainees have some programming background. You can follow through the course notes and lab sessions on your own: if you would like on site training please contact us for details.
The notes here can be used for self study or to conduct a course. It can be taught in as little as 4 long days (one day per section), or through a term.
You should have AppStudio installed on your desktop (Windows or Mac) and an iOS or Android device. You can download AppStudio here.
The lab session apps, as well as their solutions, are installed with AppStudio, in Samples Folder 6.
Section 1: The IDE and the Language
- History of NSB Corporation and AppStudio
- Preview of next 4 days
- Let me know if…
- Questions
2. Hello World - Demonstration
- Load sample and run it
- File Menus
- Design Screen
- ToolBox
- Project Explorer
- Properties Window
- Code Window
- Wiki
- Questions
- Joint step by step with entire class
5. Frameworks
- jQuery Mobile
- jqWidgets
- Others
- Label
- Button
- TextBox
- Sizing and positioning
- HeaderBar
- List
- Form
7. Lab Session: Create an app with some Controls. The app will be built on in subsequent labs.
- Variables
- Control structures
- Importing VB code
- A few interesting statements
- Questions
- Sources Tab
- Console Tab
10. Lab Session: Fix a program with syntax errors and make some enhancements.
Section 2: Web Services and Device Features
- Introduction
- CORS and Same Origin Policy
- AJAX
12. Data Formats
- JSON
- JSONP
- XML
14. Lab Session: Weather Data Pull in some data from a Weather site and display the data in an app.
- Camera
- Emoji
- Orientation
16. Lab Session: Device features
- Compass
- Geolocation
- Accelerometer
18. Lab Session: Play with Features
Section 3: MultiMedia, Social Media and Saving Data
- LocalStorage
- Sample Program
- Chrome Debugger Resources tab
20. Lab Session: Saving data to localStorage
- SQLite Overview
- Asynchronous Results
- Sample Program
22. Lab Session: Saving data into SQLite
23. MultiMedia
- PictureBox: Drawing, text, images, sprites
- Multimedia: Audio and Video
- HTMLView
25. Social Media
- PayPal
26. Lab Session: Add Twitter feed to the app.
Section 4: JavaScript, Device Quirks and Deploying
- What’s behind the scenes?
- JavaScript libraries
28. Lab Session: Use a library
29. iOS and Android
- Quirks, things to know
- Dealing with different screensizes
30. Lab Session: Screen size and rotation
31. Deploying
- Differences between AppStudio and AppStudioEDU
- Servers
- PHP
- Web Apps vs Hybrid Apps
- VoltBuilder
- Chrome Packaged Apps
32. Open Lab Session
- Complete work if not done
- One on one for those who want some extra