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

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

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

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

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

今⽇のハンズオンで作成するアプリ

reserved. 今⽇作成するサンプルの構成 AppPot 社内DB MySQL Monaca HTML5 AppPot SDK phpMyAdmin 取引先テーブル Gateway API Login API

reserved. サンプル画⾯のフロー 7 ログイン画⾯取引先⼀覧画⾯取引先詳細・追加画⾯

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

Monaca、Onsen UIの概要

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

Reserved. HTML5モバイルアプリの登場 Webの標準技術（HTML5/CSS/JavaScript）を使って、ワンソースでiOS/Androidの両OSに対応したモバイルアプリ開発を⾏えます。

Reserved. HTML5モバイルアプリ⽤フレームワーク Cordova（旧PhoneGap） Apacheソフトウェア財団

Reserved. Cordovaの仕組み Cordova૚ HTML5૚ アプリ本体は HTML5で実装 CordovaがOSに合わせたネイティブコードを提供 OS 1. JavaScriptでAPI実⾏ 2. Cordovaがネイティブ機能を実⾏

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

Reserved. Monacaの紹介

Reserved. Cordova開発環境：Monaca 15万⼈が利⽤する Cordova開発環境実機でのリアルタイム検証が可能 UIフレームワーク Onsen UI搭載安⼼の⽇本語サポート Monacaは⽇本でもっとも普及しているCordova開発環境の⼀つです。

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

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

Reserved. HTML5モバイルアプリのための UIフレームワーク搭載

Reserved. Onsen UI •  ハイパフォーマンスなUIを実現 •  プラットフォームを判別して⾃動でスタイルが変化

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

AppPotの概要

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

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

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

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

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

Exercise 1 : AppPotへアプリ、サービスを登録

reserved. AppPotの管理コンソールから作成するアプリの登録を⾏なう管理者IDでログインアプリの情報を⼊⼒アプリを登録

reserved. 配布した管理者アカウントでログイン https://trial.apppot.net/apppot/

reserved. アプリ定義の作成アプリ管理を選択追加をクリック

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

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）の機能を提供

reserved. サービスの登録 34 サービス管理を選択サービスの作成をクリック

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

Exercise ２: プロジェクトのインポートと設定

reserved. プロジェクトのインポートと設定 n  以下のような⼿順で設定を⾏う 1.  プロジェクトの取り込み 2.  AppPotへの接続情報、アプリ定義の設定

reserved. プロジェクトのインポートと設定 38 Import Projectをクリック

reserved. プロジェクトのインポートと設定 39 任意の名前を⼊⼒ URLを指定してインポートを選択し、以下のURLを⼊⼒ https://goo.gl/Fmgzxp

reserved. プロジェクトのインポートと設定 40 プロジェクトが追加された「開く」をクリック

reserved. AppPot SDKについて n  インポートしたプロジェクトにはAppPot SDKが既に設定済み 41 既にダウンロード＆読み込み設定済み既にダウンロード＆読み込み設定済み

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>

reserved. プロジェクトのインポートと設定 43 www/js/app.js をダブルクリック

reserved. プロジェクトのインポートと設定 44 お⼿元の資料のテナントIdを設定変更したら保存

Exercise 3 : ログイン機能の実装

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関数が呼ばれるこれを追記

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で提供

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というプロトコルを介す事で、再利⽤し易くなる

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が実⾏される。

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で、指定したページを表示する

reserved. 動かしてみましょう 51 ログイン n  実機で動かして⾒るために、Monacaアプリでログインをする

reserved. 動かしてみましょう 52 「実機デバッグ」をクリック

reserved. 動かしてみましょう 53 お⼿元のID/PWでログイン

Exercise 4 : 既存データベースへのSELECT機能の実装

reserved. 他システムDBの内容を確認 n  https://trial.apppot.net/phpMyAdmin/index.php db_connector_test の CustomerCompany をクリックお⼿元の資料の adminのID/PWでログイン

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の呼び出し

reserved. Gateway API（GET）を使ったデータ⼀覧取得 AppPot.Gateway.get("customer-db", "CustomerCompany", null, null, null) サービス名取得するテーブル名データ取得

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のテーブル名の変数に格納されている

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 }); }); }); } リストのオブジェクトを取得リストの中⾝を消す

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 を表⽰する

reserved. 動かしてみましょう 61 実機と同様、右側のエリアに表⽰される画⾯でも操作可能。

reserved. 動かしてみましょう 62 実機と同様、右側のエリアに表⽰される画⾯でも操作可能。

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); }); } ページのオブジェクトを保持しておく変数ページの中⾝を更新するために、ページのオブジェクトを保持しておくこれを追記

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でデータの単件取得を⾏う

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

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）を使ったデータ単件取得保存としておいたページに、取得したデータを埋め込んで表⽰する

reserved. 動かしてみましょう n  Cloud IDEで保存すると、⾃動的にスマートデバイスのアプリが更新されている 67

Exercise 5 : 既存データベースへの登録機能の実装

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'); }

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に送信するデータを取得するこれを追記

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)を呼び出し

reserved. Exercise 5 : Gateway API（POST）を使ったデータ更新 AppPot.Gateway.post("customer-db", "CustomerCompany", null, requestJson, null) データを作成する先の、テーブル名を指定する postメソッドで、データを作成できる第４引数に { key: value, ... } という形式のデータを指定

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）を使ったデータ更新前のページ（⼀覧画⾯）に戻っておしまい

reserved. 動かしてみましょう n  詳細画⾯が表⽰されることを確認 74 +を押して、 addCustomerData を呼び出す

reserved. 動かしてみましょう n  詳細画⾯が表⽰されることを確認 75 適当な情報を⼊⼒し、登録ボタンを押す⼊⼒した情報が追加されている⼊⼒した情報が表⽰される

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

まとめ

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

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

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

More Decks by AppPot

Other Decks in Programming

Featured

Transcript

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

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