Skip to content

new-vtrc-mobile

new-vtrc-mobile (branch: master) คือโปรเจกต์ React Native ใหม่ที่สร้างด้วย RN CLI ล่าสุด — internal name ยังเป็น MyNewProject จาก scaffold เริ่มต้น ไม่เคยถูกเปลี่ยน (new-vtrc-mobile/app.json:1-4, new-vtrc-mobile/package.json:2) โครงสร้างและ dependency สื่อว่าเป็นความพยายาม เขียนสถาปัตยกรรมใหม่ทั้งชุด สำหรับแทนที่ vtrc-mobile แต่ ณ ตอนตรวจสอบยังอยู่ในระยะ early-stage / architecture proof-of-concept — ดูสรุปหลักฐานที่หัวข้อ "เทียบกับ vtrc-mobile" ด้านล่าง

Stack

องค์ประกอบค่าหลักฐาน
React Native0.78.0new-vtrc-mobile/package.json:35
React19.0.0new-vtrc-mobile/package.json:32
ภาษาTypeScript ทั้งหมด (มี tsconfig.json, ไม่พบไฟล์ .js ใน src/)new-vtrc-mobile/tsconfig.json
Navigation@react-navigation v7 (native-stack + bottom-tabs)new-vtrc-mobile/package.json:16-19
State management@reduxjs/toolkit ^2.8.2 + redux-persist ^6.0.0 (storage = AsyncStorage ตรง ไม่ใช่ keychain)new-vtrc-mobile/package.json:20, new-vtrc-mobile/src/redux/store.ts:13,23
Data fetchingคู่ขนานสองแบบเหมือน vtrc-mobile: graphqlRequest/axiosRequest เขียนเองบน axios (ไม่มี Apollo Client ในบันเดิลนี้)new-vtrc-mobile/src/utils/ApiRequest.ts:1-215
Form validationreact-hook-form + yup/zod (มีทั้งสองไลบรารีในบันเดิลเดียวกัน)new-vtrc-mobile/package.json:33,56-57
i18ni18next/react-i18next — มี locales/th.json, locales/en.jsonnew-vtrc-mobile/package.json:27,34, new-vtrc-mobile/src/locales/
Test18 ไฟล์ทดสอบจริงใน __tests__/ (component, hook, slice, i18n)new-vtrc-mobile/__tests__/

Entrypoint

index.jsAppProviders (src/providers/AppProviders.tsx) ครอบ redux Provider + PersistGate + i18next provider + navigation container → RootNavigator (src/navigation/RootNavigator.tsx:8-20) ที่ตรวจ state.auth.isLoggedIn แล้วสลับ AuthNavigator (มีแค่ Login) กับ BottomTabNavigator (Home/Menu/Setting 3 แท็บ)

ต่างจาก vtrc-mobile ที่มี 121 screen ผูกเข้า router เดียวแบบ flat, ที่นี่ router แยกเป็น navigator ย่อยตามหลักการของ @react-navigation (AuthNavigator, BottomTabNavigator, HomeNavigator, MenuNavigator, SettingNavigator) — สถาปัตยกรรม navigation สะอาดกว่า แต่จำนวนหน้าจริงมีเพียง 6 หน้า: LoginScreen, HomeScreen, MenuScreen, SettingScreen, CheckEmpCode (มีไฟล์แต่ ถูก comment ออกจาก AuthNavigator ไม่ได้ใช้งานจริงnew-vtrc-mobile/src/navigation/AuthNavigator.tsx:5,12)

การเชื่อมต่อ backend

ใช้ backend เดียวกับ vtrc-mobile — GraphQL flow login/verify/captcha ยิงไปที่ HOSTGRAHQL เดียวกัน ด้วย mutation/query ชุดเดียวกัน (LOGIN, VERIFY_EMP_CODE_LOGIN, GENERATE_CAPTCHA) ผ่าน graphqlRequest() ที่เขียนขึ้นใหม่บน axios (new-vtrc-mobile/src/services/authService.ts:1-341) — ไม่มี Apollo Client เหมือน vtrc-mobile/src/gql/client.js

ค่า host default เป็น UAT (ไม่ใช่ prod แบบ vtrc-mobile) พร้อม prod ที่ comment ทิ้งไว้ — สลับ environment ด้วยวิธีเดียวกับ vtrc-mobile คือแก้ source + rebuild (new-vtrc-mobile/src/constants/HostAPI.ts:1-18) — ดู 04-scorecard § QUAL-NEW-02

เทียบกับ vtrc-mobile — สรุปเชิงหลักฐาน

ข้อสรุป: new-vtrc-mobile เป็น architecture rewrite ระยะเริ่มต้น (early-stage) ไม่ใช่ full replacement และไม่ใช่แค่ experiment ทิ้งขว้าง — หลักฐานสนับสนุน:

  1. auth flow ผูกกับ backend จริงเดียวกันกับ vtrc-mobile ใช้ query/mutation ชื่อเดียวกัน (LOGIN, VERIFY_EMP_CODE_LOGIN) และ RSA-based csID scheme เดียวกันทุกตัวอักษร (new-vtrc-mobile/src/constants/RSAKey.ts:1-38 เทียบ vtrc-mobile/src/utils/login.js:6-43 — private key เหมือนกัน 100%) — แปลว่าไม่ได้ทดลองสถาปัตยกรรม auth ใหม่ทั้งหมด แต่ port logic เดิมมาใช้กับ client stack ใหม่
  2. จำนวนฟีเจอร์ยังห่างจาก vtrc-mobile มาก — มีเพียง 6 หน้า (Login, Home, Menu, Setting, + News fetch เดียวที่ยังไม่ผูก UI, CheckEmpCode ที่ถูก comment ปิด) เทียบกับ 121 หน้าของ vtrc-mobile — ไม่ใช่ full feature parity
  3. มีโค้ด placeholder ที่ยังไม่เสร็จrefreshToken() ยิงไปที่ URL ตัวอย่างจาก boilerplate https://yourdomain.com/auth/refresh ที่ยังไม่ถูกแก้เป็น endpoint จริง (new-vtrc-mobile/src/utils/Auth.ts:11) — เป็นหลักฐานตรงว่างานยังไม่เสร็จ ไม่ใช่โค้ดที่ deploy ใช้งานจริงได้
  4. มีชุด unit test จริง 18 ไฟล์ ต่างจาก vtrc-mobile ที่มีแค่ smoke test เดียว — สื่อว่าทีมตั้งใจวางมาตรฐานคุณภาพใหม่ตั้งแต่ระยะนี้ ไม่ใช่ throwaway prototype

สารบัญ

บทหัวข้อ
01Repository map — โครงสร้าง src/, screen, navigation, api layer
02Auth / RSA / AsyncStorage pipeline
03Six screens detail
04Scorecard + debt ID list

ดูภาพรวมกลุ่ม Mobile ที่ Volume 8 index และเปรียบเทียบกับ vtrc-mobile