Take this
course

Software Development / Web Development

Learning Firebase

Harness the power of Firebase to build interactive web applications faster than you ever imagined

Description

As the web evolves, more and more complexity is moving to the front-end. A new trend called no-backend seeks to shy away from the traditional server-side web development in favor of utilizing cloud-based backend technologies like Firebase, allowing developers to focus on important business logic rather than boilerplate backend code.


The web moves fast but with Firebase you can move faster by unlocking the power of real-time communication without the burden of server-side development. It will have you questioning everything you’ve been told about what web development is supposed to be and unlock a productivity gain you only get a few times in your career.


Learning Firebase will teach you how to develop fully featured real-time applications using Firebase in the friendliest and most intuitive way possible, by walking through examples using the Firebase dashboard and API.


From the word go you will start to craft a sophisticated real-time link sharing application as a means of applying Firebase concepts exactly as they would be for any other viable application. You will be introduced to the amazing real-time data browser, which you will use extensively throughout the course, as you go hands on with the most important features of Firebase. As you move ahead you'll learn how to create, read, update, and delete data. You’ll also become familiar with adding and managing user accounts, securing your data, and unlocking its full potential. You’ll apply the knowledge gained to your own application to solidify the concepts and be inspired to explore topics beyond the scope of this course.


By the end of the course, you will have created a full-blown real-time app and be rest assured that it will be the first of many to come!

Full details

Curriculum

  • Lighting the Fire – Getting Started with Firebase
    The Course Overview
    This section provides you with a synopsis of the course.
    2:54
    Exploring Firebase
    Explore the key sections of the site including how to sign up on Firebase.com. • Sign up for Firebase.com and create your first Firebase app • Explore the Firebase data browser and enter data to see real-time action • Visit each of the other sections of the dashboard and get a brief overview of each one
    5:00
    Firing Up LiveLinks
    Need to get a start of the project, create the project, include Firebase, and wire it up. • Create a project with the proper folder structure and files • Build a basic index.html page and include Firebase • Build a basic app.js page and show real-time activity in the Chrome debugger tools
    2:43
  • Playing with Fire – CRUD Your Data in Real-time
    Adding and Retrieving Data
    Don’t know how to add items to a list and retrieve them? Try it out in the console to learn. • Use the Chrome console to add links using “push” • Use the console to show different “on” events used to retrieve data • Use the console to show the “once” method's behavior and basic querying modifiers
    3:47
    Updating and Deleting Data
    Don’t know how to update and delete data? Try it out in the console to learn. • Use the Chrome console to update a link’s value using “set” • Use the Chrome console to update a link’s URL value using “update” • Use the Chrome console to show how to use “remove” to delete data from Firebase
    2:52
    LiveLinks – Submitting and Managing Links
    No way to create and display links? Add markup and logic to do so. • Add the HTML and JavaScript necessary to add simple links to db • Write the HTML and JavaScript necessary to display links in database • Change the sort order and limits of the data shown
    3:32
  • Sharing the Fire – Adding User Accounts
    Choosing and Enabling an auth Provider
    Users cannot sign up for accounts. Walk them through using auth API to enable accounts. • Explore the auth options available and enable e-mail auth • Use the Chrome console to demonstrate e-mail auth • Use the Chrome console to demonstrate how to handle errors
    3:44
    Managing a User Session and User Data
    Auth works, but additional user info must be tracked. Add users and link to auth objects. • Explain what is stored when a user authenticates • Use Chrome console to show how user accounts can be created on auth to store profile information • Use Chrome console to show how the user auth state can be tracked
    3:42
    LiveLinks - Adding User Accounts
    We know how to authorize and store user info, but we need to get it working in LiveLinks. • Add HTML and JavaScript to allow users to sign up for user accounts • Add JavaScript and HTML that handles login errors • Tie link creation to user accounts in a naïve way
    3:39
  • Taming the Fire – Structuring Your Data in a Scalable Way
    Understanding Arrays
    Don’t understand Firebase’s array rules? You will learn about them now. • Discuss the rules surrounding arrays • Demonstrate how Firebase determines whether to return an array or not • Demonstrate the pitfalls of using arrays in a real-time system
    4:14
    Flattening Data
    Nesting data in a normalized way can be non-performant. We show how flattening data helps. • Show an example of non-flattened, normalized data in the data browser, and demonstrate how queries could become expensive in chrome console • Show an example of how to flatten data using the data browser and explain why it helps • Demonstrate how queries have become more efficient in chrome console
    4:45
    LiveLinks – Adding, Voting, and Flattening the Data
    We haven’t structured our data properly in LiveLinks. Now we structure it properly. • Write logic for adding vote and link references to links when created • Write logic for retrieving and displaying links and associated object information • Demo the functionality by creating a variety of users, votes, and links and studying the data in the databrowser
    4:08
  • Securing the Fire – Authorization and Validation
    Data Validation and Authorization
    Anyone can edit anything with any data they want. We use rules to restrict how data is edited. • Explore the Rules tab on the LiveLinks dashboard • Demonstrate adding of authorization rules and discuss how they work • Demonstrate adding of validation rules and discuss how they work
    4:26
    Writing Sophisticated Security Rules
    Apps require sophisticated security rules. You’ll learn about the tools available for us to create them. • Discuss predefined variables and their uses • Discuss built-in functions and their uses • Discuss the auth variable and demonstrate user-based security
    3:35
    LiveLinks – Securing and Validating the Data
    LiveLinks isn’t secure, and we need to make it secure. • Add permissions to the main business objects • Add validation to the main business objects • Demonstrate the permissions and validations work
    4:03
  • Controlling the Fire – Ordering, Paginating, and Querying Firebase Data
    Sorting the Data
    Don’t understand how to order data? You will learn how to retrieve data in a particular order. • Learn about orderByChild, orderByKey, and orderByValue, and demonstrate their behavior in the console • Learn about priorities and demonstrate setting them in the console • Learn about orderByPriority, which isused to retrieve data based on priorities, and demonstrate it in the console
    4:22
    Limiting the Data
    We need to be able to limit and set ranges for queries. You will learn how to do so by example. • Learn about limitToFirst and limitToLast and demonstrate their behavior in the console • Learn about startAt and endAt and demonstrate their use in the console • Demonstrate how the limit, range, and ordering methods can be combined to create sophisticated queries
    4:29
    LiveLinks – Ordering, Limiting, and Paginating
    LiveLinks shows every link all the time. Change LiveLinks to display the top links for a given day. • Update the link creation logic to add link references to the day buckets • Add logic to calculate a link’s value with a decay algorithm, and add it to the day bucket’s links • Add pagination logic to allow users to reach and vote on links that fall below a certain threshold
    5:52
  • Tending the Fire - Managing Connectivity, Latency, and Presence
    Tracking and Managing User Connectivity
    Clients can go offline. We need to track their connected state and respond accordingly. • Learn about .info/connected and how it tracks a client’s connectivity state, and demonstrate its use • Learn about onDisconnect and what purpose it serves • Demonstrate a simple example of updating the connected state of a client using .info/connected and onDisconnect
    4:07
    Managing Latency and Complex Transactions
    Latency is more prominent in a real-time app. You get to learn about Firebase’s tools for managing latency. • Learn using server timestamps instead of generating them locally • Learn about serverTimeOffset and how it can be used to keep local time tracking in sync with the server • Learn about Firebase’s transaction operation and demonstrate its use
    4:45
    LiveLinks – Making It Feel More Real-time
    LiveLinks doesn’t feel alive enough. Add a list of connected users to make it feel alive. • Add logic to LiveLinks that tracks users’ connectivity and updates it in the database • Add a UI to LiveLinks that shows the number of currently connected users • Add a transaction operation to the voting logic in LiveLinks
    6:26
  • Spreading the Fire - Deploying a Firebase Application
    Whitelisting Domains and the Firebase Command-line Tools
    We need to get a Firebase app hosted. You will learn how to use Firebase tools and services to do this. • Learn about domain whitelisting and how to set it • Install the Firebase dev tools, initialize the application, and discuss the configuration file • Learn how to deploy an app on Firebase’s servers and discuss the pricing options available
    4:39
    Advanced App Configurations
    Want to manage rules locally and add advanced configs to app? Use the Firebase advanced config options to accomplish this. • Move the rules and permissions to a JSON file and add to the LiveLinks config file • Add redirect and rewrite rules to the config file and explain their purpose • Add to the LiveLinks config file headers that control the cache timing for .js and .css files
    4:27
    Course Recap
    Where do we go from here? • A quick recap of the topics covered • Additional resources for further learning
    2:22

Skills

  • Back-End Web Development
  • JavaScript
  • NoSQL

Similar Courses

More Courses by this Instructor