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

[Hands-on: 3-F]
コンテナとJavaとOracle JET
によるアプリ開発ハッカソン
日本オラクル株式会社
Fusion Middleware Business Unit
PaaS事業推進室
Java Day Tokyo 2016
2016年5月24日
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
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.
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
2
本日の流れ
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)
– ハッカソンの成果物を発表
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
3
Introduction
Oracle Cloud Overview
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
4
Oracle Cloud Platform (PaaS/IaaS) 全体像
データ管理
•
•
•
•
Database
• Big Data Preparation
NoSQL Database • Database Backup
Big Data
• Exadata
Big Data SQL
アプリケーション開発
• Java
• Developer
• Mobile
IT 運用管理
• Application Builder
• Application Container
(Node, Java SE)
インテグレーション
• IT Analytics
• Log Analytics
• Application Performance
Monitoring
• Integration
• SOA
• Process
• Identity
• Internet of Things
• API Manager
• GoldenGate
アイデンティティ・マネージメント
IoT
コンテンツ & ソーシャル
• Documents
• Social
• Sites
ビジネス・アナリティクス
• Data Visualization
• Business Intelligence
ストレージ
コンピュート
• Elastic Compute Cloud
• Dedicated Compute Cloud
• Bare Metal Compute Cloud
• Object Storage
• Archive Storage
• Block Storage
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
• Big Data
Discovery
ネットワーク
• Software VPN
• Hardware VPN
• Fast Connect
5
オンプレミスとクラウドの互換性
DEVELOP AND DEPLOY ANYWHERE
On-Premises
同じ「アーキテクチャ」
同じ「オラクル製品」
同じ「知識・ノウハウ」
Cloud
オンプレミスで培った標準技術をクラウドへ
クラウドで開発・運用したシステムをオンプレミスへ
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
6
Oracle Cloud Platform: アプリケーション開発
クラウドネイティブ
エンタープライズ
Java Cloud
Oracle
JET
Application
Builder
Cloud
Oracle
APEX
Application Container
Cloud
Database
Cloud
Oracle
Documents
Cloud
Management Cloud
Developer Cloud
DevOps
性能監視 ログ監視
IT監視
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
7
Application Container CloudとOracle JET
Architecture
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
8
DEMONSTRATION
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
9
Demo Application Architecture
Docker
Container
UIとビジネスロ
ジックの分離
REST API Call
App
json
UI(HTML5/JavaScript)
Oracle JET
(Front-end JavaScript Framework)
Browser
[{"deptno":20,"empno":7369,"ename":"S
MITH","hiredate":"2016-0329T21:58:24Z","job":"CLERK","mgr":7902,
"sal":800},{"comm":300,"deptno":30,"em
pno":7499,"ename":"ALLEN","hiredate":"
2016-0329T21:58:24Z","job":"SALESMAN","mgr":
7698,"sal":1600},
拡張性と可搬性
の確保
ステートレス
(状態を保持しない)
依存関係の分離
(環境変数で宣言)
Application Container
Cloud Service
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
10
Docker
Container
Server-side >>
json
REST API Call
UI(HTML5/JavaScript)
Oracle JET
(Front-end JavaScript Framework)
Browser
App
[{"deptno":20,"empno":7369,"ename":"S
MITH","hiredate":"2016-0329T21:58:24Z","job":"CLERK","mgr":7902,
"sal":800},{"comm":300,"deptno":30,"em
pno":7499,"ename":"ALLEN","hiredate":"
2016-0329T21:58:24Z","job":"SALESMAN","mgr":
7698,"sal":1600},
Application Container
Cloud Service
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
11
Application Container Cloud
Dockerベースの軽量プラットフォーム
• 概要
– 多様な開発言語に対応
Java, Node.js, Ruby, Python, PHP…
– ロードバランサーを内包、無停止
で拡張/縮退が可能
Load Balancer
Java SE
Java
SE1)
(App
(AppSE
1)
Java
Node
Node
(App 2)
(App
2)
Node.js
Java SE
Java
SE3)
(App
(App 3)
Ruby
Docker
Docker
Docker
Docker
Docker
Docker
• 特徴 (Java Runtime)
– Java Flight Recorder(JFR)
: 組み込みJFRによる稼働記録
– Oracle Javaの長期保守
: Java SEのupdateを長期間提供
https://www.ruby-lang.org/ja/about/logo/
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
12
Build
Zip
App.jar
App.zip
App
App.jar
Application
Container Cloud設定
• Javaバージョン
• アプリ起動コマンド
{
組み込み
App
Server
Manifest.json
}
"runtime": {
"majorVersion": "8"
},
"command": "java -jar App.jar",
"release": {
"version": "1.0"
},
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
13
Build
Zip
Deploy!
App.jar
App.zip
Docker
Container
App
App.jar
App.zip
Oracle
JDK
組み込み
App
Server
Manifest.json
Load
Balancer
Java SE
Node.js
Ruby
Docker
Docker
Docker
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
14
Application Container Cloud - Architecture
Java Image
Node
Image
Application
Image
Private Tenant
Docker Image Repository
Developer
Application
Archive
Image Builder
Load Balancer
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
Java
SE
Node
Ruby
Docker
Docker
Docker
15
Application Container Cloud
拡張性と可搬性を確保
• サーバーレス
– ステートレス(状態を保持しない)
– コンテナの物理的な配置を意識しない
– インスタンスの数とサイズ(メモリ)を即座に – 外部サービスとの依存関係の分離
変更可能
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
16
Docker
Container
REST API Call
json
UI(HTML5/JavaScript)
Oracle JET
(Front-end JavaScript Framework)
Browser
<< Front-end
App
[{"deptno":20,"empno":7369,"ename":"S
MITH","hiredate":"2016-0329T21:58:24Z","job":"CLERK","mgr":7902,
"sal":800},{"comm":300,"deptno":30,"em
pno":7499,"ename":"ALLEN","hiredate":"
2016-0329T21:58:24Z","job":"SALESMAN","mgr":
7698,"sal":1600},
Application Container
Cloud Service
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
17
Oracle JET
• JavaScript Extension
Toolkit
• フロントエンド開発用の
JavaScript ライブラリ
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
18
JET = 5 OSSs × Oracle
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
19
JET = 5 OSSs × Oracle
Knockout.js
双方向データバインディ
ング
jQuery UI
UI ウィジェット ファクト
リ
jQuery
DOM 操作 + Ajax
RequireJS
JSリソース管理
Hammer
タッチ・ジェスチャー
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
20
JET = 5 OSSs × Oracle
データモデル API
UI コンポーネント
SPA ルーティング
レスポンシブ
レイアウト
データ検証・変換
ローカライズ
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
21
JET = 5 OSSs × Oracle
データモデル API
UI コンポーネント
SPA ルーティング
レスポンシブ
レイアウト
データ検証・変換
ローカライズ
バージョン
整合性管理
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
22
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
23
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
24
Hackathon
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
26
Hackathon
• 趣旨
– チュートリアルをなぞることから一歩踏み出して色々試すことで、更に理解
を深める
– 技術を楽しむ
• Agenda
– ハッカソン: 50min (17:00-17:50)
• ハンズオンで用いたアプリを元にしたカスタマイズ
– 成果物の発表会: 20min (17:50-18:10)
• ハッカソンの成果物を発表
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
27
自由に色々試してみてください。
ではどうぞ！
…と、言われましても…
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
28
お題
• ちょっとアイデアが浮かばないな、という場合は、取り組んでみて
ください
• あくまでひとつの案で、これにこだわる必要はありません。アイデ
アをお持ちの方は自由に色々試してみてください
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
29
お題
パックマンを作ってみよう
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
30
1. まずは作ってみよう
• ヒント
– サーバー側だけ修正。画面は修正不要
– サーバーから返すEmployeeのListは2行
– それぞれのEmployeeオブジェクトの
Salary値: 1つめ=15, 2つめ=85
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
31
出来た方は…
2. データラベルを外してみよう
• ヒント
– Index.htmlを修正
– チャート属性‘styleDefaults’を追加する
– 参考Cookbook > Pie Chart: Data Labels
http://www.oracle.com/webfolder/technetwork/jet/uiCompon
ents-pieChart-dataLabels.html
Recipe
1.On the chart's styleDefaults object, set the attribute
dataLabelPosition to 'auto', 'outsideSlice', 'center', or
'none'.
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
32
出来た方は…
3. 色を変えてみよう
• ヒント
– main.jsを修正
– 色を指定するのは、chartSeriesにデータ
を詰めてる箇所
– JobIdが'brown'の行には'#663300'を、
'yellow'の行には'#FFFF00'をセットする
– 参考Cookbook > Pie Chart: Styles
http://www.oracle.com/webfolder/technetwork/jet/uiCompon
ents-pieChart-styles.html
Recipe
• Seriesの’color’ attributeに色指定します
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
33
出来た方は…
4. 向きを変えてみよう
• ヒント
– サーバーから返すEmployeeのListは3行。
それぞれのSalary値は15,15,70
– main.jsでは、 1行目と3行目は同じ色
‘#FFFF00’を指定します
– （おまけ）別のアプローチとして、
main.js側だけ修正する方法もあります
（サーバーからのデータを無視する）
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
34
これ以外のカスタマイズ例
• 表のカスタマイズ
– 列の追加(電子メール, 人事評価)
– メールリンク
– Rating Gauge: Horizontalを利用
[COOKBOOK]
http://www.oracle.com/webfolder/technetwork/
jet/uiComponents-ratingGaugeratingGaugeComponent.html
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
35
これ以外のカスタマイズ例
• Twitterと連携
– Twitter4j
– Java Day Tokyo 2016の
ハッシュタグ
• 全体>#JDT2016 (or
#JavaDayTokyo)
• このハッカソン>#JDT2016_4F
Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |
36