NoSQL & Cloud Firestore

To create a new project

Initiate NPM on your current project

npm init -y

Notice that you have a new file in the file-tree: package.json:

//package.json should have content like this
{
  "name": "firebase",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Install webpack in the project

In the Webstorm terminal

npm install webpack webpack-cli --save-dev

Notice that you have a new folder node_modules

Enforce webpack on NPM BUILD

To accommedate webpacks build step (converting multiple javascript files into a single that can be deployed and run)

Create a new directory in the project root called src

Create a javascript file in the srcfolder called index.js such as this:

Create a javascript file the project root called webpack.config.js

Insert the following content in webpack.config.js:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

Change package.json to the following

{
  "name": "firebase",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

Exercises

The following exercises does not require you to make any styling.

A simple display on an HTML page using an approach such as the following will do just fine:

data = ["bob","alice","karsten"] //This data should be fetched from Cloud Firestore 

data.foreach((e) =>{
  let li = document.createElement('li');
  li.innerText = data[i];
  list.appendChild(li)
});

Each exercise-part (a,b,c) should be contained in its own function.

Exercise 1

In the following dataset:

import { collection, doc, setDoc } from "firebase/firestore"; 

const citiesRef = collection(db, "cities");

await setDoc(doc(citiesRef, "SF"), {
    name: "San Francisco", state: "CA", country: "USA",
    capital: false, population: 860000,
    regions: ["west_coast", "norcal"] });
await setDoc(doc(citiesRef, "LA"), {
    name: "Los Angeles", state: "CA", country: "USA",
    capital: false, population: 3900000,
    regions: ["west_coast", "socal"] });
await setDoc(doc(citiesRef, "DC"), {
    name: "Washington, D.C.", state: null, country: "USA",
    capital: true, population: 680000,
    regions: ["east_coast"] });
await setDoc(doc(citiesRef, "NY"), {
    name: "New York", state: "NY", country: "USA",
    capital: false, population: 8668000,
    regions: ["east_coast"] });
await setDoc(doc(citiesRef, "TOK"), {
    name: "Tokyo", state: null, country: "Japan",
    capital: true, population: 9000000,
    regions: ["kanto", "honshu"] });
await setDoc(doc(citiesRef, "BJ"), {
    name: "Beijing", state: null, country: "China",
    capital: true, population: 21500000,
    regions: ["jingjinji", "hebei"] });
await setDoc(doc(citiesRef, "CHI"), {
    name: "Chicago", state: "IL", country: "USA",
    capital: false, population: 2700000,
    regions: ["midwest", "great_lakes"]
});
await setDoc(doc(citiesRef, "LDN"), {
    name: "London", state: null, country: "United Kingdom",
    capital: true, population: 8900000,
    regions: ["england"]
});
await setDoc(doc(citiesRef, "PAR"), {
    name: "Paris", state: null, country: "France",
    capital: true, population: 2200000,
    regions: ["ile_de_france"]
});
await setDoc(doc(citiesRef, "BER"), {
    name: "Berlin", state: null, country: "Germany",
    capital: true, population: 3600000,
    regions: ["berlin_brandenburg"]
});
await setDoc(doc(citiesRef, "SYD"), {
    name: "Sydney", state: "NSW", country: "Australia",
    capital: false, population: 5000000,
    regions: ["new_south_wales"]
});
await setDoc(doc(citiesRef, "MEX"), {
    name: "Mexico City", state: null, country: "Mexico",
    capital: true, population: 9200000,
    regions: ["central_mexico"]
});
await setDoc(doc(citiesRef, "RIO"), {
    name: "Rio de Janeiro", state: null, country: "Brazil",
    capital: false, population: 6800000,
    regions: ["southeast"]
});
await setDoc(doc(citiesRef, "TOR"), {
    name: "Toronto", state: "ON", country: "Canada",
    capital: false, population: 2900000,
    regions: ["ontario"]
});
await setDoc(doc(citiesRef, "MUM"), {
    name: "Mumbai", state: "MH", country: "India",
    capital: false, population: 12400000,
    regions: ["maharashtra"]
});
await setDoc(doc(citiesRef, "SEO"), {
    name: "Seoul", state: null, country: "South Korea",
    capital: true, population: 9800000,
    regions: ["seoul_metropolitan"]
});
await setDoc(doc(citiesRef, "JKT"), {
    name: "Jakarta", state: null, country: "Indonesia",
    capital: true, population: 10900000,
    regions: ["java"]
});
await setDoc(doc(citiesRef, "DEL"), {
    name: "New Delhi", state: null, country: "India",
    capital: true, population: 2800000,
    regions: ["nct_delhi"]
});
await setDoc(doc(citiesRef, "MAD"), {
    name: "Madrid", state: null, country: "Spain",
    capital: true, population: 3200000,
    regions: ["community_of_madrid"]
});
await setDoc(doc(citiesRef, "AMS"), {
    name: "Amsterdam", state: null, country: "Netherlands",
    capital: true, population: 850000,
    regions: ["north_holland"]
});
await setDoc(doc(citiesRef, "ROM"), {
    name: "Rome", state: null, country: "Italy",
    capital: true, population: 2870000,
    regions: ["latium"]
});
await setDoc(doc(citiesRef, "LIS"), {
    name: "Lisbon", state: null, country: "Portugal",
    capital: true, population: 505000,
    regions: ["lisbon_district"]
});
await setDoc(doc(citiesRef, "ATH"), {
    name: "Athens", state: null, country: "Greece",
    capital: true, population: 664000,
    regions: ["attica"]
});
await setDoc(doc(citiesRef, "CAI"), {
    name: "Cairo", state: null, country: "Egypt",
    capital: true, population: 9120000,
    regions: ["cairo_governorate"]
});
await setDoc(doc(citiesRef, "DUB"), {
    name: "Dublin", state: null, country: "Ireland",
    capital: true, population: 554000,
    regions: ["leinster"]
});

A) Display a list of names of cities that are not capitals.

B) Display a list of names of cities that are either in USA or China

You might have to use in/not-in/contains

C) Display the name of the city and the population of the country with the highest population.

You might have to use orderby() or limit() function

D) Display the name of the country with most cities in the list

You might have to use javascript after querying the collection

E) Display a list of names of cities that are capitals with a population higher than 5.000.000

You might have to create a compund index

E) Write a basic input-field in the HTML page. When the user enters a city name in the field and clicks a button, the application will display an alert with "found" or "not found" if the user has inputted a city name in the database.

Exercise 2 (Advanced)

Create a new project
Insert the following data into a new collection

// Product 4
await setDoc(doc(productsRef, "p4"), {
    name: "Smartwatch", category: "Electronics",
    price: 149.99, stock: 80,
    brand: "Apple", rating: 4.6
});

// Product 5
await setDoc(doc(productsRef, "p5"), {
    name: "Digital Camera", category: "Electronics",
    price: 449.99, stock: 30,
    brand: "Canon", rating: 4.4
});

// Product 6
await setDoc(doc(productsRef, "p6"), {
    name: "Coffee Maker", category: "Appliances",
    price: 59.99, stock: 150,
    brand: "Keurig", rating: 4.7
});

// Product 7
await setDoc(doc(productsRef, "p7"), {
    name: "Hiking Backpack", category: "Sports & Outdoors",
    price: 89.99, stock: 60,
    brand: "Osprey", rating: 4.8
});

// Product 8
await setDoc(doc(productsRef, "p8"), {
    name: "Gaming Console", category: "Gaming",
    price: 399.99, stock: 25,
    brand: "Sony", rating: 4.9
});

// Product 9
await setDoc(doc(productsRef, "p9"), {
    name: "Headphones", category: "Electronics",
    price: 129.99, stock: 100,
    brand: "Bose", rating: 4.5
});

// Product 10
await setDoc(doc(productsRef, "p10"), {
    name: "Men's Dress Shirt", category: "Fashion",
    price: 49.99, stock: 120,
    brand: "Calvin Klein", rating: 4.7
});

// Product 11
await setDoc(doc(productsRef, "p11"), {
    name: "Wireless Router", category: "Electronics",
    price: 79.99, stock: 40,
    brand: "Linksys", rating: 4.6
});

// Product 12
await setDoc(doc(productsRef, "p12"), {
    name: "Running Shorts", category: "Sports & Outdoors",
    price: 29.99, stock: 90,
    brand: "Adidas", rating: 4.4
});

// Product 13
await setDoc(doc(productsRef, "p13"), {
    name: "Refrigerator", category: "Appliances",
    price: 799.99, stock: 20,
    brand: "Samsung", rating: 4.8
});

// Product 14
await setDoc(doc(productsRef, "p14"), {
    name: "Smart Home Hub", category: "Electronics",
    price: 99.99, stock: 35,
    brand: "Google", rating: 4.6
});

// Product 15
await setDoc(doc(productsRef, "p15"), {
    name: "Women's Running Shoes", category: "Sports & Outdoors",
    price: 74.99, stock: 70,
    brand: "New Balance", rating: 4.5
});

// Product 16
await setDoc(doc(productsRef, "p16"), {
    name: "Digital Drawing Tablet", category: "Electronics",
    price: 199.99, stock: 15,
    brand: "Wacom", rating: 4.7
});

// Product 17
await setDoc(doc(productsRef, "p17"), {
    name: "Blender", category: "Appliances",
    price: 39.99, stock: 50,
    brand: "Ninja", rating: 4.6
});

// Product 18
await setDoc(doc(productsRef, "p18"), {
    name: "Fitness Tracker", category: "Fitness",
    price: 79.99, stock: 55,
    brand: "Fitbit", rating: 4.8
});

// Product 19
await setDoc(doc(productsRef, "p19"), {
    name: "Men's Sneakers", category: "Fashion",
    price: 69.99, stock: 80,
    brand: "Nike", rating: 4.7
});

// Product 20
await setDoc(doc(productsRef, "p20"), {
    name: "Security Camera System", category: "Electronics",
    price: 299.99, stock: 10,
    brand: "Arlo", rating: 4.5
});

Create a web application such that:
- A user can enter a product name in a text input field and click a button.
- The amount of stock of the product will be displayed on the page (styling is not important)
- The category of the product will be displayed
- The brand will be displayed
- If the product is not found - an alert will inform the user

PreviousFirebase configuration NextFirebase Auth

Last updated 1 year ago