{"data":{"markdownRemark":{"html":"

Non le MVP n’est pas le Most Valuable Player mais bien le Minimum Viable Project.

\n

Cette semaine je me suis attachée à faire une première version du site de commit42 avec uniquement les fonctionnalités primordiales, ça sera ma base de travail que je vais venir améliorer de sprint en sprint.

\n

Le MVP

\n

“Euh rappelle-moi Eva, c’est quoi un MVP déjà ?”

\n

Comme je le disais dans l’introduction c’est le Produit Minimum Viable (Minimum Viable Project en anglais). En gros c’est le projet sous sa forme la plus simple, avec les fonctionnalités minimales, sans fioritures. Le MVP permet d’avoir rapidement quelque chose de concret même si c’est au détriment de certaines fonctionnalités intéressantes mais non vitales tel que l’aspect visuel.

\n

Ce qui est intéressant aussi avec le MVP c’est qu’on a un retour utilisateur et un retour d’expérience rapidement, on peut alors ajuster le projet sur les prochains sprints en fonction de cette base.

\n

\n \n \n \n \n

\n

Crédits icônes: Freepik

\n

Le MVP est donc la base de travail, comme les fondations d’une maison sur lesquelles on va venir ajouter petit à petit les briques jusqu’à ce que la maison soit satisfaisante.

\n

“C’est vachement intéressant ça, mais du coup d’où tu es partie ? Tu avais un modèle ?”

\n

Vu que je m’occupe d’une refonte de site, je suis partie sur une reproduction des fonctions du site actuel mais en reprenant le code à 0 avec la nouvelle stack.

\n

Il était convenu que je reprenne exactement ce qui est déjà sur le site - c’est à dire :

\n\n

En effet la publication d’articles sur le site en l’état est problématique car il faut rédiger soi-même l’article en markdown puis l’envoyer sur le repo distant pour que l’application soit redéployée.

\n

Avec la solution que je propose (Netlify CMS) il y aura un éditeur de texte qui créer lui même le fichier markdown à partir du texte entré (en prenant en compte les titres, images, liens…), ce qui sera tout de même plus simple.

\n

“Et c’est tout ? T’as pas galéré ou quoi ?”

\n

Ah si si.

\n

Surtout pour configurer les routes (l’url d’accès à une page) comme je le souhaitais. En fait pour ne pas perdre l’indexation des articles déjà publiés par commit42 et surtout ne pas casser les liens qui ont déjà pu être partagés sur internet j’ai voulu reprendre exactement la même structure. Et ça ne s’est pas tout à fait passé comme prévu.

\n

Comment configurer les routes avec Netlify CMS

\n

Je souhaitais donc avec des liens avec la structure suivante:

\n
http://commit42.com/blog/[insérer ici le nom de l’article]
\n

Et il se trouve que dans la config de Netlify CMS on peut ajouter une ‘preview_path’ qui permet - du moins c’est ce que je pensais - formater l’url des posts à partir des slugs.

\n

Le slug est une chaîne de caractère qui identifie un article et que l’on peut utiliser dans l’url de celui-ci. Il est souvent généré à partir du titre et parfois de la date. Tous les mots/chiffres sont séparés par de tirets de cette façon: ceci-est-un-slug-3

\n

Ici il va me servir pour définir ma route vers mes articles.

\n
collections:  \n    - name: posts\n      slug: “{{slug}}”  \n      preview_path: \"blog/{{slug}}\"
\n

Ici j’ai défini une collection, donc un type de données, qui s’appelle posts et qui pour chaque post va créer un slug à partir du titre (ça c’est ce que fait tout seul Netlify CMS).

\n

Je pensais donc que preview_path permettait de configurer la route que l’on souhaite afficher pour les posts, car actuellement la seule route que j’arrivais à afficher est:

\n
http://commit42.com/[Insérer ici un slug]
\n

En fait j’ai fini par comprendre que cette preview path permet, lorsque l’on rédige un article, de voir un aperçu de l’article comme s’il était publié sur le site. Finalement c’est tout à fait logique mais je n’avais pas compris tout de suite.

\n

Heureusement Maxime, qui connaît déjà bien GatsbyJS, avait déjà eu à faire à ce souci de routes et il m’a expliqué qu’il fallait créer à la main une route pour les articles.

\n

J’ai donc dû ajouter cette fonction à mon fichier gatsby-node.js:

\n
// A mettre tout en haut du fichier\nconst  { createFilePath }  =  require(\"gatsby-source-filesystem\")\n\n// Ici le code que vous avez peut-être déjà\n  \nexports.onCreateNode = ({ node, actions, getNode }) => {  \n    const { createNodeField } = actions  \n  \n    if (node.internal.type === `MarkdownRemark`) {  \n      const value = createFilePath({ node, getNode })  \n      createNodeField({  \n          name: `slug`,  \n\t      node,  \n          value,  \n       })  \n    }  \n}
\n

Ainsi à chaque fois d’un fichier markdown est détecté, GatsbyJS crée une route à partir du dossier dans lequel est stocké le fichier en question, pour moi /blog/ en y concaténant son slug à la fin, ce qui donne

\n

http://commit42.com/blog/[Insérer ici un slug].

\n

Je vous recommande vivement d’aller voir cet article qui approfondi ce cas plus en détail et donne des explications sur les fonctions utilisées.

\n

Ajouter des composants SEO

\n

Si vous vous souvenez bien , dans mon premier article je mentionnais le fait qu’améliorer le référencement du site est un des points les plus importants. C’est pourquoi j’ai décidé d’implémenter des composants SEO dans le MVP.

\n

Afin de créer une fonctionnalité la plus complète possible j’ai créé 3 composants:

\n\n

“Olala Eva je comprends rien à ce que tu racontes, ça veut dire quoi tout ça ?”

\n

Les balises meta

\n

Les balises meta sont la base du SEO , il s’agit de balises qui permettent d’optimiser le référencement des pages.

\n

Elles se présentent de la façon suivante:

\n
<html>  \n  <head>  \n    <title>commit42 | Studio de développement Web - React - Progressive Web Apps - CakePHP</title>  \n    <meta name=\"description\" content=\"commit42, studio d'innovation Web et Data sur Toulouse. Nous accompagnons et développons vos projets Web : React, CakePhp et Magento.\" />  \n  </head>  \n  <body>\n    // Ici le body\n  </body>\n</html>
\n

Et permettent d’avoir l’affichage suivant dans google:

\n

\n \n \n \n \n

\n

Les Twitter Cards

\n

Les Twitter Cards sont exactement la même chose que Open Graph mais spécifiquement pour Twitter.

\n

Si vous souhaitez comprendre étape par étape comment créer des composants SEO pour GatsbyJS, je vous invite à aller voir la documentation de GastbyJS qui m’a grandement aidée ainsi que ces deux repos: gastby-starter-prismic et de marisamorby.com.

\n

“C’est bien joli toute cette théorie Eva mais en vrai comment ça marche ?”

\n

Voici à quoi ressemble mes composants:

\n
// src/components/SEO/SEO.js\n\nimport React from  'react';\nimport  { Helmet }  from  \"react-helmet\"\nimport PropTypes from  \"prop-types\"\nimport  { StaticQuery, graphql }  from  \"gatsby\"\nimport favicon from  '../../../static/favicon.png'\nimport Facebook from  './Facebook'\nimport Twitter from  './Twitter'\n\nconst  SEO  =  ({  title,  description,  image,  pathname,  article  })  =>  {\n  return (\n    <StaticQuery \n      query={query}\n      render={({\n        site: {\n          siteMetadata: {\n            defaultTitle,\n            defaultDescription,\n            siteUrl,\n            defaultImage,\n            twitterUsername,\n          } \n        }\n      }) => {\n        const seo = {\n          title: title || defaultTitle,\n          description: description || defaultDescription,\n          image: `${siteUrl}${image  ||  defaultImage}`,\n          url: `${siteUrl}${pathname  ||  '/'}`\n        }  \n\t\t\n        return (\n          <>\n            <Helmet  title={seo.title}>\n              <html  lang=\"fr\" />\n              <meta  name=\"description\" content={seo.description} />\n              <meta  name=\"image\" content={seo.image} />\n              <link  rel=\"shortcut icon\" href={favicon}></link>\n            </Helmet>\n            <Facebook\n              desc={seo.description}\n              image={seo.image}\n              title={seo.title}\n              type={article ? 'article' : 'website'}\n              url={seo.url}\n            />\n            <Twitter\n              title={seo.title}\n              image={seo.image}\n              desc={seo.description}\n              username={twitterUsername}\n            />\n         </>\n        )\n      }}\n    />\n  );\n}\n\nexport  default SEO;\n\nSEO.propTypes =  {\n  title: PropTypes.string,\n  description: PropTypes.string,\n  image: PropTypes.string,\n  pathname: PropTypes.string,\n  article: PropTypes.bool,\n}\n  \nSEO.defaultProps =  {\n  title: null,\n  description: null,\n  image: null,\n  pathname: null,\n  article: false,\n}\n\nconst query =  graphql`\n  query SEO {\n    site {\n      siteMetadata {\n        defaultTitle: title\n        defaultDescription: description\n        siteUrl: url\n        defaultImage: image\n        twitterUsername\n       }\n     }\n   }\n`;
\n
// src/components/SEO/Facebook.js\n\nimport PropTypes from  'prop-types'  \nimport React from  'react'  \nimport Helmet from  'react-helmet'  \n  \nconst Facebook = ({ url, name, type, title, desc, image }) => (  \n  <Helmet>  \n    {name && <meta property=\"og:site_name\" content={name} />}  \n    <meta property=\"og:url\" content={url} />  \n    <meta property=\"og:type\" content={type} />  \n    <meta property=\"og:title\" content={title} />  \n    <meta property=\"og:description\" content={desc} />  \n    <meta property=\"og:image\" content={image} />  \n    <meta property=\"og:image:alt\" content={desc} />  \n  </Helmet>  \n)  \n  \nexport default Facebook  \n  \nFacebook.propTypes = {  \n  url: PropTypes.string.isRequired,  \n  type: PropTypes.string,  \n  title: PropTypes.string.isRequired,  \n  desc: PropTypes.string.isRequired,  \n  image: PropTypes.string.isRequired,  \n  name: PropTypes.string,  \n}  \n  \nFacebook.defaultProps = {  \n  type: 'website',  \n  name: null,  \n}
\n
// src/components/SEO/Twitter.js\n\nimport PropTypes from  'prop-types'  \nimport React from  'react'  \nimport Helmet from  'react-helmet'  \n  \nconst Twitter = ({ type, username, title, desc, image }) => (  \n  <Helmet>  \n    {username && <meta name=\"twitter:creator\" content={username} />}  \n    <meta name=\"twitter:card\" content={type} />  \n    <meta name=\"twitter:title\" content={title} />  \n    <meta name=\"twitter:description\" content={desc} />  \n    <meta name=\"twitter:image\" content={image} />  \n    <meta name=\"twitter:image:alt\" content={desc} />  \n  </Helmet>  \n)  \n  \nexport default Twitter  \n  \nTwitter.propTypes = {  \n  type: PropTypes.string,  \n  username: PropTypes.string,  \n  title: PropTypes.string.isRequired,  \n  desc: PropTypes.string.isRequired,  \n  image: PropTypes.string.isRequired,  \n}  \n  \nTwitter.defaultProps = {  \n  type: 'summary_large_image',  \n  username: null,  \n}
\n

Dans le fichier SEO.js, je récupère toutes les données puis les distribue aux autres composants.\nJe m’explique: grâce à graphQL on récupère d’abord les données du fichier gatsby-config.js.

\n
// gatsby-config.js\n\nmodule.exports = {  \n  siteMetadata: {  \n    title: 'commit42 | Studio de développement Web',  \n    description: 'Studio de développement Web à Toulouse - React - Progressive Web Apps - CakePHP',  \n    url: 'https://new-site-c42.netlify.com',  \n    image: '/assets/logo.png',  \n    twitterUsername: '@commit42'  \n  },  \n  plugins: [// ici vos plugins]  \n}
\n
// src/components/SEO/SEO.js\n\nconst query = graphql`  \n  query SEO {  \n    site {  \n      siteMetadata {  \n        defaultTitle: title  \n        defaultDescription: description  \n        siteUrl: url  \n        defaultImage: image  \n        twitterUsername  \n       }  \n     }  \n   }  \n`;
\n

Ensuite on passe ces données au composant SEO avec une StaticQuery qui permet de récupérer à la fois des données avec GraphQL et les props du composant.

\n
// src/components/SEO/SEO.js\n\n<StaticQuery  \n  query={query}  \n  render={({  \n    site: {  \n      siteMetadata: {  \n        defaultTitle,  \n        defaultDescription,  \n        siteUrl,  \n        defaultImage,  \n        twitterUsername,  \n      }  \n    }  \n  })
\n

D’autre part je récupère les propriétés (ou props pour les intimes) qui sont passées au composant SEO.

\n
// src/components/SEO/SEO.js\n\nconst SEO = ({ title, description, image, pathname, article }) => {
\n

On crée ensuite des variable pour afficher soit les props s’il y en a soit les données du gatsby-config.js qui sont ici considérées comme les données par défaut (donc à afficher si une page n’a pas de titre, description ou autre).

\n
// src/components/SEO/SEO.js\n  \nconst seo = {  \n  title: title || defaultTitle,  \n  description: description || defaultDescription,  \n  image: `${siteUrl}${image || defaultImage}`,  \n  url: `${siteUrl}${pathname || '/'}`  \n}
\n

Ces variables sont par la suite transmises aux composants Facebook et Twitter comme props pour qu’ils les données chacun de leur côté.

\n
// src/components/SEO/SEO.js\n\n<Facebook  \n  desc={seo.description}  \n  image={seo.image}  \n  title={seo.title}  \n  type={article ? 'article' : 'website'}  \n  url={seo.url}  \n/>  \n<Twitter  \n  title={seo.title}  \n  image={seo.image}  \n  desc={seo.description}  \n  username={twitterUsername}  \n/>
\n

Ici c’est le template pour les articles dans lequel j’importe le composant SEO et lui transmet les informations de la page afin qu’elle puisse être indexée.

\n

Vu que ce composant sert à construire toutes les pages “articles” je suis certaine que tous mes articles vont être indexés par les moteurs de recherche et vont avoir un aperçu optimisé grâce à Open Graph.

\n
// src/templates/blog-post.js\n\nimport React from  \"react\"  \nimport  \"./blog-post.scss\"  \nimport { Container, Header } from  'semantic-ui-react'  \nimport { graphql } from  \"gatsby\"  \nimport SEO from  '../components/SEO/SEO'  \nimport Layout from  '../components/layout'  \n  \nexport  default  function  Template({ data }) {  \n  const { markdownRemark: post } = data  \n  return (  \n    <Layout isHome={false}>  \n      <SEO  \n        title={post.frontmatter.title}  \n        description={post.excerpt || 'nothing here'}  \n        image={post.frontmatter.thumbnail}  \n        pathname={post.fields.slug}  \n        article  \n       />  \n       <Container text style={{ marginTop: '5%', marginBottom: '5%' }}>  \n         <Header as=\"h1\">{post.frontmatter.title}</Header>  \n         <div \n           className=\"blog-post-content\"  \n           dangerouslySetInnerHTML={{ __html: post.html }}  \n         />  \n       </Container>  \n     </Layout>  \n   )  \n}  \n  \nexport const pageQuery = graphql`  \n  query BlogPostBySlug($slug: String!) {  \n    markdownRemark(fields: {slug: {eq: $slug}}) {  \n      html  \n      excerpt  \n      fields{  \n        slug  \n      }  \n      frontmatter {  \n        date  \n        title  \n        thumbnail  \n      }  \n    }  \n  }  \n`
\n

Les “proptypes” utilisées à la fin de chaque composant sont une façon de typer les propriétés, c’est à dire qu’on défini en avance le type de données que doit recevoir chaque variable. Cela rend le débogage plus simple en affichant les erreurs dans la console lorsqu’on utilise le mode développeur du navigateur mais surtout, permet de s’assurer que la donnée passée de composant en composant est bien ce dont on a besoin.

\n
SEO.propTypes = {  \n  title: PropTypes.string,  \n  description: PropTypes.string,  \n  image: PropTypes.string,  \n  pathname: PropTypes.string,  \n  article: PropTypes.bool,  \n}
\n

Sur l’exemple ci dessous le titre s’attend à recevoir une string (une chaîne de caractère), tout comme la description, l’image et le pathname alors que article sera un booléen (true ou false).

\n

Les proptypes n’ont pas réellement de rapport avec le référencement mais c’est la première fois que j’en utilise donc je trouvais intéressant de les mentionner tout de même.

\n

Une démo ?

\n

“Dis Eva, est-ce qu’on peut vooooooir ?”

\n

NON.

\n

Bon d’accord.

\n

Voici le repo du MVP et le lien pour la démo (bien que si tout s’est bien passé, vous lisez déjà cet article sur le MVP !).

\n

NB: Pour les personnes qui liront cet article bien après le mois de mars 2019, vous pourrez voir à quoi ressemblait le MVP au moment où je l’ai fait !

\n

Conclusion

\n

Le MVP est fin prêt à voir le jour ! Dès la semaine prochaine je vais le mettre en ligne et enfin pouvoir écrire et publier des articles depuis Netlify CMS (j’ai hâte) et arrêter de spammer mes collègues de mails dès que j’envoie quelque chose sur le repo du site (ils ont hâte).

\n

Sources

\n

Tutoriel comment faire un blog avec GatsbyJS:

\n

https://www.gatsbyjs.org/blog/2017-07-19-creating-a-blog-with-gatsby/

\n

Configurer les routes pour les articles

\n

https://scotch.io/tutorials/zero-to-deploy-a-practical-guide-to-static-sites-with-gatsbyjs#toc-creating-blog-pages

\n

Faire un composant SEO pour GatsbyJS

\n

https://www.gatsbyjs.org/docs/add-seo-component/

\n

Faire des composants utilisant Open Graph et Twitter Cards

\n

https://github.com/LekoArts/gatsby-starter-prismic

","excerpt":"Non le MVP n’est pas le Most Valuable Player mais bien le Minimum Viable Project.Cette semaine je me suis attachée à faire une première…","timeToRead":13,"fields":{"slug":"/blog/le-mvp-est-la/"},"frontmatter":{"date":"2019-03-15T08:38:32.079Z","tags":["MVP","Agilité","GatsbyJS"],"title":"Le MVP est là","author":"Eva Spessotto","thumbnail":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACmklEQVQoz21Sy27TQBT1RyFB20Riy4oFP8APsOcH2CDBDtg0DlUbKCot4iVBu0BULWpF27SlyktJ3KQPJ2n8GHvs+DGewx0HUSFh6cj3zNx77tw5o925cevwwd0i7t2/mRVuz8q52QIKBcLcHGF2Gv+PX69JirNisYiZmZkjbVEv4+1iSS4tz0Mvl6CXdMI8Si+XCK8oLuUo6QsoLSxD1/Up8pxFQmWao+uyXC5DE1mWCQlkAlKITIo0hQBxpwk5PoDaExnxyRUycxNCCMoVeY50W4BdlalUtSlIKtNGw6E0jC76/b4cDAawrTESyk7sIySjzWmcZhCBSYJfkCYp4jjKm0SDQ8QXm1DaaZxgPB5LrdfroVKpYG1tDc1mE77vQ0oB6kegTJmpAviRj8awjigOc27aHTz7+hjP15+iZu8gFD6Yy6DZtg3XdeE4DizLAmOMuiewAgMW7+YxaGyj18DOwTrMy/NcsHvZwqf9ZWyPPuL97huY7Ay+x6eC/8KBS+KMTQgRxdTMpTXXg8fivLFLnDkMgZcioQNzJ4RH+7ZjQ1OnU2NyzvM/U8k+CV1sg/U/g3khgcO9asLpvobL3Kkgj8HPt+AbH+D4QV6nmmlDMqXdbqNer8tGowHi+UiIziB5HddfRBdZ+8voFsAHLUzMXzmlTwlKzTAMubGxgZWVFbm6uopOp4MkieEFk9wUNQF5jJNhFSfeEQ4GW7AnY5yOanj07iFefH+CffObTERMuUxqQRAgDEMZRRH+xDDp+XT7HdjBCM1WC1ESoVrfQ93aw8/2D5wN+xhZQxz3d9EOqtitbSOIuOQ8yE059TxPvaFMuayMUU6rNfUM1L06ZEzghwjIqNCfkDl018wjHoK7IUIeZcoDqu39Bm1fSKOAjfGqAAAAAElFTkSuQmCC","aspectRatio":1.6501650165016502,"src":"/static/03e1ea9b0b119f65ec968823a5b6540e/c7e19/mvp.png","srcSet":"/static/03e1ea9b0b119f65ec968823a5b6540e/475cb/mvp.png 245w,\n/static/03e1ea9b0b119f65ec968823a5b6540e/0b65f/mvp.png 490w,\n/static/03e1ea9b0b119f65ec968823a5b6540e/c7e19/mvp.png 980w,\n/static/03e1ea9b0b119f65ec968823a5b6540e/e9c7b/mvp.png 1000w","sizes":"(max-width: 980px) 100vw, 980px"}}}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/blog/le-mvp-est-la/"}}