AppStudio Course: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
 
(30 intermediate revisions by 3 users not shown)
Line 1: Line 1:
== Web Apps for Mobile Devices - BASIC ==


Course length 4 days
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.
= Day 1: The IDE and the Language =
 
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 NS BASIC and AppStudio
# 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 1: Hello World]]'''
'''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
# iWebKit
# Others
# Others


Line 40: Line 46:
# Form
# Form


'''7. [[Lab Session 2: Create an app with some Controls]].'''  
'''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 3: Fix a program with syntax errors and make some enhancements]].'''
'''10. [[Lab Session: Fix a program with syntax errors and make some enhancements]].'''


= Day 2: Web Services and Device Features =
<div class="page-break"></div>


''' 11. [[Web Services Fundamentals]]''' :45 Day 2 Session 1
= 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]]''' :30
''' 12. [[Data Formats]]'''
# JSON
# JSON
# JSONP
# JSONP
# XML
# XML


'''13. [[Asynchronous Calls]]''' :20
'''13. [[Asynchronous Calls]]'''


'''14. [[Lab Session: Weather Data]]''' 1:00
'''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]]''' Day 2 Session 3
'''15. [[Mobile Device Features 1]]'''
# Camera
# Camera
# Emoji
# Emoji
# Rotation
# Orientation


'''16. [[Lab Session: Device features]]'''
'''16. [[Lab Session: Device features]]'''


'''17. [[Mobile Device Features 2]]''' Day 2 Session 4
'''17. [[Mobile Device Features 2]]'''
# Compass
# Compass
# Geolocation
# Geolocation
Line 87: Line 95:
'''18. [[Lab Session: Play with Features]]'''
'''18. [[Lab Session: Play with Features]]'''


= Day 3: MultiMedia, Social Media and Saving Data =
<div class="page-break"></div>
= Section 3: MultiMedia, Social Media and Saving Data =


'''19. [[Saving Data]]''' Day 3 Session 1
'''19. [[LocalStorage made Simple|Saving Data: LocalStorage]]'''
# localStorage
# LocalStorage
# SQLite Overview
# Sample Program
# Chrome Debugger Resources tab
# Chrome Debugger Resources tab


'''20. [[Lab Session 5: Saving data to localStorage]]'''
'''20. [[Lab Session: Saving data to localStorage]]'''
'''21. [[SQLite Fundamentals]]''' Day 3 Session 2
'''21. [[SQLite made Simple|Saving Data: SQLite]]'''
# SQLite Overview
# Asynchronous Results
# Asynchronous Results
# Opening a database
# Sample Program
# Create a table in the database
# Add records to the database and select them
# Replace a record in the table
# Update a record
# Delete a record
# Closing the Database


'''22. [[Lab Session: Saving data into SQLite]]'''
'''22. [[Lab Session: Saving data into SQLite]]'''


'''23. [[MultiMedia]]''' Day 3 Session 3
'''23. [[MultiMedia]]'''
# PictureBox: Drawing, text, images, sprites
# PictureBox: Drawing, text, images, sprites
# Multimedia: Audio and Video
# Multimedia: Audio and Video
Line 115: Line 119:
'''24. [[Lab Session: Multimedia]]'''
'''24. [[Lab Session: Multimedia]]'''


'''25. [[Social Media]]''' Day 3 Session 4
'''25. [[Social Media]]'''
# Twitter
# Twitter
# Facebook
# Facebook
Line 122: Line 126:
'''26. [[Lab Session: Add Twitter feed to the app]].'''
'''26. [[Lab Session: Add Twitter feed to the app]].'''


= Day 4: JavaScript, device quirks and deploying =
<div class="page-break"></div>
 
= Section 4: JavaScript, Device Quirks and Deploying =


'''27. [[JavaScript, HTML, CSS]]''' Day 4 Session 1
'''27. [[JavaScript, HTML, CSS]]'''
# What’s behind the scenes?
# What’s behind the scenes?
# JavaScript libraries
# JavaScript libraries
Line 130: Line 136:
'''28. [[Lab Session: Use a library]]'''
'''28. [[Lab Session: Use a library]]'''


'''29. [[iOS and Android]]''' Day 4 Session 2
'''29. [[iOS and Android]]'''
# Quirks, things to know
# Quirks, things to know
# Dealing with different screensizes
# Dealing with different screensizes
Line 136: Line 142:
'''30. [[Lab Session: Screen size and rotation]]'''
'''30. [[Lab Session: Screen size and rotation]]'''


'''31. [[Deploying]]''' Day 4 Session 3
'''31. [[Deploying]]'''
# Differences between Demo and AppStudioEDU
# Differences between AppStudio and AppStudioEDU
# Servers
# Servers
# PHP
# PHP
# Website vs hybrid
# Web Apps vs Hybrid Apps
# PhoneGap
# VoltBuilder
# Chrome Packaged Apps
# Chrome Packaged Apps


'''30. Open Lab Session'''
'''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

1. Opening remarks

  1. History of NSB Corporation and AppStudio
  2. Preview of next 4 days
  3. Let me know if…
  4. Questions

2. Hello World - Demonstration

  1. Load sample and run it

3. Tour of the IDE

  1. File Menus
  2. Design Screen
  3. ToolBox
  4. Project Explorer
  5. Properties Window
  6. Code Window
  7. Wiki
  8. Questions

4. Lab Session: Hello World

  1. Joint step by step with entire class

5. Frameworks

  1. jQuery Mobile
  2. jqWidgets
  3. Others

6. Some Controls in depth

  1. Label
  2. Button
  3. TextBox
  4. Sizing and positioning
  5. HeaderBar
  6. List
  7. Form

7. Lab Session: Create an app with some Controls. The app will be built on in subsequent labs.

8. Fundamentals of BASIC

  1. Variables
  2. Control structures
  3. Importing VB code
  4. A few interesting statements
  5. Questions

9. Chrome Debugger

  1. Sources Tab
  2. Console Tab

10. Lab Session: Fix a program with syntax errors and make some enhancements.

Section 2: Web Services and Device Features

11. Web Services Fundamentals

  1. Introduction
  2. CORS and Same Origin Policy
  3. AJAX

12. Data Formats

  1. JSON
  2. JSONP
  3. XML

13. Asynchronous Calls

14. Lab Session: Weather Data Pull in some data from a Weather site and display the data in an app.

15. Mobile Device Features 1

  1. Camera
  2. Emoji
  3. Orientation

16. Lab Session: Device features

17. Mobile Device Features 2

  1. Compass
  2. Geolocation
  3. Accelerometer

18. Lab Session: Play with Features

Section 3: MultiMedia, Social Media and Saving Data

19. Saving Data: LocalStorage

  1. LocalStorage
  2. Sample Program
  3. Chrome Debugger Resources tab

20. Lab Session: Saving data to localStorage

21. Saving Data: SQLite

  1. SQLite Overview
  2. Asynchronous Results
  3. Sample Program

22. Lab Session: Saving data into SQLite

23. MultiMedia

  1. PictureBox: Drawing, text, images, sprites
  2. Multimedia: Audio and Video
  3. HTMLView

24. Lab Session: Multimedia

25. Social Media

  1. Twitter
  2. Facebook
  3. PayPal

26. Lab Session: Add Twitter feed to the app.

Section 4: JavaScript, Device Quirks and Deploying

27. JavaScript, HTML, CSS

  1. What’s behind the scenes?
  2. JavaScript libraries

28. Lab Session: Use a library

29. iOS and Android

  1. Quirks, things to know
  2. Dealing with different screensizes

30. Lab Session: Screen size and rotation

31. Deploying

  1. Differences between AppStudio and AppStudioEDU
  2. Servers
  3. PHP
  4. Web Apps vs Hybrid Apps
  5. VoltBuilder
  6. Chrome Packaged Apps

32. Open Lab Session

  1. Complete work if not done
  2. One on one for those who want some extra