Comment créer une application SvelteKit ?

SvelteKit est un framework puissant pour la création d’applications web qui combine la simplicité et la performance du framework Svelte avec des fonctionnalités supplémentaires. C’est le framework officiel pour construire des applications avec Svelte.

SvelteKit s’appuie sur les principes de Svelte, un framework basé sur des composants qui compile le code de votre application en un code JavaScript très efficace au cours du processus de construction.

SvelteKit va plus loin en fournissant un cadre d’application à part entière qui offre des fonctionnalités telles que le routage, le rendu côté serveur (SSR) et le fractionnement du code.

Dans cet article, vous explorerez SvelteKit et construirez une application de base en utilisant SvelteKit et Back4app.

Avantages de SvelteKit

SvelteKit offre plusieurs avantages. Voici quelques-uns des principaux avantages de SvelteKit :

Performance

SvelteKit est connu pour ses performances exceptionnelles. Son cadre de travail est de petite taille, ce qui permet un chargement initial des pages plus rapide. SvelteKit utilise également des mises à jour réactives, qui ne mettent à jour que les parties du DOM qui changent. Il en résulte une application très performante, réactive et facile à utiliser.

SvelteKit compile le code de l’application pendant le processus de construction, ce qui permet d’obtenir un code JavaScript hautement optimisé et efficace. Cette approche élimine le besoin d’un cadre d’exécution, ce qui se traduit par des temps de chargement plus rapides et des performances améliorées.

Petite taille de la liasse

SvelteKit génère des bundles de petite taille par rapport à d’autres frameworks. Il y parvient en n’incluant que le code nécessaire pour chaque composant, ce qui entraîne une surcharge minimale. Ceci est très bénéfique pour les utilisateurs ayant des connexions internet plus lentes ou une bande passante limitée.

La taille réduite des paquets de SvelteKit améliore les performances et l’expérience de l’utilisateur sur les appareils mobiles. Il permet également un fractionnement efficace du code et un chargement paresseux, ce qui améliore l’expérience du développeur.

Un riche écosystème de composants

Un riche écosystème de composants est un avantage significatif de SvelteKit. SvelteKit fournit aux développeurs une large gamme de composants préconstruits et personnalisables qui peuvent être facilement intégrés dans leurs applications.

Le riche écosystème de composants de SvelteKit permet d’accélérer le développement, d’améliorer la cohérence de l’interface utilisateur et de promouvoir la réutilisation du code. Il permet également un prototypage rapide et une extension avec d’autres bibliothèques et outils.

Rendu côté serveur (SSR)

SvelteKit offre une fonctionnalité de rendu côté serveur, permettant aux développeurs de pré-rendre les pages sur le serveur avant de les livrer au client. Cette approche permet d’accélérer le chargement des pages, d’optimiser la visibilité sur les moteurs de recherche et d’améliorer l’expérience globale de l’utilisateur.

Le rendu côté serveur dans SvelteKit améliore les performances globales de l’application SvelteKit. Il permet également la mise en cache, le contenu dynamique, la navigation transparente et le partage de code.

Routage intégré

SvelteKit fournit un système de routage intégré qui simplifie la gestion des itinéraires d’application. Il permet aux développeurs de définir des itinéraires de manière déclarative. Les développeurs peuvent également définir des itinéraires avec des paramètres pour créer des pages dynamiques.

Le système de routage de SvelteKit offre une navigation programmatique. Les développeurs peuvent utiliser les fonctions fournies par SvelteKit pour naviguer vers différents itinéraires de manière programmatique. SvelteKit fournit également des gardes-route et des fonctions intermédiaires, permettant aux développeurs de mettre en œuvre une logique de routage avancée.

Limites de SvelteKit

Si SvelteKit offre de nombreux avantages, il présente également certaines limites dont les développeurs doivent être conscients. En voici quelques-unes :

Courbe d’apprentissage

SvelteKit est relativement nouveau par rapport à d’autres frameworks comme React ou Angular, de sorte que moins de ressources d’apprentissage peuvent être disponibles. SvelteKit introduit des concepts et une syntaxe uniques, ce qui peut représenter un défi pour les nouveaux développeurs.

Les développeurs déjà familiarisés avec Svelte peuvent trouver plus facile la transition vers SvelteKit, mais ceux qui découvrent Svelte peuvent avoir besoin d’investir du temps pour apprendre le framework.

Soutien communautaire limité

Comme SvelteKit est encore en train de gagner en popularité, le soutien de la communauté peut ne pas être aussi important que celui d’autres frameworks. Le soutien limité de la communauté de SvelteKit peut rendre difficile l’apprentissage, le dépannage et la recherche d’emploi pour les développeurs.

Cependant, la communauté se développe et il existe des moyens d’atténuer l’impact d’un soutien limité. Par exemple, les développeurs peuvent s’engager avec la communauté Svelte existante par le biais de forums et de plateformes de médias sociaux.

Compatibilité avec les bases de données existantes

Si vous avez une base de code existante construite avec un autre framework, la migration vers SvelteKit peut nécessiter un effort significatif. SvelteKit suit une approche architecturale différente, vous obligeant à réécrire toute la logique de la base de code.

SvelteKit introduit son propre système de routage, qui peut entrer en conflit avec les mécanismes de routage de la base de code existante. Lors de la migration vers SvelteKit, vous devrez peut-être apprendre de nouveaux concepts et adapter vos connaissances existantes.

Introduction du projet

En suivant ce tutoriel, vous construirez une application de feedback basique en utilisant le framework SvelteKit. L’application de feedback fournira des fonctionnalités CRUD (créer, lire, mettre à jour, supprimer) et utilisera Back4app pour le stockage des données.

Construire l’application SvelteKit

Pour créer une application Sveltekit, exécutez la commande suivante dans votre terminal :

npm create svelte@latest feedback-application

Une fois que vous aurez exécuté le code ci-dessus, plusieurs invites vous guideront dans la configuration de votre application. Les invites ressembleront à ceci :

Après avoir configuré votre application, naviguez vers le répertoire de l’application et installez les dépendances nécessaires. Pour ce faire, exécutez le code suivant dans votre terminal :

cd feedback-application
npm install

Vous avez maintenant créé avec succès l’application feedback et installé les dépendances nécessaires. Vous allez ajouter quelques polices Google à votre application afin d’en améliorer l’apparence. Pour ce faire, vous devez ajouter les liens vers les polices dans votre fichier app.html, qui se trouve dans le répertoire src. Les liens peuvent être trouvés sur le site web de Google Fonts.

Les polices que vous utiliserez dans votre application sont les polices Comforter et Montserrat. Vous pouvez utiliser ces polices dans votre application en ajoutant le code suivant à la balise head de votre fichier app.html.

<!-- app.html -->
<link href="<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>" rel="stylesheet">
<link href="<https://fonts.googleapis.com/css2?family=Comforter&display=swap>" rel="stylesheet">

Ensuite, vous ajoutez quelques styles globaux à l’application. Pour ce faire, accédez au fichier global.css dans le dossier style. Ce dossier se trouve dans le répertoire src.

Dans le fichier global.css, écrivez ce code :

/* global.css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 40%;
    margin: auto;
    font-family: 'Montserrat', sans-serif;
    background-color: #f2f2f2;
}

input{
    border: none;
    border-radius: 12px;
    padding: 1rem;
    background-color: #FFFFFF;
    color: #808080;
    inline-size: 100%;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

button{
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    color: #f2f2f2;
    background-color: #333333;
    font-family: 'Montserrat', sans-serif;
}

button:hover{
    background-color: #f2f2f2;
    color: #333333;
}

Ensuite, vous créez la présentation de l’application. Vous définissez la mise en page de votre application à l’aide d’un fichier +layout.svelte. Le fichier +layout.svelte est un fichier spécial permettant de créer des composants de mise en page réutilisables qui définissent la structure de vos mises en page. Veillez à créer le fichier +layout.svelte dans le répertoire src/routes.

Définissez la présentation de votre application comme suit :

<!-- +layout.svelte -->
<script>
    import '../style/global.css'
</script>

<header>
    <h1>Feedback App</h1>
</header>
<slot></slot>

<style>

    h1{
        text-align: center;
        padding: 1rem 0;
        font-family: 'Comforter', cursive;
    }

</style>

Le bloc de code ci-dessus importe le fichier global.css, appliquant ainsi des styles globaux à votre application. Il définit également un élément d’en-tête. À l’intérieur de l’élément d’en-tête se trouve un élément h1 avec le texte “Feedback App”.

L’élément slot définit un espace réservé pour le contenu de la page. Lorsque vous rendez une page, l’application insère son contenu dans l’emplacement, ce qui le rend visible dans la mise en page. Dans la section style du bloc de code, vous donnez un style à l’élément h1.

Vous avez maintenant défini les styles et la présentation de votre application. Vous allez maintenant créer la page d’accueil de votre application. Pour ce faire, écrivez le code suivant dans votre fichier +page.svelte, situé dans le répertoire src/routes.

<!-- +page.svelte -->
<script lang="ts">
    let data = {
        feedback: '',
        rating: '',
    }

    const handleClick = (event: any) => {
        data.rating = event.target.value;
    }
</script>

<div class="page">
    <form>
        <input type="text" placeholder="Share your thought" name="feedback" bind:value={data.feedback}/>

        <div class="rating">
            <input type="button" value="1" class="button" on:click={handleClick}>
            <input type="button" value="2" class="button" on:click={handleClick}>
            <input type="button" value="3" class="button" on:click={handleClick}>
            <input type="button" value="4" class="button" on:click={handleClick}>
            <input type="button" value="5" class="button" on:click={handleClick}>
        </div>

        <button>Post</button>
    </form>
</div>

<style>
    form{
        margin-block-start: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }

    .button{
        border-radius: 100%;
        color: #333333;
        padding: 1rem 1.5rem;
        background-color:#ffffff;
    }

    .button:hover{
        background-color: #333333;
        color: #f2f2f2;
    }

    .rating{
        display: flex; 
        gap: 5rem;
    }
</style>

Le bloc de code ci-dessus crée un formulaire de retour d’information avec un système d’évaluation simple. Vous pouvez saisir vos idées dans un champ de texte et évaluer votre expérience en cliquant sur les boutons numérotés. L’application stocke ensuite vos données dans l’objet data.

La fonction handleClick stocke votre note dans la propriété data.rating et la directive bind stocke votre feedback dans la propriété data.feedback. La directive bind vous permet de réaliser une liaison de données bidirectionnelle entre les valeurs d’entrée et les données de votre composant.

Vous pouvez maintenant visualiser votre application sur votre navigateur web. Pour ce faire, naviguez dans le répertoire de votre projet dans votre terminal et exécutez la commande suivante :

npm run dev

En exécutant la commande ci-dessus, vous obtiendrez le lien http://localhost:5173/. Naviguez jusqu’à ce lien dans votre navigateur web et vous pourrez voir votre application.

Si vous avez suivi le tutoriel correctement, votre application devrait ressembler à ceci :

Intégrer Back4app à votre application

Back4App est une plateforme Backend-as-a-Service (BaaS) qui fournit des outils et une infrastructure pour construire et gérer les fonctionnalités backend de vos applications. Avec Back4App, vous pouvez vous concentrer sur la création de fonctionnalités intéressantes pour votre application sans vous soucier de la complexité de la mise en place et de la maintenance d’un serveur backend. Back4app offre de nombreuses fonctionnalités, y compris la gestion des bases de données, l’authentification des utilisateurs, l’hébergement d’API, et bien plus encore.

Créer un compte Back4app

Avant de pouvoir utiliser les fonctionnalités offertes par Back4app, vous devez avoir un compte Back4app. Vous pouvez en créer un en suivant ces étapes simples :

1. Visitez le site web de Back4app.
2. Cliquez sur le bouton “S’inscrire”.
3. Remplissez le formulaire d’inscription et envoyez-le.

Présentation du plugin Back4app ChatGPT

Suivant la tendance récente de l’utilisation de l’IA pour faciliter la vie des développeurs, Back4app a introduit son plugin ChatGPT. Ce plugin aide les développeurs et les amateurs non techniques à créer et à interagir avec les applications Back4app.

Avec le plugin, vous pouvez convertir vos conversations avec ChatGPT en applications réelles. Cela signifie que même si vous êtes novice en matière de développement ou d’utilisation de la plateforme Back4App, vous pouvez créer et personnaliser une application Back4App facilement.

Pour pouvoir utiliser les plugins sur ChatGPT, assurez-vous d’être abonné à ChatGPT Plus. Après avoir souscrit à ChatGPT Plus, si vous n’êtes pas déjà abonné, cliquez sur le bouton “GPT-4”, et un popover avec des options apparaîtra.

Sélectionnez l’option plugins, puis le plugin Back4app. Cela vous permettra d’utiliser le plugin ChatGPT de Back4app.

Créer une application Back4app avec le plugin

Avec le plugin Back4app sur ChatGPT, créer une application Back4app est facile. Indiquez simplement à ChatGPT le type d’application que vous souhaitez créer, et il fera le reste.

Par exemple :

Après avoir créé l’application, rendez-vous sur le site web de Back4app, connectez-vous et vérifiez vos applications pour confirmer que l’application a bien été créée.

Ajouter des données à l’application Back4app

Vous pouvez ajouter des données à votre application en utilisant le plugin ChatGPT de Back4app. Ici, vous demanderez à ChatGPT de créer une classe de feedback dans l’application de feedback et de la remplir avec des feedbacks personnalisés.

Voici un exemple de la manière de procéder :

Le plugin crée la classe Feedback dans l’application et demande un exemple de feedback personnalisé que vous souhaitez ajouter.

Après avoir donné un exemple de feedback personnalisé, le plugin génère le feedback et l’évaluation qui l’accompagne dans l’application. Vous pouvez ajouter d’autres commentaires et évaluations à l’application en les fournissant à ChatGPT.

Vous pouvez maintenant confirmer que le plugin a généré la classe de feedback et les feedbacks et évaluations personnalisés dans votre application.

Se connecter à Back4app

L’étape suivante consiste à connecter votre application à l’application Back4app. Pour ce faire, vous devez installer le Parse JavaScript SDK. Vous pouvez l’installer en exécutant le code suivant dans votre terminal :

npm install parse

Une fois l’installation du SDK JavaScript de Parse terminée. Vous utiliserez les identifiants Application ID et Javascript KEY. Vous pouvez trouver ces identifiants dans la section Sécurité & Clés du tableau de bord de votre application Back4app. Stockez l’ID de l'application et la CLÉ Javascript en toute sécurité dans votre application.

Importez la version minifiée de Parse dans le fichier +page.svelte du répertoire src, et appelez la méthode initialize. Cette méthode prend comme arguments l’ID de l'application et les informations d’identification de la clé Javascript.

Par exemple :

//+page.svelte
import Parse from 'parse/dist/parse.min.js';
Parse.initialize(APPLICATION_ID, JAVASCRIPT_KEY);

Notez que vous devez ajouter le bloc de code ci-dessus dans la balise script du fichier +page.svelte. Après avoir appelé la méthode d’initialisation de Parse, l’étape suivante consiste à définir la propriété serverURL de Parse à https://parseapi.back4app.com/.

Comme cela :

//+page.svelte
(Parse as any).serverURL = "<https://parseapi.back4app.com/>";

Récupérer les données de Back4app

Avant d’afficher les données déjà présentes dans votre application Back4app, vous devez les récupérer. Pour récupérer les données, vous allez créer une fonction fetchFeedbacks. Cette fonction contiendra la logique qui récupère les feedbacks et les évaluations de votre application.

Avant de créer la fonction, créez un composant de carte. Le composant card détermine l’aspect et la convivialité de vos feedbacks. Pour créer le composant card, créez d’abord un dossier components dans le répertoire src. Ensuite, créez un fichier card.svelte dans le dossier components.

Dans le fichier card.svelte, écrivez ce code :

<!-- card.svelte -->
<script lang="ts">
	export let feedback: string = '';
	export let rating: number = 0;
</script>

<div class="card">
	 <h5>{feedback}</h5>
	 <p>{rating} ratings</p>
</div>

<style>
	.card{
	    display: flex;
	    justify-content: space-between;
	    padding: 1rem;
	    background-color: #FFFFFF;
	    border-radius: 12px;
	    inline-size: 100%;
	    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
	}
</style>

Ce code définit le composant ” carte". Dans la balise script, le code exporte les variables feedback et rating en tant que props. Cela signifie que les composants qui importent ce composant peuvent définir les valeurs de ces props. Le code initialise la variable feedback à une chaîne vide et la variable rating à 0.

La balise div représente la structure principale du composant carte, et la balise style contient les styles CSS appliqués au composant carte.

Ensuite, dans la balise script de la +page.svelte, importez le composant card et créez la fonction fetchFeedbacks.

Comme cela :

//+page.svelte
import Card from "../components/card.svelte";
import { onMount } from "svelte";

let feedbackData: any = [];

const fetchFeedbacks = async () => {
  try {
    const query = new Parse.Query("Feedback");
    const feedbacks = await query.find();
    feedbackData = feedbacks;
  } catch (error) {
    console.log(error);
  }
};

onMount(fetchFeedbacks);

Ce code définit la fonction fetchFeedbacks. Il utilise également le crochet du cycle de vie onMount pour récupérer les commentaires de la base de données en appelant la fonction fetchFeedbacks.

La fonction fetchFeedbacks utilise la méthode Parse.Query() pour rechercher un objet “Feedback” dans la base de données de votre application. Elle renvoie ensuite un tableau des résultats de la requête en appelant la méthode find() du SDK Parse sur le résultat de l’appel Parse.Query(). Enfin, il affecte le tableau des résultats à la variable feedbackData.

Maintenant, dans la balise div qui contient les éléments HTML du fichier +page.svelte, vous utilisez le bloc each de Svelte pour rendre les données dans le tableau feedbackData.

Par exemple :

<!-- +page.svelte -->
<div class="feedbacks">
	{#each feedbackData as feedback}
	    <Card feedback={feedback.get('feedbackText')} rating={feedback.get('rating')}/>
	{/each}  
</div>

À l’intérieur de la balise div, le bloc each itère sur le tableau feedbackData et affecte chaque élément à la variable feedback. Pour chaque feedback du tableau, vous rendez le composant carte. Vous obtenez les valeurs de feedbackText et de rating à l’aide de la méthode get() du feedback. Vous transmettez ensuite ces valeurs aux variables props feedback et rating du composant card.

Donnez un style à la balise div avec la classe feedbacks en ajoutant le bloc de code ci-dessous à la balise style dans le fichier +page.svelte:

/* +page.svelte */
.feedbacks{
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-block-start: 3rem;
	border: 2px #e2e2e2 solid;
	padding: 2rem;
	border-radius: 7px;
}

Ajouter des données à Back4app depuis l’application

Initialement, vous avez ajouté des données à votre application Back4app en utilisant le plugin ChatGPT de Back4app, mais les utilisateurs de votre application ne pourront pas le faire. Pour permettre aux utilisateurs d’ajouter des données à partir de votre application, vous allez créer une fonction qui ajoute de nouveaux commentaires et évaluations à la base de données de votre application Back4app.

Comme cela :

// +page.svelte
const handleSubmit = () => {
  try {
    const Feedback = new Parse.Object("Feedback");
    Feedback.set("feedbackText", data.feedback);
    Feedback.set("rating", +data.rating);
    Feedback.save().then(() => {
      console.log("New Feedback added successfully");
    });
  } catch (error) {
    console.log(error);
  }

  fetchFeedbacks();
};

Ajoutez le bloc de code ci-dessus à la balise script du fichier +page.svelte. La fonction handleSubmit() crée un nouvel objet Parse “Feedback” et définit ses propriétés feedbackText et rating avec les valeurs de data.feedback et data.rating. Elle enregistre ensuite l’objet sur le serveur Parse à l’aide de la méthode save(). Enfin, la fonction appelle la fonction fetchFeedbacks().

Liez maintenant la fonction handleSubmit au formulaire dans le fichier +page.svelte à l’aide de la liaison événementielle. Vous liez la fonction à l’événement on:submit afin que la fonction s’exécute chaque fois qu’un utilisateur soumet le formulaire.

<form on:submit={handleSubmit}>
	<input 
	type="text" 
	placeholder="Share your thought" 
	name="feedback" 
	bind:value={data.feedback}
	/>
	
	<div class="rating">
	    <input type="button" value="1" class="button" on:click={handleClick}>
	    <input type="button" value="2" class="button" on:click={handleClick}>
	    <input type="button" value="3" class="button" on:click={handleClick}>
	    <input type="button" value="4" class="button" on:click={handleClick}>
	    <input type="button" value="5" class="button" on:click={handleClick}>
	</div>
	
	<button>Post</button>
 </form>

Suppression des données de Back4app

Vous pouvez supprimer des données de Back4app en utilisant la méthode destroy pour supprimer le(s) enregistrement(s) correspondant(s) de votre base de données. Créez une fonction deleteFeedback contenant la logique de suppression des feedbacks de la base de données de votre application en fonction d’un ID donné.

Avant de créer la fonction deleteFeedback, mettez à jour le composant card en ajoutant une propriété deleteFeedback et un élément button que vous liez à la propriété deleteFeedback à l’aide de l’événement on:click. Remplacez le code de votre fichier card.svelte par le bloc de code ci-dessous.

<!-- card.svelte -->
<script lang="ts">
	export let feedback: string = '';
	export let rating: number = 0;
	export let deleteFeedback: any = '';
</script>

<div class="card">
	<div style="display: flex; flex-direction: column; gap: 1rem; ">
	<h5>{feedback}</h5>
	<button on:click={deleteFeedback}>Delete</button>
	</div>
	<p>{rating} ratings</p>
</div>

<style>
	.card{
	  display: flex;
	  justify-content: space-between;
	  padding: 1rem;
	  background-color: #FFFFFF;
	  border-radius: 12px;
	  inline-size: 100%;
	  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
	}
</style>

Créer la fonction deleteFeedback dans le fichier +page.svelte:

// +page.svelte
const deleteFeedback = async (id: string) => {
  try {
    const Feedback = Parse.Object.extend("Feedback");
    const feedback = new Feedback();
    feedback.id = id;
    await feedback.destroy();
    const newData = feedbackData.filter((item: any) => item.id !== id);
    feedbackData = newData;
  } catch (error) {
    console.log(error);
  }
};

La fonction deleteFeedback crée un nouvel objet “Feedback” à l’aide de la méthode Parse.Object.extend. Elle définit ensuite la propriété id de l’objet en fonction du paramètre id transmis à la fonction. Ensuite, elle appelle la méthode de destruction asynchrone de l’objet “Feedback” pour supprimer de Back4app l’élément de feedback avec l’ID donné.

La fonction filtre ensuite le tableau feedbackData à l’aide de la méthode feedbackData.filter. Elle filtre l’élément de feedback avec l’identifiant donné, créant un nouveau tableau qui ne contient pas l’élément de feedback supprimé. La fonction assigne ensuite le nouveau tableau à feedbackData.

Passez maintenant la fonction deleteFeedback à la propriété deleteFeedback du composant card. Ainsi, chaque fois qu’un utilisateur cliquera sur le bouton du composant card, la fonction deleteFeedback sera exécutée.

Comme cela :

<!-- +page.svelte -->
<div class="feedbacks">
	{#each feedbackData as feedback}
		<Card 
		feedback={feedback.get('feedbackText')} 
		rating={feedback.get('rating')} 
		deleteFeedback={() => deleteFeedback(feedback.id)}
		/>
	{/each}  
</div>

Test de l’application

Vous avez terminé la construction de l’application ; l’étape suivante consiste à la tester. Pour tester l’application, accédez au répertoire applications de votre terminal et exécutez le serveur de développement.

Après avoir lancé le serveur de développement, ouvrez votre navigateur et allez sur le lien suivant : http://localhost:5173/. L’application devrait ressembler à l’image ci-dessous.

Pour ajouter un commentaire, écrivez “J’aime vraiment l’application” dans le champ de saisie, puis cliquez sur le bouton avec le texte “4” pour l’évaluer. Enfin, cliquez sur “Publier” pour soumettre votre commentaire.

Pour confirmer que vous avez ajouté un nouveau feedback, une nouvelle carte apparaîtra sous les cartes précédentes avec le texte “J’aime vraiment l’application” et une note de 4. Vous pouvez également naviguer vers le tableau de bord de votre application sur Back4app pour confirmer.

Pour supprimer un commentaire, il suffit de cliquer sur le bouton “Supprimer”. Pour le confirmer, supprimez le commentaire “L’application était géniale”.

Conclusion

SvelteKit est un cadre de développement d’applications web robustes et performantes utilisant Svelte. Il s’agit d’un méta-cadre, ce qui signifie qu’il fournit un ensemble d’outils et d’abstractions qui peuvent être utilisés pour construire n’importe quel type d’application web.

L’intégration de SvelteKit avec Back4app permet aux développeurs de se concentrer sur le développement de leurs applications frontales pendant que Back4app s’occupe du backend. Back4app réduit la complexité du développement du backend, ce qui permet aux développeurs de créer plus facilement des applications web complètes.

FAQ