DEV Community

Cover image for IFTTT: Track Everything with Pixela and Alexa
Arisa Fukuzaki
Arisa Fukuzaki

Posted on

IFTTT: Track Everything with Pixela and Alexa

Hi, I'm Arisa, a creator of Lilac and a freelance Full Stack Developer in Germany.

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

For those of you never heard of Pixela, 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

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

Then, click "Create" button in header.

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

IFTTT

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

if this

Choose "Say a specific phrase."

Alt Text

"Connect" with your Alexa device.

Alt Text

Login if they suggest you.

Alt Text

Alt Text

Fill out the trigger phrase.

Alt Text

Click "Then That."

Alt Text

Search "Webhooks."

Alt Text

Then open your terminal or any command line tool.

Check Pixela's documentation in here.

Pixela, webhooks

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

$ 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}
Enter fullscreen mode Exit fullscreen mode

Copy your webhook hash value.

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

Alt Text

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

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

Alt Text

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

Alt Text

(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/

You can customize your profile page too 😎

Alt Text

Where to find Pixela?

Go and check from here 👇

Pixela

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

Happy Coding✌️

Top comments (0)