Ecommerce statique

Durée: 64m41s

Date de sortie: 11/05/2020

Dans ce podcast, nous parlons d'un retour d'expérience sur la création d'un site ecommerce avec SnipCart et Gatsby JS. Avec le confinement, les commerçants ont dû fermer leurs portes subitement mi-mars. Avec le confinement qui traîne en longueur, certaines boutiques essayent de s’adapter et de rebondir en tentant le commerce en ligne. Retour sur un site ecommerce statique développé pour une boutique/Salon de thé de Lyon. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/ecommerce-statique/

Bonjour à tous, aujourd'hui on est avec Patrick et le sujet est toujours hyper d'actualité,
on va parler de Jamstack mais surtout de e-commerce.
Patrick, toi tu viens de livrer ton premier e-commerce statique, donc totalement Jamstack,
on va dire, ce que je te propose c'est qu'on en discute un peu et de voir les points forts,
les points faibles et comment ça s'est construit.
Oui ça marche.
Et du coup déjà est-ce que tu peux nous parler du projet, quel était le projet,
combien il y a de produits, tout ça, enfin un petit peu le contexte et quel techno tu as
utilisé ?
Le contexte il est assez simple, on est dans une période de confinement et on en sera
sorti normalement au moment où vous allez écouter ça.
Mais pendant cette période de confinement il y a pas mal de commerces qui ont été fermés
assez soudainement mi-mars et qui ont décidé tout simplement de se décider de relancer
l'activité vers mi-avril, donc relancer l'activité ça voulait dire ne pas forcément ouvrir
complètement et proposer de la livraison aux personnes ou du retrait, mais à travers
la porte du commerce.
Donc moi je m'étais amusé à faire un petit site avec Sneepcart et Gatsby, voir ce qui
était possible de faire, connaître un petit peu la techno de Sneepcart, comment ça fonctionnait,
comment on implementait tout ça.
Et puis il y a un petit commerce sur Lyon que je connaissais, un petit salon de thé
boutique qui désirait relancer l'activité.
Et puis je vais proposer, je vais faire le système tout ça et je vais proposer de partir
là-dessus.
Je vais proposer deux solutions et puis elle a choisi tout simplement de partir sur la
version statique sans vraiment savoir comment ça fonctionnait, mais elle m'a fait confiance
et puis on est partis là-dessus.
Et juste pour remettre dans le contexte, peut-être Gatsby, je pense qu'on connaît peut-être
à peu près tous, Sneepcart peut-être un peu moins, sans faire la pub et la promotion
de Sneepcart, mais qu'est-ce qu'elle est la fonctionnalité de Sneepcart en fait ?
Sneepcart, c'est un système assez simple qui s'implémentent sur n'importe quel site.
J'ai fait ça sur Gatsby parce que je maîtrise Gatsby, mais j'aurais pu le faire sur n'importe
quel site.
Tu peux même l'implémenter sur un Wordpress si tu as envie.
C'est un système assez banal où tu rajoutes des balises de CSS, des balises JavaScript
et ça te rajoute une fonction, donc tout ce qui est panier, gestion commande, gestion
de compte sur ton site.
Et ensuite, tu implémentes l'ajout des produits dans le panier via, en fait, tu rajoutes
un tag button et tu as des attributs que tu rajoutes au button pour quand tu cliques
dessus, ça rajoute des produits dans le panier et après tu gères ton panier avec toute l'interface
Sneepcart qui est rajoutée sur ton site.
C'est très facile.
D'accord.
En fait, j'ai un site statique classique, j'ai un ou deux produits, j'ajoute Sneepcart
et j'ai transformé mon site d'Internet en un commerce.
Oui, tout avec un panier, tout dans ton site, sans avoir rien fait.
Tu peux très bien mettre, si tu as un produit ou deux, tu peux même faire une, juste une
page HTML, tu mets deux produits, tu mets le Sneepcart et hop, tu as un site e-commerce
comme ça rapidement, sans te quitter le lot.
Donc c'est vraiment excellent.
Je ne sais pas depuis quand ils existent parce que moi, je pense que c'est peut-être depuis
2015, je ne sais pas si tu connais peut-être mieux que moi le début de Sneepcart.
Il me semble que ça fait, on va faire une petite recherche, mais je crois que ça fait
deux mois et ça doit être ça, 2015.
En tout cas, ils sont à la version 3 de leur librairie, de leur API et avant apparemment,
ça a utilisé du jQuery, des choses comme ça, ils ont complètement basculé sur vue,
donc tout l'interface de panier, etc., c'est du vue.
Donc, ça rajoute pas mal de choses possibles, notamment, on en parlera peut-être après,
mais notamment grâce à vue, tu peux customiser des éléments.
Donc, tu peux implémenter, dans ton panier, tu peux rajouter des éléments.
Tu vois, vu que je n'ai plus comment ça s'appelle dans le système où tu rajoutes des...
Je ne sais plus comment ça s'appelle, mais quand même...
Des directives.
Ouais, je ne sais plus.
Enfin, bref, tu remplaces des éléments qui sont dans un component avec un code.
Donc, tu peux customiser quand même...
Je regarderai.
Ouais, je ne me souviens plus comment ça s'appelle, parce que j'ai vu, j'en fais plus trop en ce moment.
Mais, du coup, tu vois, tu peux customiser pas mal de choses et je pense que c'est ça qui est très intéressant
dans cette nouvelle version qui était sortie fin 2019.
Donc, elle est assez récente, ils sont encore en train de corriger pas mal de choses, ils implémentent des choses.
Et c'est facile à intégrer.
Ouais, c'est facile à intégrer.
Derrière, en plus, ils sont très très réactifs.
Ils sont au Canada, donc ils parlent français.
C'est plutôt sympa, ils parlent anglais français, ils te répondent en français.
Et ils sont très réactifs surtout, c'est une petite équipe, apparemment.
Et donc, tu as un chat dans le dashboard que tu as et ils te répondent du coup.
Voilà, ils mettent Maxi une journée pour te répondre.
Et généralement, ils te trouvent des trucs.
Donc, ils ont un super support client, quoi.
Ouais, pour l'instant, ils arrivent à assurer, ils répondent, ils sont disponibles.
Pour l'instant, c'est une bonne chose.
Et le client final, en fait, il peut payer directement via SNIP CART aussi.
Le client final de JulliCommerce, tu veux dire?
Oui, le client final, en fait, il va sur le site.
Grâce à SNIP CART, il a son module de paiement qui est déjà intégré.
Le panier et le paiement.
Le paiement, il y raison tout.
Tu branches, tu fais un compte SNIP CART.
Et à partir de là, tu branches...
Alors, nous, c'est STRIPE, mais tu as d'autres services qui sont disponibles.
Et tu branches STRIPE pour le paiement.
Alors, tu passes par l'interface SNIP CART,
où tu rentres ton numéro de carte bleue tout ça.
Mais le paiement est fait sur SNIP CART, sur STRIPE.
Donc, c'est totalement transparent.
Via STRIPE.
Par contre, ça n'ouvre pas une STRIPE.
C'est vraiment SNIP CART.
D'accord, en fait, c'est SNIP CART qui a intégré un module de paiement via STRIPE.
Ok.
Donc, pour nous, en tant que développeur,
on a juste à intégrer SNIP CART dans notre site.
Exactement.
Et le client crée son compte STRIPE.
Le connect à SNIP CART.
Et toi, tu fais rien, en fait.
C'est rien à faire.
Et du coup, en termes de dev,
assez facile à implémenter,
ou quand même, tu as rencontré des problèmes
sur l'intégration,
ou en fait sur l'orchestration un petit peu,
je ne sais si ça se dit d'ailleurs,
sur tout ça.
De base, c'est assez facile à implémenter.
Clairement.
D'accord.
Déjà, ils ont une doc qui est bien.
Des fois, il faut chercher un petit peu,
mais elle est pas mal.
Et c'est assez facile à implémenter.
Après, ça se complique quand un client
veut certaines choses un peu spécifiques,
notamment en termes de livraison par exemple.
Donc, j'ai découvert des choses
en mesure de la demande,
parce que toi, non-édève,
on voit les choses d'une façon,
et le client, lui, il veut faire des ventes.
Donc, il voit les choses d'une autre façon.
Donc, il te demande, ça, c'est possible.
Et ça, est-ce qu'on peut faire ça, machin ?
Et toi, tu essaies de voir.
Tu vas voir la doc, tu cherches, machin,
tu sais ce que c'est possible, tu réfléchis.
Et jusqu'à aujourd'hui,
j'ai réussi à faire tout ce qu'on m'avait demandé.
Donc, j'étais assez étonné.
Assez étonné de pouvoir
personnaliser et de se miser les services
qui sont dans SNCCR.
Donc, ouais.
Bonne surprise de Fautier.
Excellent.
Et du coup, est-ce que le client,
lui,
on va dire, pas le client final,
mais le propriétaire
de la boutique,
est-ce que elle,
elle a eu des complications
à utiliser le SNCCR,
tout pour elle, en fait, c'est totalement transparent aussi.
Elle a eu une interface SNCCR,
tout où elle peut, je sais pas,
rentrer son stock, changer ses prix
ou des choses comme ça.
Alors, le site,
comme il est conçu,
il tourne autour de
donc ses gas vies.
J'utilise des markdowns pour,
des fichiers markdowns pour les gestions des produits.

d'accord.
Donc, mes produits sont dans des fichiers markdowns.
Il y a le frontmatter qui gère
tout ce qui est des caractéristiques,
le prix, la catégorie, etc.
Et la TVA,
toutes des choses comme ça, qui sont vraiment dans le markdown.
Donc, ça s'affiche,
ça affiche les produits. Donc, Gatsby récupère le markdown,
tu as reculé de GraphQL,
ça affiche tes produits.
Et à partir de là, moi, j'ai des attributs,
je les rajoute au niveau du button
pour mettre dans le panier,
qui viennent du frontmatter.
Donc là, tout ce qui est gestion des produits,
c'est vraiment Gatsby qui le gère.
C'est pas du tout SNCCR.
À ce niveau-là.
Ok.
Et du coup, est-ce que tu as une digestion du stock ?
Oui. Alors justement,
ça, c'était une demande de la cliente.
SNIP CART
permet une gestion du stock,
une gestion inventaire,
en fait, ils s'appellent ça inventaire.
Donc, il y a une...
Comment ça se passe ?
SNIP CART
va aller chercher les produits
que tu vends sur ta boutique,
sur le site.
Donc, il y a différentes façons de l'implementer.
Mais le plus simple, c'est juste,
tu mets tes produits, une liste de produits
avec ton... ton... tes boutons,
qui ont une classe particulière.
Et lui, il va fêcher tout ça
et récupère tous tes produits.
Donc du coup, tu te retrouves avec une liste de produits
dans le dashboard de SNIP CART,
qui l'a été cherchée sur ton site.
Et à partir de là, tu peux leur mettre du stock.
Donc tu vas dire, t'es le produit,
il a zéro, t'es le produit, j'en ai deux,
t'es le produit, j'en ai trois.
Et... donc, spécifiquement pour ce site,
ce que j'ai fait, c'est que
c'est Gatsby, c'est un site statique,
mais c'est aussi dynamique.
Donc ce que je fais, c'est que je...
je vais... j'ai fait une fonction Netlify
qui va appeler la pays de SNIP CART,
de ce compte.
Je vais chercher les produits avec le stock.
Et moi derrière, quand la personne se connecte
la première fois sur le site,
il commerce, je vais mettre à jour...
En fait, je... je fêche en fait tous les produits.
Et ceux qui sont pas disponibles, je ne mets pas disponibles.
Ou alors...
Donc je gère en dynamique le stock en temps réel.
Ok, donc en fait, la fiche, si j'ai bien compris
tout l'affichage des produits,
c'est du statique pur.
Par contre, le nombre
de...
la gestion du stock et le nombre
de produits disponibles,
là, c'est du dynamique, basé
sur la fonction inventaire de SNIP CART.
Exactement.
Et là, tu mets à jour juste le...
En fait, voilà.
...le nombre de...
d'éléments disponibles.
Exactement, la cliente met à jour le stock
sur son SNIP CART, sur son dashboard.
Et instantanément,
le site est mis à jour.
Puisque c'est dynamique, à chaque fois que tu vas
sur le site, tu as... tu as un appel...
Une requête.
Ok, donc du coup, tu as une requête, en fait,
qui part à chaque...
À chaque entrée.
Je sais pas comment...
À chaque entrée du site, ou à chaque affichage
du produit, je sais pas.
Ça se fait qu'une seule fois, comme c'est un Gatsby,
d'accord.
...une application web.
T'as qu'une fois ou c'est chargé,
complètement, avec ça fait l'appel.
Donc du coup, ça le fait une fois,
à chaque fois que tu visites le site.
Du coup, c'est...
Ouais, c'est vraiment dynamique.
Et instantanément, en fait,
tu mets un stock à zéro,
deux secondes après,
c'est disponible sur le site.
C'est prétentiel.
Donc ça, c'est plutôt magique.
Ils ont une API
qui est...
Ouais, on peut faire pas mal de choses,
on peut faire des appels, tout ça.
Donc, ouais, ça, c'est pratique.
Ah ouais, donc en fait, tu peux quand même
avoir un peu une sorte de business
logique si tu veux gérer ton inventaire,
peut-être récupérer tous tes clients
si tu veux.
Oui.
Je peux pas l'implémenter
sur une sorte de CRM
ou des choses comme ça.
Oui, pour vrai.
En fait, tu peux extraire
toutes ces données
pour justement créer...
Ouais, des...
Ouais, tu peux brancher...
Ouais, il y a une API
qui est assez complète
et tu peux vraiment récupérer
tes commandes, tes clients,
enfin, tout, ouais, tout,
OK.
Et aujourd'hui, tu penses
est-ce qu'il y a des notions
de seuil, en fait,
ou pas du tout.
C'est-à-dire,
tu vas me dire, ouais,
SNIP CART, ça va être bien
jusqu'à une certaine volume,
une certaine volumétrie
de produits,
ou ça va être qu'à l'usage
en clair, est-ce que j'ai
3 000 produits, est-ce que SNIP CART
est adapté,
ou on va dire, pour...
ou pas du tout.
Par contre, si j'ai que 2-3 produits
SNIP CART est plus adapté,
si j'ai commencé à avoir
210-310 000 produits
références,
peut-être il faut une autre solution.
Est-ce que toi,
avec ton recul,
tu as déjà un petit peu
cette notion de...
Ouais.
de scope et d'échelle
de fourchettes de produits
ou de...
de l'imitation, en fait.
Ouais, moi, à mon avis,
enfin, je pense que SNIP CART
est très adapté
pour ce type de projet,
où là,
typiquement,
elle doit avoir
30 ou 40 produits disponibles
sur la boutique.
Je pense que c'est très adapté
sur ce type de boutique.
À mon avis, SNIP CART
n'est pas adapté
sur un site qui commerce
beaucoup plus complète
et que beaucoup plus de produits.
Je ne pense pas que ça soit
vraiment gérable
via le dashboard.
Et surtout,
il y a une chose
qu'on n'a pas encore dit, en fait,
c'est le niveau du tarif.
Puisque...
OK.
Le niveau tarif,
alors, c'est assez simple.
C'est SNIP CART,
prendre 2 %
sur le chiffre d'affaires
que tu réalises.
Et ensuite,
tu as la commission
aussi sur Stripe.
Du coup,
ça fait, je ne sais plus...
Qui est,
elle est transparente.
En fait,
cette fonctionnalité
de SNIP CART,
en fait,
leur business model,
c'est gratuit à l'usage.
Et tu payes...
Tu payes le rent.
OK.
Donc, en fait,
c'est une sorte de sasse.
De sasse,
ils commercent.
Ouais, ouais.
Ils ont...
OK.
En fait,
c'est le...
Il y a un...
En fait,
si tu ne fais pas un chiffre d'affaires,
je crois que c'est 400...
Enfin,
je vais regarder sur le site.
Si tu es en dessous de
460 euros,
ils te prennent 9 euros.
En tout.
Si tu es au-dessus,
ils te prennent 2 %.
Voilà.

si tu fais...
OK.
Donc,
si tu as un tout petit volume,
c'est 9 euros par mois.
C'est ça.
Après,
là,
c'est de prendre la commission.
Et Stripe,
donc Stripe,
pour les cartes européennes,
ils prennent 1,4 %
plus 25 centimes d'euros
par transaction.

en gros,
ça fait 3,4 %
plus 25 centimes d'euros
à chaque vente
sur le site.
Donc, voilà.
Il y a quand même un coup.
Ça veut dire que
plus tu vas faire de vente,

plus tu vas payer
de commission à SlipeCart.
Bon, après,
voilà,
il y a un moment donné,
il faut payer aussi.
Mais,
évidemment,
je pense que
il y a des solutions peut-être
un peu plus avantageuses
au niveau financier
quand tu fais du gros volume.
Parce que tu peux très bien
développer ta solution
pour le commerce
et avoir que Stripe
en fait à payer en commission.
Avoir ça du fait.
Merci bien.
Mais, par contre,
en fait,
je pense que c'est
du déplacement de budget.

je ne sais pas,
moi je vois ça
en termes de dev freelance
ou en clair,
c'est juste un déplacement
de budget.
Parce que,
si ton site
vous commerce
ou je ne sais pas quoi,
il te coûte
le prix
avec tous les problèmes
que ça amène.

tu vois,

ça se calcule aussi
pour tester
un marché
ou pour des boîtes,
je pense surtout
sur les startups
qui vendent un ou deux produits.
Bon,
au départ,
ils ont aucune idée
si ça peut marcher
ou pas.

sur une approche
vraiment
itérative,
tu peux lancer
ton business,
ton e-commerce
pour pas cher.
et
tu payes à la commission
et
si tu fais beaucoup d'argent
et tu payes beaucoup de commissions
à SNIP CART,
pas tant mieux,
c'est-à-dire que t'as un bon problème
et
parce que tu vends
et donc,
à ce moment-là,
tu pourras peut-être
essayer d'optimiser les coûts.
Par contre,
si tu vends pas,
au moins,
tu n'as pas dépensé
des sommes astronomiques
sur la mise en place
d'un e-commerce
ou tu as développé
une usine à gaz
pour
prendre
3 produits.
Non, non.
Il n'y a plus que les deux oeuvres en pas.
Donc je pense que
c'est juste
un déplacement de budget.
Par contre,
il y a peut-être
une éducation.
Est-ce que ça a posé problème
le fait
justement de payer les commissions ?
Donc 3,
on va dire 3 points
plus
3,
3, 4,
3.4%,
plus 25 centimes
sur la transaction.
Ça a été un frein
pour le client
ou pas du tout ?
Dans ce,
comment dire,
dans la situation
où on est,
en fait,
où elle était
complètement fermée,
donc aucune rentrée d'argent
et sa seule solution
pour rentrer
un petit peu d'argent,
c'était de
faire cette boutique.
En fait,
non,
ce n'était pas un frein
parce que de toute façon,
elle n'avait pas le choix.
Après,
c'était ça

tu rentres rien.
Il vaut mieux avoir
90 % de quelque chose,
100 % de rien.
Donc après,
ce n'était pas un problème.
Après,
j'ai été très clair
avec elle
sur les commissions,
combien ça coûte, etc.
Il faut être transparent.
Oui, j'ai eu un doute,
même à un moment,
parce que Stripe
prenne plus de commissions
sur les cartes américaines.
Donc,
à un moment,
j'ai eu un doute,
je me suis dit,
« Mais attends,
SNP,
c'est au Canada,
en étant au Canada,
ça va être considéré
comme carte européenne ? »
Non,

c'est quand même considéré
comme carte européenne.
Donc, la commission
était bien de 1,4 %,
mais j'ai quand même
fait un test,
j'ai vraiment essayé
d'avoir le moins de surprises,
de mauvaises surprises après.
Bien sûr.
Mais après,
ce que tu dis,
c'est tout à fait juste.
Là,
on paye une commission,
mais en même temps,
en développement,
ça coûte beaucoup moins cher.
Effectivement,
si tu parles sur Shopify,
ils ont aussi 2 % de transactions,
et en plus,
tu payes un abonnement mensuel,
enfin,
parce que j'ai regardé
aussi Shopify,
parce qu'il y a des gens
qui essaient de faire
Shopify
pour le confinement.
Shopify,
ce n'est pas forcément
le plus économique non plus.
Et après,

on se fait par sur développement
de sites.
Alors moi,
j'ai vu des commerçants
sur Anci,
là,
qui ont lancé des nouveaux sites
de vente
avec des au-commerce.
Mais franchement,
le résultat,
il est vraiment moyen.
Et puis c'est pareil au niveau...
Enfin, aujourd'hui,
je ne sais pas ce que t'en penses,
mais des plateformes
e-commerce,
enfin,
c'est pas très glamour,
tout ce qui est magento,
prestachop, etc.
Enfin,
ça donne...
Moi, je pense qu'il y a
une notion de seuil,
je pense, tu vois,
parce que
Sneakart
avec 100 000 refs,
tu vois,
bah oui,
c'est peut-être compliqué,
tu vois.
Après,
il faut se tourner vers d'autres
solutions
qui, eux,
ouais,
sont vraiment adaptées.
Mais,
enfin,
j'ai pas testé
et implémenté Sneakart,
mais je pense que ça me paraît
vraiment idéal
pour des commerçants
avec assez peu de refs,
françaises idées,
peu de références,
avec
un développement
manot,
on dit, voilà,
on fait un site statique
pour éliminer tous les problèmes
hashtag jamstack,
on va pas revendre
la vertu
de la jamstack
et je pense qu'en plus,
s'il y a des API
et derrière,
avec du serverless,
on peut faire toute la
Oui, je pense que...
toute la connexion
et puis même,
ça se trouve,
je sais pas s'il y a une implémentation
avec Zapierre,
mais ça se trouve,
on n'a même pas besoin de coder, quoi.
C'est-à-dire,
on peut implémenter
Sneakart avec Zapierre
et après,
pour automatiser
la mise en place
d'un CRM,
de Mailchip,
de tout ça.

je pense qu'il faut repenser
toutes les fonctionnalités
des grosses usines à gaz
qui sont hyper coûteuses
à implémenter,
à appréhender aussi.
Il y a peut-être des notions de seuil
à trouver,
mais je suis convaincu
que plus c'est léger,
plus c'est modulaire
et plus on arrive
à avoir une qualité
à la sortie
qui est super intéressante.
Je pense que...
ce que tu dis,
avec la pays,
je pense qu'il y a un certain moyen
de faire...
si vraiment tu as beaucoup de références
de brancher ça
avec un petit Bapopis simple
ou...
là, dernièrement,
j'ai rencontré,
enfin, j'ai discuté avec une...
une e-commerceante
qui a un WooCommerce,
donc pour vendre des vêtements.
Elle y va jamais être sûre,
en fait,
parce que son WooCommerce
est branché à un CRM,
je ne sais plus le nom,
qui est assez connu, là.
Et en fait,
elle fait tout via le CRM.
C'est une force?
Non, c'est pas cette force,
c'est un autre,
je t'avais demandé,
je crois, pour...
Pipe Drive?
Non, je ne sais plus.
Bye-bye.
Upspot?
Non, j'ai oublié le nom,
mais en fait,
elle se branche jamais,
sur son WooCommerce.
Elle fait tout.
En fait, le CRM est branché au WooCommerce,
et elle gère ses produits
et ses commandes, tout ça,
via le CRM.
Donc effectivement,
quand tu vois cette utilisation,
tu dis,
« Bah, quel intérêt en fait d'avoir un WooCommerce?
Peut-être SNIP-Cart avec la payage,
peut-être la même chose.
Donc, ouais,
ça a discuté, ça a voir, en fait.
Après, ça dépend peut-être le WF,
ça a discuté,
ça a présenté aux clients
différentes options,
et puis voir avec le menu...
Non, je pense qu'il faut vraiment
écouter et...
écouter le besoin
et appréhender aussi
l'utilisateur, c'est-à-dire le commercial,
le e-commerce, en fait,
qui va vendre ses produits
et quelle est son appétence
et sa capacité
à gérer un outil informatique.
Tu vois, si...
si l'outil qu'on lui emmet dans les mains,
c'est une usine à gaz,
et il lui faut,
je sais pas combien de temps
pour l'appréhender,
ça va être compliqué.
Ah, c'est clair.
Il y a aussi,
s'il est tout seul,
s'il y a une équipe,
s'il faut implémenter
une sorte de gestion des droits,
quels sont aussi
les ambitions de la boîte,
c'est-à-dire, ok, aujourd'hui,
on a dix rêves,
par contre, on a pour ambition
dans l'année
de passer à dix mille rêves.
Bon, ben, ok, est-ce que ça scale ?
En fait,
c'est comme tout,
je pense qu'il n'y a pas de solution
mirinque, l'absolu,
à tout,
tout est custom,
et je pense qu'il y a un outil
pour chaque usage
et avoir
différents outils,
en tant que nous,
Dev, c'est super intéressant
de savoir, ok, ben,
j'ai SNIP CART
en possibilité,
j'ai, voilà,
j'ai différents,
dix différentes solutions,
j'ai, ouais,
j'ai différents outils
dans ma boîte à outils,
quoi, et après,
je viens chercher
le outil le plus adapté
à mon client,
et ça, c'est,
ben, c'est la discussion
avec ton client,
ou quel est clairement son besoin,
la définition de son besoin,
super important.
C'est clair,
en fait, c'est notre,
c'est notre rôle,
de façon de présenter
différentes options,

de pas rester bloqué
sur,
ouais, je fais que du WordPress
et du VooCommerce,
et voilà, ça va faire tout,
non, c'est bien d'avoir,
voilà, différentes options,
c'est d'ailleurs,
c'est ce que j'ai fait,
je lui ai présenté,
je lui ai dit, voilà,
j'ai SNIP CART,
et j'ai aussi VooCommerce,
si je veux partir sur la WordPress,
voilà, c'est ce que tu préfères.
Elle a choisi SNIP CART,
après,
elle a choisi SNIP CART,
bon, elle savait pas vraiment,
elle m'a fait confiance,
mais, par exemple,
le coup du statique,
je ne vais pas vraiment expliquer,
parce que,
parce que de toute façon,
elle,
ce n'est pas qu'elle s'en fout,
mais c'est,
voilà, elle,
elle vend son produit,
après,
comment ça marche derrière, elle sent.
Exactement.
Ce n'est pas son problème.

Enfin, souvent,
les personnes comme ça,
effectivement, comme tu dis,
ils n'ont pas forcément le temps
de passer,
enfin,
des heures sur l'admin,
à gérer tout le truc,
donc c'est vrai que l'admin,
s'il y a des faciles à prendre les mains,
c'est vraiment,
c'est un avantage,
et puis...
Exactement.
Après,
tu sais,
on dit souvent que,
quand on est vendeur de marteaux,
on voit des clous partout,

Ouais, c'est ça.
Parce que,
bah ouais,
parce que,
dans ma boîte à outils,
j'ai qu'un marteau,

je ne vend que des marteaux,
donc,
tout problème est un clou.
Non, non,
je pense que,
je ne pense pas,
je pense qu'il faut vraiment disputer,
et,
et,
et je pense que aussi,
le plus important,
c'est quand même que,
la relation de confiance
que tu as avec ton client,
tu vois,
ou ton client,
lui,
il a entendu parler de vos commerces,
donc, évidemment,
ça va sortir,
à un moment donné,
dans la discussion,
mais,
à la fin,
c'est quand même,
toi le pro,
et c'est toi qui va,
qui a un devoir de conseil,
et,
et d'être le plus d'exhaustif,
justement,
sur ton choix.
Mais,
pour moi,
c'est quand même toi qui reste le pro,
et qui doit guider,
et un petit peu éduquer aussi,
au moment,
enfin, si le client a besoin,
sur,
pour faire les bons choix, quoi.

donc,
ça,
c'est plutôt,
c'est plutôt cool.
Et en termes d'hébergement,
t'as mis ça sur quoi ?
Alors, j'ai utilisé Netlify.
C'était la première fois
que j'utilisais Netlify,
j'avais peu d'expérience dessus,
j'avais juste joué un petit peu avec.
Moi, j'étais plutôt sur Now,
et,
qui d'ailleurs,
qui vient,
en reste,
de changer un petit peu leur concept.

Non, je crois qu'ils ont changé de nom, non ?
Oui, ils ont changé de nom,
mais aussi,
réorientés,
je ne sais pas trop, en fait.
En gros, ils ont réorienté
leur business un peu,
vers ce que fait Netlify.
Ils ont plus,
parti vers Netlify.
Mais le système est génial.
Now,
c'est,
enfin, moi, j'adore le système,
j'ai encore utilisé dernièrement,
c'est vraiment top.
C'est différent,
en fait,
l'autorification tout ça,
différente de Netlify,
mais Netlify,
ouais, c'est,
j'avais peu d'expérience avec.
Là, j'ai mis vraiment les mains dedans,

toi, t'es un gros fan de Netlify,
et j'avoue que,
oui,
bah c'est top,
c'est top.
C'est surtout très facile,
à utiliser.

c'est, en fait,
tu te demandes après,
pourquoi tu passes autant de temps,
à régler tes serveurs,
tout ça,
quand tu utilises Netlify,
en fait,
en deux secondes,
tu mets ton site en ligne,
c'est magique.
Bien sûr,
après,
je ne vais pas faire l'apologie de Netlify,
parce que,
enfin,
de manière très exhaustive,
c'est sûr,
quand t'es tout seul,
et que t'as pas d'équipe,
bah ouais,
t'as pas de DevOps avec toi,
donc,
ta mise en prod,
là,
elle est d'une simplicité,
tu peux rollback
comme tu veux,
tout,
et,
bah ouais,
c'est simple,
c'est super simple,
c'est rapide,
et c'est facile.
Après,
il y avait des,
des limites,
enfin,
il y a aujourd'hui des limites
sur ton nombre de build,
et
t'avais un peu une appréhension là-dessus ?
Ouais,
j'avais une appréhension,
parce que,
alors,
le système,
il est assez,
bah,
comment ça fonctionne,
je vais expliquer un petit peu,
donc,
j'ai forcément le code
Evergis sur GitHub,
bon,
ça aurait pu être GitLab,
mais là,
je suis sur GitHub.
Donc,
tout mon code source est sur GitHub,
donc,
mon site Gatsby
est développé
et ébargé là-bas.
Donc,
pour la gérer l'admin,
je lui ai rajouté
une couche avec Forestry,
donc,
qui permet de gérer,
alors,
Forestry aussi,
super système,
qui permet de gérer
les efficient markdown,
donc,
ça fait une anime.
Alors,
Forestry,
juste petite part,
entre elles,
c'est une,
Forestry en fait,
c'est un CMS,
Headless,
c'est-à-dire,
c'est un
gestionnaire
de,
ouais,
content management system,
basé
sur du
markdown
et tu viens
plugger ça
directement
sur ton site statique.

tu as un CMS
au-dessus d'un site statique.
C'est ça.
Ouais, c'est ça, en fait.
Forestry marche essentiellement
avec des fichiers markdown.
Donc,
tu as un fichier de config
où tu définis
donc,
tes sections.
Donc,
moi,
il y avait des pages
et des product.
Et ensuite,
tu définis
les champs
et ensuite,
tu as une zone
éditable
pour tout ce qu'est le contenu
classique.

c'est vraiment...
Donc,
ton client,
donc,
c'est-à-dire,
le e-commerçant
et l'accès
via Forestry.
Voilà.
Les produits,
elles les gèrent via Forestry,
elles gèrent les pages
et les produits,
puisque je lui ai mis
une petite section page
pour qu'elle puisse rajouter
des pages,
mentionnées les gars,
etc.
Donc,
elles gèrent tout ça
par Forestry.
Donc,
c'est une admine
qui est plutôt
hyper épurée, simple.
Elle l'a pris en main,
mais j'ai même halluciné,
en fait,
j'ai même pas expliqué
comment ça marchait.
Elle avait déjà édité
des produits.
J'avais même pas eu le temps
de lui expliquer.

vraiment,
c'est hyper sympa
à utiliser.
C'est vraiment bien fait.
Ça se plug-away
vraiment très rapidement.
Tu fais ton fichier
de conf à la main
ou tu peux le faire
via l'admine
Forestry.
Mais voilà,
en une heure,
une heure et demi,
tu as tout configuré.
Et tu as une admine,
voilà,
tu as une admine pour ton site.
Donc là,
je vais donner un accès
là-dessus pour tout ce qui est
gestion des produits,
les photos,
la description,
etc.
Les prix,
les TVA,
je rajoutais plein de
possibilités,
puisqu'il y a plein de choses
qui sont utilisables
au niveau de
Sneakart.
Et ensuite,
donc,
à chaque fois que
moi je fais un changement
au niveau du code
ou elle fait un changement
au niveau du contenu
via Forestry,
Netlify est branché
sur GitHub.

automatiquement,
il va déployer le site.
Donc,
il y a un auto-deploy
Netlify.
Et donc,
ça déploye le site
sur Netlify
et il est disponible
dans sa dernière version.
Donc, je l'avais expliqué
puisque elle,
c'est pas trop
statique, dynamique,
etc.
J'ai essayé de lui expliquer,
je lui ai juste dit,
bah écoute,
quand tu fais
une modif sur Forestry,
bah en général,
ça prend à peu près
une minute 30 pour être en ligne.
Bah oui,
d'accord, ça marche.
Et puis,
bah voilà,
il n'y a pas de problème en fait.
Terminé.
Ok.
Problem terminé
alors que nous,
on était là,
non mais,
une minute 30,
il y a 90 secondes.
Ouais,

on était là,
arrête.
Et le client,
ok,
bah c'est normal.
Pas de problème.
Ouais,
ok,
bon bah voilà.
Donc c'est pour ça,
des fois,
on était des fois un petit peu
plus flippés que les clients,
en fait.
Enfin, eux,

son intérêt,
c'est de pouvoir éditer les produits
sans passer par nous en fait,
en gros,
sans passer par un dev,
elle est plus plus plus plus plus plus plus.
Bien sûr,
être autolome,
sur la gestion de son contenu.
Et puis,
évidemment,
ça se marie une seule,
une minute 30,
c'est pas la folie.
Voilà,
donc ouais,
Netify,
il y a des limites aujourd'hui,
que 300 minutes de build.
C'est pas tellement limité
au niveau du nombre de build,
mais plus au niveau des minutes
de process.
Et au début,
ouais,
j'étais un peu plus...
Et tu peux pas optimiser ton build?
Alors ouais,
tu peux optimiser,
tu mets du cache, etc.
Mais j'ai essayé de faire un truc,
il y a même,
comment ça,
Gadbis,
ils ont sorti un nouveau système de build
incrementale.
J'ai essayé tout ça,
mais finalement,
une minute 30,
deux minutes maxi,
c'est pas énorme.

le début,
elle faisait beaucoup de modifs.
En fait,
forcément,
tu mets le site en ligne,
déjà,
tu as rempli des descriptions,
tout ça.
Tu revois un petit peu des fautes,
tout ça,
tu complètes un peu tout ça.
Donc au début,
je voyais les builds qui augmentaient,
machin,
je me dis,
oh là,
je sais pas si les 300 minutes,
ça va se passer.
Je commençais à stresser.
Et puis,
au bout de,
en gros,
on a mis le site en ligne,
elle me faisait encore quelques modifs,
il fallait rajouter des trucs.
Et puis après,
ça s'est arrêté tout simplement.
Elle a commencé à gérer son stock
sur SNIP CART et ses commandes.
Donc elle touchait
quasiment plus les produits,
puisque ces produits,
finalement,
il est vent,
et puis elle en change,
elle en implément de pas des nouveaux,
tous les jours.

en fait,

pendant 10 jours,
elle n'a rien modifié.
Du tout.
Donc,
tu te dis,
bah ok,
bah c'est bon,
ça passe en fait.
Et là,
je crois qu'il me reste,
ouais, on est large quand en fait,
il reste peut-être
100 minutes de build,
et il reste 10 jours,
donc on est large,
large,
vraiment large.
Et puis,
de toute façon,
elle va sans doute pas les modifier.
Je pense que la description de produits,
elle va pas la changer,
tout les mois,
même tout les semaines.
Elle a rajouté quelques produits,
elle m'a dit
qu'elle voulait rajouter
quelques produits salés,
tout ça.
Mais franchement,
elle la suit.
Ouais, c'est bon.
Et,
simple, ok, parfait.

côté images,
c'est stocké où ?
Pour l'instant,
c'est stocké sur GitHub.
C'est stocké sur GitHub,
puisque Gatsby,
un système d'image,
qui est très bien fait,
qui optimise les images
au niveau du build,
donc il te fait
différents formats,
etc.
Donc c'est un système
qui est super optimisé,
donc j'utilise ça en général.
Donc ça passe très bien.
Ok, mais
est-ce que le client
à la main,
pour faire une mise à jour
de, je ne sais pas,
par exemple,
elle a un cookie,
elle a fait un nouveau cookie,
elle prend
en photo son cookie
et elle l'intègre
directement
depuis forestry,
et ça va dans ta code base,
et ta code base
est mise à jour
sur GitHub.

sur ta tige produit,
tu as un champ photo,
et tu
télécharges la photo.
En fait,
sur forestry,
tu as une gestion du média,
des médias.
Donc par contre,
ce n'est pas multi-dossier,
c'est juste un dossier upload
qui est dans ton
Gatsby,
dans ton projet.
Et il met
les photos dans ce dossier,
et après Gatsby le récupère
avec le chemin,
et puis,
il la merlit.
Non,
elle peut,
ouais,
j'ai complétant les photos,
tout.
Alors,
ça peut amener des problèmes
sur le scale,
c'est qu'en fait,
à chaque fois
qu'elle amène à jour un produit
avec une image,
ça vient charger
ta code base.
Du coup,
est-ce qu'il y aurait peut-être pas
moyen de mettre ça
sur un clodinari,
s3,
ou un truc comme ça ?
Il y aurait, oui, oui, je peux être
dans une amélioration.
Oui, tout à fait,
je pourrais mettre ça
sur clodinari.
Et après,
je resterai quand même
sur le système de Gatsby
image,
qui est vraiment, vraiment bien.
Et du coup,
au niveau du build,
j'irai quand même télécharger la photo
pour la mettre sur Netify,
en hébergé,
en hébergélement sur Netlify.
Mais oui,
je pourrais très bien la mettre
sur clodinari,
pour éviter de charger
le code github,
enfin le combe github.
Mais,
enfin,
sur 30 ou 40 produits,
pour l'instant, ça va.
Je vais...
Ouais,
c'est pas un bloquant.
Mais en tout cas,
c'est un truc intéressant.
Ouais.
Excellent.
Excellent.
Et du coup,
et ce plugin,
ouais, dis-moi.
Non, du coup,
je vais juste finir
sur Netlify, en fait.
Parce que j'avais,
donc...
Ouais, bien sûr.
Netlify, donc on avait
système de build,
automatique, machin, tout ça.
Et j'ai aussi,
donc on en parlera peut-être après,
mais j'ai fait des...
Donc pour la suggestion,
par exemple,
du stock,
en dynamique,
j'ai utilisé les fonctions
Netlify.
Donc c'est une fonction
Netlify qui va chercher,
qui fait un appel
de la P.I.
Sneakart
pour récupérer le stock
à chaque fois.
Donc je fais un fetch
directement sur une URL
de l'hébergement Netlify.
Et donc il me répond.
Et puis voilà.
Donc j'appelle
même pas une URL externe.
C'est vraiment
une fonction Netlify.
Et puis,
donc il y a aussi
une gestion
fonction qui gère
la livraison.
On en parlera après.
On en est
customisation de Sneakart,
mais...
Et aussi
le formulaire.
Donc on a,
dans la version gratuite,
on a une centaine de messages
possibles
par le formulaire,
le...
le form.
Et donc je lui ai
mis un petit formulaire
pour que les gens
puissent la compter.
C'est un formulaire de contact
classique.
Ouais.
Bah je fais
un formulaire de contact
en React
qui est en...
Ajax,
entre guillemets,
comme on dit.
Donc...
Mais ça marche très,
très bien.

Il y a une centaine de messages.
Donc pour quelqu'un
qui a une boutique, enfin,
pour un site classique,
un...
un trafic assez
moyen, quoi.
Sans,
je pense que sans méchage,
il y a un largement de préfet.
Donc...
Ouais.
Après,
sans message,
ça veut dire
trois demandes de contact
par jour.
A peu près.
30 jours.
Trois demandes par jour.
Est-ce que tous les sites
aujourd'hui ont trois demandes?
Non, je ne suis pas sûr.
Pas...
Voilà.
Bon,
je vais me terminer.
Donc ouais,
là on s'est clair.
Il n'y a pas tant de messages.
Excellent.
Et sur...
Et sur la prévention
du serverless
et des fonctions
NetflixI,
simple ou pas?
Ouais,
c'est facile.
En fait,
au début,
j'ai un peu galéré.
J'ai eu des problèmes
jusqu'à il n'y a pas longtemps
sur les fonctions NetflixI.
Je ne sais pas pourquoi,
ça déconnait.
J'ai eu des problèmes de fonctions
entre...
Tu sais,
je développe en fait
avec la ligne de commande
et je déploie
via la ligne de commande
de NetflixI
sur l'ordi.
Oui.
J'avais aussi le déploiement
automatique GitHub
et en fait,
je ne sais pas,
j'avais des...
il y avait des problèmes,
en fait,
dans un temps,
j'ai eu des soucis entre
les fonctions qui ne se lançaient pas
en fait sur NetflixI.
Et c'était variable en fait.
Soit ça venait de la fonction
quand je la déployais
via la ligne de commande.
Soit c'était la fonction
qui se déployait
via GitHub.
Et je ne sais pas trop
ce qui s'est passé.
Alors,
je n'ai pas...
Du coup, au final,
j'ai réussi à régler le problème
en changeant le nom de la fonction.
J'en ai créé une nouvelle
avec qui ils faisaient exactement
la même chose.
J'ai changé le nom
et là,
j'ai plus de problèmes.
Il y a peut-être
des noms un peu interdits.
Ouais,
je ne sais pas trop.
Donc,
j'ai eu juste ce problème-là
au niveau des fonctions.
Mais sinon,
dans l'ensemble,
NetflixI,
c'est pas mal.
Même en ligne de commande,
finalement,
une fois que tu connais
un peu les deux,
trois commandes,
c'est pratique.
C'est pratique.
Le NetflixI
fonctionne de point creator.
Ouais,
et tout ça.
Et il y a un truc
qui est top aussi.
Alors, il faut le savoir,
justement,
parce que quand tu as un compte gratuit,
tu es limité à 300 minutes
de build,
et bien,
en fait,
quand tu développes,
tu fais ton build
avec la ligne de commande,
NetflixI build,
et en fait,
tu fais ton déploy
via la ligne de commande.
Et du coup,
le déploy se fait en...
se compte juste
deux,
trois secondes,
en fait,
dans ton...
dans ton...
ton quota de build,
en fait,
du compte NetflixI.
Du coup,
au lieu de...
une minute,
une minute,
une minute,
une minute,
c'est juste trois secondes.
Donc,
il faut le savoir,
quand on développe le site,
il vaut mieux déployer
via la ligne de commande
que de déployer via le Git.
Parce que ça te fait gagner
beaucoup de quotas.
Ouais.
Donc, ça,
c'est important.
Faire attention à ça.
Et par contre,
et par compte,
est-ce que,
si tu as déjà buildé,
en local,
et tu as déployé,
est-ce que,
au moment où tu vas
faire ton commit,
en fait, non,
il faut faire ton commit.
Ah oui.
Et après, tu déploies.
En fait,
c'est soit l'un soit l'autre,
c'est soit tu branches
ton GitHub,
soit tu branches
ton...
Ouais, il faut débranquer, ouais.
soit tu fais ton build.
Ouais, effectivement, ouais.
Ouais, effectivement,
parce que du coup,
si tu déploies,
voilà, après,
il faut jouer avec ça,
ou alors,
tu le débranches complètement.
Tu débranches ton GitHub
de Netlify
le temps que tu déploies.
Tu déploies que via la ligne de commande.
Ou,
tu envoies sur GitHub
moins souvent.
Parce que, ouais,
effectivement,
si tu déploies,
après, tu envoies sur GitHub,
ça va faire 2 builds identiques,
après l'autre.
Ouais,
tu as un build dans le local,
et un build...
Ouais, ouais.
un build automatique.
Non, pas...
Ok,
ça, c'est des trucs
à tester.
Ouais.
Excellent.
Donc, plutôt convaincu
par Netlify, en fait.
Ouais, totalement,
totalement convaincu.
Ouais,
c'est clair.
C'est...
c'est...
je pense que le...
C'est facile.
Ouais, c'est facile,
et je pense que vraiment
le réutiliser.
Voilà,

bon petit produit.
Après,
la version gratuite est...
voilà,
elle est gratuite,
mais après,
la deuxième version,
je ne sais plus combien c'est,
40 dollars en tout cas,
c'est pas si cher non plus,
parce qu'après,
si tu as plusieurs sites,
machin,
tu as des clients,
c'est pas si cher que ça.

enfin, mon avis,
je pense qu'enfin,
45 dollars par moment.
Ouais.
C'est pas...
Après,

je pense que...
ben, c'est comme tout,
c'est...
est-ce que tu n'as pas un meilleur temps
de créer un compte
pour ton client,
et c'est lui qui paye.
Ah oui, ça,
tu vois,
moi, je ne suis pas trop partisan
de marger là-dessus,
et je préfère que mon client
lui paye
pour la prestation que je lui fournis,
que ça soit du support,
de...

que sais-je, mais...
comme ça, c'est lui qui paye
netlify.
C'est lui, en fait,
je suis totalement transparent
sur les outils,
et lui,
il paye les outils,
et moi,
il me paye
sur mon savoir-faire
et mon service.
Après, c'est ma vision.
Il y a d'autres personnes
qui vont...
qui vont faire...
qui vont facturer de l'hébergement,
et ils vont prendre un spread
dessus.
Voilà, ils payent
leur OVH
20 balles,
ou 50 balles à l'année,
et ils facturent 200 au client,
parce que ils partent du principal...
Très bien,
enfin, voilà,
c'est comment tu factures
et comment tu gères
ta relation client,
et tout.
Oui, oui, mais on est bien partants.
Moi, je suis...
je suis...
je suis plutôt partisan de...
On est totalement là-dessus.
On est en face de...
Moi, je préfère aussi
que...
que le client ait son compte,
et puis...
voilà, je...
Ouais, je suis pas du style
non plus à faire de la marche
sur l'hébergement, tout ça.
Je sais qu'il y en a qui...
Il y a des agences
qui marchent sur l'hébergement,
sur les plugins,
enfin, certaines prédites.
C'est pas mon style, ouais.
Ouais, mais après,
c'est...
c'est leur...
c'est leur business model.
C'est pas grave.
Après, moi, je préfère, en fait,
après, on revient plus
sur de la gestion commerciale
et de la gestion,
vraiment, de ton client,
mais moi, je préfère
qui est super clair et transparent,
et surtout, en fait,
il n'est pas tributaire
de Alex Duval, quoi.
Si demain, il veut partir...
Et aller voir et travailler
avec un autre prestataire,
il peut, et il a tous ses accès.
Il me révoque mes accès
et c'est terminé.
Et je pense
que le lien commercial
que j'aurais à travers ça,
de lui dire,
tu as toutes les clés,
tu peux me sortir quand tu veux.
Je pense que le lien est d'autant plus fort
que, justement,
il peut partir à tout moment.
Et c'est lui qui fait le choix
volontaire de rester
et de continuer à travailler avec moi.
Et je pense que le lien
est d'autant plus fort encore, je pense.
Ah oui, oui, mais c'est pareil.
J'ai même esprit.
Enfin, je ne veux pas loquer le client.
Si demain, il veut partir,
voilà, on n'est pas à l'abri
d'un changement
de stratégie ou quoi,
ou n'importe.
Enfin, voilà,
si tu veux partir,
tu pars, il n'y a pas de soucis.
On n'est pas menottés.
Oui, c'est pour ça que je vais donner tous les accès
de transparents, comment ça marche.
C'est très important.
Enfin, en tout cas, je fonce à l'autre côté comme ça.
Et
tu m'as dit que t'avais publié
ce module, on va dire,
de Gatsby,
Gatsby, SNIPKart, tout ça.
Tu peux nous en dire plus ?
Oui, alors c'est simple.
Donc pour le site, là,
j'avais développé un plugin,
parce qu'au niveau de Gatsby,
tu peux utiliser des plugins,
les plugins entre guillemets,
c'est pas des plugins WordPress,
c'est des plugins
NPM que tu rajoutes
et que tu configues.
Mais qui sont spécifiques à Gatsby ?
Oui, c'est spécifique à Gatsby,
parce que tu as déficié spécifique à Gatsby,
et tu rajoutes une brique à Gatsby
pour éviter de la coder.
Tu peux le faire en rajoutant
un module NPM, soit tu peux le faire en local.
Tu peux aussi faire un dossier plugin
et tu fais un plugin dedans
et tu l'utilises dans ton site.
Donc moi, j'avais codé un plugin local
pour utiliser SNIP CART,
très bien, et tout ça.
Et puis je me suis dit,
en fait, il y avait un plugin SNIP CART V3
qui existait,
mais le truc était pas déjà même plus à jour,
pourtant il n'était pas si vieux,
il n'était déjà même plus à jour
et puis il n'était pas grand chose, en fait.
Et c'était bien dommage,
parce que SNIP CART propose plein de configurations.
Donc j'ai optimisé tout ce plugin,
et puis j'en ai fini par faire un vrai plugin NPM,
et je l'ai publié.
Et puis maintenant, il y a un peu plugin NPM
qui est un peu plus avancé
pour la version 3 de SNIP CART,
qui est disponible sur la section plugin de Gatsby.
Et voilà, c'est un peu plaisir
de publier un premier plugin sur Gatsby.
Et puis après SNIP CART,
je l'ai passé sur Twitter tout ça,
ils l'ont recublié,
donc je t'ai content de participer un petit peu au systeme.
Mais oui, carrément, en fait.
Donc du coup, maintenant, quelqu'un qui est sur Gatsby,
il veut implementer SNIP CART,
il le fait de manière beaucoup plus facile
et fluide grâce à ton plugin.
À peu près 5 secondes, je pense.
Le temps de répondre aux NPM, c'est bien.
Bravo Patrick, bravo.
Oui, tu impléments très rapidement.
Bravo.
Oui, c'est cool.
Et puis, j'ai rajouté de trois trucs
où tu peux récupérer, c'est du React,
mais voilà, j'ai rajouté un petit contexte tout ça
qui permet de récupérer des nombres de produits
que tu attends ton panier,
ou savoir si tu es logé ou pas,
des petits trucs comme ça
qui facilitent le développement.
Mais oui, c'est ça aussi,
l'avantage de Gatsby,
c'est ce système open source plugin,
tout ça qui permet,
enfin moi, j'utilise déjà des plugins,
d'autres personnes ont développé,
donc pourquoi moi, je participe aussi.
C'est ça l'open source.
Oui, après, c'est exactement.
Ça fait partie de l'esprit un peu open source.
C'est excellent.
Et du coup, tu vas maintenant,
tu es un peu pied point lié avec Snipkart,
où tu vas être obligé de mettre à jour le plugin,
quand Snipkart va sortir ses nouvelles réalismes,
tu vas être obligé de mettre à jour la tienne aussi.
Je vais suivre un petit peu, mais ça devrait aller.
De toute façon, il sort des versions,
je ne sais pas tout les combien,
peut-être tous les deux, trois mois,
donc ce n'est pas non plus intensif,
donc ça devrait aller.
Il suffit d'ouvrir une issue sur le site,
sur le GitHub et puis on corrigera.
Mais là déjà, il y a pas mal de choses qui sont possibles.
Non, la dernière fois qu'ils ont fait,
là, c'est la V12.
En fait, moi, j'ai commencé, c'était la V3011.
Là, c'est la 3012 qu'ils ont sorti il y a 10 jours.
Et c'était la fameuse...
Oui, c'était mineur.
Oui, c'était mineur,
mais il y avait une fonction qui était très intéressante.
D'ailleurs, tu m'avais fait le remarque par rapport au fait
que quand tu cliquais sur le bouton Ajouter au panier,
ça ouvrait automatiquement le panier.
Et c'était un petit peu bizarre.
En fait, effectivement, c'est la première chose
qui m'avait un petit peu dérangé sur le site.
Et du coup, ils ont ajouté une fonction
qui permet de désactiver ça.
Donc du coup, il n'ouvre plus le panier
quand tu cliques sur le bouton Ajouter au panier.
Par contre, ils n'ont pas fait les choses jusqu'au bout
parce qu'ils ont oublié de mettre une fonction
qui permet d'ouvrir le panier au niveau programmation.
Donc du coup, j'ai dû fidouter un petit peu,
mais j'ai trouvé une solution.
Donc il y a du coup...
Oui, en fait, ils ont modifié le comportement par défaut,
mais ils n'ont pas laissé le choix au dev
de mettre un bouton style open fullscreen cartes,
trou ou fullscreen squads.
En fait, normalement, tu le fais via une classe CSS
que tu mets sur un élément.
Donc il va trouver cette classe
et puis il va dire OK, il va mettre un événement
sur le bouton et quand tu cliques dessus,
ça va ouvrir sauf qu'avec du React,
ça marche pas forcément, mais vu, c'est pareil.
Jusque tes éléments, c'est du virtualdom,
donc ça disparaît.
Donc il va fallu fidouter,
mais du coup, j'utilise un système...
Ce qui se passe maintenant, c'est que j'ai rajouté
une sorte de fenêtre dialogue qui s'ouvre,
un pop-up, on m'en disait avant.
Donc tu cliques sur Ajouter au panier,
tu as un pop-up qui s'ouvre,
qui dit le produit a bien été ajouté au panier,
et là tu cliques, je continue mon shopping,
ou alors je vais au panier, donc tu as de boutons.
Et du coup, ce bouton-là,
en fait, j'ai fait un bouton qui reste permanent
et je déclenche un clic dessus un peu.
Voilà.
Donc j'ai fait ça un petit peu, c'est un petit peu du tips,
mais ça marche bien.
C'est de l'abris, c'est du bricolage.
Oui, mais ça marche bien.
C'est le boulot.
En fait, il faut toujours s'adapter aux API tiers.
Oui, c'est vrai.
Il faut que tu attendes la prochaine version
pour qu'elle ajoute une fonction JavaScript
pour ouvrir le panier.
Mais ils sont ouverts.
Alors suite à ça,
j'ai fait un petit retour en fait à Sneakart par mail
par rapport à mon implementation,
ce qui était bien, ce qui était pas bien,
ce qui fallait améliorer tout ça.
Ils m'ont confirmé de façon qu'ils ont des trucs
qui sont prévus, qui implémentent, etc.
Donc non, c'est bien.
Il y a deux, trois trucs que j'ai repérés,
mais je vais le dire quand même,
mais par rapport à l'accessibilité,
il y a deux, trois trucs qui sont pas top-top
au niveau de Sneakart,
notamment au niveau des polices tout ça,
elles sont un petit peu petites, tout ça,
mais ça, c'est pas très gênant
parce qu'on peut les surcharger au niveau du CSS.
Donc ça, tu peux augmenter la taille des polices,
les couleurs, tout ça,
ce que j'avais fait d'ailleurs pour le site.
Il y a aussi un truc vraiment, par contre,
qui est très gênant, mais ça, c'est prévu,
mais ils le feront plus tard.
C'est en fait quand tu ouvres le panier,
normalement, tu sais, au niveau d'accessibilité,
quand tu navigues au clavier,
si je clique, il y a le clavier,
ajoute au panier,
normalement ton focus doit passer
sur le panier Sneakart, en fait.
Et après, tu navigues dans ton panier Sneakart.
Et ça se fait pas du tout, en fait.
En fait, ton focus reste dessous.
Donc ça, c'est très gênant, en fait.
Au niveau accessibilité, c'est un petit peu dommage,
mais j'espère qu'ils vont améliorer ça.
Mais bon, après, voilà, quoi.
Après, c'est peut-être dans la roadmap,
mais peut-être pas le top prio.
Oui, comme ils sont une petite équipe,
il m'a dit, on est une petite équipe,
donc on ajoute des choses à faire améliorer ça.
Ça viendra, je pense, c'est sûr.
Cool, cool.
Donc, du coup, maintenant, on peut largement dire
que faire du commerce en statique Jamstack,
c'est facile, quoi.
Oui, complètement.
En fait, complètement.
Et c'est surtout, j'ai envie de dire,
c'est plus quand tu maîtrises un générateur de sites statiques
et que tu recommences à rajouter des Sneakart,
c'est très simple.
Et puis derrière, tu te sens bien,
parce que tu te dis, c'est sécurisé, je suis tranquille.
Ça risque rien, en fait.
Donc...
Tu vas pas te faire injecter des mots-clés
pour des sites de casino,
ou des sites porno.
Tu vas pas te faire pirater ton compte,
enfin, ou tu vas pas te faire détourner
tout ton module de paiement,
parce que c'est Stripe.
En clair, t'es venu déléguer chaque partie
à des mecs qui font que ça.
Et je pense qu'en fait, là,
on est au coeur de la Jamstack,
c'est du statique.
Et pour chaque fonction métier,
on vient déléguer un mec
ou un service qui fait que ça
et qui le fait bien, quoi.
Et Stripe, ils font pas de la recherche.
Ils font du paiement, et ils font que ça,
ils le font bien.
Et Forestry, c'est un CMS.
Et il fait que ça, il le fait bien.
Et Netlify, il ne fait que de l'hébergement.
Enfin, tu vois, on vient spilté tout
et on vient articuler tout ça
autour de notre service,
à nous, enfin, business logic,
de notre app,
ou de notre site Internet.
Et je pense que c'est l'essence même
de la Jamstack.
Et c'est sûr, c'est top,
parce qu'on vient un petit peu
orchestrer tout ça.
Oui, une fois que tu as branché tout ça,
ça marche tout seul.
C'est tout automatique.
Ouais, franchement,
je gère quelques sites WordPress.
J'en ai juste ras le bol,
c'est mis à jour de plug-in,
franchement, tu as un mis à jour de plug-in à faire.
Ça ne rate jamais.
C'est horrible.
Et là, il n'y a pas du tout.
Il n'y a pas de mis à jour de plug-in, il n'y a rien à faire.
Juste, voilà, la cliente
elle gère son compte SNIP CART,
et il n'a rien à faire.
Et le site, il est statique.
Donc, c'est déficit statique.
Et comme j'ai dit avant,
elle fait des mis à jour de produits
maintenant quasiment tous les 10 jours
et elle appelle.
Quel intérêt d'avoir un site dynamique derrière,
alors que le contenu, il s'en jete les viendra jamais.
Avec la contrainte de maintenance,
la contrainte de comment
d'avoir un service qui tourne
tout le temps.
En termes de vitesse.
Je pense que les bienfaits sont
plus que...
Ah ouais, je te dis, là,
il y a une commerçante que je connais sur Antique,
elle en sait son site,
c'est un WordPress avec un bout-commerc.
Le site, il est hyper long.
Le site, il est 2 heures à charger chaque page.
Là, le site
commerce statique,
c'est instantané.
Et est-ce que tu penses
que
c'est
une stack qui pourrait marcher
à de scale ?
Ce que j'entends par là,
c'est que, même si je suis pas super fan
des boilerplate et tout ça,
est-ce que, en fait,
tu pourrais rendre un petit peu
ton imprémentation,
ton e-commerce un peu, on va dire,
générique,
peut-être pas automatisable,
mais, en clair, demain,
tu as un client qui vient pour son site statique,
bam, enfin, pour son site statique e-commerce,
j'entends,
et
d'implementer ça
hyper, hyper rapidement
pour te concentrer que sur du design,
en clair,
de sortir une singularité
dans son site internet,
mais ce qui te permet, en fait,
de développer et de mettre en production
un site e-commerce de manière très, très, très rapide.
Est-ce que tu penses qu'aujourd'hui
les...
l'outil, comme tu l'as articulé,
donc c'est-à-dire, Gatsby, Netlify,
Forestry, SteamCart,
GitHub
pour... pour... qui t'as tout ça, mais
est-ce que, aujourd'hui, c'est
totalement scalable,
ou il y aurait encore un petit peu
des améliorations à faire, des petits tweaks
à mettre pour rendre l'outil
un peu escalable et... et rapide
à mettre en prod
pour un nouveau client ?
C'est marrant que tu me poses la question, parce que, justement,
je suis en train de travailler là-dessus,
parce que, en fait, c'est un peu le but de site,
c'est de voir ce qui était possible, et, ouais,
l'idée, c'est de... c'est de pouvoir
sortir un site e-commerce assez rapidement.
Alors, l'intérêt...
de... de façon, oui, parce que, Gatsby,
SNIP-Cart, ça, ça ne change pas, il suffit de le brancher,
Forestry, je le branche,
enfin, tout ça. En fait, finalement, oui, comme tu dis,
il n'y a que le design qui doit changer,
éventuellement, la position, enfin, comment dire,
le... lui, que c'est un peu des pages, tout ça, mais...
Ouais, c'est... c'est ça le but, c'est...
comme on est sur du Gatsby, du React et des components
qui ont réutilisable, c'est de pouvoir
sortir un site e-commerce assez rapidement,
et beaucoup plus rapidement, d'ailleurs, j'ai essuyé pas mal de plate
avec... avec le premier site, là. Donc, ouais,
d'ailleurs, j'ai quelqu'un qui m'avait demandé
une commerçante de Lyon ou une autre,
qui m'a demandé s'il y avait possible de te faire un site
le même, et je lui ai donné un prix, tout ça,
et oui, je lui comptais beaucoup moins de temps, donc...
ouais, c'est beaucoup plus... c'est... c'est...
c'est plus facile à dupliquer,
parce que... il y a beaucoup moins de réglages à faire de...
ouais. On est tellement dedans, ouais.
Ok.
Et ouais, donc du coup, ouais, intéressant,
intéressant, parce que, clairement,
toi, maintenant, en termes de...
de commercial, tu viens avec
une... une solution
que tu peux proposer à tes clients,
de... ouais, de tout...
enfin, de... d'un package e-commerce,
et tout en respectant,
bah, tes convictions,
on va dire, technologiques,
et... et de...
tout en préservant aussi ton expérience développeur,
où tu n'as pas à gérer, justement,
toutes ces... toutes ces...
toutes ces maintenances, et en gardant
une qualité de produits finales
ouais, ouais, ouais, ouais, sur des standards.
Ouais, tu as fait le...
On considère, comme top.
Ouais, ça me... ça me fait un exemple,
puis, ouais, derrière, c'est... enfin, moi, je sais que j'ai confiance, là,
le truc, il est... il est robuste,
donc j'ai confiance, ouais, je peux le proposer sans problème.
Et puis là, on a...
on a... bon, j'en ai pas parlé encore, mais c'est...
j'avais un système de...
euh, je... le... au niveau de la...
la livraison, elle avait un...
comme on est en période de confinement, c'est assez particulier.
Donc, elle a...
elle a proposé trois types de livraison,
ce qui était...
donc, il y avait le retrait, logique,
la livraison sur certains
endroits, sur Lyon,
et l'envoi par la poste,
puisqu'il y a certains produits qu'elle pouvait envoyer par la poste.
Et euh... à ce niveau-là,
bah, ce qui est pas mal avec Sneakart,
c'est qu'on peut le customiser,
ce système, en fait.
Donc, ils ont un système par défaut,
de livraison, où tu vas mettre le prix et le poids,
etc., enfin, classique, hein.
Et après, tu peux customiser ça,
via un appel, euh... à une fonction
que tu vas lui donner, et tu le réponds,
en fait, euh...
donc, ils t'envoient le panier, en cours,
avec le... l'adresse, etc., les produits
qui sont dans le panier, et toi derrière, tu vas analyser ça.
Et euh... en fonction, alors,
là, sur le coup, je l'ai fait avec le code postal,
euh... bah, en fonction du code postal,
je proposais, ou pas, la livraison sur Lyon.
Et il y avait un minimum de commandes, aussi.
Donc, à ce niveau-là, c'est... c'est top,
parce qu'on peut vraiment customiser
la livraison. Et je sais même pas
si c'était possible de le faire sur un bout-commerse,
euh... aussi poussé. Mais euh...
Du coup, ouais, c'est...
Donc là, c'était pendant le confinement, et là, je pense qu'on va basculer
sur un nouveau mode,
puisque là, les magasins vont recommencer à ouvrir,
on arrive bientôt le 11 mai.
Et euh... on va passer
sur du clic & collect. Donc, euh...
Elle me demande, justement, de réadapter un petit peu
le système de livraison. Mais euh...
Ouais, voilà, quoi, c'est...
Le système, il est top.
Ouais, donc en fait, t'as pas... t'as pas, spécialement,
de... de...
de l'imitation, quoi. Je pense que...
C'est ça, en fait, où j'ai clairement...
C'est clairement, où j'ai halluciné avec Sneakart. Parce qu'au début,
je pensais pas...
que c'était aussi poussé.
Je pensais pas pouvoir customiser autant de choses.
Et euh... en fait, au fur et à mesure,
je... je... je monte le site, je suis disais, voilà, en fait, ça,
ça, machin. Et puis elle...
Puis elle, elle a laissé problématique, forcément.
Euh... elle est commerçante, elle a laissé produit, elle a
des problématiques. Et elle devait te dire,
ouais, mais moi, j'aimerais bien, euh...
livrer... sur Lyon.
Mais, euh... du coup, je voudrais bien être sûr
que si la personne, euh... ça lui propose
de livrer sur Lyon, bah, qu'elle habite
bien sur Lyon, tu vois.
Euh... ou euh...
Enfin, des choses comme ça, voilà.
Des vraiment des trucs paramétrables. Et euh...
Du coup, j'ai découvert au fur et à mesure que
Sneakart est arrivé à... à aller vraiment
un truc super précis, en fait.
Et c'est...
Ouais, c'est... du coup, ouais, je suis assez
étonné du système et il est vraiment top et...
Ouais.
Et j'ai... et comme je te dis, je sais même pas
certains qui, avec un WooCommerce
ou même autre chose, j'aurais pu customiser
autant la livraison ou des choses comme ça.
Donc, c'est...
totalement cool.
Sky is limit, quoi.
Ouais, ouais, ouais.
Ouais, c'est... des fois, t'as halluciné, toi-même.
En fait, c'est... en attendant, ça se
limitait soi-même alors que quand tu fais des
recherches, tu dis, ah bah en fait, c'est possible.
Ah oui, on peut. On peut.
À chaque fois, en fait, du coup, là, j'ai réussi
à faire tout ce qu'on m'a demandé. J'ai eu aucun...
Il n'y a eu qu'une chose qu'elle m'a demandé
où j'ai dit, non, c'est pas possible. J'ai tout été possible.
Donc, euh... top, quoi.
Ouais, donc top, quoi.
Carrement.
Carrement.
Top. Après, je pense, sur Forestry,
euh... il y a...
il y a... enfin, il y a assez
de possibilités là. Il y a, je pense aussi,
à R-Table, peut-être, à aller regarder
qu'il y a une approche un petit peu plus...
plus excelle, quoi.
Ouais, R-Table, c'est pas grave.
Il y a peut-être moyen.
R-Table, c'est pas grave.
Il y a peut-être moyen aussi de faire...
trouver... trouver...
peut-être un compromis entre les deux,
ou je sais pas, tu vois, mais...
en tout cas, il y a quand même des choses
plutôt pas mal, sur tous ces services-là,
pour...
Ouais, ouais, R-Table, bah justement...
E-commerce, statique.
Sur une boutique où il y aurait peut-être
plus de produits, un R-Table,
ça aurait peut-être plus adapté, ouais.
Pour gérer ça, il va bien...
façon excelle, quoi, avec un tableau.
Avec un tableau, et puis...
si tu as 1000 produits, ouais, c'est peut-être
plus facile à gérer.
C'est clair.
Après, ouais...
peut-être aussi pour faire des mises à jour
un peu plus massifs, tu vois.
Par exemple, OK, bah, tout...
tu vois, donc dans mon...
dans mon R-Table, je sélectionne, je filtre,
je prends tous les produits cookie
avec ou quand du chocolat, par exemple,
et je fais une promotion, donc je change le tarif,
et je fais moins 20% sur tous les...
voilà, c'est peut-être plus simple à faire
avec du R-Table.
Ah oui.
Que avec chaque fichier marina,
donc là, j'ai obligé de modifier, tu vois.
Une fois de plus, bah c'est que du custom,
quoi.
Mais en tout cas, ouais, ça amène...
ça amène quand même une belle possibilité
de E-commerce statique.
Totalement, totalement.
Oui, R-Table.
Excellent.
Je suis très fan, et en plus,
ce serait totalement possible,
puisque Gatsby,
la grosse force de Gatsby,
c'est de pouvoir se brancher à différents...
tu peux avoir du contenu qui vient de différents endroits.
Différentes sources.
Je pourrais très bien avoir les pages
qui sont sur Forestry,
et les produits qui sont sur R-Table,
et mixer tout ça et faire le site.
Ouais, c'est...
C'est clair que ça serait beaucoup plus facile
à gérer sur R-Table, une liste de produits.
Il y a juste un petit truc sur R-Table,
c'est qu'à ce jour, il me semble
qu'il n'est pas possible d'avoir des webhooks.
Donc ça voudrait dire qu'il faudrait
trouver un système pour que l'on puisse...
...guiler le site.
Patrick, Patrick.
Si c'est qu'un problème de webhooks
et de mise à jour.
Tu vois, en fait, on vient créer...
Enfin, moi, j'ai regardé le truc.
Je pense qu'il y a moyen de lancer,
de déployer un commentaire.
Un build.
Depuis une fonction de nullifax.
Donc tu viens coder quelque part.
Et ton bouton, en fait,
il déclenche ton build.
Donc le client fait toutes ces modifs
sur R-Table.
Une fois qu'il a terminé,
tu dis, une fois que tu as fait toutes tes modifs,
tu vas sur tel page,
tu appuies sur tel bouton,
et bam,
et ça lance le build.
Donc du coup,
après, peut-être que maintenant,
sur R-Table, ils ont mis un webhook
pour qu'il soit possible.
Peut-être que ça a été implémenté.
Si ce n'est pas le cas,
je pense que nous, on peut le créer
pour déclencher un build
automatiquement
sur un simple fonction.
Non, mais je crois qu'il n'y a pas de webhooks.
Il y a des prévus qu'ils en rajoutent.
Je sais que c'est dans le pipe.
Dans la roadmap.
Il y a en plus de solutions temporaires.
Mais je pense que...
Enfin, si ce n'est que ça,
la limitation,
je pense qu'il y a moyen qu'on trouve
un truc.
Il y a toujours une solution,
plus ou moins acquis,
mais ça marche toujours.
Mais cool.
Excellent, ce petit
bilan de e-commerce statique
ça amène de belles perspectives.
C'est quand même intéressant.
J'ai pris beaucoup plus de plaisir
à développer ce site
que si je l'avais fait avec un groupe
commerce ou un prestat.
Je vais pousser là-dessus.
J'aime beaucoup le concept.
C'est robuste. Je suis sûr du produit.
Je le connais vraiment bien.
Je sais ce qui est possible de faire,
ce qui va possible.
En tout cas, je vais continuer sur cette voie.
Je vais le proposer au maximum.
Je pense que je vais essayer de proposer ça
à d'autres commerçants dans les prochaines semaines.
Et puis on verra si ça accroche.
Super.
Merci Patrick.
Merci à toi pour ce petit podcast.
Excellent.
Je te propose qu'on termine là-dessus.
Et puis de façon
on mettra tout dans les notes
de toute façon comme d'hab.
Oui, carrément.
Ciao ciao.
Merci à tous.
On va pas trouver WSLash
sur le plateforme de podcasts préférés.
Et sur le site Internet d'Epodcasts.
www.flash-podcasts.fr
Sur le site, vous allez retrouver
tous les liens épisodes, des références
évoquées durant l'émission.

Episode suivant:


Les infos glanées

Je suis une fonctionnalité encore en dévelopement

Signaler une erreur

DoubleSlashPodcast

Double Slash, un podcast sur le développement web. Retrouvez-nous régulièrement pour parler de sujets variés tels que la JAMStack, l’accessibilité, l’écoconception, React.js, Vue.js, Next.js, Nuxt.js, le CSS et des retours d’expériences sur des implémentations.
Tags
Card title

Lien du podcast

[{'term': 'Technology', 'label': None, 'scheme': None}, {'term': 'Technology', 'label': None, 'scheme': 'http://www.itunes.com/'}]

Go somewhere