Construisez un créateur de cartes de vœux avec Vue Satori

Écrit par Dubem Izuorah

Pour les développeurs créatifs à la recherche d'un projet festif qui exploite vos compétences en codage, créons une carte de vœux numérique que vous pouvez personnaliser, ajouter votre propre photo et télécharger instantanément. Nous utiliserons des technologies Web de pointe pour y parvenir, et en cours de route, vous découvrirez la génération de graphiques, plusieurs packages intéressants et quelques astuces intéressantes avec Vue 3.

Ce que nous allons construire

Capture d'écran de l'interface de Holiday Greeting Card Maker

À la fin de ce tutoriel, vous aurez :

• Une application Web entièrement fonctionnelle pour créer des cartes de vœux personnalisées
• Expérience pratique avec Vue 3, Nuxt et certaines puissantes bibliothèques de rendu
• Une compréhension de la façon de générer dynamiquement des graphiques dans le navigateur

Initialisation du projet

Nous utiliserons Nuxt 3 comme framework car il fournit une configuration robuste et avec piles incluses pour les applications Vue. Ouvrez votre terminal et créons notre projet en exécutant les commandes ci-dessous :

npx nuxi init christmas-card-maker 
cd christmas-card-maker
yarn install

Pourquoi Nuxt ? Il nous donne une base solide avec un routage intégré, une intégration facile des modules et une configuration globale simple. Parfait pour notre créateur de cartes de vœux !

Installation de notre boîte à outils

Maintenant, nous allons ajouter les bibliothèques qui permettront à la magie de notre génération de cartes de se produire. Exécutez les commandes suivantes sur votre terminal :

yarn add @vue/server-renderer @vueuse/core nuxt satori satori-html
yarn add -D @nuxtjs/tailwindcss

Permettez-moi de vous expliquer pourquoi nous choisissons chacun de ces éléments :

• @vue/server-renderer : nous permet de restituer les composants et accessoires Vue sous forme de chaînes HTML - crucial pour notre génération SVG
• satori : convertit notre chaîne HTML et CSS en magnifiques graphiques SVG
• Satori HTML : une bibliothèque d'aide pour rendre le contenu HTML compatible avec Satori
• @vueuse/core : Fournit des utilitaires utiles comme le stockage local, watchDebounce et bien d'autres
• @nuxtjs/tailwindcss : nous offre des capacités de style rapides

Configuration de notre projet

Mettons à jour notre nuxt.config.ts pour configurer notre environnement de développement :

? nuxt.config.ts

export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss"],
});

Nous désactivons le rendu côté serveur pour cette application côté client et activons le module CSS Tailwind. Cela nous donne une configuration légère et réactive, parfaite pour notre créateur de cartes de vœux.

Codage de notre créateur de cartes

Maintenant que nous sommes tous configurés, passons à la création étape par étape de notre créateur de cartes de vœux.

Étape 1. Implémentation de l'interface du créateur de cartes

Concentrons-nous d’abord sur la création d’une mise en page simple pour notre créateur de cartes. Nous allons créer un formulaire avec des champs permettant à l'utilisateur d'ajouter un nom, un message d'accueil et un téléchargement d'image. Nous ajouterons également une zone d'aperçu où la carte sera affichée.

Voici à quoi ressemblera la mise en page de base :

? app.vue

npx nuxi init christmas-card-maker 
cd christmas-card-maker
yarn install

Pourquoi avons-nous besoin de cette configuration ?

1. createSSRApp et renderToString : restituez les composants Vue en chaînes HTML en montant virtuellement le composant et ses accessoires et en restituant sa sortie finale.
2. useLocalStorage : enregistrez les données du formulaire localement, afin que les utilisateurs ne perdent pas leur progression s'ils rechargent.
3. watchDebouounced : nous aide à éviter les problèmes de performances en retardant le traitement des entrées utilisateur jusqu'à une certaine durée après l'arrêt de la saisie.
4. satori : Convertissez du HTML en SVG pour nos graphiques.
5. satori-html : Analyse les chaînes HTML dans un format compris par satori.
6. La référence des polices utilise useLocalStorage pour conserver les entrées de l'utilisateur. Si vous actualisez la page, nous ne perdrons pas la saisie du formulaire et pourrons continuer là où nous l'avons laissé.
7. Les variables svg et fonts stockeront le design de la carte généré et les données de police chargées.

Étape 3. Création du modèle de carte

Ensuite, créons le composant de modèle de carte que nous avons importé précédemment. C'est là que la magie opère.

Nous utiliserons les données du formulaire pour personnaliser la carte. Dans composants/ChristmasCard.vue, nous concevrons le modèle visuel de notre carte. Pensez à cela comme à la conception d'un canevas sur lequel les utilisateurs peuvent personnaliser leur message d'accueil.

? composants/ChristmasCard.vue

yarn add @vue/server-renderer @vueuse/core nuxt satori satori-html
yarn add -D @nuxtjs/tailwindcss

Décomposition :

• Nous utilisons le hook onMounted, qui est auto-importé dans Nuxt 3, pour charger et stocker les polices nécessaires à la génération des graphiques.
• Vous pouvez utiliser n’importe quel fichier de police .ttf. Pour obtenir la même police que celle que j'ai utilisée, la police « Instrument Sans », visitez Google Fonts, cliquez sur « Obtenir la police », puis téléchargez les fichiers de police. Extrayez le fichier ZIP et copiez la police .ttf (par exemple, InstrumentSans-Regular.ttf) dans le dossier public/fonts de votre projet Nuxt. Référencez-le comme /fonts/InstrumentSans-Regular.ttf dans votre code.
• Dans onMounted, nous appelons rafraîchirGraphics pour générer les graphiques SVG initiaux une fois la police chargée.
• Nous utilisons watchDebounded pour suivre les modifications du formulaire et mettre à jour les graphiques 500 ms après la dernière mise à jour. Remarque : il s'agit d'une astuce de performance.
• La fonction loadFonts charge les polices requises en une seule fois en utilisant Promise.all au lieu de manière séquentielle. Une autre astuce de performance à noter.

Étape 5. Génération de SVG à partir du composant Vue

C’est ici que nous lions tout ensemble. Nous allons convertir le composant ChristmasCard en SVG.

? app.vue

npx nuxi init christmas-card-maker 
cd christmas-card-maker
yarn install

Laissez-moi vous expliquer :

• Nous utilisons d'abord la fonction utilitaire renderToHTML pour convertir le composant ChristmasCard.vue importé précédemment en chaîne HTML
• Ensuite, nous utilisons la fonction html importée de satori-html plus tôt pour convertir la chaîne HTML en un format de balisage acceptable par le package satori
• Enfin, nous appelons satori, en passant la configuration du balisage, de la largeur et de la hauteur ainsi que les polices que nous avons chargées plus tôt dans le hook onMounted
• La chaîne svg résultante est stockée dans la référence svg.value, que nous avons utilisée dans la section du modèle app.vue pour afficher le svg dans la fenêtre. Voir dans la section modèles

Étape 6. Fonctions utilitaires

Terminons tout ce sur quoi nous avons travaillé en ajoutant quelques fonctions utilitaires essentielles pour nos fonctionnalités de code et de modèle.

Ajout de la prise en charge du téléchargement d'images

Nous ajoutons des fonctionnalités pour gérer les téléchargements d’images. Cela garantira que les utilisateurs peuvent sélectionner une image, vérifier si elle respecte la limite de taille (100 Ko) et l'afficher.

Collez ceci sous le code RefreshGraphics :

? app.vue

yarn add @vue/server-renderer @vueuse/core nuxt satori satori-html
yarn add -D @nuxtjs/tailwindcss

Pourquoi vérifier la taille du fichier ? Nous limitons la taille du fichier pour garantir des performances fluides. Tout ce qui est plus volumineux pourrait ralentir les choses, donc 100 Ko est une limite supérieure sûre.

Conversion du composant Vue en chaîne HTML

Ensuite, nous allons rendre le composant Vue sous forme de chaîne HTML. Cela nous permet d'utiliser Vue pour le rendu côté serveur, les modèles de courrier électronique ou la génération de sites statiques. Dans ce cas, il s’agit de générer un modèle de carte de vœux. Ajoutons ceci également à notre code.

npx nuxi init christmas-card-maker 
cd christmas-card-maker
yarn install

Explication:

• createSSRApp : Cette fonction est utilisée pour créer une instance d'application Vue rendue côté serveur (SSR), qui peut être rendue sous forme de chaîne HTML.
• renderToString : Cela restitue le composant Vue (GreetingCard) en une chaîne HTML, en transmettant tous les accessoires nécessaires au composant.

Téléchargement de la carte au format JPEG

Enfin, ajoutons le code qui nous permettra de télécharger notre carte au format JPEG.

? app.vue

yarn add @vue/server-renderer @vueuse/core nuxt satori satori-html
yarn add -D @nuxtjs/tailwindcss

Pourquoi cela fonctionne-t-il ? En utilisant l'API HTML Canvas, nous pouvons dessiner le SVG sur le canevas et le convertir en JPEG pour un téléchargement facile. C'est un moyen rapide et efficace de générer des fichiers image à partir de graphiques vectoriels.

Étape 7. Stylisme

Pour garantir que l'élément SVG s'affiche correctement dans le conteneur, nous devons appliquer un style CSS. Étant donné que le SVG généré a une taille fixe de 1080 px sur 1080 px, mais que le conteneur parent est plus petit, nous devons redimensionner le SVG pour qu'il s'adapte à l'intérieur du conteneur sans distorsion.

? app.vue

export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss"],
});

Cette règle CSS garantit que l'élément SVG à l'intérieur du div .banner-here est redimensionné pour remplir l'espace disponible tout en conservant ses proportions.

À présent, votre projet devrait ressembler à cette capture d'écran. Lançons-le pour voir la vraie magie !

Exécuter notre code

Pour voir notre application en action, exécutez la commande ci-dessous et ouvrez http://localhost:3000 sur votre navigateur.

Pour référence, voici le dépôt Github de ce tutoriel.

<template>
  <div>



<p><strong>So what’s happening here?</strong></p>

<ol>
<li>
<strong>Card Preview:</strong> The  with v-html="svg" is where our card will appear as an SVG once it’s generated.
</li>
<li><strong>Form Fields:</strong></li>


<ul>
<li>Two text fields: name and greeting. These will dynamically update the card when the user types.</li>
<li>File input: Allows users to upload an image.</li>
</ul>

<ol>
<li>
<strong>File Restrictions:</strong> The small tag below the file input informs users about allowed file size and formats. Large images can slow down rendering, so we’re capping the size at 100KB.</li>
<li>
<strong>Download Button:</strong> This triggers the downloadSvgAsJpeg function, which saves the card as a JPEG image.</li>
</ol>

<h3>
  
  
  Step 2. Setting up Dependencies
</h3>

<p>Now let’s set up the logic and install the packages needed to power our Holiday Card Maker. Let’s import a few packages that will make things easier for us.</p>

<p>? <strong>app.vue</strong><br>
</p>

<pre class="brush:php;toolbar:false">...
</template>

<script setup lang="ts">
import { createSSRApp } from "vue";
import { renderToString } from "@vue/server-renderer";
import { useLocalStorage, watchDebounced } from "@vueuse/core";
import satori from "satori";
import { html } from "satori-html";
import ChristmasCard from "./components/ChristmasCard.vue";
const form = useLocalStorage("app-form", {
  name: "",
  greeting: "Merry Christmas",
  photo: null,
});
const svg = ref("");
const fonts = ref([]);
...
</script>

Vous devriez voir quelque chose qui ressemble à l'interface dans le GIF ci-dessus. Vous pouvez modifier les détails, ajouter une image et télécharger votre image. Bravo! Vous disposez désormais de votre propre créateur de cartes de vœux personnel.

Conclusion

Vous venez de créer un créateur de cartes de vœux personnalisées ! ? Mais ne vous arrêtez pas là. Expérimentez avec différents designs, ajoutez plus d'options de personnalisation ou créez même des cartes pour d'autres occasions.

Quelques idées pour élargir votre projet :

• Ajouter plus de thèmes d'arrière-plan
• Inclure la sélection de la couleur/police du texte
• Créer des modèles pour les anniversaires, les anniversaires

Vous souhaitez en faire plus côté client ? Découvrez comment rendre des objets 3D dans le navigateur en lisant cet article.

Publié à l'origine sur https://www.vuemastery.com le 19 décembre 2024.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!