Who A U
Background
Tech
Getting Start
Inside
Learn More
What’s JHipster?
JHipsterͱ
Purpose
Why
JHipster4
Slide 22
Slide 22 text
What
JHipster is
JHipster is a Yeoman generator
Spring Boot + Angular
モダン Web アプリケーションを素早く作れることを⽬的
オープンソース
YeomanはモダンWebアプリケーションを提供するScaffoldツール
すべてGitHubで開ൃ。Apache 2.0-licensed。
16⼈の開ൃ者と280⼈のコントリビュータ
https://github.com/jhipster/generator-jhipster
Slide 23
Slide 23 text
What
History
2013年10にJulien Duboisによって開始されました。
最初の公式リリース(version 0.3.1) が2013年12⽉7⽇。
それ以དྷ、115ものリリースがされています！
Slide 24
Slide 24 text
What
Scaffold Tool is
「scaffold（スキャフォールド）」は「⾜場」という意味です。
「⾜場」という名の通り、アプリケーションのひな形となるソースコードを⾃動⽣成します。
Slide 25
Slide 25 text
Who A U
Background What
Tech
Getting Start
Inside
Learn More
Why JHipster?
JHipsterͷར
Purpose
JHipster4
Slide 26
Slide 26 text
Why
#PIWNCT
5RTKPI$QQV
Spring Boot と Angular は、
素晴らしいフルスタックフレームワークです。
How To Create App
Getting Start
? (1/14) Which *type* of application would you like to create? (Use arrow keys)
❯ Monolithic application (recommended for simple projects)
Microservice application
Microservice gateway
[BETA] JHipster UAA server (for microservice OAuth2 authentication)
作成するアプリケションタイプを選します。
ここではMonolithicなアプリケーションを選します。
Slide 92
Slide 92 text
How To Create App
Getting Start
? (2/14) What is the base name of your application? (hogeHipster)
アプリケーション名を⼊⼒します。
現在のディレクトリ名がデフォルトのアプリケーション名として表⽰されます。
Slide 93
Slide 93 text
How To Create App
Getting Start
? (3/14) Would you like to install other generators from the JHipster Market Place? (y/N)
他のgeneratorはJHipsterマーケットプレスからインストールするかどうかを
選できます。
Slide 94
Slide 94 text
How To Create App
Getting Start
? (3/14) What is your default Java package name? (com.mycompany.myapp)
javaのパッケージ名を⼊⼒します。
Slide 95
Slide 95 text
How To Create App
Getting Start
? (4/14) Which *type* of authentication would you like to use? (Use arrow keys)
❯ HTTP Session Authentication (stateful, default Spring Security mechanism)
OAuth2 Authentication (stateless, with an OAuth2 server implementation)
JWT authentication (stateless, with a token)
認ূ⽅式にHTTP Sessionを⽤いたैདྷのWebアプリケーション認ূ⽅式の他、
OAuth2やJWTを⽤いた認ূ⽅式が選できます。
これらを⽤いることで、ステートレスな認ূ⽅式が࣮現できます。
Slide 96
Slide 96 text
How To Create App
Getting Start
? (5/14) Which *type* of database would you like to use? (Use arrow keys)
❯ SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle, MSSQL)
MongoDB
Cassandra
データベースを選します。
RDBMSの他、NoSQLであるMongoDBも選可能です。
Slide 97
Slide 97 text
How To Create App
Getting Start
? (6/14) Which *production* database would you like to use? (Use arrow keys)
❯ MySQL
MariaDB
PostgreSQL
Oracle - Warning! The Oracle JDBC driver (ojdbc) is not bundled because it is not Open
Source. Please follow our documentation to install it manually.
Microsoft SQL Server
プロダクトで使⽤するデータベースの種類を選します。
Oracleを選した場合、JDBCドライバはバンドルされていないҝ、
⼿動で⽤意する必要があります。
Slide 98
Slide 98 text
How To Create App
Getting Start
? (7/14) Which *development* database would you like to use? (Use arrow keys)
❯ H2 with disk-based persistence
H2 with in-memory persistence
PostgreSQL
開ൃで使⽤するデータベースの種類を選します。
H2かMYSQLが選でき、H2はデータをディスクに保存する場合と
インメモリで動作する場合のどちらかを選できます。
Slide 99
Slide 99 text
How To Create App
Getting Start
? (8/14) Do you want to use Hibernate 2nd level cache? (Use arrow keys)
No
❯ Yes, with ehcache (local cache, for a single node)
Yes, with HazelCast (distributed cache, for multiple nodes)
Hibernate 2ndレベルキャッシュを⽤いるかどうかを選します。
ehcacheを⽤いたローカルキャッシュ⽅式もしくはHazelCastを⽤いた
複ノードでのキャッシュ⽅式も選可能です。
Slide 100
Slide 100 text
How To Create App
Getting Start
? (9/14) Would you like to use Maven or Gradle for building the backend? (Use arrow keys)
❯ Maven
Gradle
ビルドツールにMavenかGradleを選します。
How To Create App
Getting Start
? (10/14) Which other technologies would you like to use?
❯◉ Social login (Google, Facebook, Twitter)
◯ Search engine using ElasticSearch
◯ Clustered HTTP sessions using Hazelcast
◯ WebSockets using Spring Websocket
◯ [BETA] Asynchronous messages using Apache Kafka
Social loginを選すると、GoogleやFacebook、Twitterなどの認ূ機能
と連携したログイン機能が提供されます。
Slide 103
Slide 103 text
How To Create App
Getting Start
? (10/14) Which other technologies would you like to use?
◯ Social login (Google, Facebook, Twitter)
❯◉ Search engine using ElasticSearch
◯ Clustered HTTP sessions using Hazelcast
◯ WebSockets using Spring Websocket
◯ [BETA] Asynchronous messages using Apache Kafka
全⽂ݕ索エンジンであるElasticSearchを選すると、
Spring Data ElasticSearchを⽤いた設定が⾏われます。
開ൃモードでは、組ࠐみのElasticSearchが⽤いられます。
Slide 104
Slide 104 text
How To Create App
Getting Start
? (10/14) Which other technologies would you like to use?
◯ Social login (Google, Facebook, Twitter)
◯ Search engine using ElasticSearch
❯◉ Clustered HTTP sessions using Hazelcast
◯ WebSockets using Spring Websocket
◯ [BETA] Asynchronous messages using Apache Kafka
HTTP SessionをHazelCastを⽤いたクラスタ構成にするかどうかを選できま
す。
Slide 105
Slide 105 text
How To Create App
Getting Start
? (10/14) Which other technologies would you like to use?
◯ Social login (Google, Facebook, Twitter)
◯ Search engine using ElasticSearch
◯ Clustered HTTP sessions using Hazelcast
❯◉ WebSockets using Spring Websocket
◯ [BETA] Asynchronous messages using Apache Kafka
Spring Websocketを⽤いるかどうかを選できます。
Slide 106
Slide 106 text
How To Create App
Getting Start
? (11/14) Would you like to use the LibSass stylesheet preprocessor for your CSS? (y/N)
Sassをサポートするかどうかを選します。
Slide 107
Slide 107 text
How To Create App
Getting Start
? (12/14) Would you like to enable internationalization support? (Y/n)
ࠃ際化をサポートするかを選します。
Slide 108
Slide 108 text
How To Create App
Getting Start
? Please choose the native language of the application?
Hindi
Hungarian
Italian
❯ Japanese
Korean
Marathi
Polish
(Move up and down to reveal more choices)
ࠃ際化を選した場合、ネイティブランゲージを選します。
Slide 109
Slide 109 text
How To Create App
Getting Start
? Please choose additional languages to install
◯ Czech
◯ Danish
◯ Dutch
❯◉ English
◯ Estonian
◯ French
◯ Galician
(Move up and down to reveal more choices)
他にサポートするネイティブランゲージを選します。
How To Create App
Getting Start
Installing languages: ja, en
create bower.json
create package.json
create README.md
create .gitignore
create .gitattributes
create .editorconfig
:
:
create src/main/resources/i18n/messages_en.properties
I'm all done. Running npm install && bower install for you to install the required
dependencies. If this fails, try running the command yourself.
:
Getting Start
全ての選が終ると、インストールが始まります。
Slide 112
Slide 112 text
$ git init
$ git add .
$ git commit -m "first install jhipster”
$ git tag install
インストールが終ったら、gitで管理しましょう。
適切な.gitignoreファイルが⽤意されているので便利です。
Getting Start
How To Create App
Slide 113
Slide 113 text
How to run
Slide 114
Slide 114 text
$ ./gradlew bootrun
上記コマンドを࣮⾏すると、8080ポートでWebアプリケーションが起動します。
Getting Start
How To Run
Slide 115
Slide 115 text
$ ./gulp
上記コマンドを࣮⾏すると、9000ポートでBrowsersyncが起動します。
これにより、࣮⾏したままը⾯の修正がインタラクティブに⾏えます。
Getting Start
How To Run
$ yo jhipster:entity author
上記コマンドを࣮⾏して、Author Entityを⽣成します。
Getting Start
Create entity
Slide 124
Slide 124 text
Getting Start
Create entity
? Do you want to add a field to your entity? (Y/n)
フィールドを追加するかどうかを聞かれますので、Yesを選します。
Slide 125
Slide 125 text
Getting Start
Create entity
? What is the name of your field? name
フィールド名を⼊⼒します。
Slide 126
Slide 126 text
Getting Start
Create entity
? What is the type of your field? (Use arrow keys)
❯ String
Integer
Long
Float
Double
BigDecimal
LocalDate
(Move up and down to reveal more choices)
フィールドの型を選します。
Slide 127
Slide 127 text
Getting Start
Create entity
? Do you want to add validation rules to your field? (y/N) Y
フィールドのバリデーションルールを追加するかどうかを選します。
Slide 128
Slide 128 text
Getting Start
Create entity
? Which validation rules do you want to add?
◉ Required
❯◯ Minimum length
◉ Maximum length
◯ Regular expression pattern
必須⼊⼒、最⼩/最⼤⾧や正規表現によるチェックを選できます。
ここでは、必須⼊⼒と最⼤⾧を選します。
Slide 129
Slide 129 text
Getting Start
Create entity
? What is the maximum length of your field? (20) 100
最⼤⾧の⾧さを⼊⼒します。
Getting Start
Create entity
Generating field #2
? Do you want to add a field to your entity? Yes
? What is the name of your field? birthDate
? What is the type of your field? LocalDate
? Do you want to add validation rules to your field? Yes
? Which validation rules do you want to add? Required
================= Author =================
Fields
name (String) required maxlength='100'
birthDate (LocalDate) required
同༷に、birthDateフィールドを追加します。
Slide 132
Slide 132 text
Getting Start
Create entity
? Do you want to add a relationship to another entity? No
リレーションを追加するかどうかを選します。
ここではNoを選します。
Slide 133
Slide 133 text
Getting Start
Create entity
? Do you want to use a Data Transfer Object (DTO)?
❯ No, use the entity directly
[BETA] Yes, generate a DTO with MapStruct
EntityのDTOを作成するかどうかを選できます。
ここでは、EntityをそのままDTOとして⽤いるのでNoを選します。
Slide 134
Slide 134 text
Getting Start
Create entity
? Do you want to use separate service class for your business logic?
No, the REST controller should use the repository directly
❯ Yes, generate a separate service class
Yes, generate a separate service interface and implementation
RESTコントローラからRepositoryを直接呼び出す⽅式かビジネスロジックを書く
ҝのServiceクラスを作成するかどうかを選します。
ここでは、Serviceクラスの作成を選します。
Slide 135
Slide 135 text
Getting Start
Create entity
? Do you want pagination on your entity?
No
❯ Yes, with a simple pager
Yes, with pagination links
Yes, with infinite scroll
ը⾯のページング⽅式を選します。
simple pager ： Bootstrap pagerベースのページング
pagination links： Bootstrap pagination コンポーネント
infinite scroll ： infinite scroll ディレクティブ
$ yo jhipster:entity book
同༷に、Book Entityを⽣成します。
Getting Start
Create entity
Slide 138
Slide 138 text
Getting Start
Create entity
================= Book =================
Fields
title (String) required maxlength='100'
description (String) maxlength='200'
publicationDate (LocalDate) required
price (BigDecimal) required
Generating relationships to other entities
? Do you want to add a relationship to another entity? (Y/n) y
Author Entityの時と同༷に、フィールドを追加します。
Author Entityとのリレーションを作成するので、
リレーションを追加するかどうかでYesを選します。
Slide 139
Slide 139 text
Getting Start
Create entity
? What is the name of the other entity? author
どのEntityとのリレーションを⽣成するかを聞かれるので、
authorを⼊⼒します。
Slide 140
Slide 140 text
Getting Start
Create entity
? What is the name of the relationship? (author)
リレーション名を聞かれるので、ここではデフォルトのauthorとします。
Slide 141
Slide 141 text
Getting Start
Create entity
? What is the type of the relationship?
one-to-many
❯ many-to-one
many-to-many
one-to-one
リレーションのカーディナリティを選します。
Bookから⾒てAuthorは1つなので、「many-to-one」を選します。
Slide 142
Slide 142 text
Getting Start
Create entity
? When you display this relationship with AngularJS, which field from 'author' do you want
to use? (id) name
BookのCRUDը⾯でAuthorを表⽰する時のフィールド名を⼊⼒します。
ここでは、nameを⼊⼒して名前を表⽰させることにします。
Slide 143
Slide 143 text
Getting Start
Create entity
? Do you want to add any validation rules to this relationship? (y/N) y
BookのCRUDը⾯でAuthorを表⽰する時のフィールド名を⼊⼒します。
ここでは、nameを⼊⼒して名前を表⽰することにします。
Slide 144
Slide 144 text
Getting Start
Create entity
? Which validation rules do you want to add?
❯◉ Required
リレーションにバリデーションルールを追加します。
ここでは、BookにରしてAuthorへのリレーションが必ず存在するようにするҝ、
Requiredを選します。
Who A U
Background What
Learn More
ֶशͷखҾ͖
Purpose
Why
Tech
Getting Start
Inside
JHipster4
Slide 169
Slide 169 text
Learn More
ɹBOOK
□ The JHipster Mini-Book 2.0
□［改訂新版］Spring⼊⾨
□ Spring徹底⼊⾨
□ AngularJS アプリケーションプログラミング
□ Rangle's Angular 2 Training Book
□ Gradle徹底⼊⾨
Slide 170
Slide 170 text
Learn More
ɹSITE
□ JHipster
https://jhipster.github.io/
□ Angular
https://angular.io/
□ Tour of Heroes with Angular-CLI(⽇本語༁)
https://github.com/ng-japan/ng2-hands-on-seed/blob/master/
courses/tutorial/README.md
□ terasoluna.org
http://terasolunaorg.github.io/guideline/
Slide 171
Slide 171 text
Who A U
Background What
Summary
·ͱΊ
Purpose
Why
Tech
Getting Start
Inside
Learn More
JHipster4