Weather App v1.0.0

Приложение для просмотра погоды с интерактивным интерфейсом и поддержкой тем.

Описание

Это веб-приложение отображает текущую погоду, почасовой и недельный прогноз с использованием API WeatherAPI.com. Современный адаптивный интерфейс построен на Tailwind CSS с поддержкой светлой и темной тем.

Функциональность

• Текущая погода: температура, влажность, скорость ветра, описание условий
• Таймлапс: почасовой прогноз погоды на день с визуализацией
• Недельный прогноз: погода на 7 дней вперед
• Интерактивные графики: температура и осадки с помощью Chart.js
• Адаптивный дизайн: корректное отображение на всех устройствах
• Выбор городов: предустановленный список российских городов
• Система тем: светлая, темная и автоматическая (по системным настройкам)
• Анимации: плавные переходы и hover-эффекты
• PWA (Progressive Web App): установка как нативное приложение, оффлайн режим с кэшированием данных
• Оффлайн поддержка: отображение погодных данных при отсутствии интернета
• Мобильная версия: возможность сборки в APK для Android через Capacitor или PWABuilder

Технологии

Backend

• Node.js v8+ (устаревшая версия, рекомендуется обновить до LTS)
• Express.js v4.17.1 - веб-сервер
• Service Worker - кэширование и оффлайн поддержка

Frontend

• HTML5 - семантическая разметка
• JavaScript (Vanilla) - клиентская логика
• Tailwind CSS v3.4.16 - утилитарный CSS фреймворк
• PostCSS v8.5.6 - обработка CSS
• Autoprefixer v10.4.21 - вендорные префиксы
• Capacitor v7.4.3 - фреймворк для мобильной разработки
• Sharp v0.34.4 - обработка изображений и иконок

Библиотеки и CDN

• Lucide Icons - современные SVG иконки
• Swiper.js v11 - слайдер для таймлапса
• Chart.js - построение графиков
• Google Fonts (Inter) - шрифты

Стилизация

• CSS переменные для тематизации
• Плавные анимации переходов
• Цветовые схемы для разных погодных условий

Установка и запуск

Системные требования

• Node.js v8+ (⚠️ устаревшая версия, рекомендуется использовать LTS версию Node.js 18+)
• npm для управления пакетами

Установка

1. Клонируйте репозиторий:

   git clone <repository-url>
   cd weather-app
   

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

   npm install
   

3. Соберите CSS (если необходимо):

   npm run build-css
   

4. Запустите сервер:

   npm start
   

5. Откройте браузер: Перейдите по адресу http://localhost:3000

6. Установка как PWA (опционально): В браузере нажмите "Установить приложение" или добавьте на домашний экран для полноэкранного режима.

Доступные скрипты

• npm start - запуск сервера разработки
• npm run build-css - сборка Tailwind CSS из input.css в output.css
• npm run watch-css - автоматическая пересборка CSS при изменениях

PWA и мобильная версия

Progressive Web App (PWA)

Приложение поддерживает установку как PWA на устройствах с современными браузерами:

• Кэширование: приложение кэширует статические ресурсы и данные API для оффлайн доступа
• Service Worker: обеспечивает работу приложения в оффлайн режиме
• Манифест: позволяет установить приложение на домашний экран мобильных устройств

Сборка мобильного приложения

Приложение можно собрать в нативное мобильное приложение для Android:

Используя Capacitor

1. Установите Capacitor CLI (если не установлен):

   npm install -g @capacitor/cli
   

2. Добавьте платформы:

   npx cap add android
   

3. Соберите веб-ресурсы:

   npm run build-css
   

4. Синхронизируйте с Capacitor:

   npx cap sync android
   

5. Откройте в Android Studio:

   npx cap open android
   

6. Соберите APK в Android Studio или через командную строку.

Подробные инструкции см. в файле APK_instructions_Capacitor.md.

Используя PWABuilder

Онлайн-сервис PWABuilder позволяет конвертировать PWA в мобильное приложение без установки дополнительного ПО.

Подробные инструкции см. в файле APK_instructions_PWABuilder.md.

API и внешние сервисы

• WeatherAPI.com - источник данных о погоде
• Google Fonts API - загрузка шрифтов Inter
• CDN сервисы для библиотек JavaScript (jsDelivr, unpkg)

Разработчик

Разработано: Fovway

Контакты:

• Email: admin@fovway.ru

Рекомендации

Обновление Node.js

Текущая конфигурация требует Node.js v8, но рекомендуется использовать актуальную LTS версию (18+) для повышения безопасности и производительности.

Настройка API ключа

Для полноценной работы приложения необходимо:

1. Зарегистрироваться на WeatherAPI.com
2. Получить бесплатный API ключ
3. Добавить ключ в переменные окружения или конфигурацию сервера(server.js - const API_KEY = "API_KEY_HERE";)

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

• Приложение использует CDN для внешних библиотек, что обеспечивает быструю загрузку
• CSS собирается с помощью Tailwind CSS для оптимального размера файлов
• Используйте npm run watch-css во время разработки для автоматической пересборки стилей

Лицензия

MIT