1 of 29

Intro to Databases

2 of 29

3 of 29

Overview

  • What they are.
  • Why we use them.
  • How to implement them!

4 of 29

What are Databases?

5 of 29

Definition

(noun)

A structured set of data held in a computer, especially one that is accessible in different ways.

6 of 29

Examples

  • MS SQL Server
  • MySQL
  • MS Azure SQL Database
  • MongoDB
  • Firebase

7 of 29

Motivation

*bc we all need it sometimes

8 of 29

Why do we use databases?

  • When we need to store large amounts of data
    • e.g. a list of users
  • When different sets of data need to be linked together
    • e.g. users’ usernames, emails, and passwords
  • Access, Integrity, Security

9 of 29

Firebase

  • A service by Google to help you quickly develop apps
  • Firebase Firestore
    • Used to store items on the cloud
    • Flexible, scalable NoSQL database
    • Can easily be adapted to web, mobile, and server applications
    • Data stored in collections, with values called documents

10 of 29

Walkthrough

React Framework

Firebase Firestore

11 of 29

Installations

  • A text editor
    • Microsoft Visual Studio Code (recommended)
    • Atom
  • Package Handler
    • Yarn (recommended)
    • npm
  • A database
    • Firebase (the one we are using for this workshop)

12 of 29

React App

  • Design and create a React app!
    • For a full tutorial, go to the HOTH9 React Workshop
    • For a quick start:
      • Navigate to a new folder
      • Open folder in command prompt
      • Run yarn create react-app my-app
        • “my-app” is the name of your app

13 of 29

React App

  • For this workshop, we will be focusing on using Firestore within our React app
  • Using a pre-built React app, we will do the following:
    • Set up Firestore with our app
    • Create new data values
    • Extract data values
    • Display data values

14 of 29

Setting up Firebase (Signing in)

  1. Navigate to www.firebase.google.com
  2. Click “Get Started”
  3. Log in to your Google account
  4. Click “Create a Project”

15 of 29

Setting up Firebase (Creating a Project)

5. Create a name for your project

6. Select Google Analytics Option

16 of 29

Setting up Firebase (Creating a Project)

7. Confirm Google Analytics

Woohoo!

17 of 29

Setting up Firebase (Add Web App)

Yay!

8. Add a Web App by clicking </>

18 of 29

Setting up Firebase (Add Web App)

9. Register App

10. Install Firebase

  1. Navigate to the project Folder
  2. Open a terminal window
  3. Run yarn add firebase

19 of 29

Setting up Firestore

11. Select “Cloud Firestore”

12. Select “Create Database”

20 of 29

Setting up Firestore

13. Start in test mode

14. Select a location

21 of 29

Linking Firestore to our App

15. On the left menu bar, navigate to:

Settings > Project Settings

16. Copy the Initialization and Configuration code (important in step 20)

17. Navigate to your project folder in VS Code

Initialization and Configuration Code

22 of 29

Linking Firestore to our App (in VS Code)

18. Within folder “src”, create new file named “firebase.js”

New File

23 of 29

Linking Firestore to our App (in VS Code)

19. Configure Firestore database by copying and pasting the Initialization and Configuration code (from step 16) into “firebase.js”

24 of 29

Configuring Firestore (in firebase.js)

Add import statement

Define db and export it

25 of 29

Configuring Firestore (in App.js)

Import db

26 of 29

YUH done with setup!

27 of 29

Demo Time!

  • Adding a value to the database
  • Reading and displaying a value from the database

28 of 29

Firebase APIs

29 of 29

HAPPY HACKING!