Créer un navigateur personnalisé - 11ème partie

Installeur automatique pour $soft Windows / Linux / Mac OS et intégration continue avec AppVeyor et Travis CI

17 juin 2016

Introduction

Ce projet est open source et accessible depuis GitHub GL-Browser.

Cet article est le 11ème d'une série d'articles concernant la création d'un navigateur internet incluant par défaut des fonctionnalités que l'on retrouve habituellement sous forme d'extensions dans Chrome ou Firefox.

Exemples de fonctionnalités :

Nous souhaitons :

Nous utilisons Electron qui mixe le navigateur open source Chromium avec la richesse du framework Node.js.

Objectifs

Dans ce 11ème article, nous automatiserons la génération des installeurs de notre navigateur pour $soft Windows, Linux et Mac OS.

L'installeur pour $soft Windows est généré dans une machine virtuelle de AppVeyor.

Les installeurs pour Linux et Mac OS sont générés dans une machine virtuelle de Travis CI.

Tous ces installeurs sont téléchargés dans GitHub Releases afin d'être accessibles publiquement et associés aux codes sources.

Appveyor Schema

Résumé des articles précédents

Article 1: initialisation du projet avec Electron.
Article 2: injection du CSS et du JavaScript dans la page de Google.
Article 3: injection de scripts JavaScript et de styles CSS suivant l'URL.
Article 4: bloquer les requêtes de suivi/tracking des utilisateurs.
Article 5: amélioration de l'interface utilisateur avec Bootstrap.
Article 6: encapsulation des composants visuels avec Riot.
Article 7: intégration d'un gestionnaire de mots de passe.
Article 8: intégration d'un gestionnaire de favoris.
Article 9: Automatisation des tests avec Mocha, vérification syntaxique avec ESLint et intégration continue avec Travis CI.
Article 10: Couverture de code avec istanbul et intégration continue avec coveralls.io.

Pour récupérer directement les sources du 11ème article :

git clone https://github.com/emmanuelroecker/GL-Browser
git checkout article11

Génération de l'installeur

electron-builder permet de packager et déployer des applications développées avec Electron.

electron-builder est ajouté dans le fichier package.json :

npm install --save-dev electron-builder

Pour éviter les conflits, electron-builder créé l'installeur en utilisant le contenu du répertoire app.
Ce répertoire contient :

{
  "dependencies": {
    "app-module-path": "^1.0.6",
    "bootstrap": "^3.3.0",
    "commander": "^2.9.0",
    "jquery": "^1.9.1",
    "js-yaml": "^3.5.0",
    "match-pattern": "^0.0.1",
    "riot": "^2.3.0"
  }
}

Le package.json à la racine du projet ne contient que les dépendances nécessaires au développement :

{
  "devDependencies": {
    "app-module-path": "^1.0.6",
    "coveralls": "^2.11.9",
    "devtron": "^1.1.2",
    "electron-builder": "^3.20.0",
    "electron-mocha": "^1.2.1",
    "electron-prebuilt": "^0.37.0",
    "eslint": "^2.8.0",
    "istanbul": "^0.4.3",
    "rimraf": "^2.5.2"
  }
}

Le répertoire du projet ressemble désormais à ceci :

│  package.json
├───node_modules
├───app
│       ├─cfg
│       ├─js
│       ├─node_modules
│       │  app.js
│       │  index.html
│       │  package.json

Une section build est ajoutée au fichier package.json de développement pour indiquer les informations nécessaires à la génération de l'installeur :

{
    "build": {
        "app-bundle-id": "com.glicer.browser",
        "app-category-type": "public.app-category.productivity",
        "win": {
            "iconUrl": "file://icon.ico"
        }
}

L'icône de l'application icon.ico est ajoutée dans le répertoire build.

Des nouvelles commandes sont également ajoutées au fichier package.json de développement :

{
  "scripts": {
    "postinstall": "install-app-deps",
    "pack": "rimraf app/js-cov && build",
    "dist": "rimraf app/js-cov && build"
  }
}

Intégration continue

Création d'une clé d'accès au dépôt GitHub GL-Browser

electron-builder télécharge automatiquement l'installeur sur GitHub Releases s'il est exécuté dans une machine virtuelle AppVeyor ou Travis CI.

Pour autoriser l'accès de electron-builder au dépôt du projet, une clé d'accès doit être générée depuis l'interface de GitHub :

GitHub tokens

Le droit public_repo doit être activé :

GitHub settings tokens

Génération des installeurs Linux et Mac OS par Travis CI

Travis CI a été présenté et utilisé dans l'Article 9.

Le fichier .travis.yml est modifié :

Pour autoriser electron-builder à télécharger les fichiers générés sur le dépôt, la variable globale GH_TOKEN contenant la clé d'accès générée plus haut est paramétrée via l'interface de Travis CI.

Travis GH_TOKEN

Génération de l'installeur $soft Windows par AppVeyor

AppVeyor est l'équivalent de Travis CI pour les applications fonctionnant sous $soft Windows.

L'utilisation de AppVeyor est gratuite pour les projets open source.

AppVeyor exécute automatiquement les opérations suivantes à chaque git push sur GitHub GL-Browser :

Le projet GitHub à surveiller est sélectionné dans l'interface de AppVeyor :

Appveyor Select

Le fichier appveyor.yml est ajouté à la racine du projet et contient la configuration de la machine virtuelle $soft Windows lancée par AppVeyor :

version: 0.0.{build}

platform:
    - x64

cache:
    - node_modules
    - app\node_modules
    - '%APPDATA%\npm-cache'
    - '%USERPROFILE%\.electron'

init:
    - git config --global core.autocrlf input

install:
    - ps: Install-Product node 5 x64
    - npm install npm -g
    - npm install
    - npm prune

build_script:
    - node --version
    - npm --version
    - npm run dist

test: off

Via l'interface de AppVeyor, une variable globale GH_TOKEN est créée et contient la clé d'accès au dépôt GitHub générée plus haut.

Appveyor GH_TOKEN

AppVeyor permet de visualiser la console de la machine virtuelle :

Appveyor Build

Le badge d'état AppVeyor de génération de l'installeur est ajouté au fichier README.md du projet :

[![Build status](https://ci.appveyor.com/api/projects/status/pi6uyjyf5dptrnwr/branch/master?svg=true)](https://ci.appveyor.com/project/emmanuelroecker/gl-browser/branch/master)

Validation des installeurs

GitHub Releases contient les installeurs qui sont dans un premier temps indiqués comme Draft et ne sont pas visibles publiquement :

GitHub Draft

Lorsque le propriétaire du compte GitHub le souhaite, il
valide manuellement les installeurs qui quittent le mode Draft et deviennent visibles et téléchargeables publiquement :

GitHub Draft to Releases

Résultat

Le nouveau badge de AppVeyor est affiché dans GitHub GL-Browser :

Appveyor badge

Les installeurs visibles dans GitHub Releases :

GitHub Releases

Prochain article

Le prochain article traitera de l'amélioration du design de l'interface.