codingthoughts

Notes: Build a Mobile App

Henna Singh's photo
Henna Singh
·

3 min read

Notes: Build a Mobile App

Adding Firebase to My Project

As this is a new integration with Firebase, I am opting for modular API to add and initialize Firebase SDK. I created a project on the Firebase console without analytics and in test mode. Copy the database link generated from the "Data" tab.

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js"
import { getDatabase, ref } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js"

const appSettings = {
    databaseURL: "https://addtocart-mobileapp-default-rtdb.europe-west1.firebasedatabase.app/"
}

const app = initializeApp(appSettings)
const database = getDatabase(app)
const shoppingListInDB = ref(database, "shoppingList")// everything in firebase is a reference

Code for modular API is organized around functions, so I import the functions I needed for this project. Other Firebase JS SDKs can be found at

https://firebase.google.com/docs/web/learn-more#libraries-cdn

Turning Object into an Array

let users = {
    "00": "sindre@connect.com",
    "01": "per@connect.com",
    "02": "freda@connect.com"
}

let userArray = Object.entries(users)
console.log(userArray)

//similar method for only keys and values
Object.values(users)
Object.keys(users)

Fetching Data using onValue - Firebase

onValue(databaseName, function(snapshot) {
    if(snapshot.exists()) // to verify if data is there in the database
    console.log(snapshot.val()) //will display all items in the database
})

Replacing innerHTML with createElement

The "createElement" is a more recommended way to programmatically create HTML elements from within javascript. This way event listeners can be added to these elements. As per the code, when the element is clicked, it will be removed from the database.

    let newEl = document.createElement("li")
    newEl.textContent = currentItemValue
    newEl.addEventListener("click", function() {
       let exactLocationOfItemInDB = ref(database, `shoppingList/${currentItemId}`)
       remove(exactLocationOfItemInDB)
    })

Aside: Flex-wrap, gap, user-select in CSS

In flexbox display, some properties allow the wrapping of elements within the specified space. flex-wrap does the wrapping and gap adds some space between the elements. user-select avoids accidentally selecting text on the UI.

ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
body {
    user-select: none;
}

ul li {
    flex-grow: 1; /** allows element to grow and take whole space if no other element is added*/
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2)
}

Aside: Setting the Viewport

To display the website on a phone, and keep the view intact and not shrink it, HTML5 introduced a method to help control the viewport through the <meta> tag.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

This gives browser instructions on how to control the page's dimensions and scaling.

Adding Favicon

A square image in png format can be used. Use the Favicon generator to convert an image to a Favicon. Download the required files and add them to the project. Copy the meta details in the <head>. Several image files help with the quality of images on different screen sizes.

Web Application Manifest

To make a web app look nice on a mobile, we can add metadata details to the manifest file. These apps are also known as progressive web apps. More details can be found in Mozilla documentation.

{
    "name":"Add to Cart",
    "short_name":"Add to Cart",
    "icons": // these shows on device home screens
    [
        {"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},
        {"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}
    ],
    "theme_color":"#EEF0F4", //this is shown on device top header
    "background_color":"#EEF0F4",// this is shown when elements are loading
    "display":"standalone" // to make it look like a mobile app
}

Code Demo: https://addtocart-mobileapp.netlify.app/

FirebaseJavaScript