Build your HTML5 App tutorial

Requirements

Porting your own HTML5 apps for Cozy Light is quite simple. Once your app is develop (we won't cover the how to develop a HTML app field, it's too wide), it requires too things to be deployable on Cozy Light:

• That your entry point is an index.html file located at the root of your file repository.
• That your app has a manifest named package.json describing it.

Manifest

Here is the manifest we used to port CrappyBird (an app I didn't develop) to Cozy Light:

{
  "name": "crappy-bird",
  "displayName": "Crappy Bird",
  "description": "Flappy-bird html5 clone",
  "version": "1.0.0",
  "type": "static",
  "repository": {
    "type": "git",
    "url": "https://github.com/frankrousseau/CrappyBird.git"
  }
}

All fields seem self-explicit to us, but let us know if you need more info about one of them.

Persistence

You can save data into your Cozy Light by using PouchDB in your app. It will require that you add the Express PouchDB plugin to your Cozy Light.

Here is a sample of app that syncs with the Cozy Light database and that displays all event objects stored in the database:

PouchDB.sync('mydb', 'http://' + window.location.host + '/db/cozy', {live: true})

  .on('change', function (info) {
    console.log("change occured:");
    console.log(info);

  }).on('uptodate', function (info) {
    console.log("uptodate !");
    db.query('event/all', function(err, results) {
      $("#events").html(null);
      for(result in results.rows) {
        event = results.rows[result]
        $("#events").append('<p>' + event.value.start + '</p>');
      }
    });

  }).on('error', function (err) {
    console.log("error...");
    console.log(err);
  });

Recommended technologies

Here is a short list of cool and popular HTML5 technologies you could use to build your app:

• Frameworks: Backbone, Angular, React
• Storage: PouchDB
• Game engines: PixiJS, Phaser, CreateJS, ThreeJS