Оглавление
- Настройка HTML
- Настройка JavaScript
- Настройка API
- Кнопка Твитнуть
Вам трудно придумать пост в Твиттере? Вы тратите слишком много времени на организацию и исправление своего поста в Твиттере? Это руководство поможет вам создать собственный генератор твитов с помощью API для целевой аудитории. Вы научитесь настраивать исходные файлы HTML и CSS. Подключите пользовательский интерфейс с помощью JavaScript и запустите проект. Наконец, вы научитесь извлекать и отображать данные с веб-сайта API. Пойдем!
Настройка HTML
Создайте скелет HTML со следующим кодом:
Внутри тега body у вас должен быть следующий код. Вы можете изменить текст внутри тега h1. Теги с двумя кнопками должны иметь атрибут onclick. Атрибут onclick соединяет функции javaScript с атрибутом html5.
Как настроить таблицу стилей
Затем стилизуйте HTML-код. Используйте следующий код для оформления HTML:
Приведенный выше код CSS — это внутренний метод добавления стиля в ваш HTML. Вы также можете использовать внешний файл CSS.
Следующие шаги показывают, как использовать внешний файл CSS:
- Создайте файл CSS в текстовом редакторе и сохраните его как randomQuote.css.
2. Сохраните файл CSS в той же папке, что и файл HTML.
3. Внутри заголовка HTML напишите следующий код:
<link rel=”stylesheet” href=”/randomQuote.css)”>
Вы должны настроить код CSS, чтобы он соответствовал желаемому дизайну.
Файл html5 должен выглядеть примерно так, как показано на рисунке ниже.
Чтобы получить кнопку, как указано выше, вам нужно включить bootstrap. Добавьте следующую строку в заголовок и оставьте HTML-код таким же, как приведенный выше HTML-код.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Настройка JavaScript
Затем создайте файл JavaScript.
- Создайте файл JavaScript в текстовом редакторе и назовите его randomQuote.js.
- Сохраните файл JavaScript в том же месте, что и файл HTML.
- Подключите файл Javascript со следующим кодом:
<script src =”/randomQuote.js”></script>
Посмотрите на дизайн котировочной машины. Пометьте все функции, требующие взаимодействия с пользователем. Две кнопки являются единственным взаимодействием с пользователем.
Начните с первой кнопки. Из файла Html первая кнопка имеет следующие атрибуты:
<button class = “btn btn-primary” type =”button” onclick=”responseRequest()”> get quote </button>
Получить конечную точку API
На следующих изображениях показано, как искать и выбирать API из программируемой сети:
Найдите кавычки ключевых слов внутри строки поиска.
Далее выберите любой API из следующего списка
После того, как вы нажмете на API, браузер перенесет вас в профиль API. Щелкните ссылку заголовка, чтобы получить URL-адрес API.
После того, как вы нажмете на ссылку заголовка, браузер перенесет вас на страницу спецификаций. Здесь скопируйте конечную точку API. Конечная точка API позволяет вашему коду взаимодействовать с этим API.
Приведенный выше URL-адрес использует следующую конечную точку API:
https://ron-swanson-quotes.herokuapp.com/v2/quotes
Функции JavaScript
Вам нужно создать функцию внутри файла javascript для функции onclick, «responseRequest()»
Функция responseRequest получает сторонний запрос API от programmable.com. API запросит данные с веб-сайта, и этот веб-сайт вернет строку JSON с цитатой. Следующий шаг показывает, как получить URL-адрес API из программируемой сети. Стрелка указывает на URL-адрес конечной точки API. Используйте следующий код, чтобы получить API с внешнего веб-сайта:
Каждый раз, когда вы нажимаете кнопку «Получить цитату», будет возвращаться новый ответ.
Вы можете использовать указанную выше конечную точку API или выбрать другую конечную точку API. Текст ответа будет объектом JSON. Объекты JSON включают ключи и значения. Ниже приведен пример объекта JSON:
Строка JSON для объектов
Чтобы отобразить цитируемый текст, вам нужно преобразовать строковую форму JSON в форму объекта.
JSON = {key:value,key:value}
Ниже приведен пример приведенного выше URL-адреса конечной точки API:
[“I regret nothing. The end.”]
Используйте JSON.parse() в ответе, чтобы преобразовать JSON из строки в форму объекта. Форма объекта облегчает
Сохраните ответ в переменной с именем quotes, аналогично приведенному выше фрагменту кода.
Следующим шагом является вызов функцииquitButton. Эта кнопка отобразит котировку на экране браузера.
Вы должны переименовать функцию в display_Quote(quote)
В этой функции отобразите цитату, используя следующее:
element = document.getElementById(‘box’);
Кнопка Твитнуть
Используйте URL-адрес твиттера, который позволяет вам твитить с внешних веб-сайтов со следующим кодом:
var URL = “https://twitter.com/intent/tweet";
Присвойте отображаемую цитату переменной. Создайте переменную с именем «хэштег» и назначьте «хэштег» символу «#». Вам также нужно имя пользователя, которое позволит Twitter узнать, кто пишет в Твиттере. Используйте twitter_user в качестве переменной для установки «userName».
Получите идентификатор цитаты и, получив элемент с цитатой. Используйте следующий код, чтобы отправить твит в Twitter.
Функция открытия откроет отдельный браузер с вашей цитатой. Обязательно добавьте все аргументы запроса внутри функции.
Заключение
Вы достигли конца! Я рекомендую создать новую функцию для котировочной машины. Попробуйте добавить таймер. Раз в 5 минут публикуйте случайный твит.