Category Archives: Technology
Playing with Docker, MQTT, Grafana, InfluxDB, Python and Arduino
I must admit this post is just an excuse to play with Grafana and InfluxDb. InfluxDB is a cool database especially designed to work with time series. Grafana is one open source tool for time series analytics. I want to build a simple prototype. The idea is:
- One Arduino device (esp32) emits a MQTT event to a mosquitto server. I’ll use a potentiometer to emulate one sensor (Imagine here, for example, a temperature sensor instead of potentiometer). I’ve used this circuit before in another projects
- One Python script will be listening to the MQTT event in my Raspberry Pi and it will persist the value to InfluxDB database
- I will monitor the state of the time series given by the potentiometer with Grafana
- I will create one alert in Grafana (for example when the average value within 10 seconds is above a threshold) and I will trigger a webhook when the alert changes its state
- One microservice (a Python Flask server) will be listening to the webhook and it will emit a MQTT event depending on the state
- Another Arduino device (one NodeMcu in this case) will be listening to this MQTT event and it will activate a LED. Red one if the alert is ON and green one if the alert is OFF
The server
As I said before we’ll need three servers:
- MQTT server (mosquitto)
- InfluxDB server
- Grafana server
We’ll use Docker. I’ve got a Docker host running in a Raspberry Pi3. The Raspberry Pi is a ARM device so we need docker images for this architecture.
version: '2'
services:
mosquitto:
image: pascaldevink/rpi-mosquitto
container_name: moquitto
ports:
- "9001:9001"
- "1883:1883"
restart: always
influxdb:
image: hypriot/rpi-influxdb
container_name: influxdb
restart: always
environment:
- INFLUXDB_INIT_PWD="password"
- PRE_CREATE_DB="iot"
ports:
- "8083:8083"
- "8086:8086"
volumes:
- ~/docker/rpi-influxdb/data:/data
grafana:
image: fg2it/grafana-armhf:v4.6.3
container_name: grafana
restart: always
ports:
- "3000:3000"
volumes:
- grafana-db:/var/lib/grafana
- grafana-log:/var/log/grafana
- grafana-conf:/etc/grafana
volumes:
grafana-db:
driver: local
grafana-log:
driver: local
grafana-conf:
driver: local
ESP32
The Esp32 part is very simple. We only need to connect our potentiometer to the Esp32. The potentiometer has three pins: Gnd, Signal and Vcc. For signal we’ll use the pin 32.
We only need to configure our Wifi network, connect to our MQTT server and emit the potentiometer value within each loop.
#include <PubSubClient.h>
#include <WiFi.h>
const int potentiometerPin = 32;
// Wifi configuration
const char* ssid = "my_wifi_ssid";
const char* password = "my_wifi_password";
// MQTT configuration
const char* server = "192.168.1.111";
const char* topic = "/pot";
const char* clientName = "com.gonzalo123.esp32";
String payload;
WiFiClient wifiClient;
PubSubClient client(wifiClient);
void wifiConnect() {
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("WiFi connected.");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
}
void mqttReConnect() {
while (!client.connected()) {
Serial.print("Attempting MQTT connection...");
if (client.connect(clientName)) {
Serial.println("connected");
} else {
Serial.print("failed, rc=");
Serial.print(client.state());
Serial.println(" try again in 5 seconds");
delay(5000);
}
}
}
void mqttEmit(String topic, String value)
{
client.publish((char*) topic.c_str(), (char*) value.c_str());
}
void setup() {
Serial.begin(115200);
wifiConnect();
client.setServer(server, 1883);
delay(1500);
}
void loop() {
if (!client.connected()) {
mqttReConnect();
}
int current = (int) ((analogRead(potentiometerPin) * 100) / 4095);
mqttEmit(topic, (String) current);
delay(500);
}
Mqtt listener
The esp32 emits an event (“/pot”) with the value of the potentiometer. So we’re going to create a MQTT listener that listen to MQTT and persits the value to InfluxDB.
import paho.mqtt.client as mqtt
from influxdb import InfluxDBClient
import datetime
import logging
def persists(msg):
current_time = datetime.datetime.utcnow().isoformat()
json_body = [
{
"measurement": "pot",
"tags": {},
"time": current_time,
"fields": {
"value": int(msg.payload)
}
}
]
logging.info(json_body)
influx_client.write_points(json_body)
logging.basicConfig(level=logging.INFO)
influx_client = InfluxDBClient('docker', 8086, database='iot')
client = mqtt.Client()
client.on_connect = lambda self, mosq, obj, rc: self.subscribe("/pot")
client.on_message = lambda client, userdata, msg: persists(msg)
client.connect("docker", 1883, 60)
client.loop_forever()
Grafana
In grafana we need to do two things. First to create one datasource from our InfluxDB server. It’s pretty straightforward to it.
Finally we’ll create a dashboard. We only have one time-serie with the value of the potentiometer. I must admit that my dasboard has a lot things that I’ve created only for fun.
Thats the query that I’m using to plot the main graph
SELECT
last("value") FROM "pot"
WHERE
time >= now() - 5m
GROUP BY
time($interval) fill(previous)
Here we can see the dashboard
And here my alert configuration:
I’ve also created a notification channel with a webhook. Grafana will use this web hook to notify when the state of alert changes
Webhook listener
Grafana will emit a webhook, so we’ll need an REST endpoint to collect the webhook calls. I normally use PHP/Lumen to create REST servers but in this project I’ll use Python and Flask.
We need to handle HTTP Basic Auth and emmit a MQTT event. MQTT is a very simple protocol but it has one very nice feature that fits like hat fits like a glove here. Le me explain it:
Imagine that we’ve got our system up and running and the state is “ok”. Now we connect one device (for example one big red/green lights). Since the “ok” event was fired before we connect the lights, our green light will not be switch on. We need to wait util “alert” event if we want to see any light. That’s not cool.
MQTT allows us to “retain” messages. That means that we can emit messages with “retain” flag to one topic and when we connect one device later to this topic, it will receive the message. Here it’s exactly what we need.
from flask import Flask
from flask import request
from flask_httpauth import HTTPBasicAuth
import paho.mqtt.client as mqtt
import json
client = mqtt.Client()
app = Flask(__name__)
auth = HTTPBasicAuth()
# http basic auth credentials
users = {
"user": "password"
}
@auth.get_password
def get_pw(username):
if username in users:
return users.get(username)
return None
@app.route('/alert', methods=['POST'])
@auth.login_required
def alert():
client.connect("docker", 1883, 60)
data = json.loads(request.data.decode('utf-8'))
if data['state'] == 'alerting':
client.publish(topic="/alert", payload="1", retain=True)
elif data['state'] == 'ok':
client.publish(topic="/alert", payload="0", retain=True)
client.disconnect()
return "ok"
if __name__ == "__main__":
app.run(host='0.0.0.0')
Nodemcu
Finally the Nodemcu. This part is similar than the esp32 one. Our leds are in pins 4 and 5. We also need to configure the Wifi and connect to to MQTT server. Nodemcu and esp32 are similar devices but not the same. For example we need to use different libraries to connect to the wifi.
This device will be listening to the MQTT event and trigger on led or another depending on the state
#include <PubSubClient.h>
#include <ESP8266WiFi.h>
const int ledRed = 4;
const int ledGreen = 5;
// Wifi configuration
const char* ssid = "my_wifi_ssid";
const char* password = "my_wifi_password";
// mqtt configuration
const char* server = "192.168.1.111";
const char* topic = "/alert";
const char* clientName = "com.gonzalo123.nodemcu";
int value;
int percent;
String payload;
WiFiClient wifiClient;
PubSubClient client(wifiClient);
void wifiConnect() {
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("WiFi connected.");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
}
void mqttReConnect() {
while (!client.connected()) {
Serial.print("Attempting MQTT connection...");
if (client.connect(clientName)) {
Serial.println("connected");
client.subscribe(topic);
} else {
Serial.print("failed, rc=");
Serial.print(client.state());
Serial.println(" try again in 5 seconds");
delay(5000);
}
}
}
void callback(char* topic, byte* payload, unsigned int length) {
Serial.print("Message arrived [");
Serial.print(topic);
String data;
for (int i = 0; i < length; i++) {
data += (char)payload[i];
}
cleanLeds();
int value = data.toInt();
switch (value) {
case 1:
digitalWrite(ledRed, HIGH);
break;
case 0:
digitalWrite(ledGreen, HIGH);
break;
}
Serial.print("] value:");
Serial.println((int) value);
}
void cleanLeds() {
digitalWrite(ledRed, LOW);
digitalWrite(ledGreen, LOW);
}
void setup() {
Serial.begin(9600);
pinMode(ledRed, OUTPUT);
pinMode(ledGreen, OUTPUT);
cleanLeds();
Serial.println("start");
wifiConnect();
client.setServer(server, 1883);
client.setCallback(callback);
delay(1500);
}
void loop() {
Serial.print(".");
if (!client.connected()) {
mqttReConnect();
}
client.loop();
delay(500);
}
Here you can see the working prototype in action
And here the source code
Happy logins. Only the happy user will pass
Login forms are bored. In this example we’re going to create an especial login form. Only for happy users. Happiness is something complicated, but at least, one smile is more easy to obtain, and all is better with one smile :). Our login form will only appear if the user smiles. Let’s start.
I must admit that this project is just an excuse to play with different technologies that I wanted to play. Weeks ago I discovered one library called face_classification. With this library I can perform emotion classification from a picture. The idea is simple. We create RabbitMQ RPC server script that answers with the emotion of the face within a picture. Then we obtain on frame from the video stream of the webcam (with HTML5) and we send this frame using websocket to a socket.io server. This websocket server (node) ask to the RabbitMQ RPC the emotion and it sends back to the browser the emotion and a the original picture with a rectangle over the face.
Frontend
As well as we’re going to use socket.io for websockets we will use the same script to serve the frontend (the login and the HTML5 video capture)
<!doctype html>
<html>
<head>
<title>Happy login</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="login-page" class="login-page">
<div class="form">
<h1 id="nonHappy" style="display: block;">Only the happy user will pass</h1>
<form id="happyForm" class="login-form" style="display: none" onsubmit="return false;">
<input id="user" type="text" placeholder="username"/>
<input id="pass" type="password" placeholder="password"/>
<button id="login">login</button>
<p></p>
<img id="smile" width="426" height="320" src=""/>
</form>
<div id="video">
<video style="display:none;"></video>
<canvas id="canvas" style="display:none"></canvas>
<canvas id="canvas-face" width="426" height="320"></canvas>
</div>
</div>
</div>
<div id="private" style="display: none;">
<h1>Private page</h1>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>
Here we’ll connect to the websocket and we’ll emit the webcam frame to the server. We´ll also be listening to one event called ‘response’ where server will notify us when one emotion has been detected.
let socket = io.connect(location.origin),
img = new Image(),
canvasFace = document.getElementById('canvas-face'),
context = canvasFace.getContext('2d'),
canvas = document.getElementById('canvas'),
width = 640,
height = 480,
delay = 1000,
jpgQuality = 0.6,
isHappy = false;
socket.on('response', function (r) {
let data = JSON.parse(r);
if (data.length > 0 && data[0].hasOwnProperty('emotion')) {
if (isHappy === false && data[0]['emotion'] === 'happy') {
isHappy = true;
swal({
title: "Good!",
text: "All is better with one smile!",
icon: "success",
buttons: false,
timer: 2000,
});
$('#nonHappy').hide();
$('#video').hide();
$('#happyForm').show();
$('#smile')[0].src = 'data:image/png;base64,' + data[0].image;
}
img.onload = function () {
context.drawImage(this, 0, 0, canvasFace.width, canvasFace.height);
};
img.src = 'data:image/png;base64,' + data[0].image;
}
});
navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
navigator.getMedia({video: true, audio: false}, (mediaStream) => {
let video = document.getElementsByTagName('video')[0];
video.src = window.URL.createObjectURL(mediaStream);
video.play();
setInterval(((video) => {
return function () {
let context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
socket.emit('img', canvas.toDataURL('image/jpeg', jpgQuality));
}
})(video), delay)
}, error => console.log(error));
$(() => {
$('#login').click(() => {
$('#login-page').hide();
$('#private').show();
})
});
Backend
Finally we’ll work in the backend. Basically I’ve check the examples that we can see in face_classification project and tune it a bit according to my needs.
from rabbit import builder
import logging
import numpy as np
from keras.models import load_model
from utils.datasets import get_labels
from utils.inference import detect_faces
from utils.inference import draw_text
from utils.inference import draw_bounding_box
from utils.inference import apply_offsets
from utils.inference import load_detection_model
from utils.inference import load_image
from utils.preprocessor import preprocess_input
import cv2
import json
import base64
detection_model_path = 'trained_models/detection_models/haarcascade_frontalface_default.xml'
emotion_model_path = 'trained_models/emotion_models/fer2013_mini_XCEPTION.102-0.66.hdf5'
emotion_labels = get_labels('fer2013')
font = cv2.FONT_HERSHEY_SIMPLEX
# hyper-parameters for bounding boxes shape
emotion_offsets = (20, 40)
# loading models
face_detection = load_detection_model(detection_model_path)
emotion_classifier = load_model(emotion_model_path, compile=False)
# getting input model shapes for inference
emotion_target_size = emotion_classifier.input_shape[1:3]
def format_response(response):
decoded_json = json.loads(response)
return "Hello {}".format(decoded_json['name'])
def on_data(data):
f = open('current.jpg', 'wb')
f.write(base64.decodebytes(data))
f.close()
image_path = "current.jpg"
out = []
# loading images
rgb_image = load_image(image_path, grayscale=False)
gray_image = load_image(image_path, grayscale=True)
gray_image = np.squeeze(gray_image)
gray_image = gray_image.astype('uint8')
faces = detect_faces(face_detection, gray_image)
for face_coordinates in faces:
x1, x2, y1, y2 = apply_offsets(face_coordinates, emotion_offsets)
gray_face = gray_image[y1:y2, x1:x2]
try:
gray_face = cv2.resize(gray_face, (emotion_target_size))
except:
continue
gray_face = preprocess_input(gray_face, True)
gray_face = np.expand_dims(gray_face, 0)
gray_face = np.expand_dims(gray_face, -1)
emotion_label_arg = np.argmax(emotion_classifier.predict(gray_face))
emotion_text = emotion_labels[emotion_label_arg]
color = (0, 0, 255)
draw_bounding_box(face_coordinates, rgb_image, color)
draw_text(face_coordinates, rgb_image, emotion_text, color, 0, -50, 1, 2)
bgr_image = cv2.cvtColor(rgb_image, cv2.COLOR_RGB2BGR)
cv2.imwrite('predicted.png', bgr_image)
data = open('predicted.png', 'rb').read()
encoded = base64.encodebytes(data).decode('utf-8')
out.append({
'image': encoded,
'emotion': emotion_text,
})
return out
logging.basicConfig(level=logging.WARN)
rpc = builder.rpc("image.check", {'host': 'localhost', 'port': 5672})
rpc.server(on_data)
Here you can see in action the working prototype
Maybe we can do the same with another tools and even more simple but as I said before this example is just an excuse to play with those technologies:
- Send webcam frames via websockets
- Connect one web application to a Pyhon application via RabbitMQ RPC
- Play with face classification script
Please don’t use this script in production. It’s just a proof of concepts. With smiles but a proof of concepts 🙂
You can see the project in my github account
Opencv and esp32 experiment. Moving a servo with my face alignment
One saturday morning I was having a breakfast and I discovered face_recognition project. I started to play with the opencv example. I put my picture and, Wow! It works like a charm. It’s pretty straightforward to detect my face and also I can obtain the face landmarks. One of the landmark that I can get is the nose tip. Playing with this script I realized that with the nose tip I can determine the position of the face. I can see if my face is align to the center or if I move it to one side. As well as I have a new iot device (one ESP32) I wanted to do something with it. For example control a servo (SG90) and moving it from left to right depending on my face position.
First we have the main python script. With this script I detect my face, the nose tip and the position of my face. With this position I will emit an event to a mqtt broker (a mosquitto server running on my laptop).
import face_recognition
import cv2
import numpy as np
import math
import paho.mqtt.client as mqtt
video_capture = cv2.VideoCapture(0)
gonzalo_image = face_recognition.load_image_file("gonzalo.png")
gonzalo_face_encoding = face_recognition.face_encodings(gonzalo_image)[0]
known_face_encodings = [
gonzalo_face_encoding
]
known_face_names = [
"Gonzalo"
]
RED = (0, 0, 255)
GREEN = (0, 255, 0)
BLUE = (255, 0, 0)
face_locations = []
face_encodings = []
face_names = []
process_this_frame = True
status = ''
labelColor = GREEN
client = mqtt.Client()
client.connect("localhost", 1883, 60)
while True:
ret, frame = video_capture.read()
# Resize frame of video to 1/4 size for faster face recognition processing
small_frame = cv2.resize(frame, (0, 0), fx=0.25, fy=0.25)
# Convert the image from BGR color (which OpenCV uses) to RGB color (which face_recognition uses)
rgb_small_frame = small_frame[:, :, ::-1]
face_locations = face_recognition.face_locations(rgb_small_frame)
face_encodings = face_recognition.face_encodings(rgb_small_frame, face_locations)
face_landmarks_list = face_recognition.face_landmarks(rgb_small_frame, face_locations)
face_names = []
for face_encoding, face_landmarks in zip(face_encodings, face_landmarks_list):
matches = face_recognition.compare_faces(known_face_encodings, face_encoding)
name = "Unknown"
if True in matches:
first_match_index = matches.index(True)
name = known_face_names[first_match_index]
nose_tip = face_landmarks['nose_tip']
maxLandmark = max(nose_tip)
minLandmark = min(nose_tip)
diff = math.fabs(maxLandmark[1] - minLandmark[1])
if diff < 2:
status = "center"
labelColor = BLUE
client.publish("/face/{}/center".format(name), "1")
elif maxLandmark[1] > minLandmark[1]:
status = ">>>>"
labelColor = RED
client.publish("/face/{}/left".format(name), "1")
else:
status = "<<<<"
client.publish("/face/{}/right".format(name), "1")
labelColor = RED
shape = np.array(face_landmarks['nose_bridge'], np.int32)
cv2.polylines(frame, [shape.reshape((-1, 1, 2)) * 4], True, (0, 255, 255))
cv2.fillPoly(frame, [shape.reshape((-1, 1, 2)) * 4], GREEN)
face_names.append("{} {}".format(name, status))
for (top, right, bottom, left), name in zip(face_locations, face_names):
# Scale back up face locations since the frame we detected in was scaled to 1/4 size
top *= 4
right *= 4
bottom *= 4
left *= 4
if 'Unknown' not in name.split(' '):
cv2.rectangle(frame, (left, top), (right, bottom), labelColor, 2)
cv2.rectangle(frame, (left, bottom - 35), (right, bottom), labelColor, cv2.FILLED)
cv2.putText(frame, name, (left + 6, bottom - 6), cv2.FONT_HERSHEY_DUPLEX, 1.0, (255, 255, 255), 1)
else:
cv2.rectangle(frame, (left, top), (right, bottom), BLUE, 2)
cv2.imshow('Video', frame)
if cv2.waitKey(1) & 0xFF == ord('q'):
break
video_capture.release()
cv2.destroyAllWindows()
Now another Python script will be listening to mqtt events and it will trigger one event with the position of the servo. I know that this second Python script maybe is unnecessary. We can move its logic to esp32 and main opencv script, but I was playing with mqtt and I wanted to decouple it a little bit.
import paho.mqtt.client as mqtt
class Iot:
_state = None
_client = None
_dict = {
'left': 0,
'center': 1,
'right': 2
}
def __init__(self, client):
self._client = client
def emit(self, name, event):
if event != self._state:
self._state = event
self._client.publish("/servo", self._dict[event])
print("emit /servo envent with value {} - {}".format(self._dict[event], name))
def on_message(topic, iot):
data = topic.split("/")
name = data[2]
action = data[3]
iot.emit(name, action)
client = mqtt.Client()
iot = Iot(client)
client.on_connect = lambda self, mosq, obj, rc: self.subscribe("/face/#")
client.on_message = lambda client, userdata, msg: on_message(msg.topic, iot)
client.connect("localhost", 1883, 60)
client.loop_forever()
And finally the ESP32. Here will connect to my wifi and to my mqtt broker.
#include <WiFi.h>
#include <PubSubClient.h>
#define LED0 17
#define LED1 18
#define LED2 19
#define SERVO_PIN 5
// wifi configuration
const char* ssid = "my_ssid";
const char* password = "my_wifi_password";
// mqtt configuration
const char* server = "192.168.1.111"; // mqtt broker ip
const char* topic = "/servo";
const char* clientName = "com.gonzalo123.esp32";
int channel = 1;
int hz = 50;
int depth = 16;
WiFiClient wifiClient;
PubSubClient client(wifiClient);
void wifiConnect() {
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print("*");
}
Serial.print("WiFi connected: ");
Serial.println(WiFi.localIP());
}
void mqttReConnect() {
while (!client.connected()) {
Serial.print("Attempting MQTT connection...");
if (client.connect(clientName)) {
Serial.println("connected");
client.subscribe(topic);
} else {
Serial.print("failed, rc=");
Serial.print(client.state());
Serial.println(" try again in 5 seconds");
delay(5000);
}
}
}
void callback(char* topic, byte* payload, unsigned int length) {
Serial.print("Message arrived [");
Serial.print(topic);
String data;
for (int i = 0; i < length; i++) {
data += (char)payload[i];
}
int value = data.toInt();
cleanLeds();
switch (value) {
case 0:
ledcWrite(1, 3400);
digitalWrite(LED0, HIGH);
break;
case 1:
ledcWrite(1, 4900);
digitalWrite(LED1, HIGH);
break;
case 2:
ledcWrite(1, 6400);
digitalWrite(LED2, HIGH);
break;
}
Serial.print("] value:");
Serial.println((int) value);
}
void cleanLeds() {
digitalWrite(LED0, LOW);
digitalWrite(LED1, LOW);
digitalWrite(LED2, LOW);
}
void setup() {
Serial.begin(115200);
ledcSetup(channel, hz, depth);
ledcAttachPin(SERVO_PIN, channel);
pinMode(LED0, OUTPUT);
pinMode(LED1, OUTPUT);
pinMode(LED2, OUTPUT);
cleanLeds();
wifiConnect();
client.setServer(server, 1883);
client.setCallback(callback);
delay(1500);
}
void loop()
{
if (!client.connected()) {
mqttReConnect();
}
client.loop();
delay(100);
}
Here a video with the working prototype in action
The source code is available in my github account.
Pomodoro with ESP32. One “The Melee – Side by side” project
Last weekend there was a great event called The Melee – Side by side (Many thanks to @ojoven and @diversius).
The event was one kind of Hackathon where a group of people meet together one day, to share our side projects and to work together (yes. We also have a lunch and beers also :). The format of the event is just a copy of the event that our colleagues from Bilbao called “El ComitĂ©“.
@ibaiimaz spoke about one project to create one collaborative pomodoro where the people of one team can share their status and see the status of the rest of the team. When I heard pomodoro and status I immediately thought in one servo moving a flag and some LEDs turning on and off. We had a project. @penniath and @tatai also joined us. We also had a team.
We had a project and we also had a deadline. We must show a working prototype at the end of the day. That means that we didn’t have too many time. First we decided the mockup of the project, reducing the initial scope (more ambitious) to fit it within our time slot. We discuss intensely for 10 minutes and finally we describe an ultra detailed blueprint. That’s the full blueprint of the project:
It was time to start working.
@penniath and @tatai worked in the Backend. It must be the responsible of the pomodoro timers, listen to MQTT events and create an API for the frontend. The backend also must provide a WebSockets interface to allow real time events within the frontend. They decided to use node and socket.io for the WebSockets. You can see the source code here.
@ibaiimaz started with the frontend. He decided to create an Angular web application listening to socket.io events to show the status of the pomodoro. You can see the source code here.
Finaly I worked with the hardware. I created a prototype with one ESP32, two RGB LEDs, one button, one servo and a couple of resistors.
That’s the source code.
#include <WiFi.h>
#include <PubSubClient.h>
int redPin_g = 19;
int greenPin_g = 17;
int bluePin_g = 18;
int redPin_i = 21;
int greenPin_i = 2;
int bluePin_i = 4;
#define SERVO_PIN 16
const int buttonPin = 15;
int buttonState = 0;
int channel = 1;
int hz = 50;
int depth = 16;
const char* ssid = "SSID";
const char* password = "password";
const char* server = "192.168.1.105";
const char* topic = "/pomodoro/+";
const char* clientName = "com.gonzalo123.esp32";
WiFiClient wifiClient;
PubSubClient client(wifiClient);
void wifiConnect() {
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print("*");
}
Serial.print("WiFi connected: ");
Serial.println(WiFi.localIP());
}
void mqttReConnect() {
while (!client.connected()) {
Serial.print("Attempting MQTT connection...");
if (client.connect(clientName)) {
Serial.println("connected");
client.subscribe(topic);
} else {
Serial.print("failed, rc=");
Serial.print(client.state());
Serial.println(" try again in 5 seconds");
delay(5000);
}
}
}
void callback(char* topic, byte* payload, unsigned int length) {
Serial.print("Message arrived [");
Serial.print(topic);
String data;
for (int i = 0; i < length; i++) {
data += (char)payload[i];
}
int value = data.toInt();
if (strcmp(topic, "/pomodoro/gonzalo") == 0) {
Serial.print("[gonzalo]");
switch (value) {
case 1:
ledcWrite(1, 3400);
setColor_g(0, 255, 0);
break;
case 2:
setColor_g(255, 0, 0);
break;
case 3:
ledcWrite(1, 6400);
setColor_g(0, 0, 255);
break;
}
} else {
Serial.print("[ibai]");
switch (value) {
case 1:
setColor_i(0, 255, 0);
break;
case 2:
setColor_i(255, 0, 0);
break;
case 3:
setColor_i(0, 0, 255); // green
break;
}
}
Serial.print("] value:");
Serial.println(data);
}
void setup()
{
Serial.begin(115200);
pinMode(buttonPin, INPUT_PULLUP);
pinMode(redPin_g, OUTPUT);
pinMode(greenPin_g, OUTPUT);
pinMode(bluePin_g, OUTPUT);
pinMode(redPin_i, OUTPUT);
pinMode(greenPin_i, OUTPUT);
pinMode(bluePin_i, OUTPUT);
ledcSetup(channel, hz, depth);
ledcAttachPin(SERVO_PIN, channel);
wifiConnect();
client.setServer(server, 1883);
client.setCallback(callback);
delay(1500);
}
void mqttEmit(String topic, String value)
{
client.publish((char*) topic.c_str(), (char*) value.c_str());
}
void loop()
{
if (!client.connected()) {
mqttReConnect();
}
client.loop();
buttonState = digitalRead(buttonPin);
if (buttonState == HIGH) {
mqttEmit("/start/gonzalo", (String) "3");
}
delay(200);
}
void setColor_i(int red, int green, int blue)
{
digitalWrite(redPin_i, red);
digitalWrite(greenPin_i, green);
digitalWrite(bluePin_i, blue);
}
void setColor_g(int red, int green, int blue)
{
digitalWrite(redPin_g, red);
digitalWrite(greenPin_g, green);
digitalWrite(bluePin_g, blue);
}
The MQTT server (a mosquitto server) was initially running in my laptop but as well as I had one Raspberry Pi Zero also in my bag we decided to user the Pi Zero as a server and run mosquitto MQTT server with Raspbian. Everything is better with a Raspberry Pi. @tatai helped me to set up the server.
Here you can see the prototype in action
That’s the kind of side projects that I normally create alone but definitely it’s more fun to do it with other colleagues even it I need to wake up early one Saturday morning.
Source code of ESP32 here.
Playing with Ionic, Lumen, Firebase, Google maps, Raspberry Pi and background geolocation
I wanna do a simple pet project. The idea is to build a mobile application. This application will track my GPS location and send this information to a Firebase database. I’ve never play with Firebase and I want to learn a little bit. With this information I will build a simple web application hosted in my Raspberry Pi. This web application will show a Google map with my last location. I will put this web application in my TV and anyone in my house will see where I am every time.
That’s the idea. I want a MVP. First the mobile application. I will use ionic framework. I’m big fan of ionic.
The mobile application is very simple. It only has a toggle to activate-deactivate the background geolocation (sometimes I don’t want to be tracked :).
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-header>
<ion-toolbar [color]="toolbarColor">
<ion-title>{{title}}</ion-title>
<ion-buttons end>
<ion-toggle color="light"
checked="{{isBgEnabled}}"
(ionChange)="changeWorkingStatus($event)">
</ion-toggle>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
</ion-content>
And the controller:
import {Component} from '@angular/core';
import {Platform} from 'ionic-angular';
import {LocationTracker} from "../../providers/location-tracker/location-tracker";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public status: string = localStorage.getItem('status') || "-";
public title: string = "";
public isBgEnabled: boolean = false;
public toolbarColor: string;
constructor(platform: Platform,
public locationTracker: LocationTracker) {
platform.ready().then(() => {
if (localStorage.getItem('isBgEnabled') === 'on') {
this.isBgEnabled = true;
this.title = "Working ...";
this.toolbarColor = 'secondary';
} else {
this.isBgEnabled = false;
this.title = "Idle";
this.toolbarColor = 'light';
}
});
}
public changeWorkingStatus(event) {
if (event.checked) {
localStorage.setItem('isBgEnabled', "on");
this.title = "Working ...";
this.toolbarColor = 'secondary';
this.locationTracker.startTracking();
} else {
localStorage.setItem('isBgEnabled', "off");
this.title = "Idle";
this.toolbarColor = 'light';
this.locationTracker.stopTracking();
}
}
}
As you can see, the toggle button will activate-deactivate the background geolocation and it also changes de background color of the toolbar.
For background geolocation I will use one cordova plugin available as ionic native plugin
Here you can see read a very nice article explaining how to use the plugin with ionic. As the article explains I’ve created a provider
import {Injectable, NgZone} from '@angular/core';
import {BackgroundGeolocation} from '@ionic-native/background-geolocation';
import {CONF} from "../conf/conf";
@Injectable()
export class LocationTracker {
constructor(public zone: NgZone,
private backgroundGeolocation: BackgroundGeolocation) {
}
showAppSettings() {
return this.backgroundGeolocation.showAppSettings();
}
startTracking() {
this.startBackgroundGeolocation();
}
stopTracking() {
this.backgroundGeolocation.stop();
}
private startBackgroundGeolocation() {
this.backgroundGeolocation.configure(CONF.BG_GPS);
this.backgroundGeolocation.start();
}
}
The idea of the plugin is send a POST request to a url with the gps data in the body of the request. So, I will create a web api server to handle this request. I will use my Raspberry Pi3. to serve the application. I will create a simple PHP/Lumen application. This application will handle the POST request of the mobile application and also will serve a html page with the map (using google maps).
Mobile requests will be authenticated with a token in the header and web application will use a basic http authentication. Because of that I will create two middlewares to handle the the different ways to authenticate.
<?php
require __DIR__ . '/../vendor/autoload.php';
use App\Http\Middleware;
use App\Model\Gps;
use Illuminate\Contracts\Debug\ExceptionHandler;
use Illuminate\Http\Request;
use Laravel\Lumen\Application;
use Laravel\Lumen\Routing\Router;
(new Dotenv\Dotenv(__DIR__ . '/../env/'))->load();
$app = new Application(__DIR__ . '/..');
$app->singleton(ExceptionHandler::class, App\Exceptions\Handler::class);
$app->routeMiddleware([
'auth' => Middleware\AuthMiddleware::class,
'basic' => Middleware\BasicAuthMiddleware::class,
]);
$app->router->group(['middleware' => 'auth', 'prefix' => '/locator'], function (Router $route) {
$route->post('/gps', function (Gps $gps, Request $request) {
$requestData = $request->all();
foreach ($requestData as $poi) {
$gps->persistsData([
'date' => date('YmdHis'),
'serverTime' => time(),
'time' => $poi['time'],
'latitude' => $poi['latitude'],
'longitude' => $poi['longitude'],
'accuracy' => $poi['accuracy'],
'speed' => $poi['speed'],
'altitude' => $poi['altitude'],
'locationProvider' => $poi['locationProvider'],
]);
}
return 'OK';
});
});
return $app;
As we can see the route /locator/gps will handle the post request. I’ve created a model to persists gps data in the firebase database:
<?php
namespace App\Model;
use Kreait\Firebase\Factory;
use Kreait\Firebase\ServiceAccount;
class Gps
{
private $database;
private const FIREBASE_CONF = __DIR__ . '/../../conf/firebase.json';
public function __construct()
{
$serviceAccount = ServiceAccount::fromJsonFile(self::FIREBASE_CONF);
$firebase = (new Factory)
->withServiceAccount($serviceAccount)
->create();
$this->database = $firebase->getDatabase();
}
public function getLast()
{
$value = $this->database->getReference('gps/poi')
->orderByKey()
->limitToLast(1)
->getValue();
$out = array_values($value)[0];
$out['formatedDate'] = \DateTimeImmutable::createFromFormat('YmdHis', $out['date'])->format('d/m/Y H:i:s');
return $out;
}
public function persistsData(array $data)
{
return $this->database
->getReference('gps/poi')
->push($data);
}
}
The project is almost finished. Now we only need to create the google map.
That’s the api
<?php
$app->router->group(['middleware' => 'basic', 'prefix' => '/map'], function (Router $route) {
$route->get('/', function (Gps $gps) {
return view("index", $gps->getLast());
});
$route->get('/last', function (Gps $gps) {
return $gps->getLast();
});
});
And the HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Locator</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var lastDate;
var DELAY = 60;
function drawMap(lat, long, text) {
var CENTER = {lat: lat, lng: long};
var contentString = '<div id="content">' + text + '</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: CENTER,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: CENTER,
map: map
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
infowindow.open(map, marker);
}
function initMap() {
lastDate = '{{ $formatedDate }}';
drawMap({{ $latitude }}, {{ $longitude }}, lastDate);
}
setInterval(function () {
fetch('/map/last', {credentials: "same-origin"}).then(function (response) {
response.json().then(function (data) {
if (lastDate !== data.formatedDate) {
drawMap(data.latitude, data.longitude, data.formatedDate);
}
});
});
}, DELAY * 1000);
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=my_google_maps_key&callback=initMap">
</script>
</body>
</html>
And that’s all just enough for a weekend. Source code is available in my github account
Handling Amazon SNS messages with PHP, Lumen and CloudWatch
This days I’m involve with Amazon’s AWS and since I am migrating my backends to Lumen I’m going to play a little bit with AWS and Lumen. Today I want to create a simple Lumen server to handle SNS notifications. One end-point to listen to SNS and another one to emit notifications. I also want to register logs within CloudWatch. Let’s start.
First the Lumen server.
use Laravel\Lumen\Application;
require __DIR__ . '/../vendor/autoload.php';
(new Dotenv\Dotenv(__DIR__ . "/../env"))->load();
$app = new Application();
$app->register(App\Providers\LogServiceProvider::class);
$app->register(App\Providers\AwsServiceProvider::class);
$app->group(['namespace' => 'App\Http\Controllers'], function (Application $app) {
$app->get("/push", "SnsController@push");
$app->post("/read", "SnsController@read");
});
$app->run();
As we can see there’s a route to push notifications and another one to read messages.
To work with SNS I will create a simple service provider
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Aws\Sns\SnsClient;
class AwsServiceProvider extends ServiceProvider
{
public function register()
{
$awsCredentials = [
'region' => getenv('AWS_REGION'),
'version' => getenv('AWS_VERSION'),
'credentials' => [
'key' => getenv('AWS_CREDENTIALS_KEY'),
'secret' => getenv('AWS_CREDENTIALS_SECRET'),
],
];
$this->app->instance(SnsClient::class, new SnsClient($awsCredentials));
}
}
Now We can create the routes in SnsController. Sns has a confirmation mechanism to validate endpoints. It’s well explained here
namespace App\Http\Controllers;
use Aws\Sns\SnsClient;
use Illuminate\Http\Request;
use Laravel\Lumen\Routing\Controller;
use Monolog\Logger;
class SnsController extends Controller
{
private $request;
private $logger;
public function __construct(Request $request, Logger $logger)
{
$this->request = $request;
$this->logger = $logger;
}
public function push(SnsClient $snsClient)
{
$snsClient->publish([
'TopicArn' => getenv('AWS_SNS_TOPIC1'),
'Message' => 'hi',
'Subject' => 'Subject',
]);
return ['push'];
}
public function read(SnsClient $snsClient)
{
$data = $this->request->json()->all();
if ($this->request->headers->get('X-Amz-Sns-Message-Type') == 'SubscriptionConfirmation') {
$this->logger->notice("sns:confirmSubscription");
$snsClient->confirmSubscription([
'TopicArn' => getenv('AWS_SNS_TOPIC1'),
'Token' => $data['Token'],
]);
} else {
$this->logger->warn("read", [
'Subject' => $data['Subject'],
'Message' => $data['Message'],
'Timestamp' => $data['Timestamp'],
]);
}
return "OK";
}
}
Finally I want to use CloudWatch so I will configure Monolog with another service provider. It’s also well explained here:
namespace App\Providers;
use Aws\CloudWatchLogs\CloudWatchLogsClient;
use Illuminate\Support\ServiceProvider;
use Maxbanton\Cwh\Handler\CloudWatch;
use Monolog\Formatter\LineFormatter;
use Monolog\Logger;
class LogServiceProvider extends ServiceProvider
{
public function register()
{
$awsCredentials = [
'region' => getenv('AWS_REGION'),
'version' => getenv('AWS_VERSION'),
'credentials' => [
'key' => getenv('AWS_CREDENTIALS_KEY'),
'secret' => getenv('AWS_CREDENTIALS_SECRET'),
],
];
$cwClient = new CloudWatchLogsClient($awsCredentials);
$cwRetentionDays = getenv('CW_RETENTIONDAYS');
$cwGroupName = getenv('CW_GROUPNAME');
$cwStreamNameInstance = getenv('CW_STREAMNAMEINSTANCE');
$loggerName = getenv('CF_LOGGERNAME');
$logger = new Logger($loggerName);
$handler = new CloudWatch($cwClient, $cwGroupName, $cwStreamNameInstance, $cwRetentionDays);
$handler->setFormatter(new LineFormatter(null, null, false, true));
$logger->pushHandler($handler);
$this->app->instance(Logger::class, $logger);
}
}
Debugging those kind of webhooks with a EC2 instance sometimes is a bit hard. But we can easily expose our local webserver to internet with ngrok.
We only need to start our local server
php -S 0.0.0.0:8080 -t www
And create a tunnel wiht ngrok
ngrok http 8080
And that’s up. Lumen and SNS up and running.
Code available in my github
Authenticate OpenUI5 applications and Lumen backends with Amazon Cognito and JWT
Today I want to create an UI5/OpenUI5 boilerplate that plays with Lumen backends. Simple, isn’t it? We only need to create a Lumen API server and connect our OpenUI5 application with this API server. But today I also want to create a Login also. The typical user/password input form. I don’t want to build it from scratch (a user database, oauth provider or something like that). Since this days I’m involved with Amazon AWS projects I want to try Amazon Cognito.
Cognito has a great javaScript SDK. In fact we can do all the authentication flow (create users, validate passwords, change password, multifactor authentication, …) with Cognito. To create this project first I’ve create the following steps within Amazon AWS Cognito Console: Create a user pool with required attributes (email only in this example), without MFA and only allow administrators to create users. I’ve also created a App client inside this pool, so I’ve got a UserPoolId and a ClientId.
Let’s start with the OpenUI5 application. I’ve created an small application with one route called “home”. To handle the login process I will work in Component.js init function. The idea is check the cognito session. If there’s an active one (that’s means a Json Web Token stored in the local storage) we’ll display to “home” route and if there isn’t we’ll show login one.
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"app/model/models",
"app/model/cognito"
], function (UIComponent, Device, models, cognito) {
"use strict";
return UIComponent.extend("app.Component", {
metadata: {
manifest: "json"
},
init: function () {
UIComponent.prototype.init.apply(this, arguments);
this.setModel(models.createDeviceModel(), "device");
this.getRouter().initialize();
var targets = this.getTargets();
cognito.hasSession(function (err) {
if (err) {
targets.display("login");
return;
}
targets.display("home");
});
},
/* *** */
});
}
);
To encapsulate the cognito operations I’ve create a model called cognito.js. It’s not perfect, but it allows me to abstract cognito stuff in the OpenUI5 application.
sap.ui.define([
"app/conf/env"
], function (env) {
"use strict";
AWSCognito.config.region = env.region;
var poolData = {
UserPoolId: env.UserPoolId,
ClientId: env.ClientId
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
var jwt;
var cognito = {
getJwt: function () {
return jwt;
},
hasSession: function (cbk) {
var cognitoUser = cognito.getCurrentUser();
if (cognitoUser != null) {
cognitoUser.getSession(function (err, session) {
if (err) {
cbk(err);
return;
}
if (session.isValid()) {
jwt = session.idToken.getJwtToken();
cbk(false, session)
} else {
cbk(true);
}
});
} else {
cbk(true);
}
},
getCurrentUser: function () {
return userPool.getCurrentUser();
},
signOut: function () {
var currentUser = cognito.getCurrentUser();
if (currentUser) {
currentUser.signOut()
}
},
getUsername: function () {
var currentUser = cognito.getCurrentUser();
return (currentUser) ? currentUser.username : undefined;
},
getUserData: function (user) {
return {
Username: user,
Pool: userPool
};
},
getCognitoUser: function (user) {
return new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(cognito.getUserData(user));
},
authenticateUser: function (user, pass, cbk) {
var authenticationData = {
Username: user,
Password: pass
};
var authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData);
var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(cognito.getUserData(user));
cognitoUser.authenticateUser(authenticationDetails, cbk);
return cognitoUser;
}
};
return cognito;
}
);
The login route has the following xml view:
<core:View
xmlns:core="sap.ui.core"
xmlns:f="sap.ui.layout.form"
xmlns="sap.m"
controllerName="app.controller.Login"
>
<Image class="bg"></Image>
<VBox class="sapUiSmallMargin loginForm">
<f:SimpleForm visible="{= ${/flow} === 'login' }">
<f:toolbar>
<Toolbar>
<Title text="{i18n>Login_Title}" level="H4" titleStyle="H4"/>
</Toolbar>
</f:toolbar>
<f:content>
<Label text="{i18n>Login_user}"/>
<Input placeholder="{i18n>Login_userPlaceholder}" value="{/user}"/>
<Label text="{i18n>Login_pass}"/>
<Input type="Password" placeholder="{i18n>Login_passPlaceholder}" value="{/pass}"/>
<Button type="Accept" text="{i18n>OK}" press="loginPressHandle"/>
</f:content>
</f:SimpleForm>
<f:SimpleForm visible="{= ${/flow} === 'PasswordReset' }">
<f:toolbar>
<Toolbar>
<Title text="{i18n>Login_PasswordReset}" level="H4" titleStyle="H4"/>
</Toolbar>
</f:toolbar>
<f:content>
<Label text="{i18n>Login_verificationCode}"/>
<Input type="Number" placeholder="{i18n>Login_verificationCodePlaceholder}" value="{/verificationCode}"/>
<Label text="{i18n>Login_newpass}"/>
<Input type="Password" placeholder="{i18n>Login_newpassPlaceholder}" value="{/newPass}"/>
<Button type="Accept" text="{i18n>OK}" press="newPassVerificationPressHandle"/>
</f:content>
</f:SimpleForm>
<f:SimpleForm visible="{= ${/flow} === 'newPasswordRequired' }">
<f:toolbar>
<Toolbar>
<Title text="{i18n>Login_PasswordReset}" level="H4" titleStyle="H4"/>
</Toolbar>
</f:toolbar>
<f:content>
<Label text="{i18n>Login_newpass}"/>
<Input type="Password" placeholder="{i18n>Login_newpassPlaceholder}" value="{/newPass}"/>
<Button type="Accept" text="{i18n>OK}" press="newPassPressHandle"/>
</f:content>
</f:SimpleForm>
</VBox>
</core:View>
It has three different stages: “login”, “PasswordReset” and “newPasswordRequired”
“login” is the main one. In this stage the user can input his login credentials. If credentials are OK then we’ll display home route.
The first time a user log in in the application with the password provided by the administrator, Cognito will force to change the password. Then We’ll show newPasswordRequired flow. I’m not going to explain each step. We developers prefer code than texts. That’s the code:
sap.ui.define([
"app/controller/BaseController",
"sap/ui/model/json/JSONModel",
"sap/m/MessageToast",
"app/model/cognito"
], function (BaseController, JSONModel, MessageToast, cognito) {
"use strict";
var cognitoUser;
return BaseController.extend("app.controller.Login", {
model: {
user: "",
pass: "",
flow: "login",
verificationCode: undefined,
newPass: undefined
},
onInit: function () {
this.getView().setModel(new JSONModel(this.model));
},
newPassPressHandle: function () {
var that = this;
var targets = this.getOwnerComponent().getTargets();
var attributesData = {};
sap.ui.core.BusyIndicator.show();
cognitoUser.completeNewPasswordChallenge(this.model.newPass, attributesData, {
onFailure: function (err) {
sap.ui.core.BusyIndicator.hide();
MessageToast.show(err.message);
},
onSuccess: function (data) {
sap.ui.core.BusyIndicator.hide();
that.getModel().setProperty("/flow", "login");
targets.display("home");
}
})
},
newPassVerificationPressHandle: function () {
var that = this;
var targets = this.getOwnerComponent().getTargets();
sap.ui.core.BusyIndicator.show();
cognito.getCognitoUser(this.model.user).confirmPassword(this.model.verificationCode, this.model.newPass, {
onFailure: function (err) {
sap.ui.core.BusyIndicator.hide();
MessageToast.show(err);
},
onSuccess: function (result) {
sap.ui.core.BusyIndicator.hide();
that.getModel().setProperty("/flow", "PasswordReset");
targets.display("home");
}
});
},
loginPressHandle: function () {
var that = this;
var targets = this.getOwnerComponent().getTargets();
sap.ui.core.BusyIndicator.show();
cognitoUser = cognito.authenticateUser(this.model.user, this.model.pass, {
onSuccess: function (result) {
sap.ui.core.BusyIndicator.hide();
targets.display("home");
},
onFailure: function (err) {
sap.ui.core.BusyIndicator.hide();
switch (err.code) {
case "PasswordResetRequiredException":
that.getModel().setProperty("/flow", "PasswordReset");
break;
default:
MessageToast.show(err.message);
}
},
newPasswordRequired: function (userAttributes, requiredAttributes) {
sap.ui.core.BusyIndicator.hide();
that.getModel().setProperty("/flow", "newPasswordRequired");
}
});
}
});
}
);
The home route is the main one. It asumes that there’s an active Cognito session enabled.
<mvc:View
controllerName="app.controller.Home"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:semantic="sap.m.semantic">
<semantic:FullscreenPage
id="page"
semanticRuleSet="Optimized"
showNavButton="false"
title="{i18n>loggedUser}: {/userName}">
<semantic:content>
<Panel width="auto" class="sapUiResponsiveMargin" accessibleRole="Region">
<headerToolbar>
<Toolbar height="3rem">
<Title text="Title"/>
</Toolbar>
</headerToolbar>
<content>
<Text text="Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat"/>
<Button text="{i18n>Hello}" icon="sap-icon://hello-world" press="helloPress"/>
</content>
</Panel>
</semantic:content>
<semantic:customFooterContent>
<Button text="{i18n>LogOff}" icon="sap-icon://visits" press="onLogOffPress"/>
</semantic:customFooterContent>
</semantic:FullscreenPage>
</mvc:View>
It shows the Cognito login name. It alos has a simple logff button and also one button that calls to the backend.
sap.ui.define([
"app/controller/BaseController",
"sap/ui/model/json/JSONModel",
"sap/m/MessageToast",
"app/model/cognito",
"app/model/api"
], function (BaseController, JSONModel, MessageToast, cognito, api) {
"use strict";
return BaseController.extend("app.controller.Home", {
model: {
userName: ""
},
onInit: function () {
this.model.userName = cognito.getUsername();
this.getView().setModel(new JSONModel(this.model));
},
helloPress: function () {
api.get("/api/hi", {}, function (data) {
MessageToast.show("Hello user " + data.userInfo.username + " (" + data.userInfo.email + ")");
});
},
onLogOffPress: function () {
cognito.signOut();
this.getOwnerComponent().getTargets().display("login");
}
});
}
);
To handle ajax requests I’ve create an api model. This model injects jwt inside every request.
sap.ui.define([
"sap/m/MessageToast",
"app/model/cognito"
], function (MessageToast, cognito) {
"use strict";
var backend = "";
return {
get: function (uri, params, cb) {
params = params || {};
params._jwt = cognito.getJwt();
sap.ui.core.BusyIndicator.show(1000);
jQuery.ajax({
type: "GET",
contentType: "application/json",
data: params,
url: backend + uri,
cache: false,
dataType: "json",
async: true,
success: function (data, textStatus, jqXHR) {
sap.ui.core.BusyIndicator.hide();
cb(data);
},
error: function (data, textStatus, jqXHR) {
sap.ui.core.BusyIndicator.hide();
switch (data.status) {
case 403: // Forbidden
MessageToast.show('Auth error');
break;
default:
console.log('Error', data);
}
}
});
}
};
});
That’s the frontend. Now it’s time to backend. Our Backend will be a simple Lumen server.
use App\Http\Middleware;
use Illuminate\Contracts\Debug\ExceptionHandler;
use Laravel\Lumen\Application;
(new Dotenv\Dotenv(__DIR__ . "/../env/"))->load();
$app = new Application();
$app->singleton(ExceptionHandler::class, App\Exceptions\Handler::class);
$app->routeMiddleware([
'cognito' => Middleware\AuthCognitoMiddleware::class,
]);
$app->register(App\Providers\RedisServiceProvider::class);
$app->group([
'middleware' => 'cognito',
'namespace' => 'App\Http\Controllers',
], function (Application $app) {
$app->get("/api/hi", "DemoController@hi");
});
$app->run();
As you can see I’ve created a middelware to handle the authentication. This middleware will check the jwt provided by the frontend. We will use “spomky-labs/jose” library to validate the token.
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
use Jose\Factory\JWKFactory;
use Jose\Loader;
use Monolog\Logger;
use Symfony\Component\Cache\Adapter\RedisAdapter;
class AuthCognitoMiddleware
{
public function handle(Request $request, Closure $next)
{
try {
$payload = $this->getPayload($request->get('_jwt'), $this->getJwtWebKeys());
config([
"userInfo" => [
'username' => $payload['cognito:username'],
'email' => $payload['email'],
],
]);
} catch (\Exception $e) {
$log = app(Logger::class);
$log->alert($e->getMessage());
return response('Token Error', 403);
}
return $next($request);
}
private function getJwtWebKeys()
{
$url = sprintf(
'https://cognito-idp.%s.amazonaws.com/%s/.well-known/jwks.json',
getenv('AWS_REGION'),
getenv('AWS_COGNITO_POOL')
);
$cacheKey = sprintf('JWKFactory-Content-%s', hash('sha512', $url));
$cache = app(RedisAdapter::class);
$item = $cache->getItem($cacheKey);
if (!$item->isHit()) {
$item->set($this->getContent($url));
$item->expiresAfter((int)getenv("TTL_JWK_CACHE"));
$cache->save($item);
}
return JWKFactory::createFromJKU($url, false, $cache);
}
private function getPayload($accessToken, $jwtWebKeys)
{
$loader = new Loader();
$jwt = $loader->loadAndVerifySignatureUsingKeySet($accessToken, $jwtWebKeys, ['RS256']);
$payload = $jwt->getPayload();
return $payload;
}
private function getContent($url)
{
$ch = curl_init();
curl_setopt_array($ch, [
CURLOPT_RETURNTRANSFER => true,
CURLOPT_URL => $url,
CURLOPT_SSL_VERIFYPEER => true,
CURLOPT_SSL_VERIFYHOST => 2,
]);
$content = curl_exec($ch);
curl_close($ch);
return $content;
}
}
To validate jwt Cognito tokens we need to obtain JwtWebKeys from this url
https://cognito-idp.my_aws_region.amazonaws.com/my_aws_cognito_pool_id/.well-known/jwks.json
That means that we need to fetch this url within every backend request, and that’s not cool. spomky-labs/jose allows us to use a cache to avoid fetch the request again and again. This cache is an instance of something that implementes the interface Psr\Cache\CacheItemPoolInterface. I’m not going to create a Cache from scratch. I’m not crazy. I’ll use symfony/cache here with a Redis adapter
And basically that’s all. Full application in my github
Tracking blue objects with Opencv and Python
Opencv is an amazing Open Source Computer Vision Library. Today We’re going to hack a little bit with it. The idea is track blue objects. Why blue objects? Maybe because I’ve got a couple of them in my desk. Let’s start.
The idea is simple. We’ll create a mask. Our mask is a black and white image where each blue pixel will turn into a white one and the rest of pixels will be black.
Original frame:
Masked one:
Now we only need put a bounding rectangle around the blue object.
import cv2
import numpy
cam = cv2.VideoCapture(0)
kernel = numpy.ones((5 ,5), numpy.uint8)
while (True):
ret, frame = cam.read()
rangomax = numpy.array([255, 50, 50]) # B, G, R
rangomin = numpy.array([51, 0, 0])
mask = cv2.inRange(frame, rangomin, rangomax)
# reduce the noise
opening = cv2.morphologyEx(mask, cv2.MORPH_OPEN, kernel)
x, y, w, h = cv2.boundingRect(opening)
cv2.rectangle(frame, (x, y), (x+w, y + h), (0, 255, 0), 3)
cv2.circle(frame, (x+w/2, y+h/2), 5, (0, 0, 255), -1)
cv2.imshow('camera', frame)
k = cv2.waitKey(1) & 0xFF
if k == 27:
break
And that’s all. A nice hack for a Sunday morning
Source code in my github account
Playing with IoT, MQTT, Arduino and Raspberry Pi. Building a dashboard with OpenUI5
I’ve been playing with MQTT in previous posts. Today I want to build a simple dashboard. Basically because I’ve got a 3.5inch display for my Raspberry Py and I want to use it. The idea is set up my Rasperry Pi as a web kiosk and display the MQTT variables in real time using websockets. Let’s start.
Set up Raspberry Pi as a web kiosk is pretty straightforward. You only need to follow instructions detailed here. Now we will prepare the MQTT inputs. Today we’re going to reuse one example of previous post. A potentiometer controlled by a nodemcu microcontroller connected to our MQTT server via Wifi.
We also will build another circuit using a Arduino board and a ethernet Shield.
With this circuit we’ll register the temperature (using a LM35 temperature sensor), a photo resistor (CDS) to show the light level and a relay to switch on/off a light bulb. The Idea of the circuit is emit the temperature and light level to mosquitto mqtt server and listen to switch status form mqtt server to fire the relay. That’s the arduino code
#include <SPI.h>
#include <Ethernet.h>
#include <PubSubClient.h>
const int photocellPin = 1;
const int tempPin = 0;
const int relayPin = 9;
bool lightStatus = false;
const byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
// mqtt configuration
const char* mqttServer = "192.168.1.104";
const int mqttPort = 1883;
const String topicLightChange = "sensors/arduino/light/change";
const String topicLightStatus = "sensors/arduino/light/status";
const String topicTemp = "sensors/arduino/temperature/room1";
const String topicLight = "sensors/arduino/light/room1";
const char* clientName = "com.gonzalo123.arduino";
EthernetClient ethClient;
PubSubClient client(ethClient);
void mqttReConnect() {
while (!client.connected()) {
Serial.print("Attempting MQTT connection...");
if (client.connect(clientName)) {
Serial.println("connected");
client.subscribe(topicLightChange.c_str());
} else {
Serial.print("failed, rc=");
Serial.print(client.state());
Serial.println(" try again in 5 seconds");
delay(5000);
}
}
}
void mqttEmit(String topic, String value) {
if (client.publish((char*) topic.c_str(), (char*) value.c_str())) {
//Serial.print("Publish ok (topic: ");
//Serial.print(topic);
//Serial.print(", value: ");
//Serial.print(value);
//Serial.println(")");
} else {
Serial.println("Publish failed");
}
}
void callback(char* topic, byte* payload, unsigned int length) {
Serial.print("Message arrived [");
Serial.print(topic);
Serial.print("] payload: ");
String data;
for (int i = 0; i < length; i++) {
data += (char)payload[i];
}
if (strcmp(topic, topicLightChange.c_str()) == 0) {
lightStatus = (data == "1") ? true : false;
Serial.print(data);
}
Serial.println("");
}
void setup()
{
Serial.begin(9600);
pinMode(relayPin, OUTPUT);
digitalWrite(relayPin, LOW);
client.setServer(mqttServer, mqttPort);
client.setCallback(callback);
if (Ethernet.begin(mac) == 0) {
Serial.println("Failed to configure Ethernet using DHCP");
}
delay(1500);
}
void loop()
{
if (!client.connected()) {
mqttReConnect();
}
client.loop();
if (lightStatus == 1) {
digitalWrite(relayPin, HIGH);
} else {
digitalWrite(relayPin, LOW);
}
mqttEmit(topicLightStatus, lightStatus ? "1" : "0");
mqttEmit(topicLight, (String) analogRead(photocellPin));
mqttEmit(topicTemp, (String) ((5.0 * analogRead(tempPin) * 100.0) / 1024.0));
delay(500);
}
Now we’re going to work with dashboard. This days I’m working with OpenUI5 within various projects and because of that we’ll use this library to build the dashboard. we’ll build something like this:
Basically it’s a view
<mvc:View
controllerName="gonzalo123.controller.Controller"
height="100%"
width="100%"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
>
<IconTabBar expandable="false"
stretchContentHeight="true"
class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter icon="sap-icon://bbyd-dashboard">
<TileContainer>
<StandardTile
icon="sap-icon://explorer"
number="{/potentiometer}"
numberUnit="%"
title="{i18n>potentiometer}"/>
<StandardTile
icon="sap-icon://temperature"
number="{/temperature}"
numberUnit="ÂşC"
title="{i18n>temperature}"/>
<StandardTile
icon="sap-icon://lightbulb"
number="{/light/level}"
title="{i18n>light}"/>
</TileContainer>
</IconTabFilter>
<IconTabFilter icon="sap-icon://lightbulb">
<Page showHeader="false"
enableScrolling="true">
<List>
<InputListItem label="{i18n>light}">
<Switch state="{/light/status}"
change="onStatusChange"/>
</InputListItem>
</List>
</Page>
</IconTabFilter>
</items>
</IconTabBar>
</mvc:View>
And a controller:
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
"sap/ui/model/resource/ResourceModel",
'gonzalo123/model/io'
],
function (jQuery, Controller, JSONModel, ResourceModel, io) {
"use strict";
io.connect("//192.168.1.104:3000/");
return Controller.extend("gonzalo123.controller.Controller", {
model: new JSONModel({
light: {
status: false,
level: undefined
},
potentiometer: undefined,
temperature: undefined
}),
onInit: function () {
var model = this.model;
io.on('mqtt', function (data) {
switch (data.topic) {
case 'sensors/arduino/temperature/room1':
model.setProperty("/temperature", data.payload);
break;
case 'sensors/arduino/light/room1':
model.setProperty("/light/level", data.payload);
break;
case 'sensors/nodemcu/potentiometer/room1':
model.setProperty("/potentiometer", data.payload);
break;
case 'sensors/arduino/light/status':
model.setProperty("/light/status", data.payload == "1");
break;
}
});
this.getView().setModel(this.model);
var i18nModel = new ResourceModel({
bundleName: "gonzalo123.i18n.i18n"
});
this.getView().setModel(i18nModel, "i18n");
},
onStatusChange: function () {
io.emit('mqtt', {
topic: 'sensors/arduino/light/change',
payload: (this.getView().getModel().oData.light.status ? "1" : "0")
});
}
});
}
);
The real time part we need a gateway between websockets and mqtt data. We’ll use socket.io. Here is the server:
var mqtt = require('mqtt');
var mqttClient = mqtt.connect('mqtt://192.168.1.104');
var httpServer = require('http').createServer();
io = require('socket.io')(httpServer, {origins: '*:*'});
io.on('connection', function(client){
client.on('mqtt', function(msg){
console.log("ws", msg);
mqttClient.publish(msg.topic, msg.payload.toString());
})
});
mqttClient.on('connect', function () {
mqttClient.subscribe('sensors/#');
});
mqttClient.on('message', function (topic, message) {
console.log("mqtt", topic, message.toString());
io.sockets.emit('mqtt', {
topic: topic,
payload: message.toString()
});
});
httpServer.listen(3000, '0.0.0.0');
Hardware
- 1 Arduino Uno
- 1 NodeMCU (V3)
- 1 potentiometer
- 1 Servo (SG90)
- 1 Raspberry Pi 3
- 3.5inch Display Hat for Raspberry Pi
- LM35
- CDS
- pull down resistor
Source code available in my github account
PHP application in SAP Cloud Platform. With PostgreSQL, Redis and Cloud Foundry
Keeping on with my study of SAP’s cloud platform (SCP) and Cloud Foundry today I’m going to build a simple PHP application. This application serves a simple Bootstrap landing page. The application uses a HTTP basic authentication. The credentials are validated against a PostgreSQL database. It also has a API to retrieve the localtimestamp from database server (just for play with a database server). I also want to play with Redis in the cloud too, so the API request will have a Time To Live (ttl) of 5 seconds. I will use a Redis service to do it.
First we create our services in cloud foundry. I’m using the free layer of SAP cloud foundry for this example. I’m not going to explain here how to do that. It’s pretty straightforward within SAP’s coopkit. Time ago I played with IBM’s cloud foundry too. I remember that it was also very simple too.
Then we create our application (.bp-config/options.json)
{
"WEBDIR": "www",
"LIBDIR": "lib",
"PHP_VERSION": "{PHP_70_LATEST}",
"PHP_MODULES": ["cli"],
"WEB_SERVER": "nginx"
}
If we want to use our PostgreSQL and Redis services with our PHP Appliacation we need to connect those services to our application. This operation can be done also with SAP’s Cockpit.
Now is the turn of PHP application. I normally use Silex framework within my backends, but now there’s a problem: Silex is dead. I feel a little bit sad but I’m not going to cry. It’s just a tool and there’re another ones. I’ve got my example with Silex but, as an exercise, I will also do it with Lumen.
Let’s start with Silex. If you’re familiar with Silex micro framework (or another microframework, indeed) you can see that there isn’t anything especial.
use Symfony\Component\HttpKernel\Exception\HttpException;
use Symfony\Component\HttpFoundation\Request;
use Silex\Provider\TwigServiceProvider;
use Silex\Application;
use Predis\Client;
if (php_sapi_name() == "cli-server") {
// when I start the server my local machine vendors are in a different path
require __DIR__ . '/../vendor/autoload.php';
// and also I mock VCAP_SERVICES env
$env = file_get_contents(__DIR__ . "/../conf/vcap_services.json");
$debug = true;
} else {
require 'vendor/autoload.php';
$env = $_ENV["VCAP_SERVICES"];
$debug = false;
}
$vcapServices = json_decode($env, true);
$app = new Application(['debug' => $debug, 'ttl' => 5]);
$app->register(new TwigServiceProvider(), [
'twig.path' => __DIR__ . '/../views',
]);
$app['db'] = function () use ($vcapServices) {
$dbConf = $vcapServices['postgresql'][0]['credentials'];
$dsn = "pgsql:dbname={$dbConf['dbname']};host={$dbConf['hostname']};port={$dbConf['port']}";
$dbh = new PDO($dsn, $dbConf['username'], $dbConf['password']);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$dbh->setAttribute(PDO::ATTR_CASE, PDO::CASE_UPPER);
$dbh->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
return $dbh;
};
$app['redis'] = function () use ($vcapServices) {
$redisConf = $vcapServices['redis'][0]['credentials'];
return new Client([
'scheme' => 'tcp',
'host' => $redisConf['hostname'],
'port' => $redisConf['port'],
'password' => $redisConf['password'],
]);
};
$app->get("/", function (Application $app) {
return $app['twig']->render('index.html.twig', [
'user' => $app['user'],
'ttl' => $app['ttl'],
]);
});
$app->get("/timestamp", function (Application $app) {
if (!$app['redis']->exists('timestamp')) {
$stmt = $app['db']->prepare('SELECT localtimestamp');
$stmt->execute();
$app['redis']->set('timestamp', $stmt->fetch()['TIMESTAMP'], 'EX', $app['ttl']);
}
return $app->json($app['redis']->get('timestamp'));
});
$app->before(function (Request $request) use ($app) {
$username = $request->server->get('PHP_AUTH_USER', false);
$password = $request->server->get('PHP_AUTH_PW');
$stmt = $app['db']->prepare('SELECT name, surname FROM public.user WHERE username=:USER AND pass=:PASS');
$stmt->execute(['USER' => $username, 'PASS' => md5($password)]);
$row = $stmt->fetch();
if ($row !== false) {
$app['user'] = $row;
} else {
header("WWW-Authenticate: Basic realm='RIS'");
throw new HttpException(401, 'Please sign in.');
}
}, 0);
$app->run();
Maybe the only especial thing is the way that autoloader is done. We are initializing autoloader in two different ways. One way when the application is run in the cloud and another one when the application is run locally with PHP’s built-in server. That’s because vendors are located in different paths depending on which environment the application lives in. When Cloud Foundry connect services to appliations it injects environment variables with the service configuration (credentials, host, …). It uses VCAP_SERVICES env var.
I use the built-in server to run the application locally. When I’m doing that I don’t have VCAP_SERVICES variable. And also my services information are different than when I’m running the application in the cloud. Maybe it’s better with an environment variable but I’m using this trick:
if (php_sapi_name() == "cli-server") {
// I'm runing the application locally
} else {
// I'm in the cloud
}
So when I’m locally I mock VCAP_SERVICES with my local values and also, for example, configure Silex application in debug mode.
Sometimes I want to run my application locally but I want to use the cloud services. I cannot connect directly to those services, but we can do it over ssh through our connected application. For example If our PostgreSQL application is running on 10.11.241.0:48825 we can map this remote port (in a private network) to our local port with this command.
cf ssh -N -T -L 48825:10.11.241.0:48825 silex
You can see more information about this command here.
Now we can use pgAdmin, for example, in our local machine to connect to cloud server.
We can do the same with Redis
cf ssh -N -T -L 54266:10.11.241.9:54266 silex
And basically that’s all. Now we’ll do the same with Lumen. The idea is create the same application with Lumen instead of Silex. It’s a dummy application but it cover task that I normally use. I also will re-use the Redis and PostgreSQL services from the previous project.
use App\Http\Middleware;
use Laravel\Lumen\Application;
use Laravel\Lumen\Routing\Router;
use Predis\Client;
if (php_sapi_name() == "cli-server") {
require __DIR__ . '/../vendor/autoload.php';
$env = 'dev';
} else {
require 'vendor/autoload.php';
$env = 'prod';
}
(new Dotenv\Dotenv(__DIR__ . "/../env/{$env}"))->load();
$app = new Application();
$app->routeMiddleware([
'auth' => Middleware\AuthMiddleware::class,
]);
$app->register(App\Providers\VcapServiceProvider::class);
$app->register(App\Providers\StdoutLogServiceProvider::class);
$app->register(App\Providers\DbServiceProvider::class);
$app->register(App\Providers\RedisServiceProvider::class);
$app->router->group(['middleware' => 'auth'], function (Router $router) {
$router->get("/", function () {
return view("index", [
'user' => config("user"),
'ttl' => getenv('TTL'),
]);
});
$router->get("/timestamp", function (Client $redis, PDO $conn) {
if (!$redis->exists('timestamp')) {
$stmt = $conn->prepare('SELECT localtimestamp');
$stmt->execute();
$redis->set('timestamp', $stmt->fetch()['TIMESTAMP'], 'EX', getenv('TTL'));
}
return response()->json($redis->get('timestamp'));
});
});
$app->run();
I’ve created four servicer providers. One for handle Database connections (I don’t like ORMs)
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use PDO;
class DbServiceProvider extends ServiceProvider
{
public function register()
{
}
public function boot()
{
$vcapServices = app('vcap_services');
$dbConf = $vcapServices['postgresql'][0]['credentials'];
$dsn = "pgsql:dbname={$dbConf['dbname']};host={$dbConf['hostname']};port={$dbConf['port']}";
$dbh = new PDO($dsn, $dbConf['username'], $dbConf['password']);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$dbh->setAttribute(PDO::ATTR_CASE, PDO::CASE_UPPER);
$dbh->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
$this->app->bind(PDO::class, function ($app) use ($dbh) {
return $dbh;
});
}
}
Another one for Redis. I need to study a little bit more Lumen. I know that Lumen has a built-in tool to work with Redis.
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Predis\Client;
class RedisServiceProvider extends ServiceProvider
{
public function register()
{
}
public function boot()
{
$vcapServices = app('vcap_services');
$redisConf = $vcapServices['redis'][0]['credentials'];
$redis = new Client([
'scheme' => 'tcp',
'host' => $redisConf['hostname'],
'port' => $redisConf['port'],
'password' => $redisConf['password'],
]);
$this->app->bind(Client::class, function ($app) use ($redis) {
return $redis;
});
}
}
Another one to tell monolog to send logs to Stdout
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Monolog;
class StdoutLogServiceProvider extends ServiceProvider
{
public function register()
{
app()->configureMonologUsing(function (Monolog\Logger $monolog) {
return $monolog->pushHandler(new \Monolog\Handler\ErrorLogHandler());
});
}
}
And the last one to work with Vcap environment variables. Probably I need to integrate it with dotenv files
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
class VcapServiceProvider extends ServiceProvider
{
public function register()
{
if (php_sapi_name() == "cli-server") {
$env = file_get_contents(__DIR__ . "/../../conf/vcap_services.json");
} else {
$env = $_ENV["VCAP_SERVICES"];
}
$vcapServices = json_decode($env, true);
$this->app->bind('vcap_services', function ($app) use ($vcapServices) {
return $vcapServices;
});
}
}
We also need to handle authentication (http basic auth in this case) so we’ll create a simple middleware
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
use PDO;
class AuthMiddleware
{
public function handle(Request $request, Closure $next)
{
$user = $request->getUser();
$pass = $request->getPassword();
$db = app(PDO::class);
$stmt = $db->prepare('SELECT name, surname FROM public.user WHERE username=:USER AND pass=:PASS');
$stmt->execute(['USER' => $user, 'PASS' => md5($pass)]);
$row = $stmt->fetch();
if ($row !== false) {
config(['user' => $row]);
} else {
$headers = ['WWW-Authenticate' => 'Basic'];
return response('Admin Login', 401, $headers);
}
return $next($request);
}
}
In summary: Lumen is cool. The interface is very similar to Silex. I can swap my mind from thinking in Silex to thinking in Lumen easily. Blade instead Twig: no problem. Service providers are very similar. Routing is almost the same and Middlewares are much better. Nowadays backend is a commodity for me so I don’t want to spend to much time working on it. I want something that just work. Lumen looks like that.
