【Swift編】ニフクラ mobile backend でクーポン配信アプリを作ろう！ #Swift

事前準備

ニフクラ mobile backend のアカウント登録がお済みでない方は、ホームページ右上にある「無料登録」ボタンをクリックして、アカウント登録を実施してください

事前準備

ニフクラ mobile backend とは

サービス紹介

スマホアプリで汎用的に実装される機能を、クラウドサービスとして提供しているサービスです
- 通称「mBaaS」と呼びます

ニフクラ mobile backend とは

iOS SDKの特徴

SDKのインストールが必要です
- 今回は実装済み
- 参考：クイックスタート

ニフクラ mobile backend とは

iOS SDKの特徴

SDKの初期化処理が必要です
- 後で処理を実装します

NCMB.setApplicationKey("YOUR_NCMB_APPLICATIONKEY", clientKey: "YOUR_NCMB_CLIENTKEY")

ニフクラ mobile backend とは

iOS SDKの特徴

サーバへリクエスト処理には、同期処理と非同期処理があります

// 例）保存の場合
/* 同期処理 */
save(nil)
/* 非同期処理 */
saveInBackgroundWithBlock(nil)

ニフクラ mobile backend とは

iOS SDKの特徴

同期処理と非同期処理
- 同期処理はその処理が完了するまで、次の処理が実行されません
- 非同期処理はバックグラウンドで処理を実行し、次の処理を実行します

ハンズオンセミナーの概要

「mBaaS Shop List」アプリ

クーポン配信アプリをイメージした「mBaaS Shop List」アプリの作成を通して、mBaaSの機能を理解していきます
mBaaSの連携部分をコーディングし、アプリを完成させ、次の内容を実現していきます

ハンズオンセミナーの概要

「mBaaS Shop List」アプリ

会員登録をするとお店情報を見ることができます
お店のお気に入り登録ができ、お気に入り登録をしたお店からプッシュ通知で届きます
性別や都道府県限定のプッシュ通知ができます
お店からのプッシュ通知でクーポンを直接配信することができます

ハンズオンセミナーの概要

「mBaaS Shop List」アプリ

ハンズオンセミナーの具体的なの流れ

ハンズオンの準備
会員管理機能の作成
Shop情報の設定
お気に入り登録機能の作成
プッシュ通知を送信①セグメント配信
プッシュ通知を送信②リッチプッシュ

ハンズオンの準備

Xcodeプロジェクトをダウンロード

下記リンクをクリックして、ZIPファイルでダウンロードしてください

　　　 SwiftAdvancePushApp

ハンズオンの準備

Xcodeプロジェクトをダウンロード

ディレクトリにある「SwiftAdvancePushApp.xcworkspace」をダブルクリックして、Xcodeを開いてください

ハンズオンの準備

プロジェクトにあらかじめ実施していること

mBaaS iOS SDKのインストール
mBaaSとの連携以外の処理のコーディング
- アプリのデザインをMain.storyboardで作成し、処理は画面ごとViewControllerにコーディングしています

ハンズオンの準備

mBaaSの準備

mBaaSにログインしてアプリを作成します

ハンズオンの準備

APIキーの設定とSDKの初期化

AppDelegate.swiftを開きます
applications(_:didFinishLaunchingWithOptions)メソッド内に処理を実装します

ハンズオンの準備

APIキーの設定とSDKの初期化

AppDelegate.Swift

// 【mBaaS】 APIキーの設定とSDKの初期化
NCMB.setApplicationKey("YOUR_NCMB_APPLICATIONKEY", clientKey: "YOUR_NCMB_CLIENTKEY")

ハンズオンの準備

APIキーの設定とSDKの初期化

「YOUR_NCMB_APPLICATIONKEY」，「YOUR_NCMB_CLIENTKEY」の部分にはアプリ作成時に発行されたAPIキーに書き換えてください
- APIキーは、mBaaSのダッシュボードから「アプリ設定」→「基本」にあります

会員管理機能の作成

mBaaSの設定

会員管理設定の「メールアドレス/パスワード認証」を許可します

会員管理機能の作成

mBaaSの設定

会員管理機能の作成

会員管理①：会員登録用メールを要求する

会員管理機能の作成

会員管理①：会員登録用メールを要求する

SignUpViewController.swiftを開きます
会員登録処理を実装します

会員管理機能の作成

会員管理①：会員登録用メールを要求する

SignUpViewController.swift

// 【mBaaS：会員管理①】会員登録用メールを要求する
NCMBUser.requestAuthenticationMailInBackground(address.text) { (error: NSError!) -> Void in
    if error != nil {
        // 会員登録用メールの要求失敗時の処理
        print("エラーが発生しました：\(error!.code)")
        self.statusLabel.text = "エラーが発生しました：\(error!.code)"
    } else {
        // 会員登録用メールの要求失敗時の処理
        print("登録用メールを送信しました")
        self.statusLabel.text = "登録用メールを送信しました"
    }
}

会員管理機能の作成

会員管理①：会員登録用メールを要求する

それぞれ処理を追記します

// 会員登録用メールの要求失敗時の処理
print("エラーが発生しました：\(error!.code)")
statusLabel.text = "エラーが発生しました：\(error!.code)"

会員管理機能の作成

会員管理①：会員登録用メールを要求する

それぞれ処理を追記します

// 会員登録用メールの要求失敗時の処理
print("登録用メールを送信しました")
statusLabel.text = "登録用メールを送信しました"

会員管理機能の作成

会員管理②：メールアドレスとパスワードでログイン

会員管理機能の作成

会員管理②：メールアドレスとパスワードでログイン

LoginViewController.swiftを開きます
ログイン処理を実装します

会員管理機能の作成

会員管理②：メールアドレスとパスワードでログイン

LoginViewController.swift

// 【mBaaS：会員管理②】メールアドレスとパスワードでログイン
NCMBUser.logInWithMailAddressInBackground(address.text, password: password.text) { (user: NCMBUser!, error: NSError!) -> Void in
    if error != nil {
        // ログイン失敗時の処理

    }else{
        // ログイン成功時の処理

    }
}

会員管理機能の作成

会員管理②：メールアドレスとパスワードでログイン

それぞれ処理を追記します

// ログイン失敗時の処理
print("ログインに失敗しました:\(error.code)")
self.statusLabel.text = "ログインに失敗しました:\(error.code)"

会員管理機能の作成

会員管理②：メールアドレスとパスワードでログイン

それぞれ処理を追記します

// ログイン成功時の処理
print("ログインに成功しました:\(user.objectId)")
// AppDelegateにユーザー情報を保持
self.appDelegate.current_user = user as NCMBUser
// TextFieldを空にする
self.cleanTextField()
// statusLabelを空にする
self.statusLabel.text = ""
// 画面遷移
self.performSegueWithIdentifier("login", sender: self)

会員管理機能の作成

動作確認(1)ログインをしてみましょう

ログイン画面で「会員登録」をタップします
会員登録画面でメールアドレスを入力し、「登録メールを送信」をタップします

会員管理機能の作成

動作確認(1)ログインをしてみましょう

会員管理機能の作成

動作確認(1)ログインをしてみましょう

会員登録メールが届くので、パスワード設定します

会員管理機能の作成

動作確認(1)ログインをしてみましょう

再びログイン画面に戻り「メールアドレス」と「パスワード」でログインします
ログを確認してください
- エラーコード一覧

会員管理機能の作成

会員管理③：ユーザー情報更新

会員管理機能の作成

会員管理③：ユーザー情報更新

TopViewController.swiftを開きます
初回のみ表示されるユーザー情報登録画面に入力した情報をmBaaSのユーザー情報に追加する処理を実装します

会員管理機能の作成

会員管理③：ユーザー情報更新

TopViewController.swift

// 【mBaaS：会員管理③】ユーザー情報更新
// ログイン中のユーザーを取得
let user = NCMBUser.currentUser()
// ユーザー情報を設定
user.setObject(self.nickname.text, forKey: "nickname")
user.setObject(self.GENDER_CONFIG[self.genderSegCon.selectedSegmentIndex], forKey: "gender")
user.setObject(self.prefecture.text, forKey: "prefecture")
user.setObject([] as Array<String>, forKey: "favorite")
// user情報の更新
user.saveInBackgroundWithBlock({(error: NSError!) -> Void in
    if error != nil {
        // 更新失敗時の処理

    } else {
        // 更新成功時の処理

    }
})

会員管理機能の作成

会員管理③：ユーザー情報更新

それぞれ処理を追記します

// 更新失敗時の処理
print("ユーザー情報更新に失敗しました:\(error.code)")
self.viewLabel.text = "登録に失敗しました（更新）:\(error.code)"

会員管理機能の作成

会員管理③：ユーザー情報更新

それぞれ処理を追記します

// 更新成功時の処理
print("ユーザー情報更新に成功しました")
// AppDelegateに保持していたユーザー情報の更新
self.appDelegate.current_user = user as NCMBUser
// 【mBaaS：プッシュ通知①】installationにユーザー情報を紐づける
  /*****後でここに処理を記述します*****/

// 画面を閉じる
self.registerView.hidden = true
// ニックネーム表示用ラベルの更新
self.nicknameLabel.text = "\(self.appDelegate.current_user.objectForKey("nickname"))さん、こんにちは！"
// 画面更新
self.checkShop()

Shop情報の設定

mBaaSにShop情報を用意する（データストア）

次の手順でアプリで使用するShop情報をmBaaSに設定します

Shop情報の設定

mBaaSにShop情報を用意する（データストア）

ニフクラ mobile backend のダッシュボードから「データストア」を開く
「＋作成▼」ボタンをクリックし、「インポート」をクリックします

Shop情報の設定

mBaaSにShop情報を用意する（データストア）

クラス名に「Shop」と入力します
ダウンロードしたサンプルプロジェクトにあるSettingフォルダ内の「Shop.json」を選択してアップロードします

Shop情報の設定

mBaaSにShop情報を用意する（データストア）

Shop情報の設定

mBaaSにShop情報を用意する（データストア）

こんな感じでインポートされます

Shop情報の設定

mBaaSにShop情報を用意する（ファイルストア）

次の手順で各icon・Shop画面・リッチプッシュで使用する画像をmBaaSに設定します

ニフクラ mobile backend のダッシュボードから「ファイルストア」を開く
「↑アップロード」ボタンをクリックします

Shop情報の設定

mBaaSにShop情報を用意する（ファイルストア）

ダウンロードしたサンプルプロジェクトにあるSettingフォルダ内の「icon」「Shop」「Sale」内にあるファイルをすべてをアップロードします

Shop情報の設定

mBaaSにShop情報を用意する（ファイルストア）

Shop情報の設定

mBaaSにShop情報を用意する（ファイルストア）

こんな感じでアップロードされます

Shop情報の設定

データストア：「Shop」クラスのデータを取得

アプリ側で先ほどmBaaSに設定したShopデータとimageデータを取得します

Shop情報の設定

データストア：「Shop」クラスのデータを取得

TopViewController.swiftを開きます
インポートしたShopクラスのデータを取得する処理を実装します

Shop情報の設定

データストア：「Shop」クラスのデータを取得

TopViewController.swift

// 【mBaaS：データストア】「Shop」クラスのデータを取得
// 「Shop」クラスのクエリを作成
let query = NCMBQuery(className: "Shop")
// データストアを検索
query.findObjectsInBackgroundWithBlock({ (objects: [AnyObject]!, error: NSError!) -> Void in
    if error != nil {
        // 検索失敗時の処理

    } else {
        // 検索成功時の処理

    }
})

Shop情報の設定

データストア：「Shop」クラスのデータを取得

それぞれ処理を追記します

// 検索失敗時の処理
print("検索に失敗しました:\(error.code)")

Shop情報の設定

データストア：「Shop」クラスのデータを取得

それぞれ処理を追記します

// 検索成功時の処理
print("検索に成功しました")
// AppDelegateに「Shop」クラスの情報を保持
self.appDelegate.shopList = objects as! Array
// テーブルの更新
self.shopTableView.reloadData()

Shop情報の設定

ファイルストア①：icon画像の取得

Shop情報の設定

ファイルストア①：icon画像の取得

CustomCell.swiftを開きます
- CustomCell.swiftはテーブルのセルを作成するファイルです
トップ画面に各ショップのアイコンをmBaaSから取得して表示する処理を実装します

Shop情報の設定

ファイルストア①：icon画像の取得

CustomCell.swift

// 【mBaaS：ファイルストア①】icon画像の取得
// 取得した「Shop」クラスデータからicon名を取得
let imageName = object.objectForKey("icon_image") as! String
// ファイル名を設定
let imageFile = NCMBFile.fileWithName(imageName, data: nil)
// ファイルを検索
imageFile.getDataInBackgroundWithBlock { (data: NSData!, error: NSError!) -> Void in
    if error != nil {
        // ファイル取得失敗時の処理

    } else {
        // ファイル取得成功時の処理

    }
}

Shop情報の設定

ファイルストア①：icon画像の取得

それぞれ処理を追記します

// ファイル取得失敗時の処理
print("icon画像の取得に失敗しました:\(error.code)")

Shop情報の設定

ファイルストア①：icon画像の取得

それぞれ処理を追記します

// ファイル取得成功時の処理
print("icon画像の取得に成功しました")
// icon画像を設定
self.iconImageView_top.image = UIImage.init(data: data)

Shop情報の設定

ファイルストア②：Shop画面画像の取得

Shop情報の設定

ファイルストア②：Shop画像の取得

ShopViewController.swiftを開きます
Shop画面に各ショップの画像をmBaaSから取得して表示する処理を実装します
- 「*****Shop画像名*****」を「shop_image」に書き換えます

Shop情報の設定

ファイルストア②：Shop画像の取得

ShopViewController.swift

// 【mBaaS：ファイルストア②】Shop画像の取得
// 取得した「Shop」クラスデータからShop画面用の画像名を取得
let imageName = appDelegate.shopList[shopIndex].objectForKey("*****Shop画像名*****") as! String

Shop情報の設定

ファイルストア②：Shop画像の取得

// 【mBaaS：ファイルストア②】Shop画像の取得
// 取得した「Shop」クラスデータからshop画面用の画像名を取得
let imageName = appDelegate.shopList[shopIndex].objectForKey("shop_image") as! String
// ファイル名を設定
let imageFile = NCMBFile.fileWithName(imageName, data: nil)
// ファイルを検索
imageFile.getDataInBackgroundWithBlock { (data: NSData!, error: NSError!) -> Void in
    if error != nil {
        // ファイル取得失敗時の処理

    } else {
        // ファイル取得成功時の処理

    }
}

Shop情報の設定

動作確認(2)会員情報登録とShop情報表示

ログインをします
ログイン後初回のみ、ユーザー情報登録画面が表示されます
入力し「登録」をタップします
- このとき、会員情報が更新されますので、mBaaSのダッシュボードを確認してみましょう

Shop情報の設定

動作確認(2)会員情報登録とShop情報表示

ログを確認してください
- エラーコード一覧

Shop情報の設定

動作確認(2)会員情報登録とShop情報表示

トップ画面が表示されます
- このとき、画面に「icon画像」「Shop名」「カテゴリ」が表示されます
ログを確認してください
- エラーコード一覧

Shop情報の設定

動作確認(2)会員情報登録とShop情報表示

Shopを１つ選んでタップします
- mBaaSに登録されているimageにアクセスし、Shopページ（画像）が表示されます
ログを確認してください
- エラーコード一覧

Shop情報の設定

動作確認(2)会員情報登録とShop情報表示

会員ページをタップします
- 初回登録画面で登録した内容と、ログイン用のアドレスを表示しています　
ログを確認してください
- エラーコード一覧

Shop情報の設定

動作確認(2)会員情報登録とShop情報表示

お気に入り登録機能の作成

お気に入り機能について

お気に入り機能は好きなShopをお気に入りとして保存できる機能です
- 「お気に入り」画面と「Shop」画面で登録可能です

お気に入り登録機能の作成

お気に入り機能について

「お気に入り」画面ではSwitchのON/OFFを設定し、「登録」ボタンで設定します
「Shop」画面では右上のハートマークをタップすることでShop単位で設定できます
- 「♥」…ON　「♡」…OFF

お気に入り登録機能の作成

お気に入り機能について

お気に入り登録機能の作成

会員管理④：ユーザー情報の更新

FavoriteViewController.swiftを開きます
mBaaSの会員データとして保持していた「favorite」データを、お気に入り画面で設定したデータに更新する処理を実装します

お気に入り登録機能の作成

会員管理④：ユーザー情報の更新

「*****お気に入り情報*****」を「favorite」に書き換えます

FavoriteViewController.swift

// 【mBaaS：会員管理④】ユーザー情報の更新
// 更新された値を設定
user.setObject(appDelegate.favoriteObjectIdTemporaryArray, forKey: "*****お気に入り情報*****")

お気に入り登録機能の作成

会員管理④：ユーザー情報の更新

FavoriteViewController.swift

// 【mBaaS：会員管理④】ユーザー情報の更新
// ログイン中のユーザーを取得
let user = NCMBUser.currentUser()
// favoriteに更新された値を設定
user.setObject(appDelegate.favoriteObjectIdTemporaryArray, forKey: "favorite")
// ユーザー情報を更新
user.saveInBackgroundWithBlock { (error: NSError!) -> Void in
    if error != nil {
        // 更新に失敗した場合の処理
    } else {
        // 更新に成功した場合の処理
    }
}

お気に入り登録機能の作成

会員管理⑤：ユーザー情報の更新

ShopViewController.swiftを開きます
同様にmBaaSの会員データとして保持していた「favorite」データを、Shop画面で設定したデータに更新する処理を実装します
- 「*****お気に入り情報*****」を「favorite」に書き換えます

ShopViewController.swift

// 【mBaaS：会員管理⑤】ユーザー情報の更新
// 更新された値を設定
user.setObject(favoriteObjectIdArray, forKey: "*****お気に入り情報*****")

お気に入り登録機能の作成

動作確認(3)お気に入り情報登録・更新

ログインをするとトップ画面が表示されます
画面下の「お気に入り」をタップします
お気に入り画面が表示されます
- お気に入り登録をしてみましょう

お気に入り登録機能の作成

動作確認(3)お気に入り情報登録・更新

各Shop画面も開いて同様に登録してみましょう
ログを確認してください
- エラーコード一覧

お気に入り登録機能の作成

動作確認(3)お気に入り情報登録・更新

プッシュ通知を送信

このあとのデバッグについて

以下の用意が必要です
- デバッグ用の実機
- プッシュ通知用証明書(p12形式)

プッシュ通知を送信

このあとのデバッグについて

証明書の取得がまだの場合は下記をご参照ください
- 【サンプル】アプリにプッシュ通知を組み込もう！

プッシュ通知を送信

mBaaSの設定

プッシュ通知の許可とAPNsの証明書(p12形式)のアップロードを行います

プッシュ通知を送信

プッシュ通知①：デバイストークンの取得

AppDelegate.swiftを開きます
applications(_:didFinishLaunchingWithOptions)メソッド内のSDKの初期化を実装した部分の直ぐ下に処理を実装します

プッシュ通知を送信

プッシュ通知①：デバイストークンの取得

AppDelegate.swift

// 【mBaaS：プッシュ通知①】デバイストークンの取得
// デバイストークンの要求
if (NSFoundationVersionNumber > NSFoundationVersionNumber_iOS_7_1){
    /** iOS8以上 **/
    //通知のタイプを設定したsettingを用意
    let type : UIUserNotificationType = [.Alert, .Badge, .Sound]
    let setting = UIUserNotificationSettings(forTypes: type, categories: nil)
    //通知のタイプを設定
    application.registerUserNotificationSettings(setting)
    //DevoceTokenを要求
    application.registerForRemoteNotifications()
}else{
    /** iOS8未満 **/
    let type : UIRemoteNotificationType = [.Alert, .Badge, .Sound]
    UIApplication.sharedApplication().registerForRemoteNotificationTypes(type)
}

プッシュ通知を送信

プッシュ通知②：デバイストークンの取得後に呼び出されるメソッド

AppDelegate.swiftを開きます
applications(_:didFinishLaunchingWithOptions)メソッド下(外)に次のメソッドを実装します

プッシュ通知を送信

プッシュ通知②：デバイストークンの取得後に呼び出されるメソッド

AppDelegate.swift

// 【mBaaS：プッシュ通知②】デバイストークンの取得後に呼び出されるメソッド
func application(application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: NSData){
    // 端末情報を扱うNCMBInstallationのインスタンスを作成
    let installation = NCMBInstallation.currentInstallation()
    // デバイストークンの設定
    installation.setDeviceTokenFromData(deviceToken)
    // 端末情報をデータストアに登録
    installation.saveInBackgroundWithBlock { (error: NSError!) -> Void in
        if (error != nil){
            // 端末情報の登録に失敗した時の処理

        }else{
            // 端末情報の登録に成功した時の処理

        }
    }
}

プッシュ通知を送信

プッシュ通知②：デバイストークンの取得後に呼び出されるメソッド

それぞれ処理を追記します

// 端末情報の登録に失敗した時の処理
print("デバイストークン取得に失敗しました:\(error.code)")

プッシュ通知を送信

プッシュ通知②：デバイストークンの取得後に呼び出されるメソッド

それぞれ処理を追記します

// 端末情報の登録に成功した時の処理
print("デバイストークン取得に成功しました")