General Assembly

Introduction to CRUD & Firebase

Wilson Espina

Review

What did we do last lesson?

Introduction to CRUD & Firebase

Learning Objective

Learning Objectives

At the end of this class, you will be able to:

  • Explain what CRUD is.
  • Explain the HTTP methods associated with CRUD.
  • Implement Firebase in an application.
  • Build a full-stack app with CRUD functionality.

Introduction to CRUD & Firebase

Agenda

  • this (lesson 15)
  • CRUD
  • Firebase intro and setup
  • Create
  • Read
  • Update
  • Delete

Introduction to CRUD & Firebase

Classroom Resources

  • Pull changes from the wilson-espina/jsd-9-resources repo to your computer
  • In your editor, open the following folder: Documents/JSD/jsd-9-resources/16-crud-firebase

Introduction to CRUD & Firebase

Homework Review

Closures & This

this

Closures & This

What is Context in JavaScript?

  • Context in JavaScript is related to objects. It refers to the object within the function being executed.
  • this refers to the object that the function is executing in.

Closures & This

How is Context Decided?

  • At runtime (where your javascript code is executed when you run it).
  • Based on how the function is called.

Closures & This

Context Rules

SITUATION WHAT this MAPS TO

1. method invocation

the object that owns the method

2. constructor function

the newly created object

3. event handler

the element that the event was fired from

4. function invocation

the global object (window)

5. function invocation (strict mode)

undefined

6. arrow function

the context of the caller

Code along - Context

Code Along

Open up: 00-this-codealong

Code Along

Exercise - This Exercise

Exercise

Key Objective

  • Understand and explain closures

Type of Exercise

  • Individual

Location

  • starter-code > 01-this-exercise

Timing

6 mins
  1. In app.js, read through the code without running it.
  2. Predict the results of the two console.log statements.
  3. Run the code and check the results against your predictions. If the results were different, identify why.

Introduction to CRUD & Firebase

Introduction to CRUD & Firebase

Introduction to CRUD & Firebase

CRUD

Introduction to CRUD & Firebase

What is CRUD?

  • Databases are used to persist data.
  • In computer programming, create, read, update, and delete (CRUD) are the four basic functions of persistent storage.

Introduction to CRUD & Firebase

Question

What are some apps that allow you to create, read, update, and delete data?

Introduction to CRUD & Firebase

CRUD and HTTP

SITUATION HTTP VERB OPERATION

Create

POST

Create a new resource

Read

GET

Read a resource

Update

PUT/PATCH

Update a resource

Delete

DELETE

Delete a resource

Introduction to CRUD & Firebase

Firebase

Introduction to CRUD & Firebase

The Client-Server model with CRUD

Client-server model

    Stores HTML/CSS/JS code

  • Accepts HTTP requests
  • Generates HTTP responses

    • Stores database

  • Provides create access
  • Provides read access
  • Provides update access
  • Provides delete accesss

Introduction to CRUD & Firebase

Firebase

Firebase

    Google Cloud Services including:

  • Hosting
  • Authentication
  • Realtime Database

Introduction to CRUD & Firebase

Alternative "Serverless" Services

Serverless resources

https://serverless.css-tricks.com/services/major

Introduction to CRUD & Firebase

Firebase Realtime Database

  • Automatically sends updates to all clients.
  • Provides an SDK (software development kit) for connecting to the database with methods for CRUD operations.
  • Each record has a unique ID that we use to reference the data.
  • Integrates with the Google ecosystem.

Introduction to CRUD & Firebase

CRUD and HTTP

CRUD Action HTTP VERB FIREBASE METHOD

Create

POST

push()

Read

GET

ref()

Update

PUT

set()

Update

PATCH

update()

Delete

DELETE

remove()

Introduction to CRUD & Firebase

Create and App

Introduction to CRUD & Firebase

Steps To Create A New Firebase App

  1. Go to your Google Firebase console.
  2. Create a new project.
  3. Create a new web app.
  4. After your app is registered copy the SDK script and configuration and add them to your html file.
  5. Add script tags for each service.
  6. Enable Anonymous login.
  7. Go to the Database section and create a new Realtime Database. Make sure to start in test mode.

Introduction to CRUD & Firebase

Firebase step 1

Introduction to CRUD & Firebase

Firebase step 2

Introduction to CRUD & Firebase

Firebase step 3

Introduction to CRUD & Firebase

Firebase step 3B

Introduction to CRUD & Firebase

Firebase step 4

Introduction to CRUD & Firebase

Firebase step 5
LINK: https://firebase.google.com/docs/web/setup#libraries-cdn

Introduction to CRUD & Firebase

Firebase step 6

Introduction to CRUD & Firebase

Firebase step 7

Introduction to CRUD & Firebase

Firebase step 7-b

Introduction to CRUD & Firebase

Build a CRUD App

Introduction to CRUD & Firebase

Clean up index.html file

Move Initialisation

Code along

Code Along

CLEAN UP

Open up: starter-code

Code Along

Introduction to CRUD & Firebase

Create Messages

  1. Create a variable to reference the Firebase database.
  2. Grab the value of the #message input.
  3. Create a 'Messages' reference in the database.
  4. Use the push() Firebase method to create a new record.

Code along

Code Along

CREATE

Code Along

Introduction to CRUD & Firebase

Associating DOM Elements with Database Records

Introduction to CRUD & Firebase

How to Associate List Items With Database entries?


<ul class="message-board">
  <li>Apples in Hackney</li>
  <li>Oranges in Brixton</li>
  <li>Cheese in Ladbroke Grove</li>
</ul>

Introduction to CRUD & Firebase

Each Record Saved in Firebase has a unique ID

Firebase unique IDs

Introduction to CRUD & Firebase

HTML data ATTRIBUTE

Allows us to associate meta data with DOM elements

  • Attribute name is data- plus any string

<article
  id="dogs"
  data-coloumns="6"
  data-index-name="Spot"
  data-parent="pets">

Lorem ipsum

</article>

Introduction to CRUD & Firebase

DOM WITH CUSTOM data-id ATTRIBUTES

Custom data attributes

Introduction to CRUD & Firebase

Read Messages

  1. Create a getPosts function.
  2. Retrieve messages using the .on('value') method.
  3. Create a messages array.
  4. Iterate through all messages in the database and append a new list item.
  5. Add a down vote, upvote and delete icon to each list item
    6. .
    List Items
  6. Append list items to the DOM.

Code along

Code Along

READ

Code Along

Lab - Implement Update Functionality

Exercise

Key Objective

  • Build the Update functionality of a full-stack app

Type of Exercise

  • Individual / pair

Timing

20mins
  1. Examine the API documentation at
  2. Create a function to make updates to the database.
  3. Add calls to your new function when a user clicks on the upvote and down vote elements.
    HINT: You can access elements in event listeners via the event object, e.g.: e.target.

Lab - Implement Delete Functionality

Exercise

Key Objective

  • Build the Delete functionality of a full-stack app

Type of Exercise

  • Individual / pair

Timing

10mins
  1. Examine the API documentation at
  2. Create a function to delete records from the database.
  3. Add calls to your new function when a user clicks on the delete element.

Introduction to CRUD & Firebase

Learning Objective

Learning Objectives

  • Explain what CRUD is.
  • Explain the HTTP methods associated with CRUD.
  • Implement Firebase in an application.
  • Build a full-stack app with CRUD functionality.

Introduction to CRUD & Firebase

Look Ahead to Next Lesson

  • Understand what hosting is.
  • Understand Firebase Authentication.
  • Understand Firebase security.
  • Use Static Site Hosting.

Introduction to CRUD & Firebase

Exit Ticket

(Lesson #16)