[3-f] コンテナとjavaとoracle jetによるアプリ開発ハッカソン

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

日本オラクル株式会社Fusion Middleware Business UnitPaaS事業推進室

Java Day Tokyo 20162016年5月24日

Copyright © 2016, Oracle and/or its affiliates. All rights reserved. |


Safe Harbor StatementThe 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


本日の流れ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


IntroductionOracle Cloud Overview

4


Oracle Cloud Platform (PaaS/IaaS) 全体像

5

データ管理• 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


CloudOn-Premises

DEVELOP AND DEPLOY ANYWHERE

6

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

同じ「アーキテクチャ」同じ「オラクル製品」同じ「知識・ノウハウ」

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

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


Oracle Cloud Platform: アプリケーション開発

7

エンタープライズクラウドネイティブ

Java Cloud

Application ContainerCloud

ApplicationBuilderCloud

Management Cloud

性能監視ログ監視 IT監視

Developer Cloud

DatabaseCloud

DevOps

OracleJET

OracleAPEX

OracleDocumentsCloud

http://localhost:8080/

http://localhost:8080/


Application Container CloudとOracle JETArchitecture

8


DEMONSTRATION

9


Demo Application Architecture

10

Application Container Cloud Service

DockerContainer

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

依存関係の分離(環境変数で宣言)

Oracle JET(Front-end JavaScript Framework)

UI(HTML5/JavaScript)

Browser

json[{"deptno":20,"empno":7369,"ename":"SMITH","hiredate":"2016-03-29T21:58:24Z","job":"CLERK","mgr":7902,"sal":800},{"comm":300,"deptno":30,"empno":7499,"ename":"ALLEN","hiredate":"2016-03-29T21:58:24Z","job":"SALESMAN","mgr":7698,"sal":1600},

REST API Call

UIとビジネスロジックの分離

拡張性と可搬性の確保

App

Copyright © 2016, Oracle and/or its affiliates. All rights reserved. | 11


DockerContainer



Browser


REST API Call

AppServer-side >>


Application Container Cloud

• 概要–多様な開発言語に対応

Java, Node.js, Ruby, Python, PHP…–ロードバランサーを内包、無停止で拡張/縮退が可能

• 特徴 (Java Runtime)– Java Flight Recorder(JFR)

: 組み込みJFRによる稼働記録– Oracle Javaの長期保守

: Java SEのupdateを長期間提供

12

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

https://www.ruby-lang.org/ja/about/logo/


ZipApp.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"},

}

App.jar


ZipApp.jar

Build

Manifest.json

App.zip

App組み込み

App Server

App.jar

Deploy!

LoadBalancer

Java SE

Docker

Node.js

Docker

Ruby

Docker

DockerContainer

OracleJDK

App.zip


ApplicationArchive

Image BuilderDeveloper

Java Image Node Image

Docker Image Repository Private Tenant

Application Image

Application Container Cloud - Architecture

Load Balancer

Java SE

Docker

Ruby

Docker

Node

Docker

15


Application Container Cloud• サーバーレス

– コンテナの物理的な配置を意識しない– インスタンスの数とサイズ(メモリ)を即座に変更可能

16

– ステートレス(状態を保持しない)– 外部サービスとの依存関係の分離

拡張性と可搬性を確保



DockerContainer



Browser


REST API Call

App<< Front-end


Oracle JET

• JavaScript Extension Toolkit

• フロントエンド開発用のJavaScript ライブラリ

18


JET = 5 OSSs × Oracle

19



Knockout.js双方向データバインディング

jQueryDOM 操作 + Ajax

jQuery UIUI ウィジェットファクトリ

RequireJSJSリソース管理

Hammerタッチ・ジェスチャー

20



データ検証・変換

SPA ルーティング

データモデル API

ローカライズ

レスポンシブレイアウト

UI コンポーネント

21



データ検証・変換

SPA ルーティング

データモデル API

ローカライズ

レスポンシブレイアウト

UI コンポーネント

バージョン整合性管理

22


Hackathon

26


Hackathon• 趣旨

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

–技術を楽しむ

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

• ハンズオンで用いたアプリを元にしたカスタマイズ–成果物の発表会: 20min (17:50-18:10)

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

27


自由に色々試してみてください。ではどうぞ！

…と、言われましても…

28


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

• あくまでひとつの案で、これにこだわる必要はありません。アイデアをお持ちの方は自由に色々試してみてください

29


お題

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


1. まずは作ってみよう• ヒント

–サーバー側だけ修正。画面は修正不要–サーバーから返すEmployeeのListは2行–それぞれのEmployeeオブジェクトの

Salary値: 1つめ=15, 2つめ=85

31


出来た方は…2. データラベルを外してみよう

• ヒント– Index.htmlを修正–チャート属性‘styleDefaults’を追加する–参考Cookbook > Pie Chart: Data Labels

http://www.oracle.com/webfolder/technetwork/jet/uiComponents-pieChart-dataLabels.html

Recipe1.On the chart's styleDefaults object, set the attribute

dataLabelPosition to 'auto', 'outsideSlice', 'center', or 'none'.

32

http://www.oracle.com/webfolder/technetwork/jet/uiComponents-pieChart-dataLabels.html


出来た方は…3. 色を変えてみよう

• ヒント– main.jsを修正–色を指定するのは、chartSeriesにデータを詰めてる箇所

– JobIdが'brown'の行には'#663300'を、'yellow'の行には'#FFFF00'をセットする

–参考Cookbook > Pie Chart: Styles http://www.oracle.com/webfolder/technetwork/jet/uiComponents-pieChart-styles.html

Recipe• Seriesの’color’ attributeに色指定します

33


出来た方は…4. 向きを変えてみよう

• ヒント–サーバーから返すEmployeeのListは3行。それぞれのSalary値は15,15,70

– main.jsでは、 1行目と3行目は同じ色‘#FFFF00’を指定します

–（おまけ）別のアプローチとして、main.js側だけ修正する方法もあります（サーバーからのデータを無視する）

34


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

35

• 表のカスタマイズ–列の追加(電子メール, 人事評価)–メールリンク– Rating Gauge: Horizontalを利用

[COOKBOOK] http://www.oracle.com/webfolder/technetwork/jet/uiComponents-ratingGauge-ratingGaugeComponent.html

http://www.oracle.com/webfolder/technetwork/jet/uiComponents-ratingGauge-ratingGaugeComponent.html


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

36

• Twitterと連携– Twitter4j– Java Day Tokyo 2016のハッシュタグ• 全体>#JDT2016 (or

#JavaDayTokyo)• このハッカソン>#JDT2016_4F