Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Monaca ✕ AppPot エンタープライズモバイルアプリ 開発体験講座 / Monaca-AppPot-database-connector-handson

635fdadd58a5f4ebb4369a1d9fade025?s=47 AppPot
September 08, 2017

Monaca ✕ AppPot エンタープライズモバイルアプリ 開発体験講座 / Monaca-AppPot-database-connector-handson

2017/11/06開催のMonaca ✕ AppPotエンタープライズモバイルアプリ開発体験講座の資料です。

635fdadd58a5f4ebb4369a1d9fade025?s=128

AppPot

September 08, 2017
Tweet

Transcript

  1. .POBDB✕"QQ1PU ΤϯλʔϓϥΠζϞόΠϧΞϓϦ ։ൃମݧߨ࠲ 2017年11⽉6⽇ NCデザイン&コンサルティング株式会社

  2. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. ハンズオンの⽬的 n  MonacaとAppPotを使って簡単に他システムの データベースへ接続するアプリケーションを 作れることを体験していただく n  以下のURLから完成版のコードが⾒られます。 https://goo.gl/hdzS5Q 2
  3. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. タイムテーブル 3 内容 時間 ハンズオンで作成するアプリの概要 5分 Monacaとは 15分 AppPotとは 15分 Exercise 1 : AppPotへアプリ、サービスを登録 10分 Exercise 2 : プロジェクトのインポートと設定 15分 Exercise 3 : ログイン機能の実装 20分 Exercise 4 : 既存データベースへのSELECT機能の実装 20分 Exercise 5 : 既存データベースへの登録機能の実装 20分
  4. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 事前準備について n  Chromeブラウザのインストール n  Monacaアカウント登録 •  https://ja.monaca.io/ n  スマートフォンまたはタブレットへのMonacaデバッガーの インストール •  App Store https://itunes.apple.com/jp/app/monaca/id550941371 •  Google Play https://play.google.com/store/apps/details?id=mobi.monaca.debugger • 資料公開ページ:https://goo.gl/N98LT5 4
  5. 今⽇のハンズオンで作成するアプリ

  6. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 今⽇作成するサンプルの構成 AppPot 社内DB MySQL Monaca HTML5 AppPot SDK phpMyAdmin 取引先 テーブル Gateway API Login API
  7. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. サンプル画⾯のフロー 7 ログイン画⾯ 取引先⼀覧画⾯ 取引先詳細・追加画⾯
  8. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 取引先(CustomerCompany)テーブル No 項⽬論理名 項⽬物理名 型 1 企業Id companyId ⽂字列 2 企業名 companyName ⽂字列 3 企業名カナ companyNameKana ⽂字列 4 郵便番号 zipCode ⽂字列 5 住所 address ⽂字列 6 電話番号 phoneNumber ⽂字列 7 登録⽇ createdDatetime DATETIME 8 更新⽇ updatedDatetime DATETIME
  9. Monaca、Onsen UIの概要

  10. 10 URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right

    Reserved. モバイルアプリ開発に関する課題 開発⾔語がOS毎に異なるため、 1.  開発⼯数がかかる 2.  ソースコード管理の複雑化 3.  エンジニアの確保が困難 × ×
  11. 11 URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right

    Reserved. HTML5モバイルアプリの登場 Webの標準技術(HTML5/CSS/JavaScript)を使って、 ワンソースでiOS/Androidの両OSに対応したモバイル アプリ開発を⾏えます。
  12. 12 URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right

    Reserved. HTML5モバイルアプリ⽤フレーム ワーク Cordova(旧PhoneGap) Apacheソフトウェア財団
  13. 13 URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right

    Reserved. Cordovaの仕組み Cordova૚ HTML5૚ アプリ本体は HTML5で実装 CordovaがOSに 合わせたネイティブ コードを提供 OS 1. JavaScriptでAPI実⾏ 2. Cordovaがネイティブ  機能を実⾏
  14. 14 URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right

    Reserved. プラグインでネイティブ機能を拡張 ネイティブの各種機能は、プラグイン形式で実装され ています。 標準プラグインの他にも、第三者によって提供された プラグインを取り込んで機能を拡張できます。 標準プラグイン ・カメラ ・位置情報 ・電話帳 ・加速度センサー ・ファイルアクセス サードパーティ製 プラグイン ・Bluetooth ・プッシュ通知 ・アプリ内課⾦ ・バーコード読取 ・IoT ⾃作プラグイン
  15. 15 URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right

    Reserved. Monacaの紹介
  16. 16 URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right

    Reserved. Cordova開発環境:Monaca 15万⼈が利⽤する Cordova開発環境 実機でのリアルタイム 検証が可能 UIフレームワーク Onsen UI搭載 安⼼の⽇本語サポート Monacaは⽇本でもっとも普及しているCordova開発 環境の⼀つです。
  17. 17 URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right

    Reserved. Monacaの仕組み IDE デバッガー ビルドシステム クラウド ターゲットOSに 合わせた環境で アプリをビルド 開発環境として提供 IDE、ビルド環境はクラウドサービスとして提供。 どんな環境でもアプリ開発を始められます。 ソースコードは クラウド上に
  18. 18 URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right

    Reserved. Monacaデバッガー ①ファイルを編集 ②実機ですぐに動作確認 コンパイル処理やUSB経由での実機転送などは不要。 デバッグ専⽤アプリがネットワーク経由で変更箇所を 取得するため、リアルタイムに動作検証できます。 推奨環境 Google Chrome
  19. 19 URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right

    Reserved. HTML5モバイルアプリのための UIフレームワーク搭載
  20. 20 URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right

    Reserved. Onsen UI •  ハイパフォーマンスなUIを実現 •  プラットフォームを判別して⾃動でスタイルが変化
  21. 21 URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right

    Reserved. 使い⽅は独⾃タグを記述するだけの 簡単設計 <ons-toolbar></ons-toolbar> <ons-list-item></ons-list-item> <ons-tabbar></ons-tabbar>
  22. AppPotの概要

  23. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 特徴③ 特徴② 企業向けのバックエンドサービス『AppPot』 23 企業のスマートデバイス活⽤を⽀援する モバイルアプリの開発/運⽤プラットフォームです 既存の社内システムと の連携が容易 サーバー開発不要 企業で必要な機能を 実装済み 特徴① ίετ࡟ݮº։ൃظؒ୹ॖ
  24. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. これらの機能が画⾯のロジックから 利⽤可能です Ϣʔβʔ؅ཧ • ログイン/ログアウト • Active Directory/LDAP/Google Appsとの 認証連携 σʔλ؅ཧ • 端末とサーバー間のデータの同期 • トランザクション制御によるデータの信頼性 の確保 • オフライン状態での利⽤と、オンライン時の 再送 ΞϓϦͷ࢖༻ঢ়گͷϞχλϦϯά • 使⽤されている機能やエラー情報の収集、参 照 24 ϓογϡϝοηʔδɺFϝʔϧ • 管理画⾯やAPI経由でアプリからのPush メッセージの送信 • API経由でeメールの送信 ηΩϡϦςΟ • 端末内のデータの暗号化 • SQL Injectionなどのセキュリティ対応済 み ଞγεςϜͱͷ࿈ܞ • 他システムとのWebサービス、ファイル、 データベースとの連携 • 別オプションでERPパッケージ製品との連 携コネクター 各機能を簡単に使⽤するためのiOS / Android / JavaScriptの SDKが提供されています
  25. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. AppPotの代表的な事例 25 製造業 フィールドサポート ⽀援アプリ 写真なども活⽤し、その場で 記録・報告 製造業 化粧品メーカー 営業⽀援アプリ 営業⽇報のリアルタイム⼊⼒、管 理者とのコニュニケーション強化 製造業 ⼯場における 安全管理アプリ 安全管理のためのチェックリス トと、検査結果の管理 医療/製薬 MR向け営業⽀援アプリ 症例情報をトラッキングし、 ディテイリングを⽀援 医療/製薬 医師向け 医薬品ガイドアプリ 医薬品の説明動画を配信 医療/製薬 ⻭科向け患者コミュニケー ションアプリ アンケートや将来の⼝の中の 状態予想など ⼩売 百貨店商品カタログアプリ 店員からお客さまへの接客⽀援 ⼩売 百貨店 催事・イベント管理アプリ 店員からお客さまへの ご案内⽀援 建設 建設現場 施⼯データ管理アプリ 建設機器のデータ連携、 検査値⼊⼒ その他、業務向けアプリケーション多数
  26. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. AppPotの概要アーキテクチャ 26 クラウド AppPotサーバー Systems 既存システム群 Systems 他システム データ コネク ター         認証・認可 データ管理 プッシュ メッセージ ロギング 管理コンソール データベース、 Webサービス等 アプリ配布 デバイス管理 AppPot DB Client Application SDK Client Application SDK Client Application SDK Client Application AppPot SDK AppPot機能 提供範囲 AppPot機能 提供範囲外 スマートフォン/タブレット システム連 携 システム連携 API MDM 凡例 ユーザー管理 アプリ管理 People Process Platform
  27. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 他システム連携 27 既存の社内システムとの連携が容易 l  既存システムと簡単に連携するための 各種アダプターが⽤意されています Webサービス 各種データベース JMSなど l  既存システムのデータをアプリから活 ⽤したり、アプリのデータを既存シス テムに連携することで、より広い業務 でスマートデバイスを活⽤できます l  連携は必ずAppPotを介して⾏われ、 個別に開発されないため、シンプルな 構成となります People Process Platform
  28. Exercise 1 : AppPotへアプリ、サービスを登録

  29. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. AppPotの管理コンソールから作成するアプリの 登録を⾏なう 管理者IDでログイン アプリの情報を⼊⼒ アプリを登録
  30. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 配布した管理者アカウントでログイン https://trial.apppot.net/apppot/
  31. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. アプリ定義の作成 アプリ管理を選択 追加をクリック
  32. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. アプリ情報を⼊⼒ 任意の名前 任意の値、 今回は、Super Admin のアカウント名を⼊⼒ バージョンの識別⼦ 任意の値 今回は60を指定 今回はMONITORを 指定 今回は開発を選択 開発と本番でログやPush通知 の環境などが切り替わる アプリにアクセスできるグループを指定 開発⽤に組み込みで⽤意されている””グ ループを指定 アプリID、アプリ バージョン、アプリ キーは後ほどコード 実装時に利⽤するの でコピーしておく
  33. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. AppPotのGatewayの仕組み 33 AppPot 社内DB MySQL Monaca HTML5 AppPot SDK phpMyAdmin 取引先 テーブル Gateway API Login API Flow定義 •  DBへの接続URLの設定 •  テーブルに対するSELECT(GET)、 INSERT(POST)、 UPDATE(PUT)、 DELETE(DELETE)の機能を提供
  34. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. サービスの登録 34 サービス管理を 選択 サービスの作成 をクリック
  35. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. サービスの登録 35 任意の名前 アプリから指定する (今回はcustomer-dbと⼊⼒) 接続先に合わせて設定 今回はhttp 接続先に合わせて設定 今回はlocalhost 接続先に合わせて設定 今回は8082 接続先に合わせて設定 今回は4apppot このサービスを利⽤可能 なアプリを選択
  36. Exercise 2: プロジェクトのインポートと設定

  37. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. プロジェクトのインポートと設定 n  以下のような⼿順で設定を⾏う 1.  プロジェクトの取り込み 2.  AppPotへの接続情報、アプリ定義の設定
  38. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. プロジェクトのインポートと設定 38 Import Projectをクリック
  39. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. プロジェクトのインポートと設定 39 任意の名前を⼊⼒ URLを指定してインポートを選択し、 以下のURLを⼊⼒ https://goo.gl/Fmgzxp
  40. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. プロジェクトのインポートと設定 40 プロジェクトが追加された 「開く」をクリック
  41. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. AppPot SDKについて n  インポートしたプロジェクトにはAppPot SDKが既に設定済み 41 既にダウンロード&読み込 み設定済み 既にダウンロード&読み込 み設定済み
  42. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. AppPot SDKについて n  インポートせずに使⽤する場合は、以下の場所からダウンロード して、同じように設定したり、 •  https://cdn.rawgit.com/NCDCHub/apppot-sdk-js/v2.3/dist/apppot.min.js n  以下の様に、HTMLファイルのタグを書き換える 42 <script src="js/apppot.js"></script> <script src="https://cdn.rawgit.com/NCDCHub/apppot-sdk-js/v2.3/dist/apppot.min.js"></script>
  43. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. プロジェクトのインポートと設定 43 www/js/app.js をダブルクリック
  44. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. プロジェクトのインポートと設定 44 お⼿元の資料のテナントIdを 設定 変更したら保存
  45. Exercise 3 : ログイン機能の実装

  46. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Exercise 3 : ログイン機能の実装 function login() { var userName = document.getElementById('userName').value; var password = document.getElementById('password').value; AppPot.LocalAuthenticator.login(userName, password) .then(() => { console.log("Logined."); return navi.pushPage('list.html'); }) .catch((error) => { alert('ログインに失敗しました'); }); } <ons-page id="login-page"> <ons-toolbar> <div class="center">ログイン</div> </ons-toolbar> <div class="login-form"> <ons-input modifier="underbar" placeholder="User Name" id="userName"></ons-input> <ons-input type="password" modifier="underbar" placeholder="Password" id="password"></ons-input> <ons-button id="loginButton" onclick="login()">ログイン</ons-button> </div> </ons-page> index.html ボタンをクリックしたときに login関数が呼ばれる これを追記
  47. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Exercise 3 : ログイン機能の実装 function login() { var userName = document.getElementById('userName').value; var password = document.getElementById('password').value; AppPot.LocalAuthenticator.login(userName, password) .then(() => { console.log("Logined."); return navi.pushPage('list.html'); }) .catch((error) => { alert('ログインに失敗しました'); }); } <ons-page id="login-page"> <ons-toolbar> <div class="center">ログイン</div> </ons-toolbar> <div class="login-form"> <ons-input modifier="underbar" placeholder="User Name" id="userName"></ons-input> <ons-input type="password" modifier="underbar" placeholder="Password" id="password"></ons-input> <ons-button id="loginButton" onclick="login()">ログイン</ons-button> </div> </ons-page> index.html AppPot SDKが提供する、ログイン処理 を呼び出す ログイン処理はPromise型のAPIで提供
  48. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Exercise 3 : Promiseとは 48 n  ⾮同期処理によるコールバック地獄を解消するためのデザインパターン n  連続する⾮同期処理をあたかもシーケルシャルな処理のように記述できる n  順序付けしたい⾮同期処理間の依存関係を切り離せる // A→B→Cの順番で処理したい function asyncA() { 非同期処理A } function asyncB() { 非同期処理B } function asyncC() { 非同期処理C } var resultA = asyncA(); var resultB = asyncB(resultA); asyncC(resultB); console.log('D'); // 従来のやり方 function asyncA(callback) { 非同期処理A callback(resultA); } function asyncB(argA, callback) { 非同期処理B callback(resultB); } function asyncC(argB, callback) { 非同期処理C callback(resultC); } asyncA(function(resultA){ asyncB(resultA, function(resultB) { asyncC(resultB, function(resultC) { console.log('D'); }); }); }); // Promiseを使った場合 function asyncA() { return new Promise(function(resolve) { 非同期処理A resolve(resultA); }); }; function asyncB(argA) { return new Promise(function(resolve) { 非同期処理B resolve(resultB); }); }; function asyncC(argB) { return new Promise(function(resolve) { 非同期処理C resolve(resultC); }); }; asyncA() .then(asyncB) .then(asyncC) .then(function() { console.log('D'); }); •  ⾮同期処理の呼び出しに 順序関係がある •  実際はこのコードのよう には実装できない •  通常はコールバックを使って順⼥性を担保する •  コールバックは数が増えるとネストが深くなり処 理がわかりにくい •  ⾮同期処理を同期処理に近い⾒た⽬で記述でき、 わかりやすい •  Promiseというプロトコルを介す事で、再利⽤ し易くなる
  49. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Exercise 3 : ログイン機能の実装 function login() { var userName = document.getElementById('userName').value; var password = document.getElementById('password').value; AppPot.LocalAuthenticator.login(userName, password) .then(() => { console.log("Logined."); return navi.pushPage('list.html'); }) .catch((error) => { alert('ログインに失敗しました'); }); } <ons-page id="login-page"> <ons-toolbar> <div class="center">ログイン</div> </ons-toolbar> <div class="login-form"> <ons-input modifier="underbar" placeholder="User Name" id="userName"></ons-input> <ons-input type="password" modifier="underbar" placeholder="Password" id="password"></ons-input> <ons-button id="loginButton" onclick="login()">ログイン</ons-button> </div> </ons-page> index.html ログインが成功すると、thenが実⾏ される。 ログインに失敗すると、catchが実⾏ される。
  50. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Exercise 3 : ログイン機能の実装 function login() { var userName = document.getElementById('userName').value; var password = document.getElementById('password').value; AppPot.LocalAuthenticator.login(userName, password) .then(() => { console.log("Logined."); return navi.pushPage('list.html'); }) .catch((error) => { alert('ログインに失敗しました'); }); } <ons-page id="login-page"> <ons-toolbar> <div class="center">ログイン</div> </ons-toolbar> <div class="login-form"> <ons-input modifier="underbar" placeholder="User Name" id="userName"></ons-input> <ons-input type="password" modifier="underbar" placeholder="Password" id="password"></ons-input> <ons-button id="loginButton" onclick="login()">ログイン</ons-button> </div> </ons-page> index.html navi.pushPageで、指定したページを 表示する
  51. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 動かしてみましょう 51 ログイン n  実機で動かして⾒るために、Monacaアプリでログインをする
  52. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 動かしてみましょう 52 「実機デバッグ」をクリック
  53. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 動かしてみましょう 53 お⼿元のID/PWでログイン
  54. Exercise 4 : 既存データベースへのSELECT機能の実装

  55. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 他システムDBの内容を確認 n  https://trial.apppot.net/phpMyAdmin/index.php db_connector_test の CustomerCompany をクリック お⼿元の資料の adminのID/PWでログ イン
  56. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Gateway API(GET)を使ったデータ⼀覧取得 n  Gateway APIを呼び出す function getCustomerList() { return AppPot.Gateway.get("customer-db", "CustomerCompany", null, null, null) .then((response) => { console.log(JSON.stringify(response)); var customerData = response.CustomerCompany || []; var list = document.getElementById('customerList'); list.innerHTML = ''; customerData.forEach((customer) => { var template = '<ons-list-item modifier="chevron" ' + 'onclick="showCustomerData(' + customer.companyId + ')">' + customer.companyName + '</ons-list-item>'; ons.createElement(template, { append: list }); }); }); } GatewayAPIの呼び出し
  57. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Gateway API(GET)を使ったデータ⼀覧取得 AppPot.Gateway.get("customer-db", "CustomerCompany", null, null, null) サービス名 取得するテーブル名 データ取得
  58. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Gateway API(GET)を使ったデータ⼀覧取得 function getCustomerList() { return AppPot.Gateway.get("customer-db", "CustomerCompany", null, null, null) .then((response) => { console.log(JSON.stringify(response)); var customerData = response.CustomerCompany || []; var list = document.getElementById('customerList'); list.innerHTML = ''; customerData.forEach((customer) => { var template = '<ons-list-item modifier="chevron" ' + 'onclick="showCustomerData(' + customer.companyId + ')">' + customer.companyName + '</ons-list-item>'; ons.createElement(template, { append: list }); }); }); } 呼び出した結果は、 responseのテーブル名の 変数に格納されている
  59. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Gateway API(GET)を使ったデータ⼀覧取得 function getCustomerList() { return AppPot.Gateway.get("customer-db", "CustomerCompany", null, null, null) .then((response) => { console.log(JSON.stringify(response)); var customerData = response.CustomerCompany || []; var list = document.getElementById('customerList'); list.innerHTML = ''; customerData.forEach((customer) => { var template = '<ons-list-item modifier="chevron" ' + 'onclick="showCustomerData(' + customer.companyId + ')">' + customer.companyName + '</ons-list-item>'; ons.createElement(template, { append: list }); }); }); } リストのオブジェクトを取得 リストの中⾝を消す
  60. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Gateway API(GET)を使ったデータ⼀覧取得 function getCustomerList() { return AppPot.Gateway.get("customer-db", "CustomerCompany", null, null, null) .then((response) => { console.log(JSON.stringify(response)); var customerData = response.CustomerCompany || []; var list = document.getElementById('customerList'); list.innerHTML = ''; customerData.forEach((customer) => { var template = '<ons-list-item modifier="chevron" ' + 'onclick="showCustomerData(' + customer.companyId + ')">' + customer.companyName + '</ons-list-item>'; ons.createElement(template, { append: list }); }); }); } ⼀件ごとに、HTMLを組み⽴て、 リストに追加していく クリックされたら、 showCustomerData(companyId) を呼び出すように設定 リストには、companyName を表⽰する
  61. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 動かしてみましょう 61 実機と同様、右側のエ リアに表⽰される画⾯ でも操作可能。
  62. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 動かしてみましょう 62 実機と同様、右側のエ リアに表⽰される画⾯ でも操作可能。
  63. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Exercise 4 : Gateway API(GET)を使ったデータ単件取得 function showCustomerData(companyId) { var page; navi.pushPage('detail.html') .then((_page) => { page = _page; return AppPot.Gateway.get("customer-db", "query", { query: "select * from CustomerCompany where companyId = '" + companyId + "'" }, null); }) .then((response) => { var customer = response.query[0];    renderCustomerData(page, customer); }); } ページのオブジェクトを保持しておく変数 ページの中⾝を更新するために、ページのオブジェクトを保持しておく これを追記
  64. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. function showCustomerData(companyId) { var page; navi.pushPage('detail.html') .then((_page) => { page = _page; return AppPot.Gateway.get("customer-db", "query", { query: "select * from CustomerCompany where companyId = '" + companyId + "'" }, null); }) .then((response) => { var customer = response.query[0];    renderCustomerData(page, customer); }); } Exercise 4 : Gateway API(GET)を使ったデータ単件取得 Gateway APIでデータの単件取得を⾏う
  65. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Exercise 4 : Gateway API(GET)を使ったデータ単件取得 n  Gateway APIでのデータ取得 AppPot.Gateway.get("customer-db", "query", { query: "select * from CustomerCompany ..." }, null); 第3引数に、オブジェクトを指定し、 queryというkeyに、SQLを指定する query と指定すると、SQLを発⾏ することが可能
  66. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. function showCustomerData(companyId) { var page; navi.pushPage('detail.html') .then((_page) => { page = _page; return AppPot.Gateway.get("customer-db", "query", { query: "select * from CustomerCompany where companyId = '" + companyId + "'" }, null); }) .then((response) => { var customer = response.query[0];    renderCustomerData(page, customer); }); } Exercise 4 : Gateway API(GET)を使ったデータ単件取得 保存としておいたページに、取得した データを埋め込んで表⽰する
  67. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 動かしてみましょう n  Cloud IDEで保存すると、⾃動的にスマートデバイスのアプ リが更新されている 67
  68. Exercise 5 : 既存データベースへの登録機能の実装

  69. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Exercise 5 : Gateway API(POST)を使ったデータ更新 <!-- 取引先一覧画面 --> <ons-template id="list.html"> <ons-page> <ons-toolbar> <div class="center">取引先一覧</div> <div class="right"> <ons-if platform="ios other"> <ons-toolbar-button onclick="addCustomerData()"> <ons-icon icon="plus"></ons-icon> </ons-toolbar-button> </ons-if> </div> </ons-toolbar> .... <!-- 取引先登録画面 --> <ons-template id="regist.html"> <ons-page> <ons-toolbar> <div class="left"><ons-back-button>戻る</ons-back-button></div> <div class="center">取引先登録</div> </ons-toolbar> <div class="regist-form"> <ons-input modifier="underbar" placeholder="企業名" id="companyName"></ons-input> ... <ons-input modifier="underbar" placeholder="電話番号" id="zipCode"></ons-input> <ons-button id="registButton" onclick="regist()">登録</ons-button> </div> </ons-page> </ons-template> index.html ボタンを押したときに addCustomerData関数が呼ばれる ボタンを押したときに regist関数が呼ばれる function addCustomerData() { navi.pushPage('regist.html'); }
  70. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Exercise 5 : Gateway API(POST)を使ったデータ更新 function regist() { var requestJson = getSendData(); AppPot.Gateway.post("customer-db", "CustomerCompany", null, requestJson, null) .then((response) => { alert("登録しました"); return navi.popPage(); }); } HTMLの各フォームから GatewayAPIに送信するデータを取得する これを追記
  71. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. function regist() { var requestJson = getSendData(); AppPot.Gateway.post("customer-db", "CustomerCompany", null, requestJson, null) .then((response) => { alert("登録しました"); return navi.popPage(); }); } Exercise 5 : Gateway API(POST)を使ったデータ更新 Gateway API (POST)を呼び出し
  72. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. Exercise 5 : Gateway API(POST)を使ったデータ更新 AppPot.Gateway.post("customer-db", "CustomerCompany", null, requestJson, null) データを作成する先の、テーブ ル名を指定する postメソッドで、 データを作成できる 第4引数に { key: value, ... } という形式のデータを指定
  73. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. function regist() { var requestJson = getSendData(); AppPot.Gateway.post("customer-db", "CustomerCompany", null, requestJson, null) .then((response) => { alert("登録しました"); return navi.popPage(); }); } Exercise 5 : Gateway API(POST)を使ったデータ更新 前のページ(⼀覧画⾯)に戻っておしまい
  74. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 動かしてみましょう n  詳細画⾯が表⽰されることを確認 74 +を押して、 addCustomerData を呼び出す
  75. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 動かしてみましょう n  詳細画⾯が表⽰されることを確認 75 適当な情報を⼊⼒し、 登録ボタンを押す ⼊⼒した情報が追加 されている ⼊⼒した情報が表⽰ される
  76. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 他システムDBの内容を確認 n  phpMyAdminを使って確認 ⼊⼒した情報が追加 されている
  77. まとめ

  78. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights

    reserved. 今⽇やったこと n  MonacaとAppPotを使った、スマートデバイスアプリの作 成の仕⽅ n  AppPotのログイン機能を使った、ログインの実装 n  AppPotのGateway機能を使った、外部DBの情報取得 n  AppPotのGateway機能を使った、外部DBへの情報登録 n  完成版のプロジェクトを公開しています。 プロジェクトのインポートから、以下のURLを指定して下 さい。 https://github.com/NCDCHub/apppot-monaca-handson/archive/ handson-20171106.zip
  79. None