twitter emulation

การจำลอง Twitter ใน Java และ React/Angular

แอปพลิเคชันจำลองคุณสมบัติหลักของ Twitter :

• เข้าสู่ระบบ, ออกจากระบบ;
• การจัดการบัญชี (การลงทะเบียน, การแก้ไข, การลบ, การค้นหาโดย substring);
• หน้าหลัก (คุณสมบัติบัญชี, ไทม์ไลน์, ทวีต, ต่อไปนี้, ผู้ติดตาม);
• ทวีตสร้าง;
• ติดตาม/เลิกติดตาม

หลายวิธี:

1. Spring MVC , JSP
2. Spring Boot , JSP
3. สปริงบูต , ตอบสนอง
4. สปริงบูต , เชิงมุม

ความต้องการ

• JDK 21+
• Apache Maven 3.9.0+
• node.js 22.12.0+ (ไม่บังคับ)
• Docker (ไม่บังคับ)

วิ่ง

Spring MVC, JSP

1. จากบรรทัดคำสั่งที่มี maven (ในไดเรกทอรีราก):

   mvn clean install -Dmaven.test.skip=true

2. เปลี่ยนไดเรกทอรี:

   cd twitter-emulation-spring-mvc-jsp

3. จากบรรทัดคำสั่งเรียกใช้หนึ่งในคำสั่งที่มี maven :

   mvn jetty:run ( H2 )
   mvn jetty:run -P development ( H2 )
   mvn jetty:run -P production ( Oracle Database )
   (คุณสมบัติการเชื่อมต่อ ฐานข้อมูล Oracle : etc/jetty.xml )

4. เข้าถึงเว็บแอปพลิเคชันที่ปรับใช้ได้ที่:

   http: // localhost: 8080

5. เข้าสู่ระบบด้วยบัญชีที่มีอยู่ ( jsmith/password , jdoe/password , rroe/password , alone/password ) หรือสร้างบัญชีใหม่

Spring Boot, JSP

1. จากบรรทัดคำสั่งที่มี maven (ในไดเรกทอรีราก):

   mvn clean install -Dmaven.test.skip=true

2. เปลี่ยนไดเรกทอรี:

   cd twitter-emulation-spring-boot-jsp

3. จากบรรทัดคำสั่งเรียกใช้หนึ่งในคำสั่งที่มี maven :

   mvn spring-boot:run ( H2 )
   mvn spring-boot:run -P development ( H2 )
   mvn spring-boot:run -P production ( Oracle Database )
   (คุณสมบัติการเชื่อมต่อ ฐานข้อมูล Oracle : src/main/resources/application.yml )

4. เข้าถึงเว็บแอปพลิเคชันที่ปรับใช้ได้ที่:

   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 :

   mvn spring-boot:run ( H2 )
   mvn spring-boot:run -P development ( H2 )
   mvn spring-boot:run -P production ( Oracle Database )
   (คุณสมบัติการเชื่อมต่อ ฐานข้อมูล Oracle : src/main/resources/application.yml )

4. เข้าถึงเว็บแอปพลิเคชันที่ปรับใช้ได้ที่:

   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 :

   mvn spring-boot:run ( H2 )
   mvn spring-boot:run -P development ( H2 )
   mvn spring-boot:run -P production ( Oracle Database )
   (คุณสมบัติการเชื่อมต่อ ฐานข้อมูล Oracle : src/main/resources/application.yml )

5. เปลี่ยนไดเรกทอรี:

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

6. จากบรรทัดคำสั่งด้วย NPM :

   npm start

7. เข้าถึงเว็บแอปพลิเคชันที่ปรับใช้ได้ที่:

   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. เข้าถึงเว็บแอปพลิเคชันที่กำลังทำงานได้ที่:

   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 :

   mvn spring-boot:run ( H2 )
   mvn spring-boot:run -P development ( H2 )
   mvn spring-boot:run -P production ( Oracle Database )
   (คุณสมบัติการเชื่อมต่อ ฐานข้อมูล Oracle : src/main/resources/application.yml )

4. เข้าถึงเว็บแอปพลิเคชันที่ปรับใช้ได้ที่:

   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 :

   mvn spring-boot:run ( H2 )
   mvn spring-boot:run -P development ( H2 )
   mvn spring-boot:run -P production ( Oracle Database )
   (คุณสมบัติการเชื่อมต่อ ฐานข้อมูล Oracle : src/main/resources/application.yml )

5. เปลี่ยนไดเรกทอรี:

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

6. จากบรรทัดคำสั่งด้วย NPM :

   npm start

7. เข้าถึงเว็บแอปพลิเคชันที่ปรับใช้ได้ที่:

   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. เข้าถึงเว็บแอปพลิเคชันที่กำลังทำงานได้ที่:

   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. Access Spring Boot Admin Admin Admin ที่:

   http: // localhost: 9000

6. เข้าสู่ระบบด้วย admin/password ที่มีอยู่

การทดสอบ

การทดสอบหน่วยแบ็กเอนด์สำหรับ DAO และบริการ

1. ติดตั้ง Docker (เป็นทางเลือกสำหรับการทดสอบ ฐานข้อมูล Oracle เท่านั้น)

2. เปลี่ยนไดเรกทอรี:

   cd twitter-emulation-common

3. จากบรรทัดคำสั่งเรียกใช้หนึ่งในคำสั่งที่มี maven :

   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

การทดสอบหน่วยส่วนหน้า

ตลก

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

การทดสอบแบบ end-to-end Frontend

การทดสอบหุ่นเชิด

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 )
• Mockito (เยาะเย้ยสำหรับการทดสอบหน่วยใน Java )
• TestContainers (ทดสอบกับคอนเทนเนอร์ Docker)
• jest (การทดสอบหน่วย JavaScript )
• ไลบรารีการทดสอบปฏิกิริยา (การทดสอบหน่วย JavaScript สำหรับ React )
• จัสมิน (การทดสอบหน่วย JavaScript )
• Puppeteer (การทดสอบแบบ end-to-end JavaScript )
• ไม้โปรแทรกเตอร์ (การทดสอบแบบ end-to-end สำหรับ Angular )
• Vitest (การทดสอบ JavaScript โดย VITE )

CI/CD

• การกระทำของ GitHub (ระบบอัตโนมัติของเวิร์กโฟลว์)
• Intervot (อัปเดตการพึ่งพาอัตโนมัติ)
• การควบรวมกิจการ (การรวมคำขอดึงอัตโนมัติ)

เครื่องมือ

• Todolist 7.1.5+ (การวางแผน)
• ดินสอ 3.0.4+ (Prototyping GUI)
• ไวโอเล็ต 0.21.1 (ไดอะแกรม UML)

บทความ

วิวัฒนาการของการสร้างเว็บแอปพลิเคชันใน Java (รัสเซีย)