
### 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.

Build a calories tracking telegram bot with nodejs

calories_tracking_bot.png

calories_tracking_bot


### 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 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)

