1. Навіщо потрібні віджети?
2. Що будемо робити?
3. за технологіями
4. Пишемо код. Створюємо базову сторінку
5. Заготівля для віджета

Кожен раз підключаючи на своїх сайтах готове рішення від сервісів на зразок 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 напишемо так:

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

У секції body ось так:

Тут ми розповімо Вам про погоду в різних чудових містах нашої країни!

Підписуйтесь на наші оновлення і Ви завжди будете дізнаватися погоду вчасно!

Що тут з цікавого? У файлі 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 {margin: 30px 0; }

Заготівля для віджета

Віджет представляє з себе звичайний html-документ. В чому різниця? Перше - ми не будемо морочитися із зайвими мета-тегами, тому як пошуковим системам наш віджет не потрібен. І друге - і стилі, і js-код ми напишемо прямо в коді html-сторінки. Нам це потрібно, щоб зробити завантаження віджету максимально швидкої, а зменшення числа запитів до веб-сервера в цьому нам допоможе. Все, що потрібно, ми завантажимо одним файлом.

У секції head у нас буде такий код:

У секції body: