Développer sa première application hypertopique

Paquetages, fonctions fléchées et promesses

1. Sur www.npmjs.org :
   1. Cherchez le paquetage hypertopic.
   2. Choisissez de le tester en ligne ("Test hypertopic in your browser").
2. À partir d'éléments de code glanés dans la documentation (à droite), interrogez les serveurs (les vrais : enlevez test dans l'URI) pour avoir la liste des corpus de l'utilisateur vitraux.
   1. Lors de la construction de l'objet Hypertopic, pourquoi y a-t-il plusieurs serveurs ?
   2. D'après vous que fait le premier traitement de la chaîne (getView) ? Combien de fois ?
   3. Étudiez le deuxième traitement de la chaîne. Que fait cette fonction mais surtout quand et à partir de quelles données ? Qu'en déduisez-vous sur ce que l'on pourra qualifier de "promesse" ?
3. À partir du code permettant d'obtenir le contenu des points de vue et des corpus d'un utilisateur.
   1. Étudiez le second traitement de la chaîne ? Comment comprenez-vous cette nouvelle notation "fléchée" ? Que fait exactement cette fonction ? Simplifiez la pour avoir en bout de chaîne uniquement le contenu des corpus (et plus des points de vue).
   2. Adaptez l'URI pour demander les attributs de ces mêmes corpus (en se basant sur le protocole). Dans le résultat, quel attribut correspond au lieu ?
   3. Adaptez l'URI pour demander les valeurs de cet attribut (en se basant sur le protocole).
4. Traitez les données (en une ou plusieurs étapes) :
   1. pour n'avoir que le second niveau des données (avec Object.values() d'ES 2017),
   2. pour n'avoir que le troisième niveau (celui des lieux),
   3. pour ne garder que les clefs (avec Object.keys() d'ES 2015),
   4. pour que les listes de lieux soient fusionnées (avec concat et reduce d'ES 2011),
   5. pour que les doublons soient supprimés (avec Array.from et new Set d'ES 2015),
   6. pour que seul les lieux qui sont à Troyes soient conservés (avec filter d'ES 2011).

Vues déclaratives

Pré-requis : Avoir une version à jour de Node sur son poste.

1. Toujours en ligne de commande, créez votre projet (si possible sur le bureau) :

   npx create-react-app vitraux-a-troyes
   

2. Faites ensuite ce que l'écran vous suggère de faire.

3. En gardant le navigateur ouvert, suivez les instructions pour remplacer le message d'accueil de votre application par Où voir des vitraux à Troyes ?. Que se passe-t-il quand vous enregistrez cette modification ?

4. Dans le composant App, mettez à la suite du titre un appel à un nouveau composant : <CityMap/>. Définissez le à la suite sous la forme d'une classe :

class CityMap extends React.Component {
  render() {
    return (
      <p>Ma carte de Troyes</p>
    );
  }
}

Enregistrez et corriger éventuellement les erreurs qui apparaissent dans le navigateur.

6. Modifiez le code de la méthode render afin de remplacer le texte par une image dont l'URI est https://maps.googleapis.com/maps/api/staticmap?center=Troyes&size=600x480&zoom=14&key=API_KEY (remplacez API_KEY par une clef obtenue auprès de Google). Enregistrez et corriger éventuellement les erreurs qui apparaissent dans le navigateur.
7. Dans votre classe, ajoutez une méthode "constructeur" :

  constructor() {
    super();
    this.state = {places:["Office du tourisme, Troyes"]};
  }

Puis, au début de la méthode render, la ligne suivante :

    let markers = this.state.places.map(x => `&markers=${x}`);

Remplacez enfin l'URI de l'image par la concaténation de la chaîne existante et de markers. Enregistrez et observez le résultat dans le navigateur. Interprétez la manière dont cela fonctionne.

8. Il est temps maintenant d'interroger les services Hypertopic... Dans un nouveau terminal, à l'intérieur du dossier du projet, installez la bibliothèque Hypertopic :

    npm install hypertopic 
   

Importez maintenant la bibliothèque dans votre fichier source.

9. Dans votre classe, ajoutez une méthode componentDidMount et copiez-collez le code de la première partie du TD. En lieu et place de la fonction d'affichage (_log), mettez la fonction suivante :

x => this.setState({places: x})

Enregistrez et observez le résultat dans le navigateur.

Bravo 👏👩🏽‍🎓👨‍🎓🍾🥇🎉 Vous avez fabriqué votre première application hypertopique !!!

En espérant que cette première application vous donnera envie d'en faire beaucoup d'autres ! 😉