Task 5
In this task we will Create a Movie Review using google Firestore NQSQL database, then access
the data from a simple HTML/Javascript web app.
1. Navigate to https://console.firebase.google.com
2. Sign in with your account.
3. Click the “Add project” button
4. Enter a new project name and press “continue”.
5. In the Google Analytics select “Enable Google Analytics for this project”
6. In this page, choose “Default Account for firebase” for Google Analytics account, then
press “create project” button.
7. In this “Add Firebase to your web app” page. Give a unique “app name” and click on
“Register app”
8. In “Add Firebase SDK” select “use npm” and copy and paste the JavaScript code extract into
a text file somewhere. It is very important as it contains YOUR connection details. We will use it
later when writing our JavaScript. Mine looks like this, BUT USE YOUR OWN:
Note: if you lose the credentials above, you can simply retrieve them from your Firebase
Console. Click on your project, then “Project Overview”, then “Project settings”:
9. On next screen, Click “Continue to console”
10. you should arrive on the Firebase Console:
Creating a Firestore
“Easily develop rich applications using a fully managed, scalable, and serverless document database.”
Next, we need to create a Firestore (NoSQL database):
In your Firebase console, in the menu on the left select Firestore Database (under
“Build”).
Click on the “Create database” button in the middle of the screen.
On the next screen, choose “Start in test mode”. This will create an open rule that allows
for easy access of your data later on. Obviously, this is not secure!
On the next screen, set the location of your Firestore to somewhere nearby, e.g. Europe-
west2 (London). This will impact performance and cannot be changed later! Press
“Enable”.
Part 2 – creating collections and documentation.
Now creating a “Movie Review” for this task
In your Firestore console, under “Data”, press “+ Start Collection”. Type “MovieReview”
in the collection ID field.
Create 4 “movie_name”, “director_name”, “release_date” and “movice_rating”
fields (with values), as follow, and press “Save”:
You should now see your collection and single document, as follow:
Part 3 – Accessing your data from JavaScript
Using your favourite coding text editor or IDE, create a new HTML file,
e.g. index.html, with the following starter template/code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>My Movie Review System</title>
</head>
<body>
<div class="container">
<h1 id="mainTitle">My movies</h1>
<div class="d-flex mb-2">
<input type="text" class="form-control" id="movieName" placeholder="Movie name">
<input type="text" class="form-control mx-2" id="directorName" placeholder="Director name">
<input type="date" class="form-control" id="releaseDate" placeholder="Release date">
<select class="form-control mx-2 w-25" id="movieRating">
<option value="1">1/5</option>
<option value="2">2/5</option>
<option value="3">3/5</option>
<option value="4">4/5</option>
<option value="5">5/5</option>
</select>
<button type="button" class="btn btn-primary" id="addButton">Add</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Movie Name</th>
<th>Director</th>
<th>Release Date</th>
<th>Rating</th>
<th>Action</th>
</tr>
</thead>
<tbody id="reviewList"></tbody>
</table>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Our Firebase code -->
<script type="module" src="myscripts.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Okay let’s connect to our Firestore. Create a new file called “myscripts.js” with the
following code:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-app.js";
import { Firestore,
getFirestore,
onSnapshot,
query,
collection,
orderBy,
addDoc,
deleteDoc,
doc } from 'https://www.gstatic.com/firebasejs/9.18.0/firebase-firestore.js';
const firebaseConfig = {
apiKey: "use your own",
authDomain: " use your own ",
projectId: "use your own",
storageBucket: "use your own",
messagingSenderId: "use your own",
appId: "use your own"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// Get a live data snapshot (i.e. auto-refresh) of our MovieReview collection
const q = query(collection(db, "MovieReview"), orderBy("movie_name"));
const unsubscribe = onSnapshot(q, (snapshot) => {
// Empty HTML table
$('#reviewList').empty();
// Loop through snapshot data and add to HTML table
snapshot.forEach((doc) => {
const reviewId = doc.id;
const movieName = doc.data().movie_name;
const directorName = doc.data().director_name;
const releaseDate = doc.data().release_date;
const movieRating = doc.data().movie_rating;
const tableRow = `
<tr>
<td>${movieName}</td>
<td>${directorName}</td>
<td>${releaseDate}</td>
<td>${movieRating}/5</td>
<td>
<button class="btn btn-danger btn-sm delete-button" data-review-id="${reviewId}">Delete</button>
</td>
</tr>
`;
$('#reviewList').append(tableRow);
});
// Display review count
const reviewCount = snapshot.size;
$('#mainTitle').html(reviewCount + " list of movies");
// Delete button click event handler
$('.delete-button').click(function() {
const reviewId = $(this).data('review-id');
deleteDoc(doc(db, "MovieReview", reviewId));
});
});
// Add button click event handler
$("#addButton").click(function() {
const movieName = $("#movieName").val();
const directorName = $("#directorName").val();
const releaseDate = $("#releaseDate").val();
const movieRating = parseInt($("#movieRating").val());
// Add review to Firestore collection
addDoc(collection(db, "MovieReview"), {
movie_name: movieName,
director_name: directorName,
release_date: releaseDate,
movie_rating: movieRating
});
// Reset form
$("#movieName").val('');
$("#directorName").val('');
$("#releaseDate").val('');
$("#movieRating").val('1');
});
Note: please use your own details, see Part 1 in this document.
Below is the screenshot of my “index.html” and “myscripts.js” file
All done. Browse to your file, and you should see a nice HTML table displaying your data
In this movie review task, we can add many lists of review and also, we can delete them
too.
