eatery nod w
Simplified Mainline
eatery-nod-w es Selector de restaurantes para citas nocturnas ... una aplicación web que selecciona aleatoriamente un restaurante para "citas nocturnas" de un grupo de favoritos . En otras palabras, hace un guiño a un restaurante ( los geeks necesitan divertirse de alguna manera :-)
Mi esposa y yo tenemos una "cita nocturna" constante (con otra pareja) y siempre estamos indecisos sobre cuál de nuestros restaurantes favoritos frecuentamos, ¡así que eatery-nod-w proporciona la rueda giratoria!
eatery-nod-w es una versión PWA basada en web de la aplicación móvil eatery-nod react-native expo .
La pantalla principal de eatery-nod es Eatery Pool ( consulte la función de restaurantes ).
Esto visualiza su grupo persistente de restaurantes para seleccionar (la lista se puede filtrar opcionalmente).
Puede seleccionar un restaurante directamente o "girar" para una selección aleatoria.
La vista "detallada" proporciona comunicación directa con el establecimiento (llamar por teléfono, visitar su sitio web o navegar hasta su dirección).
Su grupo de restaurantes se mantiene a través de Discovery ( consulte la función de descubrimiento ).
No es necesario que mantengas los detalles de tu piscina a mano. Más bien, simplemente busca los restaurantes utilizando la función de descubrimiento . Esta es la misma fuente que se utiliza cuando se realiza una búsqueda en Google (basada en Google Places).
Dentro de la vista de descubrimiento, simplemente cambia la marca junto a la entrada. Las entradas rojas están en su grupo, las entradas grises no.
La autorización se proporciona a través de la función de autenticación, que requiere un correo electrónico/contraseña validados antes de promocionar cualquier pantalla de la aplicación.
eatery-nod-w emplea un diseño responsivo donde las páginas web se muestran bien en una variedad de dispositivos y tamaños de ventanas o pantallas (computadoras de escritorio, teléfonos celulares, tabletas, etc.).
A modo de ejemplo, aquí está la piscina del restaurante mostrada en un teléfono móvil :
Y aquí está el mismo manifiesto de pantalla en un navegador de escritorio :
Para obtener más información, consulte Diseño adaptable de baseUI.
Puede ejecutar eatery-nod-w de dos maneras: desde la implementación o desde la fuente:
Puedes jugar con eatery-nod-w inmediatamente a través de su sitio de implementación de producción: https://eatery-nod-w.js.org/
Actualmente, el proceso de inicio de sesión ha "bloqueado" la creación de cuentas debido a los recursos limitados de la cuenta gratuita de Google Firebase. Sin embargo, puede utilizar una "ID de invitado" que transformará el entorno en su propia fuente de datos en memoria "simulada" (que no utiliza Firebase).
Simplemente use una identificación de correo electrónico que comience con guestNO@ (por ejemplo: [email protected] ), con una contraseña de guestNO .
Cuando utilice una "ID de invitado", recuerde lo siguiente:
Si desea ejecutar eatery-nod-w desde su máquina local (donde puede realizar cambios) , siga estas instrucciones:
Clona (o comprime) el repositorio de git en tu máquina local.
Inicialice el proyecto:
$ cd {project-root}
$ npm install # install project dependencies
Configura los servicios... tienes dos opciones :
Usar servicios simulados
La forma más sencilla de jugar con el proyecto es utilizar los servicios simulados. Esto significa que no tiene ninguna configuración para las credenciales del servicio back-end o la configuración de la base de datos (conservando las entradas del grupo) .
Para habilitar los servicios simulados, simplemente realice las siguientes configuraciones en src/featureFlags.js :
useWIFI : false , // use mock service
mockGPS : { lat : 30.010479 , lng : - 90.119414 } , // simulate New Orleans GPS locationUsando servicios reales
eatery-nod utiliza dos servicios en la nube de Google:
Definir credenciales de servicio
Debes establecer tus propias credenciales para estos servicios... ver:
Definir esquema de base de datos
Los perfiles de usuario y los grupos se mantienen en una base de datos Firebase persistente. Debes establecer el siguiente esquema de base de datos en tu cuenta de 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
}
} ,
}Inicie su servidor de desarrollo, iniciando la aplicación en http://localhost:3000
$ npm start
Los detalles técnicos sobre la aplicación eatery-nod-w se pueden encontrar aquí.
eatery-nod-w es una versión PWA basada en web de la aplicación móvil eatery-nod react-native expo .
Las herramientas para eatery-nod-w se mantienen a través de la aplicación Create React.
La implementación de eatery-nod-w emplea funciones a través de una utilidad llamada feature-u , que facilita soluciones basadas en funciones , ¡haciendo que sus funciones sean verdaderamente plug-and-play !
El desarrollo basado en funciones mejora enormemente la comprensión del código, porque existe una correlación directa entre el espacio del problema (o requisitos) y la implementación (el código) .
Este enfoque se escala mejor, lo que hace que el código sea más fácil de mantener, porque los módulos (o funciones) son más pequeños y están más enfocados. Cuando las funciones son plug-and-play , la aplicación se divide en esencia en varias miniaplicaciones (por así decirlo) .
Aquí hay una lista completa de las características de eatery-nod-w que componen la aplicación y los aspectos del complemento que configuran automáticamente los marcos en su pila de tiempo de ejecución.
Puede encontrar más información sobre feature-u aquí:
Este proyecto utiliza React UI Framework (mantenido por Facebook) y emplea su característica más reciente y interesante llamada Hooks .
Los ganchos le permiten "conectarse" a los aspectos del estado y del ciclo de vida de React desde los componentes funcionales . Simplifican enormemente la implementación de la interfaz de usuario en comparación con la alternativa de componentes de orden superior (HoC) .
Aquí hay una comparación de fuentes de ganchos antes y después para este proyecto.
En caso de que te preguntes cuáles son todas esas dependencias en package.json , aquí tienes un resumen:
La pila de tiempo de ejecución utilizada por eatery-nod es:
Reaccionar: el marco de la interfaz de usuario "react", "react-dom"
Material-UI: la biblioteca de componentes de la interfaz de usuario "@material-ui/core", "@material-ui/icons"
"notistack" feature-u: facilita soluciones basadas en funciones "feature-u", "feature-redux", "feature-redux-logic", "feature-router"
redux: el administrador de estado de la aplicación "redux", "react-redux"
varias utilidades redux:
action-u: creador y organización de acciones redux "action-u"
astx-redux-util: utilidades de composición del reductor redux "astx-redux-util"
reselect: biblioteca selectora para Redux "reselect"
redux-logic: organiza la lógica empresarial "redux-logic"
Firebase: SDK de Google Firebase "firebase"
varias utilidades generales:
lodash: utilidades JS "lodash.isequal", "lodash.isfunction", "lodash.isplainobject", "lodash.isstring"
geodista: calculadora de distancia geográfica "geodist"
sí: validador de esquema de objetos JS "yup" (utilizado por la utilidad iForms)
"react-scripts""gh-pages" Están disponibles los siguientes scripts de 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"
| Liberar | Qué | Cuando |
|---|---|---|
| v2.3.0 | Línea principal simplificada | 24 de agosto de 2019 |
| v2.2.0 | Mejor inicialización asíncrona | 25 de julio de 2019 |
| v2.1.0 | Diseño Responsivo | junio 07, 2019 |
| v2.0.0 | Ganchos de reacción | 10 de mayo de 2019 |
| v1.0.0 | Lanzamiento inicial | mayo 05, 2019 |
Contenido de GitHub • Lanzamiento de GitHub • Diferencia
Técnico:
app.js ) extrayendo la acumulación/configuración del complemento de aspecto en un nuevo directorio aspects/ (consistente con cómo se acumulan las funciones) .Contenido de GitHub • Lanzamiento de GitHub • Diferencia
Técnico:
La función bootstrap fue reemplazada por el nuevo gancho de ciclo de vida de la aplicación Feature.appInit() v2.1.0 de feature-u (que admite el bloqueo de la inicialización asíncrona) .
Se agregó más inteligencia a featureFlags relacionadas con la burla de ubicación GPS.
El registro de la consola ahora refleja cualquier configuración simulada (tanto ubicación GPS como servicios).
Procesos asincrónicos simplificados mediante async/await (eliminando promesas explícitas).
Contenido de GitHub • Lanzamiento de GitHub • Diferencia
General:
La pantalla Lista de restaurantes ha cambiado de la siguiente manera:
Ahora es responsivo , ajustando la lista original de teléfonos celulares a una tabla más detallada cuando hay suficiente espacio disponible en el dispositivo (consulte Diseño responsivo) .
Cuando las entradas al grupo están ordenadas por distancia:
el divisor de kilometraje ahora es más distintivo visualmente (usando colores)
El nombre del restaurante se utiliza como campo de clasificación secundario (dentro de la misma distancia).
A través del menú de usuario se promueve un límite de respuesta seleccionable por el usuario, que define dónde se puede manifestar el contenido adicional de la pantalla (según el ancho de la pantalla) . Para obtener más información, consulte Diseño adaptable de baseUI.
La distancia (kilometraje) ahora es visible en la pantalla Detalles del restaurante.
Documentos:
Se agregó una sección completa Ejecutando la aplicación que describe cómo puede ejecutar eatery-nod-w y/o configurar el proyecto en su entorno local.
Todas las impresiones de pantalla ahora reflejan esta aplicación web (actualizada desde la aplicación de exposición nativa de eatery-nod react) .
Técnico:
Las credenciales API se han desacoplado de los paquetes de funciones "init" comunes, accediendo a ellos desde el servidor implementado (consulte las funciones: initFirebase e initGooglePlaces).
¡La biblioteca Material-UI se actualizó a V4, reemplazando TODOS los HOC restantes con React Hooks !
Actualizado a React V16.8.6.
Defina un conjunto de ganchos personalizados reutilizables, que mantenga puntos de interrupción receptivos (basados en consultas de medios consistentes)... consulte: src/util/responsiveBreakpoints.js
Contenido de GitHub • Lanzamiento de GitHub • Diferencia
Técnico:
Los React Hooks ahora se utilizan en lugar de los componentes de orden superior (HoC)... lea sobre esto aquí.
La función baseUI ahora ordena los elementos del menú seleccionados por clave , brindando control total sobre el orden en que aparecen, independientemente del orden de expansión de las funciones. Esto incluye los contratos de uso para:
Contenido de GitHub • Lanzamiento de GitHub
General:
