Création de l’app « l’iNTERVIEW » : un projet svelte.js simple

Je te présente comment je fabrique mon app « l’iNTERVIEW », un projet svelte / bulma simple. De l’étude des besoins jusqu’à la mise en ligne live de l’app et avec tous les aléas de développement. C’est du build in public sans coupure au montage (enfin c’est ce que je tente de donner).

Je vais la développer avec les outils suivant :

• Node.js : un moteur javascript
• VSCode: l’IDE que j’utilise, gratuit et rapide
• Svelte : un framework javascript qui comme son nom l’indique est léger et rapide, pour fabriquer l’application
• Bulma : car j’adore dragon ball :),c’est un framework css, il va nous faciliter la vie pour créer l’interface utilisateur
• Svelma : qui fournit une implémentation svelte de composants Bulma

Pour l’instant je vise une app javascript, un projet svelte + bulma, et à terme cela sera une DApp. J’ajouterai de quoi connecter un wallet, le moyen de minter l’interview depuis l’app, éventuellement le moyen d’acheter l’interview dans l’app aussi (soit en ajoutant le fichier audio, soit en automatique à la fin de l’interview, avec les traitements audio de post production au préalable) et je l’installerai sur IPFS.

Le MVP visé

Ce que j’avais prévu de faire lundi (au final j’ai mis la semaine pour faire la page home et je n’ai pas mis en ligne les questions), donc voilà le plan (démesuré) que je m’étais donné lundi

• Page Home : décrire le projet de L’Interview en gros titre, un sous-titre, un texte explicatif repris de mon billet défi, un gros lien vers l’interview. Le lien ouvrira d’abord une popup de capture d’email ?
• Page Interview :
  • un fichier json avec 3 ou 4 questions d’exemple pour valider un premier schéma de donnée simple
  • le mécanisme de démarrage de question : choix de la durée 3″ | 9″ | 27″ | 81″ | Random
  • le minuteur : un bouton de déclenchement + un affichage du minuteur => le minuteur joue en plus le rôle de témoin « enregistrement en cours », « on line », « live », « on
  • un bouton question suivante
  • un affichage Question par Question, en bien gros, pleine page, pour qu’on voit le mieux possible la question posée (si je filme l’écran pendant l’interview)
• Recopier le style du site principal, garder une cohérence graphique (je verrai après pour faire un truc plus techie sexy / web3 / tendance / 3D ) => je compte donner le choix de faire l’interview en VR, je ne vous en dis pas plus 🙂 ce sera la prochaine étape hé hé 🙂
• Uploader le code sur mon hébergement
• Faire un sous domaine => https://linterview.lartistecrypto.com : c’est ce qui me paraît le plus simple pour l’instant ne sachant pas encore comment gérer / intégrer une SPA dans une page WordPress et n’ayant pas trop le temps de m’y mettre non plus.
• Contacter des artistes pour faire des interviews 🎙 => gxrlsrevolution, fxhash france, blind gallery, trouver d’autres serveurs discord, recenser mes contacts twitter

Place à la pratique

Si tu n’as jamais codé de ta vie, cela va te sembler un peu compliqué. N’hésite pas à me mettre en commentaire ce qui t’aurais manqué, je pourrai ainsi te diriger vers des ressources adaptées voire les créer sur le blog.

Quand je parle de commande et que tu vois un bloc de code cela indique qu’il faut copier coller le code dans une console ou un terminal. VSCode que je te conseille pour tes projets de développement, incorpore une console dans son interface. Tu peux aussi y accéder avec le raccourcis ctrl + shift + ù.

Prérequis

Pour suivre le tuto, il faut un environnement Node.js opérationnel, donc si tu n’as pas Node.js sur ton poste, il faut l’installer. Il te suffit d’aller le chercher ici et de l’installer.

Si tu es plus expérimenté, tu peux aussi développer dans un container via VSCode, il te faudra alors docker d’installé sur ta machine, ça t’évitera d’installer node et tu développeras dans un environnement linux.

Création du projet svelte.js

La commande suivante va créer un répertoire portant le nom « linterview » avec tous les fichiers utiles pour démarrer un projet svelte.js. La commande va te poser quelques questions. D’abord le framework visé, il faut répondre svelte en se déplaçant avec les flèches, ensuite le langage, j’ai choisi javascript.

npm create vite@latest linterview
cd linterview
npm install
npm run dev

`cd linterview` : aller dans le répertoire linterview

`npm install` : npm = node package manager (gestionnaire de packets node) on demande d’installer toutes les dépendances du projets, qu’on peut consuler dans le fichier package.json

`npm run dev` : on va lancer le script dev du fichier package.json, ce script lance vite, c’est un « bundler » javascript, il va packager le code svelte, le transcoder en javascript et servir le code pour qu’on puisse aller le consulter en local, et tout ça très rapidement, il ne s’appelle pas « vite » pour rien :). Une fois lancé, tu dois voir sur quelle url tu peux consulter l’app (souvent http://localhost:8080)

Pour arrêter le serveur : tape Ctrl + c, c’est une commande qui arrête le programme qui monopolise la sortie de ta console.

Installation des dépendances additionnelles

On va installer les dépendances utiles pour svelma.

npm install --save bulma svelma rollup-plugin-postcss

`npm install --save bulma svella rollup-plugin-postcss` : installer les dépendances (npm install) les sauver dans la partie principale du fichier package.json : tu verras tes nouvelles dépendances dans la partie « dependencies » du fichier json

Ce que je fais en général, c’est qu’une fois mon projet créé j’ouvre vscode et je lance les commandes dedans, pour faire ça tu peux enchaîner les commandes suivantes :

cd linterview-front
code .

Là, VSCode s’est ouvert avec notre projet fraîchement créé dedans.

Maintenant on peut utiliser le raccourcis clavier « Ctrl + shift + ù » pour ouvrir un terminal dans l’IDE VSCode et lancer la commande d’installation des modules utiles pour svelma.

npm install --save bulma svelma rollup-plugin-postcss
npm run dev

J’ai aussi ajouté le module svelte-routing, très pratique pour gérer des url, et créer des slugs pour chaque partie de l’app.

Tout paraît parfait mais quand j’ai voulu utiliser un Button svelma, vite n’arrivait plus à transpiler (lire le code svelte et le transformer en javascript)…

Svelma issues

Pour résoudre le pb de compilation sass des composants svelma, j’ai installé les modules svelte-preprocess et sass :

npm i svelte-preprocess sass

Et j’ai remplacé dans vite.config.js la ligne svelte() par le code suivant :

svelte({
  preprocess: preprocess(),
})

Suivi du plan

J’ai voulu suivre mon plan mais j’ai été un peu dépassé par le temps et je n’ai donc pas développé autant que j’aurais cru et dû. J’ai me suis cantonné à la page Home et son design. Puis j’ai mis de côté les questions et le mécanisme d’interview que je travaillerai la semaine prochaine.

En ce qui concerne l’enregistrement audio et la fonction de mint des interviews, je ne suis pas persuadé de l’utilité de le faire sur mon app, en tout cas au début. Si je veux me lancer, il faut que ça se passe autrement, via zoom par exemple. On fait une réservation pour une interview, on fait l’interview via zoom, on utilise l’app pour lire les questions et pour minuter. Ensuite j’extrais le son, ou je peux même garder la vidéo, à voir avec l’interviewé·e. Je fais une translation à la main (ou via un service de speech to text ce qui me semble plus que probable) et je mint sur une marketplace (je pense à fx(text) pour le texte, je ne sais pas si la plateforme peut aussi prendre l’audio).

Pour ce qui est de mon contrat AAAPPA, je pense que ce sera encore un peu plus loin dans la réalisation du projet. Je veux d’abord bien prendre en main la création d’un smart contract « simple » : pour minter l’audio et le texte.

Il faudra sûrement que je mette beaucoup plus d’effort dans le contact des artistes et la réalisation des interviews si je veux que quelque chose en ressorte d’utile pour ce blog et pour les participants.

Intégration de Calendly

Pour permettre aux futures interviewé·es, aux curieux et aux intéressés de prendre rendez-vous avec moi, j’ai intégré Calendly dans mon app. J’avais au départ songé à google calendar, mais en voyant la complexité d’implémentation j’ai préféré la solution super rapide et facile de Calendly.

Créer un type d’événement sur Calendly

Sur la version gratuite de Calendly on ne peut avoir qu’un seul type d’événement. J’ai donc désactivé mon ancien type de rendez-vous pour créer l’événement « linterview ». On peut aussi utiliser celui qui est en place en l’adaptant à ses besoins.

Ensuite, il suffit de récupérer le code d’intégration via le bouton share.

Puis en choisissant le type d’intégration voulu.

Pour ma part, j’ai choisi le « Inline Embed ».

Il ne me restait plus qu’à l’intégrer dans ma page Home.svelte.

Adapter le code d’intégration calendly pour svelte

Pour intégrer la lib de Calendly, on utilise la balise <svelte:head> comme ceci :

<svelte:head>
  <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
  <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async on:load={initializeCalendly}></script>
</svelte:head>

Ensuite on récupère l’objet Calendly une fois le script chargé :

<script>
...
let Calendly
const initializeCalendly = () => {
  // @ts-ignore
  Calendly = window.Calendly;
}
...
</script>

Enfin, on appelle le widget dans la partie html :

<div class="calendly-inline-widget" data-url="https://calendly.com/francois-godineau/l-interv-ew-one-on-one" style="min-width:320px;height:630px;"></div>

J’ai donc éclaté le code d’origine fourni par calendly. Pour info voici le code d’origine, avec tout au même endroit :

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/linterview/2h" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->

Préparation de la publication

Pour préparer la mise en prod de mon app, j’ai configuré un sous-domaine chez mon hébergeur. Je l’ai configuré de telle sorte qu’il pointe vers un répertoire nommé linterview dans mon hébergment.

J’ai aussi régénéré les certificats SSL pour que le sous-domaine soit disponible en https.

Pourquoi une app et pas une intégration wordpress ? Bonne question.. La réponse est simple, comme je débute sur wordpress et que je voulais obtenir quelque chose rapidement, je me suis dit que j’irai plus vite en faisant mon app from scratch (= depuis zéro, en faisant tout moi-même). En plus, après elle sera probablement sur IPFS pour qu’elle soit vraiment décentralisée…

Après la première mise en ligne, j’ai fait un test de lighthouse qui m’a permis de renseigner la balise meta pour le SEO et j’étais franchement content du résultat :

Pour info, lighthouse est un outil google qui permet d’évaluer et d’améliorer les performances d’un site web.

Publication de l’app

Pour publier l’application svelte, j’ai d’abord configurer un sous-domaine chez ovh. Le sous-domaine linterview.lartistecrypto.com pointe vers un répertoire linterview à la racine de l’espace de mon hébergment. Je suis chez ovh et donc quand je me connecte en ftp à mon hébergement, je vois le répertoire, www, créé par défaut et qui héberge le présent site wordpress, et un autre répertoire linterview, que j’ai créé spécialement pour héberger mon app svelte.

Pour rendre live mon app, je l’ai donc buildée puis uploadée dans le répertoire cible linterview.

La commande de build est on ne peut plus simple :

npm run build

Cette commande va créer un « bundle » du code, c’est à dire qu’elle va interpréter tout le code svelte puis générer du code javascript optimisé dans un seul fichier : bundle.js. Le code « buildé » se trouve dans le répertoire dist à la racine du projet

Il ne reste plus qu’à uploader tout le contenu du répertoire dist vers le répertoire linterview de mon hébergeur.

C’est ce qui se passe dans le meilleur des mondes, mais lorsqu’on est développeur, il faut s’attendre à ce que tout ne se déroule pas comme prévu. En effet, nos environnements de développement et de production ne sont pas toujours complètement identiques, et c’est le cas ici. Je développe en local en lançant la commande npm run dev qui se charge de lancer un serveur web léger en node via vite, alors que chez mon hébergeur, le serveur est un apache. Il ne se comporte donc pas comme mon petit serveur de dev local et j’ai dû faire face à des problèmes que je n’avais pas anticipés.

Apache issues

En publiant mon app sur mon serveur, c’est à dire en uploadant le code sur mon serveur dans le répertoire /linterview que j’ai configuré chez OVH comme point d’entrée du sous-domaine linterview.lartistecrypto.com, je me suis retrouvé avec des erreurs 404 dès que je voulais utiliser une url qui n’était pas la racine du site. Par exemple l’url racine https://linterview.lartistecrypto.com fonctionnait très bien, mais quand j’ai voulu aller sur le listing de questions à l’url https://linterview.lartistecrypto.com/questions, j’ai reçu le code d’erreur 404, qui signifie que la route n’existe pas. La route fonctionnait très bien en local, servie par un serveur node dédié au développement svelte, mais pas en production sur un serveur apache…

Comment j’ai résolu mon erreur 404 avec ChatGPT

J’ai d’abord voulu le régler à l’ancienne via google et finalement je me suis dit, bah c’est un pb pour ChatGPT, je vais lui demander.

Poser un contexte clair et détaillé

j’ai une SPA hébergée sur le sous-domaine linterview.lartistecrypto.com dont le répertoire racine est /linterview chez mon hébergeur. Le serveur web utilise apache et ma SPA en svelte utilise le module svelte-routing pour avoir une navigation par page avec des urls distinctes. Quand je tape l’url https://linterview.lartistecrypto.com/question j’obtiens une erreur 404 alors qu’en local, mon application est servie via vite sur http://localhost:8080 et je n’ai aucun problème pour accéder à l’url http://localhost:8080/questions. Comment dois-je configurer apache pour obtenir ma page questions ? Est-ce qu’un .htaccess doit être écrit ? Où dois-je le mettre dans l’arborescence de fichier de mon hébergeur ?

Pour configurer Apache pour servir correctement votre SPA Svelte, vous devez configurer le fichier .htaccess dans le répertoire racine de votre site. Voici un exemple de contenu pour votre fichier .htaccess :

# Redirige toutes les requêtes HTTP vers HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# Active la réécriture d'URL
RewriteBase /

# Si le fichier ou le répertoire demandé n'existe pas, redirige vers index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

Ce fichier .htaccess effectue plusieurs actions :

• Redirige toutes les requêtes HTTP vers HTTPS pour assurer une communication sécurisée.
• Active la réécriture d’URL pour permettre la navigation par page avec des URLs distinctes.
• Si le fichier ou le répertoire demandé n’existe pas sur le serveur, redirige vers index.html qui est l’entrée principale de votre SPA Svelte.

Assurez-vous de placer ce fichier .htaccess dans le répertoire racine de votre site, qui est le répertoire /linterview dans votre cas.

Après avoir configuré le fichier .htaccess, rechargez votre site et essayez d’accéder à votre page « question ». Si tout est configuré correctement, vous devriez voir votre page s’afficher correctement.

Corriger quelques oublis

ChatGPT a juste omis d’encapsuler la conf entre <IfModule mod_rewrite.c> et </IfModule>.

Je savais déjà quel était le pb donc j’ai vraiment dirigé la réponse de ChatGPT, je n’ai pas fait le test de lui donner moins de contexte pour voir sa réponse. En tout cas, toute la conf apache est bonne, il a même ajouté la conf de redirection http vers https que je lui aurais demandé juste après. (Sympa ce chat 🙂

Mon .htaccess final :

<IfModule mod_rewrite.c> 
  # Redirige toutes les requêtes HTTP vers HTTPS
  RewriteEngine On
  RewriteCond %{HTTPS} off
  RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

  # Active la réécriture d'URL
  RewriteBase / 
  
  # RewriteRule ^index\.html$ - [L] 

  # Si le fichier ou le répertoire demandé n'existe pas, redirige vers index.html
  RewriteCond %{REQUEST_FILENAME} !-f 
  RewriteCond %{REQUEST_FILENAME} !-d 
  RewriteRule . /index.html [L] 
</IfModule>

Echange avec Léa Duhem de GXRLS REVOLUTION

Après avoir mis en ligne mon appli, j’ai fait un post instagram. Puis j’ai répondu à ce post d’Annelise Stern qui tombait à pic. Le post expose les moyens de soutenir les artistes femmes et un des moyens proposé est d’écrire sur leur travail. Je me suis dit : super, je prévoyais de les interviewer et j’ai l’impression qu’elle m’interpelle et me met au défi de soutenir les femmes. Son post a un ton autoritaire que je considère légitime et motivant :

« Si tu veux vraiment soutenir les femmes, alors fais ça… ».

Annelise Stern / @artgirls_galerie sur ce post instagram

Entre le marketing et le slogan politique ou l’inverse, mais ça marche, en tout cas sur moi.

Grâce à mon commentaire, Annelise m’a mis en relation avec Léa Duhem. Elle est historienne de l’art spécialisée en crypto-art et fait partie de l’équipe de GXRLS REVOLUTION en tant que curatrice. J’ai pu lui poser quelques questions sur la façon dont elle a réalisé ses interviews pour son mémoire. Elle a mené ses entretiens essentiellement en live sauf quelques-uns par zoom en anglais. J’ai validé avec elle la possibilité de faire une annonce sur leur serveur discord. Le catalogue GXRLS REVOLUTION est à ma disposition. Et je devrais utiliser les comptes twitter des artistes que je connais pour leur proposer l’interview.

Elle m’a aussi confirmé que twitter est le réseau numéro 1 niveau crypto-art. On y trouve vraiment énormément de monde et l’ambiance est franchement très amicale. Rempli de GM (Good Morning), de GN et toute une avalanche d’œuvres et de news. Sans compter que l’algo de twitter (une fois qu’il a compris qu’on s’intéresse au crypto art), nous propose pléthore de comptes à suivre.

Suite des opérations

D’abord, je vais commencer à contacter des artistes en direct et via des serveurs discord pour toucher directement une communauté. Il faut que je réussisse à faire une première interview la semaine prochaine 🙂

Ensuite, pour les développements, je prévois quelques features pour avoir une app qui fasse un peu plus que le minimum syndical :

• créer le mécanisme de démarrage de l’interview :
  • poser la première question du choix du nombre de question
  • sélectionner les questions en fonction OU poser une deuxième question pour laisser l’interviewé·e choisir ses questions
• gérer le mécanisme pour chaque question :
  • choix du temps de réponse
  • lancement du minuteur par l’interviewé·e
  • affichage de la minuterie
  • enregistrer l’audio en même temps
• ajouter la connexion de wallet
• créer les smart contract pour minter l’interview : Standard, AAAPPA
• uploader l’app sur IPFS => en faire une véritable DApp ?

Pour plus tard, j’aimerais :

• pouvoir répondre à une question comme on le souhaite, par écrit ou à l’oral
• que l’audio soit transcrit automatiquement (speech to text en direct)
• que pour une question donnée on puisse consulter les réponses de tous les participants
• pouvoir minter et lister chaque question séparément et l’interview entière
• que chaque participant et visiteur puisse gérer un profil avec son wallet
• créer un token et une DAO

Dis-moi en commentaire si ce projet t’intéresse. Est-ce que tu penses qu’il est préférable que l’app choisisse les questions ou que ce soit l’interviewé·e qui fasse son choix ? Est-ce que tu trouves que cet article a sa place ici, ou tu ne pensais pas du tout te retrouver face à du code sur ce site ?

Merci de m'avoir lu jusqu'au bout :)