Skip to content

Latest commit

 

History

History
237 lines (160 loc) · 5.14 KB

99-workshop.md

File metadata and controls

237 lines (160 loc) · 5.14 KB
Raw

TP #5.1 - Projet

L'objectif de ce TP est de réaliser une application de l'écosystème EvalMe basée sur Angular.

Initialisation du projet

  • Créer une nouvelle application :
ng new votre-application --skip-tests

Les noms d'application :

  • concours-app
  • duel-app
  • examen-app
  • sondage-app

Déploiement automatique de l'application sur la branche gh-pages

  • Créer un fork du dépôt votre-application fourni.

  • S'authentifier à l'aide de votre compte Github sur le site : https://travis-ci.org/.

  • Se rendre sur votre profil (menu Profile)

  • Cliquer sur le bouton Sync account.

  • Effectuer une recherche du dépôt votre-application et activer le dépôt.

  • Cliquer sur le dépôt (dans l'exemple roddet/votre-application).

  • Ajouter au code source du projet un fichier .travis.yml :
language: node_js
node_js:
  - "9"
before_script:
  - npm install
script: npm run build
deploy:
  local-dir: dist/votre-application # A COMPLETER
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_TOKEN  # Set in travis-ci.org dashboard, marked secure
  keep-history: true
  on:
    branch: master
notifications:
  email: false
  slack: diginamic:nIQwPkWk2zfq2fjtzxMWhuBD#travis-le-mystere-de-la-salle-jaune
  • Mettre à jour le fichier package.json comme suit (adapter le nom de l'utilisateur):
  "scripts": {
    ...
    "build": "ng build --prod --base-href https://NOM_UTILISATEUR_GITHUB.github.io/votre-application",

  • Publier les modifications sur Github.

  • Une construction Travis se lance automatiquement.

  • La construction échouera. C'est normal, la variable d'environnement GITHUB_TOKEN n'est pas paramétrée dans Travis.

  • Se rendre dans le paramétrage Github

  • Se rendre dans la rubrique Developer settings.

  • Se rendre dans la rubrique Personal access tokens.

  • Cliquer sur Generate new token.

  • Générer un token avec les droits sur vos dépôts publiques.

  • Copier le token généré. Nous allons à présent mettre à jour Travis.

  • Se rendre dans le paramétrage du job Travis (rubrique Settings)

  • Ajouter la variable d'environnement GITHUB_TOKEN.

  • Relancer la construction.

  • Copier le code en version Markdown.

  • Mettre à jour le fichier README.md avec :
  • le code de l'icône build copié
  • l'adresse du site en ligne.

A ce stade à chaque fois que la branche master sera mise à jour, l'application sera déployée automatiquement par Travis.

(optionnel) Intégration Angular Bootstrap with Material Design

Pour réaliser les composants graphiques, nous allons utilisé Angular Bootstrap with Material Design.

  • Installer MDB
 npm install -–save [email protected] @types/chart.js @types/chart.js font-awesome hammerjs angular5-csv
  • Compléter le fichier .angular.json en ajoutant la propriété styleext avec la valeur scss.
{
  ...
  "projects": {
    "top-collegues-front": {
      ...
      "schematics": {
        "@schematics/angular:class": {
          ...
        },
        "@schematics/angular:component": {
          ...
          "styleext": "scss"
        },

  • Renommer src/styles.css en styles.scss.

  • Mettre à jour le module src/app/app.module.ts en ajoutant le module : MDBBootstrapModule.

// ...
import { MDBBootstrapModule } from 'angular-bootstrap-md';

@NgModule({
    // ...
    imports: [
        BrowserModule,
        MDBBootstrapModule.forRoot()
    ]
    //...
});
  • Compléter le fichier .angular.json
{
  ...
  "projects": {
    "top-collegues-front": {
     ...
      
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/hammerjs/hammer.min.js"
            ]
          },
          ...
        },
        ...
      }
    },
    "...
  },
 ...
}
  • Compléter le fichier tsconfig.json
"include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"],
  • Tester la modification en local
ng serve
  • Publier vos modifications sur Github et vérifier que le site en ligne a pris en compte vos modifications.