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

(1)

[Hands-on: 3-F]

コンテナとJavaとOracle JET

によるアプリ開発ハッカソン

日本オラクル株式会社

Fusion Middleware Business Unit

PaaS

_{事業推進室}

Java Day Tokyo 2016

(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.

(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)}

–

ハッカソンの成果物を発表

(4)

Introduction

(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

アプリケーション開発

• Java

• Developer

• Mobile

• Application Builder

• Application Container

(Node, Java SE)

インテグレーション

• Integration

• SOA

• Process

• API Manager

• GoldenGate

IoT

• Internet of Things

ビジネス・アナリティクス

• Data Visualization

• Business Intelligence

• Big Data

Discovery

コンピュート

• Elastic Compute Cloud

• Dedicated Compute Cloud

Bare Metal Compute Cloud

ストレージ

• Object Storage

• Archive Storage

Block Storage

ネットワーク

• Software VPN

• Hardware VPN

Fast Connect

(6)

Cloud

On-Premises

DEVELOP AND DEPLOY ANYWHERE

オンプレミスとクラウドの互換性

同じ「

アーキテクチャ

」

同じ「

オラクル製品

」

同じ「

知識・ノウハウ

」

オンプレミスで培った標準技術をクラウドへ

クラウドで開発・運用したシステムをオンプレミスへ

(7)

Oracle Cloud Platform:

_{アプリケーション開発}

エンタープライズ

クラウドネイティブ

Java Cloud

Application Container

Cloud

Application

Builder

Cloud

Management Cloud

Developer Cloud

Database

Cloud

DevOps

Oracle

JET

Oracle

APEX

Oracle

Documents

Cloud

(8)

Application Container Cloud

_{とOracle JET}

(9)

(10)

Demo Application Architecture

Application Container

Cloud Service

Docker

Container

ステートレス

(

_{状態を保持しない)}

依存関係の分離

(

_{環境変数で宣言)}

Oracle JET

(Front-end JavaScript Framework)

UI(HTML5/JavaScript)

Browser

json

[{"deptno":20,"empno":7369,"ename":"S

MITH","hiredate":"2016-03-29T21:58:24Z","job":"CLERK","mgr":7902,

"sal":800},{"comm":300,"deptno":30,"em

pno":7499,"ename":"ALLEN","hiredate":"

2016-03-29T21:58:24Z","job":"SALESMAN","mgr":

7698,"sal":1600},

REST API Call

UIとビジネスロ

ジックの分離

拡張性と可搬性

の確保

(11)

Application Container

Cloud Service

Docker

Container

Oracle JET

(Front-end JavaScript Framework)

UI(HTML5/JavaScript)

Browser

json

[{"deptno":20,"empno":7369,"ename":"S

MITH","hiredate":"2016-03-29T21:58:24Z","job":"CLERK","mgr":7902,

"sal":800},{"comm":300,"deptno":30,"em

pno":7499,"ename":"ALLEN","hiredate":"

2016-03-29T21:58:24Z","job":"SALESMAN","mgr":

7698,"sal":1600},

REST API Call

App

(12)

Application Container Cloud

• 概要

–

多様な開発言語に対応

Java, Node.js, Ruby, Python, PHP…

–

ロードバランサーを内包、無停止

で拡張/縮退が可能

• 特徴 (Java Runtime)

–

Java Flight Recorder(JFR)

:

_{組み込みJFRによる稼働記録}

–

Oracle Javaの長期保守

: Java SE

_{のupdateを長期間提供}

Dockerベースの軽量プラットフォーム

Load Balancer

Node

(App 2)

Docker

Java SE

(App 1)

Docker

Java SE

(App 3)

Docker

Node

(App 2)

Docker

Java SE

(App 1)

Docker

Java SE

(App 3)

Docker

Java SE

Node.js

Ruby

(13)

Zip

App.jar

Build

Manifest.json

Application

Container Cloud設定

• Java

バージョン

• アプリ起動コマンド

App.zip

App

組み込み

App

Server

{

"runtime": {

"majorVersion": "8"

},

"command": "

java -jar App.jar

",

"release": {

"version": "1.0"

},

}

(14)

Zip

App.jar

Build

Manifest.json

App.zip

App

組み込み

App

Server

App.jar

Deploy!

Load

Balancer

Java SE

Docker

Node.js

Docker

Ruby

Docker

Container

Oracle

JDK

App.zip

(15)

Application

Image Builder

Developer

Java Image

_Image

Node

Docker Image Repository

Private Tenant

Application

Image

Application Container Cloud - Architecture

Load Balancer

Java

SE

Docker

Ruby

Docker

Node

Docker

(16)

Application Container Cloud

• サーバーレス

–

コンテナの物理的な配置を意識しない

–

インスタンスの数とサイズ(メモリ)を即座に

変更可能

–

ステートレス(状態を保持しない)

–

外部サービスとの依存関係の分離

拡張性と可搬性を確保

(17)

Application Container

Cloud Service

Docker

Container

Oracle JET

(Front-end JavaScript Framework)

UI(HTML5/JavaScript)

Browser

json

[{"deptno":20,"empno":7369,"ename":"S

MITH","hiredate":"2016-03-29T21:58:24Z","job":"CLERK","mgr":7902,

"sal":800},{"comm":300,"deptno":30,"em

pno":7499,"ename":"ALLEN","hiredate":"

2016-03-29T21:58:24Z","job":"SALESMAN","mgr":

7698,"sal":1600},

REST API Call

App

(18)

Oracle JET

• J

avaScript

E

xtension

T

oolkit

• フロントエンド開発用の

JavaScript

_{ライブラリ}

(19)

(20)

JET = 5 OSSs

_{× Oracle}

Knockout.js

双方向データバインディ

ング

jQuery

DOM

_{操作 + Ajax}

jQuery UI

UI

_{ウィジェットファクト}

リ

RequireJS

JS

_{リソース管理}

Hammer

タッチ・ジェスチャー

(21)

JET = 5 OSSs

_{× Oracle}

データ検証・変換

SPA

_{ルーティング}

データモデル API

ローカライズ

レスポンシブ

レイアウト

UI

_{コンポーネント}

(22)

JET = 5 OSSs

_{× Oracle}

データ検証・変換

SPA

_{ルーティング}

データモデル API

ローカライズ

レスポンシブ

レイアウト

UI

_{コンポーネント}

バージョン

整合性管理

(23)

(24)

(25)

(26)

(27)

Hackathon

• 趣旨

–

チュートリアルをなぞることから一歩踏み出して色々試すことで、更に理解

を深める

–

技術を楽しむ

• Agenda

–

ハッカソン: 50min (17:00-17:50)

• ハンズオンで用いたアプリを元にしたカスタマイズ

–

成果物の発表会: 20min (17:50-18:10)

• ハッカソンの成果物を発表

(28)

自由に色々試してみてください。

ではどうぞ！

(29)

お題

• ちょっとアイデアが浮かばないな、という場合は、取り組んでみて

ください

• あくまでひとつの案で、これにこだわる必要はありません。アイデ

(30)

お題

(31)

1. _{まずは作ってみよう}

• ヒント

–

サーバー側だけ修正。画面は修正不要

–

サーバーから返すEmployeeのListは2行

–

それぞれのEmployeeオブジェクトの

Salary

_{値: 1つめ=15, 2つめ=85}

(32)

出来た方は…

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'.

(33)

出来た方は…

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

(34)

出来た方は…

4. _{向きを変えてみよう}

• ヒント

–

サーバーから返すEmployeeのListは3行。

それぞれのSalary値は15,15,70

–

main.js

では、 1行目と3行目は同じ色

‘#FFFF00’

_{を指定します}

–

（おまけ）別のアプローチとして、

main.js

_{側だけ修正する方法もあります}

（サーバーからのデータを無視する）

(35)

これ以外のカスタマイズ例

• 表のカスタマイズ

–

列の追加(電子メール, 人事評価)

–

メールリンク

–

Rating Gauge: Horizontal

を利用

[COOKBOOK]

http://www.oracle.com/webfolder/technetwork/

(36)

これ以外のカスタマイズ例

• Twitter

と連携

–

Twitter4j

–

Java Day Tokyo 2016

の

ハッシュタグ

• 全体>#JDT2016 (or

#JavaDayTokyo)

(37)