eatery nod w
Simplified Mainline
eatery-nod-w adalah Date Night Restaurant Selector ... aplikasi web yang secara acak memilih restoran "kencan malam" dari kumpulan favorit . Dengan kata lain, ini memberi kesan pada sebuah restoran ( entah bagaimana para geek perlu bersenang-senang :-)
Saya dan istri saya memiliki "kencan malam" yang stabil (dengan pasangan lain) dan kami selalu ragu-ragu tentang restoran favorit mana yang sering kami kunjungi, jadi restoran-nod-w menyediakan roda pemintal!
eatery-nod-w adalah versi PWA berbasis web dari aplikasi seluler eatery-nod react-native expo .
Layar utama dari eatery-nod adalah Eatery Pool ( lihat fitur restoran ).
Ini memvisualisasikan kumpulan restoran yang dapat Anda pilih (daftar dapat difilter secara opsional).
Anda dapat memilih restoran secara langsung, atau "memutar" untuk memilih secara acak.
Tampilan "detail" menyediakan komunikasi langsung ke perusahaan (menelepon mereka, mengunjungi situs web mereka, atau menavigasi ke alamat mereka).
Kumpulan restoran Anda dikelola melalui Discovery ( lihat fitur penemuan ).
Anda tidak harus menjaga detail kolam Anda dengan tangan. Sebaliknya, Anda cukup mencari restoran menggunakan fitur penemuan . Ini adalah sumber yang sama yang digunakan saat Anda mengeluarkan Google Penelusuran (berdasarkan Google Places).
Dalam tampilan penemuan, Anda cukup mengaktifkan tanda centang di sebelah entri. Entri merah ada di kumpulan Anda, entri abu-abu tidak.
Otorisasi diberikan melalui fitur autentikasi, memerlukan email/kata sandi yang divalidasi sebelum mempromosikan layar aplikasi apa pun.
eatery-nod-w menggunakan Desain Responsif di mana halaman web ditampilkan dengan baik di berbagai perangkat dan ukuran jendela atau layar (desktop, ponsel, tablet, dll.).
Sebagai contoh, berikut adalah kolam restoran yang ditampilkan di ponsel :
Dan berikut adalah manifes layar yang sama pada browser desktop :
Untuk informasi selengkapnya, lihat Desain Responsif baseUI.
Anda dapat menjalankan eatery-nod-w dengan salah satu dari dua cara berikut: Dari Deployment, atau Dari Sumber:
Anda dapat langsung bermain dengan eatery-nod-w melalui situs penerapan produksinya: https://eatery-nod-w.js.org/
Saat ini proses masuk telah "mengunci" pembuatan akun , karena terbatasnya sumber daya akun Google Firebase gratis. Namun Anda dapat menggunakan "ID Tamu" yang akan mengubah lingkungan menjadi sumber data dalam memori Anda yang "diolok-olok" (yang tidak menggunakan Firebase).
Cukup gunakan id email yang diawali dengan guestNO@ (misal: [email protected] ), dengan kata sandi guestNO .
Saat menggunakan "ID Tamu", ingat hal berikut:
Jika Anda ingin menjalankan eatery-nod-w dari mesin lokal Anda (tempat Anda dapat melakukan perubahan) , ikuti petunjuk berikut:
Kloning (atau zip) repo git ke mesin lokal Anda.
Inisialisasi proyek:
$ cd {project-root}
$ npm install # install project dependencies
Siapkan layanan ... Anda memiliki dua pilihan :
Menggunakan Layanan Tiruan
Cara termudah untuk bermain-main dengan proyek ini adalah dengan menggunakan layanan tiruan. Ini berarti Anda tidak memiliki pengaturan apa pun untuk kredensial layanan back-end atau konfigurasi DB (mempertahankan entri kumpulan) .
Untuk mengaktifkan layanan tiruan, cukup buat pengaturan berikut di src/featureFlags.js :
useWIFI : false , // use mock service
mockGPS : { lat : 30.010479 , lng : - 90.119414 } , // simulate New Orleans GPS locationMenggunakan Layanan Nyata
eatery-nod menggunakan dua layanan cloud Google:
Tentukan Kredensial Layanan
Anda harus membuat kredensial Anda sendiri untuk layanan ini ... lihat:
Tentukan Skema DB
Profil pengguna dan kumpulan dipertahankan dalam Firebase DB yang persisten. Anda harus membuat skema DB berikut di akun firebase Anda:
eatery - nod : {
userProfiles : {
// ... login profiles
// NOTE: these entries are maintained by eatery-nod-w code!
// You just need to define the parent structure (in your schema)!!
// For completeness, here is an example:
dbcatrem2PwyWgLJciViS7q0szg2 : {
name : "Kevin" ,
pool : "Date Night" ,
} ,
} ,
pools : {
// ... pool entry points, cataloged by userProfile.{user-id}.pool
// NOTE: these entries are maintained by eatery-nod-w code!
// You just need to define the parent structure (in your schema)!!
// For completeness, here is an example:
"Date Night" : {
ChIJ1Wb6nh76dYgRbFqImosN0to : {
id : "ChIJ1Wb6nh76dYgRbFqImosN0to" ,
name : "Andria's Countryside Restaurant" ,
addr : "7415 IL-143, Edwardsville, IL 62025, USA" ,
loc : {
lat : 38.8035556 ,
lng : - 89.9180782 ,
} ,
navUrl : "https://maps.google.com/?cid=15767680138621770348" ,
phone : "(618) 656-0281" ,
website : "http://www.andriascountryside.com/" ,
} ,
// ... more pool entries here
}
} ,
}Mulai server dev Anda, luncurkan aplikasi di http://localhost:3000
$ npm start
Detail teknis tentang aplikasi eatery-nod-w dapat ditemukan di sini.
eatery-nod-w adalah versi PWA berbasis web dari aplikasi seluler eatery-nod react-native expo .
Perkakas untuk eatery-nod-w dikelola melalui Create React App.
Implementasi eatery-nod-w menggunakan fitur-fitur melalui utilitas yang disebut feature-u , yang memfasilitasi solusi berbasis fitur , menjadikan fitur-fiturnya benar-benar plug-and-play !
Pengembangan Berbasis Fitur sangat meningkatkan pemahaman kode, karena ada korelasi langsung antara ruang masalah (atau persyaratan) dan implementasi (kode) !
Pendekatan ini berskala lebih baik, membuat kode lebih mudah dipelihara, karena modul (atau fitur) lebih kecil dan lebih fokus. Ketika fitur bersifat plug-and-play , aplikasi pada dasarnya dipecah menjadi beberapa aplikasi mini (bisa dikatakan begitu) .
Berikut adalah daftar lengkap fitur eatery-nod-w yang membentuk aplikasi, dan aspek plugin yang mengonfigurasi kerangka kerja secara otomatis di run-time stack-nya.
Anda dapat menemukan informasi lebih lanjut tentang feature-u di sini:
Proyek ini menggunakan React UI Framework (dikelola oleh Facebook) , dan menggunakan fitur terbaru dan paling menarik yang disebut Hooks .
Hooks memungkinkan Anda untuk "menghubungkan" status React dan aspek siklus hidup dari komponen fungsional . Mereka sangat menyederhanakan implementasi UI dibandingkan alternatif Higher Order Components (HoC) .
Berikut adalah perbandingan sumber kait sebelum/sesudah untuk proyek ini.
Jika Anda bertanya-tanya apa saja dependensi tersebut di package.json , berikut ini penjelasannya:
Tumpukan runtime yang digunakan oleh eatery-nod adalah:
React: kerangka UI "react", "react-dom"
Material-UI: pustaka komponen UI "@material-ui/core", "@material-ui/icons"
"notistack" feature-u: memfasilitasi solusi berbasis fitur "feature-u", "feature-redux", "feature-redux-logic", "feature-router"
redux: manajer status aplikasi "redux", "react-redux"
utilitas redux lain-lain:
action-u: pencipta dan organisasi aksi redux "action-u"
astx-redux-util: utilitas komposisi peredam redux "astx-redux-util"
pilih ulang: perpustakaan pemilih untuk Redux "reselect"
redux-logic: mengatur logika bisnis "redux-logic"
Firebase: SDK Google Firebase "firebase"
utilitas umum lain-lain:
lodash: JS menggunakan "lodash.isequal", "lodash.isfunction", "lodash.isplainobject", "lodash.isstring"
geodist: kalkulator jarak geografis "geodist"
yup: Validator skema objek JS "yup" (digunakan oleh utilitas iForms)
"react-scripts""gh-pages" Skrip NPM berikut tersedia:
DEVELOPMENT
===========
start ..... runs the app in development mode (http://localhost:3000)
- the page will reload when edits are applied
- the console will show any lint errors
TESTING
=======
test ...... launches the test runner in an interactive watch mode
CODE QUALITY
============
lint ...... verify code quality, linting BOTH production and test code
- real-time linting is ALSO applied within VSCode
- the console will also show any lint errors
DEPLOYMENT
==========
build ..... builds app for production (in the build/ directory)
deploy .... deploy the app (to: https://eatery-nod-w.js.org/)
NOTE: this script automatically runs the "build" script
(via the "predeploy" script)
MISC
====
eject ..... eject the Create React App project tooling
NOTE: This is a one-way operation!
Once you eject, you can’t go back!
NOTE: This script has been removed, so as to
AVOID accidental activation
... easy to do with VSCode tasks
THE SCRIPT IS:
"eject": "react-scripts eject"
| Melepaskan | Apa | Kapan |
|---|---|---|
| v2.3.0 | Jalur Utama yang Disederhanakan | 24 Agustus 2019 |
| v2.2.0 | Inisialisasi Async yang Lebih Baik | 25 Juli 2019 |
| v2.1.0 | Desain Responsif | 07 Juni 2019 |
| v2.0.0 | Bereaksi Kait | 10 Mei 2019 |
| v1.0.0 | Rilis Awal | 05 Mei 2019 |
Konten GitHub • Rilis GitHub • Diff
Teknis:
app.js ) dengan mengekstrak akumulasi/konfigurasi Aspect Plugin di direktori aspects/ baru (konsisten dengan bagaimana fitur terakumulasi) .Konten GitHub • Rilis GitHub • Diff
Teknis:
Fitur bootstrap diganti dengan feature-u yang baru v2.1.0 Feature.appInit() Application Life Cycle Hook (mendukung pemblokiran inisialisasi asinkron) .
Menambahkan lebih banyak kecerdasan ke featureFlags mengenai tiruan lokasi GPS.
Log konsol sekarang mencerminkan pengaturan yang meniru (lokasi GPS dan layanan).
Menyederhanakan proses asinkron melalui async/menunggu (menghapus janji eksplisit).
Konten GitHub • Rilis GitHub • Diff
Umum:
Layar Daftar Restoran telah berubah sebagai berikut:
Sekarang responsif , menyesuaikan daftar ponsel asli ke tabel yang lebih detail ketika tersedia perangkat yang cukup (lihat Desain Responsif) .
Ketika entri kumpulan diurutkan berdasarkan jarak:
pembagi jarak tempuh sekarang lebih jelas secara visual (menggunakan warna)
nama restoran digunakan sebagai bidang penyortiran sekunder (dalam jarak yang sama)
Batas responsif yang dapat dipilih pengguna dipromosikan melalui Menu Pengguna, yang menentukan di mana konten layar tambahan dapat diwujudkan (berdasarkan lebar layar) . Untuk informasi selengkapnya, lihat Desain Responsif baseUI.
Jarak (jarak tempuh) kini terlihat di layar Detail Restoran.
Dokumen:
Menambahkan bagian Menjalankan Aplikasi lengkap yang menjelaskan bagaimana Anda dapat menjalankan eatery-nod-w dan/atau menyiapkan proyek di lingkungan lokal Anda.
Semua cetakan layar sekarang mencerminkan aplikasi web ini (dipasang dari aplikasi eatery-nod react-native expo) .
Teknis:
Kredensial API telah dipisahkan dari paket fitur "init" yang umum, dengan mengaksesnya dari server yang diterapkan (lihat fitur: initFirebase dan initGooglePlaces).
Pustaka Material-UI ditingkatkan ke V4, menggantikan SEMUA HOC yang tersisa dengan React Hooks !
Ditingkatkan ke React V16.8.6.
Tentukan sekumpulan kait khusus yang dapat digunakan kembali, yang mempertahankan titik henti sementara responsif (berdasarkan kueri media yang konsisten) ... lihat: src/util/responsiveBreakpoints.js
Konten GitHub • Rilis GitHub • Diff
Teknis:
React Hooks sekarang digunakan sebagai pengganti Higher Order Components (HoC)... baca di sini.
Fitur baseUI sekarang mengurutkan item menu yang dipilih berdasarkan tombol , memberikan kontrol penuh atas urutan kemunculannya, terlepas dari urutan perluasan fitur. Ini termasuk kontrak penggunaan untuk:
Konten GitHub • Rilis GitHub
Umum:
