Intro Gatsby et Interaction avec GraphQL : Formation developpeur web

D’accord.
Maintenant que nous avons installé WordPress, nous allons voir comment Installer Gatsby
Nous allons aller sur la page de démarrage rapide du site.
Nous pouvons installer Gatsby via NPM via cette commande
Ce tutoriel est sur React et Gatsby je suppose donc que tu es familier avec Node et NPM et je suppose aussi que tu connais Node JS, si c’est pas le cas pas d’inquiétude je te mets dans la description une video sur l’installation de Node JS.
Assures-toi d’installer Node Js avant de poursuivre la vidéo 
Ensuite, nous voulons nous diriger vers une fenêtre de terminal.
Je copier la ligne de commande que je vais lancer ensuite
Maintenant, dirige toi vers le repertoire ou tu souhaites installer ton projet.
Nous allons executer la ligne de commande qui nous permet de créer un nouveau site Gatsby
Donne lui le nom que tu veux, pour ma part je vais lui donner mon nom pour en faire mon portfolio.
 
Donc, une fois que la commande a fini de fonctionner, tu peux te diriger à l’intérieur du projet en faisant un CD plus le nom de ton projet
De là, je vais ouvrir visuel studio code qui est mon environnement de développement préféré, 
 
Et y ouvrir mon projet à partir visuel studio code, visual studio code possède son terminal interne que je vais maintenant utiliser 
Donc, à partir de là, nous pouvons lancer notre projet en faisant Gatsby develop 
 
et nous devrions pouvoir accéder à notre site partir de local hot:88888
Tu verra ton site qui contient deja quelques pages ou tu pourras naviguer
Qui fonctionne avec le routeur interne à Gatsby 
Mais la première chose que nous allons vouloir faire, c’est d’ouvrir à nouveau MAMP et de nous assurer que nous utilisons notre système local.
Et entrer localhost:8888 slash le nom que tu auras donner
Ceci sera ta version WordPress qui fonctionne localement 
 
Nous allons maintenant comment à tester des requêtes API grace GraphQL vers notre Wordpress
 
Retourner vers le site officiel de Gatsby et dans l’onglet Plugin
 
Gatsby est livré avec un tas de plug-ins qui nous simplifie les choses
Ainsi, par exemple, si je tape si je recherche WordPress, nous allons installer cette source.
Ce plugin nous le permet d’extraire des données de sites WordPress auto-hébergés,
un peu plus loin et on peut voir toutes les entités qui sont supportées.
 
 Tu verras que c’est super facile avec ce plug-in de pouvoir interroger toutes nos données.
Donc je vais retourner sur mon IDE Visual studio code, stopper le processus en cours pour pouvoir copier coller la commande qui nous permet d’installer ce plugin
Après que ça soit installé, nous allons avoir à entrer quelques paramètre pour Gatsby
 
Généralement quand tu installes un plugin Gatsby 
 
nous devons aller dans le fichier de config de Gatsby, et lui rentrer quelques paramètre 
Nous devons spécifier dans le tableau de configuration de ce fichier, les paramètres du plugins.
L’installation NPM n’est pas suffisante
Nous devons en fait faire référence à ce plug-in dans le fichier Gatsby config.
C’est une étape très importante car on a tendance à l’oublier
Une deux choses à noter avec la référence des plugins Gatsby, c’est que certains plugins n’ont besoin d’aucune configuration tandis que d’autres en ont besoin
 
Si nous n’avons besoin d’aucune configuration, nous avons simplement à faire une référence comme on peut le voir sur la première ligne du tableau plugins.
Sinon, nous le référençons en tant qu’objet avec ses valeurs.
Et c’est exactement ce que nous allons faire avec le plugin WordPress source de Gatsby 
et il y a pas mal d’options.
Donc, nous allons simplement aller à la page des plugins Gatsby et comme tu pourras le voir, il y a un exemple de configuration que nous pouvons simplement copier et le coller à la fin.
Afin de pouvoir vous montrer comment GraphQL et L’api Wordpress fonctionne, La seule chose que nous avons à faire c’est de remplacer la valeur BaseURL par l’adresse de notre localhost .
On peut sauvegarder et faire un Gatsby develop
 
On peut y voir dans le terminal un lien vers notre GraphQL

Right Alignment Of Call To Action

Far far away, behind the word mountains, far from the countries Vokalia.
Nous allons à partir de ce lien graphQL comment interroger notre API WordPress.
Si tu n’as jamais utiliser graphQL avant tu verras c’est vraiment très simple à comprendre et spécialement avec l’outil de requête graphQL pour faire des requêtes depuis le navigateur
Si nous allons les configurations du plugin dans Gatsby config on y voit dans includedRoutes toutes les routes incluses que l’on peut intérroger.
Si tu te souviens, dans Wordpress nous avons des pages d’exemple de message.
Alors allons-y, interrogeons et visualisons nos données WordPress.
Débarrassons-nous de tous ces commentaires.
Les requêtes semble si simple car c’est similaire au object Javascript.
 
En appuyant sur les touches contrôle et espace, tu obtiens des renseignements sur les données que tu peux interroger à l’aide d’une liste
Donc, si je saisis un test, la requête ne sera pas exécutée car ces données n’existent pas et nous retourneras une erreur
Eh bien, revenons en arrière et contrôle espace et nous voyons toutes les pages WordPress 
 
Nous voulons ouvrir un autre ensemble d’accolades dans cette accolade.
Re saison un contrôle space pour y voir ce que nous avons.
Nous voulons sélectionner edges.
Nous voulons ouvrir un autre ensemble d’accolades dans cette accolade.
Nous voulons node un autre ensemble d’accolades.
Et  contrôle + espace.
Et nous avons un tas de données WordPress que nous pouvons interroger.
Alors, sélectionnons le titre et le contenu.
Maintenant, lançons la requête
Et ici  Nous avons notre exemple de page et son contenu.
Cela peut sembler magique, 
 
On peut maintenant comparer ses donner aux donner de notre site local
 
Toutes ces propriétés ont été mappés pour nous et vous pouvez continuer à faire des contrôles + espaces pour appronfondir

A propos de Yohann Ravino

https://www.linkedin.com/in/yohannatticot/

Yohann Ravino est un entrepreneur, auteur et conférencier international. Il travaille avec les cadres supérieurs pour mettre en œuvre son système de «maîtrise de l’organisation» afin d’améliorer considérablement l’efficacité et l’efficience de leurs organisations; leur permettant de devenir des leaders reconnus et hautement récompensés.

Lance ta première app Ionic 4 en 10 min : Formation developpeur web

Présentation de notre formation developpeur web paris par une introduction avec Ionic et Angular. Ionic est l'une des technologies du moment que vous puissiez apprendre à l'heure actuelle. Elle vous permet d'utiliser une base de code (écrite en HTML, JS et CSS) pour créer et envoyer des applications
Read More

Formation developpeur web en ligne : Question et Réponse

Deviens développeur Web à part entière en 2019 et obtiens les compétences les plus recherchées! Il s’agit de cours sur les technologie qui connaissent une forte croissance et font désormais partie des languages de développement les plus cotés pour les développeurs. React Js - Angular - Vue JS
Read More

Qu est ce que Gatsby ? : Formation developpeur web

Tu veux améliorer tes compétences React JS et augmenter ta valeur en tant que développeur front-end ? Mettez à niveau vos compétences de réaction en apprenant Gatsby.js avec un backend Wordpress! Gatsby
Read More

Leave a Reply