Тестирование кнопки мобильного веб-сайта

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

В этом руководстве мы собираемся проверить, правильно ли веб-приложение отображает кнопку при доступе с мобильного устройства. Для этого сделаем следующее:

Создайте приложение Node.js
Создайте новую кнопку на панели инструментов Button
Добавить кнопку в интерфейс
Создайте файл сервера и запустите его на порту 5000 на локальном хосте.
Откройте наш компьютер для внешнего веб-трафика с помощью ngrok
Проверьте, что все работает, открыв URL-адрес, предоставленный нам ngrok на нашем мобильном устройстве.

Вы можете найти готовый код в этом репозитории на Github.

Макет приложения

В этом руководстве мы собираемся использовать сервер Node.js для запуска нашего мобильного веб-приложения, хотя можно использовать любой язык и веб-фреймворк (Flask, Sinatra, Rails и т. Д.). Если у вас не установлен Node.js, вы можете скачать его здесь.

Сначала откройте свой терминал, создайте новый каталог и перейдите в него.

mkdir test_mobile_web_button && cd test_mobile_web_button

Затем запустите файл package.json

npm init

и нажмите «Enter», следуя инструкциям.

Далее устанавливаем экспресс

npm install —-save express

Создайте файл index.js, в котором будет размещен наш серверный код.

touch index.js

Создайте папку для хранения наших представлений

mkdir views

Затем создайте файл simple_button.html в папке представлений, который будет содержать наш HTML и код, который отображает нашу кнопку.

touch views/simple_button.html

Создайте кнопку на панели управления

Перейдите на usebutton.com и войдите в систему. Если у вас еще нет учетной записи, вы можете зарегистрироваться здесь.

На панели навигации перейдите туда, где написано «Издатель», а затем «Кнопки». Затем нажмите «Добавить кнопку». Дайте кнопке имя и выберите «Мобильный Интернет» под платформой. Если у вас еще нет мобильного веб-сайта, добавьте тот, где он спрашивает, где вы хотите интегрировать кнопку. В разделе «Подключения» нажмите «Добавить действия». В разделе «Действия» выберите «Все». Прокрутите вниз до пункта "Uber" и щелкните его. Прокрутите назад и нажмите «Сохранить». Это приведет вас к панели инструментов для этой кнопки. Здесь вы увидите идентификатор кнопки, идентификатор приложения и некоторый образец кода, который мы добавим в наш файл simple_button.html в следующем разделе.

файл simple_button.html

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

<!-- simple_button.html -->
<script>
window.ButtonWebConfig = {
  applicationId: 'app-XXXXXXXXXXXXXXXX'
};
(function(u,s,e,b,t,n){
  u['__bttnio']=b;u[b]=u[b]||function(){(u[b].q=u[b].q||[]).push(arguments)};t=s.createElement(e);n=s.getElementsByTagName(e)[0];t.async=1;t.src='https://web.btncdn.com/v1/button.js';n.parentNode.insertBefore(t,n)
})(window, document, 'script', 'bttnio');
</script>
<div data-bttnio-id="btn-XXXXXXXXXXXXXXXX"
     data-bttnio-context='{ "user_location": { "latitude": 40.6827, "longitude": -73.9754 }, "subject_location": { "latitude": 40.7382869, "longitude": -73.9823721 } }'></div>

Этот код включает библиотеку ButtonJS и создает кнопку Uber, которая переводит пользователя от одного набора GPS-координат к другому. Если вы берете код непосредственно из этого руководства, не забудьте заменить там, где написано «app-XXXXXXXXXXXXXXXX» и «btn-XXXXXXXXXXXXXXXXX», идентификаторы вашего приложения и кнопки, которые находятся на панели управления.

index.js файл

Наш файл сервера будет довольно простым. Все, что он будет делать, это запускать наш порт localhost 5000 и отображать наш файл simple_button.html, когда пользователь переходит на URL-адрес, который будет сгенерирован ngrok.

// index.js
var path = require('path')
var express = require('express')
var app = express()
var port = process.env.PORT || 5000
app.get('/:html_file', function(req, res) {
  res.sendFile(path.join(__dirname, 'views', req.params.html_file + '.html'))
})
app.listen(port, function() {
  console.log('Listening on port: ' + port)
})

нгрок

ngrok - это мощный инструмент, который открывает ваш локальный хост для внешнего веб-трафика, что отлично подходит для тестирования веб-сайта на вашем мобильном устройстве, который работает локально на вашем компьютере. Если у вас еще не установлен ngrok, загрузите его здесь.

Перейдите туда, где вы загрузили ngrok, и выполните следующую команду

./ngrok http 5000

Это откроет соединение с вашим локальным портом 5000 через ngrok. В терминале он будет регистрировать несколько вещей, но нас интересует URL-адрес (Примечание: ваш URL-адрес будет отличаться от этого, поэтому используйте тот, который вам дает ngrok, не тот, что в этом руководстве).

Выньте мобильное устройство, откройте его браузер и перейдите по URL-адресу, с которым ngrok работает на конечной точке ‘/ simple_button’. Итак, для URL-адреса на приведенном выше снимке вы должны перейти по адресу «https://3f406e56.ngrok.io/simple_button». Если все прошло хорошо, вы должны увидеть кнопку Uber на веб-странице.