eatery nod w
Simplified Mainline
eatery-nod-w est Date Night Restaurant Selector … une application Web qui sélectionne au hasard un restaurant « date night » parmi un pool de favoris . En d'autres termes, cela fait un clin d'œil à un restaurant ( les geeks ont besoin de s'amuser d'une manière ou d'une autre :-)
Ma femme et moi avons une « soirée en amoureux » régulière (avec un autre couple) et nous ne savons toujours pas lequel de nos restaurants préférés fréquenter, alors restaurant-nod-w fournit le rouet !
eatery-nod-w est une version PWA basée sur le Web de l' application mobile Eatery-nod React-Native Expo .
L'écran principal de restaurant-nod est le Eatery Pool ( veuillez vous référer à la fonction restaurants ).
Cela visualise votre pool persistant de restaurants parmi lesquels sélectionner (la liste peut éventuellement être filtrée).
Vous pouvez sélectionner un restaurant directement, ou "tourner" pour une sélection aléatoire.
La vue « détaillée » permet une communication directe avec l'établissement (appelez-le, visitez son site web ou accédez à son adresse).
Votre pool de restaurants est géré via Discovery ( veuillez vous référer à la fonction découverte ).
Vous n'êtes pas obligé de gérer manuellement les détails de votre piscine. Au lieu de cela, vous recherchez simplement les restaurants à l'aide de la fonction de découverte . Il s'agit de la même source que celle utilisée lorsque vous effectuez une recherche Google (basée sur Google Places).
Dans la vue de découverte, il vous suffit de cocher la case à côté de l'entrée. Les entrées rouges sont dans votre pool, les entrées grises ne le sont pas.
L'autorisation est fournie via la fonction d'authentification, nécessitant un e-mail/mot de passe validé avant de promouvoir un écran d'application.
eatery-nod-w utilise une conception réactive où les pages Web s'affichent bien sur une variété d'appareils et de tailles de fenêtres ou d'écrans (ordinateurs de bureau, téléphones portables, tablettes, etc.).
A titre d'exemple, voici la piscine du restaurant affichée sur un téléphone portable :
Et voici le même manifeste d'écran sur un navigateur de bureau :
Pour plus d’informations, consultez Conception réactive baseUI.
Vous pouvez exécuter eatery-nod-w de deux manières : à partir du déploiement ou à partir de la source :
Vous pouvez jouer avec eatery-nod-w immédiatement via son site de déploiement de production : https://eatery-nod-w.js.org/
Actuellement, le processus de connexion a « verrouillé » la création de compte , en raison des ressources limitées du compte gratuit Google Firebase. Cependant, vous pouvez utiliser un "ID invité" qui transformera l'environnement en votre propre source de données en mémoire "simulée" (qui n'utilise pas Firebase).
Utilisez simplement un identifiant de messagerie commençant par guestNO@ (ex: [email protected] ), avec un mot de passe guestNO .
Lorsque vous utilisez un « ID invité », rappelez-vous ce qui suit :
Si vous souhaitez exécuter eatery-nod-w depuis votre ordinateur local (sur lequel vous pouvez apporter des modifications) , suivez ces instructions :
Clonez (ou compressez) le dépôt git sur votre machine locale.
Initialisez le projet :
$ cd {project-root}
$ npm install # install project dependencies
Configurez les services ... vous avez deux choix :
Utiliser des services fictifs
Le moyen le plus simple de jouer avec le projet est d'utiliser les services fictifs. Cela signifie que vous n'avez aucune configuration pour les informations d'identification du service back-end ou la configuration de la base de données (conservation des entrées du pool) .
Pour activer les services fictifs, effectuez simplement les paramètres suivants dans src/featureFlags.js :
useWIFI : false , // use mock service
mockGPS : { lat : 30.010479 , lng : - 90.119414 } , // simulate New Orleans GPS locationUtiliser des services réels
restaurant-nod utilise deux services cloud de Google :
Définir les informations d'identification du service
Vous devez établir vos propres informations d'identification pour ces services... voir :
Définir le schéma de base de données
Les profils utilisateur et les pools sont conservés dans une base de données Firebase persistante. Vous devez établir le schéma DB suivant dans votre compte 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
}
} ,
}Démarrez votre serveur de développement en lançant l'application sur http://localhost:3000
$ npm start
Les détails techniques de l’application eatery-nod-w peuvent être trouvés ici.
eatery-nod-w est une version PWA basée sur le Web de l' application mobile Eatery-nod React-Native Expo .
Les outils pour eatery-nod-w sont gérés via l'application Create React.
L'implémentation de eatery-nod-w utilise des fonctionnalités via un utilitaire appelé feature-u , qui facilite les solutions basées sur les fonctionnalités , ce qui rend ses fonctionnalités véritablement plug-and-play !
Le développement basé sur les fonctionnalités améliore considérablement la compréhension du code, car il existe une corrélation directe entre l' espace du problème (ou les exigences) et l' implémentation (le code) !
Cette approche est mieux évolutive, ce qui rend le code plus facile à maintenir, car les modules (ou fonctionnalités) sont plus petits et plus ciblés. Lorsque les fonctionnalités sont plug-and-play , l'application est essentiellement divisée en plusieurs mini-applications (pour ainsi dire) .
Voici une liste complète des fonctionnalités de eatery-nod-w qui composent l'application et des aspects du plugin qui configurent automatiquement les frameworks dans sa pile d'exécution.
Vous pouvez trouver plus d’informations sur feature-u ici :
Ce projet utilise le React UI Framework (maintenu par Facebook) et emploie sa fonctionnalité la plus récente et la plus intéressante appelée Hooks .
Les hooks vous permettent de « vous connecter » aux aspects de l'état et du cycle de vie de React à partir des composants fonctionnels . Ils simplifient considérablement la mise en œuvre de l'interface utilisateur par rapport à l'alternative des composants d'ordre supérieur (HoC) .
Voici une comparaison des sources de hooks avant/après pour ce projet.
Si vous vous demandez quelles sont toutes ces dépendances dans package.json , voici un aperçu :
La pile d'exécution utilisée par eatery-nod est :
React : le framework d'interface utilisateur "react", "react-dom"
Material-UI : la bibliothèque de composants d'interface utilisateur "@material-ui/core", "@material-ui/icons"
"notistack" feature-u : facilite les solutions basées sur les fonctionnalités "feature-u", "feature-redux", "feature-redux-logic", "feature-router"
redux : le gestionnaire d'état de l'application "redux", "react-redux"
divers utilitaires Redux :
action-u : créateur d'action redux et organisation "action-u"
astx-redux-util : utilitaires de composition du réducteur redux "astx-redux-util"
reselect : bibliothèque de sélecteurs pour Redux "reselect"
redux-logic : organise la logique métier "redux-logic"
Firebase : SDK Google Firebase "firebase"
divers utilitaires généraux :
lodash : utilitaires JS "lodash.isequal", "lodash.isfunction", "lodash.isplainobject", "lodash.isstring"
géodiste : calculateur de distance géographique "geodist"
ouais : validateur de schéma d'objet JS "yup" (utilisé par l'utilitaire iForms)
"react-scripts""gh-pages" Les scripts NPM suivants sont disponibles :
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"
| Libérer | Quoi | Quand |
|---|---|---|
| v2.3.0 | Ligne principale simplifiée | 24 août 2019 |
| v2.2.0 | Meilleure initialisation asynchrone | 25 juillet 2019 |
| v2.1.0 | Conception réactive | 07 juin 2019 |
| v2.0.0 | Réagir aux crochets | 10 mai 2019 |
| v1.0.0 | Version initiale | 05 mai 2019 |
Contenu GitHub • Version GitHub • Diff
Technique:
app.js ) en extrayant l'accumulation/la configuration du plugin Aspect dans un nouveau répertoire aspects/ (conforme à la façon dont les fonctionnalités sont accumulées) .Contenu GitHub • Version GitHub • Diff
Technique:
La fonctionnalité bootstrap a été remplacée par le nouveau crochet de cycle de vie de l'application v2.1.0 Feature.appInit() de feature-u (prenant en charge le blocage de l'initialisation asynchrone) .
Ajout de plus d'intelligence à featureFlags concernant la simulation de localisation GPS.
Le journal de la console reflète désormais toute configuration moqueuse (à la fois la localisation GPS et les services).
Processus asynchrones simplifiés via async/await (suppression des promesses explicites).
Contenu GitHub • Version GitHub • Diff
Général:
L'écran Liste des restaurants a changé comme suit :
Il est désormais réactif , ajustant la liste de téléphones portables d'origine à un tableau plus détaillé lorsque suffisamment d'espace d'appareil est disponible (voir Responsive Design) .
Lorsque les entrées du pool sont triées par distance :
le séparateur de kilométrage est désormais plus distinct visuellement (en utilisant la couleur)
le nom du restaurant est utilisé comme champ de tri secondaire (à la même distance)
Une limite réactive sélectionnable par l'utilisateur est promue via le menu utilisateur, définissant où le contenu d'écran supplémentaire peut être manifesté (en fonction de la largeur de l'écran) . Pour plus d’informations, consultez Conception réactive baseUI.
La distance (kilométrage) est désormais visible dans l'écran Détails du restaurant.
Documents :
Ajout d'une section complète Exécution de l'application qui décrit comment vous pouvez exécuter eatery-nod-w et/ou configurer le projet dans votre environnement local.
Toutes les sérigraphies reflètent désormais cette application Web (modernisée à partir de l'application d'exposition eatery-nod React-Native) .
Technique:
Les informations d'identification de l'API ont été découplées des packages de fonctionnalités "init" communs, en y accédant depuis le serveur déployé (voir fonctionnalités : initFirebase et initGooglePlaces).
La bibliothèque Material-UI a été mise à niveau vers la V4, remplaçant TOUS les HOC restants par des React Hooks !
Mise à niveau vers React V16.8.6.
Définissez un ensemble de hooks personnalisés réutilisables, qui maintiennent des points d'arrêt réactifs (basés sur des requêtes multimédias cohérentes)... voir : src/util/responsiveBreakpoints.js
Contenu GitHub • Version GitHub • Diff
Technique:
Les React Hooks sont désormais utilisés à la place des composants d'ordre supérieur (HoC)... lisez-en ici.
La fonctionnalité baseUI trie désormais les éléments de menu sélectionnés par clé , donnant un contrôle complet sur l'ordre dans lequel ils apparaissent, quel que soit l'ordre d'extension des fonctionnalités. Cela inclut les contrats d'utilisation pour :
Contenu GitHub • Version GitHub
Général:
