Un serveur d'application simple avec Node et Raspberry

Ce logiciel open source offert par Google et disponible sur GitHub facilite énormément la création d'un serveur local ou Internet. Il est décrit par les auteurs comme "Un moyen simple de réaliser des trucs web sur Raspberry Pi".

Google Coder est une version de Raspbian sur laquelle Node est préinstallé de même que le script serveur et une interface web pour le client.

Pour l'installer et créer votre serveur d'application, vous avez besoin de ceci:

Pour des montages électroniques, une interface au matériel est aussi nécessaire, vous pouvez utiliser par exemple:

Démarrage

Une fois la carte SD gravée, il suffit de l'insérer dans le Pi, le connecter à Internet et le mettre celui-ci en marche. Votre ordinateur client doit aussi être connecté à Internet.

Une demande de login et mot de passe sont affichés. Mais il n'est pas nécessaire de se loguer sur le serveur pour qu'il soit accessible aux clients. Si vous voulez cependant accéder directement au serveur, entre pi pour login et pour mot de passe celui que vous donnez à partir de l'interface client.

Quelque soit votre système, Linux, Windows, Mac, Android, vous pouvez directement vous connecter au Pi à partir d'un navigateur.

Si votre ordinateur a pour système Linux ou MacOS, tapez dans la barre d'URL du navigateur: 

http://coder.local/

Sur Windows, tapez l'IP qui est est affichée sur le serveur juste avant le login (l'IP dépend de votre matériel). 

http://192.168.xxx.xxx

Mettez l'URL en favoris et vous n'aurez plus jamais à rechercher cette IP! Vous pouvez aussi entrer l'IP sur Linux ou Mac. Vous pourriez également associer un domaine à cette IP grâce à un service de DNS.

Un message d'avertissement doit s'afficher indiquant que le site n'est pas sécurisé et vous invite à repartir aussi vite. Cela est prévu et Google vous demande d'ignorer l'avertissement. Cliquer sur le lien en bas de la page pour continuer sur le site.

Vous avez maintenant accès à une interface qui est une page Web envoyée par le Pi, qu'il soit dans la même pièce ou n'importe où dans le monde. Cette interface vous permet de choisir une application, ou d'écrire et ajouter votre propre application.

Accéder au serveur

Lorsque l'interface client s'affiche, il vous est demandé de créer un mot de passe pour ouvrir la session. Ce mot de passe est aussi utilisé pour accéder au serveur sur le Pi. Acceder au serveur n'est pas nécessaire pour réaliser une application, sauf pour y ajouter des programmes et modules.

Si le clavier est du type AZERTY, il est préférable de choisir des lettres qui ont la même position que sur le clavier QWERTY, car c'est ce dernier que reconnaît le Pi. Evitez notamment les lettres A et M. Vous devriez aussi imprimer un image d'un clavier QWERTY pour voir la correspondance.

Donc vous accédez au système coté serveur en tapant pi pour login et votre mot de passe client. Mais ensuite, il vous faut d'emblée configurer le système pour votre langue (normalement French), et votre clavier. Tapez sudo raspi-config, ou plus exactement sur clavier AZERTY rqspi)config pour accéder au programme de configuration. Allez ensuite à la ligne d'internationalisation et choississez votre language, puis le clavier et les étapes successives. Il faut rebooter le système pour que les changements soient effectifs.

Interface

L'interface est un groupe de tuiles colorées correspondant chacune à une application. En fait cela reprend l'idée de Tiloid, avec accès en ligne en plus. Tiloid utilise Node en backend et est une alternative libre à la Modern UI de Windows 8. Coder améliore encore cette idée. C'est entre autres un équivalent pour Raspberry à l'IDE Arduino.

Vous cliquez sur une tuile pour lancer une application, ou sur la tuile verte avec le signe "+" pour ajouter une nouvelle application. Le code est réparti sur plusieurs onglets comme le montrent les captures d'écran ci-dessous:

Coder coté client

Code coté client: On écrit la page de l'interface, avec code HTML, CSS et JavaScript

Coder coté serveur

Code coté serveur: on peut envoyer des images au serveur avec l'interface Media

Votre application est ainsi réalisée entièrement à distance et placée sur le serveur par Coder. En supprimant totalement l'accès coté serveur pour le programmeur, Coder rend l'installation la plus simple possible. On peut ainsi réaliser une application sur un ordinateur de bureau et l'utiliser sur un mobile pour des tâches de gestion de la maison ou d'aides à la productivité. Même une utilisation robotique est possible puisqu'on peut développer le code coté serveur avec l'onglet Node. Plus besoin de faire le sumo avec sudo et toutes ces commandes interminables.

Comment ajouter une application

Une des tuiles de l'interface, avec le symbole "+" pour nom, sert de point de départ à la réalisation d'une application.

Cela commence par la création d'une nouvelle tuile: on lui donne un nom et on choisit une couleur. On clicque ensuite sur "Create". Le nom que vous avez choisi apparait sur la barre de menu avec les différents onglets. La suite est évidente si vous avez des notions de HTML: créer la page, le code CSS et JavaScript. Cependant la façon de lier les éléments entre eux, et l'ajout d'images sont particuliers ici.

Pour ajouter une image, on clique sur l'icône représentant un dossier, et on sélectionne un fichier. La fenêtre Media s'ouvre alors pour présenter la liste des éléments que vous avez ajoutés. Dans votre code, vous ajoutez la balise suivante:

<img src="" />

Sélectionner d'abord une image s'il y en a plusieurs, puis dans le code HTML placez le curseur entre les deux guillemets, retournez à la fenêtre Media et cliquez sur le bouton "Paste to code". L'URL se trouve alors ajoutée dans la ligne précédente:

<img src="/static/apps/mon_application/media/image.jpg" />

"mon_application" est produit par Coder à partir du nom que vous avez choisi, dans notre exemple c'est "Mon Application".

Le code CSS, les scripts JavaScript, les images sont liés automatiquement par l'interface, vous n'avez pas besoin d'inclure de fichier dans le code HTML.

Ressources et informations