Présentation technique du site web KMLk.ch
Frameworks utilisés
Pour le design général, j’ai opté pour Bootstrap v5. Classique, sans surprise, efficace. Pour fonctionnement, j’ai choisi VueJs v3. Sur un site avec trois pages, c’est parfait. Pour la génération de codes QR, j’ai complété VueJS avec le plugin QRcode. C’est tout. Simple, efficace.
Disséquons le code
Le code source est disponible sur mon repository Codeberg.
Fichier index.html
Il n’y a rien de spécial:
- On charge les fichiers CSS nécessaires (Bootstrap notamment), le javascript de VueJS
- On ajoute quelques infos pour le SEO (mais pas grand chose)
Ensuite, le corps de la page se décompose en deux partie:
- Une section qui affichera le contenu de la page sélectionnée ainsi que le menu principal
- Un footer basique. Pour finir, la magie de VueJS intervient en chargeant le code JS de l’appli.
Fichier vue/assets/pages/app.js
C’est le point d’entrée de l’appli VueJS. On y trouve trois parties:
- Les imports
- La mise en place du routage entre composants
- Le chargement de la page initiale
1. Les imports
On a besoin de plusieurs fonctionnalités:
- La création d’une app VueJS (createApp)
- La gestion du routage entre les composants (createRouter, createWebHistory).
- Ensuite on référence les fichiers CSS afin qu’ils soient inclus dans le fichier CSS global qui sera produit lors du
- build final.
- Pour finir, on charge les composants de l’application.
| Nom | Fonction du composant |
|---|---|
| App | affiche le menu et le composant sélectionné |
| TechLoaderView | affiche l’écran d’attente |
| LinkKeepView | reçoit le lien et le transforme en code QR |
| KmlkAboutView | Affiche les informations sur le projet |
| KmlkGetAppView | affiche les informations de téléchargement |
2. Routage entre composants
Ici rien de spécial, c’est du VueJS basique: on associe chaque composant à une URL. Bien sûr, les URLs en question sont interceptées par la fonction de routage et n’arrivent pas au serveur (Apache dans le cas de KMLk.ch).
3. Chargement de la page initiale
Par coquetterie uniquement, on demande d’abord à VueJS d’afficher le composant de chargement puis, moins d’une seconde après, on route vers le composant permettant de conserver un lien.
Fichier vue/assets/pages/app.vue
Ici il s’agit du markup HTML du composant principal. Ce composant affichant le menu principal, il est donc responsable de piloter le routage vers les différents composants. A part cela, il n’y a aucune fonctionnalité qui mérite qu’on s’y attarde.
Fichier vue/assets/pages/kmlk/kmlk.about.vue
Ce composant est chargé d’afficher les informations sur le projet (site web et app android). Il est composé uniquement de markup HTML.
Fichier vue/assets/pages/kmlk/kmlk.getapp.vue
Ici ce composant présente les liens de téléchargement de l’app android. On n’y trouve que du markup HTML.
Fichier vue/assets/pages/tech/tech.loader.vue
Rien d’incroyable non plus dans ce compostant, consitué uniquement de markup HTML, qui se contente d’afficher une animation d’attente sour forme de fichier SVG,
Fichier vue/assets/pages/link/link.keep.vue
On attaque LE composant principal et primordial de KMLk! Le markup HTML est divisable en deux segments:
- le champ de saisie du lien et le bouton de transformation
- l’affichage du code QR
1. Champ de saisie du lien
On peut noter l’utilisation de la directive :disabled="qrGen" qui permet de bloquer le champ et le bouton le
temps que le code QR soit généré. C’est très rapide mais en cas de lenteur, l’interface se comporte comme attendu: on ne
peut pas modifier le lien tant que la génération n’est pas terminée.
La directive v-show="!hasQrScan" permet de masquer ce bloc dès que le code QR est disponible.
2. Affichage du code QR
Le bloc est affiché uniquement si le code QR a été généré (directive v-show="!hasError && hasQrScan").
Le code QR est affiché dans le tag <img :src="qrScan" class="kmlk-qrcode" />, la magie tenant à l’attribut
:src que VueJS traite en tant que contenu Base64.
La méthode saveLink utilise la méthode toDataURL de la classe QRCode pour produire une
représentation en Base64 du code QR contenant l’URL.
D’ailleurs, ce code QR ne contient rien d’autre, d’où le fait qu’il est lisible avec n’importe quelle app. La seule
particularité de ce code QR est sa couleur: blanc sur fond bleu.
Configuration Apache
Si comme moi, vous hébergez KMLk.ch sur un serveur Apache (c’est généralement l’option la moins chère chez les hébergeurs comme Infomaniak ou OVH), il reste une petite blague à régler. Lorsqu’on appelle directement une URL définie dans le router VueJS (par exemple, on tape https://www.kmlk.ch/spa/kmlk/about), c’est le serveur Apache qui cherche en premier à résoudre la page demandée. Et cette page n’existe pas! Elle n’existe que dans le contxte de l’app VueJS. Sauf que ce contexte n’est pas encore chargé. L’astuce est de configurer le fichier .htaccess pour rediriger les URLs inconnues d’Apache vers la page index.html.
Modification du fichier .htaccess
Dans ce fichier, on ajoute la directive ErrorDocument 404 https://www.kmlk.ch.
C’est clairement brutal puisque toutes les pages introuvables par le serveur Apache vont produire une erreur 404 et
l’utilisateur sera redirigé vers la page d’accueil.