[3-F] コンテナとJavaとOracle JETによるアプリ開発ハッカソン

Transcription

1 [Hands-on: 3-F] コンテナと Java と Oracle JET によるアプリ開発ハッカソン 日本オラクル株式会社 Fusion Middleware Business Unit PaaS 事業推進室 Java Day Tokyo 年 5 月 24 日

2 Safe Harbor Statement The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle s products remains at the sole discretion of Oracle. 2

3 本日の流れ 1. Introduction: 30min (15:10-15:40) オラクルクラウド全体概要 Oracle JET と Application Container Cloud 説明 2. ハンズオン : 70min (15:40-16:50) コンテナと Java と Oracle JET を用いたアプリ開発のハンズオン 3. ハッカソン : 50min (17:00-17:50) ハンズオンで用いたアプリを元にしたカスタマイズ 4. ハッカソン発表 : 20min (17:50-18:10) ハッカソンの成果物を発表 3

4 Introduction Oracle Cloud Overview 4

5 Oracle Cloud Platform (PaaS/IaaS) 全体像 Database NoSQL Database Big Data Big Data SQL データ管理 Big Data Preparation Database Backup Exadata IT 運用管理 IT Analytics Log Analytics Application Performance Monitoring アイデンティティ マネージメント Identity Documents Social コンテンツ & ソーシャル コンピュート Sites Elastic Compute Cloud Dedicated Compute Cloud Bare Metal Compute Cloud ストレージ Object Storage Archive Storage Block Storage Java Developer Mobile Integration SOA Process Internet of Things アプリケーション開発 Application Builder Application Container (Node, Java SE) インテグレーション API Manager GoldenGate IoT ビジネス アナリティクス Data Visualization Business Intelligence Big Data Discovery ネットワーク Software VPN Hardware VPN Fast Connect 5

6 オンプレミスとクラウドの互換性 DEVELOP AND DEPLOY ANYWHERE On-Premises 同じ アーキテクチャ 同じ オラクル製品 同じ 知識 ノウハウ Cloud オンプレミスで培った標準技術をクラウドへ クラウドで開発 運用したシステムをオンプレミスへ 6

7 Oracle Cloud Platform: アプリケーション開発 エンタープライズ クラウドネイティブ Java Cloud Application Builder Cloud Oracle JET Developer Cloud Database Cloud Oracle APEX Application Container Cloud Management Cloud Oracle Documents Cloud DevOps 性能監視ログ監視 IT 監視 7

8 Application Container Cloud と Oracle JET Architecture 8

9 DEMONSTRATION 9

10 Demo Application Architecture UI とビジネスロジックの分離 Docker Container 拡張性と可搬性の確保 UI(HTML5/JavaScript) Oracle JET (Front-end JavaScript Framework) Browser json REST API Call [{"deptno":20,"empno":7369,"ename":"s MITH","hiredate":" T21:58:24Z","job":"CLERK","mgr":7902, "sal":800},{"comm":300,"deptno":30,"em pno":7499,"ename":"allen","hiredate":" T21:58:24Z","job":"SALESMAN","mgr": 7698,"sal":1600}, App Application Container Cloud Service ステートレス ( 状態を保持しない ) 依存関係の分離 ( 環境変数で宣言 ) 10

11 Docker Container Server-side >> UI(HTML5/JavaScript) Oracle JET (Front-end JavaScript Framework) Browser json REST API Call [{"deptno":20,"empno":7369,"ename":"s MITH","hiredate":" T21:58:24Z","job":"CLERK","mgr":7902, "sal":800},{"comm":300,"deptno":30,"em pno":7499,"ename":"allen","hiredate":" T21:58:24Z","job":"SALESMAN","mgr": 7698,"sal":1600}, App Application Container Cloud Service 11

12 Application Container Cloud Docker ベースの軽量プラットフォーム Java SE Java (App SE1) (App 1) Docker Docker Load Balancer Node Node (App 2) (App 2) Docker Docker Java SE Java (App SE3) (App 3) Java SE Node.js Ruby Docker Docker 概要 多様な開発言語に対応 Java, Node.js, Ruby, Python, PHP ロードバランサーを内包 無停止で拡張 / 縮退が可能 特徴 (Java Runtime) Java Flight Recorder(JFR) : 組み込みJFRによる稼働記録 Oracle Javaの長期保守 : Java SEのupdateを長期間提供 12

13 Build Zip App.jar App.zip Application Container Cloud 設定 Java バージョン アプリ起動コマンド App 組み込み App Server App.jar Manifest.json { } "runtime": { "majorversion": "8" }, "command": "java -jar App.jar", "release": { "version": "1.0" }, 13

14 Build Zip Deploy! App.jar App.zip Docker Container App App.jar App.zip 組み込み App Server Oracle JDK Load Balancer Manifest.json Java SE Docker Node.js Docker Ruby Docker 14

15 Application Container Cloud - Architecture Node Java Image Image Docker Image Repository Application Image Private Tenant Developer Application Archive Image Builder Load Balancer Java SE Docker Node Docker Ruby Docker 15

16 Application Container Cloud 拡張性と可搬性を確保 サーバーレス コンテナの物理的な配置を意識しない インスタンスの数とサイズ ( メモリ ) を即座に変更可能 ステートレス ( 状態を保持しない ) 外部サービスとの依存関係の分離 16

17 Docker Container UI(HTML5/JavaScript) Oracle JET (Front-end JavaScript Framework) Browser json REST API Call [{"deptno":20,"empno":7369,"ename":"s MITH","hiredate":" T21:58:24Z","job":"CLERK","mgr":7902, "sal":800},{"comm":300,"deptno":30,"em pno":7499,"ename":"allen","hiredate":" T21:58:24Z","job":"SALESMAN","mgr": 7698,"sal":1600}, << Front-end App Application Container Cloud Service 17

18 Oracle JET JavaScript Extension Toolkit フロントエンド開発用の JavaScript ライブラリ 18

19 JET = 5 OSSs Oracle 19

20 JET = 5 OSSs Oracle Knockout.js 双方向データバインディング jquery DOM 操作 + Ajax jquery UI UI ウィジェットファクトリ RequireJS JS リソース管理 Hammer タッチ ジェスチャー 20

21 JET = 5 OSSs Oracle データモデル API UI コンポーネント SPA ルーティング レスポンシブレイアウト データ検証 変換 ローカライズ 21

22 JET = 5 OSSs Oracle データモデル API バージョン SPA ルーティング 整合性管理 UI コンポーネント レスポンシブレイアウト データ検証 変換 ローカライズ 22

23 23

24 24

25

26 Hackathon 26

27 Hackathon 趣旨 チュートリアルをなぞることから一歩踏み出して色々試すことで 更に理解を深める 技術を楽しむ Agenda ハッカソン : 50min (17:00-17:50) ハンズオンで用いたアプリを元にしたカスタマイズ 成果物の発表会 : 20min (17:50-18:10) ハッカソンの成果物を発表 27

28 自由に色々試してみてください ではどうぞ! と 言われましても 28

29 お題 ちょっとアイデアが浮かばないな という場合は 取り組んでみてください あくまでひとつの案で これにこだわる必要はありません アイデアをお持ちの方は自由に色々試してみてください 29

30 お題 パックマンを作ってみよう 30

31 1. まずは作ってみよう ヒント サーバー側だけ修正 画面は修正不要 サーバーから返す Employee の List は 2 行 それぞれの Employee オブジェクトの Salary 値 : 1 つめ =15, 2 つめ =85 31

32 出来た方は 2. データラベルを外してみよう ヒント Index.html を修正 チャート属性 styledefaults を追加する 参考 Cookbook > Pie Chart: Data Labels ents-piechart-datalabels.html Recipe 1.On the chart's styledefaults object, set the attribute datalabelposition to 'auto', 'outsideslice', 'center', or 'none'. 32

33 出来た方は 3. 色を変えてみよう ヒント main.js を修正 色を指定するのは chartseries にデータを詰めてる箇所 JobId が 'brown' の行には '#663300' を 'yellow' の行には '#FFFF00' をセットする 参考 Cookbook > Pie Chart: Styles ents-piechart-styles.html Recipe Series の color attribute に色指定します 33

34 出来た方は 4. 向きを変えてみよう ヒント サーバーから返す Employee の List は 3 行 それぞれの Salary 値は 15,15,70 main.js では 1 行目と 3 行目は同じ色 #FFFF00 を指定します ( おまけ ) 別のアプローチとして main.js 側だけ修正する方法もあります ( サーバーからのデータを無視する ) 34

35 これ以外のカスタマイズ例 表のカスタマイズ 列の追加 ( 電子メール, 人事評価 ) メールリンク Rating Gauge: Horizontal を利用 [COOKBOOK] jet/uicomponents-ratinggaugeratinggaugecomponent.html 35

36 これ以外のカスタマイズ例 Twitter と連携 Twitter4j Java Day Tokyo 2016 のハッシュタグ 全体 >#JDT2016 (or #JavaDayTokyo) このハッカソン >#JDT2016_4F 36

37