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 позволяет быстро разрабатывать веб-приложения. Попробуйте и убедитесь, что ваше следующее мобильное приложение будет запущено и запущено в считанные минуты.