In this article, you'll practice your JavaScript skills while streamlining your household chores by creating your very own home inventory system.

I've often found that it's hard to keep track common household items that I buy frequently such as food, spices, medicine, and the like. It's annoying at best and frustrating at worst when I uncover a long-forgotten packet of chips from the depths of the cupboard.

Tired of keeping track manually, I decided to make my own home inventory system. This system would allow me to:

• create records for each item, along with helpful information such as price and quantity
• filter items on the basis of different criteria such as price, quantity and expiration date
• sort items based on given criteria
• delete items no longer in use
• edit existing records

In this tutorial I'll walk you through the process of how I built this system. Let's get started.

How to Define the Database Schema

Cloud Firestore is a cloud-hosted, scalable, flexible NoSQL database offered by Firebase. Data is stored in documents, and documents are grouped together into collections, similar to storing pages of information in a file and keeping multiple files together in a drawer.

Firestore offers powerful querying options ranging from simple sorting to adding limits to query results.

For our purposes, we'll define a Collection for a specific category. Each Document will correspond to a product within that category and the contents of a Document will be each field of information along with it's data value. For example:

"Snacks" : {
    "Food_Item_1" : { "Price":P1, "Quantity":Q1, "ExpiryDate":D1},
    "Food_Item_2" : { "Price":P2, "Quantity":Q2, "ExpiryDate":D2},    
    .
    .
    "Food_Item_N" : { "Price":PN, "Quantity":QN, "ExpiryDate":DN}
}

Our Collection name would be Snacks, our Document names would be Food_Item_1, Food_Item_2 and so on, and the contents of each document would be price, quantity and expiry date.

How to Get Input from the User

Let's first create a few routes and views and import the required node modules.

const express = require("express")
const app = express()
//Middleware to parse data in body portion of incoming request, like POST //request
const body_parser = require("body-parser")

objForUrlencoded = body_parser.urlencoded({extended:false})

app.set("view engine", "ejs")
app.use("/assets", express.static("assets"))
app.use(objForUrlencoded)

app.get("/", (req,res,next)=>{//Show the homepage
    res.render("homepage")
})
app.get("/save_data.ejs", (req,res,next)=>{//Show the form for saving data
    res.render("save_data")
})
app.get("/search_data.ejs", (req,res,next)=>{//Show the form for searching data
    res.render("search_data")
})

app.listen(1337, ()=>{ console.log("Listening on port 1337")})

Here we define a simple Express app which listens on port 1337 and renders pages as specified by the HTTP method (GET, POST) and URL. We create a simple form for user input.

Keep in mind that each HTML input field must have a name attribute which will later on serve as a key to access the corresponding values of the input field. For example:

<input type="text" name="productName">
<br/><br/>
<label for="productCategory">Product Category:</label>
<select name="productCategory">
    <option value="Snacks">Snacks</option>
    <option value="Biscuits">Biscuits</option>
     <option value="Spices">Spices</option>
</select>
<br/><br/>
<label for="price">Price:</label>
  <input type="number" name="price">
<br/><br/>
<label for="quantity">Quantity:</label>
  <input type="number" name="quantity">

Later we can access the name of the product as the value of key "productName", the category of the product as the value of the key "productCategory", and so on.

How to Save Data to the Database

Simple UI of the home inventory system

Okay then, now that we've got some data, let's save it to Firestore! This involves setting up a service account, obtaining a secret key, and using that to initialize the Credentials object to connect the database to our app using the Firebase Admin API.

For a more in-depth explanation of the process, you can check out their docs.

/*Set up Admin API for Firebase*/
const admin = require('firebase-admin');
//Define path to secret key generated for service account
const serviceAccount = require(PATH TO KEY);
//Initialize the app
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

Here, we've used the path to the secret key which is a JSON file. You can do the same by defining environment variables as described here.

Next, we save our data to Firestore using the set method as follows:

let db = admin.firestore()

//Depending on your schema, save data by specifying the collection name, //document name and data contents as follows
await db.collection(key).doc(prod).set(save_to_database[key][prod])

Here are a few terms you should be familiar with while navigating the Firestore docs, particularly the API reference:

• CollectionReference – this object is used for adding documents, getting DocumentReferences, and querying documents.
• DocumentReference – this refers to a document location in the database used to read/write/listen to that location.
• QuerySnapshot – an object that contains the results of a query
• DocumentSnapshot – contains data read from a document. You can extract the data using the .data() method.

How to Query the Data

Simple UI for searching/filtering the data

Once Firestore is packed with data, we can perform all sorts of complex queries on it.

Let's say we want to know how many items we have with the Category "Snacks". Whenever we execute a query, we get a QuerySnapshot which is a list of DocumentSnapshots.

//Get all docs under the given category
helper_func_get_data = async (category, db) => {
    const data = await db.collection(category).get()
    if(data.empty)
        {
            return -1
        }
    else return data

}

We can check if the query returned any data at all using the .empty property and iterate over all received documents using the forEach function like this:

data.forEach((doc) => { Product_Info[doc.id] = doc.data()})

//Here data is a QuerySnapshot and Product_Info is a JavaScript object 
//with document names as keys and their corresponding values. We can pass this 
//object as an argument in render() method to display the received contents

Here's how to figure out the total price of all Snacks:

total_agg = 0
data.forEach((doc) => { total_agg+=doc.data()[aggregate_over]

//aggregate_over is a variable which defines criteria to sum over like price //or quantity

To sort all Snacks on the basis of their price, do this:

const data = await db.collection(category).orderBy(filter_criteria).get()

where filter_criteria = "Price".

How to Delete Items from the Database

Over time, our household items that we consume daily are depleted and we'll need to delete them from the database to maintain consistency.

Until there's a feasible mechanism to connect the refrigerator to Cloud Firestore, we'll have to manually delete our records for Snacks once we've eaten them.

firebase_delete_data = async (category, response, product_name) => {
    try
    { 
      let db = admin.firestore()
      await db.collection(category).doc(product_name).delete()
      response.render("search_data")
       }
    catch(err)
    {console.log(err)}
}

How to Update Items in the Database

firebase_update_data = async (category, response, reqbody) => {
    try
    {
        let db = admin.firestore()
        await db.collection(category).doc(reqbody["productName"]).update({"Price": parseFloat(reqbody["price"]), "Quantity": parseFloat(reqbody["quantity"]), "ExpiryDate": reqbody["expiryDate"]})
        response.render("successpage")
    }
    catch(err)
    {
        console.log(err)
        response.render("failurepage")
    }
}

Another common functionality we'll want to have is to update existing records in the database.

Simple UI for updating product details

Once our functionalities are implemented, we export the functions to use from our Express app like this:

module.exports = {
    "firebase_save_data" : firebase_save_data,
    "firebase_retrieve_data": firebase_retrieve_data,
    "firebase_delete_data": firebase_delete_data,
    "firebase_update_data": firebase_update_data
    }

and import the required module as follows:

const firebase_functions = require("./firebase_CRUD_custom_code/firebase_functions.js")

Then we can use our functions as required. For example, if we want to update any items we can do the following:

app.post("/update", objForUrlencoded, (req,res) => {

    firebase_functions.firebase_update_data(req.body["category"], res, req.body)
})

Wrapping up!

To wrap up, in this article we learned about the data model of Cloud Firestore, how to save data, the mechanism for retrieving data, how to work with QuerySnapshots, sorting data on different filters, deleting items, and updating items through our Express app.

In this way, we can automate the task of tracking frequently used products in our households. We can also check which products are out of stock and so much more to make our busy lives easier.

I hope you enjoyed reading this article just as much as I enjoyed writing it. Thank you for your time, have a good day and happy coding!

Authentication allows us to secure our apps, or limit access for non-user members. Authentication can also be used, for example, to limit access to a paid service or specific service.

That's just one example of how authentication can be in your app. Today we will add authentication to a React Native app using Firebase.

1 Installing react-native-firebase

The first thing we do is install and initialize Firebase inside our app. In React Native we need to use a Firebase Container for React Native. We are going to use react-native-firebase.

If you are about to start a new React Native app from scratch and you would like to use Firebase, you are lucky - you can install react-native-firebase pre-integrated using the React Native CLI.

//
npx @react-native-community/cli init --template=@react-native-firebase/template authenticationFirebase
//** source: https://invertase.io/oss/react-native-firebase/quick-start/new-project

Then just install the pod for iOS by running the following command inside the root directory of your app.

cd ios && pod install

If you are having issues installing a new project with Firebase please refer to react-native-firebase docs

Adding react-native-firebase to an existing project

Install the react-native-firebase package using yarn or npm

 yarn add @react-native-firebase/app

or:

 npm install @react-native-firebase/app

Then install pods for iOS.

shell cd ios && pod install

Running the app

For iOS, there are two ways to do it: I personally use Xcode, as it gives me a clear idea if something went wrong and the build failed.

Always make sure the package is running - hit yarn start to start the app.

The second way to run the app on iOS is running the react-native run-ios command - and that's it.

Adding firebase credentials

This step requires us to create a new project in the Firebase console .

After creating a new project on the dashboard page select add Firebase to iOS app. This will show you the steps to add credentials to iOS like below.

It consists of a few steps :

• Download the GoogleService-info.plist file and put it inside the iOS folder within your project.

• Initialize Firebase

For Android

Android has a different setup for Firebase. In project settings in the Firebase console select add Firebase to Android.

You can put any name you like in the app name input - just make sure it conforms to the Firebase requirements. Then click Register.

After that, you need to download the google-services.json file and put it within the android/app folder.

Then the next step is to initialize the Android SDK.

The last step is to apply the Firebase plugin inside: android/app/build.gradle .

apply plugin: 'com.google.gms.google-services'

If you have any issues running the steps above you can always refer to the Firebase docs or react-native-firebase websites.

Now that we are done with the integration, the next step is to implement Firebase functions to create users and sign in in React Native.

Adding SignIn, Login

This phase is simple: just some React and JavaScript code to call Firebase functions. I'm going to create a simple UI for Login and SignUp (this is not necessary for this tutorial so you can skip this step).

I will put the full source code at the end of article *

We will use the createUserWithEmailAndPassword function to sign up for a new user. I already implemented all the validation on the form - we just need to call this function to create a user.

When the user presses the Continue button, __doSignUp will be called and the code looks like this:

const __doSignUp = () => {
  if (!email) {
    setError("Email required *")
    setValid(false)
    return
  } else if (!password && password.trim() && password.length > 6) {
    setError("Weak password, minimum 5 chars")
    setValid(false)
    return
  } else if (!__isValidEmail(email)) {
    setError("Invalid Email")
    setValid(false)
    return
  }

  __doCreateUser(email, password)
}

const __doCreateUser = async (email, password) => {
  try {
    let response = await auth().createUserWithEmailAndPassword(email, password)
    if (response) {
      console.log(tag, "?", response)
    }
  } catch (e) {
    console.error(e.message)
  }
}

Make sure you installed @react-native-firebase/authto be able to call auth().createUserWithEmailAndPassword(email, password)

// import auth
import auth from "@react-native-firebase/auth"

The function that creates a new user in Firebase looks like this:

const __doCreateUser = async (email, password) =>{
    try {
     let response =  await auth().createUserWithEmailAndPassword(email, password);
      if(response){
        console.log(tag,"?",response)
      }
    } catch (e) {
      console.error(e.message);
    }

If the function throws an error, make sure to enable the email / password method in the authentication section in the Firebase console.

If everything went well, and the data entered (email, password) is valid, an alert will show up. If you check the Authentication section in the Firebase console you will notice that a new user has been created.

Here is the source code of SignInComponent.

const SigInComponent = () => {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [fetching, setFetching] = useState(false)
  const [error, setError] = useState("")
  const [isValid, setValid] = useState(true)
  const __doSignUp = () => {
    if (!email) {
      setError("Email required *")
      setValid(false)
      return
    } else if (!password && password.trim() && password.length > 6) {
      setError("Weak password, minimum 5 chars")
      setValid(false)
      return
    } else if (!__isValidEmail(email)) {
      setError("Invalid Email")
      setValid(false)
      return
    }

    __doCreateUser(email, password)
  }

  const __doCreateUser = async (email, password) => {
    try {
      let response = await auth().createUserWithEmailAndPassword(
        email,
        password
      )
      if (response && response.user) {
        Alert.alert("Success ✅", "Account created successfully")
      }
    } catch (e) {
      console.error(e.message)
    }
  }

  return (
    <SafeAreaView style={styles.containerStyle}>
      <View style={{ flex: 0.2 }}>
        {!!fetching && <ActivityIndicator color={blue} />}
      </View>
      <View style={styles.headerContainerStyle}>
        <Text style={styles.headerTitleStyle}> Sign Up </Text>
      </View>
      <View style={styles.formContainerStyle}>
        <TextInput
          label={"Email"}
          autoCapitalize={false}
          keyboardType="email-address"
          style={styles.textInputStyle}
          placeholder="Mail address"
          onChangeText={text => {
            setError
            setEmail(text)
          }}
          error={isValid}
        />

        <TextInput
          label={"Password"}
          secureTextEntry
          autoCapitalize={false}
          style={styles.textInputStyle}
          selectionColor={blue}
          placeholder="Password"
          error={isValid}
          onChangeText={text => setPassword(text)}
        />
      </View>
      {error ? (
        <View style={styles.errorLabelContainerStyle}>
          <Text style={styles.errorTextStyle}>{error}</Text>
        </View>
      ) : null}
      <View style={styles.signInButtonContainerStyle}>
        <TouchableHighlight
          style={styles.signInButtonStyle}
          onPress={__doSignUp}
          underlayColor={blue}
        >
          <View
            style={{
              flexDirection: "row",
              justifyContent: "space-around",
            }}
          >
            <Text style={styles.signInButtonTextStyle}>Continue</Text>
          </View>
        </TouchableHighlight>
      </View>
    </SafeAreaView>
  )
}

For LoginComponent it’s mostly the same the only thing we need to change is we use signInWithEmailAndPassword method instead.

const __doSingIn = async (email, password) => {
  try {
    let response = await auth().signInWithEmailAndPassword(email, password)
    if (response && response.user) {
      Alert.alert("Success ✅", "Authenticated successfully")
    }
  } catch (e) {
    console.error(e.message)
  }
}

![loginSuccess](loginSuccess.gif

And the authentication has been successfully implemented in our app ??

Just one last thing: if we have to verify if the user is already logged in, we need to display something else instead of the Login or SignIn screens. For example, we can display the Home screen.

We can use a Firebase module to verify a session. It can be imported from the auth module.

import auth, { firebase } from "@react-native-firebase/auth"

 componentDidMount() {
    //  this.register("said1292@gmail.com", "123456");
    this.__isTheUserAuthenticated();
  }

  __isTheUserAuthenticated = () => {
    let user = firebase.auth().currentUser.uid;
    if (user) {
      console.log(tag,  user);
      this.setState({ authenticated: true });
    } else {
      this.setState({ authenticated: false });
    }
  };

And we can change the UI based on if the user is authenticated or not. We can display user info by just using the same method.

firebase.auth().currentUser.email // said543@gmail.com

And to logout, you can just call await firebase.auth().signOut();

I’m sure integrating navigation like react-navigation would be awesome, but it was not our focus in this article. So feel free to add navigation so you can just navigate based on the user status.

Feel free to check out the full source code ?on GitHub

Thanks for reading.

Originally published on saidhayani.com

Learn more about React native.

• Twitter
• GitHub
• Instagram
• Join the mail-list

When I reviewed Firebase last year, I complained that it wasn’t completely serverless. A Node server was still needed for common functionalities such as sending emails or creating thumbnails.

Firebase Cloud Functions were announced a few months later. The service is still in beta, but I’ve been using it happily for a couple of months in production.

Let’s see how it’s doing.

What are Firebase Cloud Functions?

If you’ve never heard of cloud functions before, the concept is quite straightforward. Deploy concise logic to a server in the form of functions and some diligent elves can be magically invoked from limbo to do a task for you. All of this without caring about infrastructure and paying only for execution resources.

In many cases, this new paradigm can simplify writing, maintaining, and running backend code.

Firebase Cloud Functions in particular are like Lego blocks that you can connect to any Firebase service. For example, a function can be triggered when an image is uploaded to Firebase Storage to create a thumbnail, or maybe clean some user data when a node is deleted in the Realtime Database. Pretty much anything of interest that happens in Firebase can trigger a function.

If that isn’t enough, you can also use HTTP to trigger functions with GET, POST, etc. Check out this amazing video on how to combine Firebase Hosting with Cloud Functions to create a complete Express app:

The Great

Infrastructure doesn’t get any easier than this

Infrastructure is completely abstracted from you, much like the rest of Firebase. Every time a function is triggered, a new virtual server comes to life, does its job, and returns to limbo. Google Cloud’s magic will keep triggering your functions and scale infrastructure according to workload automatically.

Pricing

Cloud functions in general are very cost-effective. It’s difficult to compare pricing of cloud providers, but I can say that based on my experience, Firebase Cloud Functions have been ridiculously cheap. It’s hard to believe Google is making any money out of this.

Easy to use

As usual with Firebase and Google, the docs are great and you won’t be making mental acrobatics to get it. There are also tons of samples on Github to get you started. Deployment auth is handled by the Firebase CLI, so getting a hello world up and running is literally:

firebase init functionsfirebase deploy

I think the simplicity of using Firebase and Google Cloud in general is just awesome, specially compared to the competition.

Flexible

Like I wrote before, these functions can be triggered by all sorts of events. I bet you will not run out of ideas on how to integrate them with your Firebase project or even the rest of your stack.

Here are some of problems we’ve solved using Firebase Cloud Functions:

• Generate PDFs for a online invoicing service using Phantom.js, and sign these invoices with some government service
• Connect a Go service with a third party SOAP provider (ugh)
• Send emails via HTTP from anywhere in our stack

The Meh

Cold starts

Scalability is great, but run time can fluctuate wildly. A simple hello world function can take 3ms to do its job, or a 100ms.

functions.https.onRequest((request, response) => {    response.send(“Hello from Firebase!”);});

These fluctuations are caused by virtual server boot times. If the virtual server that is running your function is awake, the function will trigger instantly. But if the server has to be brought up from limbo, it will obviously need more time to start working. In the cloud functions lingo, this is referred to as warm and cold starts.

In practice, you can’t rely on consistent response times unless you are caching your data, as described in the previous video, or use hacks to keep your functions warm.

Unfortunately cold starts are an unavoidable aspect of dealing with cloud functions (from any provider). You will have to take that into account when deciding to use a cloud function to solve something.

No scheduler (cron)

Cloud functions are perfect for doing low traffic tasks like generating reports or doing periodic backups at 2am, but with Firebase or Google Cloud there is no easy way to trigger your functions based on a schedule.

The Firebase team recommends creating an App Engine project to orchestrate these triggers. The service really begs for something like the Heroku Scheduler.

JavaScript only

Eh, I’m ok with JavaScript, but both Azure and AWS support many more languages. It’s ironic that Google doesn’t support Go in its cloud function service, but AWS does.

Node 6

Again, the competition is doing better. Both AWS Lambda and Azure Functions are already running on Node 8. The biggest drawback here is going back to promises without async/await or having to configure Babel on your project.

The Ugly

Dev workflow

With the exception of HTTP triggered functions, you can’t run your functions locally. Functions triggered by a Firebase service have to be deployed to the cloud.

This has many ugly implications:

• Little mistakes end up costing a lot of time, since new functions take a couple of minutes to start working.
• Deployed functions have no obvious versions. All logs of the same function appear to be from the same version. It’s never clear when the new functions are actually working, so your only choice is to manually trigger the functions and See-What-Happens™.
• No rollbacks

Environments

On top of the previous points, managing environments is… complicated.

You can add environment variables to your functions projects using the Firebase CLI but, like other aspects of Firebase, this is a naive approach that doesn’t scale well.

You will need credentials to access pretty much anything outside of the Firebase sandbox. For other Google Cloud services, these credentials come in the form of .json files. Multiply that by every environment (dev, production, staging) and you can end up with a royal mess.

I ended up up manually renaming credential files before deploying, or worse, deploying all credentials and selecting the appropriate one at runtime. Please, let me know in the comments if you’ve found a way around this.

I’d love to see an Environment tab in the Firebase Console where I could easily manage these settings for the whole Firebase project. Switching between environments should be as easy as firebase use production.

Conclusion

Other than some friction during dev phase, my experience with Firebase Cloud Functions has been positive. Once deployed, these things are reliable and require zero maintenance as promised. So yes, Firebase is finally completely serverless. Hurrah!

If you are already using Firebase, it’s really a no brainer. Firebase Cloud Functions are a great complement for your project, even if the service is still in beta.

On the other hand, it’s fair to say the competition has a more mature product. If you are not invested in Firebase or Google Cloud, and are considering using cloud functions in your stack, you should probably be looking into what AWS or Azure have to offer as well.

To be completely honest, I’m a bit concerned that the service is still in beta. It’s been over a year since it was announced and progress feels painfully slow. The competition seems far more committed to its cloud products, even if, according the Diane Greene, CEO for Google’s cloud businesses, Google Cloud is the “fastest growing cloud”.

That is all.

Note: In a previous version of this article I claimed that it wasn’t possible to write tests for non HTTP functions. This is wrong, and here are the docs on how to do that.