Материал подготовлен командой Simple-Server для администраторов VPS и выделенных серверов. Команды и пути проверяйте на тестовой машине перед production.
Кратко о задаче
- Зарегистрированный аккаунт на GitHub, GitLab или Bitbucket.
- Зарегистрированный аккаунт на платформе Simple-Server
- Знание фреймворка Svelte не обязательно, так как код нашего приложения очень прост, логичен и основан на JavaScript.
Кейсы: кому и как использовать Svelte + Simple-Server App Platform
-
Разработчикам для разработки активных прототипов и макетов приложений и сайтов.
-
Разработчикам для создания больших серьезных элементов сайтов. Например, компания Mail.ru при создании своего верхнего меню поиска использовала только Svelte, что лишний раз показывает, что плоскость практического применения данного фреймворка не ограничивается мелкими утилитами.
-
Студентам для создания интерактивных презентаций.
-
И так далее…
Разработчикам для разработки активных прототипов и макетов приложений и сайтов.
Разработчикам для создания больших серьезных элементов сайтов. Например, компания Mail.ru при создании своего верхнего меню поиска использовала только Svelte, что лишний раз показывает, что плоскость практического применения данного фреймворка не ограничивается мелкими утилитами.
Студентам для создания интерактивных презентаций.
Кейсы: кому и как использовать «Трекер рабочего времени»
-
Разработчикам крупных IT-компаний, которые используют тяжелые решения, типа Jira или YouTrack. В течение дня бывает сложно и неудобно трекать время работы в сложных системах, особенно если приходится переключаться между задачами.
-
Фрилансерам: наше приложение является идеальным бесплатным решением.
-
Тем, кто учится: например, участникам курсов или молодым людям и девушкам, которые пробуют свои силы в IT. Наше приложение поможет вам оценить время, затраченное на учебу и написание тестовых заданий.
Разработчикам крупных IT-компаний, которые используют тяжелые решения, типа Jira или YouTrack. В течение дня бывает сложно и неудобно трекать время работы в сложных системах, особенно если приходится переключаться между задачами.
Фрилансерам: наше приложение является идеальным бесплатным решением.
Тем, кто учится: например, участникам курсов или молодым людям и девушкам, которые пробуют свои силы в IT. Наше приложение поможет вам оценить время, затраченное на учебу и написание тестовых заданий.
Смотрите, как это будет выглядеть для разработчика:
Деплой приложения на Svelte
В данной инструкции разберём деплой приложения с использованием GitHub.
Шаг 1: Копирование шаблона
Откройте в браузере страницу репозитория с шаблоном нашего подготовленного приложения и нажмите кнопку «Fork», чтобы скопировать его в свой аккаунт Github.
Сохраните репозиторий в своем аккаунте. Название репозитория можете оставить таким же.
Для автоматического развертывания статических приложений, написанных на Svelte, Vue и т.д., компания Simple-Server разработала удобный интерфейс с автоматической сборкой и деплоем приложения, а также формированием публичного URL.
Называется сервис App Platform и, де-факто, заменяет сложно настраиваемые системы CI/CD, включая систему развертывания самого GitHub.
Все делается в три клика. При этом, если позже вы отредактируете свое приложение на локальном компьютере, платформа самостоятельно увидит изменения в GitHub, перекомпилирует ваше приложение и выложит актуальную версию на сайт (для этого при первом деплое установите значение «Сборка по последнему коммиту», см. скриншоты ниже).
Поскольку вы уже зарегистрированы в Simple-Server, просто перейдите в раздел App Platform, нажмите на кнопку «Создать» и выберите тип приложения «Svelte».
Далее вам необходимо подключиться к вашему аккаунту на GitHub, чтобы платформа имела возможность получать уведомления об изменениях в проекте и запускать автоматический деплой. Никаких других настроек делать не нужно, просто нажмите кнопку «Добавить аккаунт».
В процессе подключения вы увидите окно авторизации GitHub, введите свой auth code и нажмите кнопку «Verify». Не забудьте установить переключатель в значение «Сборка по последнему выполненному коммиту».
После авторизации выберите репозиторий, который вы форкнули (скопировали) к себе в аккаунт и нажмите кнопку «Save».
Вы успешно выполнили два необходимых шага. Теперь нажимайте кнопку «Запустить деплой» и наслаждайтесь процессом сборки вашего новенького личного трекера задач.
Платформа Simple-Server App Platform покажет вам весь процесс компиляции приложения и деплоя на сервер.
Поздравляем! Вы успешно разместили свое приложение и можете полноценно его использовать, не тратя время на настройку хостингов. Перейдите в настройки, скопируйте публичный URL и откройте в браузере готовое приложение (домен при этом можете изменить на свой, используя кнопку «Редактировать»).
Если вас пугают ограничения конфигурации с лимитом в 50 МБ, не переживайте: ваше приложение весит всего 32 КБ, т.е. здесь вы можете разместить в 190 раз больше, и платформа ничего от вас не потребует.
Как устроено приложение на Svelte
Визуально сам трекер довольно простой, однако его функционала вполне хватает для повседневной работы. Он позволяет калькулировать рабочее время, разбивая его по проектам и отдельным задачам.
При этом, работая в проекте долгое время, вы будете видеть историю своих трудозатрат по дням, что очень удобно и наглядно демонстрирует вашу включенность в определенную задачу.
В приложении вы можете добавлять и удалять проекты, а также добавлять и удалять трекинги затраченного времени на разработку, тестирование, деплой и т.д.
Подготовка для локальной разработки
Поскольку вы скопировали (форкнули) наше приложение к себе в репозиторий, теперь мы можем разобрать, из чего оно состоит, и как его доработать.
Откройте терминал (для Windows: PowerShell, Windows terminal или PuTTY; подробности можно найти в статье). Далее перейдите в папку, где вы храните свои разработки:
Клонируйте ваше Svelte-приложение на локальный компьютер:
git clone https://github.com/ВАШ_НИК/svelte-work-time-tracker.git svelte-work-time-tracker
cd svelte-work-time-trackerДля запуска приложения введите команду:
Откройте ваш трекер в браузере по адресу: http://localhost:8080/
Рассмотрим структуру приложения подробнее.
Откройте редактор или IDE (например, VS Code или Zed) и загрузите ваш проект. Структура каталогов вашего приложения выглядит следующим образом:
Поскольку фреймворк Svelte очень лаконичный и позволяет писать сложные приложения, используя один-два компонента, нас интересуют только два файла:
-
App.svelte— здесь размещен основной код. -
/Components/Notification.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.
| Функция (метод) | Описание |
|---|---|
triggerNotification | Вызываем красивое окно уведомлений о производимых действиях. |
addProject() | Добавление проекта |
deleteProject(index) | Удаление проекта (по номеру индекса) |
addTime() | Добавление трекинга времени |
deleteEntry(projectIndex, day, entryIndex) | Удаление трекинга времени |
saveProjects() | Сохранение данных в localStorage |
Вызываем красивое окно уведомлений о производимых действиях.
Удаление проекта (по номеру индекса)
Добавление трекинга времени
Удаление трекинга времени
Сохранение данных в localStorage
Рассмотрим для примера функцию добавления нового проекта:
function addProject() {
if (newProjectName) {
projects.push({ name: newProjectName, days: {} });
newProjectName = "";
saveProjects();
}
}Как видим, код совершенно простой:
- Проверяем, чтобы реактивная переменная
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>Проверяем, чтобы реактивная переменная 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>- Далее добавляем в массив
projectsновый элемент с пустым значением дней.
projects.push({ name: newProjectName, days: {} });Далее добавляем в массив projects новый элемент с пустым значением дней.
projects.push({ name: newProjectName, days: {} });-
Далее обнуляем переменную
newProjectName = "";. Таким образомinputочищается для следующих операций. -
Далее вызываем функцию сохранения данных в
localStorage.
Далее обнуляем переменную newProjectName = "";. Таким образом input очищается для следующих операций.
Далее вызываем функцию сохранения данных в localStorage.
В свою очередь, функция сохранения также довольно проста в своей реализации.
function saveProjects() {
projects = [...projects]
localStorage.setItem("projects", JSON.stringify(projects));
triggerNotification();
}-
projects = [...projects]— перезаписываем массив проектов с использованием spread-оператора(...). Это необходимо, так какprojects— это реактивная переменная, но чтобы Svelte отслеживало изменения внутри массива, его необходимо «пересоздавать» (это особенность реактивности массивов и объектов не только в Svelte, но и, например, в VueJS). -
localStorage.setItem— этот шаг сохраняет скопированный массив проектов в локальное хранилище браузера (localStorage). Сначала массивprojectsпреобразуется в строку формата JSON с помощьюJSON.stringify(), чтобы его можно было сохранить как строку, так какlocalStorageможет хранить только строки. Затем эта строка сохраняется под ключом "projects". -
triggerNotification— после успешного сохранения проектов вызываем визуально уведомление о том, что проекты успешно сохранены. Это полезно для вас как для пользователя, чтобы вы получали обратную связь и были уверены в том, что ваши данные сохранены.
projects = [...projects] — перезаписываем массив проектов с использованием spread-оператора (...). Это необходимо, так как projects — это реактивная переменная, но чтобы Svelte отслеживало изменения внутри массива, его необходимо «пересоздавать» (это особенность реактивности массивов и объектов не только в Svelte, но и, например, в VueJS).
localStorage.setItem — этот шаг сохраняет скопированный массив проектов в локальное хранилище браузера (localStorage). Сначала массив projects преобразуется в строку формата JSON с помощью JSON.stringify(), чтобы его можно было сохранить как строку, так как localStorage может хранить только строки. Затем эта строка сохраняется под ключом "projects".
triggerNotification — после успешного сохранения проектов вызываем визуально уведомление о том, что проекты успешно сохранены. Это полезно для вас как для пользователя, чтобы вы получали обратную связь и были уверены в том, что ваши данные сохранены.
Ниже вы можете увидеть пример уведомления:
function deleteProject(index) {
projects.splice(index, 1);
saveProjects();
}Эта функция очень проста. Она удаляет одну строку в массиве проектов (по номеру позиции) и вызывает функцию сохранения.
Итак, В этом материале мы научились писать простые приложения на Svelte, а также без лишних усилий размещать свои проекты в публичном пространстве.
Добавим также для новичков, что Svelte — это современный JavaScript-фреймворк, который предлагает ряд значительных преимуществ для разработки веб-приложений: скорость, маленький вес приложений, большое сходство с VueJS, что дает вам возможность в дальнейшем понимать код, написанный на различных промышленных фреймворках. На сегодняшний день это самое передовое решение по быстрой разработке приложений, активных макетов и презентаций.
Simple-Server, в свою очередь, обеспечит простое защищенное развертывание вашего кода в публичном пространстве, предоставит бесплатные публичные URL-адреса для ваших проектов, позаботится о наличии сертификатов SSL и многом другом.
Мы рекомендуем использовать сервис Simple-Server App Platform как стартовую площадку для быстрой разработки. Творите и придумывайте, не заботясь о серверах, сложных системах CI/CD, а все трудную работу сделает наша профессиональная команда инженеров.
Нужен сервер для практики? Арендуйте VPS/VDS в России — root-доступ, NVMe, DDoS-защита и поддержка 24/7.