eatery nod w
Simplified Mainline
eatery-nod-w是約會之夜餐廳選擇器...一個網絡應用程序，可以從收藏夾中隨機選擇“約會之夜”餐廳。換句話說，它向餐廳致敬（極客需要以某種方式享受樂趣:-)
我和我的妻子（與另一對夫婦）度過了一個穩定的“約會之夜”，我們總是猶豫不決最喜歡去哪家餐廳，所以eatery-nod-w提供了旋轉輪！
eatery-nod-w是 eatery-nod react-native expo 行動應用程式的網路為基礎的 PWA 版本。
餐廳點的主螢幕是餐廳池（請參閱餐廳功能）。
這將可視化您的持久餐廳池以供選擇（可以選擇過濾該清單）。
您可以直接選擇一家餐廳，也可以「旋轉」進行隨機選擇。
「詳細」視圖提供與機構的直接溝通（打電話給他們、造訪他們的網站或導航到他們的地址）。
您的餐廳池是透過Discovery維護的（請參閱發現功能）。
您不必手動維護池的詳細資訊。相反，您只需使用發現功能搜尋餐廳即可。這與您發布 Google 搜尋（基於 Google 地方資訊）時使用的來源相同。
在發現視圖中，您只需切換條目旁的核取方塊即可。紅色條目在您的池中，灰色條目不在您的池中。
授權是透過身份驗證功能提供的，在推廣任何應用程式螢幕之前需要經過驗證的電子郵件/密碼。
eatery-nod-w採用響應式設計，網頁在各種裝置和視窗或螢幕尺寸（桌上型電腦、手機、平板電腦等）上都能很好地呈現。
例如，以下是手機上顯示的餐廳池：
這是桌面瀏覽器上的相同畫面清單：
有關更多信息，請參閱 baseUI 響應式設計。
您可以透過以下兩種方式之一執行eatery-nod-w ：從部署或從來源：
您可以透過其生產部署網站立即使用eatery-nod-w ：https://eatery-nod-w.js.org/
目前，由於免費 Google Firebase 帳戶的資源有限，登入流程已「鎖定」帳戶建立。但是，您可以使用「訪客 ID」 ，將環境轉變為您自己的「類比」記憶體資料來源（不使用 Firebase）。
只要使用以guestNO@開頭的電子郵件 ID（例如： [email protected] ），密碼為guestNO 。
使用「訪客 ID」時，請記住以下事項：
如果您希望從本機電腦（可以進行變更）執行eatery-nod-w ，請按照以下說明操作：
將 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 雲端服務：
定義服務憑證
您必須為這些服務建立自己的憑證......請參閱：
定義資料庫結構定義
使用者設定檔和池維護在持久的 Firebase 資料庫中。您必須在您的 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
}
} ,
}啟動您的開發伺服器，在 http://localhost:3000 啟動應用程式
$ npm start
有關eatery-nod-w應用程式的技術詳細資訊可以在此處找到。
eatery-nod-w是 eatery-nod react-native expo 行動應用程式的網路為基礎的 PWA 版本。
eatery-nod-w的工具是透過 Create React App 維護的。
eatery-nod-w的實作透過名為feature-u的實用程式使用功能，該實用程式促進基於功能的解決方案，使其功能真正即插即用！
基於功能的開發極大地提高了程式碼理解性，因為問題空間（或需求）和實作（程式碼）之間存在直接關聯！
這種方法可以更好地擴展，使程式碼更易於維護，因為模組（或功能）更小且更集中。當功能是即插即用時，應用程式本質上被分解為幾個迷你應用程式（可以這麼說） 。
以下是構成應用程式的eatery-nod-w功能的完整列表，以及在其運行時堆疊中自動配置框架的插件方面。
您可以在此處找到有關feature-u的更多資訊：
該專案使用 React UI Framework （由 Facebook 維護） ，並採用其最新、最令人興奮的功能 Hooks 。
Hooks可讓您從功能元件「掛鉤」 React 狀態和生命週期方面。與高階元件 (HoC) 的替代方案相比，它們極大地簡化了 UI 實作。
這是該項目的鉤子來源之前/之後的比較。
如果您想知道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"
reselect：Redux "reselect"的選擇器庫
redux-logic：組織業務邏輯"redux-logic"
Firebase：Google Firebase SDK "firebase"
其他通用工具：
lodash：JS utils "lodash.isequal", "lodash.isfunction", "lodash.isplainobject", "lodash.isstring"
geodist：地理距離計算器"geodist"
yup：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"
| 發布 | 什麼 | 什麼時候 |
|---|---|---|
| v2.3.0 | 簡化主線 | 2019 年 8 月 24 日 |
| v2.2.0 | 更好的非同步初始化 | 2019 年 7 月 25 日 |
| v2.1.0 | 響應式設計 | 2019 年 6 月 7 日 |
| v2.0.0 | 反應鉤子 | 2019 年 5 月 10 日 |
| v1.0.0 | 初始版本 | 2019 年 5 月 5 日 |
GitHub 內容 • GitHub 發佈 • 差異
技術的：
aspects/目錄中提取方面插件累積/配置（與功能累積方式一致）來簡化主線（ app.js ）。GitHub 內容 • GitHub 發佈 • 差異
技術的：
bootstrap功能已替換為feature-u的新 v2.1.0 Feature.appInit()應用程式生命週期掛鉤（支援阻塞非同步初始化） 。
為featureFlags添加了更多關於 GPS 位置模擬的智慧。
控制台日誌現在反映任何模擬設定（GPS 位置和服務）。
透過 async/await 簡化非同步流程（刪除明確承諾）。
GitHub 內容 • GitHub 發佈 • 差異
一般的：
餐廳清單畫面已更改如下：
現在它是響應式的，當有足夠的設備空間可用時，會將原始手機清單調整為更詳細的表格（請參閱響應式設計） 。
當池條目按距離排序時：
里程劃分現在在視覺上更加清晰（使用顏色）
餐廳名稱作為二次排序欄位（相同距離內）
透過使用者選單提升使用者可選擇的回應邊界，定義可顯示附加螢幕內容的位置（基於螢幕寬度） 。有關更多信息，請參閱 baseUI 響應式設計。
現在，距離（里程）在「餐廳詳細資料」畫面中可見。
文件：
新增了完整的運行應用程式部分，描述如何在本機環境中執行eatery-nod-w和/或設定專案。
現在，所有螢幕列印都反映了此 Web 應用程式（由 eatery-nod react-native expo 應用程式改造而來） 。
技術的：
API 憑證已與常見的「init」功能包解耦，透過從部署的伺服器存取它們（請參閱功能：initFirebase 和 initGooglePlaces）。
Material-UI 庫已升級到 V4，用React Hooks取代所有剩餘的 HOC！
升級至React V16.8.6。
定義一組可重複使用的自訂掛鉤，它維護回應斷點（基於一致的媒體查詢）...請參閱： src/util/responsiveBreakpoints.js
GitHub 內容 • GitHub 發佈 • 差異
技術的：
React Hooks 現在用來取代高階元件（HoC）......在這裡閱讀它。
現在，baseUI 功能按 key 對選定的選單項目進行排序，從而可以完全控制它們的顯示順序，而不管功能擴展順序如何。這包括以下用途的使用合約：
GitHub 內容 • GitHub 發布
一般的：
