@cgdd-bun/dido-wc-dl-diffusion v1.0.3

Projet pour le widget de téléchargement de DiDo

Le widget de diffusion de DiDo est développé à l'aide de l'UI framework Quasar pour VueJS.

Le widget est construit comme un WebComponent.

Toutes les commandes pour développer, construire, tester et déployer le projet utilise des raccourcis. Pour voir comment sont construits ces raccourcis, vous pouvez regarder le fichier actions.sh

1. Phase de développement

Pour bénéficier des avantages de développement liés à VueJS et Quasar (linter, babel, hot reload, minification du css et du js, etc...), il faut utiliser l'application dans un container avec vue-cli.

Pour développer, vous pouvez lancer la commande suivante:

# par défaut c'est le port 8060
./actions.sh run-dev

# mais on peut définir un port particulier
./actions.sh run-dev 8020

Et un certain nombre de commandes à utiliser en développement:

# installer toutes les dépendances
./actions.sh install-dependencies

# ajouter une dépendance de prod
./actions.sh install-dependency {my_package}

# ajouter une dépendance de dev
./actions.sh install-dev-dependency {my_dev_package}

# faire un lint du code source
./actions.sh lint

# inspecter les versions d'une dépendance
./actions.sh inspect-dependency {my_package}


# faire un audit des dépendances de prod
./actions.sh audit

# faire un audit de toutes les dépendances (y compris les dépendances de dev)
./actions.sh audit-with-dev

# Inspecter la configuration webpack qui sera écrite dans le fichier webpack_conf_output.js
./actions.sh webpack-conf
# Vous pouvez passer tous les paramètres habituels d'inspection. Par exemple en mode production et verbeux
./actions.sh webpack-conf --mode production --verbose 

# Construire le composant web (disponible dans dist)
./actions.sh build-wc

# Publier le composant web sur la registry npm
./actions.sh npm-publish

# Une simple action pour obtenir un shell
./action.sh shell

2. Pour la production

Vous pouvez construire l'image pour servir le composant web dans une page web servie dans un container nginx

./actions.sh build-prod

Vous pouvez la tester en local en donnant le port d'exposition et l'url de l'api de diffusion:

./actions.sh run-prod 8070 https://data.statistiques.developpement-durable.gouv.fr/dido/api/v1

Ensuite vous accédez à une page présentant le widget:

• niveau 'jeu de données': http://127.0.0.1:8070/dataset.html?id=$id
• niveau 'fichier de données': http://127.0.0.1:8070/datafile.html?rid=$rid
• niveau 'millesime': http://127.0.0.1:8070/millesime.html?rid=$rid&millesime=$millesime

3. Pipeline de CI

Un pipeline de CI existe pour construire et pousser l'image dans la registry docker du ministère. Les images existeront avec différents tags selon la branche: registry.gitlab.oshimae.rie.gouv.fr/cgdd/sdsed-bun/datalake/widget-download

4. Web Component

Le pipeline et le dockerfile permet de générer une image nginx qui porte le composant web.

Vous pouvez sinon simplement utiliser le composant web publié sur npmjs dans n'importe que page web en intégrant le code html suivant à l'intérieur de la balise body:

<script src="https://unpkg.com/vue"><\/script>
<script src="https://unpkg.com/@cgdd-bun/dido-wc-download-diffusion/dist/wc/dido-widget-diffusion-download.min.js"><\/script>

<!-- widget de téléchargement niveau jeu de données -->
<dido-widget-diffusion-download
  url="http://api.diffusion.dido.fr/v1"
  type="dataset"
  id="{{id}}"
/>

<!-- widget de téléchargement niveau fichier de données -->
<dido-widget-diffusion-download
  url="http://api.diffusion.dido.fr/v1"
  type="datafile"
  rid="{{rid}}"
/>

<!-- widget de téléchargement niveau millésime -->
<dido-widget-diffusion-download
  url="http://api.diffusion.dido.fr/v1"
  type="millesime"
  rid="{{rid}}"
  millesime="{{millesime}}
/>