Webdevkin. Демонстрация виджета Погода

Пишем встраиваемый виджет на нативном javascript и php

Каждый раз подключая на своих сайтах готовое решение от сервисов вроде disqus или google-аналитики, я удивляюсь простоте интеграции достаточно сложного функционала. Поставил в код 3 строчки javascript-кода — и у тебя уже развернулся блок с комментариями. Еще 2 строчки — и доступна аналитика от гугла или яндекса. Конечно, никакого волшебства при этом не происходит, те самые 3 строчки кода подтягивают с удаленного сервера весь нужный код, и по сути разворачивают небольшое веб-приложение на страницах Вашего сайта. Но как это устроено внутри и как это сделать самому? Разобраться с этим было достаточно интересно, и в итоге у меня получился небольшой виджет, который работает именно по такой простой схеме встраивания и при этом еще выполняют некоторые полезные вещи. Далее подробности.

Зачем нужны виджеты?

Здесь все просто: допустим, у нас есть какой-то неимоверно крутой сервис. Он настолько крут, что мы хотим поделиться нашими возможностями со всем миром (а может, и продать их). Но здесь всплывают несколько моментов. Во-первых, мы не готовы предоставлять открыто наши исходники. Во-вторых, нужна максимально простая схема встраивания нашего функционала в сторонние сайты. В-третьих, мы хотим, чтобы наши пользователи были уверены, что использование нашего сервиса ничем не навредит их сайту.

Для этой цели хорошо подходят iframe-ы. Это фактически отдельные html-страницы, которые встраиваются в другие страницы, при этом не имея доступа к своему «родителю». То есть в iframe можно встроить наше веб-приложение, которое будет спокойно выполнять свою работу, не вмешиваясь в основной сайт. А что именно будет делать Ваш виджет, строить систему комментариев на странице, показывать прикольную игрушку или рисовать интерактивный рекламный баннер — дело исключительно Вашего вкуса и фантазии.

В этой статье на игрушку мы замахиваться не будем, а рассмотрим, как создать встраиваемый виджет для определения погоды. Конечно, для этого есть много различных погодных сервисов, но нам неинтересно воспользоваться готовым решением. Хочется создать простенький виджет своими руками, чтобы понять, как это вообще работает и в дальнейшем применить знания уже для каких-то полезных вещей. Заодно попутно освежим знания в нативном javascript и php.

Что будем делать?

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

Выглядит это проще, чем звучит — можете сразу посмотреть, что в итоге получится — Демо страницы с виджетом

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

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

Итак, вернемся. Люди узнают погоду, возможно, даже не задумываясь о том, что фактически пользуются другим сервисом. Но все довольны и счастливы, Вы получаете посетителей на свой сайт, клиенты — нужную информацию.

Здесь нужно небольшое уточнение: смысл виджетов в том, чтобы предоставлять уникальный, удобный, интересный функционал. Мы не даем в нашем примере какую-то особенную информацию. Погоду можно узнать где угодно. Но в познавательных целях, так как мы сами пока ничего не умеем делать, возьмем данные по погоде с сервиса Прогноз погоды в России и СНГ. Они любезно предоставляют бесплатный api, коим мы и воспользуемся.

По технологиям

Тоже ничего сложного. Про iframe я уже проговорился. javascript-код будем писать на vanillaJS, без единой дополнительной библиотеки. Даже без jQuery для манипуляции DOM. Наша цель еще состоит и в том, чтобы полученный виджет был максимально легковесным, и ни к чему тащить в браузер пользователя мешок дополнительных библиотек для облегчения своей работы. Поэтому вспомним, как работать с DOM и отправлять ajax-запросы на нативном javascript, и наши клиенты скажут нам спасибо. Серверная часть — пара десятков строк кода на php.

Пишем код. Создаем базовую страницу

Страницу, на которой будет располагаться наш будущий виджет. Напишем там пару строчек текста о том, какие мы классные в плане умения прогнозировать погоду на завтра. Это будет файл index.html — обычная html-страничка. В секции head напишем так:

 
Погода в городах России
 
Здесь мы расскажем Вам про погоду в разных замечательных городах нашей страны!
 
  
 
Подписывайтесь на наши обновления и Вы всегда будете узнавать погоду вовремя!
 
 

Что здесь из интересного? В файле css/style.css будем хранить стили для страницы (не для виджета!). И в нужном месте создаем iframe. В атрибуте src iframe-a ставим ссылку на виджет, в нашем случае — https://webdevkin.ru/examples/weather/widget/widget.html. Мы убираем у него границу и возможность скроллинга и задаем руками размеры виджета. Конечно, интереснее создать адаптивный, но до этого доберемся позже.

Стили для страницы, без особых изысков:

body < font-family: Arial; font-size: 14px; >.wrapper < width: 960px; margin: 0 auto; >.weather-widget-container

Заготовка для виджета

Виджет представляет из себя обычный html-документ. В чем отличие? Первое — мы не будем заморачиваться с лишними мета-тегами, потому как поисковикам наш виджет не нужен. И второе — и стили, и js-код мы напишем прямо в коде html-страницы. Нам это нужно, чтобы сделать загрузку виджета максимально быстрой, а уменьшение числа запросов к веб-серверу в этом нам поможет. Все, что нужно, мы загрузим одним файлом.

В секции head у нас будет такой код:

Источник

The best HTML widgets

Free library of great plugins to handle all important commercial and promotional aims on your HTML site. Instant integration, full settings and full-time support.

See the list of all free HTML widgets

The best tool for every HTML website

For 7 years now, our team have been shaping the most efficient premium widgets for HTML. Elfsight plugins enable you to maximize the number of leads, integrate your website with social media or accomplish any other tasks, which come up with the majority of business websites.

We offer various tariffs: from free to premium. We aim to provide your website a chance to improve together with us and reach an impressive height.

What makes our HTML widgets one of the best?

To discover that Elfsight plugins is what you surely need to test, we have compiled a list of qualities, which make them hold the highest positions among the rest:

• Free installation support;
• Completely adaptive on all devices;
• No programming skills required;
• Diverse user parameters of the interface;
• Simple UI;
• Cloud solution for perfect loading speed;
• Constant automatic updates;
• Competent support with any kind of queries.

Assess all advantages of Elfsight plugins via free version or acquire the desired widget with 20% discount.

How to create widget on HTML websites

You can get maximum information about adding of each widget in plugin section.

1. Click the wanted widget and generate it in the editor
2. Insert widget code into your website (into the HTML code of the page or the template: sidebar, footer, etc.)
3. Setup is successfully complete!

Looking for free advice in creating your HTML widget? Couldn’t handle the installation? Please, let us know to Elfsight customer support, and we will be happy to answer your questions.

Which way do I add the widgets to my HTML template?

You may integrate the widgets into your site. Simply open the administrator panel and perform the following actions:

1. Go to theme settings;
2. Select the part where you need to embed the widget on;
3. Paste the code from the Elfsight Apps service and save the adjustments.

Which of HTML versions and templates can be integrated with a widget?

The widgets can be added on any options templates of the HTML website. You can be sure of an optimum performance of the solutions.

Where can I manage integrated widgets?

All Elfsight clients will be able to modify the required adjustments of the widget features in the handy admin panel.

Is it possible to get in touch with the Help specialists in case I need a hand with the customizing the HTML widget only?

All users have an opportunity to contact our competent Elfsight specialists to ask for advice about the usage of the solutions.

Источник