More than 5 years have passed since last update.

富士通クラウドテクノロジーズ株式会社

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

Last updated at 2017-12-07Posted at 2016-07-27

事前準備

ニフクラ 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("デバイストークン取得に成功しました")