Статьи

Мобильный в минутах с Синатрой

Ноябрь 13, 2018

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

Краткое введение в Синатру

Следующий файл ruby ​​- это действительный сервис RESTful с Sinatra:

require 'sinatra'
require 'json/pure'

get '/hello/:name.json' do
  content_type :json
  {
    "message" => "Hello #{params[:name]}!"
  }.to_json
end

Здесь мы говорим Синатре отвечать на любые запросы GET к шаблону URI /hello/.json. Вставленное имя передается методу в качестве параметра через хэш params. Мы устанавливаем возвращенный content_type в JSON, чтобы обеспечить правильную обработку от клиента, и наш хеш преобразуется в ответ JSON с использованием json_pure.

Чтобы запустить этот пример, сохраните приведенный выше фрагмент кода в файл с именем hello.rb. Затем установите и запустите новое приложение с помощью Sinatra:

$ gem install json_pure
$ gem install sinatra
ruby -rubygems hello.rb

Теперь перейдите по URL-адресу http: // localhost: 4567 / Jacob (не стесняйтесь использовать свое собственное имя), и вы увидите:

{"message":"Hello Jacob!"}

Теперь мы можем легко использовать этот сервис с помощью скрипта jQuery и разместить скрипт на Sinatra:

<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
      $.getJSON('/hello/Jacob.json', function(data) {
        alert(data.message);
      });
    </script>
  </head>
  <body>
  </body>
</html>

Здесь мы используем метод getJSON jQuery для извлечения данных JSON из нашего сервиса. Сообщение от результата JSON затем оповещается пользователю.

Для запуска примера создайте папку с именем publicв том же каталоге, где вы создали свой hello.rbфайл. Внутри этой папки скопируйте приведенный фрагмент кода в файл с именем hello.html. Теперь перейдите на следующую страницу в вашем браузере http: // localhost: 4567 / hello.html . Вы будете предупреждены сообщением «Привет, Джейкоб!»

Создание мобильного приложения с помощью Sinatra

Это было достаточно просто, но давайте посмотрим, как мы можем применить это к мобильной настройке. Для этого примера давайте создадим и используем сервис Sinatra с помощью jQuery Mobile .

Загрузка и запуск примера

Пример можно скачать здесь полностью . Для запуска примера разархивируйте загруженный файл в известный каталог и выполните следующие команды:

$ cd /unzipped/folder/directory
$ gem install json_pure
$ gem install sinatra
$ ruby -rubygems cameras.rb

Теперь перейдите на следующую страницу в вашем браузере http: // localhost: 4567 / camera.html . Вы увидите список камер для выбора.

Разоблачение сервиса RESTful

Давайте сначала создадим наш сервис RESTful, который предоставит топ-10 популярных камер DSLR:

require 'sinatra'
require 'json/pure'

get '/cameras/top10.json' do
  content_type :json
  [
    {
      'id' => 1,
      'title' => 'Canon Rebel T3 DSLR',
      'description' => '...',
      'price' => '499.99
    },
    {
      'id' => 2,
      'title' => 'Canon Rebel EOS DSLR',
      'description' => '...',
      'price' => '349.99'
    }
    # ... ...
  ].to_json
end

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

Настройка jQuery Mobile

Теперь мы можем использовать сервис с помощью jQuery Mobile и разместить наше мобильное приложение с помощью Sinatra. Наше приложение jQuery Mobile будет состоять из двух частей: HTML-страницы, которая выполняет настройку jQuery Mobile, и скрипта, который использует наш сервис. Давайте сначала посмотрим на страницу HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Top 10 Cameras</title>
  <link rel="stylesheet"
    href="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
  </script>
  <script src="cameras.js"></script>
  <script src="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
  </script>
</head>
<body id="page_body">
  <div id="cameraListPage" data-role="page">
    <div data-role="header">
      <h1>Camera List</h1>
    </div>
    <div data-role="content">
      <ul id="cameraList"></ul>
    </div>
  </div>
  <div id="cameraDetailPage" data-role="page">
    <div data-role="header">
      <h1>Camera Detail</h1>
    </div>
    <div id="cameraDetailContent" data-role="content">
    </div>
  </div>
</body>
</html>

Приведенная выше логика на самом деле просто стандартная jQuery Mobile. Мы указываем две страницы, а #cameraListPageи а #cameraDetailPage. В нем #cameraListPageесть пустой <ul>элемент, который мы намерены динамически заполнять камерами из нашего сервиса. Аналогично, на странице сведений нет содержимого, которое будет динамически определяться при выборе камеры из списка.

Визуализация списка камер

Теперь давайте посмотрим на скрипт, который заполняет эту логику. Вы можете просмотреть скрипт полностью, загрузив пример . renderМетод заполнит OUR <ul>, вызвав созданную нами службу камеры:

function render() {
  $.getJSON('/cameras/top10.json', function(data) {
    this.cameraData = data;
		
    var cameraListHtml = '';

    $.each(this.cameraData, function(i, camera) {
      cameraListHtml += '<li><a data-index="' + i + 
        '">' + camera.title + '</a></li>';
    });
		
    var $cameraList = $('#cameraList').append(cameraListHtml).listview();

    $cameraList.find('a').click(function() {
      displayCameraDetailPage(this, data);
    });
  });
}

Обратите внимание, что данные службы извлекаются так же, как в нашем примере выше. Ключевое отличие состоит в том, что мы динамически создаем элементы списка для каждой камеры со ссылкой, которая содержит индекс камеры, к которой она относится. Затем элементы списка добавляются к объекту, #cameraListкоторый отображается как jQuery Mobile listview.

Отображение деталей камеры

Последний шаг — отображение деталей камеры. displayCameraDetailPageМетод связан с каждой ссылкой камеры , который был сгенерирован. Методу передаются <a>элемент и данные камеры, которые мы получили из сервиса.

function displayCameraDetailPage(element, cameraData) {
  var camera = cameraData[$(element).data('index')];

  var detailsHtml = 
    '<div data-role="content"><h2>' + camera.title + '</h2>' + 
    '<p><strong>Price:</strong> ' + camera.price + '</p>' +
    '<p>' + camera.description + '</p>' +
    '</div></div>';
	
  $('#cameraDetailContent').html(detailsHtml);

  $.mobile.changePage('#cameraDetailPage');
}

Здесь мы используем метод данных jQuery для получения индекса выбранной камеры. Представление разметки деталей камеры генерируется, а #cameraDetailPageсодержимое обновляется. Когда обновление завершено, changePageдля показа используется метод jQuery Mobile #cameraDetailPage.

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

29
Share: