Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction of JHipster

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on.

Introduction of JHipster

社内勉強会で使用したJHipsterの紹介資料です。

Avatar for Shinichi Kozake

Shinichi Kozake

January 29, 2017
Tweet

More Decks by Shinichi Kozake

Other Decks in Technology

Transcript

  1. Purpose Who A U Background What Why Tech Getting Start

    Inside Learn More Agenda JHipster4
  2. Background What Why Tech Getting Start Inside Who are You?

    ࣗݾ঺հ Purpose JHipster4 Learn More
  3. Who A U Background What Why Tech Getting Start Inside

    Learn More Purpose झࢫ JHipster4
  4. Who A U Background Tech Getting Start Inside Learn More

    What’s JHipster? JHipsterͱ͸ Purpose Why JHipster4
  5. 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
  6. Who A U Background What Tech Getting Start Inside Learn

    More Why JHipster? JHipsterͷར఺ Purpose JHipster4
  7. Who A U Background What Getting Start Inside Learn More

    Technologies JHipsterͷٕज़ Purpose Why JHipster4
  8. Who A U Background What Learn More JHipster 4.0 for

    Angular2 Purpose Why Tech Getting Start Inside
  9. Angular2 UIϥΠϒϥϦ ▪リリースࡁ ▪リリース前 ▪ng2-bootstrap ▪ng-lightning ▪Prime NG ▪Semantic UI

    ▪Vaadin ▪ Wijimo ▪ OnsenUI(モバイルઐ⽤) ▪Angular Material2(slpha.10) ▪Fuel-UI(prerelease 0.3.9) ▪Kendo UI for Angular2(beta、2017年5⽉リリース予定) ▪ng-bootstrap(slpha.13) 「Angular2 によるモダンWeb開ൃ(p.25)」より引⽤ 2TKOG(CEG鰘竑痓鰛2TKOG6GM鯽㚱≼鰊鰼鲍鱈鱺鲍鲎 屬鰐䧏鰟啐鰆鰵鱡鯮鱝鰟屬蒌鰈鰆鱃勤㑏鰈 鰄鰒鰺鱃㚂䠉Ⅹ⹻
  10. Who A U Background What Inside Learn More Getting Start

    ͸͡ΊͯΈΑ͏ʂ Purpose Why Tech JHipster4
  11. $ npm install -g yo $ npm install -g bower

    $ npm install -g gulp $ npm install -g generator-jhipster :FPNBOͷΠϯετʔϧ #PXFSͷΠϯετʔϧ (VMQͷΠϯετʔϧ +)JQ4UFSͷΠϯετʔϧ Getting Start Local Install
  12. ██ ██ ██ ████████ ███████ ██████ ████████ ████████ ███████ ██

    ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████████ ██ ███████ █████ ██ ██████ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ████████ ██ ██████ ██ ████████ ██ ██ http://jhipster.github.io Welcome to the JHipster Generator v3.12.2 Documentation for creating an application: https://jhipster.github.io/creating-an-app/ Application files will be generated in folder: /Users/s_kozake/develop/jhipster-apps/ hogeHipster ? (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) JHipsterではMonolithicなアプリケーションもしくは マイクロサービスアプリケーションを選୒できます。 Getting Start How To Create App
  13. 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なアプリケーションを選୒します。
  14. How To Create App Getting Start ? (2/14) What is

    the base name of your application? (hogeHipster) アプリケーション名を⼊⼒します。 現在のディレクトリ名がデフォルトのアプリケーション名として表⽰されます。
  15. How To Create App Getting Start ? (3/14) Would you

    like to install other generators from the JHipster Market Place? (y/N) 他のgeneratorはJHipsterマーケットプレスからインストールするかどうかを 選୒できます。
  16. How To Create App Getting Start ? (3/14) What is

    your default Java package name? (com.mycompany.myapp) javaのパッケージ名を⼊⼒します。
  17. 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を⽤いた認ূ⽅式が選୒できます。 これらを⽤いることで、ステートレスな認ূ⽅式が࣮現できます。
  18. 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も選୒可能です。
  19. 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ドライバはバンドルされていないҝ、 ⼿動で⽤意する必要があります。
  20. 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はデータをディスクに保存する場合と インメモリで動作する場合のどちらかを選୒できます。
  21. 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を⽤いた 複਺ノードでのキャッシュ⽅式も選୒可能です。
  22. 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を選୒します。
  23. How To Create App Getting Start ? (10/14) Which other

    technologies would you like to use? (Press <space> to select, <a> to toggle all, <i> to inverse selection) ❯◯ Social login (Google, Facebook, Twitter) ◯ Search engine using ElasticSearch ◯ Clustered HTTP sessions using Hazelcast ◯ WebSockets using Spring Websocket ◯ [BETA] Asynchronous messages using Apache Kafka オプションとして導⼊する技術を選୒できます。
  24. 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などの認ূ機能 と連携したログイン機能が提供されます。
  25. 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が⽤いられます。
  26. 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を⽤いたクラスタ構成にするかどうかを選୒できま す。
  27. 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を⽤いるかどうかを選୒できます。
  28. How To Create App Getting Start ? (11/14) Would you

    like to use the LibSass stylesheet preprocessor for your CSS? (y/N) Sassをサポートするかどうかを選୒します。
  29. How To Create App Getting Start ? (12/14) Would you

    like to enable internationalization support? (Y/n) ࠃ際化をサポートするかを選୒します。
  30. 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) ࠃ際化を選୒した場合、ネイティブランゲージを選୒します。
  31. 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) 他にサポートするネイティブランゲージを選୒します。
  32. How To Create App Getting Start ? (13/14) Which testing

    frameworks would you like to use? (Press <space> to select, <a> to toggle all, <i> to inverse selection) ❯◉ Gatling ◯ Cucumber ◯ Protractor ⽤いたいテストフレームワークを選୒します。
  33. 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 全ての選୒が終ると、インストールが始まります。
  34. $ git init $ git add . $ git commit

    -m "first install jhipster” $ git tag install インストールが終ったら、gitで管理しましょう。 適切な.gitignoreファイルが⽤意されているので便利です。 Getting Start How To Create App
  35. Getting Start Create entity ? Do you want to add

    a field to your entity? (Y/n) フィールドを追加するかどうかを聞かれますので、Yesを選୒します。
  36. Getting Start Create entity ? What is the name of

    your field? name フィールド名を⼊⼒します。
  37. 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) フィールドの型を選୒します。
  38. Getting Start Create entity ? Do you want to add

    validation rules to your field? (y/N) Y フィールドのバリデーションルールを追加するかどうかを選୒します。
  39. Getting Start Create entity ? Which validation rules do you

    want to add? ◉ Required ❯◯ Minimum length ◉ Maximum length ◯ Regular expression pattern 必須⼊⼒、最⼩/最⼤⾧や正規表現によるチェックを選୒できます。 ここでは、必須⼊⼒と最⼤⾧を選୒します。
  40. Getting Start Create entity ? What is the maximum length

    of your field? (20) 100 最⼤⾧の⾧さを⼊⼒します。
  41. Getting Start Create entity ================= Author ================= Fields name (String)

    required maxlength='100' 選୒·⼊⼒した಺容が表⽰されます。
  42. 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フィールドを追加します。
  43. Getting Start Create entity ? Do you want to add

    a relationship to another entity? No リレーションを追加するかどうかを選୒します。 ここではNoを選୒します。
  44. 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を選୒します。
  45. 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クラスの作成を選୒します。
  46. 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 ディレクティブ
  47. Everything is configured, generating the entity... create .jhipster/Author.json create src/main/java/team/hoge/hipster/domain/Author.java

    create src/main/java/team/hoge/hipster/repository/AuthorRepository.java create src/main/java/team/hoge/hipster/repository/search/AuthorSearchRepository.java create src/main/java/team/hoge/hipster/web/rest/AuthorResource.java create src/main/java/team/hoge/hipster/service/AuthorService.java create src/main/resources/config/liquibase/changelog/20160623225714_added_entity_Author.xml conflict src/main/resources/config/liquibase/master.xml ? Overwrite src/main/resources/config/liquibase/master.xml? overwrite force src/main/resources/config/liquibase/master.xml create src/main/webapp/app/entities/author/authors.html create src/main/webapp/app/entities/author/author-detail.html create src/main/webapp/app/entities/author/author-dialog.html create src/main/webapp/app/entities/author/author-delete-dialog.html conflict src/main/webapp/app/layouts/navbar/navbar.html ? Overwrite src/main/webapp/app/layouts/navbar/navbar.html? overwrite force src/main/webapp/app/layouts/navbar/navbar.html create src/main/webapp/app/entities/author/author.state.js create src/main/webapp/app/entities/author/author.controller.js create src/main/webapp/app/entities/author/author-dialog.controller.js create src/main/webapp/app/entities/author/author-delete-dialog.controller.js create src/main/webapp/app/entities/author/author-detail.controller.js create src/main/webapp/app/entities/author/author.service.js create src/main/webapp/app/entities/author/author.search.service.js create src/main/webapp/i18n/ja/author.json conflict src/main/webapp/i18n/ja/global.json ? Overwrite src/main/webapp/i18n/ja/global.json? overwrite force src/main/webapp/i18n/ja/global.json create src/main/webapp/i18n/en/author.json conflict src/main/webapp/i18n/en/global.json ? Overwrite src/main/webapp/i18n/en/global.json? overwrite force src/main/webapp/i18n/en/global.json create src/test/javascript/spec/app/entities/author/author-detail.controller.spec.js create src/test/java/team/hoge/hipster/web/rest/AuthorResourceIntTest.java create src/test/gatling/simulations/AuthorGatlingTest.scala Running gulp Inject to add javascript to index Getting Start
  48. 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を選୒します。
  49. Getting Start Create entity ? What is the name of

    the other entity? author どのEntityとのリレーションを⽣成するかを聞かれるので、 authorを⼊⼒します。
  50. Getting Start Create entity ? What is the name of

    the relationship? (author) リレーション名を聞かれるので、ここではデフォルトのauthorとします。
  51. 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」を選୒します。
  52. 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を⼊⼒して名前を表⽰させることにします。
  53. Getting Start Create entity ? Do you want to add

    any validation rules to this relationship? (y/N) y BookのCRUDը⾯でAuthorを表⽰する時のフィールド名を⼊⼒します。 ここでは、nameを⼊⼒して名前を表⽰することにします。
  54. Getting Start Create entity ? Which validation rules do you

    want to add? ❯◉ Required リレーションにバリデーションルールを追加します。 ここでは、BookにରしてAuthorへのリレーションが必ず存在するようにするҝ、 Requiredを選୒します。
  55. Getting Start Create entity ================= Book ================= Fields title (String)

    required maxlength='100' description (String) maxlength='200' publicationDate (LocalDate) required price (BigDecimal) required Relationships author (Author) many-to-one required 上記಺容でBook Entityを⽣成します。
  56. Who A U Background What Learn More Inside the app

    ΞϓϦέʔγϣϯߏ੒ Purpose Why Tech Getting Start JHipster4
  57. Inside src ├── main │ ├── docker····················dockerؔ係のリソース │ ├── java························サーバーサイドのJavaソース

    │ ├── resources················各種リソースファイル │ │ ├── config···············SpringBootの設定ファイル │ │ │ └── liquibase·····liquibaseの定義ファイルとchangelog │ │ ├── i18n··················ࠃ際化ରԠの場合のリソース定義 │ │ ├── mails·················メールテンプレート定義 │ │ └── templates··········エラーը⾯のテンプレート定義 │ └── webapp··················フロントサイドのJavaScriptソースなど └── test·······························テストソース
  58. Learn More ɹBOOK □ The JHipster Mini-Book 2.0 □[改訂新版]Spring⼊⾨ □

    Spring徹底⼊⾨ □ AngularJS アプリケーションプログラミング □ Rangle's Angular 2 Training Book □ Gradle徹底⼊⾨
  59. 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/
  60. Who A U Background What Summary ·ͱΊ Purpose Why Tech

    Getting Start Inside Learn More JHipster4