TL;DR:
вступление
Это небольшое приложение можно использовать, чтобы позволить пользователям искать и находить ваши магазины. Если магазины не имеют отношения к вашему бизнесу, вы можете найти свои офисы, филиалы, склады… или что-то еще, чем занимается ваш бизнес. Чтобы эта работа работала, вам необходимо определить список ваших местоположений, которые пользователь может найти и определить.
Бэкэнд
Использование Cosmic JS может сэкономить вам много времени, потому что это позволит вам хранить ваши данные, а также иметь готовый REST api без какого-либо дополнительного кодирования. Для этого приложения я использовал следующие возможности Cosmic JS:
- Объекты корзины: для хранения данных на сервере, таких как города, штаты, где доступны магазины.
- Bucket Media: для хранения изображений приложений и значков карт Google. Это очень удобно, когда данные и носители хранятся в одном месте.
- Веб-хостинг: для размещения своего приложения я использовал Cosmic JS, однако вы также можете использовать Cosmic JS для развертывания своего приложения в других службах хостинга.
Запуск вашего приложения vue
После установки vue-cli вы можете запустить следующие команды, чтобы начать сборку вашего приложения.
$ npm install -g vue-cli $ vue init webpack store-locator $ cd store-locator $ npm install $ npm install --save vuex vuetify vue-router vue-resource vue-googlemaps cosmicjs moment $ npm run dev
Приложение vue будет состоять из двух основных компонентов:
- SearchPanel.vue: позволяет пользователю выбрать город и получить список магазинов
- MapPanel.vue: отображать соответствующую карту с маркером для каждого магазина
Вы можете легко создать макет приложения с сеткой vuetify без необходимости писать много CSS.
Добавление управления состоянием с помощью Vuex и Cosmic JS
Нам нужно вызвать Cosmic JS rest api при создании приложения для получения городов, которые будут использоваться в поиске. Итак, в приведенном ниже коде стоит упомянуть две вещи. Сначала мы инициализируем компонент VueGoogleMaps с GOOGLE_API_KEY, который предоставляется из консоли google api. Во-вторых, мы вызываем this.$store.dispatch('fetchCities'), чтобы заполнить availableLocations в файле хранилища vuex. Мы также можем вызвать this.$store.dispatch('fetchStoreCardImages'), который вызовет Cosmic JS REST api для получения всех изображений, хранящихся в папках Media.
Это код для настройки Cosmic JS REST API. Вы можете получить доступ к API для чтения и записи ключей после регистрации и добавления своего сегмента.
Bucket - это корневой контейнер для всех данных, файлов и изображений вашего приложения.
В приведенном ниже коде, как вы можете видеть в действии fetchCities, мы вызываем Cosmic JS api, чтобы выбрать все объекты типа «города», пройти цикл по массиву результатов и создать еще один объект для заполнения переменной store availableLocations, которая, в свою очередь, будет использоваться в компоненте SearchPanel. для отображения списка доступных мест.
Также очень похожим образом мы можем вызвать Cosmic JS REST Api для извлечения изображений и сохранения их в магазине Vuex, используя Cosmic.getMedia(...)
Добавление карты Google в ваше приложение vue
Для отображения карты я использовал компонент vue-googlemaps, который представляет собой простой в использовании компонент Vue, который действует как оболочка для Google Maps Javascript API. Чтобы нарисовать карту, вам необходимо указать точку mapCenter, которая является геокодом определенного местоположения. Например, центр Орландо в центре города имеет следующую геоточку {latitude: 30.325974,longitude: -81.660454}. Кроме того, чтобы нарисовать на карте маркер, представляющий магазин или особое место, вам понадобится геоточка, заголовок и значок. Для этого приложения я сохранил геолокацию разных городов и магазинов в бэкэнде Cosmic JS.
Вы можете спросить, как мне получить геолокацию для моего домашнего адреса или рабочего офиса. Есть несколько сервисов, которые могут конвертировать обычный адрес в геолокацию и наоборот. Но самый простой способ - открыть Карты Google и щелкнуть любую точку на карте. Затем вы увидите внизу географическую точку этого места.
Вот код для рисования карты при запуске приложения
В компоненте MapPanel vue мы используем vue-googlemaps для отображения карты Google. Все, что мы должны предоставить, это mapCenter, zoom, mapMarkers. У нас есть пара наблюдателей, которые обновляют карту. Первый - это selectedLocation, который срабатывает всякий раз, когда пользователь выбирает новый город из SearchPanel. Мы также следим за stores, чтобы заполнить карту маркерами, которые отображают маленькие значки для каждого магазина в этом месте. Также мы следим за тем, чтобы selectedStore сделал соответствующий маркер на карте выделенным. Вот как мы обновляем вид карты
И, наконец, нам просто нужно добавить пару событий на карту. Первое событие onMapMarkerClick для выделения значка маркера, а также выделения соответствующего магазина на панели поиска. onMapMarkerMouseOver, чтобы добавить небольшую анимацию, заставляющую значок прыгать вверх и вниз.
Сборка и развертывание
После создания и тестирования приложения вам необходимо добавить файл .env в корневую папку, чтобы иметь конфигурацию приложения, которая выглядит примерно так.
GOOGLE_API_KEY=PASTE-YOUR-API-KEY-HERE COSMIC_BUCKET=store-locator COSMIC_READ_KEY=PASTE-YOUR-API-KEY-HERE COSMIC_WRITE_KEY=PASTE-YOUR-API-KEY-HERE PORT=5000
Вам также необходимо добавить команду start в скрипт package.json, который будет использоваться хостингом Cosmic JS для запуска вашего сервера приложений. После обновления ключей Api вы можете просто собрать и развернуть Cosmic JS, используя следующие команды
$ # to run you app on dev mode $ npm run dev $ # to test your production server mode $ npm run start $ # to build your application before deployment $ npm run build $ # commit all changes to github $ git add . $ git commit -m 'Before deployment' $ git push
Теперь вы можете просто перейти на веб-хостинг Cosmic JS и следовать инструкциям по развертыванию приложения.
Заключение
Добавление карт Google в ваше приложение - интересный и простой способ улучшить взаимодействие с пользователем. Использование Vue.js для этого приложения также сэкономило много времени. Однако с Cosmic JS я смог создать приложение полного стека с сервером Rest Api без дополнительного кодирования. Я считаю, что Cosmic JS - отличная облачная платформа, которая может ускорить вашу разработку без лишнего кодирования.
Я хотел бы услышать от тебя
Наконец, я рекомендую вам просмотреть исходный код, попробовать приложение и сообщить мне, если у вас возникнут какие-либо вопросы или комментарии ниже.
Продолжайте создавать отличные приложения.
Ваше здоровье.
