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 发布
一般的：
