Кажется, дождь собирается. Пишем приложение для отслеживания прогноза погоды30.04.2024 11:15
В статье рассмотрим, как сделать простое приложение погоды без дизайн-макета. Поработаем с HTML, CSS, JavaScript, Vue, Vite, подключением API, а также развернем проект на облачном сервере. Подробности под катом!
Используйте навигацию, если не хотите читать текст полностью:
→ Начало работы с Vite → Верстка приложения → Подготовка фреймворка Vue → Деплой проекта → Заключение
Начало работы с Vite
В качестве инструмента сборки будем использовать Vite. С его помощью мы легко запустим любой JavaScript-фреймворк.
Первым шагом установим Vite. Создаем папку на компьютере, которая будет сохранять данные проекта, и переносим ее в редактор кода VS Code. Далее открываем терминал и вводим код, чтобы создать проект из шаблона:
npm create vite@latest
Теперь добавим в проект необходимые пакеты. Для этого нужно дать согласие системе — пишем «y» и нажимаем Enter.
В ответ получаем конфигурационные файлы и строку Project name. В ней указываем имя будущего проекта. У меня — weather, но можно назвать по-другому. Нажимаем Enter, чтобы продолжить установку.
Далее выбираем необходимый фреймворк и язык программирования. В нашем случае — Vue и JavaScript.
После — вводим в терминал три команды, чтобы начать работу над проектом:
cd weather
npm install
npm run dev
В результате получаем ссылку localhost. Переходим по ней и видим стандартную страницу:
Верстка приложения
На странице Vite и Vue нужно убрать все лишнее, заполнить ее разметкой и стилями будущего проекта. Это поможет понять, как он будет выглядеть и с какими элементами нам придется работать.
Сейчас проект состоит из следующих файлов и папок:
Обратите внимание на папку src — именно с ней мы будем работать. При этом все изменения данных будут отражаться в браузере в момент разработки.
Внутри src есть две папки — assets и components. Поскольку мы делаем простое приложение, предлагаю удалить последнюю папку и ее содержимое. На реальных проектах этого делать не рекомендую, но в нашем случае она ни на что не повлияет. В assets удаляем лишнее изображение формата svg. Саму папку не трогаем.
Далее открываем файл App.vue, в котором отражены ошибки. Они появились из-за того, что мы удалили папку components. Нам внутреннее содержимое файла не потребуется, поэтому просто удалим его. В результате файл должен быть пустым.
Теперь переходим к созданию разметки. Указываем основные теги template, внутрь добавляем div с классом weather и ниже размещаем скрипт:
В div добавляем класс с контейнером, чтобы разместить поисковую строку, кнопку и информацию о погоде. Ниже — класс weather-bg для хранения изображений.
Phuket
30°C
Sunny
Заранее сохраняем картинку, которая будет отображаться при загрузке приложения. Для остальных описываем разные состояния погоды. За основу возьмем overcats (пасмурно), partly cloudy (переменная облачность) и sunny (солнечно). Подходящие фоны можно найти на любом сервисе стоковых изображений.
Все изображения переносим в папку assets. В файл style.css добавляем основные стили. Подключаем шрифт, прописываем переменные и указываем стандартные сбросы.
Далее стилизуем блок с контентом. Центрируем его посередине экрана, указываем возможность изменения фона и прописываем функцию добавления классов, чтобы они могли меняться в зависимости от типа погоды.
Стиль для разных типов погоды. Для примера рассмотрим солнечную (sunny), но вы можете установить несколько вариантов и подобрать несколько состояний — вместо sunny нужно будет записать другие варианты:
Ранее мы запустили инструмент сборки Vite. Вся структура приложения уже подготовлена за нас. Осталось внести изменения в разметку и дописать скрипты.
Информацию о погоде будем получать из реальных источников. Для этого воспользуемся любым бесплатным API. В нашем случае — Weather API.
Переходим на сайт и авторизируемся, чтобы получить ключ для работы с API. Открываем файл App.vue. Нас интересует блок:
В нем прописываем основную структуру кода.
В data будем управлять полученными данными.
В computed пропишем изменения фона приложений, в зависимости от типа погоды.
В methods подключим API и изменения в работе приложения.
Чтобы передавать приложению погодные характеристики из API, нужно открыть доступ к изменению данных. Для этого используем интерполяцию. В div указываем названия необходимых значений, а в script добавляем функцию, которая возвращает их в объект данных, data ().
Подключаем API для сбора данных о погоде и добавляем два условия. Сначала необходимо обработать поисковый запрос, затем — сбросить введенную фразу из .
Поскольку в catch указаны значения loading и error, их также необходимо добавить в ветку data (). Это позволит отображать строку загрузки и планировать вывод ошибок на случай, если API перестанет обрабатывать данные через поиск.
Для изменения фона добавим : class в div, куда установлен класс weather.
Далее пишем функцию, после которой появятся дополнительные классы напротив div. И это только в том случае, если в {{ description }} отображается соответствующее описание.
Напомню, что мы описывали только три состояния погоды, но таких значений может быть больше. Не забудьте подготовить фоны для каждого нового состояния.
Готово, мы сделали простое приложение по прогнозу погоды с нуля!
Деплой проекта
Сейчас готовый результат не увидит никто, кроме нас. Чтобы это исправить, перенесем его на облачный сервер Selectel.
В файле vite.config.js добавляем строку base: './' внутри export default defineConfig ({ … }). Это позволит в build проекта отразить верные пути файлов.
Вводим в терминале команду npm run build, после которой появится папка dist. В ней будут формироваться итоговые данные проекта. Файлы оттуда выгрузим на облачный сервер.
В панели управления нужно создать аккаунт или авторизоваться, если у вас уже есть учетная запись. Внутри выбираем Облачная платформа и нажимаем Создать сервер.
В настройках указываем имя проекта и устанавливаем минимальную конфигурацию. Для работы нашего приложения много мощностей не нужно.
После установки конфигурации спускаемся вниз и нажимаем Создать.
Возвращаемся в панель управления и переходим в консоль созданного сервера. Для входа нужен логин (root) и пароль. Нажимаем ЛКМ по иконке Горячие клавиши и добавляем сгенерированный пароль.
В терминале вводим набор команд, чтобы загружать файлы на облачный сервер по FTP-протоколу.
1. Устанавливаем FTP-сервер (vsftpd):
sudo apt update
sudo apt install vsftpd
2. Настраиваем доступ. Для этого редактируем файл конфигурации FTP-сервера:
sudo nano /etc/vsftpd.conf
3. Проверяем параметры конфигурации. Они должны быть установлены или раскомментированы и иметь указанные значения:
С помощью IP-адреса, имени пользователя и пароля вы можете войти в FTP-клиент, чтобы подключить приложение к FTP-серверу. Остается только перенести туда готовые файлы из папки dist.
Готово! Сайт доступен по адресу 46.148.229.29:
Заключение
В инструкции наглядно показали, как создать простое приложение для мониторинга погоды. Не бойтесь с ним экспериментировать — добавлять новые функции и улучшать дизайн. Это поможет прокачать навыки и пополнить портфолио новыми проектами.
А чтобы снизить затраты на обслуживание приложения, советуем присмотреться к виртуальной машине из линейки Shared Line. Оплата производится только за потребленные мощности по модели pay-as-you-go.