IFTTT: Track Everything with Pixela and Alexa
Tags: ifttt, alexa, api
Published: 2020-12-23 06:16:20

Hi, I'm Arisa, a creator of [Lilac](https://github.com/sponsors/schabibi1) and a freelance Full Stack Developer in Germany.

[Lilac](https://github.com/sponsors/schabibi1) is a personalized online programming learning service to provide hands-on e-books and one-on-one tutoring.

# What is this article about?

In this article, I'll share what IFTTT applet(like an app) I built and how I built it.

It's a tracker applet with Alexa and [Pixela](https://pixe.la/).

For those of you never heard of [Pixela](https://pixe.la/), it'll change your life if you use it.

Pixela lets you tracking everything with Github contributions like graphs.

# Why I decide to build this applet?

As a developer, I wanna make my environment as developer-ish as possible.

(Don't ask me why, it's a nature of all developers💁‍♀️)

![dunno](https://media.giphy.com/media/Q74JetVUPf1qWBG82F/source.gif)

To track whatever I do is also no exception.

Just randomly, I thought that it'll be cool to track stuffs with Github contribution look graphs.

In fact, I needed something to check how often I post my blog and podcast episodes.

# When is this IFTTT applet useful?

Basically, when you have whatever things you wanna track and record visually.

And the best part is, you can track anything you do with Github contribution like graphs😎

Who's not happy about that if you're a developer?😏

And with IFTTT, you don't have to run curl command when you're occupied with something.

Counting the score for your kids' basketball game?

Want to check the frequency you stand up from your desk?

Then you're reading the right article👍

# Who is this article for?

Well, that's anyone who wants to record things with Github contribution-ish graph.

Even if you don't, Pixela visually shows you your activity.

Other reasons to read articles are here👇

- Anyone wants to try out IFTTT
- Anyone wants to try out [Pixela](https://pixe.la/)
- Anyone wants to try out smart speaker functions
- Anyone who is familiar with command line

# How to get started?

Make sure you have your account created in [IFTTT](https://ifttt.com/home).

Then, click "Create" button in header.

You'll jump to this page to register triggers and other things.

![IFTTT](https://dev-to-uploads.s3.amazonaws.com/i/mw9lfewlyqy3p2v15lut.png)

Click "If This". Search "Alexa" and click.

![if this](https://dev-to-uploads.s3.amazonaws.com/i/fr7am58co3twnf592mav.png)

Choose "Say a specific phrase."

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1q8wsrn076kjzxgthpo1.png)

"Connect" with your Alexa device.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8ojyd6tnwvn5ikfms547.png)

Login if they suggest you.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e6gdhruuprcdtlzol8us.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mqcm8kl0co4cl0mkihz1.png)

Fill out the trigger phrase.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t5arwsfexg7jhzrr6weo.png)

Click "Then That."

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1xf6z7y6rxqt47sve5my.png)

Search "Webhooks."

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4erl9cx4qu1bsr1z9q13.png)

Then open your terminal or any command line tool.

Check Pixela's documentation in here.

> [Pixela, webhooks](https://docs.pixe.la/entry/post-webhook)

Followed by the documentation, run the command to get your webhook hash value.

```javascript
$ curl -X POST https://pixe.la/v1/users/a-know/webhooks -H 'X-USER-TOKEN:thisissecret' -d '{"graphID":"test-graph","type":"increment"}'
{"webhookHash":"<WebhookHashString>","message":"Success.","isSuccess":true}
```

Copy your webhook hash value.

Use it at the end of the URL like in the screebshot below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pac9e3c3afdd8wu2u5re.png)

Method is POST, and content type is text/plain.

Click "Create action" and save the prefered name for your applet.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o7hrtaizbzyi2ik2rd3g.png)

Test with your Alexa, and you'll see your contribution graph is incremented👍

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/85npwuiooi4frb2q0i1u.png)

(You can check in the browser or iOS app)

The way to check in the browser is in the Pixela's top page!

[https://pixe.la/](https://pixe.la/)

You can customize your profile page too 😎

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ce6qvugtxhinhahq8xl8.png)

# Where to find Pixela?

Go and check from here 👇

[Pixela](https://pixe.la/)

You'll be amazed how Pixela is well organized, swift to update and beautiful UI/UX to use with nice docummentation!

Happy Coding✌️