More Related Content
Similar to Build an iOS app with Ionic and 4D
Similar to Build an iOS app with Ionic and 4D (20)
More from kmiyako
More from kmiyako (20)
Recently uploaded
Recently uploaded (14)
Build an iOS app with Ionic and 4D
- 2. 4D ➡ iOS 4D Web/Mobile iOS native
- 3. Ionic 代表的なハイブリッド・モバイルアプリ・フレームワーク ハイブリッドとは・・・ WebViewを利⽤してネイティブ⾵に動作するアプリ Onsen (https://onsen.io) Meteor (https://www.meteor.com) React Native (https://facebook.github.io/react-native/) 類似のフレームワーク ①ドラッグ/ドロップの画⾯作成ツール（Ionic Creator） ②おおきなコミュニティ・情報が豊富 ③4D Mobile powered by Wakandaとの親和性 ポイント HTML JavaScript
- 5. ワークフロー フリー版 Ionic Creator HTML/JS/CSS 4D REST API Web ➡ REST API iOS Native ➡ REST API ① ② ③ ④ ① Ionic Creatorで画面のプロトタイプを作成してダウンロード ② 4DデータベースにJSON/REST APIを追加 ③ ダウンロードしたファイルを書き換えて4DのREST APIに接続 ④ プロジェクトをビルドしてデバイスから4DのREST APIに接続
- 6. ⽤意するもの : Web 4D Developer Pro Web Server local + 1 IP address Ionic 無料アカウント 1 プロジェクト（公開） 基本エクスポート
- 7. ⽤意するもの : iOS Mac iPhone X code Apple Developer Network アカウント
- 8. ⽤意するもの : iOS ① Xcode ② コマンドラインツール ③ Homebrew ④ Node ⑤ Cordova ⑥ Ionic ⑦ Deployment Tools ⑧ iOSシミュレーター App Store xcode-select --install https://brew.sh/ brew install node npm install -g cordova npm install -g ionic npm install -g ios-deploy npm install -g ios-sim iOSアプリをビルドするにはMac, Xcode, Deployment Tools, Ionicが必要 Ionicを使用するためにはコマンドラインツールとiOSシミュレーターが必要 WebアプリをネイティブアプリにラッピングするにはCordovaが必要 CordovaをインストールするにはNodeが必要 NodeをインストールするにはHomebrewが必要 iOSアプリを実行するためにはiPhone, Apple Developerアカウントが必要 1 2 3 4 5 67 8
- 9. ⽤意するもの : HTTPS Let's Encrypt 認証局発⾏証明書 http://kb.4d.com/assetid=77671 認証局発⾏証明書 ⾃⼰署名証明書 OpenSSL GENERATE CERTIFICATE REQUEST GENERATE ENCRYPTION KEYPAIR v14 MD5 v15 SHA-256 署名
- 10. ⾃⼰署名証明書 コマンドライン openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout key.pem -out cert.pem アルゴリズム ビット数 1年有効 Country Name (2 letter code) [AU]:JP State or Province Name (full name) [Some-State]:Tokyo Locality Name (eg, city) []:Setagaya Organization Name (eg, company) [Internet Widgits Pty Ltd]:4D Organizational Unit Name (eg, section) []: Common Name (e.g. server FQDN or YOUR name) []:localhost
- 11. ⾃⼰署名証明書 $address:="localhost" ARRAY TEXT($k;6) ARRAY TEXT($v;6) MAKE CERTIFICATE (SHA256;2048;365;$k;$v;$req;$cert;$pubkey;$privkey) $v{1}:="JP" $v{2}:="Tokyo" $v{3}:="Setagaya" $v{4}:="Miyako" $v{5}:=$address $v{6}:="keisuke.miyako@4d.com" $k{1}:="C" $k{2}:="ST" $k{3}:="L" $k{4}:="O" $k{5}:="CN" $k{6}:="emailAddress" https://github.com/miyako/4d-plugin-convert-certificate プラグイン アルゴリズム ビット数 1年有効
- 42. 公開メソッド C_TEXT($1) QUERY([Contacts];[Contacts]ID=$1) C_OBJECT($record) OB SET($record; "LastName";[Contacts]LastName; "FirstName";[Contacts]FirstName; "id";[Contacts]ID; "Organization";[Contacts]Organization; "email";[Contacts]Email) WEB SEND TEXT(JSON Stringify($record); "application/json")
- 43. 公開メソッド C_TEXT($1) ALL RECORDS([Contacts]) C_OBJECT($template) OB SET($template; "LastName";->[Contacts]LastName; "FirstName";->[Contacts]FirstName) WEB SEND TEXT( Selection to JSON([Contacts];$template); "application/json")
- 44. 公開メソッド C_TEXT($1) $param:=Replace string(Substring($1;2);"@";"";*) QUERY([Contacts];[Contacts]LastName=$param+"@";*) QUERY([Contacts]; | ;[Contacts]FirstName=$param+"@") C_OBJECT($template) OB SET($template; "LastName";->[Contacts]LastName; "FirstName";->[Contacts]FirstName; "id";->[Contacts]ID; "Organization";->[Contacts]Organization; "email";->[Contacts]Email) WEB SEND TEXT( Selection to JSON([Contacts];$template); "application/json")
- 45. 公開メソッド C_TEXT($1;$path;$template;$json) $path:=Get 4D folder(HTML Root folder)+ "4D"+Folder separator+"contacts.4dtag" $template:=Document to text($path;"utf-8") PROCESS 4D TAGS($template;$json;$1) WEB SEND TEXT($json;"application/json")
- 46. 公開メソッド（プロパティ）
- 48. Angular テンプレート contact.html contacts.html サービス services.js ルーティング routes.js コントローラー controllers.js
- 49. ワークフロー フリー版 Ionic Creator HTML/JS/CSS 4D REST API Web ➡ REST API iOS Native ➡ REST API ① ② ③ ④
- 50. Ionic ionic serve cd ~/desktop ionic start Contacts blank --v1 ローカルで実⾏
- 51. 画像の遅延読み込み（任意） angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.directives','app.services','ionicLazyLoad']) app.js index.html <script src="js/ionic-image-lazy-load.js"></script> contacts.html <ion-content padding="true" class="has-header" lazy- scroll> <img image-lazy-src="https://192.168.1.174/4DACTION/ image?table=1&id={{Contact.id}}&width=40&height=40"> https://github.com/paveisistemas/ionic-image-lazy-load
- 52. CORS ARRAY TEXT($names;1) ARRAY TEXT($values;1) $names{1}:="Access-Control-Allow-Origin" $values{1}:="*" WEB SET HTTP HEADER($names;$values) contacts
- 53. ⾃⼰署名証明書 @implementation NSURLRequest(DataController) + (BOOL)allowsAnyHTTPSCertificateForHost:(NSString *)host { return YES; } @end AppDelegate.m
- 54. エミュレーター エミュレーター⽤にビルド ionic build ios ionic emulate ios エラー!?
- 56. アカウントの設定 コード署名
- 59. デバイス ionic build ios --device ionic run ios 無視して良い デバイス⽤にビルド エラー!? デバイスで実⾏（コマンドライン）
- 60. デバイス デバイス⽤にビルド / デバイスで実⾏（X code） クリック
- 61. デバイス デバイス⽤にビルド / デバイスで実⾏（X code） USB接続中 USB未接続
- 62. デバイス デバイス⽤にビルド / デバイスで実⾏（X code） クリック