Открытые общедоступные API, такие как OpenWeatherMap API, Google Maps Embed API, Random Quotes API и Hacker News API, очень полезны, если вы хотите начать сторонний проект или добавить еще одно портфолио в свой стек.
Оглавление:
- "Введение"
- "Цели"
- Почему Vue.js с публичным API?
- Установить проект Vue.js с зависимостями
- Настроить API-ключ OpenWeatherMap
- Настройка ключа Google Console Maps Embed API
- Настройка переменных среды
- Объедините API OpenWeatherMap со статическим API Карт Google
- Написать App.vue для проекта
- Написать служебную функцию для проекта
- Разработка библиотеки вызовов API в Vuex Store
- Разработка страниц и маршрутов
- Развернуть приложение
- "Дела, которые необходимо сделать"
- Заключение, исходный код и демонстрация
- Закрытие
Введение
Веб-приложение или приложение на основе местоположения очень распространено в любом веб-приложении или мобильном приложении. В сочетании с любыми другими функциями и услугами может стать действительно мощным приложением. Публичные API-интерфейсы дают вам возможность использовать свои методы разработки интерфейса в реальных проектах, которыми вы можете поделиться с общественностью.
Вероятно, у вас уже есть этот клон Instagram, Spotify или другой клон приложения с их общедоступным поставщиком API. Эта история — просто ссылка от меня на преимущества OpenWeatherMap API, Google Map Embed API и Hacker News API с использованием Vue.js, которые вы, вероятно, захотите использовать в своем следующем проекте. Это также может быть реализовано в Проекте Nuxt.js, поскольку фреймворк основан на Vue.js.
Цели
Узнайте, как использовать и оптимизировать общедоступные API для создания и создания проекта веб-приложения.
Четкое использование функций API браузера, которые можно использовать в любом браузере с Vue.js. Создайте что-нибудь полезное для своих веб-проектов и поймите процесс и механизм, лежащий в его основе.
Обработка запроса разрешения от приложения через разрешение на доступ к браузеру для использования геолокации API из браузера.
Почему Vue.js с общедоступными API?
Vue.js – это популярная среда JavaScript с открытым исходным кодом, созданная Эваном Ю и получившая огромное сообщество разработчиков. Это легко понять с большой экосистемой для его поддержки.
Публичный API
Службы Public API доступны для общего использования в своих проектах для различных нужд. Это включало службу, которую они хотели использовать и интегрировать в приложение, но нуждалась в сторонней службе, которой нет в их приложении.
Google Maps Embed API, предоставляемый Google, — это услуга, которая использует встраивание карт в ваш веб-сайт, и это бесплатно. Google может многое предложить, когда речь идет о картографическом сервисе и других замечательных сервисах.
OpenWeatherMap – это API-интерфейс базы данных о погоде, который может предоставить вам информацию о погоде в любом месте, указанном API в вашем проекте, по координатам широты и долготы. Для запуска нового проекта или портфолио это будет хорошим началом для создания приложения с функциями API на основе погоды или местоположения. [Наверх]
HackerNews APIбыл создан для разработчиков, чтобы они могли создавать собственную версию веб-сайта HackerNews, отличную от исходной версии. Многие полные функции и форматы, доступные для получения данных с веб-сайта HackerNews, также доступны на исходном веб-сайте. [Наверх]
Установите проект Vue.js с зависимостями
Vue.js версии 2 необходим для работы нашего проекта, управления состоянием с помощью Vuex и Vue Router, чтобы сделать наше приложение доступным через клиентский браузер. Что касается этого письма, я использую [email protected] для приложения.
Я собираюсь использовать TailwindCSS для этого приложения, так как оно будет основано на мобильном дизайне. Я использую эти замечательные значки от Phosphor Icons для значков, используемых в этом приложении.
Другие модули являются базовыми по умолчанию при установке Vue.js. Поскольку мы собираемся использовать локальное хранилище для примеров управления данными, это хороший пример от Майка Стрита, чтобы начать использовать локальное хранилище в Vuex.
Это все модули узла, перечисленные в файле package.json:
Введите yarn install или npm install, чтобы установить модули узла для этого проекта. После этого нам нужно настроить некоторые конфигурации из OpenWeatherMap и Google Map Embed API. После завершения установки модуля запустите разработку проекта, набрав yarn serve или npm run serve, чтобы начать. [Наверх]
Структура каталогов с командой tree:
. ├── babel.config.js ├── jsconfig.json ├── package.json ├── postcss.config.js ├── public │ ├── favicon.ico │ ├── favicon.png │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ ├── css │ │ │ └── tailwind.css │ │ └── icon-search.svg │ ├── components │ │ ├── Dashboard.vue │ │ ├── Detail.vue │ │ ├── Home.vue │ │ ├── Search.vue │ │ └── global │ │ └── Footer.vue │ ├── constants │ │ ├── actionTypes.js │ │ ├── env.js │ │ └── statusTypes.js │ ├── main.js │ ├── store │ │ └── index.js │ └── utils │ └── index.js └── tailwind.config.js
Настройте ключ API OpenWeatherMap
Войдите или зарегистрируйтесь в OpenWeatherMap, чтобы получить ключ для этого приложения. Нажмите Мои ключи API в меню и нажмите Создать, чтобы создать ключ.
Настройте ключ Google Console Maps Embed API
Войдите в консоль разработчика Google, просмотрите раздел API и включите Maps Embed API для использования в этом приложении. Google API имеет ограничение в 1000 запросов для бесплатного использования, кроме того, они будут взимать плату за то, чтобы вы продолжали использовать их API.
Для этой цели, поскольку мы собираемся использовать Embed API, у них не будет проблем, поскольку они предоставляют этому API неограниченные запросы бесплатно. Вот ссылка на стоимость услуги Google API.
Как только вы создадите ключи доступа Maps Embed API и используете их в своем проекте, вы сможете просматривать количество запросов на панели инструментов Google API.
После этого перейдите в раздел учетных данных, там есть настройки, позволяющие внести в белый список веб-сайт, который будет использовать эту службу API. Управляйте URL-адресом своего веб-сайта в полях, и URL-адреса будут доступны для использования API карты Google. Скопируйте свой ключ API и запишите его в разделе VUE_APP_API_GMAP_KEY файла .env. [Наверх]
Настройка переменных среды
Создайте .env.local в корневом каталоге проекта Vue.js или скопируйте файл и переменные из файла .env.local-example. Он будет автоматически проигнорирован git при фиксации файла в вашем репозитории. Согласно официальной документации Vue.js и рекомендациям, не помещайте конфиденциальные переменные в .env файл, особенно в открытый общедоступный репозиторий git.
Если вы используете Vercel или любой статический хост Jamstack, они обычно предоставляют настройки для любого проекта, чтобы поместить переменные среды вашего сервера в свой хост.
VUE_APP_API_OMAP_KEY = YourRandomOmapKeyAPI VUE_APP_API_GMAP_KEY = YourRandomGmapEmbedAPI
Эти переменные можно найти в .env.local-example исходниках здесь. Замените переменные официальными ключами API. [Наверх]
Объедините API OpenWeatherMap со статическим API Карт Google.
Откройте или создайте файл в src/constants/env.js и запишите URL-адреса и переменные секретного ключа из консоли разработчика Google и OpenWeatherMap.
Переменные в файле .env будут доступны из файлов Vue с синтаксисом process.env.VUE_APP_API_OMAP_KEY и process.env.VUE_APP_API_GMAP_API.
export const API_OMAP_BASE = 'https://openweathermap.org/' export const API_GMAP_BASE = 'https://www.google.com/' export const API_OMAP_URL = 'https://api.openweathermap.org/data/2.5/weather?' export const API_GMAP_URL = 'https://www.google.com/maps/embed/v1/place?' export const API_OMAP_KEY = process.env.VUE_APP_API_OMAP_KEY export const API_GMAP_KEY = process.env.VUE_APP_API_GMAP_KEY
Эти переменные можно найти в ./constants/env.js в исходниках здесь. [Наверх]
Напишите App.vue для проекта
По умолчанию App.vue будет обрабатывать основной интерфейс и <router-view> компоненты в приложении. Это загрузит все необходимые состояния, переменные и обработку ошибок в приложение проекта Vue.js.
Напишите служебную функцию для проекта
Написание утилит для любого проекта становится важным, поэтому вам не нужно писать повторяющийся код функций во всех файлах исходного кода. Эта практика также помогает оптимизировать размеры файлов вашего проекта.
Создайте или добавьте файл в каталог ./src/utils/index.js и поместите любые служебные коды, которые можно использовать в любых файлах. [Наверх]
Разработка библиотеки вызовов API в Vuex Store
Для управления состоянием и хранилищем в Vue.js использование Vuex уже охватывает все, что нам нужно для настройки этого проекта.
Я использую метод javascript fetch для обработки запросов к серверам API, но вы можете выбрать библиотеку, например Axios за запрос.
Vue.js имеет каталог по умолчанию для управления состоянием в ./store/index.js:
Магазины обработают запрос от API_OMAP_URL, API_OMAP_KEY, API_NEWS_URL и API_QUOTE_URL из констант URL-адреса среды, а затем сопоставили ответы с состояниями. [Наверх]
Разработка страниц и маршрутов
Настройте маршруты с помощью маршрутизатора Vue vue-router, чтобы предоставить все маршруты страниц, доступные в приложениях. Откройте Vue.js по умолчанию src\main.js , включите необходимые импорты и определите все маршруты.
Страницы
- Home.vue
Home будет заставкой в приложении Vue.js Gerimis. Нажмите здесь, чтобы просмотреть ссылку на источник Vue.js. - Dashboard.vue
Информационная панель будет главной страницей, на которой будет сохранена история ваших карт. Нажмите здесь, чтобы просмотреть ссылку на источник Vue.js. - Detail.vue
Страница сведений будет страницей местоположения на карте, где вы сможете просмотреть все текущие данные о погоде. Нажмите здесь, чтобы просмотреть ссылку на источник Vue.js. - Search.vue
Страница поиска — это страница для поиска местоположения по имени и сохранения его в поиске местоположения на странице панели инструментов. Нажмите здесь, чтобы просмотреть ссылку на источник Vue.js.
Маршруты
Поскольку это приложение имеет пять страниц, маршруты также будут состоять из пяти маршрутов, которые определены ниже:
Развернуть приложение
Для публичного развертывания этого веб-сайта можно использовать Vercel и Netlify. Они предоставляют бесплатный хостинг статических веб-сайтов для любого фреймворка на основе JavaScript.
Войдите в панель управления Vercel или Netlify и настройте репозиторий, переменные среды и ветку вместе с сборкой или началом команда. В зависимости от ваших фреймворков, таких как Nuxt.js, команда generate создаст статические файлы.
Создание вашей среды учетных данных в .env должно перейти к этим настройкам службы.
Сборка и развертывание для Vue.js по умолчанию — это команда yarn serve или npm run serve. Vercel автоматически обнаружит или прочитает ваш scripts в файле package.json в нашем приложении Vue.js.
После команды сборки Vercel или Netlify сообщит вам, что ваш веб-сайт уже запущен и развернут. [Наверх]
Дела, которые необходимо сделать
Есть несколько вещей, которые мы можем сделать, чтобы улучшить это приложение:
- Перейдите на Vue 3 с новыми функциями.
- Улучшить скорость загрузки при вызовах API.
- Добавьте новые функции, такие как страница настроек.
Заключение, исходный код и демонстрация
Это привело к выводу, что веб-приложение Vue.js может обрабатывать функцию геолокации из API браузера и сочетаться с другими общедоступными API.
Вы можете использовать это, используя фреймворк Nuxt.js, основанный на Vue.js. Nuxt имеет удобные и полезные модули с отличными темами пользовательского интерфейса для начинающих, такими как Vuetify и Chakra UI.
Вот ссылки Исходный код и Демонстрация из этого приложения Vue.js Geo Location Weather. [Наверх]
Читайте также:
Закрытие
Разработка веб-приложений с использованием фреймворков JavaScript, таких как Vue.js, становится сложной и заманчивой в сочетании с общедоступными открытыми API или браузерными API. Приложение становится интерактивным для пользователя благодаря дополнительной функции API геолокации браузера. [Наверх]
Пожалуйста, следуйте за мной, чтобы получить больше советов и рекомендаций по веб-разработке, спасибо!
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
