LoginSignup
1
1

More than 5 years have passed since last update.

@nsuhara

Kony AppPlatformで作成したiOS/AndroidアプリとSalesforceをデータ連携する

Last updated at Posted at 2018-12-20

はじめに

(Mac環境の記事ですが、Windows環境も同じ手順になります。環境依存の部分は読み替えてお試しください。)

この記事を最後まで読むと、次のことができるようになります。

  • iOS/AndroidアプリからSalesforceのレコードを作成する
  • SalesforceのレコードをiOS/Androidアプリで表示する

Salesforceのイメージ画像

スクリーンショット 2018-12-20 17.47.39.png

アプリのイメージ画像

IMG_0409.PNG  IMG_0406.PNG  IMG_0411.PNG

関連する記事

実行環境

  • macOS Mojave 10.14.1
  • Kony Visualizer 8.3.10
  • Salesforce Winter '19

ソースコード

実際に実装内容やソースコードを追いながら読むとより理解が深まるかと思います。是非ご活用ください。

GitHub

事前準備

  • シナリオ
    1. iOS/AndroidアプリからSalesforce(Sampleアプリ)のレコード(First Name, Last Name)を登録する。
    2. 登録したレコードをiOS/Androidアプリで表示する。

Salesforce

  1. Kony AppPlatformと繋ぐオブジェクトを作成する

    項目名 API参照名
    Sample Sample__c
    First Name First_Name__c
    Last Name First_Name__c

    スクリーンショット 2018-12-20 17.47.39.png

  2. 接続アプリケーションを設定する

    設定 -> 作成 -> アプリケーション -> 接続アプリケーション -> 新規をクリックする

    項目名 設定値
    接続アプリケーション名 Sample
    API 参照名 Sample
    取引先責任者 メール sample@gmail.com
    OAuth 設定の有効化 TRUE
    コールバック URL https://sample.auth0.com/login/callback
    選択した OAuth 範囲 基本情報へのアクセス
    Web サーバフローの秘密が必要 TRUE

    スクリーンショット 2018-12-19 23.42.27.png

    接続アプリケーションを使用する前に、サーバ上で変更が有効になるまで 2 ～ 10 分お待ちください。

Kony AppPlatform

  1. メニュー画面を作成する

    項目名 オブジェクト 説明
    lblMenu ラベル タイトル
    btnAdd ボタン Salesforceレコード登録
    btnView ボタン Salesforceレコード表示
    btnExit ボタン アプリ終了

    スクリーンショット 2018-12-19 11.32.15.png

  2. 登録画面を作成する

    項目名 オブジェクト 説明
    lblAdd ラベル タイトル
    lblFirstName ラベル First Nameラベル
    txtFirstName テキストボックス First Name入力
    lblLastName ラベル Last Nameラベル
    txtLastName テキストボックス Last Name入力
    btnAdd ボタン Salesforceレコード登録
    btnBack ボタン Menuへ戻る

    スクリーンショット 2018-12-19 11.33.13.png

  3. 表示画面を作成する

    項目名 オブジェクト 説明
    lblView ラベル タイトル
    segView セグメント Salesforceリスト表示
    btnBack ボタン Menuへ戻る

    スクリーンショット 2018-12-19 11.33.40.png

Salesforce(Sample)の登録

設定手順

  1. OAuth設定

    Data -> Configureをクリック

    スクリーンショット 2018-12-20 0.17.00.png

    GET DATAのSalesforceをクリック

    項目名 設定値
    Name Sample
    Authentication Specify Login Endpoint
    Endpoint URL Salesforce接続アプリケーションのコンシューマ鍵 (参照1)
    Client ID Salesforce接続アプリケーションのコンシューマの秘密 (参照1)
    User ID SalesforceユーザID
    Password Salesforceパスワード + セキュリティトークン (参照2)

    スクリーンショット 2018-12-20 0.32.31.png

    最後にSAVE & GENERATEをクリックします。

    (参照1)

    スクリーンショット 2018-12-20 0.29.33.png

    (参照2)

    セキュリティトークンは、私の設定 -> 個人用 -> 私のセキュリティトークのリセットから再発行ができます。

    スクリーンショット 2018-12-20 0.43.24.png

  2. Salesforce(Sample)の接続

    SAVE & GENERATEの続きです。Sample__cを検索しチェックボックにチェックを入れます。最後にNext -> GENERATEの順番にクリックします。

    スクリーンショット 2018-12-20 0.49.56.png

    Data ModelにSample__c追加されたら接続完了です。

    スクリーンショット 2018-12-20 0.54.33.png

レコード登録の実装

設定手順

  1. データマッピング

    Projectタブ -> Mobile -> Forms -> frmAdd -> flxAdd -> btnAddをクリックします。

    Propertiesタブ -> ActionたタブのonClickのEditをクリックします。

    スクリーンショット 2018-12-20 16.11.33.png

    Network APIsの中のInvoke Object Serviceをクリックします。

    Select ServiceにSample$Sample__c、Select Methodにcreateを設定します。

    スクリーンショット 2018-12-20 16.15.39.png

    Call Object ServiceをクリックしてからOpen Mapping Editorをクリックします。

    iOS/AndroidアプリとSalesforce(Sample)のデータをクリックしてマッピングします。

    アプリ Mapping Salesforce
    txtFirstNameのtext -> FirstName__c
    txtLastNameのtext -> LastName__c

    スクリーンショット 2018-12-20 16.18.13.png

  2. テキストボックスのクリア

    CallbackをクリックしてFunctionsの中からAdd Snippetをクリックします。

    データ送信後にテキストボックスをクリアするコードを記述します。

    CodeSnippet.js
    self.view.txtFirstName.text = null;
self.view.txtLastName.text = null;

    スクリーンショット 2018-12-20 17.02.33.png

  3. Infoポップアップ表示

    CallbackをクリックしてExternalの中からShow Alertをクリックします。

    データ送信後のInfoポップアップ表示を設定します。

    項目名 設定値
    Alert Type Info
    Alert Title Result
    Yes Label OK
    Alert Message Sent Data.

    スクリーンショット 2018-12-20 17.09.28.png

動作確認

  1. 登録画面の確認

    Menu -> AddボタンをタップしてSalesforceのレコードを登録します。

    IMG_0406.PNG

    Salesforceに登録されたことを確認します。

    スクリーンショット 2018-12-20 17.23.06.png

  2. Infoポップアップ表示の確認

    レコードを登録した後にInfoポップアップが表示されることを確認します。

    IMG_0407.PNG

  3. テキストボックスクリアの確認

    レコードを登録した後にテキストボックスがクリアされることを確認します。

    IMG_0408.PNG

レコード表示の実装

設定手順

  1. 表示項目テンプレートの作成

    Templatesタブ -> Segments -> 右クリック -> New Templateをクリックします。

    項目名 オブジェクト 説明
    lblFirstName ラベル First Nameラベル
    txtFirstName ラベル Salesforce First Name表示
    lblLastName ラベル Last Nameラベル
    txtLastName ラベル Salesforce Last Name表示

    スクリーンショット 2018-12-20 9.58.25.png

    注) flxViewDetailsの中でFlexContainerを使うとNetwork APIsのMappingができない(正確にはMappingはできるがデータ連携ができない)。セグメントの中ではFlexContainerを使わない方が良さそうです。

    例) lblFirstNameとtxtFirstNameをFlexContainerでグループ化するなど

  2. テンプレートの割り当て

    Projectタブ -> Mobile -> Forms -> frmView -> flxView -> segViewをクリックします。

    Propertiesタブ -> SegmentたタブのRow TemplateにsegViewDetailsを設定します。

    スクリーンショット 2018-12-20 8.32.21.png

    テンプレートが設定されます。

    スクリーンショット 2018-12-20 8.38.04.png

  3. データマッピング

    Projectタブ -> Mobile -> Forms -> frmViewをクリックします。

    Propertiesタブ -> ActionたタブのonMappingのEditをクリックします。

    スクリーンショット 2018-12-20 8.42.52.png

    Network APIsの中のInvoke Object Serviceをクリックします。

    Select ServiceにSample$Sample__c、Select Methodにgetを設定します。

    スクリーンショット 2018-12-20 8.54.59.png

    CallbackをクリックしてからMappingの中のAdd Mappingをクリックします。

    スクリーンショット 2018-12-20 9.07.14.png

    Salesforce(Sample)とiOS/Androidアプリのデータをクリックしてマッピングします。

    Salesforce Mapping アプリ
    records -> masterdatamap
    FirstName__c -> txtFirstNameのtext
    LastName__c -> txtLastNameのtext

    スクリーンショット 2018-12-20 9.10.49.png

動作確認

  1. リスト表示の確認

    Salesforce側の登録状況を確認します。

    スクリーンショット 2018-12-20 17.47.39.png

    Menu -> ViewボタンをタップしてSalesforceのレコードを確認します。

    IMG_0410.PNG -> IMG_0411.PNG

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1