scanm.art Unduh - scanm.art Unduh kode sumber

scanm.art

Kode sumber lainnya

1.0.0

Unduh

Aplikasi Scanmart

Aplikasi Scanmart adalah aplikasi web yang digunakan untuk alur kerja pembayaran mandiri, di mana pelanggan dapat memindai sendiri produk dan menambahkannya ke keranjang.

Aplikasi ini dibuat dengan bantuan create-react-app dan dilengkapi dengan perpustakaan/alat/paket berikut:

Buku Cerita (menyajikan komponen yang terisolasi)
Bootstrap (digunakan untuk gaya umum & daya tanggap)
Quagga JS (digunakan untuk memindai item)
Firebase Realtime Database (digunakan untuk menyimpan data keranjang)
lebih cantik (digunakan untuk pemformatan kode)
PropTypes (digunakan untuk pengecekan tipe)
toastify (digunakan untuk menyajikan roti panggang melalui aplikasi)
uuid (digunakan untuk menghasilkan ID unik untuk keranjang)
react-router (digunakan untuk perutean)

Kode disimpan di repositori GitHub, dan aplikasi diterapkan di Netlify. Netlify memulai proses build & deployment setiap kali ada perubahan, yaitu penggabungan PR di cabang main . Konfigurasi Firebase (ID aplikasi, URL aplikasi, dll.) disimpan sebagai variabel lingkungan.

Untuk menjalankan aplikasi secara lokal, gulir ke bawah dan ikuti instruksi yang diberikan oleh CRA. Agar kamera berfungsi secara lokal, tambahkan file .env di root proyek dan masukkan nilai ini ke dalamnya HTTPS=true . Bangun kembali aplikasi dan itu akan berfungsi.

Daftar tugas dalam urutan kronologis

Teliti solusi yang ada
Temukan nama yang sesuai & tersedia
Beli domainnya
Buat logo
Buat gambar rangka
Mulai proyek lokal & buat repo GitHub
Mulai proyek di Netlify & sambungkan domain
Hubungkan repo GitHub dengan proyek Netlify & mulai proses pembuatan & penerapan otomatis
Instal Buku Cerita
Instal Bootstrap & tambahkan gaya awal
Instal & terapkan perpustakaan Quagga
Atomisasi kode menjadi beberapa komponen
Instal & terapkan dengan lebih cantik
Siapkan React Context untuk data & komponen keranjang
Instal & terapkan router reaksi
Instal & terapkan Firebase Realtime Database untuk menyimpan data keranjang
Siapkan pembuatan sesi keranjang anonim
Tambahkan komentar kode tambahan
Tambahkan dan sesuaikan beberapa cerita Buku Cerita
Perbarui dokumentasi

Penelitian & penamaan

Bahan yang digunakan untuk fungsionalitas & penelitian UI:

PindaiPayGo
MishiPay
AckerPay
Aplikasi Pembayaran Mandiri RetailCloud
aplikasi mInventaris
Retail7.io Aplikasi Pembayaran Mandiri
BILLA Pindai & Buka
Pindai & Buka
Pos Menggiring Bola
Aplikasi barcoo

Terakhir, aplikasi barcoo menjadi inspirasi terbesar untuk UI dan UX. Saya pada dasarnya meninjau desain masing-masing aplikasi yang disebutkan di atas (jika tersedia) dan mencoba menemukan bagian yang paling sesuai untuk aplikasi saya. Setelah saya puas dengan riset UI/UX, saya mencoba mencari nama. Triknya adalah menemukan sesuatu yang masuk akal, namun belum pernah digunakan sebelumnya, yaitu memiliki domain yang tersedia. Saya memilih Scanmart yang merupakan produk dari dua kata "scan" dan "market" dan saya membeli domain " scanm.art " untuk memastikan keunikannya.

Proyek ini tersedia di scanm.art.

Logo & Bingkai Gambar

logo

Saya tidak ingin kehilangan banyak waktu pada logo, jadi saya menggunakan logo yang sebagian besar bersifat tipografi. Ada batas sudut yang ditambahkan padanya, untuk mensimulasikan desain pemindai kode batang. Font yang digunakan adalah Poppins. Saya menggunakan font Google, karena gratis dan lisensinya mengizinkan penggunaan komersial.


Logo Utama	favicon

Gambar rangka


Awal	Layar Utama	Kesalahan Kamera	Modal Pindai	Keranjang

Deskripsi proyek teknis

Struktur File & Folder

Folder src adalah tempat semuanya berada.

folder assets berisi gambar/ikon yang digunakan dalam proyek, serta gaya khusus & grafik yang digunakan dalam file README.

folder components , sesuai dengan namanya, berisi komponen yang digunakan dalam proyek ini. Masing-masing disimpan dalam folder terpisah.

folder context berisi konteks Keranjang & Offcanvas yang berfungsi untuk memberikan informasi tentang sidebar dan item yang dipindai di seluruh aplikasi.

Folder utils berisi satu fungsi utilitas.

folder views berisi tampilan yang digunakan dalam aplikasi ini.

Seluruh aplikasi disusun sedemikian rupa, di mana penyedia konteks membungkus rute dan rute tersebut berisi satu tata letak yang selanjutnya menyajikan tampilan, yaitu sub-rutenya.

 .
|-- 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

Memulai dengan Membuat Aplikasi React

Proyek ini di-bootstrap dengan Create React App.

Skrip yang Tersedia

Di direktori proyek, Anda dapat menjalankan:

`npm start`

Menjalankan aplikasi dalam mode pengembangan.
Buka http://localhost:3000 untuk melihatnya di browser Anda.

Halaman akan dimuat ulang saat Anda melakukan perubahan.
Anda mungkin juga melihat kesalahan lint apa pun di konsol.

`npm test`

Meluncurkan test runner dalam mode jam tangan interaktif.
Lihat bagian tentang menjalankan pengujian untuk informasi lebih lanjut.

`npm run build`

Membangun aplikasi untuk produksi ke folder build .
Ini menggabungkan React dengan benar dalam mode produksi dan mengoptimalkan build untuk kinerja terbaik.

Build diperkecil dan nama file menyertakan hash.
Aplikasi Anda siap untuk diterapkan!

Lihat bagian tentang penerapan untuk informasi selengkapnya.

`npm run eject`

Catatan: ini adalah operasi satu arah. Sekali Anda eject , Anda tidak dapat kembali!

Jika Anda tidak puas dengan alat build dan pilihan konfigurasi, Anda dapat eject kapan saja. Perintah ini akan menghapus ketergantungan build tunggal dari proyek Anda.

Sebaliknya, ini akan menyalin semua file konfigurasi dan dependensi transitif (webpack, Babel, ESLint, dll) langsung ke proyek Anda sehingga Anda memiliki kendali penuh atas semuanya. Semua perintah kecuali eject akan tetap berfungsi, tetapi perintah tersebut akan mengarah ke skrip yang disalin sehingga Anda dapat mengubahnya. Pada titik ini Anda sendirian.

Anda tidak perlu pernah menggunakan eject . Kumpulan fitur yang dikurasi cocok untuk penerapan kecil dan menengah, dan Anda tidak merasa berkewajiban untuk menggunakan fitur ini. Namun kami memahami bahwa alat ini tidak akan berguna jika Anda tidak dapat menyesuaikannya saat Anda siap menggunakannya.