Catégories
code low code

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.

Comme d’habitude, une track pour se mettre en apĂ©tit : Gourmandise by Lecourt Mansion par Dian et Le Diouck

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.

nouveau type d'événement Calendly "l'interview"
nouveau type d’Ă©vĂ©nement Calendly « l’interview »

Puis en choisissant le type d’intĂ©gration voulu.

aperçu du popup share de mon événement l'interview sur Calendly
aperçu du popup share de mon Ă©vĂ©nement l’interview sur Calendly

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 :

screenshot de l'app l'interview et du test lighthouse Ă  100% aprĂšs la premiĂšre mise en ligne de l'app
screenshot de l’app l’interview et du test lighthouse Ă  100% aprĂšs la premiĂšre mise en ligne de l’app

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 :

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

le rĂ©pertoire dist regroupe toute la SPA prĂȘte pour la production

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é

avatar copeau

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 ?

logo ChatGPT

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 :)

Tu as ❀ aimĂ© l’article ?

J'ai créé un guide pour te lancer rapidement dans le crypto art.

Tu y découvriras :

  • La blockchain
  • Les NFTs
  • L'installation d'un wallet crypto
  • La frappe et la vente ton premier NFT
Si tu as aimé l'article, tu es libre de le partager ;)

Par François

J'ai créé le blog L'Artiste Crypto dans le but d'aider les artistes amateurs comme moi à se professionnaliser. Je souhaite apporter de l'inspiration en documentant la poursuite d'un objectif : devenir crypto artiste et réussir sur le Web3. A travers des articles, des vidéos et des interviews j'espÚre y parvenir et te faciliter la tùche.

Une rĂ©ponse sur « CrĂ©ation de l’app « l’iNTERVIEW » : un projet svelte.js simple »

Laisser un commentaire