💰 Семейный бюджет

Инструкция по установке

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

📋 Требования

🐘

PHP 7.4+

Версия PHP должна быть не ниже 7.4

🗄️

MySQL 5.7+ / MariaDB 10.2+

База данных для хранения информации

🌐

Веб-сервер

Apache или Nginx

🔒

HTTPS

Обязательно для работы PWA

1

Подготовка базы данных

Создайте базу данных и импортируйте схему

Через командную строку:

mysql -u root -p

CREATE DATABASE finance_app CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'finance_user'@'localhost' IDENTIFIED BY 'ваш_пароль';
GRANT ALL PRIVILEGES ON finance_app.* TO 'finance_user'@'localhost';
FLUSH PRIVILEGES;

USE finance_app;
SOURCE /path/to/database.sql;
💡

Через phpMyAdmin:

  1. Создайте базу данных finance_app
  2. Импортируйте файл database.sql
2

Настройка config.php

Откройте файл config.php и измените настройки базы данных

define('DB_HOST', 'localhost');
define('DB_NAME', 'finance_app');
define('DB_USER', 'finance_user');  // или 'root'
define('DB_PASS', 'ваш_пароль');
3

Создание иконок PWA

Для работы PWA необходимы иконки приложения

Вариант 1: Автоматическая генерация

  1. Откройте файл create_icons.html в браузере
  2. Нажмите "Сгенерировать иконки"
  3. Скачайте обе иконки (192x192 и 512x512)
  4. Поместите их в папку pwa/ как icon-192.png и icon-512.png

Вариант 2: Создание вручную

  • Создайте изображения размером 192x192 и 512x512 пикселей
  • Сохраните в формате PNG
  • Поместите в папку pwa/
4

Настройка ИИ API (опционально)

Для работы ИИ-анализа необходимо настроить API ключ

  1. Зарегистрируйтесь на DeepSeek Platform
  2. Получите API ключ в личном кабинете
  3. Добавьте в config.php:
define('AI_API_KEY', 'ваш_api_ключ');
5

Права доступа

Установите правильные права доступа к файлам

chmod 644 *.php
chmod 644 api/*.php
chmod 755 assets/js/app.js
chmod 644 pwa/*.js
chmod 644 pwa/*.json
chmod 644 pwa/*.png
6

Проверка установки

Проверьте, что все работает корректно

  1. Откройте http://ваш-домен/index.php в браузере
  2. Войдите с учетными данными по умолчанию:
    • Логин: admin
    • Пароль: admin
  3. Если все работает, обязательно смените пароль!
⚠️

Важно!

Не забудьте сменить пароль администратора после первой авторизации!

7

Смена пароля

Измените пароль администратора на безопасный

Через PHP скрипт:

php generate_password.php
# Введите новый пароль
# Скопируйте SQL запрос и выполните в MySQL

Или вручную через PHP:

<?php
echo password_hash('новый_пароль', PASSWORD_DEFAULT);
// Скопируйте результат и выполните:
// UPDATE users SET password = 'хэш' WHERE login = 'admin';

⚙️ Настройка веб-сервера

Apache

Убедитесь, что включен mod_rewrite:

sudo a2enmod rewrite
sudo systemctl restart apache2

Nginx

Добавьте в конфигурацию сайта:

server {
    listen 80;
    server_name ваш-домен.ru;
    root /var/www/finance-app;
    index index.php;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }

    location ~ /\. {
        deny all;
    }
}

🔒 Настройка HTTPS

PWA требует HTTPS для работы. Настройте SSL сертификат:

Let's Encrypt (бесплатно):

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d ваш-домен.ru

📱 Установка PWA приложения

После настройки HTTPS вы можете установить приложение на свое устройство как нативное приложение.

💻 Установка на компьютер (Windows/Mac/Linux)

Google Chrome / Microsoft Edge

  1. Откройте сайт в браузере Chrome или Edge
  2. В адресной строке найдите иконку ➕ (Установить) справа
  3. Нажмите на иконку или используйте меню браузера:
    • Chrome: Меню (⋮) → Установить "Семейный бюджет"
    • Edge: Меню (⋯) → Приложения → Установить этот сайт как приложение
  4. Подтвердите установку в появившемся диалоге
  5. Приложение появится на рабочем столе и в меню "Пуск"

Mozilla Firefox

  1. Откройте сайт в браузере Firefox
  2. Нажмите на иконку ⋮ (меню) в правом верхнем углу
  3. Выберите Установить или Добавить на главный экран
  4. Подтвердите установку

Safari (macOS)

  1. Откройте сайт в Safari
  2. В меню выберите Файл → Добавить на экран "Домой"
  3. Или нажмите кнопку Поделиться → Добавить на экран "Домой"
  4. Приложение появится в Launchpad и Applications

🤖 Установка на Android

Chrome для Android

  1. Откройте сайт в Chrome на Android
  2. В меню браузера (⋮) выберите Добавить на главный экран
  3. Или появится баннер внизу экрана с предложением установить приложение
  4. Нажмите Установить или Добавить
  5. Подтвердите установку
  6. Иконка приложения появится на главном экране

Samsung Internet

  1. Откройте сайт в Samsung Internet
  2. Нажмите на меню (☰) → Добавить на главный экран
  3. Подтвердите установку
💡

Совет:

После установки приложение будет работать в полноэкранном режиме без адресной строки браузера.

🍎 Установка на iPhone/iPad (iOS)

Safari на iOS

  1. Откройте сайт в Safari на iPhone или iPad
  2. Нажмите кнопку Поделиться (квадрат со стрелкой вверх)
  3. Прокрутите меню вниз и выберите На экран "Домой"
  4. Нажмите Добавить в правом верхнем углу
  5. Иконка приложения появится на главном экране
ℹ️

Важно для iOS:

  • PWA на iOS работает только в Safari
  • Приложение будет открываться в Safari, но без адресной строки
  • Некоторые функции PWA могут быть ограничены на iOS

✨ Преимущества установленного PWA

📱

Работает как приложение

Открывается в отдельном окне без адресной строки

🌐

Оффлайн-режим

Работает без интернета (с ограничениями)

⚡

Быстрая загрузка

Кеширование для мгновенного запуска

🔔

Уведомления

Поддержка push-уведомлений (если настроено)

💾

Экономия трафика

Кеширование ресурсов снижает потребление данных

🔄

Автообновление

Приложение обновляется автоматически

❌ Проблемы с установкой PWA

Не появляется кнопка установки:

  • Убедитесь, что используется HTTPS (не HTTP)
  • Проверьте наличие файлов manifest.json и sw.js
  • Очистите кеш браузера (Ctrl+Shift+Delete)
  • Проверьте консоль браузера (F12) на наличие ошибок

Приложение не устанавливается:

  • Убедитесь, что Service Worker зарегистрирован (проверьте в DevTools → Application → Service Workers)
  • Проверьте, что manifest.json валиден
  • Попробуйте использовать другой браузер
  • На iOS используйте только Safari

Приложение не работает оффлайн:

  • Проверьте, что Service Worker активен
  • Убедитесь, что файлы кешируются (DevTools → Application → Cache Storage)
  • Попробуйте переустановить приложение

🔧 Решение проблем

Ошибка подключения к БД

  • Проверьте настройки в config.php
  • Убедитесь, что MySQL запущен
  • Проверьте права пользователя БД

PWA не работает

  • Убедитесь, что используется HTTPS
  • Проверьте наличие manifest.json и sw.js
  • Проверьте консоль браузера (F12)

ИИ-анализ не работает

  • Проверьте API ключ в config.php
  • Убедитесь, что есть баланс на аккаунте DeepSeek
  • Проверьте логи ошибок PHP

Графики не отображаются

  • Проверьте консоль браузера
  • Убедитесь, что Chart.js загружается
  • Проверьте наличие данных в БД

✅ Чек-лист проверки

✓ Открывается страница входа
✓ Можно войти с admin/admin
✓ Отображается дашборд
✓ Можно добавить транзакцию
✓ Работает статистика
✓ PWA устанавливается
✓ Работает оффлайн-режим
✓ Темная тема переключается