Atom-shell, javascript everywhere!

Depuis quelques jours, la release publique de Atom l’éditeur de code de GitHub est disponible. Atom, c’est un ide lĂ©ger (Ă©diteur de code) Ă  la SublimeText qui a comme spĂ©cificitĂ© d’ĂȘtre dĂ©veloppĂ© en javascript, basĂ© sur node.js et Chromium, avec la possibilitĂ© de dĂ©velopper “autour” en Coffeescript (donc faire des plugins), mais aussi en javascript. Certes, Atom n’a pas la vĂ©locitĂ© d’une application dĂ©veloppĂ©e “tout en C++”, mais je trouve, Ă  la vue de ses capacitĂ©s que c’est Ă  lui tout seul un cas d’usage dĂ©montrant que l’on peut aller trĂšs loin en javascript.

Mais ce que je trouve encore mieux, c’est que parallĂšlement, GitHub a publiĂ© Atom-shell : le framework de base qui a permis de dĂ©velopper Atom. Cela signifie que vous avez Ă  votre disposition les outils nĂ©cessaires pour faire des applications desktop “à la Atom”.

D’autres projets de ce type existent, notamment Node-Webkit qui Ă©tait dans la place avant Atom-shell et qui n’en n’est pas moins intĂ©ressant, reposant sur les mĂȘmes composants, et le projet est toujours trĂšs actif.

Je vous explique donc rapidement comment vous pouvez faire une application avec Atom-shell. Pour démarrer, il vous faut node.js, npm et Grunt.

Initialisation de l’application et installation d’Atom-shell

Commencez par créer un répertoire myatom avec un sous-répertoire build et un sous-répertoire myatom-app. Ensuite dans le sous répertoire build, créez 2 fichiers :

  • package.json
  • Gruntfile.js

Contenu de package.json

{
  "name": "myatom-app-atom-build",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^0.4.4",
    "grunt-download-atom-shell": "^0.7.0"
  }
}

Contenu de Gruntfile.js

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    "download-atom-shell": {
      version: "0.12.3",
      outputDir: "./atom-shell",
      rebuild: true
    }
  });

  grunt.loadNpmTasks('grunt-download-atom-shell');

};

Installer Atom-shell

Dans votre terminal préféré, allez dans le répertoire build, et tapez les commandes suivantes :

npm install

Cela va télécharger les dépendances nécessaires, puis :

grunt download-atom-shell

Cela va dĂ©clencher la tĂąche Grunt qui va tĂ©lĂ©charger les ressources nĂ©cessaires d’Atom-shell.

Remarque : j’avais dĂ©jĂ  Atom installĂ©, mais il semblerait qu’il faille le “Atom Package Manager” pour que la commande Grunt fonctionne. Merci Ă  Roderik van der Veer pour l’information :).

Au bout de quelques instants vous aurez 2 nouveaux répertoires dans votre répertoire build :

build/
├── node_modules/
└── atom-shell/

CrĂ©er l’application

Donc normalement, vous devez avoir une structure de répertoires comme celle-ci :

myatom/
├── build/
|   ├── node_modules/
|   └── atom-shell/
└── myatom-app/

Créez dans le répertoire myatom-app 3 fichiers :

  • package.json
  • index.html
  • main.js

Contenu de package.json

Vous précisez dans ce fichier le nom du script principal de votre application : main.js

{
  "name": "myatom-app",
  "version": "0.1.0",
  "main": "main.js"
}

Contenu de index.html

Aujourd’hui, nous allons rester simple :

<!DOCTYPE html>
<html>
<head>
  <title>Hello World!</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

Contenu de main.js

LĂ  nous avons un peu plus de choses :

var app = require('app');
var BrowserWindow = require('browser-window');
var Menu = require('menu');
var dialog = require('dialog');

var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

app.on('ready', function() {

  mainWindow = new BrowserWindow({width: 320, height: 200});
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  mainWindow.on('closed', function() {
    mainWindow = null;
  });

  var templateMenu = [
    {
      submenu: [
        {
          label: 'Quit',
          accelerator: 'Command+Q',
          click: function() { app.quit(); }
        }
      ]
    }
  ];

  menu = Menu.buildFromTemplate(templateMenu);
  Menu.setApplicationMenu(menu);

});

Ă  retenir : var BrowserWindow = require('browser-window'); sert Ă  crĂ©er la fenĂȘtre native du navigateur, donc la fenĂȘtre principale de votre application, celle dans laquelle sera chargĂ©e la page index.html

Lancez la bĂȘte!

Dans votre répertoire myatom, lancez la commande :

./build/atom-shell/Atom.app/Contents/MacOS/Atom ./myatom-app

Et votre killer app apparaĂźt \o/:

Alt "myatomapp.png"

C’est fini pour aujourd’hui, mais vous pouvez aller lire la documentation : https://github.com/atom/atom-shell/tree/master/docs

blog comments powered by Disqus

Related posts