Эй, парень, это мой первый пост. Я надеюсь, вам понравится.

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

1. Настройка среды

Итак, прежде всего, мы должны настроить нашу игровую площадку для кодирования. Для этого нам нужны редакторы кода, подключение к интернету и много рвения.

Есть много редакторов кода; так что это на вас с тем, что вы предпочтительнее. Я использую VS Code, и я его большой поклонник. Существуют и другие варианты, такие как ATOM, Квадратные скобки, Sublime или WebStrom и т. д. ([Это необязательно] Для редакторов кода нам нужны некоторые расширения, которые сократят время работы и дадут лучший результат. Это расширения, которые я использую в VS Code. Они также доступны для редакторов.

Обновление в реальном времени

Красивее

Emmet (предустановлен в VSCode)

)

Итак, теперь создайте пустую папку на рабочем столе или в другом каталоге и назовите ее «Приложение погоды». Теперь откройте этот каталог с помощью редактора кода и создайте 3 файла, подобных этому.

Теперь напишите простые HTML-коды для приветствия, мир и запустите его. Помните, я говорил об Эммете; поэтому, если вы установили Emmet, а затем в HTML-файле нажали «!», на вашей странице появится простой HTML-шаблон.

Итак, теперь свяжите CSS и JS , затем создайте h1 элемент Hello World и запустите его, и мы получим простую веб-страницу, работающую правильно.

Затем нам нужно связать Bootstrap для разработки пользовательского интерфейса и избавиться от написания большого количества CSS. Таким образом, вы можете вставить эту ссылку CDN в свой HTML-файл, и наша настройка среды будет завершена.

CSS

Скопируйте и вставьте таблицу стилей <link> в <head> перед всеми остальными таблицами стилей, чтобы загрузить наш CSS.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

JS

Поместите следующий <script> в конце ваших страниц, прямо перед закрывающим тегом </body>, чтобы активировать их. Первым должен быть jQuery, затем файлы JavaScript.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

2. Настройка API

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

У него разные ценовые предпочтения, и мы выберем бесплатное предпочтение, которое обеспечит 1000 вызовов в день, что действительно круто, чем у другого поставщика API погоды. Поэтому сначала создайте там учетную запись, и после входа в систему вам будет предоставлен секретный ключ API, который мы будем использовать для вызова этого API.

Одна вещь, которую я хотел бы предложить вам прочитать документацию о том, как обрабатывать вызовы API для лучшего понимания кодирования.

Итак, наша настройка API завершена. Давайте перейдем к коду.

3. Настройка HTML и CSS

Итак, давайте настроим скелет нашего веб-приложения и добавим ему несколько дополнительных стилей.

После этого наше приложение будет выглядеть примерно так

3. Напишем JavaScript

В app.js сначала объявите некоторые переменные, которые указывают на элементы DOM в файле HTML, как это

let name = document.querySelector(".name");
let date = document.querySelector(".date");
let temp = document.querySelector(".temp");
let desc = document.querySelector(".desc");
let hum = document.querySelector(".hum");
let press = document.querySelector(".pressure");
let ozon = document.querySelector(".ozone");
let icon = document.querySelector(".image");

создайте еще две переменные. Мы обсудим это позже.

let temps = []; 
let isConverted = false;

Теперь я собираюсь определить класс и определить методы получения необходимых данных. Вы также можете создавать объекты и их свойства для отображения данных. Сначала я создам метод для getLocationName. Darksky не предоставляет имя местоположения в своем запросе API, оно возвращает только отчеты с прогнозом погоды, поэтому я использую это, которое возвращает данные о текущем местоположении в формате json. Он фактически использует IP-адрес пользователя, чтобы получить информацию о местоположении.

Итак, как мы собираемся получить подробности. Итак, есть два решения.

Итак, мы должны сделать запрос AJAX для получения данных JSON. Либо мы можем использовать XmlHTTPRequest object javascript, либо мы можем использовать новый ES6 fetch promise, который будет получать данные из вызова API. Я использую выборку здесь. Итак, getLocationName будет выглядеть так

getLocation() { 
   fetch("https://geoip-db.com/json/")  
    .then(res => res.json())    
    .then(res => {   
      name.innerHTML += `${res.city}, ${res.state}`;   
   });  
}

Итак, чтобы получить название места, давайте создадим экземпляр класса и вызовем метод для выполнения нашей работы.

var weather = new Weather();
weather.getLocationName();

и наш экран будет обновлен как это

Теперь создайте еще один метод getCurrentForecast для получения текущего прогноза погоды. Я посоветовал вам прочитать документацию о том, как вызывать URL-адрес API.

https://api.darksky.net/forecast/[key]/[latitude],[longitude]

Вместо ключа нужно поставить секретный ключ, а вместо широты и долготы мы будем.. подождите, где мы их возьмем? Мы погуглим их и поместим… нет, это не кажется правильным. Нам нужно добавлять их автоматически, поскольку наше приложение обслуживается из разных мест.Так как же наше приложение получает сведения о местоположении?

Итак, ответ — navigator object браузера. Позвольте мне показать вам, как это работает.

if (navigator.geolocation) {               navigator.geolocation.getCurrentPosition(res => {
 console.log(res.coords.latitude,res.coords.longitude)
})
else 
console.log("Browser doesn't support geolocation")

поэтому объекты навигатора geolocation method позволяют нам получить доступ к значениям широты и долготы из браузера. Он запросит разрешение на доступ к геолокации, а затем запишет результаты в консоль. Если браузер не поддерживает geolocation , он напечатает сообщение else. Таким образом, мы собираемся использовать URL-адрес API и вызывать его для получения результатов.

Итак, я просто вызвал API с помощью fetch, затем мы получили результаты и поместили их в соответствующие элементы HTML DOM.

Одна вещь, которая может навести вас на мысль, почему я использовал эту ссылку до того, как API вызовет URL https://cors-anywhere.herokuapp.com.

Что произойдет, если я его не поставлю?

Затем вы получите сообщение об ошибке CORS. Если вы перейдете на страницу часто задаваемых вопросов DarkSky, вы получите ответ на этот вопрос.

После вызова метода getCurrentForecast мы получим вот такое представление

Давайте добавим к нему больше функций. Сначала давайте настроим просмотр значка погоды для большей привлекательности. Для просмотра динамических иконок погоды я использую weather-icon-css, который вы найдете здесь. Прочтите документацию, как его использовать. Его синтаксис такой же, как у fontawesome icons.

NB: когда вы загружаете вышеуказанный пакет, поместите его уменьшенный файл css в папку css и папку fonts в родительской папке проекта.

Мы создадим еще один метод getIcon для обновления текущего значка в соответствии с результатом погоды. Требуется двааргумента. Первый аргумент. возьмите имя значка из API, возвращенного JSON, а второй аргумент говорит нам, в каком элементе мы хотим показать вам значок. Итак, давайте декальцинируем этот метод, и вы увидите, что метод вызывается в строке 22 на fig-2, и посмотрите, что мы получим

Мы получаем значок, теперь давайте сделаем температуру конвертируемой. Для этого мы должны принести некоторые вещи, которые я сказал обсудить позже. Таким образом, одна переменная представляет собой пустой массив, а другая — логическое значение. И как они могут нам помочь? Теперь посмотрите на следующее объявление функции.

Итак, эта convert функция объявлена ​​для того, чтобы событие можно было прослушивать через нее. Если вы видите файл HTML в строке 58, вы найдете событие onclick event, прикрепленное к элементу. Так что же он на самом деле делает?

Эта функция фактически показывает преобразованные значения температуры в шкалах Цельсия и Фаренгейта. Прежде чем описывать, как работает логика, я хочу, чтобы вы раскомментировали две строки вашего кода в строках 16 и 17 на рис-2. Что они делают, поэтому первая строка помещает значение температуры, которое возвращается из значения JSON, а второе значение — это значение по Цельсию, которое преобразуется и помещает в тот же массив, который мы создали. .

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

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

Итак, наконец, наше кодирование завершено, и окончательное приложение будет выглядеть так:

Ну как этот пост? Я надеюсь, что вы узнаете, как легко создать простое погодное приложение. Я хочу, чтобы вы больше изучили и обновили его пользовательский интерфейс и интерактивность. Воспользуйтесь услугами различных поставщиков Weather API или изучите дополнительные функции DarkSky и внедрите их в свое приложение, чтобы сделать его более динамичным и полезным.

Скоро будет новый учебник.

Удачного кодирования 😊❤