Envoyer des mails en javascript avec nodemailer

Pour un projet perso qui tourne sur un stack MEAN (Mongo, Express, Angular et NodeJS), j’ai eu besoin de notifier des utilisateurs en leur envoyant un mail.

J’ai donc trouvé plusieurs librairies qui font le boulot, mais j’ai beaucoup accroché avec nodemailer qui pour moi est la plus propre et simple d’utilisation. Et d’ailleurs, avec plus de 5000 stars et 70 contributeurs sur Github ça va, c’est assez stable 🙂

Installation

Ajout de nodemailer au projet (le —save pour ajouter a dépendance au package.json)

[javascript]npm install nodemailer —save [/javascript]

Autorisation Gmail

Pour Gmail, et surement les autres aussi, il faut configurer son compte en « Bas niveau de sécurité » pour autoriser une application externe  à lire/envoyer des emails.

(pour ceux qui ne souhaitent pas baisser le niveau de sécurité, il existe d’autres alternatives)

Baisser le niveau de sécurité : https://www.google.com/settings/security/lesssecureapps

Envoyer un email

Au début du fichier, au moment des import, on ajoute une dépendance à nodemailer :

[javascript]var nodemailer = require(‘nodemailer’);[/javascript]

On crée ensuite la variable « transporter » qui contient les options de connexion et de transport pour l’envoi des emails (qu’on réutilisera à chaque envoi de mail)

[javascript]var transporter = nodemailer.createTransport(‘smtps://user%40gmail.com:password@smtp.gmail.com’);[/javascript]

Ensuite on construit l’objet JSON « mailOptions » qui contient les différents champs du mail (les symboles unicodes sont supportés!).

[javascript]var mailOptions = {
  from: ‘Joey Bronner" <mon@email.com>’,
to: ‘yourfriend@email.com, yourotherfriend@email.com’,
  subject: ‘Bonjour’,
  text: ‘Hello world’,
  html: ‘<b>Hello world</b>’
};[/javascript]

Quatre paramètres sont obligatoires et d’autres sont facultatifs:

  • from
  • to
  • subject
  • text / html

Dernière étape, l’envoi du mail!

[javascript]transporter.sendMail(mailOptions, function(error, info){
if (error) {
console.log(error);
}
console.log(‘Message sent: ‘ + info.response);
});
[/javascript]

Pleins d’options (pièces jointes, templates etc…) sont disponibles, donc si vous avez besoin d’envoyer des mails en JS, pensez à nodemailer!

Plus d’informations sur le repository Github : https://github.com/nodemailer/nodemailer

DevDocs pour regrouper et unifier toutes les dev docs de vos APIs et langages favoris

DEVDOC

Pour les utilisateurs OS X, il existe Dash. Pour ceux qui sont sous Windows/Linux il existe l’équivalent Zeal et pour ceux qui ne veulent pas installer de logiciel lourd pour la doc, il existe DevDocs que je présente dans cet article.

En quelques mots, DevDocs est un moteur de recherche pour documentation technique. Il référence plus de 70 APIs donc pas d’inquiétude, que vous soyez développeur web, mobile, backend etc… vous trouverez votre bonheur 🙂

  • AngularJS
  • Bower
  • React
  • Ruby
  • Javascript
  • Python
  • D3
  • PHP
  • C / C++
  • etc…

Les avantages

  • Interface unifiée
  • Outil de recherche intelligent
  • Rapide
  • Plus de 70 APIs/frameworks/libs disponibles
  • Mode Light/Dark

L’inconvénient

Je ne vois qu’un seul et il concerne le ‘mode offline’ puisque les documentations sauvées sont persistées dans le cache du navigateur.

Quand on développe on aime bien vider le cache pour tester un rendu sur une base propre… et ça peut donc poser problème. Si on veut utiliser ces docs hors-ligne il faut penser à les re-télécharger au cas où le cache aurait été cleané avant.

Pour info, c’est un outil fait par Thibaut Courouble, son blog : http://thibaut.me/

Pour résumer, DevDocs c’est simple, c’est propre et c’est super utile pour mes trajets en train où le WiFi n’est malheureusement pas présent.

(Merci Justin pour les liens)

Plante connectée avec capteur d’humidité, écran digital et LED d’avertissement

Il y a quelques temps j’avais commandé un kit de démarrage Arduino qui contient un Arduino UNO et une quinzaine de capteurs et périphériques (température, humidité, RFID, bluetooth, LEDs, résistances, etc…) enfin bon, le kit complet pour démarrer et commencer quelques projets sympa. J’ai donc décidé d’utiliser ce qui me restait pour faire…

Le projet

Ce projet concerne donc la mise en place d’un capteur d’humidité, relié à une LED et un écran 4 digits / 7 segments. Cet ensemble permet donc d’avoir une « plante connectée » qui affiche le taux d’humidité de la terre sur l’écran et qui allume la LED rouge, synonyme d’avertissement si la terre est trop sèche : il faut arroser!

A propos de l’écran

La difficulté la plus importante que j’ai rencontré a été pour le branchement et la programmation de l’écran. Après avoir essayé plusieurs librairies sans succès, j’ai laissé tomber et je me suis tourné vers un bout de code chinois que j’ai trouvé au fin fond des résultats Google : http://www.cnblogs.com/kaixuanpisces/p/4542176.html. C’est un peu brouillon mais pour moi c’est le seul qui a fonctionné.

Connection de l’écran 4 digits / 7 segments : SH5461AS

screen_4digits_7segments_connection_SH5461AS

Premier et dernier projet que j’ai fait avec cet écran, il utilise 12 (DOUZE!) pins et c’est une vraie galère pour le faire fonctionner. Sinon, je n’utilise aucune librairie externe puisque toute la gestion de l’écran (allumage/extinction d’un segment, réinitialisation complet, etc…) est codée ci-dessous.

Le code

[javascript]
int y[8] = {1,2,3,4,5,6,7,8};
int d[4] = {12,11,10,9};

// Digital screen map
int digital[10][8] = {
{6,y[0],y[1],y[2],y[3],y[4],y[5]}, // 0
{2,y[1],y[2]}, // 1
{5,y[0],y[1],y[3],y[4],y[6]}, // 2
{5,y[0],y[1],y[2],y[3],y[6]}, // 3
{4,y[1],y[2],y[5],y[6]}, // 4
{5,y[0],y[2],y[3],y[5],y[6]}, // 5
{6,y[0],y[2],y[3],y[4],y[5],y[6]}, // 6
{3,y[0],y[1],y[2]}, // 7
{7,y[0],y[1],y[2],y[3],y[4],y[5],y[6]}, // 8
{6,y[0],y[1],y[2],y[3],y[5],y[6]} // 9
};

long n = 1;
int x = 100;
double del = 200000;

void setup()
{
// Serial init on 9600 baud
Serial.begin(9600);

pinMode(A0, INPUT); // Moisture sensor
pinMode(13, OUTPUT); // Led

// Initialize segments
for (int i=0;i&lt;8;i++) {
pinMode(y[i],OUTPUT);
}

// Initialize digits
for(int i=0;i&lt;4;i++) {
pinMode(d[i],OUTPUT);
}
}

void loop()
{
// Retrieve moisture sensor value
int SensorValue = analogRead(A0);
String sValue = String(SensorValue);

// Split sensor value to write specific number on digital screen
int first = sValue.substring(0, 1).toInt();
int secon = sValue.substring(1, 2).toInt();
int third = sValue.substring(2, 3).toInt();

// State: DRY
if (SensorValue &lt; 1000 &amp;&amp; SensorValue &gt;= 600) {
digitalWrite(13, HIGH);
}

// State: HUMID
if (SensorValue &lt; 600 &amp;&amp; SensorValue &gt;= 370) {
digitalWrite(13, LOW);
}

// State: WATER
if (SensorValue &lt; 370) {
digitalWrite(13, LOW);
}

// Write digital screen numbers
clearLEDs();
pickDigit(2);
showDigital(first);
delayMicroseconds(del);

clearLEDs();
pickDigit(3);
showDigital(secon);
delayMicroseconds(del);

clearLEDs();
pickDigit(4);
showDigital(third);
delayMicroseconds(del);
}

/*
* This function clears all LEDs
*/
void clearLEDs(){
for(int i=0;i&lt;8;i++) {
digitalWrite(y[i],LOW);
}
}

/*
* Select a digit (1 to 4)
*/
void pickDigit(int x){
for(int i=0;i&lt;4;i++) { digitalWrite(d[i],HIGH); } if(x&gt;4) {
x=4;
}
digitalWrite(d[x-1],LOW);
}

/*
* Switch ON specific segment to display the exected number
*/
void showDigital(int x){
for(int i=1;i&lt;=digital[x][0];i++) {
digitalWrite(digital[x][i], HIGH);
}
}
[/javascript]

Pour ceux qui souhaitent contribuer ou télécharger la dernière version du code (celui-ci ne sera pas mis à jour), voilà le repository Github : https://github.com/joeybronner/moisturedigitalplant

Javascript : Savoir si deux élements du DOM se chevauchent ou se superposent

Les méthodes isOverlapping() et isInside() ont déjà le premier avantage d’être en pur javascript. Leurs fonctionnalités sont donc de déterminer si deux éléments se chevauchent ou se superposent. C’est très pratique lorsque qu’on veut gérer la superposition des labels pour masquer ceux qui sont partiellement visibles par exemple.

getBoundingClientRect

La méthode getBoundingClientRect() est appliquée sur chacun des éléments du DOM afin de déterminer leurs propriétés (en pixels) :

  • left
  • top
  • right
  • bottom

Ces valeurs sont propres au viewport (zone de visualisation) du client sur lequel cette fonction est exécutée.

isOverlapping

[javascript]function isOverlapping (elem1, elem2) {
var rect1 = elem1.getBoundingClientRect();
var rect2 = elem2.getBoundingClientRect();

return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
}[/javascript]

La fonction isOverlapping() renvoie donc true si elem1 et elem2 se chevauchent.

isInside

[javascript]function isOverlapping (elem1, elem2) {
var rect1 = elem1.getBoundingClientRect();
var rect2 = elem2.getBoundingClientRect();

return (
((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
);
}[/javascript]

La fonction isInside() renvoie donc true si elem1 est entièrement à l’intérieur de elem2 (ou inversement…).

Activer le compteur FPS dans votre navigateur Chrome

A quoi ça sert ?

Cet outil, intégré au navigateur Google Chrome, permet de connaître le nombre d’images par secondes (FPS ou Frame Per Seconds) affichées par un site web : ce qui équivaut à la latence… Il est mis à jour en temps réel et s’affiche en sur-impression d’un site ce qui vous permet de mesurer le niveau de latence via 3 indicateurs :

  • Frame rate (nombre d’images par secondes)
  • GPU (Graphical Process Unit) Raster
  • GPU (Graphical Process Unit) Memory

Les deux indicateurs liés au GPU permettent de voir le niveau de saturation de la carte graphique. Elle l’est rarement puisque les performances des cartes de nos jours nous permettent de faire de nombreux calculs en parallèle (largement suffisant pour nos sites webs)

Activation

  1. Tapez chrome://flags/ dans votre barre d’adresse
  2. Recherchez l’extension FPS counter
  3. Activez le flag en cliquant sur “Enable”
  4. Relancez Chrome

Et voilà le travail, le compteur FPS s’affiche en haut à droite de chacune de vos pages (voir ci-dessous):

Capture d’écran 2016-03-08 à 07.29.16

Rien ne s’affiche ?

  1. Ouvrir le Chrome Dev Tools
  2. Options > More tools > Rendering Settings
  3. Activer le flag “Show FPS meter”

Capture d’écran 2016-03-08 à 07.34.25