eatery nod w
Simplified Mainline
eatery-nod-w é o Date Night Restaurant Selector ... um aplicativo da web que seleciona aleatoriamente um restaurante para "encontro noturno" em um conjunto de favoritos . Em outras palavras, dá um aceno para um restaurante ( os geeks precisam se divertir de alguma forma :-)
Minha esposa e eu temos um "encontro noturno" constante (com outro casal) e estamos sempre indecisos sobre qual de nossos restaurantes favoritos frequentar, então o restaurante-nod-w fornece a roda de fiar!
eatery-nod-w é uma versão PWA baseada na web do aplicativo móvel eatery-nod react-native expo .
A tela principal do eatery-nod é o Eatery Pool ( consulte o recurso de restaurantes ).
Isso visualiza seu conjunto persistente de restaurantes para selecionar (a lista pode ser filtrada opcionalmente).
Você pode selecionar um restaurante diretamente ou “girar” para uma seleção aleatória.
A visualização “detalhada” permite a comunicação direta com o estabelecimento (telefone, visite o site ou navegue até o endereço).
Seu conjunto de restaurantes é mantido através do Discovery ( consulte o recurso Discovery ).
Você não precisa manter os detalhes da sua piscina manualmente. Em vez disso, basta pesquisar os restaurantes usando o recurso de descoberta . Esta é a mesma fonte usada quando você faz uma pesquisa no Google (com base no Google Places).
Na visualização de descoberta, basta alternar a marca ao lado da entrada. As entradas vermelhas estão em seu pool, as entradas cinza não.
A autorização é fornecida através do recurso de autenticação, exigindo um e-mail/senha validados antes de promover qualquer tela do aplicativo.
eatery-nod-w emprega um design responsivo onde as páginas da web são renderizadas bem em uma variedade de dispositivos e tamanhos de janelas ou telas (desktops, celulares, tablets, etc.).
Como exemplo, aqui está a piscina do restaurante mostrada em um celular :
E aqui está o mesmo manifesto de tela em um navegador de desktop :
Para obter mais informações, consulte Design responsivo baseUI.
Você pode executar eatery-nod-w de duas maneiras: na implantação ou na origem:
Você pode brincar com o eatery-nod-w imediatamente através do site de implantação de produção: https://eatery-nod-w.js.org/
Atualmente, o processo de login "bloqueou" a criação de conta devido aos recursos limitados da conta gratuita do Google Firebase. No entanto, você pode usar um "ID de convidado" que transformará o ambiente em sua própria fonte de dados na memória "simulada" (que não utiliza Firebase).
Basta usar um ID de e-mail que comece com guestNO@ (ex: [email protected] ), com uma senha guestNO .
Ao usar um "ID de convidado", lembre-se do seguinte:
Se você deseja executar eatery-nod-w em sua máquina local (onde você pode fazer alterações) , siga estas instruções:
Clone (ou zip) o repositório git em sua máquina local.
Inicialize o projeto:
$ cd {project-root}
$ npm install # install project dependencies
Configure os serviços... você tem duas opções :
Usando serviços simulados
A maneira mais fácil de brincar com o projeto é usar os serviços simulados. Isso significa que você não tem nenhuma configuração para as credenciais de serviço de back-end ou para a configuração do banco de dados (mantendo as entradas do pool) .
Para habilitar os serviços simulados, basta fazer as seguintes configurações em src/featureFlags.js :
useWIFI : false , // use mock service
mockGPS : { lat : 30.010479 , lng : - 90.119414 } , // simulate New Orleans GPS locationUsando serviços reais
eatery-nod usa dois serviços em nuvem do Google:
Definir credenciais de serviço
Você deve estabelecer suas próprias credenciais para esses serviços... veja:
Definir esquema de banco de dados
Os userProfiles e pools são mantidos em um banco de dados Firebase persistente. Você deve estabelecer o seguinte esquema de banco de dados em sua conta do 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 seu servidor de desenvolvimento, iniciando o aplicativo em http://localhost:3000
$ npm start
Os detalhes técnicos sobre o aplicativo eatery-nod-w podem ser encontrados aqui.
eatery-nod-w é uma versão PWA baseada na web do aplicativo móvel eatery-nod react-native expo .
As ferramentas para eatery-nod-w são mantidas por meio do aplicativo Create React.
A implementação do eatery-nod-w emprega recursos por meio de um utilitário chamado feature-u , que facilita soluções baseadas em recursos , tornando seus recursos verdadeiramente plug-and-play !
O Desenvolvimento Baseado em Recursos melhora muito a compreensão do código, porque existe uma correlação direta entre o espaço do problema (ou requisitos) e a implementação (o código) !
Essa abordagem é melhor dimensionada, tornando o código mais fácil de manter, porque os módulos (ou recursos) são menores e mais focados. Quando os recursos são plug-and-play , o aplicativo é essencialmente dividido em vários miniaplicativos (por assim dizer) .
Aqui está uma lista completa dos recursos do eatery-nod-w que compõem o aplicativo e os aspectos do plug-in que configuram automaticamente as estruturas em sua pilha de tempo de execução.
Você pode encontrar mais informações sobre o feature-u aqui:
Este projeto usa o React UI Framework (mantido pelo Facebook) e emprega seu recurso mais recente e interessante chamado Hooks .
Os ganchos permitem que você "se conecte" ao estado do React e aos aspectos do ciclo de vida dos componentes funcionais . Eles simplificam muito a implementação da UI em vez da alternativa de componentes de ordem superior (HoC) .
Aqui está uma comparação de fontes de ganchos antes/depois para este projeto.
Caso você esteja se perguntando quais são todas essas dependências package.json , aqui está um resumo:
A pilha de tempo de execução usada por eatery-nod é:
React: a estrutura da UI "react", "react-dom"
Material-UI: a biblioteca de componentes de UI "@material-ui/core", "@material-ui/icons"
"notistack" feature-u: facilita soluções baseadas em recursos "feature-u", "feature-redux", "feature-redux-logic", "feature-router"
redux: o gerenciador de estado do aplicativo "redux", "react-redux"
diversos utilitários redux:
action-u: criador e organização da ação redux "action-u"
astx-redux-util: utilitários de composição do redutor redux "astx-redux-util"
reselect: biblioteca seletora para Redux "reselect"
redux-logic: organiza a lógica de negócios "redux-logic"
Firebase: SDK do Google Firebase "firebase"
diversos utilitários gerais:
lodash: utilitários JS "lodash.isequal", "lodash.isfunction", "lodash.isplainobject", "lodash.isstring"
geodist: calculadora de distância geográfica "geodist"
sim: validador de esquema de objeto JS "yup" (usado pelo utilitário iForms)
"react-scripts""gh-pages" Os seguintes scripts NPM estão disponíveis:
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 | O que | Quando |
|---|---|---|
| v2.3.0 | Linha principal simplificada | 24 de agosto de 2019 |
| v2.2.0 | Melhor inicialização assíncrona | 25 de julho de 2019 |
| v2.1.0 | Design Responsivo | 07 de junho de 2019 |
| v2.0.0 | Ganchos de reação | 10 de maio de 2019 |
| v1.0.0 | Lançamento Inicial | 05 de maio de 2019 |
Conteúdo do GitHub • Lançamento do GitHub • Diferença
Técnico:
app.js ) extraindo a acumulação/configuração do Aspect Plugin em um novo diretório aspects/ (consistente com a forma como os recursos são acumulados) .Conteúdo do GitHub • Lançamento do GitHub • Diferença
Técnico:
O recurso bootstrap foi substituído pelo novo v2.1.0 Feature.appInit() Application Life Cycle Hook do feature-u (com suporte para bloqueio de inicialização assíncrona) .
Adicionada mais inteligência aos featureFlags relativos à simulação de localização GPS.
O log do console agora reflete qualquer configuração de simulação (localização GPS e serviços).
Processos assíncronos simplificados via async/await (removendo promessas explícitas).
Conteúdo do GitHub • Lançamento do GitHub • Diferença
Em geral:
A tela Lista de restaurantes mudou da seguinte forma:
Agora ele é responsivo , ajustando a lista original de telefones celulares para uma tabela mais detalhada quando houver espaço suficiente no dispositivo disponível (consulte Design responsivo) .
Quando as entradas do pool são classificadas por distância:
o divisor de quilometragem agora é mais distinto visualmente (usando cores)
o nome do restaurante é usado como um campo de classificação secundário (dentro da mesma distância)
Um limite responsivo selecionável pelo usuário é promovido através do Menu do Usuário, definindo onde o conteúdo adicional da tela pode ser manifestado (com base na largura da tela) . Para obter mais informações, consulte Design responsivo baseUI.
A distância (quilometragem) agora está visível na tela Detalhes do restaurante.
Documentos:
Adicionada uma seção completa Executando o aplicativo que descreve como você pode executar eatery-nod-w e/ou configurar o projeto em seu ambiente local.
Todas as impressões de tela agora refletem este aplicativo da web (reformado do aplicativo eatery-nod react-native expo) .
Técnico:
As credenciais da API foram dissociadas dos pacotes de recursos "init" comuns, acessando-os a partir do servidor implantado (consulte recursos: initFirebase e initGooglePlaces).
A biblioteca Material-UI foi atualizada para V4, substituindo TODOS os HOCs restantes por React Hooks !
Atualizado para React V16.8.6.
Defina um conjunto de ganchos personalizados reutilizáveis, que mantém pontos de interrupção responsivos (com base em consultas de mídia consistentes) ... consulte: src/util/responsiveBreakpoints.js
Conteúdo do GitHub • Lançamento do GitHub • Diferença
Técnico:
React Hooks agora são usados no lugar de Higher Order Components (HoC)... leia sobre isso aqui.
O recurso baseUI agora classifica os itens de menu selecionados por key , dando controle total sobre a ordem em que aparecem, independentemente da ordem de expansão dos recursos. Isto inclui os contratos de utilização para:
Conteúdo do GitHub • Lançamento do GitHub
Em geral:
