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

Introduction of JHipster

Introduction of JHipster

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

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