eatery nod w
Simplified Mainline
eatery-nod-w คือ Date Night Restaurant Selector ... เว็บแอป ที่สุ่มเลือกร้านอาหาร "เดทไนท์" จากรายการโปรด กล่าวอีกนัยหนึ่ง มันทำให้ พยักหน้า ร้านอาหาร ( geeks ต้องสนุกบ้าง :-)
ภรรยาของฉันและฉันมี "การออกเดท" กันเป็นประจำ (กับคู่รักอีกคู่หนึ่ง) และเรามักจะตัดสินใจว่าร้านอาหารโปรดของเราร้านไหนไปบ่อยๆ ดังนั้น eatery-nod-w จึงทำให้วงล้อหมุน!
eatery-nod-w เป็นเวอร์ชัน PWA บนเว็บของ แอปมือถือ eatery-nod react-native expo
หน้าจอหลักของ eatery-nod คือ Eatery Pool ( โปรดดูฟีเจอร์ร้านอาหาร )
ข้อมูลนี้จะแสดงภาพร้านอาหารจำนวนมากที่คุณเลือก (คุณสามารถเลือกกรองรายการได้)
คุณสามารถเลือกร้านอาหารได้โดยตรงหรือ "หมุน" เพื่อเลือกแบบสุ่ม
มุมมอง "โดยละเอียด" ให้การสื่อสารโดยตรงไปยังสถานประกอบการ (โทรศัพท์ เยี่ยมชมเว็บไซต์ หรือนำทางไปยังที่อยู่)
ร้านอาหารของคุณได้รับการดูแลผ่าน Discovery ( โปรดดูคุณลักษณะการค้นพบ )
คุณไม่จำเป็นต้องรักษารายละเอียดของสระด้วยมือ แต่คุณเพียงแค่ค้นหาร้านอาหารโดยใช้คุณสมบัติ การค้นพบ นี่เป็นแหล่งข้อมูลเดียวกับที่คุณใช้เมื่อคุณออก Google Search (อิงตาม Google Places)
ภายในมุมมองการค้นพบ คุณเพียงแค่สลับเครื่องหมายที่อยู่ถัดจากรายการ รายการ สีแดง อยู่ในกลุ่มของคุณ รายการ สีเทา ไม่ได้อยู่ในกลุ่มของคุณ
การอนุญาตมีให้ผ่านคุณสมบัติการรับรองความถูกต้อง โดยต้องมีอีเมล/รหัสผ่านที่ผ่านการตรวจสอบก่อนที่จะโปรโมตหน้าจอแอปพลิเคชันใดๆ
eatery-nod-w ใช้ การออกแบบที่ตอบสนอง ซึ่งหน้าเว็บแสดงผลได้ดีบนอุปกรณ์และหน้าต่างหรือขนาดหน้าจอที่หลากหลาย (เดสก์ท็อป โทรศัพท์มือถือ แท็บเล็ต ฯลฯ)
ตัวอย่างเช่น นี่คือสระว่ายน้ำร้านอาหารที่แสดงบน โทรศัพท์มือถือ :
และนี่คือรายการหน้าจอเดียวกันบน เบราว์เซอร์เดสก์ท็อป :
สำหรับข้อมูลเพิ่มเติม โปรดดูการออกแบบที่ตอบสนองต่อ baseUI
คุณสามารถรัน eatery-nod-w ได้สองวิธี: จาก Deployment หรือจาก Source:
คุณสามารถเล่นกับ eatery-nod-w ได้ทันทีผ่านไซต์ใช้งานจริง: https://eatery-nod-w.js.org/
ขณะนี้กระบวนการลงชื่อเข้าใช้มี การสร้างบัญชี "ถูกล็อก" เนื่องจากทรัพยากรที่จำกัดของบัญชี Google Firebase ฟรี อย่างไรก็ตาม คุณสามารถ ใช้ "Guest ID" ที่จะปรับเปลี่ยนสภาพแวดล้อมให้เป็นแหล่งข้อมูลในหน่วยความจำ "จำลอง" ของคุณเอง (ที่ไม่ได้ใช้ Firebase)
เพียงใช้รหัสอีเมลที่ขึ้นต้นด้วย guestNO@ (เช่น [email protected] ) พร้อมรหัสผ่าน guestNO
เมื่อใช้ "รหัสผู้เยี่ยมชม" โปรดจำสิ่งต่อไปนี้:
หากคุณต้องการรัน eatery-nod-w จากเครื่องของคุณ (ซึ่งคุณสามารถเปลี่ยนแปลงได้) ให้ทำตามคำแนะนำเหล่านี้:
โคลน (หรือ zip) repo git ไปยังเครื่องของคุณ
เริ่มต้นโครงการ:
$ cd {project-root}
$ npm install # install project dependencies
ตั้งค่าบริการ ... คุณมีสองทางเลือก :
การใช้บริการจำลอง
วิธีที่ง่ายที่สุดในการเล่นโปรเจ็กต์คือการใช้บริการจำลอง ซึ่งหมายความว่าคุณไม่มีการตั้งค่าใดๆ สำหรับข้อมูลรับรองบริการแบ็คเอนด์หรือการกำหนดค่าฐานข้อมูล (การรักษารายการพูล)
หากต้องการเปิดใช้งานบริการจำลอง เพียงทำการตั้งค่าต่อไปนี้ใน src/featureFlags.js :
useWIFI : false , // use mock service
mockGPS : { lat : 30.010479 , lng : - 90.119414 } , // simulate New Orleans GPS locationการใช้บริการจริง
eatery-nod ใช้บริการคลาวด์ของ Google สองบริการ:
กำหนดข้อมูลรับรองการบริการ
คุณต้องสร้างข้อมูลรับรองของคุณเองสำหรับบริการเหล่านี้ ... ดู:
กำหนดสคีมา DB
โปรไฟล์ ผู้ใช้ และ พูล ได้รับการบำรุงรักษาใน Firebase DB แบบถาวร คุณต้องสร้างสคีมา DB ต่อไปนี้ในบัญชี firebase ของคุณ:
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
}
} ,
}เริ่มต้นเซิร์ฟเวอร์ dev ของคุณ โดยเปิดแอปที่ http://localhost:3000
$ npm start
รายละเอียดทางเทคนิคเกี่ยวกับแอปพลิเคชัน eatery-nod-w สามารถพบได้ที่นี่
eatery-nod-w เป็นเวอร์ชัน PWA บนเว็บของ แอปมือถือ eatery-nod react-native expo
เครื่องมือสำหรับ eatery-nod-w ได้รับการดูแลผ่าน Create React App
การนำ eatery-nod-w ไปใช้นั้นใช้ ฟีเจอร์ต่างๆ ผ่านยูทิลิตี้ที่เรียกว่า Feature-u ซึ่งอำนวยความสะดวกให้กับ โซลูชันที่ใช้ฟีเจอร์ ทำให้เป็นฟีเจอร์ แบบ Plug-and-Play อย่างแท้จริง
การพัฒนาตามคุณลักษณะ ช่วยปรับปรุงความเข้าใจโค้ดอย่างมาก เนื่องจากมีความสัมพันธ์โดยตรงระหว่าง พื้นที่ปัญหา (หรือข้อกำหนด) และ การใช้งาน (โค้ด) !
วิธีการนี้ปรับขนาดได้ดีขึ้น ทำให้บำรุงรักษาโค้ดได้ง่ายขึ้น เนื่องจากโมดูล (หรือฟีเจอร์) มีขนาดเล็กลงและเน้นมากขึ้น เมื่อคุณสมบัติเป็น แบบพลักแอนด์เพลย์ แอปพลิเคชันจะแบ่งออกเป็นแอปขนาดเล็กหลายแอป (พูดง่ายๆ ก็คือ)
นี่คือรายการทั้งหมดของ ฟีเจอร์ eatery-nod-w ที่ประกอบเป็นแอปพลิเคชัน และ ลักษณะปลั๊กอิน ที่กำหนดค่าเฟรมเวิร์กอัตโนมัติในรันไทม์สแต็ก
คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับ ฟีเจอร์-u ได้ที่นี่:
โปรเจ็กต์นี้ใช้ React UI Framework (ดูแลโดย Facebook) และใช้ ฟีเจอร์ล่าสุดและน่าตื่นเต้นที่สุดที่เรียกว่า Hooks
Hooks ช่วยให้คุณสามารถ "เชื่อมต่อ" สถานะปฏิกิริยาและวงจรชีวิต จากส่วนประกอบที่ใช้งานได้ ช่วยลดความยุ่งยากในการใช้งาน UI ได้ มากกว่าทางเลือกของ Higher Order Components (HoC)
นี่คือการเปรียบเทียบแหล่งที่มาของ hooks ก่อน/หลังสำหรับโปรเจ็กต์นี้
ในกรณีที่คุณสงสัยว่าการพึ่งพาเหล่านั้นคืออะไรใน package.json นี่คือบทสรุป:
รันไทม์สแต็กที่ใช้โดย eatery-nod คือ:
React: กรอบงาน UI "react", "react-dom"
Material-UI: ไลบรารีส่วนประกอบ UI "@material-ui/core", "@material-ui/icons"
"notistack" Feature-u: อำนวยความสะดวกในโซลูชันตามฟีเจอร์ "feature-u", "feature-redux", "feature-redux-logic", "feature-router"
redux: ตัวจัดการสถานะแอปพลิเคชัน "redux", "react-redux"
ยูทิลิตี้ redux อื่น ๆ :
action-u: ผู้สร้างการกระทำ redux และองค์กร "action-u"
astx-redux-util: ยูทิลิตี้ลดองค์ประกอบ redux "astx-redux-util"
เลือกใหม่: ไลบรารีตัวเลือกสำหรับ Redux "reselect"
redux-logic: จัดระเบียบตรรกะทางธุรกิจ "redux-logic"
Firebase: Google Firebase SDK "firebase"
ยูทิลิตี้ทั่วไปอื่น ๆ :
lodash: JS ใช้ "lodash.isequal", "lodash.isfunction", "lodash.isplainobject", "lodash.isstring"
geodist: เครื่องคำนวณระยะทางทางภูมิศาสตร์ "geodist"
ใช่: เครื่องมือตรวจสอบสคีมาวัตถุ JS "yup" (ใช้โดย iForms util)
"react-scripts""gh-pages" มีสคริปต์ NPM ต่อไปนี้:
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"
| ปล่อย | อะไร | เมื่อไร |
|---|---|---|
| เวอร์ชัน 2.3.0 | เมนไลน์แบบง่าย | 24 สิงหาคม 2019 |
| เวอร์ชัน 2.2.0 | การเริ่มต้น Async ที่ดีขึ้น | 25 กรกฎาคม 2019 |
| เวอร์ชัน 2.1.0 | การออกแบบที่ตอบสนอง | 07 มิถุนายน 2019 |
| เวอร์ชัน 2.0.0 | ตอบสนองตะขอ | 10 พฤษภาคม 2019 |
| เวอร์ชัน 1.0.0 | การเปิดตัวครั้งแรก | 05 พฤษภาคม 2019 |
เนื้อหา GitHub • รุ่น GitHub • ความแตกต่าง
เทคนิค:
app.js ) โดยแยกการสะสม/การกำหนดค่า Aspect Plugin ในไดเร็กทอรี aspects/ ใหม่ (สอดคล้องกับวิธีการสะสมฟีเจอร์)เนื้อหา GitHub • รุ่น GitHub • ความแตกต่าง
เทคนิค:
คุณลักษณะ bootstrap ถูกแทนที่ด้วย ฟีเจอร์ v2.1.0 ใหม่ของ Feature-u Feature.appInit() Application Life Cycle Hook (รองรับการบล็อกการเริ่มต้นอะซิงโครนัส)
เพิ่มความชาญฉลาดให้กับ featureFlags เกี่ยวกับการเยาะเย้ยตำแหน่ง GPS
ขณะนี้บันทึกของคอนโซลสะท้อนถึงการตั้งค่าที่เยาะเย้ย (ทั้งตำแหน่ง GPS และบริการ)
ลดความซับซ้อนของกระบวนการอะซิงโครนัสผ่าน async/await (ลบสัญญาที่ชัดเจน)
เนื้อหา GitHub • รุ่น GitHub • ความแตกต่าง
ทั่วไป:
หน้าจอรายการร้านอาหารมีการเปลี่ยนแปลงดังต่อไปนี้:
ขณะนี้เป็น แบบตอบสนอง โดยปรับรายการโทรศัพท์มือถือเดิมเป็นตารางที่มีรายละเอียดมากขึ้นเมื่อมีอสังหาริมทรัพย์ในอุปกรณ์เพียงพอ (ดูการออกแบบที่ตอบสนอง)
เมื่อรายการพูลถูกจัดเรียงตามระยะทาง:
ตอนนี้ตัวแบ่งระยะทางมองเห็นได้ชัดเจนยิ่งขึ้น (ใช้สี)
ชื่อร้านอาหารใช้เป็นช่องเรียงลำดับรอง (ภายในระยะทางเดียวกัน)
ขอบเขตการตอบสนอง ที่ผู้ใช้เลือกได้ได้รับการเลื่อนระดับผ่านเมนูผู้ใช้ โดยกำหนดตำแหน่งที่สามารถแสดงเนื้อหาหน้าจอเพิ่มเติมได้ (ขึ้นอยู่กับความกว้างของหน้าจอ) สำหรับข้อมูลเพิ่มเติม โปรดดูการออกแบบที่ตอบสนองต่อ baseUI
ขณะนี้ระยะทาง (ระยะทาง) จะปรากฏบนหน้าจอรายละเอียดร้านอาหารแล้ว
เอกสาร:
เพิ่มส่วนการเรียกใช้แอปที่สมบูรณ์ซึ่งอธิบายวิธีที่คุณสามารถเรียกใช้ eatery-nod-w และ/หรือตั้งค่าโปรเจ็กต์ในสภาพแวดล้อมท้องถิ่นของคุณ
ขณะนี้การพิมพ์หน้าจอทั้งหมดสะท้อนถึงเว็บแอปนี้ (ดัดแปลงมาจากแอป expo ของ eatery-nod react-native)
เทคนิค:
ข้อมูลรับรอง API ได้รับการแยกออกจากแพ็คเกจคุณสมบัติ "init" ทั่วไป โดยการเข้าถึงจากเซิร์ฟเวอร์ที่ใช้งาน (ดูคุณสมบัติ: initFirebase และ initGooglePlaces)
ไลบรารี Material-UI ได้รับการอัปเกรดเป็น V4 โดยแทนที่ HOC ที่เหลือ ทั้งหมด ด้วย React Hooks !
อัปเกรดเป็น React V16.8.6
กำหนดชุดของ hooks แบบกำหนดเองที่นำมาใช้ซ้ำได้ ซึ่งจะรักษาจุดพักแบบตอบสนอง (ขึ้นอยู่กับการสืบค้นสื่อที่สอดคล้องกัน) ... ดู: src/util/responsiveBreakpoints.js
เนื้อหา GitHub • รุ่น GitHub • ความแตกต่าง
เทคนิค:
ตอนนี้ React Hooks ถูกนำมาใช้แทน Higher Order Components (HoC) ... อ่านรายละเอียดได้ที่นี่
ขณะนี้ฟีเจอร์ baseUI เรียงลำดับรายการเมนูที่เลือกตามคีย์ ทำให้สามารถควบคุมลำดับที่ปรากฏได้อย่างสมบูรณ์ โดยไม่คำนึงถึงลำดับการขยายฟีเจอร์ ซึ่งรวมถึง สัญญาการใช้งาน สำหรับ:
เนื้อหา GitHub • การเปิดตัว GitHub
ทั่วไป:
