Как создать и развернуть приложение на Svelte

После прочтения данной статьи вы сможете в течение пяти минут развернуть личный трекер рабочего времени, группирующий время по дням и проектам (задачам). Мы рассмотрим пример простого развертывания (деплоя) вашего проекта, написанного на Svelte, на платформе Timeweb Cloud Apps. 

В результате вы получите публичный URL с работающим приложением на Svelte, при этом всю настройку и деплой возьмет на себя сервис Timeweb Cloud Apps, а стоимость составит всего 1 рубль в месяц.

Что нам потребуется

• Зарегистрированный аккаунт на GitHub, GitLab или Bitbucket.

• Зарегистрированный аккаунт на платформе Timeweb Cloud

• Знание фреймворка Svelte не обязательно, так как код нашего приложения очень прост, логичен и основан на JavaScript.

Кейсы: кому и как использовать Svelte + Timeweb Cloud Apps

1. Разработчикам для разработки активных прототипов и макетов приложений и сайтов.

2. Разработчикам для создания больших серьезных элементов сайтов. Например, компания Mail.ru при создании своего верхнего меню поиска использовала только Svelte, что лишний раз показывает, что плоскость практического применения данного фреймворка не ограничивается мелкими утилитами.

3. Студентам для создания интерактивных презентаций.

4. И так далее…

Кейсы: кому и как использовать «Трекер рабочего времени»

1. Разработчикам крупных IT-компаний, которые используют тяжелые решения, типа Jira или YouTrack. В течение дня бывает сложно и неудобно трекать время работы в сложных системах, особенно если приходится переключаться между задачами.

2. Фрилансерам: наше приложение является идеальным бесплатным решением.

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

Смотрите, как это будет выглядеть для разработчика:

Деплой приложения на Svelte

В данной инструкции мы рассмотрим деплой приложения с использованием GitHub. 

Шаг 1: Копирование шаблона

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

Сохраните репозиторий в своем аккаунте. Название репозитория можете оставить таким же.

Шаг 2: Деплой приложения

Для автоматического развертывания статических приложений, написанных на Svelte, Vue и т.д., компания Timeweb Cloud разработала удобный интерфейс с автоматической сборкой и деплоем приложения, а также формированием публичного URL. 

Называется сервис Timeweb Cloud Apps и, де-факто, заменяет сложно настраиваемые системы CI/CD, включая систему развертывания самого GitHub. 

Все делается в три клика. При этом, если позже вы отредактируете свое приложение на локальном компьютере, платформа самостоятельно увидит изменения в GitHub, перекомпилирует ваше приложение и выложит актуальную версию на сайт (для этого при первом деплое установите значение «Сборка по последнему коммиту», см. скриншоты ниже).

Поскольку вы уже зарегистрированы в Timeweb Cloud, просто перейдите в раздел Apps, нажмите на кнопку «Создать» и выберите тип приложения «Svelte».

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

В процессе подключения вы увидите окно авторизации GitHub, введите свой auth code и нажмите кнопку «Verify». Не забудьте установить переключатель в значение «Сборка по последнему выполненному коммиту».

После авторизации выберите репозиторий, который вы форкнули (скопировали) к себе в аккаунт и нажмите кнопку «Save».

Вы успешно выполнили два необходимых шага. Теперь нажимайте кнопку «Запустить деплой» и наслаждайтесь процессом сборки вашего новенького личного трекера задач.

Платформа Timeweb Cloud Apps покажет вам весь процесс копиляции приложения и деплоя на сервер.

Поздравляем! Вы успешно разместили свое приложение и можете полноценно его использовать, не тратя время на настройку хостингов. Перейдите в настройки, скопируйте публичный URL и откройте в браузере готовое приложение (домен при этом можете изменить на свой, используя кнопку «Редактировать»).

Если вас пугают ограничения конфигурации с лимитом в 50 Мб, не переживайте: ваше приложение весит всего 32 Кб, т.е. здесь вы можете разместить в 190 раз больше, и платформа ничего от вас не потребует.

Как устроено приложение на Svelte

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

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

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

Подготовка для локальной разработки

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

Откройте терминал (для Windows: PowerShell, Windows terminal или PuTTY; подробности можно найти в статье). Далее перейдите в папку, где вы храните свои разработки:

cd /путь/к/папке

Клонируйте ваше Svelte-приложение на локальный компьютер:

git clone https://github.com/ВАШ_НИК/svelte-work-time-tracker.git svelte-work-time-tracker
cd svelte-work-time-tracker

Установите зависимости:

npm install

Для запуска приложения введите команду:

npm run dev

Откройте ваш трекер в браузере по адресу: http://localhost:8080/

Исходники приложения

Рассмотрим структуру приложения подробнее.

Структура файлов

Откройте редактор или IDE (например, VS Code или Zed) и загрузите ваш проект. Структура каталогов вашего приложения выглядит следующим образом:

Поскольку фреймворк Svelte очень лаконичный и позволяет писать сложные приложения, используя один-два компонента, нас интересуют только два файла: 

• App.svelte — здесь размещен основной код.

• /Components/Notification.svelte — компонент, который выводит сообщения о добавлении/удалении трекинга времени.

Давайте рассмотрим основной файл App.svelte и разберем, как работает приложение.

Файл состоит из трех блоков:

<script>Здесь наш основной код</script>

<main>Здесь HTML код страницы</main>

<style>Здесь оформление кнопок, инпутов, шрифтов, отступов  и т.д.</style>

Структура кода

Рассмотрим функциональный блок <script></script>, так как в нем сосредоточена вся логика приложения, остальные блоки являются лишь HTML/CSS-оформлением страницы.

В первую очередь нас интересует главная реактивная переменная projects:

let projects = JSON.parse(localStorage.getItem("projects")) || [];

Она отвечает за хранение всех ваших проектов и таймингов. В примере для ее чтения и сохранения мы используем локальное хранилище браузера localStorage, но можно использовать и внешние базы данных, обращаясь к ним по API, или делать запросы к backend (но это уже отдельная история).

Как можно увидеть, мы объявляем эту переменную в начале кода и сразу инициализируем ее: читаем из хранилища и, если в хранилище пусто, присваиваем пустой массив. В этой переменной мы будем добавлять/удалять проекты, а также тайминги, привязанные проекту.

Перечень функций

Для работы с переменной мы будем использовать всего шесть функций, которые, собственно, и обрабатывают 100% нашего приложения на Svelte.

Функция addProject

Рассмотрим для примера функцию добавления нового проекта:

function addProject() {
  if (newProjectName) {
  	projects.push({ name: newProjectName, days: {} });
  	newProjectName = "";
  	saveProjects();
  }
}

Как видим, код совершенно простой:

1. Проверяем, чтобы реактивная переменная newProjectName содержала любое значение (название проекта не было пустым)

   if (newProjectName) 

   В свою очередь, значение переменной newProjectName берется из html-элемента input, к которому прилинкована переменная.

   

   В коде Svelte это выглядит следующим образом:

   <div class="add-project-container d-flex">
     <label for="new-project" class="m-0">Добавить проект:</label>
     <input
   	type="text"
   	id="new-project"
   	bind:value={newProjectName}
   	placeholder="Название проекта"
   	class="m-0"
     />
     <button on:click={addProject}>{@html icons.plus}</button>
   </div>
   

2. Далее добавляем в массив projects новый элемент с пустым значением дней.

   projects.push({ name: newProjectName, days: {} });

3. Далее обнуляем переменную newProjectName = "";. Таким образом input очищается для следующих операций.

4. Далее вызываем функцию сохранения данных в localStorage.

Функция saveProject

В свою очередь, функция сохранения также довольно проста в своей реализации.

Тело функции:

function saveProjects() {
	projects = [...projects]
	localStorage.setItem("projects", JSON.stringify(projects));
	triggerNotification();
  }

Пояснения:

1. projects = [...projects] — перезаписываем массив проектов с использованием spread-оператора (...). Это необходимо, так как projects — это реактивная переменная, но чтобы Svelte отслеживало изменения внутри массива, его необходимо «пересоздавать» (это особенность реактивности массивов и объектов не только в Svelte, но и, например, в VueJS).

2. localStorage.setItem — этот шаг сохраняет скопированный массив проектов в локальное хранилище браузера (localStorage). Сначала массив projects преобразуется в строку формата JSON с помощью JSON.stringify(), чтобы его можно было сохранить как строку, так как localStorage может хранить только строки. Затем эта строка сохраняется под ключом "projects".

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

Ниже вы можете увидеть пример уведомления:

Функция deleteProject

function deleteProject(index) {
	projects.splice(index, 1);
	saveProjects();
  }

Эта функция очень проста. Она удаляет одну строку в массиве проектов (по номеру позиции) и вызывает функцию сохранения. 

Заключение

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

Добавим также для новичков, что Svelte — это современный JavaScript-фреймворк, который предлагает ряд значительных преимуществ для разработки веб-приложений: скорость, маленький вес приложений, большое сходство с VueJS, что дает вам возможность в дальнейшем понимать код, написанный на различных промышленных фреймворках. На сегодняшний день это самое передовое решение по быстрой разработке приложений, активных макетов и презентаций.

Timeweb Cloud, в свою очередь, обеспечит простое защищенное развертывание вашего кода в публичном пространстве, предоставит бесплатные публичные URL-адреса для ваших проектов, позаботится о наличии сертификатов SSL и многом другом. 

Мы рекомендуем использовать сервис Timeweb Cloud Apps как стартовую площадку для быстрой разработки. Творите и придумывайте, не заботясь о серверах, сложных системах CI/CD, а все трудную работу сделает наша профессиональная команда инженеров.