Как создать приложение SvelteKit?

SvelteKit – это мощный фреймворк для создания веб-приложений, который сочетает в себе простоту и производительность фреймворка Svelte с дополнительными возможностями. Это официальный фреймворк для создания приложений на основе Svelte.

SvelteKit основан на принципах Svelte, компонентного фреймворка, который компилирует код вашего приложения в высокоэффективный JavaScript-код в процессе сборки.

SvelteKit делает еще один шаг вперед, предоставляя полноценный фреймворк для приложений, который предлагает такие функции, как маршрутизация, рендеринг на стороне сервера (SSR) и разделение кода из коробки.

В этой статье вы познакомитесь с SvelteKit и создадите базовое приложение с использованием SvelteKit и Back4app.

Преимущества SvelteKit

SvelteKit обладает рядом преимуществ. Вот некоторые из ключевых преимуществ SvelteKit:

Производительность

SvelteKit известен своей исключительной производительностью. Он имеет небольшой размер фреймворка, что приводит к более быстрой начальной загрузке страниц. SvelteKit также использует реактивные обновления, которые обновляют только те части DOM, которые изменяются. В результате получается высокопроизводительное приложение, отзывчивое и удобное в использовании.

SvelteKit компилирует код приложения в процессе сборки, в результате чего получается высокооптимизированный и эффективный JavaScript-код. Такой подход устраняет необходимость в использовании фреймворка времени выполнения, что приводит к ускорению загрузки и повышению производительности.

Небольшой размер пакета

SvelteKit генерирует пакеты небольшого размера по сравнению с другими фреймворками. Это достигается за счет включения только необходимого кода для каждого компонента, что приводит к минимальным накладным расходам. Это очень удобно для пользователей с медленным интернетом или ограниченной пропускной способностью.

Небольшой размер пакета SvelteKit повышает производительность и улучшает пользовательский опыт на мобильных устройствах. Он также обеспечивает эффективное разделение кода и ленивую загрузку, улучшая работу разработчика.

Богатая экосистема компонентов

Богатая экосистема компонентов – значительное преимущество SvelteKit. SvelteKit предоставляет разработчикам широкий спектр предварительно созданных и настраиваемых компонентов, которые можно легко интегрировать в приложения.

Богатая экосистема компонентов в SvelteKit позволяет ускорить разработку, улучшить согласованность пользовательского интерфейса и повысить удобство повторного использования кода. Она также позволяет быстро создавать прототипы и расширять возможности с помощью других библиотек и инструментов.

Рендеринг на стороне сервера (SSR)

SvelteKit предлагает функции рендеринга на стороне сервера, позволяя разработчикам предварительно рендерить страницы на сервере перед передачей их клиенту. Такой подход повышает скорость начальной загрузки страниц, оптимизирует видимость в поисковых системах и улучшает общий пользовательский опыт.

Рендеринг на стороне сервера в SvelteKit повышает общую производительность приложения SvelteKit. Он также обеспечивает кэширование, динамический контент, бесшовную навигацию и совместное использование кода.

Встроенная маршрутизация

SvelteKit предоставляет встроенную систему маршрутизации, которая упрощает управление маршрутами приложений. Она позволяет разработчикам декларативно определять маршруты. Разработчики также могут определять маршруты с параметрами для создания динамических страниц.

Система маршрутизации SvelteKit предлагает программную навигацию. Здесь разработчики могут использовать функции, предоставляемые SvelteKit, для программной навигации по различным маршрутам. SvelteKit также предоставляет функции защиты маршрутов и промежуточные функции, позволяющие разработчикам реализовать расширенную логику маршрутизации.

Ограничения SvelteKit

Хотя SvelteKit предлагает множество преимуществ, у него есть и некоторые ограничения, о которых разработчикам следует знать. Вот некоторые из них:

Кривая обучения

SvelteKit – относительно новый фреймворк по сравнению с другими фреймворками, такими как React или Angular, поэтому в нем может быть меньше обучающих ресурсов. SvelteKit вводит некоторые уникальные концепции и синтаксис, которые могут быть сложными для начинающих разработчиков.

Разработчикам, уже знакомым с Svelte, будет проще перейти на SvelteKit, но тем, кто только начинает работать с Svelte, придется потратить время на изучение фреймворка.

Ограниченная поддержка со стороны сообщества

Поскольку SvelteKit все еще набирает популярность, поддержка сообщества может быть не такой обширной, как у других фреймворков. Ограниченная поддержка сообщества SvelteKit может затруднить разработчикам обучение, устранение неполадок и поиск работы.

Однако сообщество растет, и есть способы смягчить последствия ограниченной поддержки. Например, разработчики могут взаимодействовать с существующим сообществом Svelte через форумы и социальные сети.

Совместимость с существующими кодовыми базами

Если у вас есть существующая кодовая база, построенная на другом фреймворке, ее перенос на SvelteKit может потребовать значительных усилий. SvelteKit использует другой архитектурный подход, требуя от вас переписать всю логику кодовой базы.

SvelteKit представляет свою систему маршрутизации, которая может конфликтовать с существующими механизмами маршрутизации кодовой базы. При переходе на SvelteKit вам, возможно, придется изучить новые концепции и адаптировать имеющиеся знания.

Введение в проект

Следуя этому руководству, вы создадите базовое приложение обратной связи с использованием фреймворка SvelteKit. Приложение обратной связи будет обеспечивать функциональность CRUD (создание, чтение, обновление, удаление) и использовать Back4app для хранения данных.

Создание приложения SvelteKit

Чтобы создать приложение Sveltekit, выполните следующую команду в терминале:

npm create svelte@latest feedback-application

После того как вы запустите приведенный выше код, несколько подсказок помогут вам настроить приложение. Подсказки будут выглядеть примерно так:

После настройки приложения перейдите в его каталог и установите необходимые зависимости. Для этого выполните в терминале следующий код:

cd feedback-application
npm install

Теперь вы успешно создали приложение обратной связи и установили необходимые зависимости. Чтобы улучшить внешний вид приложения, вы добавите в него несколько шрифтов Google. Для этого нужно добавить ссылки на шрифты в файл app.html, который находится в директории src. Ссылки можно найти на сайте Google Fonts.

Шрифты, которые вы будете использовать в своем приложении, – это шрифты Comforter и Montserrat. Вы можете использовать эти шрифты в своем приложении, добавив следующий код в тег head файла 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">

Далее вы добавите в приложение несколько глобальных стилей. Для этого перейдите к файлу global.css в папке style. Папку style можно найти в каталоге src.

В файле global.css напишите этот код:

/* 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;
}

Далее вы создаете макет приложения. Вы определяете макет приложения с помощью файла +layout.svelte. Файл +layout.svelte – это специальный файл для создания многократно используемых компонентов макета, которые определяют структуру макетов страниц. Убедитесь, что вы создали файл +layout.svelte в каталоге src/routes.

Определите макет вашего приложения следующим образом:

<!-- +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>

Приведенный выше блок кода импортирует файл global.css, применяя глобальные стили к вашему приложению. Он также определяет элемент заголовка. Внутри элемента заголовка находится элемент h1 с текстом “Feedback App”.

Элемент slot определяет место для размещения содержимого страницы. При рендеринге страницы приложение вставляет ее содержимое в слот, делая его видимым в макете. В разделе style блока кода вы задаете стиль элементу h1.

Теперь вы определили стили и макет для своего приложения. Далее вы создадите домашнюю страницу вашего приложения. Для этого напишите следующий код в файле +page.svelte, расположенном в каталоге 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>

Приведенный выше блок кода создает форму обратной связи с простой системой оценок. Вы можете ввести свои мысли в текстовое поле и оценить свой опыт, нажимая на пронумерованные кнопки. Затем приложение сохраняет ваши данные в объекте данных.

Функция handleClick сохраняет вашу оценку в свойстве data.rating, а директива bind сохраняет ваш отзыв в свойстве data.feedback. Директива bind позволяет добиться двустороннего связывания данных между входными значениями и данными в компоненте.

Теперь вы можете просмотреть ваше приложение в веб-браузере. Для этого перейдите в каталог проекта в терминале и выполните следующую команду:

npm run dev

Выполнив указанную выше команду, вы получите ссылку http://localhost:5173/. Перейдите по этой ссылке в веб-браузере, и вы сможете просмотреть свое приложение.

Если вы правильно следовали руководству, ваше приложение должно выглядеть следующим образом:

Интеграция Back4app с вашим приложением

Back4App – это платформа Backend-as-a-Service (BaaS), которая предоставляет инструменты и инфраструктуру для создания и управления внутренними функциями ваших приложений. С Back4App вы можете сосредоточиться на создании отличных функций для своего приложения, не беспокоясь о сложностях настройки и обслуживания внутреннего сервера. Back4app предлагает множество отличных функций, включая управление базами данных, аутентификацию пользователей, хостинг API и многое другое.

Создание учетной записи Back4app

Прежде чем вы сможете воспользоваться всеми возможностями, которые предлагает Back4app, вам необходимо завести аккаунт в Back4app. Вы можете создать его, выполнив следующие простые шаги:

1. Посетите веб-сайт Back4app.
2. Нажмите на кнопку “Зарегистрироваться”.
3. Заполните форму регистрации и отправьте ее.

Представляем плагин Back4app ChatGPT

Следуя последним тенденциям использования искусственного интеллекта для облегчения жизни разработчиков, компания Back4app представила плагин ChatGPT. Этот плагин помогает разработчикам и нетехническим энтузиастам создавать и взаимодействовать с приложениями Back4app.

С помощью плагина вы можете преобразовать ваши разговоры с ChatGPT в реальные приложения. Это означает, что даже если вы новичок в разработке или новичок в использовании платформы Back4App, вы сможете легко создать и настроить приложение Back4App.

Чтобы иметь возможность использовать плагины на ChatGPT, убедитесь, что вы подписаны на ChatGPT Plus. После подписки на ChatGPT Plus, если вы еще не подписаны, нажмите на кнопку “GPT-4”, и появится всплывающее окно с опциями.

Выберите опцию “Плагины”, затем выберите плагин Back4app. Это позволит вам использовать плагин ChatGPT от Back4app.

Создайте приложение Back4app с помощью плагина

С плагином Back4app на ChatGPT создать приложение Back4app очень просто. Просто скажите ChatGPT, какое приложение вы хотите создать, и он сделает все остальное.

Например:

После создания приложения перейдите на сайт Back4app, войдите в систему и проверьте свои приложения, чтобы подтвердить, что приложение было создано.

Добавление данных в приложение Back4app

Вы можете добавить данные в свое приложение с помощью плагина ChatGPT от Back4app. Здесь вы попросите ChatGPT создать класс обратной связи в приложении обратной связи и заполнить его пользовательскими отзывами.

Вот пример того, как это сделать:

Плагин создает класс Feedback в приложении и запрашивает пример пользовательской обратной связи, которую вы хотите добавить.

После приведения примера пользовательского отзыва плагин генерирует отзыв и оценку в приложении. Вы можете добавить больше отзывов и оценок в приложение, предоставив их ChatGPT.

Теперь вы можете убедиться, что плагин сгенерировал класс обратной связи и пользовательские отзывы и оценки в вашем приложении.

Подключение к Back4app

Следующим шагом будет подключение вашего приложения к приложению Back4app. Для этого вам необходимо установить Parse JavaScript SDK. Вы можете установить его, выполнив следующий код в терминале:

npm install parse

После установки Parse JavaScript SDK. Вы будете использовать учетные данные Application ID и Javascript KEY. Вы можете найти эти учетные данные в разделе Security & Keys на панели управления вашего приложения Back4app. Храните идентификатор приложения и Javascript KEY в безопасном месте в вашем приложении.

Импортируйте минифицированную версию Parse из parse в файл +page.svelte в директории src и вызовите метод initialize. Этот метод принимает в качестве аргументов идентификатор приложения и учетные данные Javascript KEY.

Например:

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

Обратите внимание, что приведенный выше блок кода нужно добавить в тег script файла +page.svelte. После вызова метода initialize на Parse следующим шагом будет установка свойства serverURL на Parse в значение https://parseapi.back4app.com/.

Например, так:

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

Получение данных из Back4app

Перед тем как отобразить данные в приложении Back4app, вам нужно получить их. Чтобы получить данные, вы создадите функцию fetchFeedbacks. Эта функция будет содержать логику, которая извлекает отзывы и оценки из вашего приложения.

Перед созданием функции создайте компонент карточки. Компонент карточки определяет внешний вид и функциональность ваших отзывов. Чтобы создать компонент card, сначала создайте папку components в каталоге src. Затем создайте файл card.svelte в папке components.

В файле card.svelte напишите этот код:

<!-- 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>

Этот код определяет компонент карточки. В теге script код экспортирует переменные feedback и rating как реквизиты. Это означает, что компоненты, импортирующие этот компонент, могут определять значения этих реквизитов. Код инициализирует переменную feedback пустой строкой, а переменную rating – 0.

Тег div представляет собой основную структуру компонента карточки, а тег style содержит стили CSS, применяемые к компоненту карточки.

Далее в теге script файла +page.svelte импортируйте компонент card и создайте функцию fetchFeedbacks.

Например, так:

//+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);

Этот код определяет функцию fetchFeedbacks. Он также использует хук жизненного цикла onMount для получения отзывов из базы данных путем вызова функции fetchFeedbacks.

Функция fetchFeedbacks использует метод Parse.Query() для поиска объекта “Feedback” в базе данных вашего приложения. Затем она возвращает массив результатов запроса, вызывая метод find() Parse SDK на результат вызова Parse.Query(). Наконец, массив результатов присваивается переменной feedbackData.

Теперь в теге div, содержащем HTML-элементы файла +page.svelte, вы используете блок Svelte each для отображения данных в массиве feedbackData.

Например:

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

Внутри тега div блок each выполняет итерации по массиву feedbackData и присваивает каждый элемент переменной feedback. Для каждого отзыва в массиве отображается компонент карточки. Вы получаете значения feedbackText и rating с помощью метода get() отзыва. Затем вы передаете эти значения в реквизиты feedback и rating компонента карточки.

Стилизуйте тег div с классом feedbacks, добавив приведенный ниже блок кода в тег style в файле +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;
}

Добавление данных в Back4app из приложения

Изначально вы добавили данные в ваше приложение Back4app с помощью плагина ChatGPT от Back4app, но пользователи вашего приложения не смогут делать этого. Чтобы предоставить пользователям возможность добавлять данные через ваше приложение, вы создадите функцию, которая будет добавлять новые отзывы и оценки в базу данных вашего приложения на Back4app.

Например, так:

// +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();
};

Добавьте приведенный выше блок кода в тег script файла +page.svelte. Функция handleSubmit() создает новый объект Parse “Отзывы” и устанавливает его свойства feedbackText и rating в значения data.feedback и data.rating. Затем она сохраняет объект на сервере Parse с помощью метода save(). Наконец, функция вызывает функцию fetchFeedbacks().

Теперь привяжите функцию handleSubmit к форме в файле +page.svelte с помощью привязки к событиям. Вы привязываете функцию к событию on:submit, чтобы всякий раз, когда пользователь отправляет форму, выполнялась функция.

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

Удаление данных из Back4app

Вы можете удалить данные из Back4app с помощью метода destroy, чтобы удалить соответствующую запись(и) из вашей базы данных. Создайте функцию deleteFeedback, содержащую логику для удаления отзывов из базы данных вашего приложения на основе заданного ID.

Перед созданием функции deleteFeedback обновите компонент карточки, добавив реквизит deleteFeedback и элемент button, который вы привяжете к реквизиту deleteFeedback с помощью события on:click. Замените код в файле card.svelte на блок кода, приведенный ниже.

<!-- 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>

Создайте функцию deleteFeedback в файле +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);
  }
};

Функция deleteFeedback создает новый объект “Feedback” с помощью метода Parse.Object.extend. Затем она устанавливает свойство id объекта в параметр id, переданный в функцию. Затем она вызывает асинхронный метод destroy объекта “Feedback”, чтобы удалить элемент отзыва с заданным идентификатором из Back4app.

Затем функция фильтрует массив feedbackData с помощью метода feedbackData.filter. Она отфильтровывает элементы отзывов с заданным идентификатором, создавая новый массив, в котором нет удаленных элементов отзывов. Затем функция присваивает новый массив массиву feedbackData.

Теперь передайте функцию deleteFeedback в свойство deleteFeedback компонента карточки. Таким образом, каждый раз, когда пользователь нажимает на элемент кнопки в компоненте карточки, будет выполняться функция deleteFeedback.

Например, так:

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

Тестирование приложения

Вы закончили создание приложения; следующий шаг – его тестирование. Чтобы протестировать приложение, перейдите в каталог приложений на терминале и запустите сервер разработки.

После запуска сервера разработки откройте браузер и перейдите по следующей ссылке: http://localhost:5173/. Приложение должно выглядеть так, как показано на рисунке ниже.

Чтобы добавить отзыв, напишите “Мне очень нравится это приложение” в поле ввода, затем нажмите на кнопку с текстом “4”, чтобы оценить его. Наконец, нажмите кнопку “Опубликовать”, чтобы отправить свой отзыв.

Чтобы подтвердить, что вы добавили новый отзыв, под предыдущими карточками появится новая карточка с текстом “Мне очень нравится это приложение” и оценкой 4. Вы также можете перейти на приборную панель вашего приложения на Back4app, чтобы подтвердить это.

Чтобы удалить отзыв, просто нажмите на кнопку “Удалить”. Чтобы подтвердить это, удалите отзыв “Приложение было потрясающим”.

Заключение

SvelteKit – это фреймворк для разработки надежных и производительных веб-приложений с использованием Svelte. Это метафреймворк, что означает, что он предоставляет набор инструментов и абстракций, которые можно использовать для создания любого типа веб-приложений.

Интеграция SvelteKit с Back4app позволяет разработчикам сосредоточиться на разработке фронтенд-приложений, а Back4app позаботится о бэкенде. Back4app снижает сложность разработки бэкенда, облегчая разработчикам создание полнофункциональных веб-приложений.

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ