Introduction of JHipster

Introduction of JHipster

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

87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=128

Shinichi Kozake

January 29, 2017
Tweet

Transcript

  1. Introduction of JHipster

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

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

    ࣗݾ঺հ Purpose JHipster4 Learn More
  4. Who A U ࣗݾ঺հ ,CXC 鰄鰇鰂鰈鱄鯵鰒 0COG 5[UVGO#TEJKVGEV ,QD $GNQPI

    5MKNN Ⰸ蘭
  5. Who A U աڈҊ݅1 ㄔ䱉5GTXGT ⫛ㅚ5GTXGT

  6. Who A U աڈҊ݅2 ⫛ㅚ5GTXGT RAC 赙剏蒕諢 5GTXGT 鱴鱧鱥5GTXGT ㄔ䱉5GTXGT

  7. Who A U աڈҊ݅3 ,510QP*662 鱴鱧鱥5GTXGT ㄔ䱉5GTXGT 鱊鱋鱺5GTXGT &$5GTXGT 0#5

    ⫛ㅚ5GTXGT
  8. UGVVKPIDWKNFTWP TGUQNXG FGRNQ[ OKITCVG )GVDWKNF RWDNKUJ RWNNRWUJ ։ൃ؀ڥ Who A

    U
  9. ίϛϡχέʔγϣϯ νϟοτ νέοτ؅ཧ ϝʔϧ Who A U

  10. What Why Tech Getting Start Inside Learn More Background എܠ

    Purpose Who A U JHipster4
  11. 獱↛↛↛↛↛↛↛獱 獐ֺ䵢䐗鰟┘㢑ֺ獎 玔;@;@;@;@;@;玔 Background

  12. Background ɾ౷Ұੑͷ͋Δ࢖͍΍͍͢ϢʔβΠϯλϑΣεͰ͋Δ͜ͱ ɾϞόΠϧ୺຤͔Βͷར༻΋ՄೳͰ͋Δ͜ͱ ɾཉ͍͠৘ใʹ௚઀ΞΫηεͰ͖Δը໘ߏ੒Ͱ͋Δ͜ͱ 䰿鰠峡鰔鰗鯵鰼 ⃫峹茒⇗鱃䅡鰐鰊鰪鯾鰑鰙 ඼࣭ཁ݅

  13. Background ɾϞόΠϧ୺຤͔Βར༻͔ΒFlex͸ީิ֎ɻ ɾPC୺຤Ͱͷૢ࡞ੑΛߟ͑ΔͱɺSPA͕๬·͍͠ɻ ɾνʔϜͷٕज़εΩϧͱͯ͠αʔό͸αΠυ͸Java ɾϑϩϯταΠυͷεΩϧ͕ෆ଍͍ͯ͠ΔͷͰɺ ɹҰࣜἧͬͨF/WΛ༻͍͍ͨ Spring Boot + Angular

    …? JHipster!!! OG
  14. झࢫ OG ␤$QUU ,*KRUVGT恦鯹鯹禮鰉鰵鱄 䰟⑦鰘▪㈘飍鰈鰗鰵猳 鲂鱜鰘獑 鱀鰻鰙鲂鱜鰘 ∼某貴族にて∼ Background

  15. 本来なら やらないですが :-P くっそめんどいし

  16. 鍗ャ鰟ׅⰨ惂鰟哋鎠憫巼劳׆ Background

  17. Background 窸桴 䵛桴 ⇓桴

  18. 獅鰕鰟桴鰘ѹ⋳䥥㓱桘猳 Background 窸桴 䵛桴 ⇓桴

  19. Who A U Background What Why Tech Getting Start Inside

    Learn More Purpose झࢫ JHipster4
  20. JHipsterというOSSプロダクトの紹介資料です。 Purpose झࢫ 質問は都度受け付けます! ൃ表途中にもൃ⾔してください。 わいわいやりましょう∼ ご利⽤は計ը的に :-P

  21. Who A U Background Tech Getting Start Inside Learn More

    What’s JHipster? JHipsterͱ͸ Purpose Why JHipster4
  22. 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
  23. What History 2013年10にJulien Duboisによって開始されました。 最初の公式リリース(version 0.3.1) が2013年12⽉7⽇。 それ以དྷ、115ものリリースがされています!

  24. What Scaffold Tool is 「scaffold(スキャフォールド)」は「⾜場」という意味です。 「⾜場」という名の通り、アプリケーションのひな形となるソースコードを⾃動⽣成します。

  25. Who A U Background What Tech Getting Start Inside Learn

    More Why JHipster? JHipsterͷར఺ Purpose JHipster4
  26. Why #PIWNCT 5RTKPI$QQV Spring Boot と Angular は、 素晴らしいフルスタックフレームワークです。

  27. Why #PIWNCT 5RTKPI$QQV ですが、とても⼤きなフレームワークです。 習得コストも⼤きいです。

  28. Why JHipsterを⽤いることで すばやくWebアプリケーションの 雛形を作ることができます! 素晴らしいサンプルはプロジェクトにとって⾮常に有ޮです。

  29. Why これがJHipsterで⽣成されたWebアプリケーションのը⾯です。

  30. Why 認ূや認可の仕組みが最初から⽤意されています。 オプションによりSocialログインも⽤意されます。

  31. Why i18n(Internationalization)も⽤意されており、 ⾔語タブにより表⽰⾔語を切り替えることが可能です。

  32. Why アプリケーションを管理するҝの༷ʑな機能が⽤意されています。 例えば管理 - メトリクスを選୒すると、JVMのঢ়態や HTTPリクエスト਺などを確認することができます。

  33. Why 管理 - ヘルスチェックを選୒すると、データベースやディスクスペース のঢ়態を確認することができます。

  34. Why 管理 - 設定を選୒すると、Spring configurationやsystemEnvironment など、各種アプリケーション環境設定を表⽰できます。

  35. Why 管理 - ログを選୒すると、ログ設定の確認やม更ができます。

  36. Why 管理 - APIを選୒すると、Swagger UIによるWebAPIのドキュメント を表⽰できます。

  37. 全てが最初からWeb Applicationに⽤意!! Why

  38. ,*KRUVGT鰘ѹ⋳䥥㓱▀猳 Why

  39. Who A U Background What Getting Start Inside Learn More

    Technologies JHipsterͷٕज़ Purpose Why JHipster4
  40. Client-side Server-side JHipster's Tech Tech

  41. Client-Side Tech Tech

  42. Client-Side Tech IE9以上とモダンBrowserをサポートします。

  43. Client-Side Tech CSSフレームワークであるBootstrapを⽤いてレスポンシブなWebデザインを ࣮現できます。

  44. Client-Side Tech Google製JavaScriptフレームワーク。 フルスタックな機能を⽤いたSPA(Single Page Application)が構築できます。

  45. Client-Side Tech ウェブサーバーとウェブブラウザとの間の૒⽅向通信の技術規格。 ૒⽅向通信が低コストで࣮現可能です。

  46. Client-Side Tech Twitter製のフロントエンド⽤パッケージ管理ツールです。 JavaScript,CSS,HTMLなどを依存ؔ係を含めて管理してくれます。

  47. Client-Side Tech Node.jsをベースとしたビルドシステムです。 さまざまな作業を⾃動化可能となります。 ストリーミングビルドシステムと⾔われ、ファイルのॲ理をストリームで ⾏います。

  48. Client-Side Tech Sass (Syntactically Awesome Stylesheets)。 スタイルシート⾔語でCSSを簡略にコーディング出དྷます。

  49. Client-Side Tech BrowserSyncはWeb開ൃをサポートするローカルサーバーです。 HTMLなどのファイルをม更すると⾃動でブラウザをリロードしてくれるので、 インタラクティブな開ൃが可能となります。

  50. Client-Side Tech Karmaはテストフレームワークと組み合わせて࣮ブラウザ上でテストを⾏えます。

  51. Client-Side Tech ProtractorはSelenium WebDriverJSベースのフレームワークです。 E2E(End to End)テストをサポートします。

  52. Server-Side Tech

  53. Server-Side Tech Spring プロジェクトが提供する༷ʑなライブラリやフレームワークを ⼿早く使えるフレームワークです。 Spring Securityなどの協⼒なプロダクトを活⽤することで、素早く安全な Webアプリケーションを開ൃできます。

  54. Server-Side Tech Netflix OSSはマイクロサービスを࣮現するOSS製品です。 Eureka(中間レイヤのサーバのロードバランスと障害復چ)やZuul(動的なルー ティング、モニタリング、障害耐性、セキュリティなどの役割をもつサービス) などがあります。

  55. Server-Side Tech Gradle / Mavenは、Javaのデファクトスタンダードなビルドツールです。 JHipsterではどちらのビルドツールを使うかを選୒できます。

  56. Server-Side Tech HibernateはJavaのO/Rマッパーフレームワークです。 JPAやSpring Data JPAの࣮૷として⽤いられています。

  57. Server-Side Tech LiquibaseはDBリファクタリングツールです。 DB のม更を XML ファイル(ChangeLog)で管理し、異なる DB 製品であって も、同じ

    XML ファイルのม更で反映することができます。
  58. Server-Side Tech MySQL、PostgreSQ、Oracleなどのデータベース製品をサポートします。 この他、MariaDBもサポートしています。

  59. Server-Side Tech MongoDBはNoSQLと呼ばれるドキュメント指向データベースです。

  60. Server-Side Tech Cassandraは、Facebook,Twitter,Diggなどの有名Webサービスが導⼊したこ とで注⽬を集めているFacebook 製NoSQLデータベースです。 Apacheに寄贈され,Apacheトッププロジェクトに昇格しました。

  61. Server-Side Tech EHCacheはキャッシュ機能を提供する Java ライブラリです。 HibernateのL2キャッシュで⽤いられます。

  62. Server-Side Tech Hazelcastは、オープンソースのインメモリデータグリッドソフトウェアです。 ノード間でのインメモリのデータ共有、ঢ়態更新を管理します。 HibernateのL2キャッシュやHTTPセッションをクラスタ化する際に⽤いられます。

  63. Server-Side Tech ElasticSearchは全⽂ݕ索システムです。 Luceneという全⽂ݕ索エンジンを利⽤しており、REST-APIを提供しています。

  64. Server-Side Tech Thymeleafは、Javaのテンプレートエンジンライブラリです。 ナチュラルテンプレーティングというコンセプトに持っており、 ੩的にブラウザでの表⽰が可能です。デザイナとの共同作業に便利です。

  65. Server-Side Tech GatlingはScala製の負荷テスト⽀援ツールです。

  66. Server-Side Tech CucumberはE2E(End to End)のテストツールです。

  67. Who A U Background What Learn More JHipster 4.0 for

    Angular2 Purpose Why Tech Getting Start Inside
  68. JHipster4 is #PIWNCT,5 #PIWNCT $QQV5VTCR $QQV5VTCR "AngularJS"は、Angular 1.xを意味します。 "Angular"は、Angular 2以降を指す名前です。

    JHipster4
  69. 「Angular 2 Migration」より引⽤ http://www.slideshare.net/WilliamMarq/angular-2-migration-jhipster-meetup-6 JHipster4

  70. 「Angular 2 Migration」より引⽤ http://www.slideshare.net/WilliamMarq/angular-2-migration-jhipster-meetup-6 JHipster4

  71. 「Angular 2 Migration」より引⽤ http://www.slideshare.net/WilliamMarq/angular-2-migration-jhipster-meetup-6 JHipster4

  72. 「Angular 2 Migration」より引⽤ http://www.slideshare.net/WilliamMarq/angular-2-migration-jhipster-meetup-6 JHipster4

  73. 「Angular 2 Migration」より引⽤ http://www.slideshare.net/WilliamMarq/angular-2-migration-jhipster-meetup-6 JHipster4

  74. 「Angular 2 Migration」より引⽤ http://www.slideshare.net/WilliamMarq/angular-2-migration-jhipster-meetup-6 JHipster4 䛟⨉ #PIWNCT4QWVGT鱃㚂䠉

  75. Angular2への取り組み 鰄鰄鯼鰺鰠 ⎶鰟鱥鯮鲄鰟嵒鰑鰹猳

  76. 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鯽㚱≼鰊鰼鲍鱈鱺鲍鲎 屬鰐䧏鰟啐鰆鰵鱡鯮鱝鰟屬蒌鰈鰆鱃勤㑏鰈 鰄鰒鰺鱃㚂䠉Ⅹ⹻
  77. UIϥΠϒϥϦ 1SJNF/(6MUJNB Materialデザインを採⽤したスタイル。 テーマ切り替えも可能で、モダンなUIを構築可能。 Angular2

  78. UIϥΠϒϥϦ 1SJNF/(0NFHB Bootstrapライクなデザインを採⽤したスタイル。 Materialデザインに⽐べて、動作がܰいように感じている。 Angular2

  79. UIϥΠϒϥϦ PrimeNGのDataTableは技術ݕূの結果、要求仕༷に耐えれないことが判明。 Gridは複ࡶ性の⾼いライブラリのため、࣮績を重視してag-gridを採⽤。 Angular2

  80. Who A U Background What Inside Learn More Getting Start

    ͸͡ΊͯΈΑ͏ʂ Purpose Why Tech JHipster4
  81. How to install

  82. ローカルインストール Vagrantでのインストール Docker でのインストール JHipsterはローカルインストールの他、VagrantやDocerを使ったインストール が可能です Getting Start

  83. ローカルインストール Vagrantでのインストール Docker でのインストール 今回は、ローカルインストールを紹介します Getting Start

  84. Java8をOracleのWebサイトからインストール ビルドツールはMavenかGradleを選୒可能 ※こららはWrapperで⾃動的にインストールされるので、⽤意しなくてもOK git-scm.com からGitをインストール Node.jsのWebサイトからNode.jsをインストール ⼀ॹにインストールされるnpmを使⽤して JHipsterに必要なnpmパッケージをインストール Getting Start

    Local Install
  85. $ 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
  86. How to create app

  87. 上記コマンドを࣮⾏すると、JHipsterのアプリケーション作成が始まります。 $mkdir hogeHipster $ cd hogeHipster $ yo jhipster Getting

    Start How To Create App
  88. ██ ██ ██ ████████ ███████ ██████ ████████ ████████ ███████ ██

    ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████████ ██ ███████ █████ ██ ██████ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ████████ ██ ██████ ██ ████████ ██ ██ 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
  89. JHipsterを⽤いると、上記例のようなマイクロサービスアプリケーション構成を ⼿ܰに構築できます。 Getting Start

  90. 上記の⾚࿮がjhipster-generatorで作成可能です。 Getting Start

  91. 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なアプリケーションを選୒します。
  92. How To Create App Getting Start ? (2/14) What is

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

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

    your default Java package name? (com.mycompany.myapp) javaのパッケージ名を⼊⼒します。
  95. 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を⽤いた認ূ⽅式が選୒できます。 これらを⽤いることで、ステートレスな認ূ⽅式が࣮現できます。
  96. 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も選୒可能です。
  97. 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ドライバはバンドルされていないҝ、 ⼿動で⽤意する必要があります。
  98. 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はデータをディスクに保存する場合と インメモリで動作する場合のどちらかを選୒できます。
  99. 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を⽤いた 複਺ノードでのキャッシュ⽅式も選୒可能です。
  100. 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を選୒します。
  101. 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 オプションとして導⼊する技術を選୒できます。
  102. 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などの認ূ機能 と連携したログイン機能が提供されます。
  103. 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が⽤いられます。
  104. 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を⽤いたクラスタ構成にするかどうかを選୒できま す。
  105. 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を⽤いるかどうかを選୒できます。
  106. How To Create App Getting Start ? (11/14) Would you

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

    like to enable internationalization support? (Y/n) ࠃ際化をサポートするかを選୒します。
  108. 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) ࠃ際化を選୒した場合、ネイティブランゲージを選୒します。
  109. 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) 他にサポートするネイティブランゲージを選୒します。
  110. 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 ⽤いたいテストフレームワークを選୒します。
  111. 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 全ての選୒が終ると、インストールが始まります。
  112. $ git init $ git add . $ git commit

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

  114. $ ./gradlew bootrun 上記コマンドを࣮⾏すると、8080ポートでWebアプリケーションが起動します。 Getting Start How To Run

  115. $ ./gulp 上記コマンドを࣮⾏すると、9000ポートでBrowsersyncが起動します。 これにより、࣮⾏したままը⾯の修正がインタラクティブに⾏えます。 Getting Start How To Run

  116. gulpコマンドを࣮⾏すると、ブラウザが⾃動起動してը⾯が表⽰されます。 Getting Start

  117. アカウント - 認ূを選୒してログインします。 adminとuserのアカウントがデフォルトで⽤意されています。 初期パスワードはアカウント名と同じです。 Getting Start

  118. adminアカウントでログインすると、エンティティや管理が ナビゲーションタブに表⽰されます。 Getting Start

  119. 開ൃモードで起動した場合は、管理 - データベースが選୒できます。 これを選୒すると、接ଓしているデータベースの管理ը⾯を表⽰できます。 Getting Start

  120. データベースにログインすることで、データベースの಺容を確認できます。 Getting Start

  121. create entity

  122. JHipsterを⽤いて、上のようなEntityとそれを編集するCRUDը⾯を⽣成します。 Getting Start Create entity

  123. $ yo jhipster:entity author 上記コマンドを࣮⾏して、Author Entityを⽣成します。 Getting Start Create entity

  124. Getting Start Create entity ? Do you want to add

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

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

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

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

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

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

    a relationship to another entity? No リレーションを追加するかどうかを選୒します。 ここではNoを選୒します。
  133. 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を選୒します。
  134. 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クラスの作成を選୒します。
  135. 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 ディレクティブ
  136. 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
  137. $ yo jhipster:entity book 同༷に、Book Entityを⽣成します。 Getting Start Create entity

  138. 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を選୒します。
  139. Getting Start Create entity ? What is the name of

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

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

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

    want to add? ❯◉ Required リレーションにバリデーションルールを追加します。 ここでは、BookにରしてAuthorへのリレーションが必ず存在するようにするҝ、 Requiredを選୒します。
  145. 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を⽣成します。
  146. ログインすると、エンティティにAuthorとBookが追加されています。 Getting Start

  147. エンティティ-Bookを選୒すると、CRUDը⾯が表⽰できます。 Getting Start

  148. エンティティ-Bookの表⽰ը⾯。 Getting Start

  149. エンティティ-Bookの編集ը⾯。 Getting Start

  150. エンティティ-Bookの削除確認ダイアログ。 Getting Start

  151. Who A U Background What Learn More Inside the app

    ΞϓϦέʔγϣϯߏ੒ Purpose Why Tech Getting Start JHipster4
  152. Inside srcディレクトリにサーバーサイドやフロントサイ ドのJava、JavaScriptが格納されています。

  153. Inside buildディレクトリにビルドの成果物が格納されま す。

  154. Inside targetディレクトリには、H2データベースのファ イルやElasticSearchのファイルなど、୯ମ環境で 動作する際に必要なデータが格納されます。

  155. Inside このファイルに、インストール時に選୒した಺容 が定義されています。

  156. Inside Gitの設定が最初から⽤意されています。 .gitignoreは、Gitで管理しないリソー スを定義す るものです。

  157. Inside ビルドツールにGradleを選୒した場合、Gradleの ビルドタスクが定義されます。

  158. Inside Gradleラッパーが⽤意されているため、開ൃ者は Gradleを⾃端末に⽤意しなくてもGradleを⽤いた 開ൃが可能です。

  159. Inside Gulpタスクが定義されています。

  160. Inside package.json にNPMの定義がされています。 NPMでインストールしたライブラリは、 「node_modules」に格納されています。

  161. Inside Bowerの定義です。 .bowerrcには、Bowerでインストールしたライブ ラリの配置ディレクトリの定義がされています。 bower.jsonには、依存するするライブラリ定義が されています。

  162. Inside Eclipseのプロジェクト定義が最初から⽤意されて います。 ですので、インストール後、すぐにEclipseで開ൃ を開始できます。

  163. Inside EditorConfigは、開ൃ者がさまざまなエディタと IDE間で⼀貫したコーディングスタイルを定義し、 維持するためのものです。 コーディングスタイルやファイルのエンコーディ ング形式などを定義します。 editorconfig.org

  164. Inside ESLintの設定です。 ESLint は JavaScript のための੩的ݕূツールで す。コードを࣮⾏する前に明らかなバグを⾒つけ たり、括弧やスペースの使い⽅などのスタイルを 統⼀したりするのに役⽴ちます。

  165. Inside TravisCIによるビルド定義が⽤意されています。

  166. Inside Jenkinsのビルド定義が⽤意されています。 これにより、Jenkinsのジョブが簡୯に作成できま す。

  167. Inside src ├── main │ ├── docker····················dockerؔ係のリソース │ ├── java························サーバーサイドのJavaソース

    │ ├── resources················各種リソースファイル │ │ ├── config···············SpringBootの設定ファイル │ │ │ └── liquibase·····liquibaseの定義ファイルとchangelog │ │ ├── i18n··················ࠃ際化ରԠの場合のリソース定義 │ │ ├── mails·················メールテンプレート定義 │ │ └── templates··········エラーը⾯のテンプレート定義 │ └── webapp··················フロントサイドのJavaScriptソースなど └── test·······························テストソース
  168. Who A U Background What Learn More ֶशͷखҾ͖ Purpose Why

    Tech Getting Start Inside JHipster4
  169. Learn More ɹBOOK □ The JHipster Mini-Book 2.0 □[改訂新版]Spring⼊⾨ □

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

    Getting Start Inside Learn More JHipster4
  172. ,*KRUVGT鰘ѹ⋳䥥㓱桘猳 Summary