Quantcast
Channel: Developpement web – Developpeur / integrateur web (Growth Hacker)
Viewing all 82 articles
Browse latest View live

Outils de productivité #09

$
0
0

Carte open source

Il sert à quoi ?

Utilise une API Open source pour obtenir une adresse.
Google ayant augmenter ces tarifs, les alternatives libres peuvent être une alternative intéressante à « Google map ». Voici quelques articles parlant de la hausse de tarif de chez « Google map » qui reste un service d’une grande qualité : lemonde.fr, clubic.com, webexmachina.fr, lemondeinformatique.fr, ladn.eu, alternatives-economiques.fr, developpez.com, …

Comment cela fonctionne ?

  • Utiliser une API et obtenez une carte, dans l’esprit de ce que fait « google map ».

Ex : adresse.data.gouv.fr

curl https://api-adresse.data.gouv.fr/search/?q=8+bd+du+port
curl https://api-adresse.data.gouv.fr/search/?q=8+bd+du+port&limit=15
curl https://api-adresse.data.gouv.fr/search/?q=8+bd+du+port&autocomplete=0
curl https://api-adresse.data.gouv.fr/search/?q=8+bd+du+port&lat=48.789&lon=2.789
curl https://api-adresse.data.gouv.fr/search/?q=8+bd+du+port&postcode=44380
curl https://api-adresse.data.gouv.fr/search/?q=paris&type=street

Ex : https://maps.jawg.io/#10.62/46.1627/-1.145

Je le trouve où ?

https://adresse.data.gouv.fr/api
https://www.jawg.io
https://leafletjs.com
https://cloud.google.com/maps-platform/?hl=fr

Cet article Outils de productivité #09 est apparu en premier sur Developpeur / integrateur web (Growth Hacker).


Etre blacklisté c’est quoi ?

$
0
0

Supposons que votre solution saas propose la gestion d’email, de campagne marketing, etc …
Que faire pour savoir si nous avons été blacklisté sur nos différentes solutions ?

Vous utilisez un ESP (=Email Service Provider) pour expédier vos emails, mais vous pouvez être détecté en tant que « non désirable », « spammeur ». Si tel est le cas, et que vous avez envoyé des emails indésirables, vous risquez de rentrer dans des liste noire (=blacklist).

La conséquence est assez simple, tant que vous serez dans cette « blacklist » vos emails risquent de ne pas arriver et/ou d’arriver en spam chez vos destinataires.

Comment savoir que nous sommes blacklisté ?

Solution manuelle :
Vous pouvez aller des sites comme multirbl.valli.org, MxToolBox.com, correct.email, …

Solution automatique (monitoring) :
Vous pouvez utiliser un script pour consulter différentes listes (DNSBL, RBL), et recevoir un email (par exemple) lors vous êtes détecté en tant qu’IP blacklisté. Utiliser un cron pour le lancer 1 fois par jour ou plus, selon vos besoins.
Voici un exemple de script : https://github.com/eewee/blcheck
Bien sûr des solutions en ligne vous permettent de faire cela (ex : AUDeMAIL).

Si vous êtes « blacklisté » chez Spamhaus (=RBL) par exemple, vous allez être refusé chez quasiment tous les serveurs de messagerie d’entreprise.

Ex d’organisme : Spamhaus, barracuda, CBL, …

Comment sortir d’une blacklist ?

  • Trouver la raison de cette blacklist, cf fournisseur email pour investigation (ils peuvent aussi s’occuper du monitoring et analyse de logs pour vous).
  • Usurpation d’identité par un spammeur.
  • Votre hébergeur a été blacklisté, et vous êtes sur le serveur de ce dernier qui a été impacté.
  • Regarder dans les logs si un message d’erreur revient trop fréquemment.
  • Contacter l’organisme sur lequel vous êtes blacklisté, expliquez lui ce qui c’est passé et les points sur lesquels vous avez travailler pour ne plus rencontrer ce cas de figure.

Mais pourquoi moi ?

  • Il peut s’agir de « spamtrap » détecté. L’organismes anti-spam ou fournisseurs d’accès disposent d’emails qui ne devraient pas être utilisé. Si vous les avez dans votre liste durant une campagne marketing, alors c’est que votre liste n’est pas clean et que vous pouvez être considéré comme un spammeur.
  • L’adresse est inactive mais toujours utilisée dans votre base de donnée (=vieille db, mal travaillée). Un utilisateur a pu disposer d’un email, puis être inactif, l’email a ainsi été récupéré par un fournisseurs d’accès pour pouvoir détecter les expéditeurs ne travaillant pas correctement leur base de donnée.
  • Vous avez acheté ou aspirer des listes d’emails (=le côté obscure de la force = le mal = ne pas faire = mauvais comportement). Les organismes anti-spam vont publier des articles sur des forums, blogs, un peu partout, et si vous récupérez en scrapant des sites les emails si trouvant vous vous exposez à de gros risques.
  • Vos destinataires n’ont pas apprécier la réception de votre email (=plaintes = signalement en spam). Lorsque vous êtes connectés sur votre webmail préféré, le bouton de « plainte » n’est pas loin et facile à utiliser pour le destinataire. Si le serveur de réception d’un fournisseur (ex : OVH, Orange, …) calcule un trop fort taux de plainte venant de votre serveur, nom de domaine, vous vous exposez à des risques (=blackliste).
  • Attention aux concurrents qui rentrent de façon volontaire des spamtraps dans votre liste de prospect. Une façon de grandir peut-être de descendre les concurrents. Donc soyez vigilant.

Que faire pour bien faire ?

  • Avoir une IP dédié. Car si vous mettez tout en place pour bien faire les choses, il ne faudrait pas qu’un autre utilisateur / client sur le même serveur que vous dégrade la notoriété de l’IP que vous avez en commun avec lui / eux. Donc IP dédié.
  • Achat / scrape de liste d’email à ne jamais faire.
  • Supprimer les emails n’ayants pas interagit depuis plus de 6 à 12 mois (ouvert, cliqué sur vos emails expédiés).
  • Faire de l’opt-in confirmé (envoyer un lien de confirmation sur la boite email lors de l’inscription).
  • Toujours proposer un lien de désinscription en pied d’email.
  • Ne pas accepter les trashmails lors de la soumission des formulaires de vos sites.

Cet article Etre blacklisté c’est quoi ? est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Gulp 4 – tuto initiation

$
0
0

Gulp est un task runner qui va vous permettre de réaliser diverses tâches rapidement. Nous allons voir comment l’utiliser à travers un exemple concret.

Installer Gulp 4

Le site officiel de Gulp, vous explique l’installation dès sa home :
https://gulpjs.com/

// Init
npm init -y

// Installer gulp uniquement
npm install gulp --save-dev
// ou (la notation raccourcie)
npm i gulp -D

// Optionnel, uniquement si vous disposez d'une ancienne version (ex: Gulp 3), voici la commande pour la supprimer :
npm rm --global gulp

Ceci va créer le fichier package.json, et installer Gulp (uniquement).

Ensuite vous devez choisir et utiliser les différents plugins dont vous aller avoir besoin. Pour cela rendez-vous sur https://gulpjs.com/plugins/ pour faire votre choix.

Dans cette exemple nous allons utiliser les plugins suivants :

  • gulp-clean-css
  • gulp-concat
  • gulp-imagemin
  • gulp-notify
  • gulp-rename
  • gulp-sass
  • gulp-sourcemaps
  • gulp-uglify
// Installer les plugins
npm i gulp-clean-css gulp-concat gulp-imagemin gulp-notify gulp-rename gulp-sass gulp-sourcemaps gulp-uglify -D

Vous disposez à présent d’un package.json complet pour continuer sur notre exemple.

Voici l’arborescence utilisée dans le projet (l’ensemble du code ci-dessous est à placer dans le fichier gulpfile.js) :

Arborescence du projet Gulp 4.

Gulp – déclaration

// Gulp (https://www.npmjs.com/package/gulp)
const gulp        = require('gulp')
// Compile scss to css (https://www.npmjs.com/package/gulp-sass)
const sass        = require('gulp-sass')
// Rename file (https://www.npmjs.com/package/gulp-rename)
const rename      = require('gulp-rename')
// Minify JS with UglifyJS3 (https://www.npmjs.com/package/gulp-uglify)
const uglify      = require('gulp-uglify')
// Minify CSS (https://www.npmjs.com/package/gulp-clean-css)
const cleancss    = require('gulp-clean-css')
// Concat all file, in one (https://www.npmjs.com/package/gulp-concat)
const concat      = require('gulp-concat')
// Images size more small (https://www.npmjs.com/package/gulp-imagemin)
const imagemin    = require('gulp-imagemin')
// Notification on your Mac/PC (https://www.npmjs.com/package/gulp-notify)
const notify      = require('gulp-notify')
// Write ES6 > compile to ES5 (https://www.npmjs.com/package/gulp-babel)
//const babel     = require('gulp-babel')
// Browser Sync (for live render -  (https://www.npmjs.com/package/browser-sync))
const browsersync = require('browser-sync').create()
// Clean folder (https://www.npmjs.com/package/del)
const del         = require('del')
// SourceMaps, add path impacted file (https://www.npmjs.com/package/gulp-sourcemaps)
const sourcemaps  = require('gulp-sourcemaps')

// PATH
const paths = {
    js: {
        src: ['./src/js/**/*.js'],
        dest: './dist/js'
    },
    css: {
        src: ['./src/scss/**/*.scss'],
        dest: './dist/css'
    },
    images: {
        src: ['./src/images/**/*'],
        dest: './dist/images'
    },
    html: {
        src: ['./*.html']
    }
}

Gulp – Css

const styles = () =>
    gulp.src(paths.css.src)
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sass().on('error', sass.logError))
        .pipe(cleancss())
        .pipe(concat('styles.css'))
        .pipe(rename({ suffix: ".min" }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(paths.css.dest))
        .pipe(browsersync.stream())
        //.pipe(notify("Css ok !"))// JS

Gulp – Js

const scripts = () =>
    gulp.src(paths.js.src)
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(concat('scripts.js'))
        .pipe(rename({ suffix: ".min" }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.js.dest))
        .pipe(browsersync.stream())
        //.pipe(notify("Js ok !"))

Gulp – Images

const images = () =>
    gulp.src(paths.images.src, {since: gulp.lastRun(images)} )
        .pipe(imagemin())
        .pipe(gulp.dest(paths.images.dest))
        //.pipe(notify("Images ok !"))

Gulp – Browser Sync

Lorsque vous allez réaliser le « npx gulp watch », le « browser sync » sera utilisé et lancera un serveur local sur localhost:3000. Puis l’ensemble des changements réalisés en CSS / JS feront un refresh automatique de votre page localhost:3000.

// BROWSER SYNC (live)
const browserSyncWatch = () => {
    browsersync.init({
        server: { baseDir: "./" },
        // ou proxy: "yourlocal.dev",
        port: 3000
    })
}

Gulp – Supprimer le dossier « dist »

const clean = () => del(['dist'])

Gulp – Watch

Permet de scruter les changements, puis d’exécuter la méthode associée.
Ex : changement JS, alors exécuter la méthode nommée « scripts ».
Ex : changement CSS, alors exécuter la méthode nommée « styles ».
Etc …

const watchFiles = () =>
    gulp.watch(paths.js.src, scripts)
    gulp.watch(paths.css.src, styles)
    gulp.watch(paths.images.src, images)

Gulp – Serie / Parallel

Serie : Va vous permettre d’exécuter en série (=l’un après l’autre) différente méthodes.

Parallel : Va vous permettre d’exécuter en parallèle (=en même temps) différente méthodes.

Ex : watcher ci-dessous va exécuter en parallèle la méthode « watchFiles » et « browserSyncWatch ».

Ex : build ci-dessous va exécuter en série la méthode « clean », puis les 3 méthodes (en parallèle) « styles », « scripts » et « images ».

const watcher = gulp.parallel(watchFiles, browserSyncWatch)
const build = gulp.series(clean, gulp.parallel(styles, scripts, images));

Gulp – Exports

exports.watch = watcher         // exec with : npx gulp watcher
exports.default = build         // exec with : npx gulp

Gulp – Exécution / Utilisation

L’utilisation de gulp ce fera simple en exécutant la commande ci-dessus depuis votre projet :

// Pour tout lancer
npx gulp

// Pour lancer uniquement le script nommé "watch"
npx gulp watch

Gulp – Résultat du « npx gulp watch »

Exécution de "Gulp watch" dans le terminal.

GitHub

Récupérer l’exemple ci-dessus depuis GitHub : eewee-gulp-4
Repository officiel de Gulp : https://github.com/gulpjs/gulp
Documentation de Gulp 4 : https://gulpjs.com/docs/en/api/concepts

Voir aussi l’article sur Gulp 3 :

Cet article Gulp 4 – tuto initiation est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Bitbucket deploy avec un pipeline

$
0
0

Bitbucket vous permet de réaliser un déploiement de votre master depuis un pipeline. Vous allez ainsi pouvoir suite à un commit sur votre master, envoyer votre code sur le serveur de votre choix.
Comment réaliser cela depuis Bitbucket.org et un serveur ionos.fr ?

Configuration bitbucket :

  • Activer la gestion du pipeline (Settings > Settings > Enable Pipelines).
  • Créer un fichier bitbucket-pipelines.yml avec le contenu suivant :
pipelines:
  default:
    - step:
        name: Deploy to test
        deployment: test
        script:
          - pipe: atlassian/sftp-deploy:0.5.3
            variables:
              USER: $USER
              SERVER: $SERVER
              REMOTE_PATH: $REMOTE_PATH
              # PASSWORD: $PASSWORD
              # LOCAL_PATH: '<string>' # Optional.
              # SSH_KEY: '<string>' # Optional.
              # PASSWORD: '<string>' # Optional.
              # EXTRA_ARGS: '<string>' # Optional.
              # DEBUG: '<boolean>' # Optional.
  • Créez les variables suivantes (Settings > Repository variables) :
    • USER
    • SERVER
    • REMOTE_PATH
  • Créez une « SSH key » en cliquant sur « Generate keys » (Settings > SSH keys).
  • Et ajoutez votre host puis cliquez sur « Fetch » et une fois l’IP trouvée, faire « Add host ».
  • Vous allez pouvoir utiliser la « Public key » dans la configuration ionos ci-dessous.

Configuration ionos :

  • Placez-vous dans le dossier de votre projet.
  • Créez un dossier .ssh (chmod : 700).
  • Créer un fichier .ssh/authorized_keys (chmod : 600).
  • Copier la « Public key » générée depuis bitbucket et la coller dans authorized_keys.

Utiliser le pipeline :

  • Lorsque vous allez réaliser un commit sur votre master, cela va activer l’exécution du pipeline et ainsi envoyer le contenu du repository sur votre serveur (ici j’ai utilisé un serveur ionos).
  • Vous pouvez aussi lancer manuellement le pipeline si besoin (avec des tests, etc …).
    « https://bitbucket.org/{user}/{project}/addon/pipelines/home » puis « Run pipeline ».

Bitbucket-pipeline.yml que j’ai utilisé.
Simple et efficace.

https://bitbucket.org/atlassian/sftp-deploy/src/master/

Cet article Bitbucket deploy avec un pipeline est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Bitbucket deploy avec RSYNC

$
0
0

Bitbucket, comme vu dans l’article précédent vous permet de déployer une branche master de votre repository depuis un pipeline. Vous commitez sur une branche x, et cela déploie.
Comment réaliser cela depuis Bitbucket.org et un serveur ionos.fr ou ovh ?

Configuration bitbucket :

  • Activer la gestion du pipeline (Settings > Settings > Enable Pipelines).
  • Créer un fichier bitbucket-pipelines.yml avec le contenu suivant :
pipelines:
  default:
    - step:
        name: Deploy to develop
        deployment: develop
        script:
          - pipe: atlassian/rsync-deploy:0.4.0
            variables:
              USER: $USER
              SERVER: $SERVER
              REMOTE_PATH: $REMOTE_PATH_DEVELOP
              LOCAL_PATH: $LOCAL_PATH
              EXTRA_ARGS: '--exclude-from=bitbucket-pipeline-exclude.txt'

  branches:
    staging:
      - step:
          name: Deploy to staging
          deployment: staging
          script:
            - pipe: atlassian/rsync-deploy:0.4.0
              variables:
                USER: $USER
                SERVER: $SERVER
                REMOTE_PATH: $REMOTE_PATH_STAGING
                LOCAL_PATH: $LOCAL_PATH
                EXTRA_ARGS: '--exclude-from=bitbucket-pipeline-exclude.txt'

    master:
      - step:
          name: Deploy to production
          deployment: production
          script:
            - echo "---- production ----"
      - step:
          name: Manual step FOR PROD
          trigger: manual # Step runs if you click the 'Run' button
          script:
            - pipe: atlassian/rsync-deploy:0.4.0
              variables:
                USER: $USER
                SERVER: $SERVER
                REMOTE_PATH: $REMOTE_PATH_PROD
                LOCAL_PATH: $LOCAL_PATH
                EXTRA_ARGS: '--exclude-from=bitbucket-pipeline-exclude.txt'

#    feature/*:
#      - step:
#          name: Deploy to feature
#          deployment: feature
#          script:
#            - echo "Lance uniquement pour nom de branche qui commence par 'feature/*' (ex. feature/lorem-ipsum)."

NB :
Vous pouvez déployer à partir d’une branche commençant par « feature/xxx », avec xxx qui correspond à votre nom de branche spécifique (préfixé de « feature/ »).

Dans l’exemple ci-dessus, la « prod » le pipeline ne pourra être finalisé que « manuellement ».

Le fichier bitbucket-pipeline-exclude.txt contient :
.git
README.md
bitbucket-pipelines.yml
bitbucket-pipeline-exclude.txt

  • Créez les variables suivantes (Settings > Repository variables) :
    • USER (ex : u12345678)
    • SERVER (ex : home123456789.1and1-data.host)
    • REMOTE_PATH_DEVELOP (ex : /kunden/homepages/12/d123456789/htdocs/monsite_develop/)
    • REMOTE_PATH_STAGING (ex : /kunden/homepages/12/d123456789/htdocs/monsite_staging/)
    • REMOTE_PATH_PROD (ex : /kunden/homepages/12/d123456789/htdocs/monsite_prod/)
    • LOCAL_PATH (ex : .)
  • La variable PASSWORD n’est pas utilisée si vous prenez le choix d’une connexion via « SSH Key » (donc supprimez là de votre liste de variable).
  • Créez une « SSH key » en cliquant sur « Generate keys » (Settings > SSH keys).
  • Et ajoutez votre host puis cliquez sur « Fetch » et une fois l’IP trouvée, faire « Add host ».
  • Vous allez pouvoir utiliser la « Public key » dans la configuration ionos ci-dessous.

Configuration Ionos / OVH :

  • Placez-vous à la racine de votre serveur.
  • Créez un dossier .ssh (chmod : 700).
  • Créer un fichier .ssh/authorized_keys (chmod : 600).
  • Copier la « Public key » générée depuis bitbucket et la coller dans authorized_keys.

Utiliser le pipeline :

  • Lorsque vous allez réaliser un commit sur votre master, cela va activer l’exécution du pipeline et ainsi envoyer le contenu du repository sur votre serveur (ici j’ai utilisé un serveur ionos, idem sur ovh).
  • Vous pouvez aussi lancer manuellement le pipeline si besoin (avec des tests, etc …).
    « https://bitbucket.org/{user}/{project}/addon/pipelines/home » puis « Run pipeline ».

Bitbucket-pipeline.yml que j’ai utilisé.
Simple et efficace.

https://bitbucket.org/atlassian/rsync-deploy

Cet article Bitbucket deploy avec RSYNC est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Makefile et WordPress

$
0
0

Comment utiliser WordPress en local ? Comment déployer WordPress sur un serveur distant ? Comment importer un site WordPress d’un serveur, en local ? Autant de questions que nous allons développer dans cette article.

Makefile et WP-CLI

1er chose dont vous allez avoir besoin est d’installer WP-CLI.
Puis de générer un fichier « makefile » (sans extension, nommez le uniquement « makefile »).
Et d’ouvrir un « terminal » et appeler la commande « make xxx » (où xxx est a adapter en fonction de la commande désirée du fichier « makefile »).
Voyons cela par des exemples ci-dessous.

Installer WordPress en local

L’ensemble des commandes $(call message_primary, « xxx »), sont optionnelles. Elles sont utilisées pour mieux se repérer dans le terminal.

$(call message_primary, "DOWNLOAD WP")
wp core download --locale=fr_FR --force

On télécharge la version Française de WordPress.

$(call message_primary, "VERSION WP")
wp core version

On affiche la version installée.

$(call message_primary, "CONFIG DATABASE")
wp core config \
	--dbhost=$(dbhost_local) \
	--dbname=$(dbname_local) \
	--dbuser=$(dbuser_local) \
	--dbpass=$(dbpass_local) \
	--dbprefix=$(dbprefix_local) \
	--locale=fr_FR \
	--skip-check

On configure la « base de données » que l’on souhaite utiliser.
Ici j’ai utilisé des variables $(dbhost_local), $(dbname_local), etc …
Vous pouvez les retrouver dans la présentation complète du code source sur GitHub.com/eewee/makefile.

$(call message_primary, "CREATE DB")
wp db create

On crée la « base de données » (suite à sa configuration précédente).

$(call message_primary, "INSTALL WP")
wp core install \
	--url=$(domain_local) \
	--title=Test \
	--admin_user=$(admin_user_local) \
	--admin_password=$(admin_password_local) \
	--admin_email=$(admin_email_local) \
	--skip-plugins=hello \
	--skip-themes=twentyfifteen,twentysixteen,twentyseventeen,twentynineteen,twentytwenty

On installe WordPress en fournissant quelques configurations :

  • Url du site
  • Titre du WordPress
  • Identifiant / Mot de passe
  • Email de l’admin du site WordPress
  • Etc …
$(call message_primary, "INSTALL PLUGINS")
wp plugin install contact-form-7 --activate
wp plugin install wordpress-seo --activate
wp plugin install updraftplus

On installe des plugins. Ici contact-form-7 et wordpress-seo sont téléchargés et activé. Et updraftplus est juste téléchargé.

$(call message_primary, "INSTALL THEME")
wp theme install twentytwenty --activate

On installe le thème twentytwenty (téléchargement et activation).
Vous pouvez utiliser un autre thème comme astra.
Dans ce cas indiquez « wp theme install astra –activate ».

$(call message_primary, "PAGES CREATE - accueil / blog / contact / mentions megales")
wp post create --post_type=page --post_title='Accueil' --post_status=publish
wp post create --post_type=page --post_title='Blog' --post_status=publish
wp post create --post_type=page --post_title='Contact' --post_status=publish
wp post create --post_type=page --post_title='Mentions Legales' --post_status=publish

On crée quelques pages (ici accueil, blog, contact et mentions légales).
Et on publie l’ensemble.

$(call message_primary, "ARTICLES CREATE : FAKER")
curl -N http://loripsum.net/api/5 | wp post generate --post_content --count=5 --post_date='2020-01-15 04:35:45'

On crée quelques articles (ici 5 articles depuis l’api de loripsum.net, avec une date de publication).

$(call message_primary, "CONFIG SET PAGE - selectionner page accueil / article")
wp option update show_on_front page
wp option update page_on_front 4
wp option update page_for_posts 5

On indique l’id de la home et des articles à utiliser.

$(call message_primary, "CONFIG MENU")
wp menu create "Menu Principal"
wp menu item add-post menu-principal 3
wp menu item add-post menu-principal 4
wp menu item add-post menu-principal 5
wp menu item add-post menu-principal 6

On crée le menu et indique les pages à ajouter à ce dernier.

$(call message_primary, "SUPPRIMER : plugin - theme - articles exemples")
wp option update blogdescription ''
wp post delete 1 --force
wp post delete 2 --force
wp theme delete twentynineteen
wp theme delete twentyseventeen
wp plugin delete hello

On fait un peu de nettoyage.
On supprime l’article 1 et 2 ainsi que les commentaires associés.
On supprime les thèmes inutiles.
On supprime les plugins inutiles.

$(call message_primary, "UTILISER PERMALIENS")
wp option get permalink_structure
wp option update permalink_structure '/%postname%'
wp rewrite flush --hard

On change la structure du permalien que l’on souhaite utilisée.
Ici %postname% sera utilisé.

NB : Si cela ne fonctionne pas chez vous, pas de panique, vous devez juste allez dans l’admin de votre WordPress > Réglages > Permaliens > Cocher « Structure personnalisée » et valider.

$(call message_primary, "CATEG et TAG - update")
wp option update category_base theme
wp option update tag_base sujet

On met à jour une « catégorie » et un « tag ».

$(call message_primary, "GIT - init")
git init
git add -A
git commit -m "Initial commit" > /dev/null 2>&1

Optionnel :
On peut initialiser GIT.

$(call message_primary, "OPEN PAGES - accueil et admin")
open "http://"$(domain_local)
open "http://"$(domain_local)"/wp-admin"

Optionnel :
On peut ouvrir le front et back de WordPress.

Comment exécuter l’installation de WordPress en local :
Si vous utilisez le fichier « makefile » du repo Github.com/eewee/makefile, alors lancer un terminal, placez-vous dans le répertoire où se situe le fichier « makefile », et lancer la commande « make install_local« .

Importer WordPress

import: ## Importe les fichiers distants
	rsync -av $(ssh):$(path_distant) $(path_local) \
		--exclude wp-config.php # > /dev/null 2>&1

On utilise rsync pour importer les fichiers distants sur sa machine local.

NB : On exclut le fichier wp-config.php qui sera différent pour votre config local. A vous d’ajuster les informations de db la 1er fois dans un fichier wp-config.php personnalisé.

dbimport: ## Recupere db (depuis le serveur)
	ssh $(ssh) "cd $(path_distant); wp db export --add-drop-table dump.sql"
	rsync -av $(ssh):$(path_distant)dump.sql $(path_local)
	ssh $(ssh) "rm $(path_distant)dump.sql"
	wp db import dump.sql
	wp search-replace '$(domain_distant)' '$(domain_local)'
	rm dump.sql

On import la db distante en local (il faut que votre fichier local wp-config.php dispose de la configuration de votre db local).
Dans les grandes lignes on réalise :

  • Connexion SSH au serveur distant
  • Export db distante dans un fichier nommé dump.sql
  • On récupère le fichier dump.sql du serveur distant, pour le copier en local
  • On supprime le fichier dump.sql du serveur distant
  • On import le fichier dump.sql sur notre WordPress local
  • On recherche et remplace l’url distante du WordPress par la local
    (cela va rechercher la chaîne, la dé-sérialiser, la changer, la sérialiser)
  • On supprime le fichier dump.sql de votre machine locale

Exporter WordPress

deploy: ## Deploie new version de l'application
	rsync -av $(path_local) $(ssh):$(path_distant) \
		--exclude Makefile \
		--exclude .git \
		--exclude .idea \
		--exclude .DS_Store \
		--exclude .htaccess \
		--exclude wp-config.php \
		--exclude /wp-admin \
		--exclude /wp-includes \
		--exclude /wp-content/uploads

On utilise rsync pour expoter les fichiers de sa machine local sur le serveur distant.

NB : On exclut le fichier Makefile, .htaccess, wp-config.php et dossier .git, .idea, .DS_Store, wp-admin, wp-includes, wp-content/uploads. A vous de compléter selon vos besoins.

dbdeploy: ## Envoie les donnees sur le serveur
	wp db export --add-drop-table dump.sql
	rsync -av $(path_local)dump.sql $(ssh):$(path_distant)
	ssh $(ssh) "cd $(path_distant); wp db import dump.sql; wp search-replace '$(domain_local)' '$(domain_distant)'; rm dump.sql"
	rm dump.sql

On exporter la db local sur le serveur distant.
Dans les grandes lignes on réalise :

  • On export la db local dans un fichier nommé dump.sql
  • On envoie le dump.sql (local) sur le serveur distant
  • On se connecte au serveur distant, dans le dossier approprié
  • On import le fichier dump.sql du serveur distant
  • On remplace l’url du site local, par celle du site distant
  • On supprime le fichier dump.sql du serveur distant
  • On supprime le fichier dump.sql présent sur votre machine

Code source du fichier « makefile »

#--------------------------------------------------------------------------------------------------
# BUT :
# - Permet de mettre à jour un wordpress distant.
# - Exemple ci-dessous sur un serveur 1and1 mutualisé.
#
# NOTES :
# - Il faut obligatoirement des TAB pour l'indentation des lignes.
# - A executer sur votre machine local.
# - Commande (taper votre mot de passe SSH + valider ou utiliser /.ssh/authorized_keys sur votre serveur) : 
#   - make help
#   - make dev
#   - make import
#   - etc ...
#   Ou avec variable :
#   - make import mavariable=value
#   - etc ...
# - Lors de la 1er utilisation vous devez :
#   - Creer manuellement une db local (puis un : make dbimport, pour importer la db distante)
#   - Telecharger wp-config.php du serveur distant. L'adapter avec votre db local : 
#	  - DB_NAME: ma_new_db
#	  - DB_USER: root
#	  - DB_PASSWORD: root
#	  - DB_HOST: 127.0.0.1:3306
# 
# IMPORTANT : Si vous utilisez un vhost
# - Edit .htaccess local
# - Changer "RewriteBase /" par "RewriteBase /votre_dossier_dans_htdocs/"
# - Ex : "RewriteBase /mon_site/" (avec mon_site qui est le dossier sur lequel pointe votre vhost)
# 
# DOCUMENTATION :
# - https://makefiletutorial.com
#--------------------------------------------------------------------------------------------------

# ENV: dev, prod
ENV=dev
ssh=u12345678@home123456789.1and1-data.host
error_custom=---- ENV:$(ENV) ----
VERSION_MAKEFILE=1.1

# Seulement utilise pour une nouvelle installation de WP (en local)
admin_email_local=wp_test_makefile@tld.com
admin_user_local=admin
admin_password_local=admin
dbhost_local=127.0.0.1:3306
dbname_local=wp_test_$(shell date +%Y-%m-%d_%H-%M-%S)
dbuser_local=root
dbpass_local=root
dbprefix_local=wTESTp_

ifeq ($(ENV), dev)
	# Utilise pour replace en db (sans le protocole "http(s)://"):
	domain_distant=dev.monSite.com
	domain_local=127.0.0.1:80/test_makefile

	path_distant=~/monsite_com_dev/
	path_local=./

else ifeq ($(ENV), prod)
	# Utilise pour replace en db (sans le protocole "http(s)://"):
	domain_distant=www.monSite.com
	domain_local=127.0.0.1:80/test_makefile

	path_distant=~/monsite_com_prod/
	path_local=./

else
	error_custom=---- Erreur choix ENV ----
endif

#---------------------------------------------------------------
# COLOR
# ex: 	@echo "${_BOLD}${_UNDER}${_ICYAN}Hello World${_END}"
#---------------------------------------------------------------

# This is a minimal set of ANSI/VT100 color codes
_END=\x1b[0m
_BOLD=\x1b[1m
_UNDER=\x1b[4m
_REV=\x1b[7m

# Colors
_GREY=\x1b[30m
_RED=\x1b[31m
_GREEN=\x1b[32m
_YELLOW=\x1b[33m
_BLUE=\x1b[34m
_PURPLE=\x1b[35m
_CYAN=\x1b[36m
_WHITE=\x1b[37m

# Inverted, i.e. colored backgrounds
_IGREY=\x1b[40m
_IRED=\x1b[41m
_IGREEN=\x1b[42m
_IYELLOW=\x1b[43m
_IBLUE=\x1b[44m
_IPURPLE=\x1b[45m
_ICYAN=\x1b[46m
_IWHITE=\x1b[47m

#---------------------------------------------------------------
# DETECT OS
#---------------------------------------------------------------
os_custom=""
ifeq ($(OS), Windows_NT)
	os_custom=windows
else ifeq ($(OS), Darwin)
	os_custom="mac"
else
	os_custom=""
endif

#---------------------------------------------------------------
# FONCTION
#---------------------------------------------------------------

# Appeler la fonction : $(call message_primary, "Votre message ici")
# @param $(1) votre message ici
# @return string
define message_primary
	@echo -e "\n${_BOLD}${_BLUE}---- $1 ----${_END}"
endef

# Appeler la fonction : @echo $(call test_fonction_custom, lorem, ipsum)
#test_fonction_custom_2 = Variable Name: $(0) ---- First: $(1) ---- Second: $(2) ---- Empty Variable: $(3)

#---------------------------------------------------------------
# SCRIPT CONFIG (ne rien modifier ci-dessous)
#---------------------------------------------------------------

.PHONY: help config debug dev update install_local import dbimport deploy dbdeploy

help: ## Affiche cette aide
	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'

config: ## Afficher la config actuellement en place
	@echo '#####################################################'
	@echo '# CONFIG CURRENT (v$(VERSION_MAKEFILE)) :'
	@echo '#####################################################'
	@echo '# ENV :'
	@echo '#	- $(ENV)'
	@echo '# PATH :'
	@echo '#	- distant: $(path_distant)'
	@echo '#	- local: $(path_local)'
	@echo '# DOMAIN:'
	@echo '#	- distant: $(domain_distant)'
	@echo '#	- local: $(domain_local)'
	@echo '#####################################################'

debug: ## debug custom
	$(error Debug: $(error_custom))

dev: ## Lance le serveur de développement
	php -S localhost:8000 -d display_errors=1

update: ## LOCAL : update core and plugins all
	wp core update
	wp plugin update --all

test: ## Test : utilisation de fonctions
	$(call test_fonction_custom_1, "loremA", "ipsumA")
	@echo $(call test_fonction_custom_2, lorem, ipsum)

test_affiche: ## Afficher : info, warning, error
	$(info test pour afficher un simple message)
	$(warning test pour afficher un warning)
	$(error test pour afficher une erreur + exit)

test_color: ## Afficher : texte avec couleur (font or background)
	@echo "${_BOLD}${_GREY}Hello World${_END}"
	@echo "${_BOLD}${_GREEN}Hello World${_END}"
	@echo "${_BOLD}${_RED}Hello World${_END}"
	@echo "${_BOLD}${_YELLOW}Hello World${_END}"
	@echo "${_BOLD}${_BLUE}Hello World${_END}"
	@echo "${_BOLD}${_PURPLE}Hello World${_END}"
	@echo "${_BOLD}${_CYAN}Hello World${_END}"
	@echo "${_BOLD}${_WHITE}Hello World${_END}"

#---------------------------------------------------------------
# NEW INSTALL WP (en local)
#---------------------------------------------------------------
install_local: ## Installer une nouvelle version de WordPress (en local)
	$(call message_primary, "DOWNLOAD WP")
	wp core download --locale=fr_FR --force

	$(call message_primary, "VERSION WP")
	wp core version

	$(call message_primary, "CONFIG DATABASE")
	wp core config \
		--dbhost=$(dbhost_local) \
		--dbname=$(dbname_local) \
		--dbuser=$(dbuser_local) \
		--dbpass=$(dbpass_local) \
		--dbprefix=$(dbprefix_local) \
		--locale=fr_FR \
		--skip-check

	$(call message_primary, "CREATE DB")
	wp db create

	$(call message_primary, "INSTALL WP")
	wp core install \
		--url=$(domain_local) \
		--title=Test \
		--admin_user=$(admin_user_local) \
		--admin_password=$(admin_password_local) \
		--admin_email=$(admin_email_local) \
		--skip-plugins=hello \
		--skip-themes=twentyfifteen,twentysixteen,twentyseventeen,twentynineteen,twentytwenty

	#$(call message_primary, "INSTALL PLUGINS")
	#wp plugin install jetpack --activate
	#wp plugin install contact-form-7 --activate
	#wp plugin install wordpress-seo --activate
	#wp plugin install updraftplus --activate
	#wp plugin install backwpup

	$(call message_primary, "INSTALL THEME")
	#wp theme install astra --activate
	wp theme install twentytwenty --activate

	$(call message_primary, "PAGES CREATE - accueil / blog / contact / mentions megales")
	wp post create --post_type=page --post_title='Accueil' --post_status=publish
	wp post create --post_type=page --post_title='Blog' --post_status=publish
	wp post create --post_type=page --post_title='Contact' --post_status=publish
	wp post create --post_type=page --post_title='Mentions Legales' --post_status=publish

	$(call message_primary, "ARTICLES CREATE : FAKER")
	curl -N http://loripsum.net/api/5 | wp post generate --post_content --count=5 --post_date='2020-01-15 04:35:45'

	$(call message_primary, "CONFIG SET PAGE - selectionner page accueil / article")
	wp option update show_on_front page
	wp option update page_on_front 4
	wp option update page_for_posts 5

	$(call message_primary, "CONFIG MENU")
	wp menu create "Menu Principal"
	wp menu item add-post menu-principal 3
	wp menu item add-post menu-principal 4
	wp menu item add-post menu-principal 5
	wp menu item add-post menu-principal 6

	$(call message_primary, "SUPPRIMER : plugin - theme - articles exemples")
	wp option update blogdescription ''
	wp post delete 1 --force
	wp post delete 2 --force
	wp theme delete twentynineteen
	wp theme delete twentyseventeen
	wp plugin delete hello

	$(call message_primary, "UTILISER PERMALIENS")
	wp option get permalink_structure
	wp option update permalink_structure '/%postname%'
	wp rewrite flush --hard

	$(call message_primary, "CATEG et TAG - update")
	wp option update category_base theme
	wp option update tag_base sujet

ifeq ($(os_custom), mac)
	$(call message_primary, "GIT - init")
	git init
	git add -A
	git commit -m "Initial commit" > /dev/null 2>&1
endif

	$(call message_primary, "OPEN PAGES - accueil et admin")
ifeq ($(os_custom), windows)
	@echo -e "windows"
	start "http://"$(domain_local)
	start "http://"$(domain_local)"/wp-admin"
else
	@echo -e "mac"
	open "http://"$(domain_local)
	open "http://"$(domain_local)"/wp-admin"
endif

#---------------------------------------------------------------
# IMPORT (en local)
#---------------------------------------------------------------

import: ## Importe les fichiers distants
	rsync -av $(ssh):$(path_distant) $(path_local) \
		--exclude wp-config.php # > /dev/null 2>&1

dbimport: ## Recupere db (depuis le serveur)
	ssh $(ssh) "cd $(path_distant); wp db export --add-drop-table dump.sql"
	rsync -av $(ssh):$(path_distant)dump.sql $(path_local)
	ssh $(ssh) "rm $(path_distant)dump.sql"
	wp db import dump.sql
	wp search-replace '$(domain_distant)' '$(domain_local)' --dry-run
	wp search-replace '$(domain_distant)' '$(domain_local)'
	rm dump.sql

#---------------------------------------------------------------
# EXPORTER/DEPLOYER (vers serveur distant)
#---------------------------------------------------------------

deploy: ## Deploie new version de l'application
	rsync -av $(path_local) $(ssh):$(path_distant) \
		--exclude Makefile \
		--exclude .git \
		--exclude .idea \
		--exclude .DS_Store \
		--exclude .htaccess \
		--exclude wp-config.php \
		--exclude /wp-admin \
		--exclude /wp-includes \
		--exclude /wp-content/uploads

dbdeploy: ## Envoie les donnees sur le serveur
	wp db export --add-drop-table dump.sql
	rsync -av $(path_local)dump.sql $(ssh):$(path_distant)
	ssh $(ssh) "cd $(path_distant); wp db import dump.sql; wp search-replace '$(domain_local)' '$(domain_distant)'; rm dump.sql"
	rm dump.sql

Source : https://github.com/eewee/Makefile/blob/master/wordpress/Makefile

Cet article Makefile et WordPress est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Cypress c’est quoi ?

$
0
0

A quoi sert Cypress ?
Comment je peux l’utiliser sur mon site internet, solution saas ?
Nous allons nous efforcer de répondre à ces questions dans cet article.

Test unitaire

Un test unitaire va vous permettre de vérifier des unités individuelles (1 fonction unique, 1 class, …). Pour cela vous fournissez 1 entrée et vérifiez que la sortie est bien conforme au résultat attendu.
NB : une fonction courte = un test unitaire simple 🙂

Cypress n’est pas là pour réaliser des tests unitaires.

Test d’intégration

Vérifier que l’ensemble du code fonctionne correctement.
Ici on ne teste plus uniquement une fonction, classe, etc …
Mais la globalité.

Test unitaire = individuellement cela fonctionne.
Test d’intégration = MAIS, l’ensemble ne fonctionne pas.
2 tests unitaires, 0 test d’intégration.
Test unitaire VS Test d’intégration.

Test fonctionnel

Aussi appelé « Test de bout en bout », « End to end » ou « e2e ».

Il s’agit des tests que Cypress va s’occuper.
Donc avec Cypress vous allez pouvoir vérifier des scénarios complets en contexte réel.

Exemple vous pouvez réaliser un scénario qui va :

  • Ce connecter sur votre solution SAAS.
  • Cliquez sur un client de votre solution CRM.
  • La fiche du client est bien chargée.

Exemple pour un site eCommerce (back) :

  • Ce connecter sur votre site eCommerce.
  • Cliquez sur « nouveau produit » de votre solution eCommerce.
  • Remplir les informations de votre produit (Nom, description, prix, catégorie, …).
  • Sauvegarder.
  • Visualisation de la fiche produit.
  • Vérifier l’exactitude des données ajoutés précédemment.

Exemple pour un site eCommerce (front) :

  • Accéder à l’url du site eCommerce.
  • Recherche un produit X.
  • Ajouter une quantité de 2.
  • Ajouter au panier.
  • Allez sur le panier.
  • Vérifier que le produit X est présent avec une quantité de 2.
  • Passer au tunnel d’achat.
  • Ajouter un code promo.
  • Payer le panier avec Stripe.

Cypress vous permet de réaliser cela, ainsi que :

  • Du test multi-navigateur (chrome, firefox, edge, electron, canary, …), pour vérifier si votre site internet, solution saas, application mobile se comporte comme prévu du début à la fin.
    En savoir +
  • L’intégration des tests fonctionnels dans votre CI
    (Jenkins, Travis CI, Circle CI, Docker).
    En savoir +
  • 1 prise de screenshot lorsqu’un test est en erreur.
  • 1 prise d’une vidéo permettant de retracer l’erreur.
    En savoir +
  • Le déploiement d’un rapport d’erreur sur un dashboard.
    Cela permettra aux membres de votre équipe de mieux comprendre l’origine d’un point bloquant (image, vidéo, …).
  • L’exécution des tests en parallèle.
  • etc …

Les sites sont de plus en plus complexe et demande un temps conséquent pour la réalisation de tests. Les tests fonctionnels sont importants car ils sont les seuls tests vous permettant de vérifier le bon déroulement de l’application d’un point de vue métier.

Je dois faire quoi alors ?

Installer Cypress

1er Etape : Vous devez installer Cypress.
npm install cypress
En savoir +

Ecrire vos tests Cypress

2ème Etape : Vous devez écrire vos tests Cypress.
Cf documentation

Lancer vos tests Cypress

3ème Etape : Exécuter vos tests Cypress depuis l’interface graphique ou en headless (=uniquement dans votre terminal).

Dashboard Cypress

4ème Etape : Consulter votre dashboard pour voir les points bloquants.

Commandes Cypress à retenir

Pour exécuter les tests :

$(npm bin)/cypress run
# ou
./node_modules/.bin/cypress run
# ou
npx cypress run
# ou 
npm run cypress:open

Pour exécuter les tests sur le navigateur Firefox :

cypress run --browser firefox

Pour exécuter le test lorem.js :

cypress run --spec "cypress/integration/lorem.js"

Pour supprimer le cache de Cypress :

cypress cache clear
cypress install

Pour exécuter les tests Cypress + Dashboard :

cypress run --record --key votre_key_a_placer_ici

# tip - pour ne pas indiquer la key à chaque fois :
# export CYPRESS_RECORD_KEY=votre_key_a_placer_ici
# cypress run --record

En savoir +

Fichier environnement Cypress

Fichier cypress.json :
projectId est utilisé pour le Dashboard « made in Cypress ».

{
   "viewportWidth": 1280,
   "viewportHeight": 1020,
   "baseUrl": "http://urlDeVotreSite.com",
   "defaultCommandTimeout": 20000,
   "videoUploadOnPasses": false,
   "env" : {
       "maVariable01"  : "aaa",
       "maVariable02"  : "bbb",
       "maVariable03"  : "ccc"
   },
   "projectId": "xxxxxx"
}

Fichier cypress.env.json :
Ce fichier vous permet de surcharger la config de base cypress.json.

{
    "maVariable01"  : "aaa",
    "maVariable02"  : "bbb",
    "maVariable03"  : "ccc"
}

Exemple de code Cypress

Attendre 2 secondes :

cy.wait(2000)

Remplir un champ :

cy.get("#formClient .email").type("contact@tld.com")

Remplir un champ et soumettre le formulaire :

cy.get("#formClient .email").type("contact@tld.com{enter}")

Soumettre un formulaire :

cy.get("#formClient").submit()

Voir plus d’exemples de code Cypress

Utiliser un faker avec Cypress

Installer le faker :

yarn add cypress faker --dev

Importer le dans votre code :

import faker from "faker"

L’utiliser dans votre code :

faker.internet.email()
faker.internet.password()

Documentation faker : Github, Marak, Generator.

Autres solutions de test fonctionnel

Puppeteer est une solution intéressante à suivre, dans le cas où Cypress a attriré votre attention sur la réalisation de test e2e :

Cet article Cypress c’est quoi ? est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Utiliser un faker PHP

$
0
0

Lorsqu’on doit réaliser un site web, une landing page, une solution SAAS, on doit remplir certaines sections par du « Lorem ipsum ». Pour cela différentes solutions existent. Nous allons présenter une solution qui utilise PHP.

On va utiliser le faker PHP de fzaninotto.
Il s’agit d’une librairie permettant de générer de fausse donnée.
Cela s’avère utile lorsqu’on souhaite remplir une base de donnée, présenter une landing page, une maquette, un fichier XML, etc …

Installer un faker en PHP

composer require fzaninotto/faker

Utiliser un faker en PHP

<?php
require_once 'vendor/autoload.php';

// Instance
$faker = Faker\Factory::create('fr_FR');

// 'Lucy Cechtelar';
echo $faker->name;

// "426 Jordy Lodge Cartwrightshire, SC 88120-6700"
echo $faker->address;

// Dolores sit sint laboriosam dolorem culpa et ...
echo $faker->text;

1er Etape : instancier le faker.
2ème Etape : appeler les différents fake (nom, prenom, adresse, …).

$faker->seed(123);
// Suite du code

L’utilisation de la méthode seed() pour utiliser le même jeu de donnée.

Formateurs

Vous pouvez utiliser un très grand nombre de format :

  • Texte Lorem ipsum (mot, groupe de mot, paragraphe)
  • Information sur une personne (civilité)
  • Information sur une société (nom, fonction du poste, …)
  • Adresse (adresse, ville, cp, pays, latitude, longitude, …)
  • Numéro de téléphone (tel standard, avec indicatif, …)
  • Date / heure (différent format
  • Donnée internet (email, username, mdp, domaine, extension, url, slug, ipv4, ipv6, adresse mac, …)
  • UserAgent (chrome, firefox, safari, opera, IE)
  • Donnée de paiement (type CB, code CB, code expiration, IBAN, BIC)
  • Couleur (HEX, RGB, …)
  • Fichier
  • Image
  • Uuid
  • Code barre (EAN13, EAN8, ISBN13, ISBN10)
  • Texte HTML
  • etc …

Faker custom

Vous pouvez créer votre propre « Faker Provider » et ainsi pouvoir obtenir des données qui vous sont propre.

Il faut pour cela créer une class qui étend \Faker\Provider\Base dans laquelle vous pouvez ajouter vos méthodes personnelles.

Source : https://github.com/fzaninotto/Faker

Cet article Utiliser un faker PHP est apparu en premier sur Developpeur / integrateur web (Growth Hacker).


Utiliser un BLCheck

$
0
0

Lorsqu’on envoie des emails, il arrive parfois qu’on soit « blacklisté » par des solutions comme Spamhaus, Barracuda, etc … Mais comment savoir de façon automatisé qu’on est « blacklisté » (sans souscrire à un service online).

Monitoring SAAS :

Il suffit d’aller sur l’une des solutions ci-dessous (la configuration est relativement rapide). Vous allez ainsi pouvoir visualiser si votre nom de domaine est blacklisté par x ou y solution.

multirbl.valli.org
MxToolBox.com
correct.email

Monitoring custom :

Nous allons réaliser un script permettant de détecter si une IP est actuellement blacklisté chez un prestataire donnée (Ex : Spamhausbarracuda, CBL, …). Ajoutez l’exécution de votre script dans un cron pour recevoir tous les jours (ou toutes les heures) l’état de votre/vos IP(s).

Comment faire concrètement ?

1er Etape :
Récupérer le script sur GitHub.
https://github.com/eewee/blcheck

2ème Etape :
Changer la valeur de emailTo et emailFrom.

3ème Etape :
Configurer un cron pour exécuter l’url du script en ajoutant en query string ip=votre_adresse_ip_a_tester.

4ème Etape :
Terminé. Vous allez recevoir l’email rapport selon la fréquence choisit.

$ip = $_GET['ip'];
if (!filter_var($ip, FILTER_VALIDATE_IP, FILTER_FLAG_IPV4)) {
  echo 'error ip not valid';
  return false;
}

Ci-dessus :
On récupère l’ip passée en « query string ».
On check qu’il s’agisse d’une IPV4 (sinon on s’arrête ici).

// EMAIL 
$emailTo      = "contact@tld.com";
$emailFrom    = "contact@tld.com";
$emailSubject = "[Blacklist] detection (".$ip.")";

Ci-dessus :
Vous devez indiquer l’adresse email de réception (=emailTo) et d’émission (emailFrom), qui seront utilisées lors de l’envoi du rapport.

// LIST RBL (Realtime Blackhole List)
$rbls = [
    'b.barracudacentral.org',
    'cbl.abuseat.org',
    'http.dnsbl.sorbs.net',
    'misc.dnsbl.sorbs.net',
    'socks.dnsbl.sorbs.net',
    'web.dnsbl.sorbs.net',
    'dnsbl-1.uceprotect.net',
    'dnsbl-3.uceprotect.net',
    'sbl.spamhaus.org',
    'zen.spamhaus.org',
    'psbl.surriel.com',
    'dnsbl.njabl.org',
    'rbl.spamlab.com',
    'noptr.spamrats.com',
    'cbl.anti-spam.org.cn',
    'dnsbl.inps.de',
    'httpbl.abuse.ch',
    'korea.services.net',
    'virus.rbl.jp',
    'wormrbl.imp.ch',
    'rbl.suresupport.com',
    'ips.backscatterer.org',
    'opm.tornevall.org',
    'multi.surbl.org',
    'tor.dan.me.uk',
    'relays.mail-abuse.org',
    'rbl-plus.mail-abuse.org',
    'access.redhawk.org',
    'rbl.interserver.net',
    'bogons.cymru.com',
    'bl.spamcop.net',
    'dnsbl.sorbs.net',
    'dul.dnsbl.sorbs.net',
    'smtp.dnsbl.sorbs.net',
    'spam.dnsbl.sorbs.net',
    'zombie.dnsbl.sorbs.net',
    'dnsbl-2.uceprotect.net',
    'pbl.spamhaus.org',
    'xbl.spamhaus.org',
    'bl.spamcannibal.org',
    'ubl.unsubscore.com',
    'combined.njabl.org',
    'dyna.spamrats.com',
    'spam.spamrats.com',
    'cdl.anti-spam.org.cn',
    'drone.abuse.ch',
    'dul.ru',
    'short.rbl.jp',
    'spamrbl.imp.ch',
    'virbl.bit.nl',
    'dsn.rfc-ignorant.org',
    'dsn.rfc-ignorant.org',
    'netblock.pedantic.org',
    'ix.dnsbl.manitu.net',
    'rbl.efnetrbl.org',
    'blackholes.mail-abuse.org',
    'dnsbl.dronebl.org',
    'db.wpbl.info',
    'query.senderbase.org',
    'bl.emailbasura.org',
    'combined.rbl.msrbl.net',
    'multi.uribl.com',
    'black.uribl.com',
    'cblless.anti-spam.org.cn',
    'cblplus.anti-spam.org.cn',
    'blackholes.five-ten-sg.com',
    'sorbs.dnsbl.net.au',
    'rmst.dnsbl.net.au',
    'dnsbl.kempt.net',
    'blacklist.woody.ch',
    'rot.blackhole.cantv.net',
    'virus.rbl.msrbl.net',
    'phishing.rbl.msrbl.net',
    'images.rbl.msrbl.net',
    'spam.rbl.msrbl.net',
    'spamlist.or.kr',
    'dnsbl.abuse.ch',
    'bl.deadbeef.com',
    'ricn.dnsbl.net.au',
    'forbidden.icm.edu.pl',
    'probes.dnsbl.net.au',
    'ubl.lashback.com',
    'ksi.dnsbl.net.au',
    'uribl.swinog.ch',
    'bsb.spamlookup.net',
    'dob.sibl.support-intelligence.net',
    'url.rbl.jp',
    'dyndns.rbl.jp',
    'omrs.dnsbl.net.au',
    'osrs.dnsbl.net.au',
    'orvedb.aupads.org',
    'relays.nether.net',
    'relays.bl.gweep.ca',
    'relays.bl.kundenserver.de',
    'dialups.mail-abuse.org',
    'rdts.dnsbl.net.au',
    'duinv.aupads.org',
    'dynablock.sorbs.net',
    'residential.block.transip.nl',
    'dynip.rothen.com',
    'dul.blackhole.cantv.net',
    'mail.people.it',
    'blacklist.sci.kun.nl',
    'all.spamblock.unit.liu.se',
    'spamguard.leadmon.net',
    'csi.cloudmark.com',
    'bl.suomispam.net',
];

Ci-dessus :
Il s’agit de la liste des solutions qui sera utilisée pour tester votre IP.

$rev         = join('.', array_reverse(explode('.', trim($ip))));
$i           = 1;
$rbl_count   = count($rbls);
$listed_rbls = [];
foreach ($rbls as $rbl)
{
    printf('Checking %s, %d of %d... ', $rbl, $i, $rbl_count);
    $lookup = sprintf('%s.%s', $rev, $rbl);
    $listed = gethostbyname($lookup) !== $lookup;
    printf('[%s]%s', $listed ? 'LISTED' : 'OK', PHP_EOL);
    echo "<br>";
    if ( $listed )
    {
        $listed_rbls[] = $rbl;
    }
    $i++;
}
echo "<hr>";
printf('%s listed on %d of %d known blacklists%s', $ip, count($listed_rbls), $rbl_count, PHP_EOL);
echo "<hr>";
if ( !empty($listed_rbls) )
{
    printf('%s <b>listed on %s%s</b>', $ip, join(', ', $listed_rbls), PHP_EOL);
    echo "<hr>";

    $emailContent = "
    ip : ".$ip."
    liste sur : ".join(', ', $listed_rbls);
    if (mail($emailTo, $emailSubject, $emailContent, 'from:'.$emailFrom)) {
      echo 'Avertissement';
    } else {
      echo 'Erreur shoot email';
    }
}

Ci-dessus :
On vérifie chaque solution pour savoir si l’IP est blacklistée.
On format comme il faut les données.
On expédie l’email de rapport.

Source :
GitHub > https://github.com/eewee/blcheck
Article > https://www.eewee.fr/etre-blackliste-cest-quoi/

Cet article Utiliser un BLCheck est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Font Awesome c’est quoi ?

$
0
0

Font Awesome est une solution populaire permettant d’afficher des icônes sur votre site, SAAS, app mobile. Nous allons voir comment l’utiliser simplement.

Font Awesome compte plus de 7000 icônes et continue d’ajouter des icônes populaires.

Comment include font awesome ?

1er Etape :
Aller sur la page suivante : https://fontawesome.com/start
Indiquer votre email, puis validé (Send Kit Code).

2ème Etape :
Créer un compte.
Connectez-vous.

3ème Etape :
Créer un « New Kit ».
Vous allez à présent disposer d’un exemple de code pour intégrer Font Awesome.
La balise script est à ajouter avec vos autres appels JS.
Dans l’exemple qu’il donne, le script est placé entre les balises « head ».

4ème Etape :
Afficher un icône.
Pour afficher un icône il vous faut faire votre choix dans la liste de l’ensemble des icônes de Font Awesome.

Exemple de code avec une tasse de café (cf doc Font Awesome) :

  • son nom (en HTML)
  • un glyph (en copiant/collant)
  • la valeur unicode f0f4 (en pseudo-element CSS)

Exemple en pseudo-element CSS :

.login::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f007";
 }

Font Awesome propose aussi une version payante, vous proposant un plus grand nombre d’icône à votre disposition (Regular, Light, Duotone). Certain icône ne pouvant tout simplement pas être utilisé, si vous ne disposez pas d’un compte « PRO ».

Si vous ne souhaitez pas d’un compte « PRO », vous aurez tout de même à votre disposition, plus de 1500 icônes :

Cette vue vous propose une visualisation des icônes filtrés par type (Solid, Regular, Brands) :

Un coup d’oeil sur la doc

On dispose d’un prefixe « fas » et on a choisi d’utiliser l’icône nommé « camera » :

<i class="fas fa-camera"></i>

Idem avec un « span » :

<span class="fas fa-camera"></span>

Le prefixe vous permet de choisir le type à utiliser :

  • fas pour solid (compte FREE) – font-face weight à 900
  • fab pour brands (compte FREE) – font-face weight à 400
  • far pour regular (uniquement sur un compte PRO) – font-face weight à 400
  • fal pour light (uniquement sur un compte PRO) – font-face weight à 300
  • fad pour duotone (uniquement sur un compte PRO) – font-face weight à 900

Vous pouvez choisir la couleur de l’icône :

<span style="font-size: 3em; color: Tomato;">
  <i class="fas fa-camera"></i>
</span>

Vous pouvez choisir la taille de l’icône :

  • fa-xs
  • fa-sm
  • fa-lg
  • fa-2x
  • fa-3x
  • fa-5x
  • fa-7x
  • fa-10x

Exemple :

<i class="fas fa-camera fa-xs"></i>

Exemple :

<div style="font-size: 0.5rem;">
    <i class="fas fa-camera fa-3x"></i>
</div>

ou encore via (grow-x et shrink-x) :

<div class="fa-4x">
    <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
    <i class="fas fa-seedling" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="grow-6" style="background:MistyRose"></i>
</div>

Vous pouvez choisir la rotation de l’icône :

<div class="fa-4x">
    <i class="fas fa-snowboarding"></i>
    <i class="fas fa-snowboarding fa-rotate-90"></i>
    <i class="fas fa-snowboarding fa-rotate-180"></i>
    <i class="fas fa-snowboarding fa-rotate-270"></i>
    <i class="fas fa-snowboarding fa-flip-horizontal"></i>
    <i class="fas fa-snowboarding fa-flip-vertical"></i>
    <i class="fas fa-snowboarding fa-flip-both"></i>
</div>

ou encore via (rotate-x, flip-v et flip-h) :

<div class="fa-4x">
    <i class="fas fa-seedling" data-fa-transform="rotate-90" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="rotate-180" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="rotate-270" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="rotate-30" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="rotate--30" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="flip-v" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="flip-h" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="flip-v flip-h" style="background:MistyRose"></i>
</div>

Vous pouvez ajouter un cercle autour d’un icône :

// Juste un cercle :
// Remplacez "circle" par "square" pour obtenir un rendu carré.
<i class="far fa-circle fa-2x"></i>
// Icône + cercle :
<span class="fa-stack" style="vertical-align: top;">
    <i class="far fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x"></i>
</span>
// Icône + cercle + inversion des couleurs :
<span class="fa-stack" style="vertical-align: top;">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

Besoin d’icône pour une liste ?

<ul class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>xxx</li>
    <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>xxx</li>
    <li><span class="fa-li"><i class="far fa-square"></i></span>xxx</li>
</ul>

Vous pouvez ajuster la position de l’icône (up-x, down-x, left-x et right-x) :

<div class="fa-4x">
    <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="shrink-8 up-.5" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="shrink-8 right-10" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
</div>

Vous pouvez cumuler 2 icônes l’un sur l’autre :

<div class="fa-4x">
    <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
    <i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
    <i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i>
    <i class="fas fa-mask" data-fa-transform="shrink-3 up-1" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
</div>

Divers

Vous pouvez utiliser npm et yarn pour utiliser Font Awesome, bien sûr :

npm install --save @fortawesome/fontawesome-free
// ou
yarn add @fortawesome/fontawesome-free

NB : pour la version PRO c’est par ici.

Pour ceux qui le désirent, vous pouvez héberger sur votre serveur la lib :

Pour les utilisateurs de :

  • WordPress
  • VueJS
  • Angular, Ember, jQuery, Less, React, React Native, Sass, Turbolinks il existe des projets dédiés.

Source : https://github.com/FortAwesome/Font-Awesome

Cet article Font Awesome c’est quoi ? est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

API de géolocalisation

$
0
0

Comment géolocalisé un visiteur ? De nombreuses APIs existent pour cela. Nous allons en présenter plusieurs sur un projet GitHub.

Utiliser une API de géolocalisation

Vous pouvez tester différentes API depuis le script disponible sur GitHub (en pied de page de cette article).

Voici un exemple :

<script>
    $.getJSON('http://www.geoplugin.net/json.gp?jsoncallback=?', function(data) {
        let geo = JSON.stringify(data, null, 2)
        $.each(data, function(i, field) {
            if (i == "geoplugin_regionName") {
                console.log( "Région: " + field );
            }
        })
        console.log(geo);
    });
</script>

Ainsi vous allez pouvoir rapidement tester, et vous faire votre propre opinion sur les résultats indiqués par ces APIs.

Comment cela fonctionne

1er Etape :
Récupérer le script

2ème Etape :
Ouvrir l’url du projet, puis cliquez sur la solution qui vous intéresse.

3ème Etape :
Visualiser le résultat dans la console de votre navigateur.

Exemple de retour :
Ville, CP, département, pays, longitude, latitude, timezone, devise, etc …

API Géolocalisation

<html>
<head>
    <meta charset="UTF-8">
    <title>Geo localisation</title>
</head>
<body>
    <h1>Geo localisation</h1>
    <ul>
        <li><a href="?type=geoplugin">geoplugin</a> http://www.geoplugin.net/json.gp</li>
        <li><a href="?type=geobytes">geobytes</a> http://gd.geobytes.com/GetCityDetails</li>
        <li><a href="?type=geoiplookup">geoiplookup</a> https://json.geoiplookup.io/api</li>
        <li><a href="?type=ipapi">ipapi</a> https://ipapi.co/json/</li>
        <li><a href="?type=ip-api">ip-api</a> http://ip-api.com/json</li>
        <li><a href="?type=ipdata">ipdata</a> https://api.ipdata.com (HS)</li>        
        <li><a href="?type=ipfind">ipfind</a> https://ipfind.co/me?auth=< your api key > (need KEY API)</li>
        <li><a href="?type=ipgeolocation">ipgeolocation</a> https://api.ipgeolocation.io/ipgeo?apiKey=< your api key > (need KEY API)</li>
        <li><a href="?type=ipify">ipify</a> https://api.ipify.org/?format=json</li>
        <li><a href="?type=ipinfodb">ipinfodb</a> https://api.ipinfodb.com/v3/ip-city/?key=< your api key >&format=json (need KEY API)</li>
        <li><a href="?type=ipinfo">ipinfo</a> https://ipinfo.io/json</li>
        <li><a href="?type=ipregistry">ipregistry</a> https://api.ipregistry.co/?key=< your api key > (need KEY API)</li>
        <li><a href="?type=ipstack">ipstack</a> http://api.ipstack.com/< ip address >?access_key=< your api key > (need KEY API)</li>
        <li><a href="?type=jsonip">jsonip</a> https://jsonip.com</li>
        <li><a href="?type=jsontest">json test</a> http://ip.jsontest.com/</li>
        <li><a href="?type=nekudo">nekudo</a> https://geoip.nekudo.com/api</li>
        <li><a href="?type=smartip">smartip</a> https://api.smartip.io/?api_key=< your api key ></li>
    </ul>
    <p>
        NB : check result in console.
    </p>
    
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    
    <?php if (htmlentities($_GET['type']) == "geoplugin") { ?>
        <script>
            $.getJSON('http://www.geoplugin.net/json.gp?jsoncallback=?', function(data) {
                let geo = JSON.stringify(data, null, 2)
                $.each(data, function(i, field) {
                    if (i == "geoplugin_regionName") {
                        console.log( "Région: " + field );
                    }
                })
                console.log(geo);
            });
        </script>
    
    <?php } elseif (htmlentities($_GET['type']) == "geobytes") { ?>
        <script>
            $.getJSON('http://gd.geobytes.com/GetCityDetails?callback=?', function(data) {
                let geo = JSON.stringify(data, null, 2)
                $.each(data, function(i, field) {
                    if (i == "geobytesregion") {
                        console.log( "Région: " + field );
                    }
                })
                console.log(geo);
            });
        </script>
    
    <?php } elseif (htmlentities($_GET['type']) == "geoiplookup") { ?>
        <script>
            $.getJSON('https://json.geoiplookup.io/api?callback=?', function(data) {
                let geo = JSON.stringify(data, null, 2)
                $.each(data, function(i, field) {
                    if (i == "region") {
                        console.log( "Région: " + field );
                    }
                })
                console.log(geo);
            });
        </script>
    
    <?php } elseif (htmlentities($_GET['type']) == "ipapi") { ?>
        <script>
            $.getJSON('https://ipapi.co/json/', function(data) {
                let geo = JSON.stringify(data, null, 2)
                $.each(data, function(i, field) {
                    if (i == "region") {
                        console.log( "Région: " + field );
                    }
                })
                console.log(geo);
            });
        </script>
    
    <?php } elseif (htmlentities($_GET['type']) == "ip-api") { ?>
        <script>
            $.getJSON('http://ip-api.com/json?callback=?', function(data) {
                let geo = JSON.stringify(data, null, 2)
                $.each(data, function(i, field) {
                    if (i == "regionName") {
                        console.log( "Région: " + field );
                    }
                })
                console.log(geo);
            });
        </script>
    
    <?php } elseif (htmlentities($_GET['type']) == "ipdata") { ?>
        <script>
            $.getJSON('https://api.ipdata.co', function(data) {
                let geo = JSON.stringify(data, null, 2)
                console.log(geo);
            });
        </script>
    
    <?php } elseif (htmlentities($_GET['type']) == "ipfind") { ?>
        <script>
            let key_api_ipfind = ""
            $.getJSON('https://ipfind.co/me?auth=' + key_api_ipfind, function(data) {
                let geo = JSON.stringify(data, null, 2)
                console.log(geo);
            });
        </script>

    <?php } elseif (htmlentities($_GET['type']) == "ipgeolocation") { ?>
        <script>
            let key_api_ipfind = ""
            $.getJSON('https://api.ipgeolocation.io/ipgeo?apiKey=' + key_api_ipfind, function(data) {
                let geo = JSON.stringify(data, null, 2)
                console.log(geo);
            });
        </script>

    <?php } elseif (htmlentities($_GET['type']) == "ipify") { ?>
        <script>
            $.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) {
                let geo = JSON.stringify(data, null, 2)
                console.log(geo);
            });
        </script>

    <?php } elseif (htmlentities($_GET['type']) == "ipinfodb") { ?>
        <script>
            let key_api_ipfind = ""
            $.getJSON('https://api.ipinfodb.com/v3/ip-city/?key='+key_api_ipfind+'&format=json&callback=?', function(data) {
                let geo = JSON.stringify(data, null, 2)
                console.log(geo);
            });
        </script>

    <?php } elseif (htmlentities($_GET['type']) == "ipinfo") { ?>
        <script>
            $.getJSON('https://ipinfo.io/json', function(data) {
                let geo = JSON.stringify(data, null, 2)
                console.log(geo);
            });
        </script>
    
    <?php } elseif (htmlentities($_GET['type']) == "ipregistry") { ?>
        <script>
            let key_api_ipfind = ""
            $.getJSON('https://api.ipregistry.co/?key=' + key_api_ipfind, function(data) {
                let geo = JSON.stringify(data, null, 2)
                console.log(geo);
            });
        </script>

    <?php } elseif (htmlentities($_GET['type']) == "ipstack") { ?>
        <script>
            let ip_address = ""
            let key_api_ipfind = ""
            $.getJSON('http://api.ipstack.com/'+ip_address+'?access_key=' + key_api_ipfind, function(data) {
                let geo = JSON.stringify(data, null, 2)
                console.log(geo);
            });
        </script>

    <?php } elseif (htmlentities($_GET['type']) == "jsonip") { ?>
        <script>
            $.getJSON('https://jsonip.com/?callback=?', function(data) {
                let geo = JSON.stringify(data, null, 2)
                console.log(geo);
            });
        </script>

    <?php } elseif (htmlentities($_GET['type']) == "jsontest") { ?>
        <script>
            $.getJSON('http://ip.jsontest.com/?callback=?', function(data) {
                let geo = JSON.stringify(data, null, 2)
                console.log(geo);
            });
        </script>

    <?php } elseif (htmlentities($_GET['type']) == "nekudo") { ?>
        <script>
            $.getJSON('https://geoip.nekudo.com/api', function(data) {
                let geo = JSON.stringify(data, null, 2)
                console.log(geo);
            });
        </script>

    <?php } elseif (htmlentities($_GET['type']) == "smartip") { ?>
        <script>
            let key_api_ipfind = ""
            $.getJSON('https://api.smartip.io/?api_key=' + key_api_ipfind, function(data) {
                let geo = JSON.stringify(data, null, 2)
                console.log(geo);
            });
        </script>

    <?php } ?>
</body>
</html>

Source : https://github.com/eewee/geolocalisation

Cet article API de géolocalisation est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

GitBook c’est quoi ?

$
0
0

GitBook vous permet de réaliser des prises de notes, ou mettre en place une base de connaissances pour une équipe, ou encore créer une documentation pour un produit pour vos utilisateurs.

Notes personnelles

  • Utiliser un WYSIWYG pour mettre en forme votre contenu.
  • Utiliser Mardown dans le même esprit.
  • Intégrer des contenus externes.
  • Le tout dans le Cloud.

Base de connaissances

  • Créer des documents de façon collaborative avant de les publier.
  • Commenter, modifier et réaliser tous les changements nécessaires.
  • Réaliser des documents publics / privés.
  • Système d’historique vous permettant de consulter les différences, et de revenir à une version antérieur.

Documentation pour un produit

  • Statistique
  • Synchronisation avec GitHub.
  • Recherche rapide sur l’ensemble de votre documentation.
  • Customiser l’URL, logo, couleur, header, etc …

Mais encore …

Lors de la création d’une nouvelle page, vous disposez de template pour vous faire gagner du temps, dans l’élaboration :

D’un Guide

D’une Doc API

D’une FAQ

Changelog

Vous pouvez aussi importer directement du contenu d’autres plateformes

Exemple :

  • Confluence
  • Google Docs
  • GitHub Wiki
  • Dropbox Paper
  • Notion
  • Quip

Un système de version pour permettra d’organiser les différentes évolutions de votre produit :

Conclusion

Vous pouvez l’utiliser pour la réalisation d’une documentation API, par exemple.
Le système de version vous permettra de présenter les différents changements appliqués sur votre produit. L’interface est collaborative, vous allez réaliser un document (en mode « brouillon »), le faire vivre, jusqu’à arriver au moment de le « merged » et ainsi mettre à jour la version public. Il est possible de créer des variantes de vos pages dans différentes langues. L’outil est très agréable à utiliser.

Source : https://www.gitbook.com/

Cet article GitBook c’est quoi ? est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Mailtrap c’est quoi ?

$
0
0

Lorsque vous développez un site, une application SAAS, vous allez devoir envoyer des emails. Mais étant en phase de développement, vous ne souhaitez pas expédier un email à un réel utilisateur. Nous allons voir comment capturer les emails que vous voulez expédier.

Capturer vos emails

Le but d’un outil comme Mailtrap.io (Freemium) et de vous permettre de récupérer sur une interface web, le contenu de l’email que vous avez expédié depuis votre site. Ainsi vous ne risquez pas, par erreur, d’expédier un email sur un client, abonné, réel.

Mailtrap + WordPress

Prenons l’exemple d’un site sous WordPress, sur lequel nous souhaitons utiliser Mailtrap.io. Pour cela vous devez, par exemple, éditer le fichier functions.php de votre thème et y ajouter le code ci-dessous :

function mailtrap($phpmailer) {
  $phpmailer->isSMTP();
  $phpmailer->Host = 'smtp.mailtrap.io';
  $phpmailer->SMTPAuth = true;
  $phpmailer->Port = 2525;
  $phpmailer->Username = 'xxxxxxxxxxxxxx';
  $phpmailer->Password = 'xxxxxxxxxxxxxx';
}

add_action('phpmailer_init', 'mailtrap');

NB : xxxxxxxxxxxxxx doit être remplacé par votre « Username » et « Password » de votre compte Mailtrap.io

Mais encore

Mailtrap vous proposer une configuration SMTP, POP3, avec l’host, le port, le nom d’utilisateur, le mot de passe, le système d’authentification, etc … Vous n’avez plus cas choisir ce qu’il vous convient.

Il propose aussi des exemples de code dans différents langages :

  • Ruby on Rails
  • Ruby (net/smtp)
  • Python (smtplib, Django, Flask-Mail)
  • CakePHP 3.7+
  • CakePHP < 3.7
  • CodeIgniter
  • FuelPHP
  • Laravel
  • Symfony 4+
  • WordPress
  • Yii Framework
  • Zend Framework
  • Node.js (Nodemailer)
  • Java, Scala (Play-Mailer)
  • Perl (MIME::Lite, Net::SMTP)
  • C# (Plain C#)
  • Postfix
  • Telnet

L’outil est très agréable à utiliser, et vous permet de visualiser l’email ainsi reçu au format :

  • HTML
  • HTML Source
  • Texte
  • Raw (Le texte brute + les entêtes)

Une section « Analytics » offre un rapport de Spam :

Il existe une API sur Mailtrap.io pour celles et ceux qui seraient intéressés.

Source : https://blog.mailtrap.io/mailtrap-getting-started-guide/

Cet article Mailtrap c’est quoi ? est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Déployer son site avec Vercel

$
0
0

Vercel vous permettra de déployer le contenu de votre repository GitHub, GitLab ou Bitbucket. Ainsi en quelques-secondes, vous allez obtenir un site, en ligne, sur une URL custom. Regardons ensemble comment faire cela.

Comment cela fonctionne ?

  • Vous créez un compte sur Vercel.com
  • Vous connecter votre repository GitHub, GitLab ou Bitbucket.
  • Le projet est accessible depuis une URL générique de Vercel.
  • Lorsque vous réaliserez des changements sur le master de votre repository, alors le site se mettra à jour.

Utiliser un plugin

Vercel propose des plugins à rajouter sur votre site.

Voici quelques exemples de plugin :

  • Slack
  • Google Cloud
  • MongoDB Atlas
  • FaunaDB
  • Deploy Summary
  • Logflare
  • Datadog Logs
  • LogDNA
  • EasyCron

Utiliser un template

Vercel vous propose différents templates, vous permettant de débuter rapidement, tester une solution.

Voici la liste des templates existants :

  • Next.js
  • Gatsby
  • Hexo
  • Eleventy
  • Docusaurus 1 & 2
  • Preact
  • Dojo
  • Ember
  • Vue.js
  • Scully
  • Ionic Angular
  • Angular
  • Polymer
  • Svelte
  • Ionic React
  • Create React App
  • Gridsome
  • UmiJS
  • Sapper
  • Saber
  • Stencil
  • Nuxt.js
  • Hugo
  • Jekyll
  • Brunch
  • Middleman

Solution similaire : Netlify

Source : vercel.com

Cet article Déployer son site avec Vercel est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Utiliser la lib Carbon

$
0
0

La gestion des dates peut devenir pénible, peu importe le langage utilisé. Heureusement il existe des librairies comme « Carbon », pour simplifier cette gestion.

Carbon et la gestion des dates

En 1er vous devez installer la lib Carbon :

composer require nesbot/carbon

Vous pouvez sur votre objet Carbon, chaîner les méthodes, pour obtenir le prochain lundi + 14 jours, par exemple :

echo (new Carbon("next monday"))->modify('+14 days');

Ou cumuler des demandes :
Ici le lundi de la semaine prochaine + 5h, +10 minutes et -10 secondes.
Ex : 2021-01-04 05:09:50.

echo (new Carbon("monday next week +5 hours +10 minutes -10 seconds"));

Ou indiquer qu’on désire le 1er jour de Janvier (de cette année) + 7 jours :
(ci-dessous : 2021-01-08 00:00:00)

echo (new Carbon('first day of january this year'))->modify('+7 days');

On peut aussi tester qu’une date réponde à certain(s) critère(s) :
(ci-dessous, qu’une date est bien pour la semaine prochaine)
Cf doc pour d’autres exemples : https://carbon.nesbot.com/docs/#api-comparison

$dt = Carbon::now()->addWeek(1);
if ($dt->isNextWeek()) {
  echo "semaine prochaine";
} else {
  echo "Pas semaine prochaine";
}

On peut aussi ajouter/soustraire des siècles, années, trimestres, mois, jours, semaines, heures, minutes, secondes, etc … :

$dt = CarbonImmutable::create(2021, 1, 31, 0);
echo $dt->addDays(3)."<br>"; // 2021-02-03 00:00:00
echo $dt->subDays(3);        // 2021-01-28 00:00:00

Mais encore

  • Calculer la différence entre 2 dates.
  • Ajuster la timezone de votre date.
  • Changer le format de la date (ex : Y-m-d, d/m/Y, …).
  • Utiliser des rendus plus compréhensible (1 mois avant, 5 jours après, il y a 3 semaines, 50 minutes après, …).
  • Et bien plus encore.

Source :

Cet article Utiliser la lib Carbon est apparu en premier sur Developpeur / integrateur web (Growth Hacker).


Comment faire des diagrammes de classes et bien plus ?

$
0
0

La réalisation de diagramme est indispensable avant de débuter de nouveau projet.
Mais comment les réaliser, quels outils utiliser ?

Il existe de nombreux outils pour la réalisation de diverses schéma. Qu’il s’agisse de faire de l’UML, des diagrammes de classes, etc … Aujourd’hui nous allons voir comment réaliser cela avec LucidChart.com

Qu’est ce que LucidChart.com ?

Il s’agit d’une solution SAAS, accessible depuis votre Mac, PC, Linux, que vous soyez sur desktop, tablette et/ou smartphone (Android et iOS).

Vous disposez de nombreux points de connexion sur des applications de chez Google, Microsoft, Atlassian, Amazon web services, Slack, Dropbox, Okta, Jive, etc …

Quelques exemples d’utilisation :

Vous souhaitez réaliser un organigramme en ligne, pour représenter vos effectifs, processus et systèmes :

  • Utiliser des organigrammes pour vos équipes.
  • Importer vos données.
  • Ajouter vos organigrammes à BambooHR.
  • Gérez, triez et mettez à jour vos données en toute simplicité.

Vous souhaitez réaliser un diagramme de Gantt en ligne :

  • Gérez efficacement la chronologie de vos projets.
  • Utiliser l’un des modèles de diagramme de Gantt préexistants.
  • Collaborer rapidement.
  • Partagez le diagramme de Gantt dans Google Workspace.

Réaliser un logigramme :

  • De nombreuses formes pour construire un logigramme professionnel.
  • Collaboration partout, à tout moment.
  • Partager et présenter facilement vos diagrammes.
  • Intégration optimale à Google Workspace & Microsoft Office.

Réaliser un diagramme UML :

  • Créez un diagramme de classe en ligne.
  • Planifier de nouvelles fonctionnalités.
  • Exposer les flux et tâches de base de votre système.
  • Gagnez du temps avec le balisage de séquence UML.
  • Normalisez vos diagrammes avec notre bibliothèque de formes UML.
  • Profitez de fonctionnalités de collaboration et de documentation.
  • Présenter et partager votre diagramme UML en ligne.

Sans oublier la réalisation de :

  • Carte mentale.
  • Frise chronologique.
  • Algorigramme.
  • MCD (Modèle Conceptuel de Données).
  • Digramme de PERT.
  • Brainstorming.
  • Arbre de décision.
  • Diagramme de réseau.
  • Diagramme d’Ishikawa.
  • Cartographie des processus métier.
  • Carte conceptuelle.
  • Base de données.
  • Schéma électrique.
  • Diagramme Swimlane.
  • Wireframe de site web.
  • Sitemap.
  • Diagramme pieuvre.
  • Méthode du chemin critique.
  • Diagramme bête à cornes.
  • Arbre généalogique.
  • Baie de brassage.
  • Trombinoscope.
  • Schéma fonctionnel.
  • Matrice RACI.
  • Diagramme de contexte.
  • Diagramme des affinités.
  • Matrice BCG.
  • Mockup/UI.
  • Diagramme FAST.
  • etc …

Bref, l’outil vous permet une collaboration en équipe simple et rapide. Ainsi vous allez pouvoir partager vos diagrammes, ajouter des commentaires, échanger sur vos besoins.

Source : LucidChart.com

Cet article Comment faire des diagrammes de classes et bien plus ? est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Javascript : destructuring, spread operator et param rest

$
0
0

Comment utiliser le Destructuring en JS

Commençons par créer un objet :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}

Nous avons créer un objet avec 3 propriétés (firstname, lastname et age).

Regardons à présent comment récupérer, dans un 1er temps, une valeur :

let firstname = user.firstname;
let lastname = user.lastname;
let age = user.age;
console.log( firstname, lastname, age);

Nous avons tout détaillé, la propriété firstname de l’objet user est stockée dans la variable firstname.

Le destructuring va nous aider à découper notre objet simplement.
Voici un exemple avec l’objet user :

const { firstname, lastname } = user;
console.log( firstname );

Nous disposons ainsi de la variable firstname avec son contenu « John ».
Et de la variable lastname avec son contenu « DOE ».
Vous devez obligatoirement indiqué const au début de votre destructuring.
Sinon ceci retournera une erreur « Uncaught SyntaxError: Unexpected token ‘=' » :

{ firstname } = user;

Si l’on souhaite partir sur une déclaration, avant d’utiliser le destructuring, il faudra l’entourer de parenthèse :

let firstname;
({ firstname } = user);
console.log( firstname );

Vous pouvez aussi ajouter de nouvelle key/value si besoin.
Ici on ajoute email :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const { firstname, lastname, email=john.doe@tld.com } = user;
console.log( email ); // john.doe@tld.com

Vous pouvez créer une nouvelle propiété à partir d’existante :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const { firstname, lastname, fullname=`${firstname} ${lastname}` } = user;
console.log( fullname ); // John DOE

Vous pouvez créer des alias et ainsi diminuer le risque de conflits :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const { firstname: firstnameEmployee } = user;
console.log( firstnameEmployee ); // John

Si vous essayer d’accéder à firstname, qui n’est pas défini (car c’est firstnameEmployee qui l’est), alors vous obtiendrez l’erreur :

Uncaught ReferenceError: firstname is not defined

Vous pouvez utiliser un objet imbriqué dans un autre objet (=nested objects) :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30,
    'department': {
        'name': 'Lorem',
        'address': {
            'street': '5 av. Lorem Ipsum',
            'city': 'LA ROCHELLE',            
            'zip': 17000
        }
    }
}

const { department } = user; // récupère l'objet department
const { department: { address } } = user; // récupère l'objet address
const { department: { address: { city } } } = user; // récupère la city

Vous pouvez utiliser le destructuring dans les params d’une fonction :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
function maFonctionLorem({ firstname, lastname}) {
    console.log(`${firstname} ${lastname}`)
}
maFonctionLorem(user);

Vous pouvez utiliser le destructuring dans le retour d’une fonction :

const getLorem = () => {
    return {
        'firstname': 'John',
        'lastname': 'DOE',
        'age': 30
    };
}
const { firstname, lastname } = getLorem();
console.log( firstname, lastname );

Vous pouvez utiliser le destructuring dans une boucle « for of » :

const users = [
    {
        'firstname': 'John 01',
        'lastname': 'DOE 01',
        'age': 31
    },
    {
        'firstname': 'John 02',
        'lastname': 'DOE 02',
        'age': 32
    },
    {
        'firstname': 'John 03',
        'lastname': 'DOE 03',
        'age': 33
    }
];

for (let { firstname, lastname } of users) {
    console.log(`${firstname} ${lastname}`);
}

On peut aussi faire du destructuring avec des tableaux :

const user = ['John', 'DOE', 30];
const [firstname, lastname, age] = chevalier;
console.log( firstname, lastname, age );

Comment utiliser le spread operator en JS

Commençons par cloner un objet :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const monClone = {...user};

NB : vous pouvez aussi utiliser object.assign pour cloner un objet.

Comment ajouter une valeur :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const updateUser = {...user, email='john.doe@tld.com'};
// Cela ne changera pas l'objet d'origine "user" :
console.log( user ); // {firstname: "John", lastname: "DOE", age: 30}
// Cela changera le nouvel objet "udpateUser" :
console.log( updateUser ); // {firstname: "John", lastname: "DOE", age: 30, email: "john.doe@tld.com"}

Comment mettre à jour une valeur :

const user = {
'firstname': 'John',
'lastname': 'DOE',
'age': 30
}
const updateUser = {…user, age=35};
// Cela ne changera pas l'objet d'origine "user" :
console.log( user ); // {firstname: "John", lastname: "DOE", age: 30}
// Cela changera le nouvel objet "udpateUser" :
console.log( updateUser ); // {firstname: "John", lastname: "DOE", age: 35}

Comment ajouter une valeur sur un objet imbriqué dans un autre objet (=nested objects) :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30,
    'department': {
        'name': 'Lorem',
        'address': {
            'street': '5 av. Lorem Ipsum',
            'city': 'LA ROCHELLE',            
            'zip': 17000
        }
    }
}
const updateUserWithDepartment = {...user, department={'number': 17}};
console.log( updateUserWithDepartment );

Le problème est qu’on va avoir un object « department » avec uniquement la valeur indiquée (=number).
Nous on aurait aimé ajouter le « number » dans l’objet « department ».
Pour cela nous devons faire :

const updateUserWithDepartment = {...user, department={...user.department, 'number': 17}};

Il faut indiquer « manuellement » qu’on souhaite garder le contenu de « department » (=…user.department), et ajouter « number ».

Comment fusionner 2 objects en javascript :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const department = {
    'name': 'Lorem',
    'address': {
        'street': '5 av. Lorem Ipsum',
        'city': 'LA ROCHELLE',            
        'zip': 17000
    }
}
const userWithDepartment = {...user, ...department};
console.log( userWithDepartment );

NB : attention aux key identique (ex : firstname dans 2 object différent).

On peut aussi utiliser le spread operator sur des tableaux :

const user = ['John', 'DOE', 30];
const [firstname, ...autres];
console.log( firstname, autres );

Comment utiliser le paramètre rest en JS

Repartons encore de notre exemple d’utilisateur :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const { age, ...rest } = user;
console.log( age, ...rest ); // age donnera l'age, et ...rest tout le reste (=firstname et lastname).

Source :

Cet article Javascript : destructuring, spread operator et param rest est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Télécharger et installer PrestaShop

$
0
0

PrestaShop est une solution eCommerce très populaire.
Nous allons voir comment le télécharger et l’installer rapidement sur votre serveur.

Etape 1 : Connectez-vous en SSH

Sur votre serveur / hébergeur, il faut tout d’abord se connecter en SSH sur ce dernier. Pour cela il suffit d’indiquer ceci (à adapter avec vos accès) :

ssh roo@adresse_IP_de_votre_serveur -p port_du_serveur

Etape 2 : Updater vos packages

apt-get update
apt-get upgrade

Etape 3 : Installez Apache, MySQL (MariaDB) et PHP7

3.1 Installer Apache, MySQL (MariaDB) et PHP7

apt-get install apache2 libapache2-mod-php mysql-server 
apt-get install php7.0-cli php7.0-common php7.0-curl php7.0-zip php7.0-gd php7.0-mysql php7.0-xml php7.0-mcrypt php7.0-mbstring php7.0-json php7.0-intl

3.2 Activer la réécriture d’URL

sudo a2enmod rewrite

3.3 Editer php.ini

# php -i | grep -i php.ini
vi /etc/php/7.0/cli/php.ini

3.4 Ajuster la configuration

memory_limit = 256M
upload_max_filesize = 32M

3.5 Redémarrer le serveur Apache

sudo systemctl restart apache2

Etape 4 : Créer une base de donnée pour PrestaShop

4.1 Connectez-vous

mysql -u root -p

4.2 Créer votre base de donnée

mysql> CREATE DATABASE prestashop;

Etape 5 : Installer PrestaShop

5.1 Placez-vous dans le répertoire de votre projet PrestaShop

cd /mon_projet_prestashop

5.2 Télécharger PrestaShop

wget https://download.prestashop.com/download/releases/prestashop_1.7.7.3.zip

5.3 Déziper PrestaShop

unzip prestashop_1.7.7.3.zip 

5.4 Déziper le nouveau zip obtenu

unzip prestashop.zip

Etape 6 : Finalisez l’installation

6.1 Config de votre vhost

sudo nano /etc/apache2/sites-available/prestashop.conf
<VirtualHost *:80>
ServerAdmin admin@lorem-ipsum.com
ServerName lorem-ipsum.com
ServerAlias www.lorem-ipsum.com
DocumentRoot /var/www/html/prestashop

<Directory /var/www/html/prestashop>
Options +FollowSymlinks
AllowOverride All
Require all granted
</Directory>

ErrorLog /var/log/apache2/prestashop-error_log
CustomLog /var/log/apache2/prestashop-access_log common
</VirtualHost>

6.2 Activer la config Apache de PrestaShop

sudo a2ensite prestashop.conf

6.3 Supprimer la config Apache par défaut

rm /etc/apache2/sites-enabled/000-default.conf

6.4 Redémarrer le serveur Apache

sudo systemctl restart apache2

6.5 Finalisation

Pour cela accéder à l’url de votre site, et suivez les étapes indiquées par PrestaShop pour l’installation complète du site eCommerce.

Une fois l’installation terminée, supprimez le dossier « install ».

rm -rf /var/www/html/prestashop/install/

NB : L’exemple de cette article a été réalisé sur un Ubuntu.

Cet article Télécharger et installer PrestaShop est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Utiliser l’API PrestaShop

$
0
0

PrestaShop propose l’utilisation de son API pour réaliser diverses actions sur votre site eCommerce. Mais comment faire pour utiliser l’API de PrestaShop ?

Créer votre clef API PrestaShop

Il faut pour cela aller sur l’admin de votre site Prestashop.
Puis colonne de gauche, cliquer sur :

Paramètres avancés
Webservice

Activer le service web (mettre à OUI)
Il faut que la réécriture d’URL soit activée sur le serveur
+ que les 5 méthodes GET, POST, PUT, DELETE et HEAD soient aussi activées sur le serveur.

En haut de page cliquer sur : Ajouter une clé de service web

Générer une key aléatoire via le bouton « Generate » de droite.
Ajouter une description, pour vous repérer dans l’utilisation futur de cette clef.
Laisser le statut sur « Oui », pour que ce dernier soit fonctionnel.
Choisir les ressources et droits que vous désirer utiliser.
Ex : Adresses avec un CRUD.

Source : Doc PrestaShop.

Utiliser votre clef API Prestashop

Vous pouvez dans un 1er temps vérifier que votre config fonctionne correctement.
Pour cela lancer l’URL suivante dans votre navigateur (A faire sur votre version de développement, éviter en production).

http://url_de_votre_site.fr/api/?ws_key=votre_clef_ici&output_format=JSON

Remplacer juste les points suivants :

  • url_de_votresite.fr par l’URL de votre site (ex : localhost)
  • votre_clef_ici correspond à la key API généré dans l’interface de PrestaShop

Exécuter cette URL dans votre navigateur, et vous devriez obtenir quelques-choses dans l’esprit :

[
"addresses",
"carriers",
"cart_rules",
"carts",
"categories",
"combinations",
"configurations",
"contacts",
"content_management_system",
"countries",
"currencies",
"customer_messages",
"customer_threads",
"customers",
"customizations",
"deliveries",
"employees",
"groups",
"guests",
"image_types",
"images",
"languages",
"manufacturers",
"messages",
"order_carriers",
"order_details",
"order_histories",
"order_invoices",
"order_payments",
"order_slip",
"order_states",
"orders",
"price_ranges",
"product_customization_fields",
"product_feature_values",
"product_features",
"product_option_values",
"product_options",
"product_suppliers",
"products",
"search",
"shop_groups",
"shop_urls",
"shops",
"specific_price_rules",
"specific_prices",
"states",
"stock_availables",
"stock_movement_reasons",
"stock_movements",
"stocks",
"stores",
"suppliers",
"supply_order_details",
"supply_order_histories",
"supply_order_receipt_histories",
"supply_order_states",
"supply_orders",
"tags",
"tax_rule_groups",
"tax_rules",
"taxes",
"translated_configurations",
"warehouse_product_locations",
"warehouses",
"weight_ranges",
"zones"
]

Récupérer la liste des clients via l’API PrestaShop :

http://url_de_votre_site.fr/api/customers?ws_key=votre_clef_ici&output_format=JSON

Récupérer le détail d’un client via l’API PrestaShop :

http://url_de_votre_site.fr/api/customers/id_du_client?ws_key=votre_clef_ici&output_format=JSON

Essayer de remplacer id_du_client par 1, pour obtenir le 1er client sur PrestaShop (si cette id existe toujours en base de donnée).

Ce qui donnera quelques-choses dans l’esprit :

{
customer: {
id: 2,
id_default_group: "3",
id_lang: "1",
newsletter_date_add: "2013-12-13 08:19:15",
ip_registration_newsletter: "",
last_passwd_gen: "2021-02-13 06:20:42",
secure_key: "870d...",
deleted: "0",
passwd: "bf57...",
lastname: "DOE",
firstname: "John",
email: "pub@prestashop.com",
id_gender: "1",
birthday: "1998-01-15",
newsletter: "1",
optin: "1",
website: "",
company: "",
siret: "",
ape: "",
outstanding_allow_amount: "0.000000",
show_public_prices: "0",
id_risk: "0",
max_payment_days: "0",
active: "1",
note: "",
is_guest: "0",
id_shop: "1",
id_shop_group: "1",
date_add: "2021-02-13 12:20:42",
date_upd: "2021-02-13 12:20:42",
reset_password_token: "",
reset_password_validity: "0000-00-00 00:00:00",
associations: {
groups: [
{
id: "3"
}
]
}
}
}

Utiliser Postman avec PrestaShop :

Postman va vous permettre de réaliser vos requêtes rapidement et simplement.
Nous allons faire un GET depuis Postman :

Ajouter en GET sur postman votre URL :

  • http://votre_site_ici.fr/api/customers/1?ws_key={{prestashop_key}}&output_format=JSON

Puis exécuter la requête (cliquez sur le bouton bleu « Send »).

Créer un client avec Postman :

Cette fois on va créer un client PrestaShop, depuis postman.
On passe donc en POST (et plus en GET).
On ajouter le body suivant :

<?xml version="1.0" encoding="UTF-8"?>
<prestashop xmlns:xlink="http://www.w3.org/1999/xlink">
    <customers>
        <passwd>Lorem_1234</passwd>
        <firstname>John</firstname>
        <lastname>DOE</lastname>
        <email>postman@eewee.fr</email>
    </customers>
</prestashop>

Et on valide (toujours pareil, en cliquant sur le bouton bleu nommé « Send »).

Liste des différents endpoints PrestaShop :

PrestaShop propose dans sa documentation, la liste des différents endpoints disponibles pour réaliser vos requêtes.

Ici l’exemple avec le endpoint « Customers » :
https://devdocs.prestashop.com/1.7/webservice/resources/customers/

On peut voir qu’il y a 4 champs obligatoires :

  • passwd
  • firstname
  • lastname
  • email

Requête API PrestaShop en PHP :

Vous pouvez utiliser la lib de PrestaShop pour réaliser vos requêtes en PHP :

  • https://github.com/PrestaShop/PrestaShop-webservice-lib/blob/master/PSWebServiceLibrary.php

Exemple d’un update :

  • https://github.com/PrestaShop/PrestaShop-webservice-lib/blob/master/examples/Update.php

Cet article Utiliser l’API PrestaShop est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Déployer avec GitHub Actions

$
0
0

Nous allons voir comment déployer le contenu de la branche « main » (anciennement « master »), sur un VPS OVH. Le but étant d’utiliser « GitHub Actions », pour déployer à chaque fois que la branche « main » change.

Depuis GitHub

Je vais partir de ce GitHub Action :
https://github.com/marketplace/actions/rsync-deployments-action

Il faut sur votre repository GitHub, créer le fichier main.yml :
.github/workflows/main.yml

Puis y ajouter le contenu suivant :

# source : https://github.com/marketplace/actions/rsync-deployments-action
name: DEPLOY

# Sur un "push" dans la branche "main"
on:
  push:
    branches:
    - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      
      # Rsync deploy
      - name: rsync deployments
        uses: burnett01/rsync-deployments@4.1
        with:
          switches: -avzr --delete --exclude="" --include="" --filter=""
          remote_path: ~/httpdocs/
          remote_host: strange-solomon.111-112-113-114.plesk.page
          remote_user: strange-solomon
          remote_key: ${{ secrets.DEPLOY_KEY }}

Ensuite aller dans les « Settings / Secrets », pour y ajouter la variable « DEPLOY_KEY » :
https://github.com/votre-username-ici/votre-repository-ici/settings/secrets/actions

Depuis votre VPS OVH

Accéder depuis Plesk, par exemple, à « FTP Access » :

Ajouter dans « Access to the server over SSH » la valeur « /bin/bash » :

Connectez-vous en SSH au VPS OVH.

Vous devez arriver sur une arborescence dans l’esprit :

  • .gnupg
  • error_docs
  • httpdocs
  • logs

Créer vos keys SSH (private / public) – documentation :

ssh-keygen -t ed25519 -C "your_email@example.com"

Vous devez arriver sur une arborescence dans l’esprit (ajout du dossier .ssh) :

  • .gnupg
  • .ssh
  • error_docs
  • httpdocs
  • logs

Aller dans /.ssh/id_ed25519 (qui est la « key privée »), et copier son contenu sur :
« GitHub / Settings / Secrets / DEPLOY_KEY ».

Créer un fichier dans /.ssh nommé « authorized_keys » :
Coller le contenu du fichier « /.ssh/id_ed25519.pub » (qui est la « key publique »), dans « /.ssh/authorized_keys »

Si besoin de créer un fichier /.ssh/known_hosts :
ssh user@host (exemple strange-solomon@111.112.113.114)
Indiquer « yes » sur le retour de la commande précédente.

Coder > push > deploy

Il ne vous reste plus cas réaliser un changement sur votre branche « main », pour que GitHub Actions réaliser le déploiement automatiquement.

Vous pouvez suivre l’état du déploiement dans l’onglet « Actions » de votre repository GitHub.

Cet article Déployer avec GitHub Actions est apparu en premier sur Developpeur / integrateur web (Growth Hacker).

Viewing all 82 articles
Browse latest View live