EasyAdmin 3 premier pas – 1

EasyAdmin 3 premier pas – 1

Attention à l’heure de l’écriture, EasyAdmin3 est en Alpha. Certaine choses peuvent changer.

Commençons par créer notre projet symfony, puis ajoutons easyadmin:

composer create-project symfony/website-skeleton easy3
composer require easycorp/easyadmin-bundle:v3.0.0-alpha3

Si vous avez une erreur avec des fichiers yaml faites ce qui suit:

Supprimer config/packages/easy_admin.yaml et config/routes/easy_admin.yaml

Configurez ensuite la connexion a la base de donnée puis crée la table:

bin/console doctrine:schema:create

Afin d’utiliser l’admin, créons une entité Contact avec comme champs: email, phone, country, lastName, firstName.

Passons maintenant a EasyAdmin, il nous faut créer un dashboard et un crud avec les commandes suivantes:

bin/console make:admin:dashboard
bin/console make:admin:crud

Lorsque l’on vous le demande, sélectionnez l’entité Contact.

Dans la fonction configureMenuItems du fichier DashboardController.php ajoutez:

yield MenuItem::linkToCrud('Contact', 'fa fa-user', Contact::class);

Dans la classe ContactCrudController ajouter les champs a la fonction configureFields:

TextField::new('email'),
TextField::new('phone'),
TextField::new('lastName'),
TextField::new('firstName'),
TextField::new('country'),

Rendez vous sur l’url de votre projet /admin et vous devriez voir cela:

Vue.js et localstorage

Vue.js et localstorage

Afin d’utiliser les données https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_time_series nous allons les récupérés a la création de notre application.

Pour ce faire nous regardons si nous avons dans le localstorage une date de défini ou de moins d’une heure. Si non, nous récupérons à l’aide de fetch les données, convertissons le csv a l’aide de papaparse puis stockons le résultats sous forme de JSON dans le localstorage.

Une fois les 3 fichiers chargés grâce à Promise.all, nous allons vers la route /single.

if (localStorage.date === undefined || localStorage.date < Date.now() - 3600) {
                this.$router.push('/');
                localStorage.date = Date.now();
                Promise.all([
                    fetch('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv')
                        .then((resp) => resp.text())
                        .then((data) => {
                            localStorage.confirmed = JSON.stringify(Papa.parse(data));
                        }),
                    fetch('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_recovered_global.csv')
                        .then((resp) => resp.text())
                        .then((data) => {
                            localStorage.recovered = JSON.stringify(Papa.parse(data));
                        }),
                    fetch('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv')
                        .then((resp) => resp.text())
                        .then((data) => {
                            localStorage.death = JSON.stringify(Papa.parse(data));
                        }),
                ])
                    .then(() => this.$router.push('/single'));
            }

Le dépôt est accessible sur: https://gitlab.com/dayo/covid19 et l’application: https://dayo.gitlab.io/covid19/single

for en JavaScript sur un tableau

for en JavaScript sur un tableau

Une grande partie viens de MDN.

for

for ([initialisation]; [condition]; [expression_finale]) {
   instruction
}

Permet d’initialiser des variables, de spécifier une condition pour finir la boucle, une expression final exécuté a la fin de chaque boucle et enfin les instructions a effectuer.

let str = "";

for (let i = 0; i < 9; i++) {
  str = str + i;
}

console.log(str);
// "012345678"

for…in

for (variable in objet) {
  instructions
}

Utile pour parcourir les propriété d’un objet. Attention avec les tableau car l’ordre de parcours n’est pas garantie.

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Affiche dans la console :
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

for…of

for (variable of iterable) {
  instruction
}

Permet de parcourir tout objet itérable et d’exécuter les instructions.

let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (let element of iterable) {
  console.log(element);
}
// ['a', 1]
// ['b', 2]
// ['c', 3]

for (let [clef, valeur] of iterable) {
  console.log(clef + ':' + valeur);
}
// a:1
// b:2
// c:3

Array.forEach

arr.forEach(callback);
arr.forEach(callback, thisArg);

Exécute la fonction callback sur chacun des éléments.

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));
// "a"
// "b"
// "c"

[2, 5, , 9].forEach(function(element, index, array) {
    console.log("a[" + index + "] = " + element);
});
// a[0] = 2
// a[1] = 5
// a[3] = 9

Sources:

  • https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for
  • https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for…in
  • https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for…of
  • https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach
GitLab et les badges de couverture de code

GitLab et les badges de couverture de code

Une fois GitLab CI configurer, une autre étape peut être l’ajout de badge sur le fichier readme du projet.

Pour cela rendez vous dans le partie Settings => CI /CD puis cliquez sur « Expand » en face de « General pipelines »:

En descendant vous trouverez une section « Test coverage parsing ». il faut utiliser « ^\slines[.]:\s*(\d+.\d+)\% » afin d’extraire la taux de couverture.

Vous pourrez alors rajouter un bagde montrant le taux de couverture de code.

Flutter et GitLabCI

Flutter et GitLabCI

Si vous souhaitez utiliser GitLabCI pour vos projet Flutter, voici la base du fichier .gitlab-ci.yml qu’il vous faudras:

Il faut commencer par spécifier une image docker a utiliser:

image: openjdk:8-jdk
Code language: YAML (yaml)

Nous déclarons ensuite des variables afin de pouvoir mettre a jour plus facilement:

variables: ANDROID_COMPILE_SDK: "28" ANDROID_BUILD_TOOLS: "28.0.2" ANDROID_SDK_TOOLS: "4333796" FLUTTER_VERSION: "https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_v1.12.13+hotfix.5-stable.tar.xz"
Code language: YAML (yaml)

Nous enchainons avec la description du test, les installtion de flutter, android sdk et autres

test: before_script: - apt-get -qq update --yes - apt-get -qq install --yes wget tar unzip lib32stdc++6 lib32z1 lcov - wget --quiet --output-document=android-sdk.zip https://dl.google.com/android/repository/sdk-tools-linux-${ANDROID_SDK_TOOLS}.zip - unzip -q -d android-sdk-linux android-sdk.zip - mkdir /root/.android - touch /root/.android/repositories.cfg - echo y | android-sdk-linux/tools/bin/sdkmanager "platforms;android-${ANDROID_COMPILE_SDK}" >/dev/null - echo y | android-sdk-linux/tools/bin/sdkmanager "platform-tools" >/dev/null - echo y | android-sdk-linux/tools/bin/sdkmanager "build-tools;${ANDROID_BUILD_TOOLS}" >/dev/null - export ANDROID_HOME=$PWD/android-sdk-linux - export PATH=$PATH:$PWD/android-sdk-linux/platform-tools/ - export CI='true' # temporarily disable checking for EPIPE error and use yes to accept all licenses - set +o pipefail - yes | android-sdk-linux/tools/bin/sdkmanager --licenses - set -o pipefail # flutter sdk setup - wget --quiet --output-document=flutter-sdk.tar.xz $FLUTTER_VERSION - tar -xf flutter-sdk.tar.xz - export PATH=$PATH:$PWD/flutter/bin - echo flutter.sdk=$PWD/flutter > android/local.properties - flutter packages get
Code language: YAML (yaml)

Puis la partit test en elle même et la creation d’un artefact contenant les resultat de la couverture de code:

script: - flutter test --coverage - genhtml coverage/lcov.info --output=coverage artifacts: paths: - coverage/ expire_in: 5 days
Code language: YAML (yaml)

Pour finir la partit publication de la couverture des tests dans les GitLab Pages:

pages: stage: .post script: - mkdir public - rm -Rf public/* - mv README.md public/README.md - mv -v coverage/* public/ artifacts: paths: - public only: - master
Code language: YAML (yaml)

Ce qui nous donne au final:

image: openjdk:8-jdk variables: ANDROID_COMPILE_SDK: "28" ANDROID_BUILD_TOOLS: "28.0.2" ANDROID_SDK_TOOLS: "4333796" FLUTTER_VERSION: "https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_v1.12.13+hotfix.5-stable.tar.xz" test: before_script: - apt-get -qq update --yes - apt-get -qq install --yes wget tar unzip lib32stdc++6 lib32z1 lcov - wget --quiet --output-document=android-sdk.zip https://dl.google.com/android/repository/sdk-tools-linux-${ANDROID_SDK_TOOLS}.zip - unzip -q -d android-sdk-linux android-sdk.zip - mkdir /root/.android - touch /root/.android/repositories.cfg - echo y | android-sdk-linux/tools/bin/sdkmanager "platforms;android-${ANDROID_COMPILE_SDK}" >/dev/null - echo y | android-sdk-linux/tools/bin/sdkmanager "platform-tools" >/dev/null - echo y | android-sdk-linux/tools/bin/sdkmanager "build-tools;${ANDROID_BUILD_TOOLS}" >/dev/null - export ANDROID_HOME=$PWD/android-sdk-linux - export PATH=$PATH:$PWD/android-sdk-linux/platform-tools/ - export CI='true' # temporarily disable checking for EPIPE error and use yes to accept all licenses - set +o pipefail - yes | android-sdk-linux/tools/bin/sdkmanager --licenses - set -o pipefail # flutter sdk setup - wget --quiet --output-document=flutter-sdk.tar.xz $FLUTTER_VERSION - tar -xf flutter-sdk.tar.xz - export PATH=$PATH:$PWD/flutter/bin - echo flutter.sdk=$PWD/flutter > android/local.properties - flutter packages get script: - flutter test --coverage - genhtml coverage/lcov.info --output=coverage artifacts: paths: - coverage/ expire_in: 5 days pages: stage: .post script: - mkdir public - rm -Rf public/* - mv README.md public/README.md - mv -v coverage/* public/ artifacts: paths: - public only: - master
Code language: YAML (yaml)

Un dépot git est disponible: https://gitlab.com/dayo/testgitlabciflutter/ et la couverture de code https://dayo.gitlab.io/testgitlabciflutter/