twitter emulation

JavaおよびReact/AngularのTwitterエミュレーション

アプリケーションは、 Twitterの主な機能をエミュレートします。

• ログイン、ログアウト。
• アカウント管理（登録、編集、削除、サブストリングによる検索）;
• メインページ（アカウントプロパティ、タイムライン、ツイート、フォロー、フォロワー）;
• ツイート作成;
• フォロー/フォローします。

いくつかの点で：

1. スプリングMVC 、 JSP
2. スプリングブート、 JSP
3. スプリングブート、反応
4. スプリングブート、角度

要件

• JDK 21+
• Apache Maven 3.9.0+
• node.js 22.12.0+（オプション）
• Docker（オプション）

ランニング

スプリングMVC、JSP

1. Mavenとのコマンドラインから（ルートディレクトリ内）：

   mvn clean install -Dmaven.test.skip=true

2. ディレクトリの変更：

   cd twitter-emulation-spring-mvc-jsp

3. コマンドラインから、 Mavenでコマンドの1つを実行します。

   mvn jetty:run （ H2 ）
   mvn jetty:run -P development （ H2 ）
   mvn jetty:run -P production （ Oracleデータベース）
   （ Oracleデータベース接続プロパティ： etc/jetty.xml ）

4. 展開されたWebアプリケーションにアクセスしてください。

   http：// localhost：8080

5. 既存のアカウント（ jsmith/password 、 jdoe/password 、 rroe/password 、 alone/password ）でログインするか、新しいアカウントを作成します

スプリングブート、JSP

1. Mavenとのコマンドラインから（ルートディレクトリ内）：

   mvn clean install -Dmaven.test.skip=true

2. ディレクトリの変更：

   cd twitter-emulation-spring-boot-jsp

3. コマンドラインから、 Mavenでコマンドの1つを実行します。

   mvn spring-boot:run （ H2 ）
   mvn spring-boot:run -P development （ H2 ）
   mvn spring-boot:run -P production （ Oracle Database ）
   （ Oracle Database Connection Properties： src/main/resources/application.yml ）

4. 展開されたWebアプリケーションにアクセスしてください。

   http：// localhost：8080

5. 既存のアカウント（ jsmith/password 、 jdoe/password 、 rroe/password 、 alone/password ）でログインするか、新しいアカウントを作成します

スプリングブート、反応

方法1

1. Mavenとのコマンドラインから（ルートディレクトリ内）：

   mvn clean install -Dmaven.test.skip=true

2. ディレクトリの変更：

   cd twitter-emulation-spring-boot-react-server

3. コマンドラインから、 Mavenでコマンドの1つを実行します。

   mvn spring-boot:run （ H2 ）
   mvn spring-boot:run -P development （ H2 ）
   mvn spring-boot:run -P production （ Oracle Database ）
   （ Oracle Database Connection Properties： src/main/resources/application.yml ）

4. 展開されたWebアプリケーションにアクセスしてください。

   http：// localhost：8080

5. 既存のアカウント（ jsmith/password 、 jdoe/password 、 rroe/password 、 alone/password ）でログインするか、新しいアカウントを作成します

方法2

1. node.jsをインストールします

2. NPMが機能していることを確認するために実行します。

   npm -v

3. ディレクトリの変更：

   cd twitter-emulation-spring-boot-react-server

4. コマンドラインから、 Mavenでコマンドの1つを実行します。

   mvn spring-boot:run （ H2 ）
   mvn spring-boot:run -P development （ H2 ）
   mvn spring-boot:run -P production （ Oracle Database ）
   （ Oracle Database Connection Properties： src/main/resources/application.yml ）

5. ディレクトリの変更：

   cd twitter-emulation-spring-boot-react-web

6. npmのコマンドラインから：

   npm start

7. 展開されたWebアプリケーションにアクセスしてください。

   http：// localhost：5173

8. 既存のアカウント（ jsmith/password 、 jdoe/password 、 rroe/password 、 alone/password ）でログインするか、新しいアカウントを作成します

方法3

1. Mavenとのコマンドラインから（ルートディレクトリ内）：

   mvn clean package -DskipTests

2. ディレクトリの変更：

   cd twitter-emulation-distrib/target

3. 配布ファイルを見つける：

   twitter-emulation-react-<version>.zip

4. ZIPからファイルを抽出します。

   unzip twitter-emulation-react-<version>.zip

5. ディレクトリの変更：

   cd twitter-emulation-react-<version>

6. 走る：

   runme.bat （ windows ）
   runme.sh （ macosまたはlinux ）

7. 実行中のWebアプリケーションにアクセスしてください。

   http：// localhost：8080

8. 既存のアカウント（ jsmith/password 、 jdoe/password 、 rroe/password 、 alone/password ）でログインするか、新しいアカウントを作成します

スプリングブート、角度

方法1

1. Mavenとのコマンドラインから（ルートディレクトリ内）：

   mvn clean install -Dmaven.test.skip=true

2. ディレクトリの変更：

   cd twitter-emulation-spring-boot-angular-server

3. コマンドラインから、 Mavenでコマンドの1つを実行します。

   mvn spring-boot:run （ H2 ）
   mvn spring-boot:run -P development （ H2 ）
   mvn spring-boot:run -P production （ Oracle Database ）
   （ Oracle Database Connection Properties： src/main/resources/application.yml ）

4. 展開されたWebアプリケーションにアクセスしてください。

   http：// localhost：8080

5. 既存のアカウント（ jsmith/password 、 jdoe/password 、 rroe/password 、 alone/password ）でログインするか、新しいアカウントを作成します

方法2

1. node.jsをインストールします

2. NPMが機能していることを確認するために実行します。

   npm -v

3. ディレクトリの変更：

   cd twitter-emulation-spring-boot-angular-server

4. コマンドラインから、 Mavenでコマンドの1つを実行します。

   mvn spring-boot:run （ H2 ）
   mvn spring-boot:run -P development （ H2 ）
   mvn spring-boot:run -P production （ Oracle Database ）
   （ Oracle Database Connection Properties： src/main/resources/application.yml ）

5. ディレクトリの変更：

   cd twitter-emulation-spring-boot-angular-web

6. npmのコマンドラインから：

   npm start

7. 展開されたWebアプリケーションにアクセスしてください。

   http：// localhost：4200

8. 既存のアカウント（ jsmith/password 、 jdoe/password 、 rroe/password 、 alone/password ）でログインするか、新しいアカウントを作成します

方法3

1. Mavenとのコマンドラインから（ルートディレクトリ内）：

   mvn clean package -DskipTests

2. ディレクトリの変更：

   cd twitter-emulation-distrib/target

3. 配布ファイルを見つける：

   twitter-emulation-angular-<version>.zip

4. ZIPからファイルを抽出します。

   unzip twitter-emulation-angular-<version>.zip

5. ディレクトリの変更：

   cd twitter-emulation-angular-<version>

6. 走る：

   runme.bat （ windows ）
   runme.sh （ macosまたはlinux ）

7. 実行中のWebアプリケーションにアクセスしてください。

   http：// localhost：8080

8. 既存のアカウント（ jsmith/password 、 jdoe/password 、 rroe/password 、 alone/password ）でログインするか、新しいアカウントを作成します

監視

1. ディレクトリの変更：

   cd twitter-emulation-spring-boot-admin

2. Mavenとのコマンドラインから：

   mvn spring-boot:run

3. ディレクトリの変更：

   cd twitter-emulation-spring-boot-react-server

   または

   cd twitter-emulation-spring-boot-angular-server

4. Mavenとのコマンドラインから：

   mvn spring-boot:run

5. スプリングブート管理アプリケーションにアクセスしてください。

   http：// localhost：9000

6. 既存のアカウントadmin/passwordでログインします

テスト

DAOとサービスのバックエンド単位テスト

1. Dockerをインストールします（オプション、 Oracleデータベーステストのみ）

2. ディレクトリの変更：

   cd twitter-emulation-common

3. コマンドラインから、 Mavenでコマンドの1つを実行します。

   mvn test （ H2 ）
   mvn test -P development （ H2 ）
   mvn test -P production （ Oracleデータベース）

コントローラーのバックエンド単位テスト、統合テスト

1. ディレクトリの変更：

   cd twitter-emulation-spring-boot-common-server

2. Mavenとのコマンドラインから：

   mvn test

フロントエンド単位テスト

Jest、React Testing Library、Vitest Tests

1. ディレクトリの変更：

   cd twitter-emulation-spring-boot-react-web

2. npmのコマンドラインから：

   npm run test

ジャスミンテスト

1. ディレクトリの変更：

   cd twitter-emulation-spring-boot-angular-web

2. npmのコマンドラインから：

   npm run test

フロントエンドエンドツーエンドテスト

操り人形師テスト

1. ディレクトリの変更：

   cd twitter-emulation-spring-boot-react-web

2. npmのコマンドラインから：

   npm run e2e

長期テスト

1. ディレクトリの変更：

   cd twitter-emulation-spring-boot-angular-web

2. npmのコマンドラインから：

   npm run e2e

発達

• H2データベースコンソール
• Swagger：
  • swagger ui
  • swagger json
  • swagger yaml

フレームワークとライブラリ

• 春：
  • スプリングMVC
  • スプリングブート
  • スプリングセキュリティ
  • 春のテスト
  • スプリングブート管理者
• 反応します
• 角度
• H2またはOracleデータベース（データストレージ）
• Swagger（ REST APIドキュメント）
• Junit（ Java単位テスト）
• モッキート（ Javaの単体テストのためのモッキング）
• TestContainers（Dockerコンテナでのテスト）
• jest（ javascriptユニットテスト）
• React Testingライブラリ（ ReactのJavaScriptユニットテスト）
• ジャスミン（ JavaScript単体テスト）
• Puppeteer（ JavaScriptエンドツーエンドテスト）
• 分度器（角度のエンドツーエンドテスト）
• Vitest（ ViteによるJavaScriptテスト）

CI/CD

• GitHubアクション（ワークフローの自動化）
• Depenabot（自動化された依存関係の更新）
• 合併（プルリクエストの自動化されたマージ）

ツール

• Todolist 7.1.5+（計画）
• 鉛筆3.0.4+（GUIプロトタイピング）
• バイオレット0.21.1（UML図）

記事

Java（ロシア語）でWebアプリケーションの作成の進化