I. Objectif

1. Créer le projet Firebase pour héberger la base de données, les fonctions et la page web
2. Déployer les fonctions d'authentification/commandes de volets sur Firebase
3. Déployer la page web sur Firebase pour contrôler les volets depuis un navigateur
4. Créer le projet sur Google Actions permettant d'ajouter notre application "Controle des volets" à Google Home
5. Déployer sur le Raspberry Pi une petite application qui va lire la base de données Firebase afin d'envoyer les commandes à l'Arduino
6. Associer l'application "Controle des volets" à Google Home

II. Matériel requis

• Arduino connecté au transmetteur 433.42 MHz préparé dans l'article précédent
• Raspberry Pi Disponible sur Amazon

III. Procédure

III. 1. Branchement de l'Arduino sur le Raspberry Pi

ls /dev/tty*

III. 2. Création d'un projet sur Firebase

III. 3. Déploiement du projet sur Firebase

III. 3. 1. Initialisation du projet

Le déploiement sur Firebase va se faire depuis un projet Node.js . Pour cela, téléchargez puis installez Node.js en version LTS sur ce site : https://nodejs.org

REM Remplacez le chemin ci-dessous par le dossier où vous souhaitez placer le projet
cd "C:\CHEMIN_VERS_LE_DOSSIER_DU_PROJET"

REM Installe le client pour créer un projet Firebase
npm install -g firebase-tools

REM Une fois la commande tapée, saisissez le login/mot de passe de votre compte Google
firebase login

REM Créé le projet firebase
firebase init

III. 3. 2. Fonctions

'use strict';

const functions = require('firebase-functions');
const {smarthome} = require('actions-on-google');
const util = require('util');
const admin = require('firebase-admin');
admin.initializeApp();
const firebaseRef = admin.database().ref('/');

exports.fakeauth = functions.https.onRequest((request, response) => {
	const responseurl = util.format('%s?code=%s&state=%s', decodeURIComponent(request.query.redirect_uri), 'xxxxxx', request.query.state);
	console.log(responseurl);
	return response.redirect(responseurl);
});

exports.faketoken = functions.https.onRequest((request, response) => {
	const grantType = request.query.grant_type ? request.query.grant_type : request.body.grant_type;
	const secondsInDay = 86400; // 60 * 60 * 24
	const HTTP_STATUS_OK = 200;
	console.log(`Grant type ${grantType}`);

	let obj;
	if (grantType === 'authorization_code') {
		obj = {
			token_type: 'bearer',
			access_token: '123access',
			refresh_token: '123refresh',
			expires_in: secondsInDay,
		};
	} else if (grantType === 'refresh_token') {
		obj = {
			token_type: 'bearer',
			access_token: '123access',
			expires_in: secondsInDay,
		};
	}
	response.status(HTTP_STATUS_OK).json(obj);
});

const app = smarthome({
	debug: true,
	key: '<api-key>',
});

app.onSync((body) => {
	console.log(body);

	return {
		requestId: body.requestId,
		payload: {
			agentUserId: '123',
			devices: [
			{
				id: 'volet-chambre',
				type: 'action.devices.types.BLINDS',
				traits: [
					'action.devices.traits.OpenClose',
				],
				name: {
					defaultNames: ['Volet Chambre'],
					name: 'Volet chambre',
					nicknames: ['Volet de la chambre'],
				},
				willReportState: true,
				attributes: {
					openDirection: ['UP', 'DOWN']
				},
				deviceInfo: {
					manufacturer: 'SOMFY',
					model: 'somfy-blinds',
					hwVersion: '1.0.0',
					swVersion: '1.0.0',
				}
			},
			{
				id: 'volet-salon-gauche',
				type: 'action.devices.types.BLINDS',
				traits: [
					'action.devices.traits.OpenClose',
				],
				name: {
					defaultNames: ['Volet Salon Gauche'],
					name: 'Volet salon gauche',
					nicknames: ['Volet gauche du salon'],
				},
				willReportState: true,
				attributes: {
					openDirection: ['UP', 'DOWN']
				},
				deviceInfo: {
					manufacturer: 'SOMFY',
					model: 'somfy-blinds',
					hwVersion: '1.0.0',
					swVersion: '1.0.0',
				}
			},
			{
				id: 'volet-salon-milieu',
				type: 'action.devices.types.BLINDS',
				traits: [
					'action.devices.traits.OpenClose',
				],
				name: {
					defaultNames: ['Volet Salon Milieu'],
					name: 'Volet salon milieu',
					nicknames: ['Volet milieu du salon'],
				},
				willReportState: true,
				attributes: {
					openDirection: ['UP', 'DOWN']
				},
				deviceInfo: {
					manufacturer: 'SOMFY',
					model: 'somfy-blinds',
					hwVersion: '1.0.0',
					swVersion: '1.0.0',
				}
			},
			{
				id: 'volet-salon-droit',
				type: 'action.devices.types.BLINDS',
				traits: [
					'action.devices.traits.OpenClose',
				],
				name: {
					defaultNames: ['Volet Salon Droit'],
					name: 'Volet salon droit',
					nicknames: ['Volet droit du salon'],
				},
				willReportState: true,
				attributes: {
					openDirection: ['UP', 'DOWN']
				},
				deviceInfo: {
					manufacturer: 'SOMFY',
					model: 'somfy-blinds',
					hwVersion: '1.0.0',
					swVersion: '1.0.0',
				}
			}]
		}
	};
});

const queryFirebase = (deviceId) => firebaseRef.child(deviceId).once('value')
.then((snapshot) => {
	const snapshotVal = snapshot.val();
	return {
		openDirection: snapshotVal.State.openDirection,
		openPercent: snapshotVal.State.percentageOpen
	};
});

const queryDevice = (deviceId) => queryFirebase(deviceId).then((data) => ({
	openDirection: data.openDirection,
	openPercent: data.openPercent
}));

app.onQuery((body) => {
	console.log(body);

	const {requestId} = body;
	const payload = {
		devices: {},
	};
	const queryPromises = [];
	for (const input of body.inputs) {
		for (const device of input.payload.devices) {
			const deviceId = device.id;
			queryPromises.push(
				queryDevice(deviceId)
				.then((data) => {
					payload.devices[deviceId] = {
						openState : [data]
					};
					return null;
				})
			);
		}
	}
	return Promise.all(queryPromises).then((values) => ({
			requestId: requestId,
			payload: payload,
		})
	);
});

app.onExecute((body) => {
	console.log(body);

	const {requestId} = body;
	const payload = {
		commands: [{
			ids: [],
			status: 'SUCCESS',
			states: {
				online: true,
			}
		}]
	};
	for (const input of body.inputs) {
		for (const command of input.payload.commands) {
			for (const device of command.devices) {
				const deviceId = device.id;
				payload.commands[0].ids.push(deviceId);
				for (const execution of command.execution) {
					const execCommand = execution.command;
					const params = execution.params;
					
					switch (execCommand) {
						case 'action.devices.commands.OpenClose':
							if (params.hasOwnProperty('openDirection')) {
								firebaseRef.child(deviceId).child('State').update({
									openDirection: params.openDirection
								});
								payload.commands[0].states.openDirection = params.openDirection;
							}
							if (params.hasOwnProperty('openPercent')) {
								firebaseRef.child(deviceId).child('State').update({
									percentageOpen: params.openPercent
								});
								payload.commands[0].states.openPercent = params.openPercent;
							}
						break;
					}
				}
			}
		}
	}
	return {
		requestId: requestId,
		payload: payload,
	};
});

exports.smarthome = functions.https.onRequest(app);

exports.requestsync = functions.https.onRequest((request, response) => {
	console.info('Request SYNC for user 123');
	app.requestSync('123')
	.then((res) => {
		console.log('Request sync completed');
		response.json(res.data);
		return null;
	}).catch((err) => {
		console.error(err);
	});
});

exports.reportstate = functions.database.ref('{deviceId}').onWrite((event) => {
	console.info('Firebase write event triggered this cloud function');
});

• fakeauth : Simule une authentification OAuth.
• faketoken : Génère de faux token pour l'authentification OAuth.
• smarthome : Gère les commandes pour nos volets. Cette fonction retourne l'état des volets, envoie la commande aux volets, ...
• requestsync : Nous ne l'utiliserons pas dans le cas présent mais cette fonction permet de gérer l'ajout de nouveaux volets à notre Google Home sans devoir désassocier et réassocier l'application au Google Home.

III. 3. 3. Page web

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Volets</title>
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<style>
			h1 { font-size: 2.5rem; margin: 0 0 30px 0; }
			h2 { font-size: 1.5rem; }
			span.badge { border-radius: 2px; background-color: #26a69a; color: #fff; }
			
			input[type=range]::-webkit-slider-thumb { background-color: #ab47bc; }
			input[type=range]::-moz-range-thumb { background-color: #ab47bc; }
			input[type=range]::-ms-thumb { background-color: #ab47bc; }

			input[type=range] + .thumb { background-color: #dedede; }
			input[type=range] + .thumb.active .value { color: #ab47bc; }
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<form action="#">
					<div class="col s12 m4">
						<div class="card-panel grey lighten-3">
							<h1>Commandes unitaires</h1>
							<div id="volet-salon-gauche">
								<h2>Volet gauche du salon <span class="badge currentValue"></span></h2>
								<div class="row center-align">
									<div class="col s6">
										<a class="btn-move-blind btn-floating btn-large waves-effect waves-light" data-blind="volet-salon-gauche" data-percentage="100"><i class="material-icons left">arrow_upward</i>Monter</a>
									</div>
									<div class="col s6">
										<a class="btn-move-blind btn-floating btn-large waves-effect waves-light blue lighten-1" data-blind="volet-salon-gauche" data-percentage="0"><i class="material-icons left">arrow_downward</i>Descendre</a>
									</div>
								</div>
								<div class="row center-align">
									<div class="col s8 range-field">
										<input class="purple lighten-1" type="range" min="0" max="100" step="10" value="0" />
									</div>
									<div class="col s4">
										<a class="btn-validate-percentage btn-floating waves-effect waves-light purple lighten-1" data-blind="volet-salon-gauche"><i class="material-icons left">done</i>Valider</a>
									</div>
								</div>
							</div>
							<div id="volet-salon-milieu">
								<h2>Volet milieu du salon <span class="badge currentValue"></span></h2>
								<div class="row center-align">
									<div class="col s6">
										<a class="btn-move-blind btn-floating btn-large waves-effect waves-light" data-blind="volet-salon-milieu" data-percentage="100"><i class="material-icons left">arrow_upward</i>Monter</a>
									</div>
									<div class="col s6">
										<a class="btn-move-blind btn-floating btn-large waves-effect waves-light blue lighten-1" data-blind="volet-salon-milieu" data-percentage="0"><i class="material-icons left">arrow_downward</i>Descendre</a>
									</div>
								</div>
								<div class="row center-align">
									<div class="col s8 range-field">
										<input class="purple lighten-1" type="range" min="0" max="100" step="10" value="0" />
									</div>
									<div class="col s4">
										<a class="btn-validate-percentage btn-floating waves-effect waves-light purple lighten-1" data-blind="volet-salon-milieu"><i class="material-icons left">done</i>Valider</a>
									</div>
								</div>
							</div>
							<div id="volet-salon-droit">
								<h2>Volet droit du salon <span class="badge currentValue"></span></h2>
								<div class="row center-align">
									<div class="col s6">
										<a class="btn-move-blind btn-floating btn-large waves-effect waves-light" data-blind="volet-salon-droit" data-percentage="100"><i class="material-icons left">arrow_upward</i>Monter</a>
									</div>
									<div class="col s6">
										<a class="btn-move-blind btn-floating btn-large waves-effect waves-light blue lighten-1" data-blind="volet-salon-droit" data-percentage="0"><i class="material-icons left">arrow_downward</i>Descendre</a>
									</div>
								</div>
								<div class="row center-align">
									<div class="col s8 range-field">
										<input class="purple lighten-1" type="range" min="0" max="100" step="10" value="0" />
									</div>
									<div class="col s4">
										<a class="btn-validate-percentage btn-floating waves-effect waves-light purple lighten-1" data-blind="volet-salon-droit"><i class="material-icons left">done</i>Valider</a>
									</div>
								</div>
							</div>
							<div id="volet-chambre">
								<h2>Volet de la chambre <span class="badge currentValue"></span></h2>
								<div class="row center-align">
									<div class="col s6">
										<a class="btn-move-blind btn-floating btn-large waves-effect waves-light" data-blind="volet-chambre" data-percentage="100"><i class="material-icons left">arrow_upward</i>Monter</a>
									</div>
									<div class="col s6">
										<a class="btn-move-blind btn-floating btn-large waves-effect waves-light blue lighten-1" data-blind="volet-chambre" data-percentage="0"><i class="material-icons left">arrow_downward</i>Descendre</a>
									</div>
								</div>
								<div class="row center-align">
									<div class="col s8 range-field">
										<input class="purple lighten-1" type="range" min="0" max="100" step="10" value="0" />
									</div>
									<div class="col s4">
										<a class="btn-validate-percentage btn-floating waves-effect waves-light purple lighten-1" data-blind="volet-chambre"><i class="material-icons left">done</i>Valider</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col s12 m4">
						<div class="card-panel grey lighten-2">
							<h1>Volets du salon</h1>
							<div id="volets-salon">
								<div class="row center-align">
									<div class="col s6">
										<a class="btn-move-blind btn-floating btn-large waves-effect waves-light" data-blind="volet-salon-gauche,volet-salon-milieu,volet-salon-droit" data-percentage="100"><i class="material-icons left">arrow_upward</i>Monter</a>
									</div>
									<div class="col s6">
										<a class="btn-move-blind btn-floating btn-large waves-effect waves-light blue lighten-1" data-blind="volet-salon-gauche,volet-salon-milieu,volet-salon-droit" data-percentage="0"><i class="material-icons left">arrow_downward</i>Descendre</a>
									</div>
								</div>
								<div class="row center-align">
									<div class="col s8 range-field">
										<input class="purple lighten-1" type="range" min="0" max="100" step="10" value="0" />
									</div>
									<div class="col s4">
										<a class="btn-validate-percentage btn-floating waves-effect waves-light purple lighten-1" data-blind="volet-salon-gauche,volet-salon-milieu,volet-salon-droit"><i class="material-icons left">done</i>Valider</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col s12 m4">
						<div class="card-panel grey lighten-1">
							<h1>Tous les volets</h1>
							<div id="tous-volets">
								<div class="row center-align">
									<div class="col s6">
										<a class="btn-move-blind btn-floating btn-large waves-effect waves-light" data-blind="volet-salon-gauche,volet-salon-milieu,volet-salon-droit,volet-chambre" data-percentage="100"><i class="material-icons left">arrow_upward</i>Monter</a>
									</div>
									<div class="col s6">
										<a class="btn-move-blind btn-floating btn-large waves-effect waves-light blue lighten-1" data-blind="volet-salon-gauche,volet-salon-milieu,volet-salon-droit,volet-chambre" data-percentage="0"><i class="material-icons left">arrow_downward</i>Descendre</a>
									</div>
								</div>
								<div class="row center-align">
									<div class="col s8 range-field">
										<input class="purple lighten-1" type="range" min="0" max="100" step="10" value="0" />
									</div>
									<div class="col s4">
										<a class="btn-validate-percentage btn-floating waves-effect waves-light purple lighten-1" data-blind="volet-salon-gauche,volet-salon-milieu,volet-salon-droit,volet-chambre"><i class="material-icons left">done</i>Valider</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	
		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
		
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/loadingoverlay.min.js"></script>
		
		<script src="/__/firebase/4.8.1/firebase-app.js"></script>
		<script src="/__/firebase/4.8.1/firebase-auth.js"></script>
		<script src="/__/firebase/4.8.1/firebase-database.js"></script>
		<script src="/__/firebase/init.js"></script>
		
		<script>
			$(function() {
				//Affiche les valeurs actuelles des volets
				firebase.database().ref('/').on('value', function(snapshot) {
					jQuery.each(snapshot.val(), function(blind, blindSettings) {
						var divBlind = $('#' + blind);
						
						if (divBlind.length) {
							divBlind.find('.currentValue').text(blindSettings.State.percentageOpen);
							divBlind.find('.range-field').find('input').val(blindSettings.State.percentageOpen);
						}
					});
				});
				
				$('.btn-move-blind').on('click', function()
				{
					$.LoadingOverlay('show');
					
					var blind = $(this).data('blind');
					var blinds = blind.split(',');
					var percentage = $(this).data('percentage');
					
					let pkg = {
						percentageOpen: percentage
					};

					$.each(blinds, function(i, currentBlind) {
						firebase.database().ref('/').child(currentBlind).child('State').update(pkg);
					});
					
					$.LoadingOverlay('hide');
				});
				
				$('.btn-validate-percentage').on('click', function()
				{
					$.LoadingOverlay('show');
					
					var blind = $(this).data('blind');
					var blinds = blind.split(',');
					var percentage = parseInt($(this).closest('.row').find('input').val(), 10);
					
					let pkg = {
						percentageOpen: percentage
					};

					$.each(blinds, function(i, currentBlind) {
						firebase.database().ref('/').child(currentBlind).child('State').update(pkg);
					});
					
					$.LoadingOverlay('hide');
				});
			});
		</script>
	<body>
</html>

III. 3. 4. Déploiement

firebase deploy

III. 4. Création d'un projet sur Google Actions

• Invocation
  • Indiquer dans le champ "Display name" le nom souhaité pour notre service. Personnellement, je l'ai appelé "Volets".
• Actions
  • Indiquer dans le champ "Add fulfillment URL" l'URL de votre fonction sur Firebase qui va gérer vos smart actions. L'URL peut être obtenue en allant sur https://console.firebase.google.com, en cliquant sur votre projet puis sur Functions dans le menu de gauche. L'URL ressemble à https://**********.cloudfunctions.net/smarthome .
• Account linking
  • Dans "Account creation", choisir "No, I only want to allow account creation on my website"
  • Dans "Linkin type", choisir "OAuth" puis "Authorization code"
  • Dans "Client information", saisir ABC123 pour le Client ID et le Client secret puis les URLs de vos fonctions Firebase pour les champs "Authorization URL" et "Token URL". Ces URLs peuvent être obtenues en allant sur https://console.firebase.google.com, en cliquant sur votre projet puis sur Functions dans le menu de gauche. Les URLs ressemblent à https://**********.cloudfunctions.net/fakeauth et https://**********.cloudfunctions.net/faketoken .

III. 5. Installation de l'application de commande de l'Arduino sur le Raspberry Pi

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

npm init

• Nom du projet (Par défaut il s'agit du nom du dossier donc faire juste "Entrée")
• Version ("1.0.0" par défaut donc faire juste "Entrée")
• Description (Faire juste "Entrée" ou saisir une description du projet)
• Entry point ("index.js" par défaut donc faire juste "Entrée")
• test command (Faire juste "Entrée")
• git repository (Faire juste "Entrée")
• keywords (Faire juste "Entrée")
• author (Faire juste "Entrée" ou saisir votre nom)
• license (Faire juste "Entrée")

var firebase = require('firebase');
const SerialPort = require('serialport');
const Readline = require('@serialport/parser-readline');
const BlindDuration = 28000; //Durée en millisecondes pour ouvrir ou fermer entièrement un volet
 
const port = new SerialPort('/dev/ttyACM0', {
	baudRate: 115200
});
const parser = port.pipe(new Readline({ delimiter: '\r\n' }));
 
parser.on('data', function (data) {
	console.log('Data :', data);
});
 
firebase.initializeApp({
	'appName': 'Controle des volets',
	'serviceAccount': './service-account.json',
	'authDomain': '**********.firebaseapp.com',
	'databaseURL': 'https://**********.firebaseio.com/'
});
 
var firebaseRef = firebase.app().database().ref('/');
 
firebaseRef.child('volet-salon-gauche').on('value', (snapshot) => {
	manageNewValue(snapshot, 'volet-salon-gauche', 0);
});
 
firebaseRef.child('volet-salon-milieu').on('value', (snapshot) => {
	manageNewValue(snapshot, 'volet-salon-milieu', 1);
});
 
firebaseRef.child('volet-salon-droit').on('value', (snapshot) => {
	manageNewValue(snapshot, 'volet-salon-droit', 2);
});
 
firebaseRef.child('volet-chambre').on('value', (snapshot) => {
	manageNewValue(snapshot, 'volet-chambre', 3);
});

function manageNewValue(snapshot, blindName, blindID) {
	if (snapshot.exists()) {
		const snapshotVal = snapshot.val();
		const currentPercentage = snapshotVal.State.currentPercentage;
		const percentageOpen = snapshotVal.State.percentageOpen;
		
		if (currentPercentage != percentageOpen) {
			var duration = Math.abs(percentageOpen-currentPercentage) / 100 * BlindDuration;
 
			if (currentPercentage > percentageOpen) {
				executeCommand('d', blindID);
			} else {
				executeCommand('m', blindID);
			}
			
			if (percentageOpen != 100 && percentageOpen != 0)  {
				setTimeout(updateCurrentPercentage, duration, blindName, percentageOpen, 's', blindID);
			} else {
				setTimeout(updateCurrentPercentage, duration, blindName, percentageOpen, '', '');
			}
		}
	}
}

function executeCommand(command, blindID) {
	port.write(command + blindID);
}
 
function updateCurrentPercentage(device, value, command, blindID) {
	firebaseRef.child(device).child('State').update({
		currentPercentage: value
	});
	
	if (command) {
		executeCommand(command, blindID);
	}
}

npm install firebase
npm install serialport

sudo node index.js

sudo nano /etc/rc.local

sudo node /home/pi/volets/index.js &

III. 6. Association de l'application avec Google Home

IV. Utilisation

IV. 1. Page web

IV. 2. Contrôle par la voix

V. Sources

• Déploiement des fonctions Smart Home sur Firebase : https://codelabs.developers.google.com/codelabs/smarthome-washer/index.html