Créer une application native avec HTML CSS JS ET PHP !

Bonjour à tous,
Cela fait un bon moment que je bricole sur nodeJS car je trouve cette techno merveilleuse et pour moi elle fait vraiment partie de l’avenir du dev.
ça fait un bon moment que je cherchais à embarquer du PHP dans une application. Pourquoi faire ça me diriez vous ?
Sachant qu’avec node on peut tout faire, c’est vrai que c’est un peu bizzar. Mais le JS je n’aime pas trop ça et j’ai beaucoup de mal à laisser Laravel de côté…

Donc ça fait un petit moment que je cherche comment embarquer du PHP dans une application (un peu comme phpNigthRain) mais grâce à nodeJS.

Je pense avoir trouvé quelque chose d’intéressant.

Electron.io

Après mettre renseigné sur la technologie Atom.io, j’ai pu constater que celui-ci est développé sur electron.io.
Pour résumer, electron.io est construit avec nodeJS est permet faire une application grâce à HTML,CSS et JS.
Il exite aussi NW.js (node webkit) qui permet de faire la même chose mais j’ai trouvé plus de docs sur electron.

Bref.

Passons à la partie la plus cool, le code 🙂

Pour commencer j’ai télécharger electron.io pour ma version de mon OS (j’ai fait ça sur mac donc il s’agit de la version darwin),
le lien est ici -> https://github.com/atom/electron/releases

Voila ce qui s’affiche une fois l’application lancée.
on nous propose de lancer une application soit en faisant glisser le dossier de notre application dans la fenêtre d’electron ou de lancer une commande depuis le terminal.
On peux aussi faire en sorte lancer notre application par defaut, pour cela, il faut la placer dans le dossier /electron.app/Contents/Ressources/default_app.

Bon maintenant passons au mode barbu.

Intégrer php dans electron

Après avoir fouiller pas mal de module nodeJS permettant de créer un server php avec nodeJS, je suis tombé sur gulp-connect-php,
vous trouverez toute la doc sur le dépôt GitHub https://github.com/micahblu/gulp-connect-php.

Maintenant, rendez vous dans votre dossier de l’application que vous voulez créer.
puis lancer les commandes suivantes (en sudo si vous êtes sous MAC ou Linux):

touch main.js
touch index.php
npm install gulp-connect-php

Donc la on a téléchargé le module gulp-php-connect et créer un fichier main.js et un fichier index.php

ajoutez les lignes suivantes dans le main.js

var app     = require("app");  // Module to control application life.
var path    = require("path");
connect = require("gulp-connect-php");
var con = connect.server();
var BrowserWindow = require("browser-window");  // Module to create native browser window.
// Report crashes to our server.
require("crash-reporter").start();
// Keep a global reference of the window object, if you don"t, the window will
// be closed automatically when the JavaScript object is GCed.
var mainWindow = null;
// Quit when all windows are closed.
app.on("window-all-closed", function() {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd   Q
  if (process.platform != "darwin") {
    app.quit();
  }
});
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on("ready", function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    "node-integration ": false
   });
  // console.log(BrowserWindow);
  // and load the index.html of the app.
  mainWindow.loadUrl("http://127.0.0.1:8000");
  // mainWindow.loadUrl("file://"   __dirname   "/index.html");
  // Open the devtools.
  //mainWindow.openDevTools();
  // Emitted when the window is closed.
  mainWindow.on("closed", function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    app.quit();
    mainWindow = null;
  });
});

Ce fichier est le fichier requis pour lancer l’application.

Maintenant entrons des données dans le index.php

<?php phpinfo(); ?>

lancons notre application pour faire un petit test.

et Hop, on peux voir que notre application s’est bien lancée avec les infos de la version PHP.

Maintenant vous êtes libre de faire ce que vous souhaitez avec cette techno.
Pour ma part, j’ai mis laravel car le framework permet d’avoir une base de données sans passer par un server (mysql ou autre).

============= MISE A JOUR

Voila maintenant quelques jours que je travaille sur le projet et voici quelques retours.
Comme vous pouvez le voir dans l’image du PHP info, il s’agit de la version PHP installé sur la machine, par défaut sur OSX, il s’agit de php 5.5 et il manque Mcrypt.

Dans le module gulp connect PHP, on a la possibilité de définir plusieurs options, comme le documentRoot, le php.ini et le binaire de PHP.
Dans mon cas, j’ai voulu embarquer PHP dans l’application, donc j’ai copié les binaires php de MAMP pour mac et je l’ai glissé dans le dossier ./bin à la racine de l’appli (j’ai fait la même chose pour windows avec les bin de MAMP).

du coup petite modif dans le main.js

var port = 8000;
var con = connect.server({
    port: port,
    hostname: "127.0.0.1",
    base: path.resolve(__dirname),
    keepalive: false,
    open: false,
    bin: path.resolve(__dirname) "/bin/php",
    root: "/",
    stdio: "inherit"
  });

l’option base permet de définir le document Root et le bin
permet de choisir le « php » executé. Par défaut, bin = ‘php’ ce qui permet d’executer la commande ‘php’, du coup en changeant cette option, la commande sera /myApp/bin/php

Mes premiers test sont concluants, je réadapte mon ERP (Control ERP) et ça fonctionne plutôt bien pour le moment. Je rencontre quelques soucis avec la base de données car je passe sur du sqlite, mais Laravel gère plutôt bien ça :).

Je viens de faire un premiers test sur windows, ça à l’air de fonctionner.

En espérant que cet article vous aura été utile, n’hésitez pas à laisser vos projets réalisé en commentaire.