Рубрики
Без рубрики

Как создать приложение для локатора магазина с помощью Vuejs, Cosmic JS и карты Google.

Приложение для хранения локатора с использованием Vue.js, Cosmic JS и Google Maps.

Автор оригинала: Mohamed Termoul.

Создание приложения для хранения Locator с использованием Vue, Cosmic JS и Google Maps

TL; DR:

Демонстрация

Исходный код (GitHub)

Cosmic JS Backeng Funcion

Google Maps JavaScript API

Vue js и vuex

Vue-Google Maps

вступление

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

Бэкэнда

Использование Cosmic JS может сохранять вам много времени, потому что он позволит вам сохранить ваши данные, а также иметь API для отдыха без каких-либо дополнительных кодировков. С целью этого приложения я использовал следующие особенности Cosmic JS:

  • Ведные объекты: для хранения данных на бэкэнде, как города, состояния, где доступны магазины.
  • Ведро СМИ: Для хранения изображений приложений и значки Google Maps. Это очень удобно иметь данные и средства массовой информации, хранящиеся в одном месте.
  • Веб-хостинг: Для проведения моего приложения я использовал Cosmic JS, однако вы также можете использовать Cosmic JS для развертывания вашего приложения в другие услуги хостинга.

Dashboard 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

import Vue from 'vue'
import Vuex from 'vuex'
import VueResource from 'vue-resource'
import Cosmic from '../api/cosmic'

Vue.use(Vuex)
Vue.use(VueResource)

export default new Vuex.Store({
    state: {
        userLocation: {},
        selectedLocation: {},
        selectedStore: null,
        availableLocations: {},
        stores: []
    },
    getters: {
        ...
    },
    mutations: {
        ...
    },
    actions: {
        ...
    }
})

Нам нужно позвонить в Cosmic JS REST API, когда приложение создано для извлечения городов, которые будут использоваться в поисках. Таким образом, в коде ниже двух вещей стоит упомянуть. Сначала мы являемся компонентом инициализированными VuegoOglemaps с Google_api_key который предоставляется из Консоль API Google Отказ Во-вторых, мы называем Это. $ store.dispatch ('fetchcities') Заполнить Доступность В файле хранилища Vuex. Мы также можем позвонить Это $ Store.dispatch ('fetchstorecardimages') Это позвонит API COSMIC JS REST, чтобы получить все изображения, хранящиеся в папках медиа.

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import VueGoogleMaps from 'vue-googlemaps'
import 'vue-googlemaps/dist/vue-googlemaps.css'
import App from './App'
import router from './router'
import store from './store'

Vue.use(Vuetify)

Vue.use(VueGoogleMaps, {
    load: {
        // put your google API key either in the ./config/local.env.js file or just hardcode in the string below
        apiKey: process.env.VUE_APP_GOOGLE_API_KEY || '',
        libraries: ['places'],
        useBetaRenderer: false
    }
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '',
    created () {
        this.$store.dispatch('fetchMapIcons')
        this.$store.dispatch('fetchCities')
        this.$store.dispatch('fetchStoreCardImages')
    }
})

Это код, чтобы позвонить, чтобы настроить Cosmic JS REST API. Вы можете получить API Read, и записывайте клавиши после регистрации, и добавьте свое ведро.

const config = {
    bucket: {
        slug: process.env.COSMIC_BUCKET || 'store-locator',
        read_key: process.env.COSMIC_READ_KEY,
        write_key: process.env.COSMIC_WRITE_KEY
    },
    object_type: 'cities'
}

export default config

Ведро – корневой контейнер для всех данных, файлов, изображений для вашего приложения.

import Cosmic from 'cosmicjs'
import Config from './config'

export default Cosmic().bucket(Config.bucket)

В коде ниже, как вы можете видеть в FetchCities Действие, которое мы называем Cosmic JS API, чтобы выбрать все объекты типовых городов и петлей через массив результатов и создать еще один объект для популярного магазина Доступность Переменная, которая, в свою очередь, будет использоваться в компоненте поиска поиска для отображения списка доступных местоположений.

...
actions: {
        ...
        fetchCities ({commit, dispatch, state}) {
            // will populate the cities from cosmic js REST API
            const params = {
                type_slug: 'cities'
            }
            Cosmic.getObjectsByType(params)
                .then(data => {
                    let locations = {}
                    let country = ''
                    data.objects.forEach(city => {
                        const cityKey = city.slug.toUpperCase()
                        const stateKey = city.metadata.state.slug.toUpperCase()
                        ...
                        locations[stateKey][cityKey].city = city.title
                        locations[stateKey][cityKey].state = city.metadata.state.title
                        locations[stateKey][cityKey].postalCode = city.metadata.postal_code
                        locations[stateKey][cityKey].dataUrl = city.metadata.data_url
                        locations[stateKey][cityKey].country = country
                        locations[stateKey][cityKey].geoPoint = {
                            latitude: city.metadata.lat,
                            longitude: city.metadata.lng
                        }
                    })
                    commit('SET_AVAILABLE_LOCATIONS', locations)
                    // set the initial default location
                    dispatch('updateSelectedLocation', {state: 'FL', city: 'ORLANDO', postalCode: '32821'})
                })
                .catch(err => {
                    console.log(err)
                })
        }
    }

Также очень похожи, мы можем назвать Cosmic JS REST API для привлечения изображений и хранить их в магазине Vuex, используя Cosmic.getmedia (...)

...
action: {
  ...
  fetchStoreCardImages ({commit}) {
      // will get the images from Cosmic js media folder and store in vuex
      const params = {
          folder: 'store-card-images'
      }
      Cosmic.getMedia(params)
          .then(data => {
              commit('SET_STORE_CARD_IMAGES', data.media)
          })
          .catch(err => {
              console.log(err)
          })
  }
  ...
}

Добавление Google Map в ваше приложение Vue

Чтобы отобразить карту, я использовал Vue-googlemaps Компонент, который легко использовать Vue компонент, который действует как обертка вокруг Google Maps JavaScript API Отказ Для того, чтобы нарисовать карту, вам нужно предоставить Mapcenter точка, который является геокодом определенного местоположения. Например, Orlando Center Downtown есть следующие геоподъемники {широта: 30.325974, долгота: -81.660454} Отказ Также, чтобы нарисовать маркер на карте, которая представляет собой магазин или специальное расположение, вам нужен геоподъемник, заголовок и значок. С целью этого приложения я сохранил геолокацию разных городов, а магазины в Cosmic JS Backend.

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

Google Maps показывает геолокацию выбранной точки

Вот код для нарисования карты при запуске приложения