Делаем собственный блог на Svelte. Часть 2: Git, загрузка существующих постов

Итак, продолжаем наш цикл по разработке собственного блога на базе Svelte, TailwindCSS и SQLite. В этот раз мы приступим к написанию кода, но перед этим все равно выполним кое-какие подготовительные этапы. 

Предыдущая статья: Создаем свой блог на Svelte. Часть 1

Кроме того, разберемся с тем, что такое Git (на базовом уровне). И раз уж мы решили симулировать работу фуллстек-разработчика на минималках, то придется создать хотя бы одну запись в базе данных перед началом работы. 

Настраиваем Git и GitHub

Git – это система контроля версий, она используется для создания коммитов (блоков с информацией, в которой хранятся данные об изменениях, внесенных в код). С помощью нее можно легко «документировать» каждый этап разработки и хранить каждый шаг в отдельном онлайн-хранилище. Это если уж говорить совсем просто.

Действуем поэтапно:

• Создаем учетную запись в GitHub. 

• Подтверждаем адрес электронной почты. 

• Переходим в настройки профиля, а из них во вкладку Developer Settings. 

• Переходим в меню управления токенами (они выступают вместо паролей для сторонних приложений). 

• Создаем новый токен и копируем его, чтобы он был под рукой. 

• Потом создаем свой первый репозиторий, нажав на кнопку New на главной странице. 

• Придумываем ему имя (в моем случае это blogSvelte). 

• Копируем ссылку на репозиторий. 

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

• Открываем наш проект по разработке блога в терминале. Команда: 

cd /путь до директории blogSvelte/

• Затем вводим:

git init

• Так мы создадим базовый локальный репозиторий. Там пока нет никакой информации. 

• Потом добавим весь контент из папки в репозиторий (все, за исключением того, что прописано в файле .gitignore) с помощью команды:

git add.

• Точка в конце (вместо названия файла) как раз указывает на необходимость добавить всю директорию целиком. Теперь делаем первый коммит командой: 

git commit -m 'сообщение коммита (любое)'

• Сообщение может быть любым, но вообще существуют общепринятые конвенции. Например, при добавлении новой функции стоит добавлять префикс feat, а при рефакторинге – refactor.

• Задаем email и имя пользователя в Git-системе. Вводим следующую команду, чтобы открыть файл с настройками. 

git config --global --edit

• Нажимаем на кнопку I, чтобы перейти в режим редактирования текста. Заменяем имя и email на свои. 

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

:wq

• Подключаем внешнее хранилище репозиториев с помощью команды:

git remote add название репозитория ссылка на репозиторий, которую мы скопировали ранее

• Теперь отправляем содержимое репозитория в GitHub командой: 

git push -u название репозитория master

• Система git потребует ввести логин и пароль. Логин – это ваш логин от GitHub, указанный при регистрации, а пароль – токен, который вы генерировали в настройках разработчика все на том же GitHub.

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

Создаем первую запись в базе данных

Мы, конечно, сможем добавлять записи с помощью интерфейса программы, но логичнее начать именно с отображения постов, нежели с их добавления. Поэтому первую примитивную запись в базу данных добавим вручную через графический интерфейс (у меня это снова будет SQLPro Lite).

• Открываем базу данных. 

• Выбираем таблицу, которую мы создали в предыдущем уроке.

• Переходим во вкладку Data, чтобы управлять данными в таблице.

• Нажимаем на кнопку +, чтобы добавить новую строку в таблицу. 

• Заполняем все поля в новой строке, включая userId (пока пусть будет 1). Изображение не трогаем. 

Да, пользователей у нас нет, и мы прямо сейчас создадим шаблонную таблицу с ними:

• Нажимаем на кнопку создания новой таблицы. 

• Вводим название, например Users.

• В схему добавляем userId и name. 

• Затем добавляем первого пользователя с любым именем (у меня будет Gilbert Grape).

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

Создаем интерфейс для отображения постов в нашем блоге

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

Настраиваем endpoint

• Создаем в папке routes нашего проекта директорию api (здесь будут храниться точки доступа к базе данных).

• В папке api создаем файл с названием endpoint.json.js. 

• Создаем запрос к постам через синхронную функцию. 

1. Мы используем import db from '$lib/database.js', чтобы импортировать базу данных в нашу точку доступа. 

2. Затем создаем и экспортируем функцию get для получения данных: export const get = () => \{}.

3. В тело функции добавляем посты. Мы будем добавлять их при помощи better-sqlite3. Для этого в библиотеке есть функции prepare и all. Чтобы вытащить все данные сразу, мы напишем const posts = db.prepare('SELECT * FROM Posts').all(). Звездочка в запросе означает «любые данные», а Posts – название таблицы в нашей базе.

4. Затем мы возвращаем полученные данные, забросив переменную posts в return функции get. Это будет выглядеть так: return {body: {posts}}.

Готово, мы создали точку доступа, которая запрашивает данные и возвращает их в формате JSON (то, что нам нужно). 

Пишем функцию для загрузки постов

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

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

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

В Svelte сначала нужно создать блок <script> – в него погружается вся логика компонента. Только в этот раз нужно пометить его как модуль, добавив атрибут context="module". Внутри блока:

1. Создаем и экспортируем функцию load, добавив туда в качестве аргумента метод fetch – export const load = async ({fetch}) => {}.

2. В теле функции создаем константу res, в которой будет храниться ответ от запроса к точке доступа, как только он будет готов: const res = await fetch("/api/endpoint.json").

3. Затем создаем еще одну константу с ответом, преобразованным в JSON-формат. Это необязательно, но повышает читаемость кода. Выглядит она так: const data = await res.json().

4. Затем возвращаем из этой функции преобразованные данные, но уже в качестве пропсов (специальных свойств, которые могут считываться компонентами Svelte): return {props: {data}}.

Пишем функцию для отображения постов на странице

Продолжаем писать код в том же компоненте.

Сначала нам нужно создать еще один блок <script>, но уже не модуль. И в него вписываем одну пустую переменную: 

export let data

Она будет принимать пропсы из модуля и сохранять их в соответствующую переменную.

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

• Сначала создаем новый файл в той же директории, где хранится index.svelte. Назовем его Post.svelte (большая буква принципиальна; без капитализации компилятор не поймет, что речь идет о компоненте).

• Новый файл пока оставляем пустым, а в index.svelte прописываем импорт нашего компонента: 

import Post from './Post.svelte'

• Затем нужно настроить перебор всех элементов в массиве data.posts (там хранятся названия и текст наших постов). Для этого пропишем конструкцию #each, созданную специально для Svelte. А также добавляем сам компонент в код с нужными аргументами: 

<Post \{...post} />

• Таким образом мы подбираемся к информации в posts (в объекте data) и «распространяем» свойства объекта на компонент Post, где их и обработаем. 

Теперь нужно изменить содержимое компонента Post.

• Открываем блок <script>, чтобы прописать в него логику. Просто создаем две внешние переменные для названия и тела поста.

• А затем отражаем их в разметке компонента, добавив строки: 

<h2>{title}</h2> 

и

<p>{body}</p> 

• При желании можно подписать оба элемента.

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

Добавляем стили

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

Сделал небольшой отступ с помощью p-4 (это padding). Текст заголовка сделал синим, крупным и жирным (свойства text-blue-600, font-bold и text-4xl соответственно). И немного отдалил тело статьи при помощи mb-4 (это margin-bottom). 

У тела статьи я поменял только цвет. 

Делаем коммит

Возвращаемся в командную строку и снова вводим команды:

git add

А потом:

git commint -m 'feat: add interface for posts'

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

Вместо заключения

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

Продолжение: Блог на Svelte. Часть 3: Добавляем новые посты