แอป Scanmart เป็นเว็บแอปที่ใช้สำหรับขั้นตอนการชำระเงินด้วยตนเอง ซึ่งลูกค้าสามารถสแกนผลิตภัณฑ์ด้วยตนเองและเพิ่มลงในตะกร้าได้
แอปนี้สร้างขึ้นด้วยความช่วยเหลือของ create-react-app และเสริมด้วยไลบรารี/เครื่องมือ/แพ็คเกจต่อไปนี้:
รหัสถูกจัดเก็บไว้ในที่เก็บ GitHub และแอปถูกปรับใช้บน Netlify Netlify เริ่มกระบวนการสร้างและปรับใช้ทุกครั้งที่มีการเปลี่ยนแปลง เช่น PR แบบรวมในสาขา main
การกำหนดค่า Firebase (รหัสแอป, URL ของแอป ฯลฯ) จะถูกจัดเก็บเป็นตัวแปรสภาพแวดล้อม
หากต้องการเรียกใช้แอปในเครื่อง โปรดเลื่อนลงและปฏิบัติตามคำแนะนำของ CRA เพื่อให้กล้องทำงานในเครื่อง ให้เพิ่มไฟล์ .env ในรูทของโปรเจ็กต์และใส่ค่านี้ใน HTTPS=true
สร้างแอปขึ้นมาใหม่และควรจะใช้งานได้
วัสดุที่ใช้สำหรับฟังก์ชันการทำงานและการวิจัย UI:
สุดท้ายนี้ แอป barcoo ทำหน้าที่เป็นแรงบันดาลใจที่ยิ่งใหญ่ที่สุดสำหรับ UI และ UX โดยพื้นฐานแล้วฉันได้ตรวจสอบการออกแบบของแอปแต่ละแอปที่กล่าวมาข้างต้น (หากมีให้บริการ) และพยายามค้นหาส่วนที่เหมาะสมที่สุดสำหรับแอปของฉัน เมื่อฉันพอใจกับการวิจัย UI/UX แล้ว ฉันพยายามที่จะตั้งชื่อ เคล็ดลับคือการหาสิ่งที่สมเหตุสมผล แต่ยังไม่เคยใช้มาก่อน เช่น มีโดเมนที่พร้อมใช้งาน ฉันตัดสินใจเลือก Scanmart ซึ่งเป็นผลงานที่ประกอบด้วยคำสองคำคือ "scan" และ "market" และฉันซื้อโดเมน " scanm.art " เพื่อให้มั่นใจว่ามีเอกลักษณ์เฉพาะตัว
โครงการนี้มีอยู่ที่ scanm.art
ฉันไม่อยากเสียเวลากับโลโก้มากนัก ดังนั้นฉันจึงเลือกใช้โลโก้ที่พิมพ์เป็นส่วนใหญ่ มีการเพิ่มเส้นขอบมุมเพื่อจำลองการออกแบบเครื่องสแกนบาร์โค้ด ฟอนต์ที่ใช้คือ Poppins ฉันใช้แบบอักษร Google เพราะมันฟรีและใบอนุญาตอนุญาตให้นำไปใช้ในเชิงพาณิชย์ได้
โลโก้หลัก | ฟาวิคอน |
เริ่ม | หน้าจอหลัก | ข้อผิดพลาดของกล้อง | สแกนโมดัล | ตะกร้า |
โฟลเดอร์ src
คือที่ที่ทุกอย่างอยู่
โฟลเดอร์ assets
ประกอบด้วยรูปภาพ/ไอคอนที่ใช้ในโปรเจ็กต์ เช่นเดียวกับสไตล์ที่กำหนดเองและกราฟิกที่ใช้ในไฟล์ README
โฟลเดอร์ components
ตามชื่อระบุ มีส่วนประกอบที่ใช้ในโปรเจ็กต์นี้ แต่ละอันจะถูกจัดเก็บไว้ในโฟลเดอร์แยกกัน
โฟลเดอร์ context
ประกอบด้วยบริบทของ Basket & Offcanvas ซึ่งทำหน้าที่ให้ข้อมูลเกี่ยวกับแถบด้านข้างและรายการที่สแกนทั่วทั้งแอป
โฟลเดอร์ utils
มีฟังก์ชันยูทิลิตี้หนึ่งฟังก์ชัน
โฟลเดอร์ views
มีมุมมองที่ใช้ในแอปนี้
แอปทั้งหมดมีโครงสร้างในลักษณะที่ผู้ให้บริการบริบทล้อมเส้นทางและเส้นทางมีเค้าโครงเดียวซึ่งนำเสนอมุมมองเพิ่มเติม กล่าวคือ เส้นทางย่อย
.
|-- README.md
|-- netlify.toml
|-- package-lock.json
|-- package.json
|-- public
| |-- index.html
| |-- manifest.json
| |-- miniLogo.png
| `-- robots.txt
`-- src
|-- App.css
|-- App.js
|-- App.test.js
|-- assets
| |-- docs
| | |-- Basket.png
| | |-- CameraError.png
| | |-- MainScreen.png
| | |-- ScanModal.png
| | |-- Start.png
| | |-- faviconPresentation.png
| | |-- logo.ai
| | `-- logoPresentation.png
| |-- img
| | |-- bag.svg
| | |-- barcode.svg
| | |-- box.svg
| | `-- logo.png
| `-- scss
| |-- custom.css
| |-- custom.css.map
| `-- custom.scss
|-- components
| |-- BarcodeScanner
| | `-- BarcodeScanner.js
| |-- CartItem
| | |-- CartItem.js
| | `-- CartItem.stories.js
| |-- Controls
| | |-- Controls.js
| | `-- Controls.stories.js
| |-- Header
| | `-- Header.js
| |-- ItemModal
| | `-- ItemModal.js
| |-- Offcanvas
| | `-- OffcanvasComponent.js
| `-- VideoComponent
| `-- VideoComponent.js
|-- context
| |-- BasketContext.js
| `-- OffcanvasContext.js
|-- firebase.js
|-- index.js
|-- logo.svg
|-- reportWebVitals.js
|-- setupTests.js
|-- stories
| |-- Configure.mdx
| `-- assets
| |-- accessibility.png
| |-- accessibility.svg
| |-- addon-library.png
| |-- assets.png
| |-- avif-test-image.avif
| |-- context.png
| |-- discord.svg
| |-- docs.png
| |-- figma-plugin.png
| |-- github.svg
| |-- share.png
| |-- styling.png
| |-- testing.png
| |-- theming.png
| |-- tutorials.svg
| `-- youtube.svg
|-- utils
| `-- removeVideoElement.js
`-- views
|-- Main
| `-- Main.js
`-- Start
`-- Start.js
โปรเจ็กต์นี้บูทด้วย Create React App
ในไดเร็กทอรีโปรเจ็กต์ คุณสามารถรัน:
npm start
เรียกใช้แอปในโหมดการพัฒนา
เปิด http://localhost:3000 เพื่อดูในเบราว์เซอร์ของคุณ
หน้าเว็บจะโหลดซ้ำเมื่อคุณทำการเปลี่ยนแปลง
คุณอาจเห็นข้อผิดพลาดของขุยในคอนโซลด้วย
npm test
เปิดตัวนักวิ่งทดสอบในโหมดนาฬิกาแบบโต้ตอบ
ดูส่วนเกี่ยวกับการรันการทดสอบสำหรับข้อมูลเพิ่มเติม
npm run build
สร้างแอปสำหรับการผลิตไปยัง build
ด์
มันรวม React ในโหมดการผลิตอย่างถูกต้องและปรับโครงสร้างให้เหมาะสมเพื่อประสิทธิภาพที่ดีที่สุด
โครงสร้างถูกย่อให้เล็กลงและชื่อไฟล์มีแฮชด้วย
แอปของคุณพร้อมที่จะปรับใช้แล้ว!
ดูส่วนเกี่ยวกับการปรับใช้สำหรับข้อมูลเพิ่มเติม
npm run eject
หมายเหตุ: นี่เป็นการดำเนินการทางเดียว เมื่อคุณ eject
คุณจะไม่สามารถย้อนกลับไปได้!
หากคุณไม่พอใจกับเครื่องมือสร้างและตัวเลือกการกำหนดค่า คุณสามารถ eject
ได้ตลอดเวลา คำสั่งนี้จะลบการพึ่งพาบิวด์เดียวออกจากโปรเจ็กต์ของคุณ
แต่จะคัดลอกไฟล์การกำหนดค่าทั้งหมดและการพึ่งพาแบบสกรรมกริยา (webpack, Babel, ESLint ฯลฯ) ลงในโปรเจ็กต์ของคุณเพื่อให้คุณควบคุมไฟล์เหล่านั้นได้อย่างเต็มที่ คำสั่งทั้งหมดยกเว้นคำสั่ง eject
จะยังคงใช้งานได้ แต่จะชี้ไปที่สคริปต์ที่คัดลอกเพื่อให้คุณปรับแต่งได้ ณ จุดนี้คุณต้องอยู่คนเดียว
คุณไม่จำเป็นต้องใช้ eject
เลย ชุดคุณลักษณะที่ได้รับการดูแลจัดการนี้เหมาะสำหรับการปรับใช้ขนาดเล็กและระดับกลาง และคุณไม่ควรรู้สึกว่าจำเป็นต้องใช้คุณลักษณะนี้ อย่างไรก็ตาม เราเข้าใจดีว่าเครื่องมือนี้จะไม่มีประโยชน์หากคุณไม่สามารถปรับแต่งได้เมื่อคุณพร้อม
คุณสามารถเรียนรู้เพิ่มเติมได้ในเอกสารประกอบของแอป Create React
หากต้องการเรียนรู้ React โปรดดูเอกสาร React
ส่วนนี้ย้ายไปที่นี่: https://facebook.github.io/create-react-app/docs/code-splitting
ส่วนนี้ย้ายไปที่นี่: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
ส่วนนี้ย้ายไปที่นี่: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
ส่วนนี้ย้ายไปที่นี่: https://facebook.github.io/create-react-app/docs/advanced-configuration
ส่วนนี้ย้ายไปที่นี่: https://facebook.github.io/create-react-app/docs/deployment
npm run build
ล้มเหลวในการลดขนาดส่วนนี้ย้ายไปที่นี่: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify