Skip to main content

5 posts tagged with "firebase"

View All Tags

Sample JavaScript Application Part 4 - Authentication and Security

· 26 min read
Garo Yeriazarian
Garo Yeriazarian
Software Whisperer

Overview​

In the last segment, we setup a database and reviewed all the code that interacts with it. This time, we'll setup authentication so we can lock down the security of the system and the database, and add a few user-centric capabilities like editing and deleting comments.

If you're just seeing this, you should start with the first article in the series instead: Sample JavaScript Application Introduction.

These instructions assume you're starting from the application we setup in the previous article: Sample JavaScript Application Part 3 - The Database. If you don't have that handy, you'll need to follow the instructions in the previous articles to get a project configured that points to your own Firebase project on Google Cloud.

Sample JavaScript Application Part 3 - The Database

· 34 min read
Garo Yeriazarian
Garo Yeriazarian
Software Whisperer

Overview​

In the last segment, we discussed how we should do data modeling and arrived at a possible data model to use with the database. This segment, we'll walk through how to setup the database and connect your frontend to it to start saving data about the map.

If you're just seeing this, you should start with the first article in the series instead: Sample JavaScript Application Introduction.

These instructions assume you're starting from the application we setup in the previous article: Sample JavaScript Application Frontend Part 2. If you don't have that handy, you'll need to follow the instructions in the previous articles to get a project configured that points to your own Firebase project on Google Cloud.

Sample JavaScript Application Part 2 - Data Modeling

· 16 min read
Garo Yeriazarian
Garo Yeriazarian
Software Whisperer

Overview​

In the last segment, we implemented a simple map user interface we could use to find certain areas on the map and show markers for them. This time, we'll look at connecting a database to the backend, allowing us to click on the map to add comments to a latitude / longitude coordinate on the map, then allow others to see all the data that's been added to the map. We won't implement login yet, but leave it open for now.

If you're just seeing this, you should start with the first article in the series instead: Sample JavaScript Application Introduction.

These instructions assume you're starting from the application we setup in the previous article: Sample JavaScript Application Frontend Part 1. If you don't have that handy, you'll need to follow the instructions in the previous article to get a project configured that points to your own Firebase project on Google Cloud.

Sample JavaScript Application Part 1 - Frontend

· 11 min read
Garo Yeriazarian
Garo Yeriazarian
Software Whisperer

Overview​

In the last segment, we setup an initial empty Firebase application and got environment working. Now we'll add a new frontend to the application to show a simple map view and let us search for our current location and other useful things.

If you're just seeing this, you should start with the first article in the series instead: Sample JavaScript Application Introduction.

These instructions will walk through updating the frontend to add a free map control and have it do some searching for us.

Sample JavaScript Application Introduction

· 9 min read
Garo Yeriazarian
Garo Yeriazarian
Software Whisperer

Overview​

This series of posts describes how you can build up a simple web application hosted on Google Cloud to allow users to store extra information about locations on a map. It's meant for people who are just getting into JavaScript and have at least basic knowledge of how it works. When there's a more advanced concept, I'll try to explain it a bit more fully. The goal is to have a simple application that you can build and host that you can think of as a "real" application.

I'm writing this series after being a teaching assistant for a high school Computer Science Discoveries class through TEALS. Some students are (hopefully) interested in how to take the assignments they've done in class to the next level.

You can run this tutorial on any computer: Windows, Mac, or Linux. If you are on a Chromebook or otherwise running ChromeOS, you may have some challenges to getting Visual Studio Code and NodeJS running on there, but you'll need to turn on "Linux App" support then you can treat it like a "Debian Linux" install.