Быстрое создание приложений с визуальным интерфейсом: Appery.io показывает, как отправлять SMS через Twilio из мобильного приложения

Appery.io позволяет создавать мощные мобильные приложения в кратчайшие сроки с помощью интуитивно понятных визуальных инструментов. Используя Twilio, вы можете легко интегрировать API Twilio с облачной средой быстрой разработки Appery.io, включающей встроенные бэкенд-сервисы, и быстро начать отправку SMS.

В этом руководстве технический директор Appery.io Макс Кац покажет, как создать мобильное приложение с нуля, использующее API Twilio SMS для отправки сообщений.

**Что нужно для начала работы**

Прежде чем начать, вам понадобятся учётные записи Twilio и Appery.io. Воспользуйтесь ссылками ниже, чтобы зарегистрироваться и получить бесплатные аккаунты.

**Что мы будем создавать**

Вы создадите мобильное веб-приложение и гибридное мобильное приложение, которое позволит отправлять SMS-сообщения с помощью API Twilio. Приложение будет состоять из одной страницы, с которой можно отправлять SMS, и будет выглядеть следующим образом:

Создание приложения в Appery.io ничем не отличается от работы с любым другим инструментом. Вы создадите новое приложение, спроектируете пользовательский интерфейс, подключитесь к API Twilio, протестируете и развернёте приложение.

Начнём с создания нового приложения.

— Войдя в платформу, нажмите кнопку **Создать новое приложение**. В поле названия приложения введите *SmsApp* и нажмите кнопку **Создать**.

— В разделе **Проект** выберите **Страницы > startScreen**. Откроется экран устройства. Страница должна выглядеть так:

Вы только что создали совершенно новое мобильное приложение. Это было просто, не так ли?

Далее мы создадим пользовательский интерфейс приложения.

С помощью визуального редактора Appery.io создание интерфейса приложения также происходит быстро.

— Нажмите на заголовок и в разделе **Свойства** измените свойство **Текст** на *App*.

— Из **Палитры** перетащите компонент **Input** на экран устройства. Здесь пользователь будет вводить номер телефона, на который будет отправлено SMS-сообщение. Внесём ещё несколько изменений в это поле.

— В разделе **Свойства** удалите значение в поле **Текст** и для **Placeholder** введите *Телефон*.

— Для **Типа** выберите значение *tel*. При запуске приложения на мобильном устройстве появится цифровая клавиатура для ввода номера телефона.

— Далее добавьте компонент **Textarea** ниже поля **Текст**. Это поле будет использоваться для ввода самого сообщения.

— Удалите значение из поля **Текст** и установите для **Placeholder** значение *Сообщение*.

— Нам нужен ещё один компонент — это **Кнопка**. Перетащите компонент **Button** и расположите его под **Textarea**.

— Измените свойство **Текст** на *Отправить сообщение*. Ваша страница должна выглядеть так:

Это было быстро, не правда ли? Теперь вы готовы протестировать интерфейс.

Нажмите кнопку **Тест** на панели инструментов, чтобы запустить приложение в браузере.

Вы также можете быстро протестировать приложение на своём устройстве. Вернитесь в меню **Тест** и нажмите на стрелку вниз, чтобы увидеть доступные опции. Установите флажок **Публичный**. Вы можете отсканировать QR-код, отображаемый в окне тестирования, или тот же QR-код доступен на странице тестирования в браузере.

Тема по умолчанию (jQuery Mobile) имеет несколько вариантов оформления, которые можно выбрать. Просто выберите название страницы в навигационной цепочке и выберите новое значение свойства **Swatch**.

Также очень просто добавить новую тему в приложение. Давайте добавим тему, основанную на Material Design от Google.

— В разделе **Создать новое** выберите **Из плагина**.

— В категории **Мобильные** установите флажок **Material Design UI Theme**.

— Нажмите **Импортировать выбранные плагины**.

— Вам будет предложено: «*Хотите ли вы установить страницу плагина в качестве стартовой для приложения?*» Оставьте значение по умолчанию **оставить текущую** и нажмите **Применить настройки**.

— После добавления темы-плагина в приложение необходимо установить её в качестве активной темы. Перейдите в **Открыть проект > Настройки приложения > Общие**.

— Для **Тема** установите значение **material-design**. Также можно установить **Swatch**, но это можно сделать и непосредственно на странице. Например, установив **Swatch** на **A**, ваша страница должна выглядеть так:

Вы можете снова протестировать приложение в браузере, чтобы увидеть новую тему.

Теперь, когда у вас есть интерфейс приложения, следующим шагом будет подключение к REST API Twilio.

Использование любого REST API сервиса в приложении Appery.io включает следующие общие шаги:

— Определение REST API сервиса

— Определение параметров запроса

— Определение параметров ответа

— Тестирование сервиса

— Добавление сервиса на страницу

— Привязка сервиса к странице

Начнём подключение к Twilio. Информация, необходимая для сервиса, доступна здесь: https://www.twilio.com/user/account/developer-tools/api-explorer/message-create. Раздел с командой curl выглядит следующим образом:

— Выберите **Создать новое > Сервис**.

— Для **Имени** введите *SendSms*.

— Оставьте тип **REST** и нажмите **Создать сервис**. Сервис будет создан, и откроется редактор сервиса.

— Для **URL** введите: https://api.twilio.com/2010-04-01/Accounts//Messages.json

— Для **Метода** выберите **POST**.

— Для **Типа содержимого запроса** выберите **x-www-form-urlencoded**.

— Вам также нужно создать и использовать прокси. Нажмите **Новый канал** и для имени введите *TwilioProxy*. Нажмите **Создать**, чтобы создать прокси.

— Вам также нужно настроить прокси, перейдите на https://appery.io/proxy/ и откройте только что созданный прокси.

— В настройках прокси установите флажок **Использовать старую реализацию прокси (медленнее)**. На более позднем этапе мы покажем, как переключиться на использование новой реализации.

— Осталось сделать ещё одну вещь — добавить AccountSid и токен доступа в URL.

— Посмотрев на команду curl, скопируйте два числа после опции **-u**. Возможно, вам потребуется нажать, чтобы показать Auth Token (см. примечание выше).

— Вернитесь на вкладку **Настройки** и скопируйте значение между **https://** и **api.twilio.com/**. Оно должно выглядеть так: https://AccountSid:AuthToken@api.twilio.com/2010-04-01/Accounts/AC3526fbeedXXXXXX1ffe481b89e0fbcc7/Messages.json

— Также добавьте знак **@** между **AuthToken** и **api.twilio.com** (как показано выше).

— См. примечание о безопасности в конце этого раздела.

— Вернитесь в конструктор приложений и откройте вкладку **Запрос**.

— Определите следующие три параметра:

— To

— From

— Body

— **From** — это ваш номер Twilio. Вернитесь на https://www.twilio.com/user/account/developer-tools/api-explorer/message-create и найдите свой номер Twilio в команде curl, затем установите его в качестве значения по умолчанию.

Вы готовы протестировать сервис.

Небольшое примечание о безопасности: не очень безопасно хранить AccountSid и AuthToken на клиенте, так как оба значения могут быть легко доступны. На более позднем этапе мы перенесём их на сервер, чтобы они не были доступны в приложении (клиенте). Пока это упрощает тестирование.

С определёнными URL и параметрами запроса вы теперь можете протестировать сервис.

— Перейдите на вкладку **Тест**.

— Введите номер телефона для значения **To**. Если у вас пробный план Twilio, вы сможете отправлять сообщения только на подтверждённый номер Twilio.

— Введите любое сообщение в **Body**.

— Значение **From** уже должно быть установлено на ваш номер Twilio.

— Нажмите кнопку **Тест**, чтобы протестировать сервис. Вы должны увидеть ответ от Twilio в формате JSON:

— Нажмите **Импортировать как ответ**.

— Перейдите на вкладку **Ответ**, чтобы увидеть автоматически сгенерированный ответ.

У нас есть работающий сервис, который взаимодействует с Twilio. Далее мы добавим сервис на страницу.

— Откройте **startScreen** и нажмите на вкладку **Данные** (слева).

— Для **Добавить источник данных** выберите **Сервис > SendSms**, нажмите **Добавить**.

— Переименуйте имя экземпляра с **restservice1** на *send_sms*.

— Теперь нужно передать данные со страницы в сервис. Это делается в событии **Before send** (или сопоставление входных данных). Нажмите **Mapping**, чтобы открыть редактор сопоставления.

— Нажмите **Развернуть всё** на обеих сторонах. Левая сторона — это страница, правая — сервис.

— С помощью перетаскивания создайте следующие сопоставления:

Вы берёте значение телефона и значение сообщения и сопоставляете их с сервисом. Значение **From** по умолчанию установлено на ваш номер Twilio.

— Нажмите **Сохранить и вернуться**, чтобы сохранить сопоставление. Сервис Twilio возвращает много данных при отправке сообщения, но они нам сейчас не нужны, поэтому мы не будем ничего сопоставлять из сервиса обратно на страницу. Если бы нужно было что-то сопоставить, это делалось бы с помощью события **Success**.

— Вернитесь на вкладку **Дизайн**. Последний шаг — вызов сервиса.

— Выберите кнопку и нажмите на вкладку **События**.

— Для **Действия** выберите **Вызвать сервис > send_sms** и нажмите **Сохранить**.

Вы завершили создание приложения. Пора снова протестировать.

Нажмите кнопку **Тест** на панели инструментов, чтобы снова запустить приложение в браузере. Введите номер телефона (если у вас пробный план Twilio, используйте подтверждённый номер Twilio), введите сообщение и нажмите кнопку отправки.

Очень просто создать и протестировать приложение в браузере. Так же просто упаковать приложение с помощью PhoneGap, что позволит опубликовать его в магазине приложений и установить на устройство.

Чтобы экспортировать приложение, просто нажмите опцию **Экспорт** и выберите платформу:

Ещё одна вещь, которую нужно сделать, — это добавить дополнительный уровень безопасности в приложение. Вы хотите скрыть значения AccountSid и Auth Token от клиента. Если эти значения хранятся на клиенте, кто-то может получить к ним доступ. Их нужно хранить на сервере.

У приложения Appery.io есть возможность хранить конфиденциальные данные в базе данных. Давайте посмотрим, как это сделать.

— В конструкторе приложений нажмите **База данных** в меню.

— Чтобы создать новую базу данных, нажмите кнопку **Создать новую базу данных**. Для имени введите **TwilioDB** и нажмите **Создать**. Новая база данных будет создана и открыта.

— Далее нужно создать новую коллекцию. Нажмите **Создать новую коллекцию**. Для имени коллекции введите **Secrets**.

— Затем нужно создать два столбца. Чтобы создать новый столбец, нажмите **+Col**.

— Назовите первый столбец *key*.

— Назовите второй столбец *value*.

— Далее нужно вставить *AccountSid* в базу данных. Нажмите **+Row**. Для столбца **key** введите *AccountSid_db*, а для **value** — фактическое значение *AccountSid*.

— Те же шаги для вставки Auth Token в базу данных. Нажмите **+Row**. Для столбца **key** введите *AuthToken_db*, а для **value** — фактическое значение AuthToken. База данных должна выглядеть так:

Далее нужно настроить защищённый прокси.

— Перейдите на https://appery.io/proxy/. Вы должны увидеть созданный ранее прокси. Откройте его.

— Выберите **Использовать прокси + хранить конфиденциальные (приватные) данные в базе данных**.

— Появятся выпадающие списки, которые нужно связать с только что созданной базой данных.

— Для **База данных** выберите **TwilioDB**.

— Для **Коллекция** выберите **Secrets**.

— Для **Столбец ключа** выберите **key**.

— Для **Столбец значения** выберите **value**.

Вы только что настроили этот прокси для использования этой базы данных.

Последнее, что нужно сделать, — обновить само приложение.

— В конструкторе приложений откройте **Сервисы > SendSms**.

— Обновите URL сервиса на: *https://{AccountSid}:{AuthToken}@api.twilio.com/2010-04-01/Accounts/{AccountSid}/Messages.json*.

— Откройте вкладку **Запрос**, затем вкладку **Строка запроса**.

— Создайте два параметра и установите их значения:

— Имя: AccountSid, Значение: {AccountSid_db}

— Имя: AuthToken, Значение: {AuthToken_db}

Поскольку вы настроили прокси как защищённый и связали его с базой данных, значения AccountSid и Auth Token теперь будут храниться на сервере. При вызове API Twilio значения будут подставляться на сервере.

Создание мобильных приложений с Twilio и Appery.io — это быстро и просто. API Twilio можно быстро интегрировать, протестировать и обезопасить при создании мобильного приложения в Appery.io. Визуальные инструменты Appery.io позволяют быстро создавать корпоративные приложения с возможностями обмена сообщениями.

Помимо этого практического руководства, Appery.io также предоставляет готовый плагин для API Twilio Messaging. Чтобы добавить плагин в своё приложение, выберите **Создать новое > Из плагина**.

После импорта плагина вам нужно только установить значения AccountSid и AuthToken. Плагин позволяет отправлять SMS-сообщения, просматривать список всех сообщений и детали каждого сообщения.

*Узнайте больше об Appery.io здесь*