Oreilly - Ionic 4 - Build iOS, Android and Web Apps with Ionic and Angular

Oreilly - Ionic 4 - Build iOS, Android and Web Apps with Ionic and Angular

by Maximilian Schwarzmüller | Publisher: Packt Publishing | Release Date: April 2019 | ISBN: 9781838828943

https://www.oreilly.com/library/view/ionic-4-/9781838828943/

Build native iOS and Android as well as progressive web apps with Angular, Capacitor, and the Ionic frameworkAbout This VideoExplore important Ionic components as well as concepts such as navigation (tabs and side-menus), user input, native device features (including camera), storage, HTTP, and authenticationLearn how to run your apps in the browser, on an emulator, and on your own device!In DetailIonic is one of the most exciting technologies you can learn. It enables you to use one codebase (written in HTML, JS, and CSS) to build and ship regular (progressive) web apps as well as native mobile apps for iOS and Android. This course will help you work with the latest version of Ionic from scratch. Angular (formerly Angular 2) allows you to create awesome web applications powered by TypeScript or JavaScript. The Ionic framework allows you to use your Angular knowledge to build web applications that can be compiled into native mobile apps, running on any iOS or Android device, and enables you to publish them as progressive web apps. You'll use your existing Angular, HTML, JS, and CSS knowledge to build your native mobile apps and discover components that can be used to compose native-like user interfaces. The capacitor will handle the rest as it's used to then build a native mobile app for iOS/ Android based on your code. This allows you to make the most of your knowledge and release your application on all possible devices without having to learn different languages! No wonder that hybrid frameworks like Ionic are extremely popular and in high demand!Downloading the example code for this course: You can download the example code files for this course on GitHub at the following link: https://github.com/PacktPublishing/Ionic-4---Build-iOS-Android-and-Web-Apps-with-Ionic-and-Angular. If you require support please email: [email protected]

Chapter 1 : Getting Started
- Course Introduction 00:01:56
- What Is Ionic? 00:07:44
- A Closer Look at the Ionic Platform 00:04:12
- What is Angular? 00:03:43
- Our First Ionic App! 00:12:56
- The History of Ionic 00:04:02
- Ionic 4+ vs Ionic 3 00:03:07
- How to Build Native Mobile Apps with Ionic 00:03:45
- Course Outline 00:06:24
- How to Get the Most Out Of the Course 00:01:50
Chapter 2 : Angular Refresher
- Module Introduction 00:00:32
- What is Angular? 00:02:43
- Angular SPAs & Ionic 00:03:10
- Understanding Components 00:01:37
- Installing Angular with the CLI 00:04:30
- Installing the IDE 00:05:00
- Understanding the Folder Structure 00:08:15
- The App Component 00:07:04
- Creating Our First Component 00:04:06
- Cross Component Communication with Property Binding 00:05:23
- Understanding Directives & String Interpolation 00:04:05
- Handling User Input 00:04:09
- Understanding Event Binding 00:02:13
- Local References 00:01:49
- Understanding Two-Way-Binding 00:05:57
- Passing Data Around with Custom Events 00:03:58
- Implementing Routing 00:07:11
- Setting Up Services 00:03:16
- Using Services with Dependency Injection 00:02:48
- Working with Angular Lifecycle Hooks 00:03:25
- Adding a Person with Services 00:02:45
- Navigating between Components 00:02:03
- Removing Items upon a Click 00:03:09
- "Push"ing Data Around with Subjects 00:05:35
- Sending Http Requests 00:10:03
- Showing a Placeholder Whilst Waiting for a Response 00:02:06
- Wrap Up 00:00:58
Chapter 3 : Ionic Component Basics
- Module Introduction 00:01:21
- Core App Building Blocks 00:04:27
- Under the Hood of Ionic Components 00:06:47
- Setting Up a Non-Angular Ionic Project 00:03:05
- Where to Learn all about Ionic Components 00:02:30
- Using Basic Ionic Components 00:05:12
- More Basic Components 00:03:23
- Component Categories 00:02:28
- Using the Ionic Grid 00:04:52
- Adding Icons & Using Slots 00:06:14
- Using CSS Utility Attributes 00:02:11
- Using Ionic Elements like "Normal" HTML Elements 00:04:12
- Validating User Input 00:02:46
- Creating Ionic Elements Programmatically 00:04:58
- Finishing Up the Base JavaScript Logic 00:03:39
- Finalizing the Layout 00:01:31
- Using Controller Components 00:06:29
- Why Angular? 00:05:29
Chapter 4 : Angular + Ionic
- Module Introduction 00:01:45
- Why Use Angular? 00:02:39
- Creating a New Ionic Angular Project 00:05:50
- Analyzing the Created Project 00:05:54
- How Angular & Ionic Work Together 00:03:53
- Adding & Loading a New Page 00:05:36
- Using Angular Features on Ionic Components 00:05:28
- Setting Up Angular Routes 00:03:31
- Managing State with Services 00:06:22
- Extracting and Displaying Route Param Data 00:08:34
- Navigating Between Pages 00:05:33
- Deleting a Recipe 00:04:34
- Injecting Ionic Controllers 00:03:32
- Angular Components vs Ionic Components 00:05:49
- Wrap Up 00:00:37
Chapter 5 : Building Native Apps with Capacitor
- Module Introduction 00:00:59
- General Information 00:01:29
- Creating an Android App 00:12:33
- Creating an iOS App 00:09:10
- Wrap Up 00:01:03
Chapter 6 : Debugging
- Module Introduction 00:00:44
- Error Messages & console.log() 00:04:02
- Using the Browser DevTools & Breakpoints 00:02:31
- Debugging the UI & Performance 00:02:54
- Debugging Android Apps 00:04:16
- Debugging iOS Apps 00:04:16
- Wrap Up 00:00:40
Chapter 7 : Navigation & Routing in Ionic Apps
- Module Introduction 00:01:41
- How Routing Work in an Ionic + Angular App 00:04:37
- Ionic Page Caching & Extra Lifecycle Hooks 00:09:20
- Planning the Course Project 00:04:07
- Creating Our App Pages 00:05:36
- Adjusting Our Main Routing Configuration 00:01:59
- Understanding Ionic Tabs 00:01:30
- Adding Tabs to the App 00:15:22
- Preparing Data & Services for the Project 00:05:53
- Outputting "Places" 00:08:13
- Adding Forward Navigation 00:06:21
- Going Back with NavController 00:07:02
- Navigating via Toolbar Buttons 00:03:13
- Extracting the ID of Loaded Places 00:05:35
- Adding a SideDrawer 00:07:00
- Opening + Closing the SideDrawer 00:04:46
- Adding Links & Switching Pages 00:04:15
- Adding the Auth Service 00:03:28
- Adding an Auth Guard 00:07:47
- Opening a Modal 00:06:26
- Closing the Modal & Passing Data 00:07:22
- Wrap Up 00:01:24
Chapter 8 : Ionic Components Overview
- Module Introduction 00:01:52
- Attributes & Slots 00:06:09
- Ionic Grid Basics 00:08:35
- Controlling Grid Column Sizes 00:03:44
- Controlling Grid Alignment 00:05:29
- Responsive Grid Sizing 00:05:11
- Grid Summary 00:02:12
- ion-list vs ion-grid 00:03:07
- ion-label & ion-item 00:07:29
- ion-text 00:02:40
- Swipeable List Items 00:11:08
- Swipeable Bookings 00:10:12
- Understanding Virtual Scrolling 00:03:51
- Implementing Virtual Scrolling 00:05:23
- Adding Image Elements 00:02:45
- Segmented Buttons 00:04:41
- Adding a Spinner 00:04:18
- Using the Loading Controller 00:02:37
- Using the ActionSheet Controller 00:06:51
- Wrap Up 00:01:42
Chapter 9 : Styling & Theming Ionic Apps
- Module Introduction 00:01:13
- How Styling & Theming Works in Ionic Apps 00:06:44
- Docs & Utility Attributes 00:01:13
- Setting Global Theme Variables 00:03:28
- Setting Global Styles 00:01:18
- Setting All Colors at Once 00:02:36
- Setting Platform-Specific Styles 00:03:59
- Styling Core Components with Variables 00:08:14
- Adding Custom CSS Rules 00:10:01
- Component-specific CSS Variables 00:04:32
- Wrap Up 00:00:40
Chapter 10 : Handling User Input
- Module Introduction 00:01:32
- User Input Requirements 00:01:21
- Setting Up a Form Template 00:05:45
- Adding a Template-driven Form 00:07:37
- Handling Validation 00:06:03
- Switching Between Auth Modes 00:02:36
- Finishing the Auth Form 00:02:28
- Starting Work on a New Offer Form 00:03:54
- Finishing the Offer Form Template 00:04:23
- Creating a Reactive Form 00:05:21
- Syncing the Form to the Template 00:04:00
- Finishing the New Offer Form 00:04:01
- Edit Form Challenge 00:00:52
- Adding the Edit Offer Form 00:05:37
- Starting with the Booking Form 00:04:34
- Working on the Book Place Template 00:05:59
- Configuring the Date Controls 00:11:45
- Validating & Submitting the Form 00:07:45
- Wrap Up 00:01:26
Chapter 11 : Managing State
- Module Introduction 00:01:06
- What is State? 00:04:01
- Adding New Places 00:12:15
- Using RxJS Subjects for State Management 00:09:00
- Passing Data via Subjects & Subscriptions 00:12:25
- UI State in Action 00:08:10
- Updating Places 00:08:40
- UI State with Bookable Places 00:07:01
- Booking Places 00:16:06
- Fixing a Bug 00:00:26
- Cancelling Bookings 00:04:54
- Finishing Touches 00:04:37
Chapter 12 : Sending Http Requests
- Module Introduction 00:00:46
- How to Connect to a Backend 00:02:14
- Setting Up Firebase 00:02:11
- Sending Data via Http 00:07:12
- Using Response Data 00:03:37
- Fetching & Displaying Data 00:14:50
- Updating Places 00:06:38
- Fetching Data in Multiple Places 00:03:15
- Loading Data in a Single Place 00:07:00
- Updating Places Correctly 00:03:52
- Error Handling 00:03:27
- Fetching Single Places 00:06:18
- Adding a Booking 00:06:47
- Fetching Bookings by User 00:10:08
- Deleting Bookings 00:05:11
- Wrap Up 00:00:57
Chapter 13 : Adding Google Maps
- Module Introduction 00:01:30
- API Setup 00:03:32
- Adding a LocationPicker Component 00:06:51
- Opening the Map Modal 00:03:59
- Adding the Google Maps SDK 00:08:44
- Rendering a Map 00:06:05
- Picking Locations via a Click on the Map 00:03:41
- Finding the Address for a Place 00:08:48
- Fetching a Static Image URL 00:07:20
- Displaying a Place Preview 00:05:12
- Changing the Selection 00:01:02
- Removing the Click Listener 00:02:11
- Submitting the Location 00:08:14
- Outputting Address & Map 00:03:24
- Re-using the Maps Modal 00:08:36
Chapter 14 : Using Native Device Features (Camera & Location)
- Module Introduction 00:00:58
- Understanding Capacitor & Cordova 00:04:13
- Using the Docs 00:00:57
- Using Capacitor Plugins 00:06:39
- Getting the User Location 00:09:38
- Testing the Location Feature 00:06:18
- Starting With the Image Picker 00:04:26
- Taking Pictures 00:09:10
- Detecting the Platform Correctly 00:05:01
- Adding a Filepicker Fallback 00:04:43
- Getting the Picked Image 00:03:01
- Converting the Image String to a File 00:05:13
- Storing the Image in the Form 00:03:30
- Using PWA Elements 00:04:07
- Improving the ImagePicker Component 00:04:46
- Adding Server-side Image Uploading Code 00:05:04
- Adding Image Upload 00:07:30
- Wrap Up 00:01:06
Chapter 15 : Adding Authentication
- Module Introduction 00:00:52
- How Authentication Works 00:02:55
- Adding User Signup 00:10:06
- Refactoring the Authentication Code 00:06:33
- Adding User Login 00:06:23
- Managing the User with a Subject 00:06:41
- Storing the Token in Memory 00:04:55
- Using the ID Observable Correctly 00:04:43
- More userId Usage 00:04:57
- Fixing the Subscription 00:00:50
- Using the userId everywhere 00:05:56
- Storing Auth Data in Device Storage 00:04:22
- Adding Autologin 00:06:48
- Using Autologin 00:04:16
- Adding a Reactive Logout System 00:07:52
- Adding Autologout 00:08:00
- Requiring the Auth Token on the Backend 00:06:23
- Sending the Auth Token to the Backend 00:07:56
- More Token Usage 00:04:12
- Wrap Up 00:01:36
Chapter 16 : Publishing the Apps
- Module Introduction 00:01:06
- Preparing App Configs 00:07:53
- Custom Icons & Splash Screens 00:08:54
- Android Deployment 00:03:55
- iOS Deployment 00:03:33
- Web Development 00:05:45
Chapter 17 : Roundup
- Course Roundup 00:01:16