Multiplatform Mobile App Development with NativeScript

About this course: This course focuses on developing truly cross-platform, native iOS and Android apps using NativeScript (Ver 3.x). The framework uses Angular, TypeScript or modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with NativeScript UI and layout support and access the native mobile platform's capabilities from Javascript. You should have already completed the Bootstrap 4 and the Angular courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your Angular, TypeScript and Javascript skills, and (c) Use various features of the Ionic framework to build truly cross-platform mobile applications

Who is this class for: This course is aimed at students with sufficient knowledge of Web technologies like HTML, CSS and JavaScript. A good working knowledge of JavaScript, especially ES 5 and the Angular framework is strongly recommended.

Created by:  The Hong Kong University of Science and Technology

• Taught by:  Jogesh K. Muppala, Associate Professor

  Department of Computer Science and Engineering

Basic Info Course 4 of 5 in the Full Stack Web and Multiplatform Mobile App Development Specialization Level Intermediate Commitment 4 weeks of study, 6-8 hours/week Language English How To Pass Pass all graded assignments to complete the course. User Ratings 4.7 stars Average User Rating 4.7See what learners said Coursework

Each course is like an interactive textbook, featuring pre-recorded videos, quizzes and projects.

Help from your peers

Connect with thousands of other learners and debate ideas, discuss course material, and get help mastering concepts.

Certificates

Earn official recognition for your work, and share your success with friends, colleagues, and employers.

The Hong Kong University of Science and Technology HKUST - A dynamic, international research university, in relentless pursuit of excellence, leading the advance of science and technology, and educating the new generation of front-runners for Asia and the world.

Syllabus


WEEK 1


Hybrid Mobile App Development Frameworks: NativeScript: An Introduction



This module introduces you to hybrid mobile application development. You will learn about the NativeScript framework and explore some of the features of the NativeScript framework to implement a mobile app based on the Angular application that was implemented in the previous course on Angular.


22 videos, 30 readings expand

1. Video: Welcome to Multiplatform Mobile App Development with Web Technologies: NativeScript
2. Video: How to Use the Learning Resources
3. Reading: Welcome to Multiplatform Mobile App Development with Web Technologies: NativeScript: Additional Resources
4. Reading: Full Stack Web Development: The Big Picture: Objectives and Outcomes
5. Video: What is Full-Stack Web Development?
6. Reading: Full Stack Web Development: Additional Resources
7. Reading: Setting up Your Development Environment: Git and Node: Objectives and Outcomes
8. Reading: Setting up your Development Environment
9. Video: Exercise (Video): Setting up Git
10. Reading: Exercise (Instructions): Setting up Git
11. Video: Exercise (Video): Basic Git Commands
12. Reading: Exercise (Instructions): Basic Git Commands
13. Video: Exercise (Video): Online Git Repositories
14. Reading: Exercise (Instructions): Online Git Repositories
15. Video: Node.js and NPM
16. Video: Exercise (Video): Setting up Node.js and NPM
17. Reading: Exercise (Instructions): Setting up Node.js and NPM
18. Video: Exercise (Video): Basics of Node.js and NPM
19. Reading: Exercise (Instructions): Basics of Node.js and NPM
20. Reading: Setting up your Development Environment: Git and Node: Additional Resources
21. Reading: Hybrid Mobile App Development: An Overview: Objectives and Outcomes
22. Video: Hybrid Mobile App Development
23. Video: Introduction to the NativeScript Framework
24. Video: Exercise (Video): Setting up the NativeScript Framework
25. Reading: Exercise (Instructions): Setting up the NativeScript Framework
26. Video: Exercise (Video): Creating your First NativeScript Project
27. Reading: Exercise (Instructions): Creating your First NativeScript Project
28. Reading: Hybrid Mobile App Development: An Overview: Additional Resources
29. Reading: Setting up a Simple Server: Objectives and Outcomes
30. Video: Exercise (Video): Setting up a Server using json-server
31. Reading: Exercise (Instructions): Setting up a Server using json-server
32. Reading: Setting up a Simple Server: Additional Resources
33. Reading: NativeScript and Angular: Objectives and Outcomes
34. Video: NativeScript and Angular
35. Video: Exercise (Video): NativeScript and Angular
36. Reading: Exercise (Instructions): NativeScript and Angular
37. Video: NativeScript Layouts
38. Reading: NativeScript and Angular: Additional Resources
39. Reading: NativeScript Navigation: Objectives and Outcomes
40. Video: NativeScript Navigation
41. Video: Exercise (Video): NativeScript Navigation Part 1
42. Reading: Exercise (Instructions): NativeScript Navigation Part 1
43. Video: Exercise (Video): Telerik Progress NativeScript UI SideDrawer
44. Reading: Exercise (Instructions): Telerik Progress NativeScript UI SideDrawer
45. Video: Exercise (Video): NativeScript Navigation Part 2
46. Reading: Exercise (Instructions): NativeScript Navigation Part 2
47. Reading: NativeScript Navigation: Additional Resources
48. Video: Assignment 1 Requirements (Video): Introduction to NativeScript
49. Reading: Assignment 1: Introduction to NativeScript: Additional Resources
50. Reading: Ideation: Objectives and Outcomes
51. Reading: Ideation Report Template
52. Reading: Ideation: Additional Resources

Graded: Introduction to NativeScript
Graded: Ideation

WEEK 2


NativeScript UI Elements
This module introduces you to various NativeScript UI elements. We will look at how we can make use of these elements in designing the various views of our application.


11 videos, 18 readings expand

1. Reading: Buttons and Icon Fonts: Objectives and Outcomes
2. Video: Icon Fonts and Buttons
3. Video: Exercise (Video): Icon Fonts
4. Reading: Exercise (Instructions): Icon Fonts
5. Video: Exercise (Video): Buttons
6. Reading: Exercise (Instructions): Buttons
7. Reading: Buttons and Icon Fonts: Additional Resources
8. Reading: Advanced Lists: Objectives and Outcomes
9. Video: Advanced Lists Using Telerik Progress NativeScript UI ListView
10. Video: Exercise (Video): Advanced Lists Using Telerik Progress NativeScript UI ListView
11. Reading: Exercise (Instructions): Advanced Lists Using Telerik Progress NativeScript UI ListView
12. Reading: Advanced Lists: Additional Resources
13. Reading: Dialogs: Objectives and Outcomes
14. Video: Dialogs
15. Video: Exercise (Video): Dialogs and Toasts
16. Reading: Exercise (Instructions): Dialogs and Toasts
17. Reading: Dialogs and Toasts: Additional Resources
18. Reading: "Forms" and Modals: Objectives and Outcomes
19. Video: NativeScript "Forms" and Modal Dialogs
20. Video: Exercise (Video): Data Entry and "Forms"
21. Reading: Exercise (Instructions): Data Entry and "Forms"
22. Video: Exercise (Video): Modal Dialogs
23. Reading: Exercise (Instructions): Modal Dialogs
24. Reading: "Forms" and Modals: Additional Resources
25. Video: Assignment 2: NativeScript UI Elements
26. Reading: Assignment 2: Additional Resources
27. Reading: UI Design and Prototyping: Objectives and Outcomes
28. Reading: UI Design and Prototyping Report Template
29. Reading: UI Design and Prototyping: Additional Resources

Graded: NativeScript UI Elements
Graded: UI Design and Prototyping

WEEK 3


NativeScript Animations, Gestures, Storage and Image Resources



In this module we look at enhancing the user experience through the use of animations and support for gesture-based interaction. We also look at leveraging the storage for persisting data, and the customization of splash screens, icons and the use of other image resource in the app


11 videos, 14 readings expand

1. Reading: NativeScript Storage: Objectives and Outcomes
2. Video: Persisting Data: NativeScript Storage
3. Video: Exercise (Video): Application Settings
4. Reading: Exercise (Instructions): Application Settings
5. Video: Exercise (Video): NoSQL Storage with Couchbase Lite
6. Reading: Exercise (Instructions): NoSQL Storage with Couchbase Lite
7. Reading: NativeScript Storage: Additional Resources
8. Reading: Animations and Gestures: Objectives and Outcomes
9. Video: Animations and Gestures
10. Video: Exercise (Video): Animations and Gestures Part 1
11. Reading: Exercise (Instructions): Animations and Gestures Part 1
12. Video: Exercise (Video): Animations and Gestures Part 2
13. Reading: Exercise (Instructions): Animations and Gestures Part 2
14. Reading: Animations and Gestures: Additional Resources
15. Reading: Splash Screens, Icons and Image Resources: Objectives and Outcomes
16. Video: Splash Screens, Icons and Image Resources
17. Video: Exercise (Video): Customizing App Icons and Launch Screens for Android
18. Reading: Exercise (Instructions): Customizing App Icons and Launch Screens for Android
19. Video: Exercise (Video): Customizing App Icons and Launch Screens for iOS
20. Reading: Exercise (Instructions): Customizing App Icons and Launch Screens for iOS
21. Video: Exercise (Video): Image Resources
22. Reading: Exercise (Instructions): Image Resources
23. Reading: Splash Screens, Icons and Image Resources: Additional Resources
24. Video: Assignment 3: Animations and Storage
25. Reading: Assignment 3: Additional Resources

Graded: Assignment 3: Animations and Storage

WEEK 4


Accessing Native Capabilities of Devices: NativeScript Plugins



In this module you will explore NativeScript Plugins that enable you to access the native capabilities of the mobile devices. You will use a few plugins in order to understand the general concepts and the patterns for using these plugins within your NativeScript application


11 videos, 17 readings expand

1. Reading: NativeScript Plugins: Objectives and Outcomes
2. Video: NativeScript Plugins
3. Video: Exercise (Video): Notifying the User
4. Reading: Exercise (Instructions): Notifying the User
5. Reading: NativeScript Plugins: Additional Resources
6. Reading: Social Sharing: Objectives and Outcomes
7. Video: Social Sharing
8. Video: Exercise (Video): Sending Email
9. Reading: Exercise (Instructions): Sending Email
10. Video: Exercise (Video): Social Sharing
11. Reading: Exercise (Instructions): Social Sharing
12. Reading: Social Sharing: Additional Resources
13. Reading: Using the Camera: Objectives and Outcomes
14. Video: Using the Camera
15. Video: Exercise (Video): Using the Camera
16. Reading: Exercise (Instructions): Using the Camera
17. Reading: Using the Camera: Additional Resources
18. Reading: Platform and Network Status: Objectives and Outcomes
19. Video: Platform and Network Status
20. Video: Exercise (Video): Platform and Network Status
21. Reading: Exercise (Instructions): Platform and Network Status
22. Reading: Platform and Network Status: Additional Resources
23. Video: Assignment 4: NativeScript Plugins
24. Reading: Assignment 4: NativeScript Plugins: Additional Resources
25. Video: Conclusions
26. Reading: Conclusions: Additional Resources
27. Reading: Project Implementation: Objectives and Outcomes
28. Reading: Final Report Template

Graded: NativeScript Plugins
Graded: Project Implementation and Final Report