Skip to content

PinItDown — это прогрессивное веб-приложение, позволяющее создавать, просматривать и управлять заметками, привязанными к географическим координатам. Пользователь кликает на интерактивной карте, указывает место, добавляет заголовок и содержание заметки, после чего сохраняет её.

License

Notifications You must be signed in to change notification settings

L00kAhead/pwa-map

Repository files navigation

PinItDown

PinItDown — это прогрессивное веб-приложение (PWA), которое предоставляет пользователю удобный интерфейс через файл index.html, стилизованный с помощью style.css. Основная логика приложения реализована в app.js, который отвечает за операции создания, чтения, обновления и удаления заметок (CRUD). Эти заметки сохраняются локально в браузере с помощью localStorage, что обеспечивает их сохранность между сессиями. Для отображения интерактивной карты используется библиотека Leaflet.js, позволяющая пользователю прикреплять заметки к определённым географическим точкам. Чтобы обеспечить работу в офлайн-режиме и ускоренную загрузку, в app.js регистрируется service worker (service-worker.js) — фоновый скрипт, который перехватывает все сетевые запросы на ресурсы приложения (HTML, CSS, JS, тайлы карты и др.).

Процесс работы следующий:

  • Сначала service worker проверяет, есть ли нужный ресурс в кэше (используется Cache API).
  • Если ресурс уже закэширован — он немедленно возвращается приложению, обеспечивая быстрый отклик и работу без подключения к сети.
  • Если ресурс отсутствует в кэше — он загружается из интернета, может быть сохранён в кэш, а затем передаётся приложению.

Файл manifest.json содержит метаданные (название, иконки, цвет темы, стартовая страница и др.), благодаря которым приложение можно установить на устройство.

Диаграмма, показывающая компоненты приложения и его рабочий процесс

how the app works

Используемые Технологии

  • HTML5
  • CSS3 (с адаптивным подходом "mobile-first")
  • JavaScript (ES6+)
  • Node.js для локального запуска сервера
  • Leaflet.js - Библиотека для интерактивных карт
  • OpenStreetMap - Поставщик картографических данных
  • Принципы Progressive Web App (PWA):
    • Service Worker для кэширования и офлайн-поддержки.
    • Web App Manifest для возможности установки и свойств PWA.

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

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

    git clone https://github.com/L00kAhead/pwa-map.git
  2. Перейдите в папку проекта:

    cd pwa-map

    Убедитесь, что все файлы там.

  3. Установите Node.js, если у вас его еще нет. Скачайте Node.js

  4. Установите один из локальных серверов для запуска приложения:

  • Вариант 1: установите live-server глобально и запустите его:

    npm install -g live-server
    live-server

    После запуска сервер откроется по адресу 127.0.0.1:8080 или другому доступному порту.

  • Вариант 2: используйте http-server:

    npm install -g http-server
    http-server -c-1
  • Альтернатива: если вы используете VS Code, установите расширение Live Server, затем щелкните правой кнопкой мыши файл index.html и откройте его с помощью Live Server. Приложение откроется в браузере автоматически.

Если все пойдет правильно, вы увидите этот экран: home screen

Как Использовать Приложение

  1. Разрешение Геолокации (Опционально): Если браузер запросит, разрешите доступ к вашему местоположению для центрирования карты. В противном случае карта будет отцентрирована на координатах по умолчанию.
  2. Добавление Заметки:
    • Кликните в любом месте на карте, чтобы выбрать местоположение. Координаты автоматически появятся в форме.
    • Введите "Title" (Заголовок) и "Content" (Содержание) для вашей заметки в форме.
    • Нажмите "Save Note" (Сохранить заметку). Заметка появится в виде маркера на карте и в списке заметок.
  3. Просмотр Заметок:
    • Заметки отображаются маркерами на карте. Кликните на маркер, чтобы увидеть всплывающее окно с заголовком и кратким содержанием.
    • Список "Notes in View" (Заметки в области просмотра) или "All Notes" (Все заметки) на больших экранах показывает детали заметок.
  4. Редактирование Заметки:
    • Кликните на маркер заметки на карте.
    • Или кликните на элемент заметки в списке (или на кнопку "Edit" (Редактировать) рядом с ним).
    • Данные заметки загрузятся в форму. Измените их и нажмите "Update Note" (Обновить заметку).
  5. Удаление Заметки:
    • Когда данные заметки загружены в форму для редактирования, нажмите кнопку "Delete Note" (Удалить заметку).
    • Или нажмите кнопку "Delete" (Удалить) рядом с заметкой в списке.
    • Подтвердите удаление при запросе.
  6. Навигация по Карте: Перемещайте и масштабируйте карту. На небольших экранах список заметок будет обновляться, показывая только заметки в текущей видимой области карты.

Скриншоты приложения

Планшет/Просмотр на большом экране Вот как это выглядит на смартфоне Временный значок. При нажатии на карту
Форма для создания заметки После создания заметки она будет выглядеть на карте так Редактировать заметку
Заметки хранятся в localStorage Ресурсы кэшируются в хранилище

Структура Проекта

.
├── app.js
├── diagram
│   └── pid-pwa.png
├── icons
│   ├── icon-144x144.png
│   ├── icon-152x152.png
│   ├── icon-192x192.png
│   ├── icon-512x512.png
│   ├── icon-72x72.png
│   ├── icon-96x96.png
│   └── mark.png
├── index.html
├── manifest.json
├── readme.md
├── screenshots
│   ├── cacheStorage.png
│   ├── edit-delete-note.png
│   ├── homescreen.png
│   ├── localStorage.png
│   ├── mobile-view.png
│   ├── multiple-notes.png
│   ├── note-form.png
│   ├── tap-to-see-created-note.png
│   └── temp-icon.png
├── service-worker.js
└── style.css

Лицензия

Этот проект распространяется под лицензией MIT. Подробности смотрите в файле LICENSE.

Обратная связь и вклад

Если у вас есть предложения, баг-репорты или вы хотите внести вклад в развитие приложения, создайте issue или pull request в репозитории на GitHub.

About

PinItDown — это прогрессивное веб-приложение, позволяющее создавать, просматривать и управлять заметками, привязанными к географическим координатам. Пользователь кликает на интерактивной карте, указывает место, добавляет заголовок и содержание заметки, после чего сохраняет её.

Topics

Resources

License

Stars

Watchers

Forks