twitter emulation

Emulasi Twitter di Java dan Bereaksi/Angular

Aplikasi ini meniru fitur utama Twitter :

• login, logout;
• manajemen akun (pendaftaran, pengeditan, penghapusan, pencarian dengan substring);
• halaman utama (properti akun, timeline, tweet, berikut, pengikut);
• Tweet membuat;
• Ikuti/Berhenti mengikuti.

dalam beberapa hal:

1. Spring MVC , JSP
2. Boot musim semi , JSP
3. Boot musim semi , bereaksi
4. Boot musim semi , sudut

Persyaratan

• JDK 21+
• Apache Maven 3.9.0+
• Node.js 22.12.0+ (opsional)
• Docker (opsional)

Berlari

Spring MVC, JSP

1. Dari baris perintah dengan maven (di direktori root):

   mvn clean install -Dmaven.test.skip=true

2. Ubah Direktori:

   cd twitter-emulation-spring-mvc-jsp

3. Dari baris perintah jalankan salah satu perintah dengan Maven :

   mvn jetty:run ( H2 )
   mvn jetty:run -P development ( H2 )
   mvn jetty:run -P production ( Oracle Database )
   (Properti koneksi database Oracle : etc/jetty.xml )

4. Akses aplikasi web yang digunakan di:

   http: // localhost: 8080

5. Masuk dengan akun yang ada ( jsmith/password , jdoe/password , rroe/password , alone/password ) atau Buat Akun Baru

Spring Boot, JSP

1. Dari baris perintah dengan maven (di direktori root):

   mvn clean install -Dmaven.test.skip=true

2. Ubah Direktori:

   cd twitter-emulation-spring-boot-jsp

3. Dari baris perintah jalankan salah satu perintah dengan Maven :

   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. Akses aplikasi web yang digunakan di:

   http: // localhost: 8080

5. Masuk dengan akun yang ada ( jsmith/password , jdoe/password , rroe/password , alone/password ) atau Buat Akun Baru

Spring Boot, bereaksi

Metode 1

1. Dari baris perintah dengan maven (di direktori root):

   mvn clean install -Dmaven.test.skip=true

2. Ubah Direktori:

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

3. Dari baris perintah jalankan salah satu perintah dengan Maven :

   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. Akses aplikasi web yang digunakan di:

   http: // localhost: 8080

5. Masuk dengan akun yang ada ( jsmith/password , jdoe/password , rroe/password , alone/password ) atau Buat Akun Baru

Metode 2

1. Instal Node.js

2. Dijalankan untuk memastikan bahwa NPM berfungsi:

   npm -v

3. Ubah Direktori:

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

4. Dari baris perintah jalankan salah satu perintah dengan Maven :

   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. Ubah Direktori:

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

6. Dari baris perintah dengan NPM :

   npm start

7. Akses aplikasi web yang digunakan di:

   http: // localhost: 5173

8. Masuk dengan akun yang ada ( jsmith/password , jdoe/password , rroe/password , alone/password ) atau Buat Akun Baru

Metode 3

1. Dari baris perintah dengan maven (di direktori root):

   mvn clean package -DskipTests

2. Ubah Direktori:

   cd twitter-emulation-distrib/target

3. Temukan file distribusi:

   twitter-emulation-react-<version>.zip

4. Ekstrak file dari ZIP, misalnya:

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

5. Ubah Direktori:

   cd twitter-emulation-react-<version>

6. Berlari:

   runme.bat ( windows )
   runme.sh ( macos atau linux )

7. Akses aplikasi web yang sedang berjalan di:

   http: // localhost: 8080

8. Masuk dengan akun yang ada ( jsmith/password , jdoe/password , rroe/password , alone/password ) atau Buat Akun Baru

Boot musim semi, sudut

Metode 1

1. Dari baris perintah dengan maven (di direktori root):

   mvn clean install -Dmaven.test.skip=true

2. Ubah Direktori:

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

3. Dari baris perintah jalankan salah satu perintah dengan Maven :

   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. Akses aplikasi web yang digunakan di:

   http: // localhost: 8080

5. Masuk dengan akun yang ada ( jsmith/password , jdoe/password , rroe/password , alone/password ) atau Buat Akun Baru

Metode 2

1. Instal Node.js

2. Dijalankan untuk memastikan bahwa NPM berfungsi:

   npm -v

3. Ubah Direktori:

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

4. Dari baris perintah jalankan salah satu perintah dengan Maven :

   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. Ubah Direktori:

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

6. Dari baris perintah dengan NPM :

   npm start

7. Akses aplikasi web yang digunakan di:

   http: // localhost: 4200

8. Masuk dengan akun yang ada ( jsmith/password , jdoe/password , rroe/password , alone/password ) atau Buat Akun Baru

Metode 3

1. Dari baris perintah dengan maven (di direktori root):

   mvn clean package -DskipTests

2. Ubah Direktori:

   cd twitter-emulation-distrib/target

3. Temukan file distribusi:

   twitter-emulation-angular-<version>.zip

4. Ekstrak file dari ZIP, misalnya:

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

5. Ubah Direktori:

   cd twitter-emulation-angular-<version>

6. Berlari:

   runme.bat ( windows )
   runme.sh ( macos atau linux )

7. Akses aplikasi web yang sedang berjalan di:

   http: // localhost: 8080

8. Masuk dengan akun yang ada ( jsmith/password , jdoe/password , rroe/password , alone/password ) atau Buat Akun Baru

Pemantauan

1. Ubah Direktori:

   cd twitter-emulation-spring-boot-admin

2. Dari baris perintah dengan Maven :

   mvn spring-boot:run

3. Ubah Direktori:

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

   atau

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

4. Dari baris perintah dengan Maven :

   mvn spring-boot:run

5. Akses Aplikasi Admin Spring Boot di:

   http: // localhost: 9000

6. Masuk dengan admin/password akun yang ada

Pengujian

Pengujian unit backend untuk DAO dan layanan

1. Instal Docker (Opsional, Hanya untuk Pengujian Database Oracle )

2. Ubah Direktori:

   cd twitter-emulation-common

3. Dari baris perintah jalankan salah satu perintah dengan Maven :

   mvn test ( H2 )
   mvn test -P development ( H2 )
   mvn test -P production ( Oracle Database )

Pengujian unit backend untuk pengontrol, pengujian integrasi

1. Ubah Direktori:

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

2. Dari baris perintah dengan Maven :

   mvn test

Pengujian unit frontend

Jest, React Testing Library, Tes Vitest

1. Ubah Direktori:

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

2. Dari baris perintah dengan NPM :

   npm run test

Tes Jasmine

1. Ubah Direktori:

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

2. Dari baris perintah dengan NPM :

   npm run test

Pengujian ujung ke ujung frontend

Tes dalang

1. Ubah Direktori:

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

2. Dari baris perintah dengan NPM :

   npm run e2e

Tes busur derajat

1. Ubah Direktori:

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

2. Dari baris perintah dengan NPM :

   npm run e2e

Perkembangan

• Konsol Database H2
• Menyombongkan:
  • Swagger UI
  • Swagger Json
  • Swagger Yaml

Kerangka kerja dan perpustakaan

• Musim semi:
  • Spring MVC
  • Boot musim semi
  • Keamanan musim semi
  • Tes musim semi
  • Admin Boot Musim Semi
• Bereaksi
• Angular
• H2 atau Oracle Database (Data Storage)
• Swagger (Dokumentasi API REST )
• Junit (Pengujian Unit Java )
• Mockito (mengejek untuk tes unit di java )
• TestContainers (pengujian dengan wadah Docker)
• Jest (Pengujian Unit JavaScript )
• React Testing Library (Pengujian Unit JavaScript untuk React )
• Jasmine (Pengujian Unit Javascript )
• Puppeteer (Pengujian End-to-End Javascript )
• Gotraktor (pengujian ujung ke ujung untuk sudut )
• Vitest (Pengujian JavaScript oleh Vite )

CI/CD

• Tindakan GitHub (otomatisasi alur kerja)
• DependAbot (Pembaruan Dependensi Otomatis)
• Mergy (penggabungan otomatis permintaan tarik)

Peralatan

• Todolist 7.1.5+ (Perencanaan)
• Pensil 3.0.4+ (Prototipe GUI)
• Violet 0.21.1 (Diagram UML)

Artikel

Evolusi Membuat Aplikasi Web di Java (Rusia)