Добавление к iOS-приложению функции push-уведомлений

Изменяйте данные на мобильных устройствах без суеты

Чарльз Лу
Опубликовано 10.09.2015

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

Что нужно для создания приложения

• Учетная запись Bluemix
• Знакомство с руководством developerWorks Создание iOS-приложения с использованием службы IBM Mobile Data для Bluemix
• Опыт разработки iOS-приложений и инструмент для управления зависимостями библиотек CocoaPods
• Сертификат iOS-разработки и сертификат Apple Push Notification Service (APNS)
• Git и инструменты командной строки Cloud Foundry
• Желательно иметь учетную запись DevOps Services, связанную с вашим ID IBM, чтобы скопировать проект (с помощью кнопки «Получить код» ниже), что позволит отслеживать работу, организовать сотрудничество и автоматически развертывать node-компонент приложения.
• Желательно иметь локальную среду исполнения Node.js

Получить код

Шаг 1. Настройка рабочей среды

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

1. Войдите в свой личный кабинет Bluemix и выберите в верхнем меню Dashboard.
2. На открывшейся панели управления выберите CREATE AN APP.
3. Откроется мастер, который поможет вам создать приложение на сервере. Выберите Mobile.
4. Далее, выберите платформу: iOS 8.
5. Нажмите кнопку Continue.
6. Введите уникальное имя приложения и нажмите кнопку FINISH.
7. Вы увидите значения Route, App Key и App Secret. Нажмите кнопку Continue.
8. Базовая среда Bluemix готова. Чтобы снова увидеть значения Route, App Key и App Secret (они потребуются позже), достаточно щелкнуть на ссылке MOBILE OPTIONS.

   Кликните, чтобы увидеть увеличенное изображение

   
9. Попробуйте подключиться к серверу Bluemix, который вы только что создали, открыв в браузере страницу http://<имя_приложения>.mybluemix.net.
10. Установите инструмент cf, чтобы можно было легко загрузить код на сервер Bluemix. Этот шаг можно пропустить и развертывать код прямо из DevOps Services, но в этом случае вы не сможете отлаживать его. Я советую сохранить копию кода на своем локальном компьютере.
11. Откройте командную консоль и подключитесь к серверу Bluemix с помощью инструмента cf:

    cf login -a https://api.ng.bluemix.net

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

Шаг 2. Добавление службы Push к Bluemix

Чтобы добавить функцию push-уведомлений, скопируйте код прямо из DevOps Services. (Мы обсудим структуру кода для службы Push на шаге 5).

1. Клонируйте код из DevOps Services с помощью Git. Загрузятся три папки: bluelist-push-android, bluelist-push-iOS и bluelist-push-node, которые используются соответственно для платформ Android и iOS и среды Node.js.
2. Перейдите в папку node и отредактируйте файл manifest.yml, указав имя <приложения>, созданного на шаге 1. Отредактируйте файл app.js, указав правильные значения ApplicationId и ApplicationRoute, созданные на шаге 1.
3. Загрузите отредактированный код на сервер Bluemix с помощью инструмента cf:

   cf push <App> -p .

Теперь служба Push в Bluemix готова к использованию.

Шаг 3. Подготовка службы Apple Push Notification

Чтобы разработать и развернуть приложение с функцией push-уведомлений, нужно получить SSL-сертификаты от Apple Dev Center. Каждый сертификат действителен для одного приложения, указанного в его идентификаторе пакета; он также действителен для одной из двух сред: разработки или производства.

1. Откройте в браузере страницу Apple Developer Programs. Войдите, используя свой Apple ID и пароль, и перейдите на страницу iOS Dev Center.
2. Вы увидите разделы Certificates, Identifiers, Devices и Provisioning Profiles. В разделе Certificates создайте сертификат для разработки и для производства.
3. В разделе Identifiers создайте идентификатор приложения. Включите службу Push Notifications, сгенерируйте сертификат SSL Push Certificate и загрузите его.
   Примечание. Сертификаты для разработки и производства различаются.

   Кликните, чтобы увидеть увеличенное изображение

   
4. На странице Devices введите UDID своего iOS-устройства для разработки.
5. На странице Provisioning Profiles создайте профили для разработки или распространения.
6. Загрузите сертификат SSL Push Certificate, созданный на шаге 3.3. Откройте в браузере Bluemix и перейдите на страницу Push Service. Вы увидите две конфигурации: Sandbox Configuration (разработка) и Production Configuration. Выберите свой файл сертификата с паролем .p12 и загрузите его в Bluemix. Так как файлы сертификатов Sandbox и Production различаются, они не взаимозаменяемы.

   Кликните, чтобы увидеть увеличенное изображение

   

Шаг 4. Настройка и развертывание среды разработки iOS

1. Откройте консоль и перейдите в папку iOS, загруженную на шаге 2. Выполните команду Pod install, чтобы установить библиотеки зависимостей.
2. В Xcode откройте файл проекта iOS .xcworkspace и выполните его сборку.
3. Откройте файл Bluelist.plist и отредактируйте переменные applicationId, applicationSecret и applicationRoute.
4. Откройте файл Bluelist-info.plist и укажите идентификатор пакета, полученный на шаге 3.
5. Не забудьте отредактировать сертификат проекта, чтобы можно было развернуть код на устройстве.

Шаг 5. Тестирование уведомлений

1. Запустите приложение Bluelist из Xcode. Появится диалоговое окно: Allow Push Notification. Выберите Yes. Если по ошибке нажать No, то вы попадете в меню Settings > Notifications > Bluelist и можете случайно изменить параметры настройки.
2. Запустите приложение Bluelist с двух устройств. Если теперь изменить данные в одном из устройств, то другое устройство получит уведомление.

   Кликните, чтобы увидеть увеличенное изображение

   
3. Push-уведомления из Bluemix можно отправлять и вручную. Перейдите в службу Push в Bluemix, выберите вкладку Notification, заполните поле сообщения Message text, нажмите кнопку Next, а затем Send. Вскоре ваше iOS устройство получит уведомление.

   Кликните, чтобы увидеть увеличенное изображение

   

Push-уведомления работают, как и ожидалось.

Теперь разберем код, чтобы вы могли включать push-уведомления в свои приложения. Код, содержащийся в первом фрагменте, который в Node.js показан как app.js, сначала вызывает InitializeService, а затем отправляет уведомление, используя метод sendBroadcastNotification:

var config = {
     applicationRoute:"<ApplicationRoute>",
     applicationId:"<ApplicationId>",
     applicationSecret:"<ApplicationSecret>"
};
ibmbluemix.initialize(config);
var push = ibmpush.initializeService();
var message = {
     alert : "Push Notification from Javascript SDK",
     url : "https://www.bluemix.net"
}
push.sendBroadcastNotification(message,null).then(function (response) {
console.log("Notification sent successfully to all devices.", response);

Но когда же данные передаются в устройства? Посмотрите на следующий фрагмент. Любой http-запрос post, отправляемый в адрес http://<имя_приложения>.mybluemix.net/notifyOtherDevice, вызывает блок TO DO. В данном примере блок TO DO отправляет уведомления на устройства:

appContext=express.Router();
appContext.post('/notifyOtherDevices', function(req,res) {
     //TODO
});

Следующий фрагмент кода представляет собой push-код (APNS) в клиенте iOS. Сначала устройство регистрируется для получения уведомлений извне; пользователи видят диалоговое окно с вопросом, хотят ли они получать push-уведомления. Кроме того, имеются две функции обратного вызова: одна из них уведомляет пользователей, что функция уведомлений включена, и затем регистрирует Bluemix Push из IBM SDK. Вторая функция обратного вызова вызывается, когда в Bluemix происходит обновленные данных, и заставляет устройство обновить локальные данные приложения Bluelist.

Из AppDelegate.m:

- (BOOL)application:(UIApplication *)application 
        didFinishLaunchingWithOptions: NSDictionary *)launchOptions
{
…
        // Регистрация приложения для получения push-уведомлений
        [[UIApplication sharedApplication] registerForRemoteNotificationTypes:
            (UIRemoteNotificationTypeBadge | UIRemoteNotificationTypeSound | 
            UIRemoteNotificationTypeAlert)];
}

-(void) application:(UIApplication *)application 
            didRegisterForRemoteNotificationsWithDeviceToken:
    (NSData *)deviceToken
{
    // Регистрация устройства для получения Push-уведомлений
    IBMPush *pushService = [IBMPush service];
    [[pushService registerDevice:CONSUMER_ID withConsumerId:CONSUMER_ID
           withDeviceToken:deviceToken.description]continueWithBlock:^id(BFTask *task) {
        if(task.error) {
            NSLog(@"Device Registration failed with error: %@", task.error);
        }
        return nil;
    }];
}

-(void) application:(UIApplication *)application 
        didReceiveRemoteNotification: NSDictionary *)userInfo
{
    // Обработка Push-уведомления путем перезагрузки списка и получения актуальных данных 
    [self.listViewController listItems: nil];
}

Наконец, несколько слов о синхронизации данных. Нам нужно попросить Bluemix уведомлять другие устройства об обновлении данных. В ListViewController.m можно найти массу примеров подобного кода. Вот один из них:

- (void) createItem: (IBM_Item*) item {
	[self.cloudCodeService post:@"notifyOtherDevices" withDataPayload:nil 
	    withHeaders: nil];
}

Но почему мы не видим синхронизации данных в своем коде? Потому что служба Bluemix Mobile Data управляет синхронизацией данных автоматически. После обновления данных сервер Bluemix вызывает вторую функцию обратного вызова в AppDelegate.m и заставляет устройство перезагрузить данные для их обновления.

Заключение

Это руководство учит, как создать с нуля мобильное приложение в IBM Bluemix, запустить приложение Node.js, заставить службу Push взаимодействовать с различными устройствами и, наконец, выполнять обмен данными.

Ресурсы для скачивания

• этот контент в PDF

Похожие темы

• Начало работы с Node.js (демонстрация)
• Node.js
• Bluemix Developers Community