В этом руководстве мы покажем вам, как создать гибридное приложение Stock Management с использованием JavaScript и Framework7 с Monaca. Цель этого приложения - продемонстрировать, как объединить эти технологии с другими элементами, такими как плагины Cordova, Leaflet JS, база данных Firebase и Yahoo API. Если вы не слышали или не использовали какие-либо из вышеперечисленных технологий, не беспокойтесь - я свяжу здесь необходимую информацию о них.

Приложение имеет три вкладки и левую панель навигации.
Реализованные страницы:

  1. Главная, где отображаются все добавленные продукты.
  2. Поиск, где можно искать определенные продукты.
  3. Продукт Список имеет те же функции, что и Домашняя страница.
  4. Список магазинов, где отображаются все добавленные магазины.
  5. Новый магазин, где можно добавить новый магазин.
  6. Новый продукт, куда можно добавить новый продукт.

Файлы JS:

  1. app.js содержит инициализацию приложения для Framework7 и другие общие функции, используемые для изменения данных.
  2. config.js включает конфигурации для базы данных Firebase.
  3. database.js содержит методы для Firebase Db.
  4. localStorage.js если база данных Firebase не инициализирована, мы собираемся сохранить наши данные в локальном хранилище. Этот файл содержит методы для этого.
  5. routes.jsимеет необходимые маршруты для навигации.

Вы можете скачать проект полностью из этого репозитория GitHub. Также настоятельно рекомендуется сначала взглянуть на структуру. Демонстрационная версия приложения также доступна здесь, но имейте в виду, что некоторые функции не работают должным образом в веб-браузерах. Чтобы правильно установить и протестировать приложение, обратитесь к разделу Создание приложения этой статьи.

Из-за размера и длины приложения в этом руководстве мы познакомим вас только с основными функциями и реализациями.

Начнем с некоторых определений

Если вы уже использовали эти технологии, вы можете перейти к следующему разделу.

Monaca - - это облачная среда разработки мобильных приложений, которая поддерживает гибридные приложения iOS / Android / ПК в одном источнике. Созданный с использованием Apache Cordova с открытым исходным кодом, он предоставляет ресурсы, включая Cloud IDE, локальные инструменты разработки, отладчик и внутреннюю поддержку.

Framework7 - - это бесплатная мобильная HTML-платформа с открытым исходным кодом для разработки гибридных мобильных приложений или веб-приложений с нативным внешним видом iOS. Он очень хорошо документирован, имеет богатую экосистему, и вы можете легко создавать приложения для любой платформы. Если вы раньше не использовали Framework7, я предлагаю вам попробовать.

Плагины Cordova - Обычно вам нужен собственный код (Java для Android, Objective-C для iOS и т. д.) для доступа к встроенным функциям устройства, таким как камера, файловая система, устройство. Хранилище и т. Д. Однако вы можете получить доступ к этим встроенным функциям с помощью JavaScript с Cordova. Cordova - это набор API-интерфейсов устройства, которые позволяют разработчику мобильного приложения получать доступ к встроенным функциям устройства, таким как камера или акселерометр, из JavaScript. Monaca использует Cordova, чтобы позволить вашим гибридным приложениям получать доступ к собственным функциям устройства из JavaScript.

Leaflet - - это ведущая библиотека JavaScript с открытым исходным кодом для интерактивных карт, удобных для мобильных устройств. Он эффективно работает на всех основных настольных и мобильных платформах, может быть расширен с помощью множества плагинов, имеет красивый, простой в использовании и хорошо документированный API и простой, читаемый исходный код.

Yahoo (Япония) - Yahoo シ ョ ッ ピ ン グ API позволяет создавать и дополнять приложения, напрямую используя крупнейшую в Японии базу данных продуктов.

Firebase - База данных реального времени - это база данных, размещенная в облаке. Данные хранятся в формате JSON и синхронизируются в реальном времени с каждым подключенным клиентом. Облачное хранилище создано для разработчиков приложений, которым необходимо хранить и обслуживать пользовательский контент, например фотографии или видео.

Предпосылки

Теперь, когда мы говорили об используемых технологиях, взглянем на предварительные условия и установите те, которые еще не установлены на вашем ПК.

Установите Node.js
Загрузите Node.js с официального сайта, чтобы получить доступ к программе под названием npm, диспетчеру пакетов для Node.js.

Установите Monaca CLI
Лучший способ начать локальную разработку - использовать инструмент Monaca CLI, с помощью которого вы можете создать новый проект с предварительно созданным шаблоном. Позже мы также будем использовать этот инструмент для выполнения различных задач (например, отладчика).

Monaca CLI - это полнофункциональный инструмент для разработки гибридных приложений. Он совместим с Cordova CLI и значительно упрощает и ускоряет разработку.

Если вы еще не установили его, вы можете сделать это с помощью этой простой команды в своем терминале.

npm install -g monaca

Для другого варианта; вы также можете создать свой проект и следовать ему, используя Monaca Cloud IDE, если вам это больше нравится. Однако, как упоминалось ранее, в этом руководстве мы будем использовать инструмент Monaca CLI.

Создание нового проекта
Теперь, когда у нас есть готовые инструменты, давайте создадим новый проект Monaca с Framework7.

Разработка

HTML
Каждая страница имеет немного разный дизайн, и потребуется много времени, чтобы подробно объяснить все о ней. А пока скопируйте и вставьте необходимые коды в соответствующие файлы HTML. Если вы столкнулись с чем-то непонятным, обратитесь к документации Framework7.

CCS
Что касается стилизации, нам особо нечего делать, потому что Framework7 делает эту работу за нас. Что касается некоторых настроек, добавьте эти строки в app.css в папке www / css.

Плагины Cordova
В приложении мы будем использовать следующие функции:

  • Геолокация, чтобы определить местонахождение магазина.
  • Сканер штрих-кода для сканирования штрих-кода продукта.
  • Камера, чтобы сделать снимок продукта или выбрать его из галереи.

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

Большинство плагинов хорошо документированы с примерами на сайте Cordova.

Камера

openFilePicker очень похож на функцию openCamera. Единственная разница - это sourceType.

Штрих-код

Расширенный HTTP

Мы еще не говорили об Yahoo API, но чтобы избежать проблем с CORS и получить данные, мы должны использовать плагин Advanced HTTP Cordova для отправки get запроса, который принимает URL, параметры и заголовки.

Геолокация

В обратном вызове onSuccess мы создадим маркер на карте в соответствии с текущими координатами положения с помощью библиотеки Leaflet.

Буклет

Чтобы отобразить или изменить местоположение магазина, мы собираемся использовать Leaflet для отображения карт и добавления к ним пользовательских маркеров. Вы можете использовать CDN для добавления библиотеки в свой код или установить ее:

npm install leaflet

Теперь мы собираемся инициализировать и добавить карты на страницы new-shop.html и edit-shop.html.

Ранее, когда мы говорили о плагине Geolocation, мы представили функцию onSuccesscallback. Вот фрагмент кода об этом:

Он примет координаты широты и долготы и создаст маркер со всплывающим сообщением для текущего положения на карте.

Нам также нужна возможность самостоятельно выбирать место.

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

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

Хорошо, давайте взглянем на код.

Во-первых, он создает URL-адрес для получения данных с помощью ключа API и штрих-кода. Затем, как мы объясняли ранее, мы должны использовать плагин Cordova для решения проблемы перекрестного происхождения. Если данные доступны, он вернет их в виде строки JSON. Чтобы использовать его, мы должны его проанализировать. После этого мы добавим результаты в DOM.

Хранение данных
Firebase
Для сохранения данных мы в первую очередь будем использовать Firebase от Google. Чтобы настроить его, посетите официальный сайт для получения пошаговых инструкций. Если вы скопировали HTML-код из index.html в свой проект, он уже включает библиотеки Firebase до закрывающего тега </body>. Во время разработки была доступна версия Firebase 8.2.6. Посетите официальный сайт для получения более новой версии в разделах Доступные библиотеки, Доступные SDK Firebase JS (из CDN).

В config.js включите следующий код. Не забудьте заменить firebaseConfig часть на свою.

Чтобы создать новый документ Product или Shop в базе данных Firebase, у нас будет по две отдельные коллекции для каждой. Вот как мы будем добавлять данные в базу данных. Вставьте его в database.js.

В показанном ранее коде плагина камеры в конце мы добавили изображение в DOM. Теперь (в случае, если это новый продукт) мы возьмем это изображение и загрузим его в хранилище Firebase.

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

onSnapshot() прослушивает результат запроса. Это создает моментальный снимок запроса. Обработчик моментальных снимков будет получать новый моментальный снимок запроса каждый раз при изменении результатов запроса (то есть при добавлении, удалении или изменении документа). После того, как мы прочитали наши данные, их осталось добавить в DOM для отображения. Мы создадим литерал шаблона и добавим его содержимое в DOM. Этот процесс продолжается до тех пор, пока forEach не завершится.

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

Локальное хранилище
В качестве второго варианта, если Firebase не инициализирована, данные будут сохранены в локальном хранилище. В этом случае структура сохранения / редактирования / удаления очень похожа, за исключением того, что мы должны использовать разные методы.

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

  • localStorage.setItem(keyName, keyValue)
    Для добавления нового элемента или изменения одного
  • localStorage.getItem(keyName, keyValue)
    Чтобы получить элемент
  • localStorage.removeItem(keyName, keyValue)
    Чтобы удалить элемент

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

Чтобы создать приложение для отладки или выпуска, мы собираемся использовать Cloud IDE. Вы можете быстро получить доступ к странице сборки Cloud IDE из терминала, запустив следующую командную строку из папки вашего проекта или, если вы загрузили полный репозиторий GitHub, то из этой папки.

monaca remote build --browser

После успешной загрузки проекта в облако откроется новая вкладка браузера, как показано на рисунке ниже.

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

  • Выберите Android / iOS на левой панели.
  • Выберите «Сборка для отладки» в качестве типа сборки.
  • Как вариант, выберите «Пользовательский отладчик сборки».
  • Затем нажмите кнопку «Начать сборку».

Создание проекта может занять несколько минут в зависимости от его размера, плана подписки для вашей учетной записи и количества сборок в очереди перед вашим проектом. После успешной сборки вы можете установить пакет с помощью QR-кода на выбранное вами устройство.

Теперь, когда на нашем устройстве установлена ​​сборка Custom Debugger Build, мы можем протестировать наше приложение. Для синхронной разработки и тестирования я бы рекомендовал использовать команду debug интерфейса командной строки Monaca. Здесь вы можете узнать об этом подробнее.

Конец примечания

В этой статье вы познакомились с основными функциями этого примера приложения для управления запасами с использованием JS и Framework7 с использованием Monaca с добавленными надстройками и сторонних разработчиков, таких как Firebase, Leaflet и Yahoo API. Если вы все время читали, поздравляю, это было долго. Тем не менее, многие другие вещи не были рассмотрены, поэтому, если вам интересно или просто обнаружили, что некоторые части трудно понять в этой статье, не стесняйтесь проверить репо для полного кода, чтобы изучить его самостоятельно. .

Ресурсы

Https://monaca.io/
https://docs.monaca.io/en/
https://cordova.apache.org/
https : //framework7.io/
https://leafletjs.com/
https://developer.yahoo.co.jp/webapi/shopping/
https : //firebase.google.com/docs/database
https://firebase.google.com/docs/storage