Développement

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

Par Guillaume , le 19 août 2015 , mis à jour le 30 janvier 2017 — 14 commentaires — 6 minutes de lecture

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

Capture d’écran 2015-08-18 à 14.36.00

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.
Capture d’écran 2015-08-18 à 14.50.13

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).

Capture d’écran 2015-08-18 à 13.59.46

============= 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.
2015-08-20_102921

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

enjoy 😉

Guillaume

Commentaires

Le 1 septembre 2015 à 11 11 01 09019, harkor a dit :


Salut,

je ne suis pas arrivé à reproduire ton essai sous Fedora 22.

J'ai un 404 not found en reproduisant à l'identique la première partie de tes explications.


Votre réponse sera révisée par les administrateurs si besoin.

Le 1 septembre 2015 à 12 12 29 09299, Guillaume a dit :


Salut merci à toi de ton retour.
Ta version de PHP est elle supérieur à 5.4 ? sinon, tu as bien mis le chemin du binaire de PHP ? ou as tu juste laissé 'php' au niveau de
[cc lang="php" width="100%"]
bin: 'php',
[/cc]
Sinon as tu bien fichier index.php à la racine de ton projet ?
Le serveur est bien lancé cela dit ?
Cordialement


Votre réponse sera révisée par les administrateurs si besoin.

Le 1 septembre 2015 à 12 12 44 09449, harkor a dit :


Le serveur a l'air bien lancé.

Ma version de PHP 5.6.12 (6 aout 2015)

Je n'ai pas testé la 2e partie de ton tuto. Electron de base marche, j'ai suivi leur "Quick start" et ça fonctionne. Si je tente le 127.0.0.1:8000, j'ai la même fenêtre que dans l'app ce qui est logique.


Votre réponse sera révisée par les administrateurs si besoin.

Le 1 septembre 2015 à 12 12 47 09479, Guillaume a dit :


J'ai eu ce souci, et je pense que ça vient de ton documentRoot qui n'est pas le bon.
Je te conseille de rajouter cette option:
[cc lang="php" width="100%"]
base: path.resolve(__dirname),
[/cc]
Tiens moi informé :)


Votre réponse sera révisée par les administrateurs si besoin.

Le 1 septembre 2015 à 13 01 02 09029, harkor a dit :


Merci :)

ça fonctionne beaucoup mieux, attention que tu as oublié de préciser qu'il faut créer un package.json


Votre réponse sera révisée par les administrateurs si besoin.

Le 1 septembre 2015 à 13 01 03 09039, Guillaume a dit :


A oui en effet, il faut que je le rajoute, c'est pour les modules de nodeJS. N'hésites pas à commenter ce que tu fait et si tu as des bugs ou autre :)


Votre réponse sera révisée par les administrateurs si besoin.

Le 1 septembre 2015 à 13 01 33 09339, harkor a dit :


ok.

Par contre, je ne vois pas comment je peux faire pour intégrer une version de php indépendante de ma machine... J'ai vu que tu avais utilisé ce que MAMP fourni après installation mais je n'ai pas de machine qui tourne sous OSX sous la main. Je n'ai pas trouvé d'information sur la création d'un équivalent tout linux.


Votre réponse sera révisée par les administrateurs si besoin.

Le 2 septembre 2015 à 15 03 23 09239, Guillaume a dit :


Le mieux est de copier ton dossier bin du php de ta machine et de le copier dans le bin de l'applications.
Tu peux aussi avoir un custom php.ini que je te conseille de faire et de changer les adresses des extensions php.


Votre réponse sera révisée par les administrateurs si besoin.

Le 24 février 2016 à 10 10 17 02172, kassmi a dit :


Salut,
quand je lance l'application une page vide !!!


Votre réponse sera révisée par les administrateurs si besoin.

Le 24 février 2016 à 13 01 43 02432, Guillaume a dit :


Bonjour,
Avez vous bien mis le dossier php ?
Cordialement


Votre réponse sera révisée par les administrateurs si besoin.

Le 24 février 2016 à 16 04 54 02542, kassmi a dit :


salut Guillaume,
tu peux m'expliqué par etape comment je peux integrer php avec electron car je suis bloqué lorsque je lance l'application rien ne s'affiche pas :( et merci d'avance


Votre réponse sera révisée par les administrateurs si besoin.

Le 31 mai 2020 à 9 09 23 05235, Franck225 a dit :


Bonjour, à tous,

Après avoir suivi et développer une application avec cette technique,

Es t'il possible de créer un exécutable ou de l'exporter sur une machine ?.

Merci


Votre réponse sera révisée par les administrateurs si besoin.

Le 31 mai 2020 à 13 01 56 05565, Guillaume a dit :


Bonjour
Oui sans problème.
Tout est expliqué sur la documentation officielle
https://www.electronjs.org/docs/tutorial/application-distribution

Cordialement


Votre réponse sera révisée par les administrateurs si besoin.

Le 8 août 2020 à 19 07 15 08158, kapor a dit :


Hi, I did something very similar. everything works on windows but for mac and Linux if you want to ditribute electron app with php inside it will work while you have php installed on your com. I installed bitnami MAMP/LAMP (Mac/Ubuntu) and I took binaries and put it inside my electron app, all works great. Try unistall bitnami MAMP/LAMP, electron app will no longer work.=, blank screen...


Votre réponse sera révisée par les administrateurs si besoin.

Laisser un commentaire

Votre commentaire sera révisé par les administrateurs si besoin.