แอปพลิเคชั่นอีคอมเมิร์ซมือถือสแต็กแบบเต็มซอร์สที่ทำจาก MongoDB, Express, React Native และ NodeJS
- การกำหนดค่าและการตั้งค่า
- คุณสมบัติที่สำคัญ
- เทคโนโลยีที่ใช้
- ส่วนหน้า (มือถือ)
- แบ็กเอนด์
- ฐานข้อมูล
- - การเยาะเย้ย
- - วิดีโอโครงการ
- ผู้เขียน
- ใบอนุญาต
การกำหนดค่าและการตั้งค่า
ในการเรียกใช้โครงการนี้ในพื้นที่เพียงส้อมและโคลนที่เก็บหรือดาวน์โหลดเป็นซิปและคลายซิปบนเครื่องของคุณ
- เปิดโครงการในโปรแกรมแก้ไขรหัสที่คุณต้องการ
- ไปที่เทอร์มินัล -> เทอร์มินัลใหม่ (ถ้าคุณใช้รหัส VS)
- ก่อนอื่นคุณต้องเรียกใช้เซิร์ฟเวอร์ NGROK เซิร์ฟเวอร์นี้ไม่ควรปิดตัวลงสำหรับงานโครงการ
- จากนั้นเปิดเทอร์มินัลอื่น แยกเทอร์มินัลของคุณออกเป็นครึ่งหนึ่ง (เรียกใช้เซิร์ฟเวอร์ในเทอร์มินัลหนึ่งและไคลเอนต์ในอีกด้านหนึ่ง)
NGROK เป็นซอฟต์แวร์ที่ช่วยให้เราสามารถเปิดแอปพลิเคชันของเราที่เราทำงานบน LocalHost บนคอมพิวเตอร์ของเราเองเหนือคลาวด์ภายใต้ XXX.NGROK.IO SUB-DOMAIN การตั้งค่า Ngrok
1- เพื่อเปิดเผยเซิร์ฟเวอร์โดยใช้ Ngrok;
- จากนั้นคัดลอก url ngrok บนเซิร์ฟเวอร์ที่กำลังรัน
- ไคลเอนต์ซีดีและวาง ngrok_url ใน. env ภายใต้ ./client
- ตอนนี้การเชื่อมต่อกับลูกค้าจะมั่นใจได้
NGROK_URL = "http://_______.ngrok.io"
2- ในเทอร์มินัลที่แตกต่างกัน
ในครึ่งแรกของเทอร์มินัล
$ cd Client
$ npm install (to install client-side dependencies)
$ expo r -c
ในช่วงครึ่งหลังของเทอร์มินัล
- เซิร์ฟเวอร์ซีดีและตั้งค่าตัวแปรสภาพแวดล้อมใน config.env ภายใต้ ./config/env
- สร้าง URL การเชื่อมต่อ MongoDB ของคุณซึ่งคุณจะใช้เป็น mongo_uri ของคุณ
- จัดหาข้อมูลประจำตัวต่อไปนี้
# --- Config.env ---
NODE_ENV = development
PORT =5000
MONGO_URI =
JWT_SECRET_KEY =
# --- Terminal ---
$ npm install (to install server-side dependencies)
$ npm start (to start the server)
คุณสมบัติที่สำคัญ
- ✔การลงทะเบียนผู้ใช้และเข้าสู่ระบบ
- ✔การรับรองความถูกต้องโดยใช้โทเค็น JWT
- ✔รายการโปรดแสดงความคิดเห็นและเพิ่มผลิตภัณฑ์ลงในเกวียน
- ✔เลือกผลิตภัณฑ์ตามข้อมูลสีและขนาดและเพิ่มลงในรถเข็น
- ✔แสดงผลิตภัณฑ์ล่าสุดที่คุณดูและคำแนะนำผลิตภัณฑ์ที่คล้ายกัน
- ✔หน้าหมวดหมู่ผลิตภัณฑ์และการแสดงหมวดหมู่ย่อย
- ✔ค้นหาผลิตภัณฑ์ตามชื่อแบรนด์และหมวดหมู่
- ✔เพิ่มลดหรือลบปริมาณของแต่ละรายการในรถเข็น
- ✔รับคำสั่งซื้อโดยเลือกที่อยู่จัดส่งและบัตรธนาคาร
- หน้ารายละเอียดการแสดงคำสั่งซื้อทั้งหมดและสถานะล่าสุดของผลิตภัณฑ์ (เวลาจัดส่งวันที่จัดส่ง) สำหรับแต่ละคำสั่งซื้อ
- ✔หน้าเปลี่ยนอีเมลและรหัสผ่าน
- ✔ความสนใจถูกจ่ายให้กับการจัดการข้อผิดพลาด
- ลืมหน้ารหัสผ่านและรีเซ็ตรหัสผ่าน
- การเพิ่มรูปภาพในความคิดเห็น
- เข้าสู่ระบบด้วยบัญชี Google
- การสร้างหน้าแบบกำหนดเองสำหรับแต่ละยี่ห้อ
- การเพิ่มระบบการชำระเงิน (Stripe)
- บางครั้งการร้องขอจะถูกประมวลผลอย่างช้าๆและทำให้เกิดปัญหาเมื่อถูกไล่ออกในเวลาเดียวกัน (สถาปัตยกรรม microservice อาจเป็นวิธีแก้ปัญหาได้หรือไม่)
เทคโนโลยีที่ใช้
โครงการนี้ถูกสร้างขึ้นโดยใช้เทคโนโลยีต่อไปนี้
ส่วนหน้า (มือถือ)
- React JS - JavaScript Library ที่ใช้สำหรับการสร้างส่วนต่อประสานผู้ใช้โดยเฉพาะสำหรับแอปพลิเคชันหน้าเดียว
- React Hooks - สำหรับการจัดการและรวมศูนย์แอปพลิเคชัน
- React Native - กรอบการพัฒนาแอปพลิเคชันมือถือข้ามแพลตฟอร์ม
- React Navigation V6 - การกำหนดเส้นทางและการนำทางสำหรับ Expo และ React Native Apps
- Axios - สำหรับการโทร API
- React-native-bouncy-checkbox
7.2.1 - React-Native-Element-TextInput
2.2.0 - react-native-perture-bottom-sheet
1.1.0 - React-Native-Indicators
0.17.0 - React-Native-Modal
13.0.1 - React-Native-Popup-Menu
0.16.1 - React-Native-Progress
5.0.0 - React-Native-Ratings
8.1.0 - React-native-safe-area-context
4.4.1 - React-Native-Simple-Dialogs
1.5.0 - React-Native-Step-Indicator
1.0.3 - React-native-toast-message
2.1.6 - React-textarea-autosize
2.1.6
แบ็กเอนด์
- Node JS - สภาพแวดล้อมรันไทม์เพื่อช่วยสร้างแอปพลิเคชันเซิร์ฟเวอร์ที่รวดเร็วโดยใช้ JS
- Express JS -เซิร์ฟเวอร์สำหรับการจัดการและการกำหนดเส้นทางคำขอ HTTP
- Mongoose - สำหรับการสร้างแบบจำลองและการทำแผนที่ข้อมูล MongoDB กับ JavaScript
- Express-Async-Handler-มิดเดิลแวร์อย่างง่ายสำหรับการจัดการข้อยกเว้นภายในเส้นทาง Async Express และส่งผ่านไปยังตัวจัดการข้อผิดพลาดด่วนของคุณ
- JsonWebToken - สำหรับการตรวจสอบสิทธิ์
- bcryptjs - สำหรับการเข้ารหัสข้อมูล
- DOTENV - โมดูลการพึ่งพาศูนย์ที่โหลดตัวแปรสภาพแวดล้อม
- multer - middleware node.js สำหรับการอัปโหลดไฟล์
- CORS - ให้มิดเดิลแวร์เชื่อมต่อ/ด่วน
- UUID - สำหรับเครื่องกำเนิด ID แบบสุ่ม
ฐานข้อมูล
- MongoDB - ให้บริการคลาวด์ฟรีเพื่อจัดเก็บคอลเลกชัน MongoDB
การเยาะเย้ย
ผู้เขียน
ใบอนุญาต
Copyright 2023 Muhammet Yıldız
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
วิดีโอโครงการ
hizlisepet.mp4
