Ionic Angular Firebase: From ZERO to ONE [Updated 2020]

REQUIREMENTS

This course will be of great benefit regardless of your familiarity with Ionic, Angular, and/or Firebase. It's designed in such a way that linearity is not necessary: helpful if you are new, but if you know what you're looking for it's quick easy to find. This is fact how true learning happens: through non-linear, creative engagement with information.

The only thing prerequisite on your part is familiarity with Javascript and/or web development, and genuine curiosity. Everything else will fall into place.

____________________________________________________________________________________________________________________________________________

THE FRAMEWORKS

The framework releases used in this course span across Ionic 4 and 5, and Angular 8 and 9. All code in the repo has since been updated to the latest releases and tested.  More information can be found at the GitHub repo.

____________________________________________________________________________________________________________________________________________

SOURCE CODE

All code from this course can be found at the GitHub monorepo (didaktio/Ionic-Angular-Course). The monorepo is broken down into submodules, which are independant repositories also locatable on the didaktio GitHub profile. Attached to every video (in Resources) is a link to the specific repo containing the code used in that video. Each repo has a README which you can follow to run the code locally, but most likely you'll just use them for reference.

____________________________________________________________________________________________________________________________________________

ABOUT THIS COURSE

This is a fast-paced, information-dense and future-proof course intended to get you flying solo as soon as possible. Unlike many other such courses, little time is given to theory about the technologies and languages used. What matters is their capabilities and potential as relevant to your needs. This course is about that. This course is making these powerful technologies do what you want. That isn't learned from documentation. It is learned through problem-oriented doing.

In this course you will pick up 90% of the important principles underlying Ionic and Angular by focusing on specific and common problems like: login, user registration, role-based capabilities, blocking particular URLs, storing and manipulating data, notifications, sending emails, and more. Every line of code in this course was written on a live development server, so most videos finish with the result live in the browser.

The course is as anti-academic as you can get. We'll work through solutions together, often line-by-line, thinking in real-time. This means we'll encounter errors, figure out alternatives on-the-fly, and that things will be uncompromisingly changed when necessary.

The guiding philosophy is Just-in-Time Learning. Like every subject-area in the world, advancement in understanding is amplified 100-fold when the information being provided maps onto a local problem — in other words, we learn much faster when working with problems that we understand AND that are interesting. Absent well-defined problems, learning never really happens; theory only sticks when you're familiar with the subject area.

Again, this is a practical course. Only take it if you're serious about learning how to develop applications and build websites with Ionic and/or Angular.

Amongst the learnings on offer:

• The fundamentals of the LATEST Ionic and Angular releases + TypeScript, Node, Google Cloud, RXJS, and more

• User Login and Signup (multiple methods)

• Popovers, Modals, Alerts

• Notifications, automatic emails, text message logic (and all common background task needs)

• How to deploy an app/website to the web using Kubernetes and/or Firebase Hosting

• Storing data on device for user detection (like how most websites know it's you even when you're logged out)

• How to stream, convert, transform and present live, complex data as good as Netflix (RXJS)

• Angular Modules, Components, Pipes, Attributes, Directives (ngFor, ngIf, ng-container, ng-template etc)

• Building a fine-grained theme controller

• Ionic Pages, UI Components, CLI

• Role-Specific capabilities: routes, data-viewing and entirely different UI's  for different types of users (eg admin vs customer)

• Lifecycles

• Forms: Simple and advanced, validation, error-handling and pre-population

• Services, reusable utilities, global features

• Interpolation, DOM Sanitisation

• CAPTCHA forms and the 'Are You a Robot?' test

• Custom scripts

• Build and publish a Progressive Web Application (PWA)

• Firebase: Firestore Documents, Collections, Permissions

• Cloud Storage: uploading and accessing images and other media types

• Cloud Functions: running secure backend processes, scheduling, fine-grained control over your app

• Designing for all device screen sizes using Ionic Grid and other SCSS tricks

and much, much more.

The videos are fast-paced, dense, and sometimes unforgiving. Where necessary, they're slowed down —but practical people with work to do(!) want and need information that can be employed immediately. Hopefully every single video delivers on this measure. It certainly does sound-wise: every minute is backgrounded by brainwave-enhancing, epiphany-inducing sounds from the brilliant Steve Reich.

____________________________________________________________________________________________________________________________________________

GOING THROUGH THE COURSE

The Basics section of this course is where to go if you're stuck with or unsure about some of the core concepts (directives, interpolation, forms, data presentation, services etc). It one of the latter modules by design — because your first foray into any domain should be to get a feel for it. You likely already have knowledge of the basics: realistic, tangible (and personal) problems are how we weave independent and fragmentary threads of knowledge into something deep and functional. Starting with theory before practice is at minimum going to slow down learning rate, and is typically the most reliable and quickest way to become disinterested and eventually turned off.

There is no Right Way to Learn. There is the way that works for you. The course is as loosely structured as it can be without sacrificing on quality. In other words, the naming needs to be informative but not --verbose, the sectioning needs to have a purpose, and each video must be lean and to the point but also able to stand on its own. The Just-in-Time Learning philosophy must only be deviated from when necessary; videos should first and foremost be practical, concise, and time well spent.

With all that in mind, what follows is a few pointers for navigating your way up Mount Everest. They're not all incompatible; use those that appeal to you, experiment, iterate, throw others in the trash. The critical thing to know is: formalities and structure and tyrannical rules about sequence are usually bad things, and freedom to explore and follow interest are good. This isn't school. This is you taking control over your own learning. And yes, it can — and should! — be fun. To the tips:

• Watch the Outro before you start.

• Move laterally. For example, you might do the Basics section first and then jump to the intro, and then the RXJS section, and then the Badass Todo App (thetodoapp[dot]com).

• Do the Basics section first if you're unfamiliar with Angular.

• Criticise. Have the confidence to change things, improve the code, structure the code in your preferred manner.

• View everything through a practically-oriented lens. Watch videos wearing your technique-coloured glasses, not those lawyer-esque analysis spectacles.

• Use tools(!) — those recommended in the course and those you discover yourself. The heuristic here is simple: if it lets you get on with working on the most important stuff (the HARD problem solving, the stuff that requires true creativity), then it's worth it. All other benefits — it saves time, increases readability, better security etc — are secondary.

• Speed up videos. Slow down videos. Install Video Speed Controller on your browser to enable easier jumping through and speed manipulation of the tutorials.

• Use the supporting materials where possible (download the files, visit the links).

• Peruse the GitHub repository when one exists.

• Post questions.

• Combine this course with other courses and brilliant bodies of work (Fireship on YouTube, Angular in Depth, The Net Ninja on Youtube...)

• Use The Problem of Concern as your North Star.

____________________________________________________________________________________________________________________________________________

WRITING CODE

• Prioritise techniques and concepts over formalities.

  
  

• Use Stack Overflow and the relevant GitHub Issues pages for errors and/or optimisations.

  
  

• Know that things will constantly evolve, which means you shouldn't lock yourself in from the first day. This means being liberal with typings (use any and unknown quite a lot early on), and worrying about structure and clean imports and other formalities when things are working. The heuristic here is: let small fires burn. Small fires rid the woodlands of flammable materials, thereby minimising the chances of one big, catastrophic fire. This applies to pretty much all aspects of life, but is starkly manifest in programming.

  
  

• When building for users, how you do things under the hood should be extremely conservative relative to the UX. This is most apparent with form input, where users should be able to enter typos and other different representations of the same data without any fuss. Under the hood, all data is converted and normalised into a standard form. For example with dates, you might let the user enter a date or use a datepicker. This means two different types of data. Combine this with the usual complication accompanying date manipulation (dealing with timezones, incorrect dates, offsets, readability, unix vs iso etc), and you've got the ultimate recipe for a migraine. A far-reaching decision to make early on might be to deal only with ISO strings in the backend, meaning you convert EVERY single date into an ISO. If the datepicker gives you a date object, you convert it to an ISO. If the user enters something like (10.12.2019), you convert it to an ISO. This ISO is how you store the information backend. Displaying it frontend then becomes a doddle: another conversion into the preferred format, and some interpolation — simple. This method works because ISO strings, like unix and javascript timestamps, are the same for everybody.

  
  

• Don't worry about testing. Worry about writing tight code that runs as expected - then publish.

  
  

• The less code the better. Condensed, concise code has more to it than beauty: by demanding true understanding, it protects against the illusion that information consumption equals knowledge. It doesn't. I can read one thousand lines of code and, thinking that the time invested and length of information absorbed is impressive enough, be satisfied with my grasping. But later on I end up coming back to that code repeatedly and making a ton of other errors because actually, I don't understand. Alternatively, I could breakdown (and even improve upon) that one line of code which resembles a spacetime equation, and not leave until I actually understand. And if I cannot understand, at least I don't have the illusion that I do. Finally, condensed code far better facilitates principles of modularity, flexibility, changeability, and debuggability.

____________________________________________________________________________________________________________________________________________

FUTUREPROOF-ABILITY AND MOVING FORWARD

This is a future-proof course. Just like any real-world project or company or system, the course and its supporting resources (links, the GitHub Repo) will be continuously updated — errors and incompatibilities addressed, dependencies updated, and additional content added as requested or necessary. The course uses a combination of Angular 8 and 9, node 10 and 12, and Ionic 4 and 5. If you have any problems, a question or something else you'd like to talk about, please reach out.

keywords: ionic, angular, web development, ionic 4, ionic 5, angular 8, angular 9, typescript, node, kubernetes, firebase, npm, websites, progressive web application, pwa, future-proof, coding, programming, google cloud, aws, docker, git, role-based, notifications, reminders