Thai | Eng

Restaurant Membership APP

ยินดีต้อนรับสู่ Restaurant Membership APP โครงการแอปพลิเคชันมือถือที่พัฒนาด้วย Flutter สำหรับการจัดการระบบสมาชิกของภัตตาคาร แอปนี้อนุญาตให้ผู้ใช้สะสมคะแนน แลกของรางวัล ดูประวัติการทำธุรกรรม และจัดการโปรไฟล์ของตนได้อย่างง่ายดาย

โครงการนี้ใช้ Flutter สำหรับส่วนหน้าและเชื่อมต่อกับ Restaurant Membership API ซึ่งเป็น API ส่วนหลังที่ออกแบบมาเพื่อจัดการการสื่อสารกับเซิร์ฟเวอร์ แอปมี UI ที่ทันสมัยด้วยการใช้สีแบบไล่ระดับ ภาพเคลื่อนไหว และรองรับทั้งโหมดสว่างและมืด

ภาพรวม

แอปพลิเคชันนี้เป็นโซลูชันสำหรับภัตตาคารที่ต้องการสร้างระบบสมาชิกเพื่อเพิ่มการมีส่วนร่วมของลูกค้า ผู้ใช้สามารถลงทะเบียน เข้าสู่ระบบ ดูคะแนน แลกของรางวัล สแกนรหัส QR และแก้ไขโปรไฟล์ของตนได้ ในขณะที่ผู้ดูแลระบบสามารถจัดการผู้ใช้ คะแนน และของรางวัลผ่านแดชบอร์ดผู้ดูแลระบบ

Restaurant Membership API (GitHub) เป็นส่วนหลังที่ออกแบบมาโดยเฉพาะเพื่อทำงานร่วมกับแอปนี้ รองรับการจัดการข้อมูลผู้ใช้ คะแนน ของรางวัล และธุรกรรมผ่าน RESTful API ที่ปลอดภัยด้วย JWT (JSON Web Token)

คุณสมบัติหลัก

สำหรับผู้ใช้ทั่วไป

• การลงทะเบียนและเข้าสู่ระบบ: ลงทะเบียนและเข้าสู่ระบบโดยใช้ชื่อผู้ใช้และรหัสผ่าน
• การจัดการโปรไฟล์: แก้ไขชื่อ นามสกุล รูปโปรไฟล์ และเปลี่ยนรหัสผ่าน
• การสะสมคะแนน: ดูคะแนนที่สะสมและประวัติการทำธุรกรรม
• การแลกของรางวัล: เรียกดูและแลกของรางวัลโดยใช้คะแนน
• ประวัติการแลกของรางวัล: ดูประวัติการแลกของรางวัล
• การสแกนรหัส QR: สแกนรหัส QR เพื่อรับคะแนนหรือแลกของรางวัล
• แถบเลื่อนและเอฟเฟกต์ Shimmer: แสดงของรางวัลในรูปแบบแถบเลื่อนพร้อมเอฟเฟกต์ Shimmer สำหรับการโหลด
• การรีเฟรชข้อมูล: รองรับ RefreshIndicator เพื่อโหลดข้อมูลใหม่

สำหรับผู้ดูแลระบบ

• แดชบอร์ดผู้ดูแลระบบ: เข้าถึงได้จากหน้าจอโปรไฟล์สำหรับผู้ใช้ที่มีสิทธิ์ผู้ดูแลระบบ
• การจัดการผู้ใช้: เพิ่ม แก้ไข ลบผู้ใช้ และอัปโหลดรูปโปรไฟล์
• การจัดการคะแนน: เพิ่มคะแนนให้กับบัญชีผู้ใช้
• การจัดการของรางวัล: เพิ่ม แก้ไข ลบของรางวัล และอัปโหลดรูปภาพของรางวัล

คุณสมบัติทางเทคนิค

• UI/UX ที่ทันสมัย:
  • ใช้ GoogleFonts เพื่อตัวอักษรที่สวยงาม
  • พื้นหลังและแถบแอปแบบไล่ระดับสี
  • ภาพเคลื่อนไหวด้วย flutter_animate
  • รองรับโหมดสว่างและมืด
  • เอฟเฟกต์ Shimmer สำหรับการโหลด
  • แถบเลื่อนสำหรับแสดงของรางวัล
• การจัดการ API:
  • ใช้ ApiService เพื่อสื่อสารกับ Restaurant Membership API
  • รองรับการอัปโหลดภาพด้วย MultipartRequest
  • หมดเวลา (5 วินาทีสำหรับ GET, 10 วินาทีสำหรับ POST/PUT/DELETE)
  • การจัดการข้อผิดพลาดด้วย Exception
• การสแกน QR/บาร์โค้ด:
  • ใช้ mobile_scanner และ qr_flutter สำหรับการสแกนและสร้างรหัส QR
• การจัดการสถานะ:
  • ใช้ provider สำหรับการจัดการสถานะของแอป
• การจัดเก็บข้อมูล:
  • ใช้ SharedPreferences เพื่อเก็บโทเค็นและ ID ผู้ใช้
  • ใช้ cached_network_image สำหรับการโหลดภาพจากเครือข่าย
• ความปลอดภัย:
  • ใช้ jwt_decoder เพื่อตรวจสอบโทเค็น
  • การจัดการสิทธิ์ด้วย permission_handler
  • การยืนยันโทเค็นในส่วนหัว

ความต้องการของระบบ

• Flutter SDK: รุ่น 3.6.0 หรือสูงกว่า
• Dart: รุ่นที่เข้ากันได้กับ Flutter SDK
• การพึ่งพา (จาก pubspec.yaml):
  • flutter
  • cupertino_icons: ^1.0.8
  • qr_flutter: ^4.1.0
  • intl: ^0.20.2
  • shared_preferences: ^2.5.3
  • http: ^1.3.0
  • provider: ^6.1.5
  • google_fonts: ^6.2.1
  • flutter_animate: ^4.5.2
  • jwt_decoder: ^2.0.1
  • image_picker: ^1.1.2
  • mobile_scanner: ^6.0.10
  • carousel_slider: ^5.0.0
  • shimmer: ^3.0.0
  • permission_handler: ^12.0.0+1
  • cached_network_image: ^3.4.1
  • barcode_widget: ^2.0.4
• การพึ่งพาสำหรับการพัฒนา:
  • flutter_test
  • flutter_lints: ^5.0.0
  • flutter_launcher_icons: ^0.14.3
• API ส่วนหลัง: เซิร์ฟเวอร์ที่รัน Restaurant Membership API
• อุปกรณ์:
  • Android: API 21 (Lollipop) หรือสูงกว่า
  • iOS: iOS 12 หรือสูงกว่า
• เครื่องมือ:
  • IDE เช่น VS Code หรือ Android Studio
  • Git สำหรับการจัดการโค้ด
  • Postman หรือ cURL สำหรับการทดสอบ API

การติดตั้ง

ขั้นตอนที่ 1: โคลนโครงการ

git clone https://github.com/riiixch/Restaurant-Membership-APP.git
cd Restaurant-Membership-APP

ขั้นตอนที่ 2: ติดตั้งการพึ่งพา

flutter pub get

ขั้นตอนที่ 3: ตั้งค่าส่วนหลัง

1. โคลนและตั้งค่า Restaurant Membership API:

   git clone https://github.com/riiixch/Restaurant-Membership-API.git
   cd Restaurant-Membership-API

   • ทำตาม API README เพื่อติดตั้งและรันเซิร์ฟเวอร์
   • ตรวจสอบว่าเซิร์ฟเวอร์ทำงานที่ URL เช่น http://your-domain/api
   • ตรวจสอบการกำหนดค่า เช่น การเชื่อมต่อฐานข้อมูลและ JWT Secret

2. แก้ไขไฟล์ lib/config/api_config.dart ในโครงการ Flutter เพื่อระบุ URL ส่วนหลัง:

   class ApiConfig {
     String baseUrl = 'http://your-domain/api'; // แทนที่ด้วย URL API ของคุณ
     String userImgUrl = 'http://your-domain/image/user/';
     String rewardImgUrl = 'http://your-domain/image/reward/';
     Future<Map<String, String>> getHeaderJson() async {
       final token = await ApiService().getToken();
       return {
         'Content-Type': 'application/json',
         if (token != null) 'Authorization': 'Bearer $token',
       };
     }
     Future<Map<String, String>> getHeaderForm() async {
       final token = await ApiService().getToken();
       return {
         if (token != null) 'Authorization': 'Bearer $token',
       };
     }
   }

3. ตรวจสอบว่าส่วนหลังมีปลายทางตามที่ระบุใน ApiService:

   • /auth/register (POST)
   • /auth/login (POST)
   • /user/user (GET, PUT)
   • /user/point (GET)
   • /user/reward (GET)
   • /user/redeem (GET, POST)
   • /user/isadmin (GET)
   • /user/changepassword (POST)
   • /user/transaction (GET)
   • /admin/user (GET, POST, PUT, DELETE)
   • /admin/reward (GET, POST, PUT, DELETE)
   • /admin/transaction (POST)

ขั้นตอนที่ 4: ตั้งค่าไอคอนแอป

1. ตรวจสอบว่าไฟล์ assets/images/logo.png มีอยู่
2. อัปเดตไอคอน:

   flutter pub run flutter_launcher_icons

ขั้นตอนที่ 5: รันแอป

1. ล้างแคชการสร้าง (ถ้าจำเป็น):

   flutter clean

2. รันในโหมดดีบัก:

   flutter run

3. สร้าง APK สำหรับ Android:

   flutter build apk --release

4. สร้าง IPA สำหรับ iOS:

   flutter build ios --release

การใช้งาน

การใช้งานสำหรับผู้ใช้ทั่วไป

1. ลงทะเบียน/เข้าสู่ระบบ:
   • เปิดแอปและไปที่ LoginScreen
   • ใส่ชื่อผู้ใช้และรหัสผ่าน หรือลงทะเบียนผ่าน /auth/register
2. การจัดการโปรไฟล์:
   • ไปที่ ProfileScreen จากเมนูนำทาง
   • แก้ไขชื่อ นามสกุล รูปโปรไฟล์ หรือเปลี่ยนรหัสผ่านผ่าน /user/user และ /user/changepassword
   • รีเฟรชข้อมูลโดยการดึงลง (RefreshIndicator)
3. การสะสมคะแนนและการแลกของรางวัล:
   • ดูคะแนนที่ DashboardScreen ผ่าน /user/point
   • แลกของรางวัลที่หน้าของรางวัลผ่าน /user/reward และ /user/redeem
   • ตรวจสอบประวัติที่หน้าประวัติการแลกผ่าน /user/redeem
4. การสแกนรหัส QR:
   • ใช้หน้าสแกน QR เพื่อสแกนรหัส QR สำหรับรับคะแนนหรือแลกของรางวัล (ขึ้นอยู่กับการกำหนดค่า API)

การใช้งานสำหรับผู้ดูแลระบบ

1. เข้าถึงแดชบอร์ดผู้ดูแลระบบ:
   • จาก ProfileScreen คลิกปุ่ม "Admin Panel" (มองเห็นได้เฉพาะผู้ใช้ที่มีสิทธิ์ผู้ดูแลระบบผ่าน /user/isadmin)
2. การจัดการผู้ใช้:
   • ที่ ManageUsersScreen เพิ่ม แก้ไข หรือลบผู้ใช้ผ่าน /admin/user
3. การจัดการของรางวัล:
   • ที่ ManageRewardsScreen เพิ่ม แก้ไข หรือลบของรางวัลผ่าน /admin/reward
4. การจัดการคะแนน:
   • ใช้ฟังก์ชัน ApiAdmin.addPoint เพื่อเพิ่มคะแนนให้ผู้ใช้ผ่าน /admin/transaction

ปัญหาที่อาจเกิดขึ้นและวิธีแก้ไข

1. API ไม่ตอบสนอง:

   • ตรวจสอบ URL ใน ApiConfig.baseUrl
   • ตรวจสอบว่าเซิร์ฟเวอร์จาก Restaurant Membership API ทำงานอยู่
   • ทดสอบปลายทางโดยใช้ Postman
   • ตรวจสอบบันทึก:

     flutter run --release > log.txt

2. RefreshIndicator ไม่ทำงาน:

   • ตรวจสอบว่า SingleChildScrollView มี physics: AlwaysScrollableScrollPhysics()
   • ตรวจสอบว่า onRefresh เรียกเมธอดที่เหมาะสม (เช่น _loadUser ใน ProfileScreen)

3. การอัปโหลดภาพล้มเหลว:

   • ตรวจสอบขนาดไฟล์ (แนะนำจำกัดที่ 5MB)
   • ตรวจสอบว่าส่วนหลังรองรับ MultipartRequest (อ้างอิงจากการกำหนดค่า API)
   • ตรวจสอบสิทธิ์กล้อง/ที่เก็บด้วย permission_handler

4. สแกน QR ไม่ทำงาน:

   • ตรวจสอบสิทธิ์กล้องใน AndroidManifest.xml และ Info.plist
   • ตรวจสอบว่า mobile_scanner ทำงานได้อย่างถูกต้อง

5. UI ทับซ้อนหรือระยะห่างไม่ถูกต้อง:

   • ใช้ Flutter DevTools (Layout Inspector):

     flutter run --debug

   • ตรวจสอบ SafeArea และ extendBodyBehindAppBar

การสนับสนุนและการพัฒนาต่อไป

• เพิ่มคุณสมบัติ:
  • การแจ้งเตือนแบบพุชสำหรับการรับคะแนนหรือการแลกของรางวัล
  • การยืนยันตัวตนด้วย OTP
  • การรองรับหลายภาษา (i18n)
  • การวิเคราะห์ผู้ใช้
• ปรับปรุงประสิทธิภาพ:
  • เพิ่มแคชสำหรับข้อมูลที่เข้าถึงบ่อยด้วย cached_network_image
  • ใช้ Dio แทน http เพื่อการจัดการ API ที่ดีขึ้น
  • ใช้การแบ่งหน้า (pagination) สำหรับรายการยาว (เช่น ของรางวัล, ประวัติ) ใน API และแอป
• การปรับปรุง API:
  • อ้างอิง Restaurant Membership API สำหรับการเพิ่มปลายทางหรือปรับปรุงประสิทธิภาพ
• ติดต่อ:
  • รายงานปัญหาหรือเสนอคุณสมบัติผ่าน GitHub Issues สำหรับ แอป หรือ API
  • อีเมล: sompop@riiixch.com

เครดิต

• ผู้พัฒนา: RIIIXCH
• เครื่องมือ:
  • Flutter และ Dart
  • Google Fonts สำหรับตัวอักษรที่สวยงาม
  • Flutter Animate สำหรับภาพเคลื่อนไหว
  • Mobile Scanner และ QR Flutter สำหรับฟังก์ชันรหัส QR
  • Provider สำหรับการจัดการสถานะ
• ส่วนหลัง:
  • Restaurant Membership API โดย RIIIXCH
• แรงบันดาลใจ: โซลูชันระบบสมาชิกภัตตาคารสมัยใหม่

สัญญาอนุญาต

โครงการนี้อยู่ภายใต้ สัญญาอนุญาต MIT คุณสามารถใช้ แก้ไข และเผยแพร่โค้ดได้ตามเงื่อนไขของสัญญาอนุญาต

---

Created with ❤️ by RIIIXCH