Connected Stopwatch

Hello!
In this tutorial you will found out how to connect any Arduino compatible device, equiped with WiFi, to REST APIs ! This use the GitKraken Glo Board webapp to create boards, columns & cards to organize things!

Some knowledge of how public API works is needed.
This project is meant to use GitKraken Glo's API to track the time you spend on tasks on your To Do lists.

For example, you have got to do this tasks:

- Drink Coffee

You press start when you start, when your done, you press Done, and voilà, the time you spend gets commented.

To build, you can think of anything. A small stopwatch would be great, but I didn't anything small laying around.

So cardboard and arcade push buttons was the way to go!

The board I used is an ESP8266 WeMos D1 Mini. This is cheaper than an Arduino, and has WiFi onboard!

The screen is a Nokia 5110 LCD.

Parts list on AliExpress:

• Nokia 5110
• 2 arcade Buttons
• ESP8266
• Jumper wires
• Cardboard box

But you can basically found it anywhere or on other websites like Amazon or eBay.

Overall bill: 5€86

Pins connections:

ESP8266 WeMos D1 Mini ↔ Nokia 5110 LCD

• D2 (GPIO4) ↔ 0 RST
• D1 (GPIO5) ↔ 1 CE
• D6 (GPIO12) ↔ 2 DC
• D7 (GPIO13) ↔ 3 DIN
• D5 (GPIO14) ↔ 4 CLK
• 3V3 ↔ 5 VCC
• D0 (GPIO16) ↔ 6 BL
• G (GND) ↔ 7 GND

ESP8266 WeMos D1 Mini ↔ Arcade Buttons

• D3 (GPI18) ↔ Left Button

• D4 (GPI17) ↔ Right Button

The button's other pin being connected to ground (GND).

Just give me the code!

You can find the full source code here:

https://github.com/antoinech/glo-stopwatch

To make it work for you, you will need to change these variables:

//Put your WiFi credentials here
const char* ssid = "--your--ssid--";
const char* password = "--your--password--";
//Put your Personal Access Token (https://support.gitkraken.com/developers/pats/)
const char *bearer = "Bearer XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

You will also need 2 Adafruit libraries:

https://github.com/adafruit/Adafruit-GFX-Library

https://github.com/adafruit/Adafruit-PCD8544-Nokia...

And this awesome Arduino Json:

https://arduinojson.org/

Explanations

In the source code you will find out:

• how to connect to a HTTPS endpoint
• how to make a POST or a GET request
• how to serialize a JSON response to get objects and arrays
• how to display text and pictures in a Nokia 5110 LCD

If you want to learn more about this API:

https://support.gitkraken.com/developers/overview/

These request could work with remotely any API that uses POST and GET requests :)

This pseudo-code explains you how to connect to an HTTPS website.
Its the first steps are the same as with a

WiFiClient client 

but with a verification step. You need to go to the API endpoint you want to verify, and check the certificate's SHA1 fingerprint. Copy paste it as a string in your code and call client.verify(fingerprint,hosturl).

   WiFiClientSecure client;

  //Connect to WiFi<br>  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  if (!client.connect(host, httpsPort)) {
    Serial.println("connection failed");
    return;
  }

  if (client.verify(fingerprint, host)) {
    Serial.println("certificate matches");
  } else {
    Serial.println("certificate doesn't match");
  }	

POST

This is the syntax to make a POST request:

String PostData = "{";<br>  PostData +="\"text\":\"my message\"";
  PostData += "}";
  
  Serial.print(PostData);
  
  client.print(String("POST ") + url + " HTTP/1.1\r\n" +
               "Host: " + host + "\r\n" +
               "Authorization: " + bearer + "\r\n" +
               "User-Agent: BuildFailureDetectorESP8266\r\n" +
               "cache-control: no-cache\r\n" +
               "Content-Type: application/json \r\n" +
               "Content-Length: " + PostData.length() + "\r\n" +
               "\r\n" + PostData + "\n");
               
  Serial.println("request sent");

the PostData is the data you send as JSON, in this case:

{
	"text": "my message"
}<br>

The url variable is the endpoint's url, host, the website's url, bearer is the API access token.

GET

This is the pseudo-code for a GET request:

client.print(String("GET ") + url + " HTTP/1.1\r\n" +<br>               "Host: " + host + "\r\n" +
               "Authorization: " + bearer + "\r\n" +
               "User-Agent: BuildFailureDetectorESP8266\r\n" +
               "Connection: keep-alive\r\n\r\n");

  Serial.println("request sent");
  while (client.connected()) {
    String line = client.readStringUntil('\n');
    if (line == "\r") {
      Serial.println("headers received");
      break;
    }
  }
  String line = client.readStringUntil('\n');

The result of this command will be stored in the line variable.

To achieve a similar project, you will need to display images, texts and symbols to the Nokia 5110 LCD.
You can look at this In Depth Tutorial from lastminuteengineers.

To handle JSON in Arduino C++, use the ArduinoJson website that will tell you all about it!

Don't hesitate to post questions if you have any, or post what you made with this source code / tutorial.