English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 5 Hours | 708 MB
Updated to Angular 4 (formerly Angular 2) – Learn how to build a Web Application using Angular, Firebase and Typescript
The code of this course is fully up to date with the Angular 4 release (formerly Angular 2) and Firebase 3 – meaning that the videos cover the Final release API and the support code is updated to Final.
Note: The Firebase Jumpstart E-Book is included in this course!
Why Learning Angular and Firebase by Building a Real App is Essential
Learning framework features one by one is helpful when you are just getting started, but the problem of that approach is that you might lack context to fully understand each separate feature if the example is not meaningful.
One of the most frequent questions we hear: is there an example of a small but complete Angular application? How do I tie all the framework concepts and use them to build a real application ? When, how and why should a given framework feature be used?
In this course we are going to build an Angular Application from scratch, literally from an empty folder. We are going to introduce features one by one and we are going to implement common patterns that you will need in an application: master detail, pagination, client side search, authentication, creation and modification forms, navigation menus, protect parts of the app from unauthorized access, and more.
Why Firebase ? Do we Still Really need REST APIs and SQL Databases?
There hasn’t been much press covering it, but the latest Firebase that Google just launched a few months ago might completely change the way that we build Web Applications, and the latest addition of HTTP 2 support for Firebase Hosting is only a small reason for that. The powerful Firebase WebSockets based client and the Firebase Real Time Database allow us to build our systems in a much simpler and performant way, especially if we take advantage of the FIREstack architecture that will be presented in this course, not to mention all the built-in Firebase functionality which ranges from Hosting to Authentication to name a few of the many available features.
The truth is that building web applications is still way too hard for what we need it to be: building a web site with a custom backend is very time consuming and error prone, even when writing REST APIs in Node using for example the MEAN stack.
Its Still Way Too Hard to Build Web Applications
Its just a huge amount of work to simply get anything in and out of a database, especially if its a relational database, and especially if we are building our backend in a completely different language other than Javascript. All of a sudden you need advanced knowledge in not one but two ecosystems: lets say Javascript and Ruby or Javascript and C#, all to to be able to build even the simplest of web applications.
If we add to that the expertise necessary to correctly secure a web application and its database, to efficiently use third party storage services like Amazon S3 to host static content like images and pre-built Js / Css bundles, its sometimes amazing how we can even get anything done as web developers.
The value proposition of the Firebase Backend as a Service (BAAS) solution is tremendous, although we do understand that sooner or later we will need some sort of backend to perform certain operations, either for security reasons because the security rules that restrict certain actions are too complex to express in Firebase Security Rules, or because we want to do a batch operation like for example sanitize chat messages for forbidden words.
But even then, the Firebase SDK and the Angular Fire and Firebase Queue libraries that we will cover in this course make it much simpler to build a simple but secure backend without the need to setup expensive SSL certificates.
What You will Learn In This Course
In this course I will assume that you already know Angular, and that you want to apply what you have learned to build a concrete application: you will scaffold the application, setup the router, build components and forms, and build a service layer using Angular Fire.
So you do need previous Angular knowledge on Components, the Router and Forms, but on the Firebase side I will assume that this is your first experience with Firebase.
You will learn step by step data modeling best practices and essential concepts, and you will setup and populate the database and learn the Firebase SDK in both plain Javascript, but mostly in Typescript. You will learn how to build service layers using RxJs and the Angular Fire Observables-based library. There is a lot about building applications using RxJs in this course, most of the knowledge about using Observables in the service layer will translate to backends built with the Angular HTTP module.
You will learn how to build a Firebase batch job using the Firebase SDK and the Firebase Queue library, and learn how to build custom NodeJs Firebase backends.
Table of Contents
Introduction
1 introduction course goals
2 the firebase jumpstart ebook
3 important using yarn instead of npm to avoid installation issues
4 install node and lessons code
5 choosing an ide
6 angular 2 final application scaffolding using the angular cli
7 installing the starter kit
Firebase Ebook Udemy.pdf
Getting Started With Firebase
8 firebase realtime database hello world first query debug websockets
9 firebase fundamentals references snapshots and keys
10 use firebase sdk with typescript preparing to run a firebase database populat
11 populate a firebase database with a node program typescript with node tsnode
12 populate a firebase database initialization script explained step by step
13 firebase data modeling 101 how to model data in firebase
14 firebase key generation how to use the firebase push keys should we use them
15 firebase arrays does firebase support arrays
Getting Started With Angular Fire
16 changes to angularfiremodule
17 angular fire hello world how to write your first query using angular fire
18 angular fire object observables how to read objects from a firebase database
19 how to write data to the database using angular fire
20 how to remove an element from a list using angular fire
21 how to update an element in a firebase list using angular fire
22 how to modify an object in firebase using angular fire set vs update
Building the Application Home Page
23 starting the application from the beginning build the home screen
24 building our first firebase service the lessons service
25 angular 2 smart components vs presentation components
26 pitfall of using typescript classes when querying data from a backend
27 how to implement clientside search in angular 2
28 setting up the router configuration of our application
29 building a navigation menu using the angular 2 router
Setting Up a Master Detail Scenario
30 setting up the master screen of the master detail pattern
31 configuring the angular 2 router for master to detail navigation
32 setting up the detail screen of a master detail setup
How To Do Data Joins In Firebase ?
33 warning issue in angularfire2
34 how to make a join in firebase using angularfire 2
35 joins in firebase continued getting a list of lesson keys
36 conclusion on joins in firebase retrieving all lessons of a course
37 how to write maintainable rxjs code some tips and tricks on how to write clean
38 displaying the lessons per course in the course detail page
How To Do Pagination In Firebase ?
39 how to do pagination in firebase loading the first page of a paginated table
40 firebase pagination continued loading the next page
41 firebase pagination concluded loading the previous page
Building the Lesson Detail Component
42 navigate from course detail to lesson
43 building a lesson detail component
44 angular 2 security injecting an iframe into an angular 2 template
45 preparing to navigate from lesson detail to lesson detail what could go wrong
46 navigating from lesson to lesson the route params observable
Building The Create New Lesson Form
47 the create new lesson form
48 creating the lesson form component used both for edit and for creation
49 lessons service add save new lesson functionality
50 add new lesson add a custom url field validator
Building the Edit New Lesson Form
51 edit lesson initial screen setup
52 edit lesson retrieve lesson using the router resolve functionality
53 edit lesson passing the retrieved data to the lesson form
54 edit lesson implement the save lesson service
Setting Up Firebase Authentication
55 setup firebase authentication create a login page
56 building an authentication observable data service
57 build a user registration page
58 setup the logout functionality
59 redirect user to login page using a router guard
Firebase Backend Development
60 rest and firebase using the firebase rest api
61 protect write access using security rules
62 build a custom node backend using firebase queue
Extra Section
63 extra section introduction
64 angular 2 in the enterprise how to get node npm and angular running at work
Conclusion
65 rounding up the course
66 bonus lecture
Resolve the captcha to access the links!