My NativeScript learning conspectus.
Maximilian Schwarzmüller NativeScript Lecture
- 1. Introduction
- 1. Course Introduction
- 2. What is NativeScript
- 3. Under the Hood of NativeScript
- 4. What is Angular & Course Requirements
- 5. Our First NativeScript App!
- 6. Course Outline
- 7. How To Get The Most Out Of The Course
- 2. Optional Angular - A Quick Refresher
- 1. Module Introduction
- 2. What is Angular
- 3. Single Page Applications (SPAs) in Angular & NativeScript
- 4. Understanding Components
- 5. Installing Angular with the Command Line Interface (CLI)
- 6. Installing our IDE
- 7. Understanding the Angular Project Folder Structure
- 8. The App Component
- 10. Cross Component Communication with Property Binding
- 11. Understanding Directives & String Interpolation
- 12. Handling User Input
- 13. Understanding Event Binding
- 14. Executing Methods with Local References
- 15. Understanding Two Way Binding
- 16. Passing Data Up With a Custom Event
- 17. Implementing Routing
- 18. Setting Up Services
- 19. Using the Service with Dependency Injection
- 20. Working with Lifecycle Hooks
- 21. Adding a Person with Services
- 22. Navigating Between Components
- 23. Removing Items On Click
- 24. Implementing an Active Push Mechanism
- 26. Sending HTTP Requests
- 27. Showing a Placeholder Whilst Waiting for a Response
- 28. Wrap Up
- 3. Setting Up the Development Environment
- 1. Setting up NativeScript on macOS
- 2. Setting up NativeScript on Windows
- 4. Using Different Emulator Devices
- 6. Running the App on a Real Device
- 7. What's Up With The Extra .js Files
- 4. Understanding the Basics
- 1. Module Introduction
- 2. Starting the Emulators
- 3. How Does The App Start
- 4. Understanding Components & Layouts
- 5. Building our First own Component
- 6. Adding Basic Element Interactions
- 7. Understanding the Styling Basics
- 8. Styling a Button
- 10. Understanding Layouts - Theory
- 11. The StackLayout
- 12. The FlexboxLayout
- 14. The GridLayout
- 16. Understanding the AbsoluteLayout
- 17. Implementing the Grid Layout in the Course Project
- 18. Splitting our App Into Components
- 19. Passing Data Between Components
- 20. Creating a List of Items
- 21. Making the List Scrollable
- 22. Using the ListView
- 23. Extracting & Rendering Dynamic Values
- 24. Debugging our Application
- 26. Wrap Up
- 5. Diving Into App Navigation
- 1. Module Introduction
- 2. Understanding the Different Navigation Options
- 3. Planning the App
- 4. Creating the App Pages
- 5. Adding our First Route
- 6. Implementing Page Navigation
- 7. How to Add Forward & Backward Navigation to our App
- 8. Understanding the Router Object
- 9. Working with the nsRouterLink Directive
- 12. Adding an Actionbar and a Back Button
- 13. Creating a Shared Component for the Back Button
- 14. Adding Logic to the Back Button
- 15. Overwriting the Default Transition Effect
- 16. Adding the TabView Component
- 17. Displaying Dynamic Routing Content in the Tabs
- 18. Highlighting the Currently Active Tab
- 19. Adding a Sidedrawer
- 20. Adding the Sidedrawer Icon
- 21. Rendering the Button on Android Only
- 22. Forwarding the Button is Pressed Info to the App Component
- 23. Displaying the Sidedrawer
- 24. Implementing the Logout Logic
- 25. Passing Around Dynamic Data
- 26. Reading Dynamic Parameters
- 27. Using the Dynamic Parameter
- 28. Injecting Dynamic Values Into the Action Bar on Per Page Level
- 29. Opening a Modal
- 30. Getting Access to the viewContainerRef
- 31. Passing Data Into the Modal
- 33. Loading Routes Lazily - Theory
- 34. Implementing Lazy Loading
- 35. Loading Additional Modules Lazily
- 36. Adding a Missing Schema
- 37. Wrap Up
- 6. Styling our App
- 1. Module Introduction
- 2. CSS in NativeScript - An Overview
- 3. Understanding Platform Specific Inline Styles
- 4. Platform Specific Files
- 5. Setting Properties Via CSS
- 6. How CSS Works Behind the Scenes
- 7. Using a Theme
- 8. Working with SASS Variables
- 9. Styling the Action Bar10. Preparing the Form Styling
- 11. Centralizing Common Styles
- 12. Styling Today's Challenge
- 13. Working on the Current Challenge
- 14. Adding the Grid to the Current Challenge
- 15. Populating the Grid
- 16. Styling the Grid
- 17. Opening the Modal when Tapping a Day
- 18. Fixing the Sidedrawer Button & Adding Icons
- 19. Adding Text Fonts
- 20. Integrating Images
- 21. Adding Icon Images
- 22. Improving the Logout Button Look
- 23. Wrap Up
- 7. Adding Forms
- 1. Module Introduction
- 2. Configuring Form Inputs
- 3. Adding Form Validation
- 4. Did you Solve your Challenge
- 5. Submitting Form Inputs
- 6. Adding a Login Form
- 7. Setting up the Reactive Form
- 8. Adding Validation & Reading Form Values
- 9. Showing the Validation Text in the Template
- 10. Switching Between Login & Signup
- 11. Wrap Up
- 8. Understanding State
- 1. Module Introduction
- 2. Analyzing the Requirements
- 3. Working on the Challenge Service
- 4. Adding the Challenge & Day Models
- 5. Using the Challenge Model
- 6. Using the Challenge Service
- 7. Rendering the Current Challenge
- 8. Working on the Today Page & State
- 9. Preparing the Update Day Status Logic
- 10. Updating the Day Status for Today
- 11. Reflecting the Day State on the Action Buttons
- 12. Adding Animations
- 13. Controlling the Settable Days
- 14. Setting the Day Status via the Modal
- 15. Reflecting the Current Day's State
- 16. Changing the Cancel Logic in the Modal
- 17. Resetting Today's State Correctly
- 18. Updating an Existing Challenge
- 19. Disabling the Edit Button
- 20. Wrap Up
- 9. Storing Data on the Backend
- 1. Module Introduction
- 2. Setting Up the Firebase Database
- 3. Storing a New Challenge in the Database
- 4. Fetching Data From the Backend
- 5. Displaying the Loaded Data
- 6. Updating Challenges
- 7. Disabling the Failed Button
- 8. Wrap Up
- 10. Adding Authentication to our App
- 1. Module Introduction
- 2. How Authentication Works
- 3. Signing Users Up
- 4. Logging Users In
- 5. Handling Errors & Showing Alerts
- 6. Creating a User Object & Storing the Token
- 7. Managing the User in the Auth Service
- 8. Attaching the Auth Token to Requests
- 9. Authenticating All Requests
- 10. Adding Logout
- 11. Checking the Authentication State
- 12. Adding Auto Login
- 13. Adding Auto Logout
- 14. Adding an Authentication Guard
- 15. Fixing the Redirection Path
- 16. Adding Authorization
- 17. Wrap Up
- 11. Deploying our App
- 1. Module Introduction
- 2. The Publishing Process
- 3. Testing our App on Different Devices
- 4. Adding the App Icon & Splash Screen Icons
- 5. Further Resources
- 6. Publishing the iOS App
- 7. Publishing the Android App
- 12. Code Sharing
- 1. Module Introduction
- 2. How Code Sharing Works
- 3. Creating a Shared Project
- 4. Analysing the Project Structure
- 5. Running the Apps
- 6. Adjusting the Auth & App Modules
- 7. Using Helper Services
- 8. Finishing the Auth Component & Adding Styles
- 9. Working on the Auth Form Styling
- 10. More Auth
- 11. Adding More Helper Services
- 12. Finishing the Authentication Part
- 13. Starting Work on the Challenges Part
- 14. Working on the Today Page
- 15. Working on the Challenge Edit Component
- 16. Fixing the Challenges Filenames & Imports
- 17. Adding the ActionBar
- 18. Reaching the Challenge Edit Page
- 19. Adding the Auth Guard & Auto-Login
- 20. Working on the Current Challenge Page
- 21. Adjusting the Styles
- 22. Resetting the Editing Page Correctly
- 23. Fetching the Current Challenge on Multiple Pages
- 24. Adjusting the Navigation Items
- 25. Navigating Back (Correctly)
- 26. Adding a Web Modal
- 27. Adding a Backdrop for the Modal
- 28. Adding Modal Actions & User Interactions
- 29. Reflecting the Day Status in the Modal
- 30. Populating the Grid Correctly
- 31. Logging Out
- 32. Adding a Loading Indicator
- 33. Finishing the Mobile Apps
- 34. Wrap Up
- 13. Roundup
- 1. Roundup & Next Steps
- 2. Using the Official Resources
Key futures
- 1. NativeScript project overview
- 2. Code sharing
- 3. Debug
- 4. Demo project overview
- 5. NS Layout is position, Layout has no refletion to Android and IOS, its only absttaction.
- 6. NS Components
- 7. Common developmet workflow on NS Angular.
- 8. Create your first NS component
- 9. Styling app
- 10. Communication between components - Event emitter
- 11. ScrollView UI component
- 12. Manage state, Services
- 13. Service
- 14. RxJs component - BehaviorSubject (asObservable)
- 15. Special Navigation for Mobile Phone - Stack based, Tab based, Drawer based>
- 16. Platform depended future - we will create special navigation icon for Androis only and tune it style
- 17. Continue improve app navigation
- 18. TabView navigation
- 19. Styling
- 20. Animation
- 21. Forms
- 22. Working with backend, This project use Firebase
- 23. Spiner
- 24. Authentication
- 25. NativeScrip Alert finction is working!
- 26. Start Authorization on Firebase, unlock databases for Users
- 27. Create persistent UserId
- 28. Create Lazy loading AuthModule
- 29. And finally made authorization on Firebase, each user has own chalenge in Firebase.
- 30. Deploynment.
(*) Also need to take EggHead lecture:
- Create Native Mobile Apps with NativeScript for AngularNathan Walker・43m・Course
- Create Angular iOS and Android AppsNathan Walker・1h 9m・Course
1. NativeScript project overview
3-rd party library (Dropdown, Firebase, Calendar and so on)
![](Ns-25-21.38.14_1.png)
NS Clipboard component
![](Ns-25-21.36.35_1.png)
NS Secure storage component, Android Hawk
![](Ns-25-21.39.38_1.png)
![](Ns-25-21.43.15_1.png)
NS repository (230 items)
![](Ns-25-22.54.36_1.png)
SqLite
![](/AndroidMasterclass/Paulo30_1.png)
NS Showcase - Project builded on NS
![](Ns-25-22.56.53_1.png)
Stackblitz
![](Ns-25-23.03.23_1.png)
6 main NS template projects on Ts and Angular, Ts without Angular projects
![](Ns-25-23.14.27_1.png)
Code for this lecture
![](Ns-27-13.22.14_1.png)
2. Code sharing
- 1. Module Introduction
- 2. How Code Sharing Works
- 3. Creating a Shared Project
- 4. Analysing the Project Structure
- 5. Running the Apps
- 6. Adjusting the Auth & App Modules
- 7. Using Helper Services
- 8. Finishing the Auth Component & Adding Styles
- 9. Working on the Auth Form Styling
- 10. More Auth
- 11. Adding More Helper Services
- 12. Finishing the Authentication Part
- 13. Starting Work on the Challenges Part
- 14. Working on the Today Page
- 15. Working on the Challenge Edit Component
- 16. Fixing the Challenges Filenames & Imports
- 17. Adding the ActionBar
- 18. Reaching the Challenge Edit Page
- 19. Adding the Auth Guard & Auto-Login
- 20. Working on the Current Challenge Page
- 21. Adjusting the Styles
- 22. Resetting the Editing Page Correctly
- 23. Fetching the Current Challenge on Multiple Pages
- 24. Adjusting the Navigation Items
- 25. Navigating Back (Correctly)
- 26. Adding a Web Modal
- 27. Adding a Backdrop for the Modal
- 28. Adding Modal Actions & User Interactions
- 29. Reflecting the Day Status in the Modal
- 30. Populating the Grid Correctly
- 31. Logging Out
- 32. Adding a Loading Indicator
- 33. Finishing the Mobile Apps
- 34. Wrap Up
![](Ns-26-20.54.28_1.png)
tools - share code between mobile apps and Web
![](Ns-26-20.51.54_1.png)
NativeScript library
![](Ns-26-20.51.54_1.png)
3. Debug
'ns debug --bundle' compose all together
![](Ns-26-20.25.48_1.png)
Start debugging
![](Ns-26-20.27.17_1.png)
Chrome Debugger
![](Ns-26-20.28.16_1.png)
Console log redirect to Chromw debugger
![](Ns-26-20.28.39_1.png)
Look to TypeScript code on Debugger
![](Ns-26-20.29.55_1.png)
Set Breakpoint
![](Ns-26-20.30.57_1.png)
Debug inside Vs Code
![](Ns-26-20.32.41_1.png)
![](Ns-26-20.34.55_1.png)
Breakpoint inside Vs Code
![](Ns-26-20.38.48_1.png)
4. Demo project overview
![](Ns-02-22.31.23_1.png)
![](Ns-16-22.34.53_1.png)
![](Ns-16-22.34.53_1.png)
![](Ns-16-22.35.51_1.png)
![](Ns-16-22.36.13_1.png)
Details
![](Ns-16-22.36.26_1.png)
Required library
![](Ns-16-22.37.20_1.png)
Compilation options - target and other
![](Ns-16-22.37.58_1.png)
Starter
![](Ns-16-22.38.27_1.png)
![](Ns-25-20.51.47_1.png)
DevTools inspector
![](Ns-16-22.45.20_1.png)
Router and main component
![](Ns-25-20.57.20_1.png)
Item component and router link
![](Ns-25-21.00.44_1.png)
Service to generate data
![](Ns-25-21.02.34_1.png)
Array.Filter
![](Ns-25-21.05.09_1.png)
Detail component
![](Ns-25-21.05.09_1.png)
Bind all component together
![](Ns-25-22.48.49_1.png)
This is way to avoid Angular engine finding Html and checking it
![](Ns-25-22.50.14_1.png)
5. NS Layout is position, Layout has no refletion to Android and IOS, its only absttaction.
![](Ns-16-22.27.31_1.png)
![](Ns-25-21.15.46_1.png)
![](Ns-25-21.16.34_1.png)
![](Ns-25-21.20.01_1.png)
Layout types
![](Ns-26-13.05.11_1.png)
![](Ns-26-13.05.36_1.png)
Plus Root laout in other version
![](Ns-26-13.03.30_1.png)
![](Ns-26-13.04.20_1.png)
More details how to use GridLayout, column property, try to insert two component to Grid
![](Ns-26-13.11.39_1.png)
![](Ns-26-13.13.40_1.png)
![](Ns-26-13.51.09_1.png)
![](Ns-26-13.51.29_1.png)
Return to Stack
![](Ns-26-13.52.16_1.png)
![](Ns-26-13.52.42_1.png)
6. NS Components
How components translative to Native
![](Ns-25-22.44.53_1.png)
All UI components
![](Ns-25-21.21.03_1.png)
Reflect NS component to Native (Android, IOS)
![](Ns-25-22.46.24_1.png)
![](Ns-25-22.46.57_1.png)
7. Common developmet workflow on NS Angular.
Create component without NG G, create 3 files - *.html, *.ts, *.css
![](Ns-25-23.22.11_1.png)
Export class
![](Ns-25-23.22.28_1.png)
Add component decorator
![](Ns-25-23.23.23_1.png)
Bind code, template and CSS together
![](Ns-25-23.24.50_1.png)
Add component to project module list
![](Ns-25-23.26.11_1.png)
Add declaration
![](Ns-25-23.27.20_1.png)
Start building Component from Layout
![](Ns-25-23.28.56_1.png)
Add content to Layout
![](Ns-25-23.30.58_1.png)
Include component to application logic, in this case this is root component
![](Ns-25-23.35.39_1.png)
![](Ns-25-23.36.32_1.png)
See result
![](Ns-25-23.37.42_1.png)
8. Create your first NS component
Creare variable to receive text
![](Ns-26-11.52.14_1.png)
NgModel (two way bining - '[()]') allow accept variables from Textbox
![](Ns-26-11.53.00_1.png)
For working with user input and unlock NgModel need to import Forms module
![](Ns-26-12.08.03_1.png)
![](Ns-26-12.09.27_1.png)
See all attributes and description of UI controls
![](Ns-26-11.56.13_1.png)
Also see description of properties of each UI controls
![](Ns-26-12.00.19_1.png)
In this case we use Hint attribute
![](Ns-26-12.04.39_1.png)
And check how control will working with attributes
![](Ns-26-12.05.31_1.png)
Gestures
![](Ns-26-12.14.49_1.png)
Gestures Tap event, '()' - allow to bind code to event,
![](Ns-26-12.15.29_1.png)
![](Ns-26-12.16.09_1.png)
'[]' - property binding.
![](Ns-26-12.18.09_1.png)
Pass value from Textbox to Label
![](Ns-26-12.16.47_1.png)
Check result
![](Ns-26-12.18.09_1.png)
![](Ns-26-12.19.19_1.png)
9. Styling app
![](Ns-26-12.23.15_1.png)
supported CSS properies
![](Ns-26-12.22.52_1.png)
Supported CSS selectors (as static CSS property and dynamically on TS)
![](Ns-26-12.24.39_1.png)
![](Ns-26-12.26.50_1.png)
![](Ns-26-12.27.05_1.png)
![](Ns-26-12.27.33_1.png)
Font size use digital value without 'px', device mappping this digital value to pixels.
![](Ns-26-12.28.34_1.png)
Style can adding as property and into Style property
![](Ns-26-12.43.30_1.png)
Also we can add common UI style of component
![](Ns-26-12.45.12_1.png)
Check style
![](Ns-26-12.45.24_1.png)
Style can add globally to whole apps
![](Ns-26-12.46.37_1.png)
![](Ns-26-12.46.56_1.png)
Global styling appplied to global componen
![](Ns-26-12.47.30_1.png)
![](Ns-26-12.48.24_1.png)
Styling with class description
![](Ns-26-13.00.10_1.png)
![](Ns-26-13.00.22_1.png)
![](Ns-26-13.00.42_1.png)
10. Communication between components - Event emitter
RaiseEvent
![](Ns-26-13.54.15_1.png)
![](Ns-26-13.55.31_1.png)
EventSubscriber
![](Ns-26-13.56.37_1.png)
![](Ns-26-13.57.34_1.png)
$event - automaitc parameters of each events
![](Ns-26-13.59.15_1.png)
Pass event to property
![](Ns-26-13.58.25_1.png)
![](Ns-26-14.00.36_1.png)
Check
![](Ns-26-13.58.25_1.png)
Pass array between components
![](Ns-26-14.04.56_1.png)
![](Ns-26-14.06.59_1.png)
*NgFor repeater is a directive can render array in cyrcle
![](Ns-26-14.08.58_1.png)
Check
![](Ns-26-14.10.25_1.png)
11. ScrollView UI component
![](Ns-26-14.11.25_1.png)
Add component dynamically wit TS
![](Ns-26-14.12.28_1.png)
![](Ns-26-14.12.38_1.png)
Check
![](Ns-26-14.13.41_1.png)
ViewPort
![](Ns-26-14.14.36_1.png)
![](Ns-26-14.15.50_1.png)
Virtualisation of ScroolView
![](Ns-26-14.16.05_1.png)
ListView component contains ng-tempate, ng-template provided by Angular, not NS
![](Ns-26-20.07.29_1.png)
Difference between IOS and Android
![](Ns-26-20.10.47_1.png)
![](Ns-26-20.13.13_1.png)
'let-' - special variable for ng-template
![](Ns-26-20.15.59_1.png)
![](Ns-26-20.17.37_1.png)
Property binding to specail variable
![](Ns-26-20.17.37_1.png)
![](Ns-26-20.18.46_1.png)
![](Ns-26-20.20.24_1.png)
Index of ListItem element
![](Ns-26-20.22.04_1.png)
12. Manage state, Services
State lost when application refeshing
![](Ns-26-20.45.28_1.png)
13. Service
Inject service, '{}' - JS object pass as parameter
![](Ns-26-21.05.50_1.png)
Service start with @Injectable - set\rvice decorator
![](Ns-27-12.38.30_1.png)
![](Ns-27-12.39.09_1.png)
Lazy loading - Provide service on top level of application adn remove 'providedIn:root', than add service only to one component.
![](Ns-27-12.44.23_1.png)
![](Ns-27-12.45.00_1.png)
Service can not be added to top level component
![](Ns-27-12.47.18_1.png)
14. RxJs component - BehaviorSubject (asObservable)
![](Ns-27-12.49.23_1.png)
Has Generic future
![](Ns-27-12.51.09_1.png)
Can raise event with empty object
![](Ns-27-12.51.58_1.png)
Create class for using as event parameter
![](Ns-27-12.53.35_1.png)
If we add add parameters to constructor it cann see on all class
![](Ns-27-12.54.19_1.png)
Public parameters can accesible outside module
![](Ns-27-12.55.47_1.png)
Interface with Enum
![](Ns-27-12.58.49_1.png)
Import interface to Class
![](Ns-27-12.59.49_1.png)
Currently we create a function for each day
![](Ns-27-13.10.10_1.png)
![](Ns-27-13.13.37_1.png)
Use Array.Find function for select a day characteristics
![](Ns-27-13.10.54_1.png)
Return copy of array with spread syntax '...'
![](Ns-27-13.12.46_1.png)
And noew BehaviorObject can emit types events
![](Ns-27-13.14.43_1.png)
This is current code
![](Ns-27-13.23.21_1.png)
![](Ns-27-13.25.48_1.png)
Create external asObservable property
![](Ns-27-13.30.59_1.png)
![](Ns-27-13.31.39_1.png)
Result of show days characteristics
![](Ns-02-14.02.42_1.png)
15. Special Navigation for Mobile Phone - Stack based, Tab based, Drawer based
>![](Ns-27-14.37.00_1.png)
Planning application navigation
![](Ns-27-14.37.00_1.png)
Create new components by 'ng g c xxx'
![](Ns-27-14.49.05_1.png)
![](Ns-27-14.49.31_1.png)
RadSlideDrawler contains only Logout function
![](Ns-27-14.53.35_1.png)
Add routing module manually
![](Ns-27-14.56.42_1.png)
Import NS routing instead Angular Routing
![](Ns-27-14.58.02_1.png)
![](Ns-27-14.59.23_1.png)
![](Ns-27-14.59.53_1.png)
Router-outlet can start app with empty path ''
![](Ns-27-15.08.43_1.png)
'router-outlet' include SPA-page navigation to start component
![](Ns-27-15.08.32_1.png)
We can inject router module to any component
![](Ns-27-15.12.55_1.png)
And use Router.Navigate for go to needed page
![](Ns-27-15.14.00_1.png)
Mobile phone app is not a SPA page, therefore we need replace normal Angular router to NS page wrapper to components 'page-router-outlet'
![](Ns-27-15.18.56_1.png)
Nornally 'page-router-outlet' show '<back' button on IOS and nothing on Android
![](Ns-27-15.28.09_1.png)
We can inject Routing as NS RouterExtension module, this module has mo method, for example - can we go back? (to prevent exit)
![](Ns-27-15.31.18_1.png)
![](Ns-27-15.35.24_1.png)
Also extension has animation property for navigation between page
![](Ns-27-15.37.20_1.png)
Check routing
![](Ns-27-21.27.41_1.png)
We can use in button nsRouterLink property
![](Ns-27-21.28.01_1.png)
And ClearHistory property to prevent application exit
![](Ns-27-21.29.16_1.png)
Currently we will use ActionBar UI component for top on all pages with page title
![](Ns-27-22.46.21_1.png)
![](Ns-27-22.45.59_1.png)
We can add custom navigation button on IOS
![](Ns-27-22.46.21_1.png)
![](Ns-28-22.28.16_1.png)
![](Ns-28-22.28.39_1.png)
For Android we need to use special Android Icon
![](Ns-28-22.31.02_1.png)
![](Ns-28-22.32.13_1.png)
![](Ns-28-22.32.43_1.png)
16. Platform depended future - we will create special navigation icon for Androis only and tune it style
![](Ns-28-22.40.34_1.png)
Firstly need to import platform
![](Ns-28-22.36.57_1.png)
Than use platform specific code
![](Ns-28-22.33.59_1.png)
![](Ns-28-22.37.31_1.png)
For receive access to any UI item we need to import page component
![](Ns-28-22.39.29_1.png)
Now we have access to ActionBar
![](Ns-28-22.40.44_1.png)
And access to NativeView
![](Ns-28-22.41.41_1.png)
Import all Android variable
![](Ns-28-22.43.31_1.png)
And Finally we can change style of Android Back button, (need add 'any' for android type)
![](Ns-28-22.45.22_1.png)
And bind this code to 'loaded' event of ActionBar
![](Ns-28-22.47.22_1.png)
Check it, button 'Back' has our custom color
![](Ns-28-22.48.04_1.png)
17. Continue improve app navigation
Now we move platform depended ActionBar from page to separate component
![](Ns-29-00.20.32_1.png)
![](Ns-29-00.31.20_1.png)
Make input parameter 'title' to ActionBar component
![](Ns-29-00.31.59_1.png)
And setup it for each page
![](Ns-29-00.33.15_1.png)
This is final code for shared component
![](Ns-29-00.26.48_1.png)
![](Ns-29-00.27.42_1.png)
![](Ns-29-00.28.31_1.png)
And with Drawler
![](Ns-29-00.28.52_1.png)
![](Ns-29-00.28.52_1.png)
18. TabView navigation
![](Ns-29-12.51.34_1.png)
Access for routing parameters
![](Ns-29-12.52.11_1.png)
*TabViewItem
![](Ns-29-12.58.12_1.png)
This is Router array
![](Ns-29-13.00.10_1.png)
And routing path on Button
![](Ns-29-13.01.04_1.png)
Check Tb navigation
![](Ns-29-13.02.12_1.png)
Add nested navigation inside tab
![](Ns-29-13.05.17_1.png)
![](Ns-29-13.05.53_1.png)
Add children navigation to Router array
![](Ns-29-13.08.00_1.png)
![](Ns-29-13.11.23_1.png)
With parameter Outlet, this is Angular Future
![](Ns-29-13.09.23_1.png)
We can add Outlet parameters dymamically
![](Ns-29-13.13.31_1.png)
![](Ns-29-13.19.17_1.png)
And we need to inject ActivatedRoute class for access to router additional metadata
![](Ns-29-13.16.52_1.png)
Check how navigation inside Tab working
![](Ns-29-13.18.50_1.png)
![](Ns-29-13.19.40_1.png)
![](Ns-29-13.19.56_1.png)
Inject Page ooject and hide some UI component on page
![](Ns-29-13.22.22_1.png)
![](Ns-29-13.22.08_1.png)
Altarnate way - move tabItem to StackLayout
![](Ns-29-13.23.47_1.png)
Read metadata from ActivateRoure
![](Ns-29-22.03.31_1.png)
![](Ns-29-22.04.06_1.png)
19. Styling
- 1. Module Introduction
- 2. CSS in NativeScript - An Overview
- 3. Understanding Platform Specific Inline Styles
- 4. Platform Specific Files
- 5. Setting Properties Via CSS
- 6. How CSS Works Behind the Scenes
- 7. Using a Theme
- 8. Working with SASS Variables
- 9. Styling the Action Bar10. Preparing the Form Styling
- 11. Centralizing Common Styles
- 12. Styling Today's Challenge
- 13. Working on the Current Challenge
- 14. Adding the Grid to the Current Challenge
- 15. Populating the Grid
- 16. Styling the Grid
- 17. Opening the Modal when Tapping a Day
- 18. Fixing the Sidedrawer Button & Adding Icons
- 19. Adding Text Fonts
- 20. Integrating Images
- 21. Adding Icon Images
- 22. Improving the Logout Button Look
- 23. Wrap Up
![](Ns-29-22.06.55_1.png)
Various selectors
![](Ns-29-22.08.45_1.png)
Global styling>
![](Ns-29-22.13.52_1.png)
We can pass parameter to another global styleing
![](Ns-29-22.14.35_1.png)
Platform specific CSS
![](Ns-29-22.16.31_1.png)
Prefix supported in styling on CSS, event, text
![](Ns-29-22.18.24_1.png)
![](Ns-29-22.22.41_1.png)
![](Ns-29-22.20.19_1.png)
Check IOS only style
![](Ns-29-22.22.41_1.png)
![](Ns-29-22.23.16_1.png)
20. Animation
![](Ns-29-12.39.50_1.png)
![](Ns-29-23.07.06_1.png)
Step one, define KeyFrames with tramsformation: from - to
![](Ns-29-22.56.06_1.png)
Than define class referred to KeyFrames with other animation parametres - iteration count, duration, direction
![](Ns-29-22.58.18_1.png)
![](Ns-29-22.59.55_1.png)
Check
![](Ns-29-23.01.36_1.png)
![](Ns-29-23.02.25_1.png)
21. Forms
Template-driven and Reactive forms, reactive means all configured in TS code. Template based not full supported on NS, because tag FORMS missing in NS.
![](Ns-02-13.44.58_1.png)
In this project ChalengeEdit id Template-Driven form
![](Ns-02-14.06.38_1.png)
![](Ns-02-14.06.38_1.png)
Reacrive forms used in this project in Auth module
![](Ns-02-13.53.39_1.png)
![](Ns-02-13.54.10_1.png)
![](Ns-02-13.54.43_1.png)
![](Ns-02-13.58.31_1.png)
![](Ns-02-13.58.49_1.png)
More details ...
22. Working with backend, This project use Firebase
![](Ns-27-13.36.14_1.png)
Place to insert code
>![](Ns-02-14.15.15_1.png)
Firtly need import HttpClient from NS and Inject it
![](Ns-02-14.15.42_1.png)
![](Ns-02-14.16.20_1.png)
![](Ns-02-14.17.04_1.png)
For writing to server we will use PUT method
![](Ns-02-14.17.35_1.png)
Copy Firebase URL
![](Ns-02-14.18.24_1.png)
![](Ns-02-14.18.38_1.png)
For Firebase we always need to add JSON on the end
![](Ns-02-14.19.15_1.png)
Second parameter Data, and we need to Subsribe in order to receive result
![](Ns-02-14.20.02_1.png)
![](Ns-02-14.20.49_1.png)
Or return Obsevable from this method
![](Ns-02-14.21.37_1.png)
But currently we only see result on console
![](Ns-02-14.22.49_1.png)
Try to see result of first test writing to Firebase
![](Ns-02-14.23.38_1.png)
![](Ns-02-14.24.14_1.png)
![](Ns-02-14.24.56_1.png)
![](Ns-02-14.25.08_1.png)
Try to first read
![](Ns-02-14.27.12_1.png)
Read can be typed
![](Ns-02-14.27.33_1.png)
We can pass JS object directly to this place to receive typed result
![](Ns-02-14.27.50_1.png)
![](Ns-02-14.29.07_1.png)
We can return result as Observable
![](Ns-02-14.30.11_1.png)
23. Spiner
Inject service in right place and understand routing
![](Ns-02-14.31.02_1.png)
![](Ns-02-14.31.46_1.png)
Create IsLoading flag
![](Ns-02-14.32.09_1.png)
Try Fitch result and check corret place to receive result
![](Ns-02-14.32.27_1.png)
![](Ns-02-14.32.49_1.png)
Change flag true/false before and after result received
![](Ns-02-14.33.14_1.png)
Handle not answered server
![](Ns-02-14.33.36_1.png)
![](Ns-02-14.34.03_1.png)
Add Spiner on the form *ngIf
![](Ns-02-14.34.41_1.png)
Add ActivityIndicator and tune it
![](Ns-02-14.35.20_1.png)
![](Ns-02-14.36.07_1.png)
Change place to going to needed URL after Fitch result, move code to subsribe branch, if server serpond correctly
![](Ns-02-14.37.40_1.png)
![](Ns-02-14.38.39_1.png)
![](Ns-02-14.39.54_1.png)
![](Ns-02-14.39.08_1.png)
Look to Spiner
![](Ns-02-14.39.54_1.png)
24. Authentication
Firebase check login/pass and if it valid Firebase return JWT and we need append thaty JWT as header to each request.
Cuprently project has empty authentication
>![](Ns-02-14.40.47_1.png)
![](Ns-02-22.31.23_1.png)
We will add FireBase AU
![](Ns-02-22.33.10_1.png)
Various type of Firebase AU
![](Ns-02-22.37.43_1.png)
We select simple eMail/Pass AU
![](Ns-02-22.38.20_1.png)
We need create POST request with parameters
![](Ns-02-22.39.00_1.png)
![](Ns-02-22.39.54_1.png)
![](Ns-02-22.41.00_1.png)
Currently we instantly after login redirect to /chalenge
![](Ns-02-22.41.48_1.png)
We start to add AU from servie AuthService
![](Ns-02-22.43.20_1.png)
Service need 2 base method - login and Signup
![](Ns-02-22.44.05_1.png)
Service will based on standard Angular http client
![](Ns-02-22.44.51_1.png)
Firstly copy ApiKey from FireBase
![](Ns-02-22.48.29_1.png)
![](Ns-02-22.49.02_1.png)
![](Ns-02-22.50.55_1.png)
Second parameter of POST request is data
![](Ns-02-22.51.34_1.png)
![](Ns-02-22.51.57_1.png)
![](Ns-02-22.52.22_1.png)
Pass JS object as parameters
![](Ns-02-22.53.14_1.png)
Subscribe handles when POST request will finish, Farebase return JWT
![](Ns-02-22.54.24_1.png)
![](Ns-02-22.55.06_1.png)
First attempt to signUp, Firebase create new user and we receive JWT
![](Ns-02-22.56.01_1.png)
![](Ns-02-22.56.30_1.png)
![](Ns-02-22.57.14_1.png)
![](Ns-02-22.58.06_1.png)
Verify pass
![](Ns-02-23.00.09_1.png)
Add application logic if AU service return correct token and processing error if no
![](Ns-02-23.02.26_1.png)
![](Ns-02-23.03.30_1.png)
![](Ns-02-23.04.23_1.png)
![](Ns-02-23.05.07_1.png)
![](Ns-02-23.05.47_1.png)
Add spinner
![](Ns-02-23.06.24_1.png)
![](Ns-02-23.06.47_1.png)
Check spinner
![](Ns-02-23.06.47_1.png)
Check bad SignUp branch
![](Ns-02-23.09.04_1.png)
![](Ns-02-23.09.25_1.png)
Import ThrowError and CatchError from RxJs
![](Ns-02-23.11.55_1.png)
![](Ns-02-23.12.50_1.png)
Import RxJs Pipe and CatchError, Pipe function let's you chain RxJS operators, Pipe function returns a new Observable each time https://rxjs.dev/guide/operators, https://thinkrx.io/rxjs/pipe/, interesting that Angular also has Pipe operator - https://angular.io/guide/pipes
![](Ns-02-23.11.04_1.png)
And insert ThrowError and CatchError into Pipe
![](Ns-02-23.13.28_1.png)
Handle error in separate function
![](Ns-02-23.14.33_1.png)
![](Ns-02-23.15.05_1.png)
![](Ns-02-23.15.35_1.png)
Common Firebase error on Login and Signup
![](Ns-02-23.17.10_1.png)
Handle that errors
![](Ns-02-23.17.35_1.png)
25. NativeScrip Alert finction is working!
![](Ns-02-23.18.09_1.png)
![](Ns-02-23.18.53_1.png)
![](Ns-02-23.19.42_1.png)
![](Ns-02-23.20.42_1.png)
![](Ns-02-23.21.28_1.png)
26. Start Authorization on Firebase, unlock databases for Users
Changing default databse rules to access databse only for Authenticated users
![](Ns-03-10.49.56_1.png)
![](Ns-03-10.51.32_1.png)
![](Ns-03-10.52.06_1.png)
And check rules
![](Ns-03-10.52.57_1.png)
Currently all users store own data only one place - one for all users
![](Ns-03-10.53.42_1.png)
Create class to store User information
![](Ns-03-10.56.33_1.png)
Import Tap from RxJs https://rxjs.dev/api/operators/tap
![](Ns-03-10.58.21_1.png)
Create types post request
![](Ns-03-11.03.09_1.png)
![](Ns-03-11.51.37_1.png)
![](Ns-03-11.52.29_1.png)
![](Ns-03-11.53.30_1.png)
Tap is possible second argument of Post request, we create new User on Tap based on typed response
![](Ns-03-11.54.10_1.png)
![](Ns-03-11.54.28_1.png)
![](Ns-03-11.55.17_1.png)
But problem with data, we need convert data to milliseconds and calculate experied date
![](Ns-03-11.56.38_1.png)
![](Ns-03-11.58.39_1.png)
And finally we create new User with correct token experied time
![](Ns-03-12.00.09_1.png)
![](Ns-03-12.01.50_1.png)
We have new user, but still don't use it, now we create BehaviorObject from RxJs allow to subscribe https://rxjs.dev/api/index/class/BehaviorSubject
![](Ns-03-12.05.30_1.png)
Now User will return asObservable
![](Ns-03-12.05.30_1.png)
Next method emit User event https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject
![](Ns-03-12.06.39_1.png)
Firebase response can emit additional extra field, we set up response with optional parameter
![](Ns-03-12.10.27_1.png)
![](Ns-03-12.09.19_1.png)
For add AU Header to any request we need to Inject Auth service to Chalenge service
![](Ns-03-13.15.26_1.png)
![](Ns-03-13.15.41_1.png)
But we need inject on observable result to another observable, in order to do this we need to use SwitchMap https://thinkrx.io/rxjs/switchMap/, https://rxjs.dev/api/index/function/switchMap
![](Ns-03-13.18.04_1.png)
![](Ns-03-13.19.50_1.png)
Build correct logic, firstly we receive User than inject User class Header to Autorized request to Firebase
![](Ns-03-13.21.31_1.png)
![](Ns-03-13.21.51_1.png)
![](Ns-03-13.22.29_1.png)
![](Ns-03-13.24.21_1.png)
Check how it working
![](Ns-03-13.24.21_1.png)
![](Ns-03-13.31.35_1.png)
![](Ns-03-13.29.21_1.png)
![](Ns-03-13.27.19_1.png)
27. Create persistent UserId
If we close app currnly, we need login again
![](Ns-03-13.32.52_1.png)
![](Ns-03-13.33.04_1.png)
![](Ns-03-13.33.19_1.png)
Because logout emit null user
![](Ns-03-13.35.00_1.png)
![](Ns-03-13.37.28_1.png)
![](Ns-03-13.38.18_1.png)
Firstly we need to check token status, is it experied?
![](Ns-03-13.40.40_1.png)
!! = double exclamation convert token to boolean (novalue converted to false)
![](Ns-03-13.43.07_1.png)
We will store to server only correct User Token
![](Ns-03-13.45.17_1.png)
ApplicationSetting allow store simple KeyValue data to Application Setting storage
![](Ns-03-13.49.04_1.png)
This four methods allow store, retrieve and delete string Key
![](Ns-03-13.49.32_1.png)
We strinfy User object to Json string
![](Ns-03-14.02.18_1.png)
Import OF from RxJs https://thinkrx.io/rxjs/of/
![](Ns-03-14.04.37_1.png)
![](Ns-03-14.05.29_1.png)
Create Observable from simple boolean value
![](Ns-03-14.06.06_1.png)
Or Restore object from Application Setting
![](Ns-03-14.06.46_1.png)
![](Ns-03-14.07.34_1.png)
Create Typed data fron Json.Parse
![](Ns-03-14.08.23_1.png)
And create Observable from srestored User object
![](Ns-03-14.10.00_1.png)
![](Ns-03-14.11.19_1.png)
![](Ns-03-14.12.30_1.png)
Now for create AutoLogin we can only Subscribe to Auth Service
![](Ns-03-14.13.41_1.png)
Change Route for Autologin, in this case defaul path '' redirect /change
![](Ns-03-22.33.56_1.png)
28. Create Lazy loading AuthModule
We need to remove Lazy loading module from Root Module, and create separate module
![](Ns-03-22.35.51_1.png)
![](Ns-03-22.36.42_1.png)
Configure declaration
![](Ns-03-22.37.01_1.png)
![](Ns-03-22.37.38_1.png)
Configure Router path and loaded component
![](Ns-03-22.38.14_1.png)
![](Ns-03-22.46.37_1.png)
AuthGuard provided by Angular, need implement CanLoad method https://angular.io/api/router/CanLoad
![](Ns-03-22.49.31_1.png)
![](Ns-03-22.51.13_1.png)
Click CanLoad and copy interfaces to constructor
![](Ns-03-22.51.31_1.png)
![](Ns-03-22.52.10_1.png)
![](Ns-03-22.53.03_1.png)
![](Ns-03-22.53.27_1.png)
![](Ns-03-22.53.48_1.png)
Interface require Promise wrapper of Boolean or observable wrapper of Boolean
![](Ns-03-22.55.27_1.png)
Use Take from RxJs inside Pipe - https://rxjs.dev/api/index/function/take
![](Ns-03-22.57.23_1.png)
Use SwithMap and Tap from RxJs
![](Ns-03-22.58.35_1.png)
![](Ns-03-23.00.19_1.png)
AuthGuard loaded as provider
![](Ns-03-23.01.54_1.png)
Configure main route module
![](Ns-03-23.03.02_1.png)
29. And finally made authorization on Firebase, each user has own chalenge in Firebase.
Firstly we need to add additional suffix to URL
![](Ns-03-23.08.24_1.png)
And check this, each user has own key on Firebase
![](Ns-03-23.10.40_1.png)
![](Ns-03-23.12.43_1.png)
One chalenge to all user can be deleted now
![](Ns-03-23.13.47_1.png)
Import Subscription from RxJs https://rxjs.dev/api/index/class/Subscription
![](Ns-03-23.17.54_1.png)
Subscribe to store user info
![](Ns-03-23.18.49_1.png)
Generate empty user by BehaviorSubject Next
![](Ns-03-23.20.08_1.png)
And finally check how Authorization working in firebase
![](Ns-03-23.22.06_1.png)
Change Firebase rules to firbid access for other user's token
![](Ns-03-23.22.40_1.png)
![](Ns-03-23.24.19_1.png)
This is full final code code of this service
![](Ns-02-22.45.31_1.png)
![](Ns-02-22.46.16_1.png)
![](Ns-02-22.46.35_1.png)
30. Deploynment.
- 1. Module Introduction
- 2. The Publishing Process
- 3. Testing our App on Different Devices
- 4. Adding the App Icon & Splash Screen Icons
- 5. Further Resources
- 6. Publishing the iOS App
- 7. Publishing the Android App
Iphone emulator.
![](/NativeScriptLearning/Iphone-1_1.png)
![](/NativeScriptLearning/Iphone-2_1.png)
![](/NativeScriptLearning/Iphone-3_1.png)
Bundle APK.
![](/NativeScriptLearning/Bundle-1_1.png)
![](/NativeScriptLearning/Bundle-2_1.png)
Related page:
- (2024) NativeScript Mosaic
- (2023) NativeScript and Android troubleshooting.
- (2024) NativeScript and Angular form
- (2024) NativeScript Drawer for Android/IOS phone (clear Angular project)
- (2023) Magic deployment Android application with NS Preview.
- (2022) Up and running Angular application on Android mobile phone with NativeScript.
- (2022) My NativeScript learning conspectus.
- (2024) Google Cloud and Cloudflare
- (2023) CloudflareWorker and Supabase
- (2022) JS, Css
- (2022) Typescript, Webpack
- (2022) Angular, RxJs, Firebase, MongoDb
- (2022) Node, NestJs, Electron, Pwa, Telegram
- (2022) React, Redux, GraphQL, NextJs
- (2022) Angular/Typescript, JS books
![](http://forum.vb-net.com/GetTopicCount.png?id=22b73de0-c713-465e-ad04-9cbf788267e7)
<SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |