
### Building a realtime polling app with ionic, react and firebase Part 2

In the last part (https://gymconsole.app/blog/ionic-firebase-poll-app) we mainly built the UI for our app with react and ionic. We also mocked the poll and
answer objects.
In this part we are finally going to add firebase and make the app fully functional.

The full source code of the application can be found here:
https://github.com/RalliPi/realtime-poll-app

And here is what our app will look like when we are done:
[Poll app demo video](/img/blog/posts/pollappdemo.mp4)

#### Before we can start coding, we need to set up a firebase project.

Head over to https://console.firebase.google.com and create a new project. Fill in all the required fields and wait till
your project got created.
Next, click on 'Cloud Firestore' and create a new cloud firestore database.
When the database got created, you will see something like that:

![Pic of empty firestore](/img/blog/posts/empty.png "Empty firestore")

Let's add in our first poll. This article will not explain how to add new polls programmatically. We will enter the poll
by hand and users can vote for answers with our app. (Actually creating polls from our app could be another article in
the future).

Click 'Start collection' and enter 'polls' as collection id. This will be the collection where we store every single
poll the users can vote for. Click next.

Let's add in our first poll. Use 'poll1' as document id and add a field called text of type string.

![Pic of poll setup](/img/blog/posts/poll1.png "poll setup")

Now we can add the possible answers to our poll. We will be using a subcollection here. A subcollection is basically a
collection inside of a single document. We will be using this feature to save as many answers to a poll as we want.
Every document in a subcollection belongs to its parent document.

Click 'Start collection' inside the newly created poll document. Call the subcollection 'answers' and create a new
document in it. The document should have a field called 'amount' (we will be using it to store the actual vote amount
the answer received) and a field called 'text' which is the text that we display in our app.

![Pic of answers subcollection](/img/blog/posts/withdata.png "poll answers subcollection")

Now let's copy the connection settings of the firebase app. We will need it later. Go to your project settings by
clicking the small gear in the upper left corner. Scroll down and copy the config of your firebase web-app.
It will look something like that:

```
const firebaseConfig = {
  apiKey: "yourapikey",
  authDomain: "yourauthdomain",
  databaseURL: "yourdatabaseurl",
  projectId: "yourprojectid",
  storageBucket: "yourstoragebucket",
  messagingSenderId: "yourmessagingsenderid",
  appId: "yourappid"
};
```

Warning:
This tutorial assumes that you have no security rules setup on your firestore database. That means everybody can read and write to your database. This is highly dangerous and should not get deployed to production.
But this guide is not about security rules. So I will not discuss them here.

Ok, that's it on the firebase side. It's time to get coding. Open up the project of part 1 in your editor.

Before we can actually start writing code, we need to install a dependency first. Open your terminal, change to your app
directory and run the following command:

```
npm install firebase
```

This will add the firebase sdk to our project. We need it in order to communicate with the firestore database.

We will firstly configure the firestore database. In your src folder, create a new file called db.ts. It will hold our
firebase configuration.
Paste the following code:

```ts
import * as firebase from "firebase/app";
import "firebase/firestore";

var firebaseApp = firebase.initializeApp({
  apiKey: "yourapikey",
  authDomain: "yourauthdomain",
  databaseURL: "yourdatabaseurl",
  projectId: "yourprojectid",
  storageBucket: "yourstoragebucket",
  messagingSenderId: "yourmessagingsenderid",
  appId: "yourappid",
});

export const db = firebaseApp.firestore();
```

First we import firebase and firestore. Afterwards we're initializing firebase with the configuration we copied earlier. In
the last line we export the firestore object and call it db. This way we can access firestore easily from every file we
import db.ts.

#### Create hooks to easily access polls and answers

Remember the poll and answer objects we used directly in our page. We are going to swap them out with two hooks. Those
hooks will be responsible for loading and saving polls and poll answers.

Go to your page component and swap the content with the following:

```tsx
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonCard,
  IonCardContent,
  IonList,
  IonItem,
  IonLabel,
} from "@ionic/react";
import React, { useState, useEffect } from "react";
import "./Home.css";
import { usePoll, usePollAnswers } from "../hooks/poll";

const Home: React.FC = () => {
  var poll = usePoll("poll1");
  var { answers, vote } = usePollAnswers("poll1");

  const onVote = (
    e: React.MouseEvent<HTMLIonItemElement, MouseEvent>,
    id: string
  ) => {
    e.preventDefault();
    let answer = answers.find((a) => a.id === id);
    vote(answer!.id);
  };

  const answerList = () => {
    return answers.map((answer) => (
      <IonItem onClick={(e) => onVote(e, answer.id)} key={answer.id}>
        <IonLabel>{answer.text}</IonLabel>
        <IonLabel>{answer.amount}</IonLabel>
      </IonItem>
    ));
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Ionic Blanks</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonCard>
          <IonCardContent>
            {poll != null ? poll.text : "loading poll..."}
          </IonCardContent>
        </IonCard>
        <IonList>{answerList()}</IonList>
      </IonContent>
    </IonPage>
  );
};

export default Home;
```

The component almost looks identical to the old version. We only swaped the useState hooks with two custom hooks caled
usePoll and usePollAnswers. We pass the id of the poll we want to use and the hooks handle the rest.
usePoll just returns the poll object from the firestore database and usePollAnswers returns a list of answers that
belong to a poll and additionally a method called vote which can be used to vote for a poll answer.

Let's get to work and implement these hooks:

Create a new directory in your src dir called hooks and create a .ts file called poll.ts in it.

Put the following content in:

```ts
import { useState, useEffect } from "react";
import { db } from "../db";
import { Poll } from "../model/poll";
import { PollAnswer } from "../model/pollAnswer";
import { firestore } from "firebase";

export const usePoll = (pollId: string) => {
  const [poll, setPoll] = useState<Poll | null>(null);

  useEffect(() => {
    //load current poll
    db.collection("polls")
      .doc(pollId)
      .get()
      .then((poll: firestore.DocumentSnapshot<firestore.DocumentData>) => {
        if (poll.exists) {
          setPoll({
            id: poll.id,
            text: poll.data()!.text,
          });
        } else {
          console.log("couldn't find poll");
        }
      })
      .catch((error) => {
        console.log("error loading poll: " + error);
      });
  }, []);

  return poll;
};

export const usePollAnswers = (pollId: string) => {
  const [answers, setAnswers] = useState<PollAnswer[]>([]);

  //setup data listeners
  useEffect(() => {
    //load all possible answers
    var removeAnswersSnapshot = db
      .collection("polls")
      .doc(pollId)
      .collection("answers")
      .onSnapshot((snapshot) => {
        var answerObjects: PollAnswer[] = [];
        snapshot.docs.forEach((doc) => {
          answerObjects.push({
            id: doc.id,
            text: doc.data().text,
            amount: doc.data().amount,
          });
          setAnswers(answerObjects);
        });
      });
    return () => {
      removeAnswersSnapshot();
    };
  }, []);

  const vote = (id: string) => {
    var newAnswers = [...answers];
    var answer = newAnswers.find((a) => a.id === id);

    db.collection("polls")
      .doc(pollId)
      .collection("answers")
      .doc(answer!.id)
      .set(
        {
          amount: answer!.amount + 1,
        },
        { merge: true }
      );
  };

  return { answers, vote };
};
```

As you can see we're exporting two functions/hooks which both take a pollId as a parameter.

Let's see how the usePoll hook works:
We declare a local state object of type Poll with the help of the useState hook here. That's basically what we
previously did directly in our page component.
We're doing the actual databasecall in a useEffect hook. The useEffect hook always gets executed when any of the values
in the second parameter changes. As we're passing an empty list as the second parameter, the hook runs when the
component gets mounted.
So we're loading the poll just after the user hits the home page.

```ts
db.collection("polls").doc(pollId).get();
```

This returns a promise containing a firebase documentsnapshot. The contained data of this snapshot is actaully the same
as our Poll type. But we can't just cast it. We need to construct a new Poll object by grabbing each property from the
documentsnapshot:

```ts
setPoll({
  id: poll.id,
  text: poll.data()!.text,
});
```

So now our local state object poll holds the data that we just loaded from the server.
By returning the local poll object from our hook we can get access to this piece of state from outside of the function.
The cool part is, that whenever the local state inside of the hook changes (ie the data got loaded), the returned object
also 'changes' (It doesn't change but it holds the newly set data then).

We abstracted away the actual database loading logic from our page component. We can load polls now from everywhere in
our application by just calling

```ts
var myNewPoll = usePoll("myPollId");
```

Let's get to the usePollAnswers function. It's a little more complicated but if you understood how the usePoll function
works you will not have any problems with the usePollAnswers hook.

We're using local state again. But this time we need to save a list of PollAnswers instead of a single poll. We're
calling the db in a useEffect hook again.
This time we not just get the values we want once, but we're setting up a realtime listener.

```ts
var removeAnswersSnapshot = db
  .collection("polls")
  .doc(pollId)
  .collection("answers")
  .onSnapshot(callback);
```

This will set up a listener on a subcollection of a poll document in our db. A subcollection is basically another
collection that just exists for one single document in our database. Every single poll in the database will have it's
own subcollection of answers that only belong to this particular poll. The callback method will get called everytime a
document in our valueset changes (everytime any answerobject of the poll gets changed).

```ts
.onSnapshot(snapshot => {
  var answerObjects: PollAnswer[] = [];
  snapshot.docs.forEach(doc => {
    answerObjects.push({
      id: doc.id,
      text: doc.data().text,
      amount: doc.data().amount,
    });
    setAnswers(answerObjects);
  });
})
```

In the callback we're looping over every document and construct a new array of PollAnsers. Finally we're saving
the newly constructed array in our local state object.
This time the function we're running inside useEffect returns a function. This is useEffect functionality. Every code in
this function gets called when the component did unmount. We're calling

```ts
removeAnswersSnapshot();
```

there. This is a method that gets returned by the onSnapshot method provided by firestore. Calling this method will
remove the listener from the db. So we're no longer getting updates about database changes as soon as the page
component unmounts.

The last thing we need in order to make our poll app functional is voting functionality.

```ts
const vote = (id: string) => {
  var newAnswers = [...answers];
  var answer = newAnswers.find((a) => a.id === id);

  db.collection("polls")
    .doc(pollId)
    .collection("answers")
    .doc(answer!.id)
    .set(
      {
        amount: answer!.amount + 1,
      },
      { merge: true }
    );
};
```

The vote method takes the id of a PollAnswer as its only parameter. It then looks for the answer in the local state
object by comparing the id. Then it perfoms a write to the firestore database by calling the set method. we just need to
update the amount field of the object. The merge parameter we're passing tells firestore to merge the old object
it currently has stored with the new values we provide. That's all we need to write to the database.

The cool part is, that when we increment the amount field on a poll. Our snapshot listener for the pollAnsers
immediately triggers and updates our UI accordingly. We don't have to do any manual work here.

With this changes done. Open your project path in your terminal and type

```
npm run start
```

This will start a development server and you should be able to test the poll app. Open the app in a few browser windows
to see that it syncs in realtime and saves its state.

That's it. We built a fully working realtime poll app with just a few lines of code with the help of react, ionic and
firestore.

If you enjoy this type of content, visit https://gymconsole.app/blog to get more tutorials or connect with me on twitter
[@RalliPi](https://twitter.com/rallipi).
I'm happy to talk to you or help you with your projects


Build a complete realtime poll app with ionic, react, firebase and typescript (Part 2)

ionic-firebase-poll-app2.png

ionic-firebase-poll-app_part-two


### Building a realtime poll app with ionic and firebase

This tutorial will show you how to build an app that displays a poll and its answers. It also let's users vote on their favorite answer.
The polldata will be loaded and saved from and to the firestore database.
We will be using ionic and react to build the app frontend. Ionic makes it super easy to make a web app look like a native mobile app.

The complete source for this tutorial can be found here:
[https://github.com/RalliPi/realtime-poll-app](https://github.com/RalliPi/realtime-poll-app)



Let's get started with part 1: The UI

In this part we will design the user interface with ionic coponents and make the app fully functional locally. So you will be able to vote for a poll answers, but the votes will not get persistet and no one else can see them.
We will add the firebase logic in part 2.

We will be using the ionic cli to bootstrap our new app. If you haven't already installed it, you can install it globally on your machine by typing
```
npm install -g @ionic/cli
```
Let's create a new ionic project. Go to your terminal and type:

```
ionic start realtime-poll-app blank --type=react
```
Follow the isntructions on screen. When your done, your new ionic application is ready for development. Open the root folder of the app in your favourite text editor. 

Time to see what we already got. Switch back to your terminal and type
```
ionic serve
```
This will start a development server with live reload. So you will see the changes you make almost immediately.

As you can see, there is some placeholder text on the homepage. Navigate to the file pages/Home.tsx and replace the contents with the following:

```
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardContent, IonList, IonItem, IonLabel } from '@ionic/react';
import React, { useState, useEffect } from 'react';
import './Home.css';
import { Poll } from '../model/poll';
import { PollAnswer } from '../model/pollAnswer';


const Home: React.FC = () => {


  const [poll, setPoll] = useState<Poll>({
    id: "poll1",
    text: "I'm a question"
  })

  const [answers, setAnswers] = useState<PollAnswer[]>([
    {
      id: "a1",
      text: "I'm answer 1",
      amount: 0
    },
    {
      id: "a2",
      text: "I'm answer 2",
      amount: 0
    }
  ])


  const onVote = (e: React.MouseEvent<HTMLIonItemElement, MouseEvent>, id: string) => {
    e.preventDefault();
    var newAnswers = [...answers];
    var index = newAnswers.findIndex(a => a.id === id);
    newAnswers[index].amount++;
    setAnswers(newAnswers);
  };

  const answerList = () => {
    return answers.map(answer => (
      <IonItem onClick={e => onVote(e, answer.id)} key={answer.id}>
        <IonLabel>{answer.text}</IonLabel>
        <IonLabel>{answer.amount}</IonLabel>
      </IonItem>
    ));
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Realtime poll app</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonCard>
          <IonCardContent>
            {poll != null ? poll.text : "loading poll..."}
          </IonCardContent>
        </IonCard>
        <IonList>{answerList()}</IonList>
      </IonContent>
    </IonPage>
  );
};

export default Home;


```

Switch to your browser or your terminal and you will se that we have some mistakes. Don't worry, that all makes sense. 
If you look to the import section at the top of our Home.tsx file, you see that we import Poll and PollAnswer. But we didn't create them so far. Let's do this now.
Create a new folder called model in the root of your project and create two files in it.

```
mkdir model
touch poll.ts
touch pollAnswer.ts
```

Let's start with the poll file. Open it and paste the following:

```
export interface Poll {
    id: string,
    text: string
}
```
We export an interface called Poll which needs to have an id of type string and a text also of type string. That will tell our app, that everytime we're dealing with a Poll, it needs to have this two properties. This will save us a lot of headaches in the long run. Welcome to the long run. Welcome to the wonderful world of typescript.

Now open pollAnswer.ts and paste the following:
```
export interface PollAnswer {
    id: string,
    text: string,
    amount: number,
}
```
Almost the same as in poll.ts. This time we export a an interface called PollAnswer and it has 3 properties. an id, a text and additionally an amount of type number. This property will store the number of votes this answer received.

Now Check your browser again. Everything should be running now. You will see a poll question and two answers. If you click the ansswers, their votecount increases.

Let's have a deeper look at Home.tsx. I will go through the complete code and explain everything.

Pretty much going on here.
We're exporting a react functional(because class component are so 2018, aren't they?) component named Home which renders an ionic page with a header and content. 
In the content section we create a card which will hold our poll question later.
Beneath the poll card we want to display a list with all possible answers. We use an ionic List for that.
Inside of the list we call a method called ``answerList``, which is defined earlier in the code. It maps over all answers and returns a list of IonItem components with an IonLabel for the answer text and another IonLabel for the current vote amount inside.
The data for the actual poll annd the answers are currently stored as component state with the help of the useState hook (we will load them from the firestore database in the next part of the tutorial).
The poll is an object with an id attribute and a text attribute and the answers are an array of objects with an id, a text and a vote amount each.
Each IonItem we create has a click handler called onVote that gets executed whenever the user clicks the item. This handler receives the id of the selected answer as an argument. It increments the vote amount of the selected answer and stores the new state of the answers list. It does so by creating a copy of the current answers list with the helps of the spread operator ```[...answers]```, finding the index of the selected answer, modifiying the object at the found index and completely overriding the previous state with the new array.

That's it. When you now switch to your browserwindow, you will see a (pretty ugly) page that displays our poll and all answers with vote count. You can increase the amount by clicking on the answers.

That's it for this part. We will do the actual work in the next. That means connecting to firestore, loading poll data and updating the vote count when items get clicked.

If you don't want to miss part 2 which will airrive in the next couple of days, make sure you follow me on twitter. I announce new posts there first.
[https://twitter.com/rallipi](https://twitter.com/rallipi)



Build a complete realtime poll app with ionic, react, firebase and typescript (Part 1)

ionic-firebase-poll-app1.png

ionic-firebase-poll-app


### create a command parser with javascript

Are you building an application that needs to fetch user input and transform it in any way? Or are you just curious how a command line interface basically works?
Great! This little guide will get you prepared to build your own command parser that fetches input and transforms it based on given command schemes.

The techniques describes here were heavily used while developing the gymconsole app. Of course in a more copmplex way, but the principles stay the same.
If you're any kind into fitness or self tracking, you should definitifely check out gymconsole. [https://gymconsole.app](https://gymconsole.app)


A working version of the parser can be found here: [https://codepen.io/RalliPi/pen/abOrNzZ](https://codepen.io/RalliPi/pen/abOrNzZ)
Feel free to add new commands and let me know when you built something cool with it.


#### This guide will be split into 3 main parts:
1. Defining and structuring the supported commands
2. Defining supported argumenttypes (the input types your commands can handle)
3. The actual command parsing



#### Part 1: Defining commands
For this tutorial we will be storing our command templates in a good old array. For a real application you could store them in a database or whereever you want.
Lets create our command list:

```
var commands = [

];
```

Great now we have a list where we put every command into that we want to handle. Let's think about all the data a single commands needs to have.

1. **id or name**  
While this isn't necessarily needed it's always good to give your templates something that makes them identifiable
2. **scheme**  
The scheme is what makes it all work. The scheme is basically a regex that we compare to the user input to determine if the user wanted to trigger a particular command.
3. **list of arguments**  
Most commands will handle some kind of argument. Those are the parameters that we want to transform.
4. **handler**  
The handler is the logic that gets performed when we determined that this is the command the user wants to execute and when we identified all given arguments.

That's all we need. So let's look how such a command template will look like in practice.
Let's start with a very basic command. It will just echo everything back the user gives as argument.
```
var echoCommandTemplate = {
    name: "echo",
    scheme: "echo $input",
    args: [
        {
            name: "input",
            type: "string"
        }
    ],
    handler: ({input}) => {
      return input;
    }
}
```
A command template is just a regular javascript object. Nothing to be scared of.
First we're defining a name. Easy.
Now it gets a little more complicated. We define a list or arguments with a name and a type. In this case our command expects a single argument called input which is of type string.
We find this argument again if we look at the scheme. We're using the name of the argument to define where in the command scheme we're expecting to find our input argument.
Later our command parser will check if the user input matches "echo someinput". If it does, our parser knows, that "someinput" is a string argument called input.
The last property of the command template is the handler. It's a regular javascript function that receives all collected arguments as input parameters.

Lets add the command template to our commands list. Your code should look like this now:
```
var commands = [
    {
        name: "echo",
        scheme: "echo $input",
        args: [
            {
                name: "input",
                type: "string"
            }
        ],
        handler: ({input}) => {
          return input;
        }
    }
];
```

#### Part 2: Defining argument types
In our previously created command template we're using the argument "input" of type string. Now we need to tell our parser how to handle string arguments.
So lets create an argument type:

```
var stringArgumentType = {
    type: "string",
    replace: "([a-z]+)",
    transform: (arg) => {
      return arg
    }
}
```
This is probably the most complicated part of the tutorial. So let's tackle it step by step.
The type property is needed because it tells the parser which argumenttype to use for a given argument. So in our echo command, the input argument is of type "string", which tells tells the parser that it has to use the argumenttype which has "string" as its type property.
The replace property is a regex. It matches any amount of characters in a row. Eg "amfmfj" or "hello", but not "2345".
This string will replace the "\$input" part of the scheme in the commandtemplate.
In our example command "echo $input" will be replaced with "echo ([a-z]+)".
Et voila, "echo ([a-z]+)" is a regex that we can compare to the input a user gives us.
Finally the transform method tells what to do with the raw argument input. For a string it just returns the raw input again because every input we get from users is already of type string. But if we want to collect eg a number, we have to transform the string to a number manually. We will see how to do this later.

Let's define another argumentType for numbers (integers)
```
var numberArgumentType = {
    type: "number",
    replace: "([0-9]+)",
    transform: (arg) => {
      return parseInt(arg)
    }
  }
```
We had to change our replace property, because we want to match numbers now. And we need to adjust the transform method, because the raw input is of type string, but we want to return a number. So we parse the input to a number.

Let's put our commands in an array to have them all available:

```
var argumentTypes = [
  {
    type: "string",
    replace: "([a-z]+)",
    transform: (arg) => {
      return arg
    }
  },
  {
    type: "number",
    replace: "([0-9]+)",
    transform: (arg) => {
      return parseInt(arg)
    }
  }
]
```


#### Part 3: The command parser
We now have everything we need to parse our commands. Let's write the method that does the actual command parsing:

```
var cmd = (input) => {
  //check all commands
  for(let c of commands){
    var reg = c.scheme
    for(let arg of c.args){
      var argumentType = argumentTypes.find(a => a.type === arg.type);
      if(argumentType == undefined){
        console.log("unsupported argumenttype")
        return;
      }
      reg = reg.replace("$" + arg.name, argumentType.replace)
    }
    var regExp = new RegExp(reg)
    var match = input.match(regExp)
    if(match){
      match.shift()
      var paramObj = {}
      for(var i = 0; i < c.args.length; i++){
        var argumentType = argumentTypes.find(a => a.type === c.args[i].type);
        paramObj[c.args[i].name] = argumentType.transform(match[i])
      }
      return c.handler(paramObj)
    }
  }
  console.log("no matching command found")
}
```
No worries, it's not as complicated as you might think. I will break down every little piece.
First we loop over every entry of our command list. We do this in order to find the command that matches our input.
To check if a command matches, we need to check if it's scheme matches. But before we can use the scheme, we need to replace the argument placeholders with the actual regex patterns of the argument types.
So we loop over the arguments of the command, find the appropriate argumenttype and replace the placeholders in the scheme (we know it's a placeholder if it starts with a \$ character) with the actual regex pattern of the argument type.
That's what basically transforms our readable scheme eg "echo $input" to "echo ([a-z]+)" which we can use for the actual regex check.

After we constructed the regex pattern, we match it with the user input. If this match succeeds (return value is not undefined), we know that this command matches.

All thats now left to do is extract the arguments from the regex match, transform them to the correct types and pass them to the handler method of the command.

Extracting the arguments is easy, as the match method returns an array of all matches. Element 0 is the complete input, so we can remove that (with the shift method). The other elements are the parts of the input that matched our regex groups. Before we pass them to the handler function, we bring them in a nice and consistent format:
```
{
  argument1name: argument1value,
  argument2name: argument2value,
}
```
We do this by looping over the command arguments again and constructing an object with the names as keys and the extracted values as values.
Then we pass that newly created object to the handler and we're done.

Let's see if our command parser is capable of parsing a more complicated command. Let's build a command that sums up two numbers. 

```
var commands = [
    {
        name: "echo",
        scheme: "echo $input",
        args: [
            {
                name: "input",
                type: "string"
            }
        ],
        handler: ({input}) => {
        console.log(input)
        }
    },
    {
    name: "sum",
    scheme: "sum $val1 $val2",
    args:[
      {
        name: "val1",
        type: "number"
      },
      {
        name: "val2",
        type: "number"
      }
    ],
    handler: ({val1, val2}) => {
      return val1 + val2;
    }
  }
];
```

We added another command template to our commandslist. it's expecting two arguments called val1 and val2 both of type number. the handler will just sum them up and print them to the console.
There really isn't more to do than adding this little snippet to the commands list. Our parser is now able to sum numbers.

And that's it. I hope you learned something by following this tutorial.
If you like this kind of guides, just follow me on twitter. I always anounce new tutorials there. [https://twitter.com/rallipi](https://twitter.com/rallipi)

One final note:
You might be asking why the command scheme isn't directly filled with the regex. That's because with the way we did it. Now 'everybody' can edit and create new schemes for commands and not only the developer.
[https://gymconsole.app](https://gymconsole.app) uses the same replacemement system. That makes it possible that even endusers that don't even know what a regex is are able to configure their own tracking schemes for workouts and any other metric you want to log.

Build a command parser with javascript

command-parser-title-img.png

create-command-parser


### building a calorie tracking bot with node.js

In this post we will be building a simple calories tracking telegram bot with nodejs and the telegraf package. The bot will be very simple but can easily be expanded to handle more complex tasks as well.
You will be able to track calories and get the amount of calories you tracked today and the amount of calories you tracked all time.
We will be using a simple in memory store for our database. If you want to persist the entries you can use any database engine you want. The datastructure used to save entries is very simple and can easily be used with any noSQL or sql database engine.

The code of the fully working bot is here:
[https://github.com/RalliPi/calories_tracking_bot](https://github.com/RalliPi/calories_tracking_bot)

If you not only want to track calories but your complete life, you should check out the official gymconsle app. It allows you to log any kind of exercise and metric and set them in relation. [https://gymconsole.app](https://gymconsole.app)

But now let's get started with our calories tracking bot.

First let's init a new npm project in an empty folder:

```
npm init
```

Follow the instructions in the console.

then we need to install the only dependency we need. The telegraf telegram bot library. It's a nice wrapper around the official telegram bot api.

```
npm install telegraf
```

Then create our main js file called index.js

```
touch index.js
```

Time to get actually started:

```
const Telegraf = require('telegraf')
```

We imported telegraf to make it accessible in our mainfile.

Next we are going to set up our little ingame datastore.
We will save all entries in a simple array where every element represents the data of a single user:
```
var calDB = []
```

We will have a look at the structure of the entries in a minute.

Now let's create our bot instance:
```
const bot = new Telegraf("yoursecretbottoken)
```
This guide assumes you already created a bot with the help of the botfather telegram bot. That's really easy and only needs some minutes. Replace "yoursecretbottoken" with the actual token the botfather gave you.

Time to create the first interaction that's possible between a user and a bot. The /start command. Every conversation between a user and a bot starts with that command.

```
bot.start((ctx) => {
    calDB.push({
        chat_id: ctx.chat.id,
        entries: []
    })
    ctx.reply('Welcome! To track calories, just send me the calorie amount. To get your logged calories, send me the command /today or /all')
})
```

With bot.start(handler) we're telling our bot what to do, when a user starts a conversation with the bot (we assume every start means a new user. We're just ignoring the fact that users can delete the conversation and start over).
We add a new entry to our db. The entry consists of the current chat id which is part of the context object passed to the handler and an empty array which will hold our calorie tracking entries later.
After we updated the db, we send a reply back to the user. Telegraf has a nice method built into the context object for that.

The next step is to add the help command to the bot. Every bot should provide a help command that explains what the bot does and how to use it. Telegraf has a method that handles that built in:

```
bot.help((ctx) => ctx.reply('To track calories, just send me the calorie amount. To get your logged calories, send me the command /today or /all'))

```
We just reply with a simple text message to the help command. Nothing too fancy here.

Now the core functionality of our bot. The actual calory tracking. i will start explaining this first.But in our index.js file, this part is actually behind the /all and /today commands.That's because telegraf checks which handler to choose sequencially. If the bot.on("text") heandler gets checked before anything else, the other handlers will never get executed.
```
bot.on('text', (ctx) => {
    var from = ctx.message.chat.id
    var content = ctx.message.text
    //try to parse content to int
    var calories = parseInt(content)
    if (isNaN(calories)) {
        ctx.reply("That's not a valid number")
        return;
    }
    //save to db/memory storage
    var userEntries = calDB.find(e => e.chat_id === from);
    if (userEntries != undefined) {
        userEntries.entries.push({
            date: new Date(),
            amount: calories
        })
        ctx.reply('Thanks, calories tracked.')
    } else {
        ctx.reply("User not found")
    }
})
```
With bot.on('text', handler) we're creating a handler that's responsible to handle every text message the bot receives. So basically everything the user sends into the conversation. We extract the sender chat id and the actual content. Then we try to parse the given content to an integer because we expect it to be a calories amount. If it's not an integer, we just don't handle the input.
If it really is a calorie amount, we find the db entry of the user (identified by the chat id) and push a new calorie entry to the entries array. A calory entry consists of the current date and the actual amount.
After the entry was pushed to the db, we just reply to the message notifying the user that the bot processed the request.

Now all that's left is responding to requests asking for already logged calory entries:
```
bot.command('/all', (ctx) => {
    var from = ctx.message.chat.id
    var userEntries = calDB.find(e => e.chat_id === from);
    if (userEntries != undefined) {

        var msg = 'your logged calories:\n';
        userEntries.entries.forEach(e => {
            msg += e.date + ': ' + e.amount + '\n'
        })
        ctx.reply(msg)
    } else {
        ctx.reply("User not found")
    }
})

bot.command('/today', (ctx) => {
    var from = ctx.message.chat.id
    var userEntries = calDB.find(e => e.chat_id === from);
    if (userEntries != undefined) {

        var msg = 'your logged calories for today:\n';
        userEntries.entries.forEach(e => {
            if (isToday(e.date)) {
                msg += e.date + ': ' + e.amount + '\n'
            }
        })
        ctx.reply(msg)
    } else {
        ctx.reply("User not found")
    }
})
```

To get a list of all tracked calories we define the command '/all'. We look up the user entry in our db and loop over every entry and append it to a message that we send over to the user afterwards.
For the calories logged today, it's almost the same. But we only add calorie entries that were logged today. In order to check if the date is today, we have a little helper method 'isToday' which expects a date as the only parameter and checks if the day, the month and the year of the given date match with the current Date().

```
const isToday = (someDate) => {
    const today = new Date()
    return someDate.getDate() == today.getDate() &&
        someDate.getMonth() == today.getMonth() &&
        someDate.getFullYear() == today.getFullYear()
}
```

Finally we have to launch our bot in order to start processing messages:
```
bot.launch()
```

That's it. We're done. Now go to your terminal and type:
```
node index.js
```

You should be able to communicate with your bot now.