TD n°4

Ce projet utilise Semantic-UI pour la partie CSS. ember install semantic-ui-ember

• Projet boards
• Application gestion de projets SCRUM

1. Se connecter à un service web externe
2. Créer des composants
3. Manipuler les models

Vous travaillez sur un outil permettant de gérer des projets.

Voici les principales caractéristiques du système d'information :

• Chaque projet [project] possède un nom, un descriptif, une date de début et de fin, et un propriétaire (owner, qui est un développeur)
• L'équipe est constituée d'un ensemble de développeurs [developer].
• Chaque User story [story] a un code et un descriptif, et appartient à un projet.
• Il est possible de lui apposer des tags [tags], composés d'une couleur et d'un label.
• Elle peut être affectée à un développeur[dev] (qui a juste une identité).
• Elle peut contenir une liste de tâches [tasks], à réaliser ou réalisées.

Démarrer mongoDb :

mongod

Démarrer le serveur restheart :

java -jar restheart.jar

mongod --port 27117

java -jar restheart.jar etc/restheart.yml

• projects
• developers
• steps
• stories
• tags
• tasks

Exemple : Pour créer une collection dans la console mongo :

use boards
db.createCollection('developers',{})

Créer le projet boards

Ajouter le plugin ember-cli-uuid pour la génération d'uuid côté client :

ember install ember-cli-uuid

Générer l'adapter pour l'application :

ember g adapter application

import DS from 'ember-data';
import { pluralize } from 'ember-inflector';

var Adapater=DS.RESTAdapter.extend({
  ajaxOptions: function(url, type, options) {
    var hash = this._super(url, type, options);
    if (type == 'POST' || type=='PUT') {
      hash.dataType = 'text';
    }
    return hash;
  },
  host:'http://127.0.0.1:8080',
  namespace: 'boards',
  urlForDeleteRecord(id, modelName) {
    modelName=pluralize(modelName);
    return this.get('host')+'/'+this.get('namespace')+`/${modelName}/*?filter={_id:'${id}'}`;
  }
});

export default Adapater;

Générer le serializer pour l'application :

ember g serializer application

import DS from 'ember-data';

export default DS.JSONSerializer.extend({
  primaryKey: '_id',
  isNewSerializerAPI: true,
  extractId: function (modelClass, resourceHash) {
    if(resourceHash._id)
    return (resourceHash._id.$oid || resourceHash._id);
  },
  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    if(requestType=='createRecord')
      return this._super(store, primaryModelClass, {}, id, requestType);
    if(requestType=='updateRecord')
      return this._super(store, primaryModelClass, {}, id, requestType);
    if(requestType=='deleteRecord')
      return this._super(store, primaryModelClass, null, id, requestType);
    if (payload._embedded)
      return this._super(store, primaryModelClass, payload._embedded, id, requestType);
    return this._super(store, primaryModelClass, payload, id, requestType);
  },
  serializeId (snapshot, json) {
    let id = snapshot.id;
    json['_id'] = id;
  }
});

Autoriser la connexion de l'application ember au serveur restheart :

...
ENV.contentSecurityPolicy = {
  // ... other stuff here
  'connect-src': "'self' http://127.0.0.1:8080"
}
...

Créer les models project et developer, ajouter les membres.

ember g model project
ember g model developer

ember g route developers

ember g route developers/new

A ajouter pour la route developers

ember g route projects

ember g route projects/new

• Créer au besoin les collections tags et stories dans MongoDb
• Ajouter au projet ember les models tag et story, définir les membres et relations (belongsTo et hasMany en utilisant le schéma ci-dessus)

Créer le serializer suivant pour le model project :

import DS from 'ember-data';
import ApplicationSerializer from './application';

export default ApplicationSerializer.extend(DS.EmbeddedRecordsMixin, {
  attrs: {
    stories: {
      deserialize: false,
      serialize: 'ids'
    }
  }
});

Elle permet de visualiser les caractéristiques d'un projet, ainsi que ses stories.

ember g route project

Elle permet d'ajouter une story dans le projet en cours.

ember g route /story/new

Utiliser RSVP :

Ajouter dans le route handler l'action didTransition :

export default Route.extend({
  ...
  actions:{
    didTransition() {
      Ember.run.next(this, 'initUI');
    },
    ...
  }
}

Puis la méthode appelée initUI dans le route Handler :

export default Route.extend({
  ... 
  initUI() {
    Ember.$('.ui.dropdown').dropdown();
  }
...
}