Level 2: Enable services for AGY apps with Firebase

Key Takeaways

So, anti-gravity made a nice set of web pages and linked them together. But, they're hosted locally just on your machine. That setup won't support a video game that anybody can play. And if we don't have that video game, then we're never getting out of here. You're right. That's why we need Firebase, Google's app development platform. Firebase can give us the three services we need to support our video game. It provides that online hosting. It also offers a database to support a leaderboard. And it provides authentication, so players can enter their scores [music] into that leaderboard. >> Wow, sounds like it does a bit of everything. Can it make me a space latte? Um, Firebase can't do that. Yet. But for app development, absolutely. It does a bit of everything. So, to get started, I'll go to console.firebase.google.com and I'll create a new project called AGY Sandbox. I'll enable these recommended utilities like Google Analytics, but you could toggle them off as well. Now, I'll open my terminal and change directories to documents, AGY Sandbox, and list [music] everything in that folder. Okay, there's our index.html, both language subfolders, and the CSS file. Are we going to initialize Firebase here? We are. You need to install Firebase CLI to do this, but installation is really easy. Because I've already done that, I can run Firebase init. I'll select Firestore, which will provide that database for our future leaderboard, and I'll select hosting to make our app available online. We'll enable authentication later. Next, I'll choose to use an existing project, the one I just created. So, we go to the project settings page in Firebase console, copy the project ID, and paste it into the terminal. That's right. Now, I'll accept some default names for files that control our services. But, I won't configure it as a single-page app, and I won't set up automatic build and deploy with GitHub. Again, we'll explain all these choices in-depth in our self-guided course content. Great, it finished. So, now if you run the list command, there should be a new framework of files. Yes, and it's there. Now, I'll run Firebase serve to test it locally. If I open the link, there's the default home page for Firebase hosting. All right, but that page is not what I want. >> Patience is a virtue. Is that a quote from someone that's stuck in a video game? Jeff Bridges? Huh? Never mind. Anyway, let's open our codebase in anti-gravity. [music] That default index.html is in this new public folder. We need to replace that file with our Hello [music] World's content. Okay, so now if we restart the local server and go back to its address in the browser, our Hello World's should appear. They should, and they do. They're functioning properly, too. Oh, great. We're now back to exactly the same point we were before. Fair point, but this is all necessary [music] for enabling those three services: hosting, a database, and authentication. In fact, we're ready to deploy our Hello World's to a live website using Firebase hosting. Let me stop the local server. Next, I'll run Firebase deploy, >> [music] >> and in seconds, Firebase packages our app into a container, builds the app, and [music] deploys it to Google Cloud's infrastructure. If I click on the hosting link, our pages load at a secure URL that is accessible around the world. [music] Okay, nice. That really was worth the trouble. So, now are we good to build our game? Almost. We need to finish enabling our database and authentication. Back in Firebase console, where I got the project ID, I'll scroll down and create a web app. What I'm really doing here is making sure that our video game will have access to the leaderboard database. Huh, okay. But we don't need to check the box for Firebase hosting here because we already did that during initialization, right? Right. >> [music] >> And now, Firebase has generated a config object, which includes an API key. This object will let our game use the database. Let's continue to the console, >> [music] >> go to build, authentication, and get started. Then, I can enable anonymous authentication. And why are we doing that? This lets players add their scores to the leaderboard without having to actually log in. Oh, right on. Okay, so we've enabled our three services. Now, let's build this game and get out of here. It'll take us 5 minutes. Just watch.