Разработка мобильных приложений с Zend Studio

Новый серверный проект, который мы создали, основан на Apigility. Apigility — это API Builder, который упрощает создание и поддержку полезных, простых в использовании и хорошо структурированных API. Если у вашего мобильного приложения есть серверная часть в облаке, обслуживающая данные через REST API, вам следует выбрать Apigility.

Интеграция Zend Studio с Apigility помогает вам создавать, документировать и тестировать API-интерфейсы, создающие серверные части ваших приложений в одной среде разработки. Для получения дополнительной информации о Apigility, нажмите здесь .

В этом руководстве мы протестируем и задокументируем службу REST, поставляемую с шаблоном, с помощью редактора Apigility, встроенного в поддержку мобильной разработки Zend Studio. Служба REST, называемая «Клиенты», обрабатывает список клиентов компании — извлекает список из базы данных, добавляет новых клиентов и т. Д.

1. Откройте редактор Apigility, щелкнув правой кнопкой мыши по проекту на стороне сервера в PHP Explorer и выбрав Open Apigility Editor .
   Это автоматически запустит интерфейс администратора Apigility на встроенном PHP-сервере и откроет редактор Apigility.

   

2. Выберите сервис «Клиенты», который указан как сервис REST в MyCompany API.
   Откроется страница служб REST.

   

3. Сервис уже включает в себя предварительно определенные настройки, настройки базы данных, поля и файлы контроллера, все они поставляются с выбранным нами шаблоном.

4. В заголовке службы REST нажмите желтую кнопку «Служба тестирования».
   Отображается представление «Служба тестирования», и поле URL автоматически содержит цель, которая является IP-адресом (localhost) и случайным портом встроенного сервера PHP. Этот сервер был запущен для редактора Apigility вместе с методом тестирования.

   

5. Нажмите значок теста.
   Результаты отображаются в окне ответа. Вы должны получить ответ «200 OK». Если вы получили ответ «404 Not Found», убедитесь, что URL-адрес в верхней части представления «Служба тестирования» правильный.

6. Теперь давайте проверим метод POST для этого сервиса. В представлении «Служба тестирования» введите следующие значения параметров запроса, отображаемых в таблице «Параметры» под URL-адресом:

   • имя — Даниил
   • расположение — Тель-Авив
   • деятельность — Кодирование
   • телефон — 123456789

7. Ниже таблицы параметров измените метод запроса на POST.

8. Нажмите значок теста.
   Результаты отображаются в окне ответа. Вы должны получить ответ «201 Created».

9. Далее мы собираемся документировать наш API. Выберите вкладку Документация.

10. Вставьте описание для службы REST и для методов GET и POST. Что-то вроде:

    • REST service — обрабатывает список клиентов компании
    • Метод GET — получает список клиентов
    • POST метод — добавляет нового клиента в список

11. Внизу страницы нажмите кнопку Сохранить , чтобы сохранить документацию.

Ваш сервис теперь задокументирован!

В Apigility гораздо больше аспектов, чем в этом уроке. Например, Apigility также поможет вам создать системы аутентификации и авторизации для ваших API. Проверьте документы Apigility, чтобы узнать больше.

Шаг 4: Разработка Front-End

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

На этом шаге мы добавим новую страницу в наше приложение, которая будет обрабатывать процесс отправки нового клиента в список клиентов нашей компании.

Внешний интерфейс, созданный с помощью шаблона, который мы выбрали для нашего проекта CCM, основан на jQueryMobile. Другие параметры шаблона включают альтернативные платформы, такие как Ionic, Bootstrap и т. Д.

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

Добавление новой страницы

В качестве первого шага мы добавим новую страницу в пользовательский интерфейс с: полями ввода, кнопкой «Отправить», текстовой областью для получения информации об ответе с сервера и кнопкой «Назад» для возврата на домашнюю страницу приложения.

1. В PHP Explorer откройте файл index.html мобильного проекта.

2. В конце файла непосредственно перед тегом BODY введите следующий код:

 <div data-role="page" data-control-title="Add Customer" id="page3"> <div data-theme="a" data-role="header"> <a data-role="button" href="#page1" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left"> Back </a> <h3> Add Customer </h3> </div> <div data-role="content"> <div data-role="fieldcontain" data-controltype="textinput"> <label for="name"> Name </label> <input name="" id="name" placeholder="" value="" type="text"> </div> <div data-role="fieldcontain" data-controltype="textinput"> <label for="location"> Location </label> <input name="" id="location" placeholder="" value="" type="text"> </div> <div data-role="fieldcontain" data-controltype="textinput"> <label for="activity"> Activity </label> <input name="" id="activity" placeholder="" value="" type="text"> </div> <div data-role="fieldcontain" data-controltype="textinput"> <label for="phone"> Phone </label> <input name="" id="phone" placeholder="" value="" type="text"> </div> <a id="submit" data-role="button" href="#"> Submit </a> <div data-role="fieldcontain" data-controltype="textarea"> <label for="response"> Response </label> <textarea name="" id="response" placeholder=""></textarea> </div> </div> </div> 

Добавление кнопки на страницу входа

Далее мы собираемся добавить кнопку на странице индекса / точки входа нашего мобильного приложения, которая ссылается на недавно созданную страницу «Добавить клиента».

Для этого в конце тега DIV для страницы индекса в строке 43 того же файла index.html добавьте следующий код:

 <a data-role="button" href="#page3"> Add Customer </a> 

Привязка кнопки «Отправить» к API

Теперь мы собираемся связать кнопку «Отправить», которую мы добавили на нашу новую страницу, с нашими API. Нажатие на кнопку отправит запрос POST на сервер, и в результате новый клиент будет добавлен в список клиентов.

1. В PHP Explorer откройте файл my.js расположенный в папке www/js мобильного проекта.

2. Найдите блок $(document).ready(function() { … } (строка 71) и вставьте следующий код в блок (строка 75):

    $('#submit').bind('click', postCustomers); 

3. Затем добавьте реализацию функции postCustomers (). Для этого в строке 70 добавьте следующий код:

    /** * Sends POST /customers[/:id] to API. */ function postCustomers() { jQuery.mobile.showPageLoadingMsg('Loading'); $.ajax({ url : gatewayURL + '/customers', cache : false, type : 'POST', contentType : 'application/json', data : JSON.stringify({ 'name' : $('#name').val(), 'location' : $('#location').val(), 'activity' : $('#activity').val(), 'phone' : $('#phone').val(), }), success : function(data, status, xhr) { jQuery.mobile.hidePageLoadingMsg(); onPostCustomers(data); }, error : function(xhr, status, errorThrown) { jQuery.mobile.hidePageLoadingMsg(); onPostCustomers(xhr); } }); } 

4. И сразу после этого добавьте вспомогательную функцию в postCustomers () для обработки ответа от запроса POST:

    /** * Shows POST /customers[/:id] response string in #response. * * @param response JSON object with response */ function onPostCustomers(response) { var raw = (typeof(response) == 'string') ? response : JSON.stringify(response); $('#response').html(raw); } 

Предварительный просмотр наших изменений

После сохранения проекта, пришло время предварительно просмотреть нашу работу. Для этого мы снова будем использовать симулятор CordovaSim.

Щелкните правой кнопкой мыши по проекту в PHP Explorer и выберите Run As | Запустите с CordovaSim .

Попробуйте и добавьте нового клиента!

Подводя итог, мы сделали добавление новой страницы в наше мобильное приложение и привязали ее к серверному API.

Шаг 5. Тестирование как собственного приложения для Android

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

Zend Studio интегрирована с Apache Cordova, самой популярной и широко используемой сегодня средой разработки гибридных мобильных приложений. Помимо других функций, эта интеграция предоставляет средства запуска для тестирования приложений на собственных эмуляторах и устройствах, а также включает в себя серию генераторов, способных экспортировать проекты на собственной платформе, такие как проекты XCode или Android, и компилировать их.