eatery nod w
Simplified Mainline
eatery-nod-w ist Date Night Restaurant Selector ... eine Web-App , die zufällig ein „Date Night“-Restaurant aus einem Pool von Favoriten auswählt . Mit anderen Worten, es ist eine Anspielung auf ein Restaurant ( Freaks müssen irgendwie Spaß haben :-)
Meine Frau und ich haben einen regelmäßigen „Date-Abend“ (mit einem anderen Paar) und wir sind immer unentschlossen, welches unserer Lieblingsrestaurants wir besuchen sollen, also sorgt eatery-nod-w für das Spinnrad!
eatery-nod-w ist eine webbasierte PWA-Version der mobilen App eatery-nod React-native Expo .
Der Hauptbildschirm von eatery-nod ist der Eatery Pool ( siehe die Funktion „Eatery“ ).
Dadurch wird Ihr dauerhafter Pool an Restaurants angezeigt, aus denen Sie auswählen können (die Liste kann optional gefiltert werden).
Sie können ein Restaurant direkt auswählen oder für eine zufällige Auswahl „drehen“.
Die „detaillierte“ Ansicht ermöglicht eine direkte Kommunikation mit der Einrichtung (rufen Sie sie an, besuchen Sie ihre Website oder navigieren Sie zu ihrer Adresse).
Ihr Restaurantpool wird über Discovery verwaltet ( siehe Discovery-Funktion ).
Sie müssen die Details Ihres Pools nicht manuell pflegen. Stattdessen durchsuchen Sie die Restaurants einfach mithilfe der Entdeckungsfunktion . Dabei handelt es sich um dieselbe Quelle, die auch bei der Google-Suche verwendet wird (basierend auf Google Places).
In der Discovery-Ansicht schalten Sie einfach das Häkchen neben dem Eintrag ein. Rote Einträge sind in Ihrem Pool, graue Einträge nicht.
Die Autorisierung erfolgt über die Authentifizierungsfunktion, die eine validierte E-Mail-Adresse/ein validiertes Passwort erfordert, bevor Anwendungsbildschirme beworben werden.
eatery-nod-w verwendet ein Responsive Design , bei dem Webseiten auf einer Vielzahl von Geräten und Fenster- oder Bildschirmgrößen (Desktops, Mobiltelefone, Tablets usw.) gut dargestellt werden.
Als Beispiel sehen Sie hier den Restaurantpool, der auf einem Mobiltelefon angezeigt wird:
Und hier ist das gleiche Bildschirmmanifest in einem Desktop-Browser :
Weitere Informationen finden Sie unter baseUI Responsive Design.
Sie können eatery-nod-w auf zwei Arten ausführen: Von der Bereitstellung oder von der Quelle:
Sie können eatery-nod-w sofort über die Produktionsbereitstellungsseite spielen: https://eatery-nod-w.js.org/
Derzeit ist die Kontoerstellung aufgrund der begrenzten Ressourcen des kostenlosen Google Firebase-Kontos beim Anmeldevorgang „gesperrt“ . Sie können jedoch eine „Gast-ID“ verwenden , die die Umgebung in Ihre eigene „nachgebildete“ In-Memory-Datenquelle verwandelt (die Firebase nicht nutzt).
Verwenden Sie einfach eine E-Mail-ID, die mit guestNO@ beginnt (z. B. „ [email protected] “), mit dem Passwort guestNO .
Beachten Sie bei der Verwendung einer „Gast-ID“ Folgendes:
Wenn Sie eatery-nod-w von Ihrem lokalen Computer aus ausführen möchten (wo Sie Änderungen vornehmen können) , befolgen Sie diese Anweisungen:
Klonen (oder komprimieren) Sie das Git-Repo auf Ihren lokalen Computer.
Initialisieren Sie das Projekt:
$ cd {project-root}
$ npm install # install project dependencies
Richten Sie die Dienste ein ... Sie haben zwei Möglichkeiten :
Verwendung von Scheindiensten
Der einfachste Weg, mit dem Projekt zu spielen, besteht darin, die Scheindienste zu nutzen. Das bedeutet, dass Sie keine Einstellungen für die Back-End-Dienstanmeldeinformationen oder die DB-Konfiguration (Beibehaltung der Pooleinträge) vornehmen müssen.
Um die Mock-Dienste zu aktivieren, nehmen Sie einfach die folgenden Einstellungen in src/featureFlags.js vor:
useWIFI : false , // use mock service
mockGPS : { lat : 30.010479 , lng : - 90.119414 } , // simulate New Orleans GPS locationNutzung realer Dienste
eatery-nod nutzt zwei Google Cloud-Dienste:
Definieren Sie Dienstanmeldeinformationen
Für diese Dienste müssen Sie Ihre eigenen Anmeldeinformationen erstellen ... siehe:
Definieren Sie das DB-Schema
Die Benutzerprofile und Pools werden in einer persistenten Firebase-Datenbank verwaltet. Sie müssen das folgende DB-Schema in Ihrem Firebase-Konto einrichten:
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
}
} ,
}Starten Sie Ihren Entwicklungsserver und starten Sie die App unter http://localhost:3000
$ npm start
Die technischen Details zur eatery-nod-w- Anwendung finden Sie hier.
eatery-nod-w ist eine webbasierte PWA-Version der mobilen App eatery-nod React-native Expo .
Die Tools für eatery-nod-w werden über die Create React App verwaltet.
Die Implementierung von eatery-nod-w nutzt Funktionen über ein Dienstprogramm namens feature-u , das funktionsbasierte Lösungen ermöglicht und die Funktionen wirklich Plug-and-Play- fähig macht!
Die funktionsbasierte Entwicklung verbessert das Codeverständnis erheblich, da eine direkte Korrelation zwischen dem Problembereich (oder den Anforderungen) und der Implementierung (dem Code) besteht!
Dieser Ansatz lässt sich besser skalieren und erleichtert die Wartung des Codes, da die Module (oder Funktionen) kleiner und fokussierter sind. Wenn es sich um Plug-and-Play -Funktionen handelt, wird die Anwendung im Wesentlichen in mehrere Mini-Apps aufgeteilt (sozusagen) .
Hier finden Sie eine vollständige Liste der eatery-nod-w- Funktionen , aus denen die Anwendung besteht, sowie der Plugin-Aspekte , die die Frameworks im Laufzeitstapel automatisch konfigurieren.
Weitere Informationen zu feature-u finden Sie hier:
Dieses Projekt verwendet das React UI Framework (verwaltet von Facebook) und nutzt dessen neueste und aufregendste Funktion namens Hooks .
Mit Hooks können Sie React-Status- und Lebenszyklusaspekte von Funktionskomponenten „einbinden“ . Sie vereinfachen die UI-Implementierung erheblich gegenüber der Alternative von Higher Order Components (HoC) .
Hier ist ein Vorher-/Nachher-Hooks-Quellenvergleich für dieses Projekt.
Falls Sie sich fragen, was all diese Abhängigkeiten in package.json sind, finden Sie hier eine Übersicht:
Der von eatery-nod verwendete Laufzeitstapel ist:
React: das UI-Framework "react", "react-dom"
Material-UI: die UI-Komponentenbibliothek "@material-ui/core", "@material-ui/icons"
"notistack" feature-u: ermöglicht funktionsbasierte Lösungen "feature-u", "feature-redux", "feature-redux-logic", "feature-router"
redux: der Anwendungsstatusmanager "redux", "react-redux"
Verschiedene Redux-Dienstprogramme:
action-u: Redux-Action-Ersteller und Organisation "action-u"
astx-redux-util: Redux-Reducer-Kompositionsdienstprogramme "astx-redux-util"
reselect: Auswahlbibliothek für Redux "reselect"
Redux-Logik: organisiert die Geschäftslogik "redux-logic"
Firebase: Google Firebase SDK "firebase"
Sonstige allgemeine Dienstprogramme:
lodash: JS-Utils "lodash.isequal", "lodash.isfunction", "lodash.isplainobject", "lodash.isstring"
Geodist: geografischer Entfernungsrechner "geodist"
yup: JS-Objektschema-Validator "yup" (wird vom iForms-Dienstprogramm verwendet)
"react-scripts""gh-pages" Die folgenden NPM-Skripte sind verfügbar:
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"
| Freigeben | Was | Wann |
|---|---|---|
| v2.3.0 | Vereinfachte Hauptlinie | 24. August 2019 |
| v2.2.0 | Bessere asynchrone Initialisierung | 25. Juli 2019 |
| v2.1.0 | Responsives Design | 07. Juni 2019 |
| v2.0.0 | Reagieren Sie auf Hooks | 10. Mai 2019 |
| v1.0.0 | Erstveröffentlichung | 05. Mai 2019 |
GitHub-Inhalt • GitHub-Version • Diff
Technisch:
app.js ), indem Sie die Aspect-Plugin-Akkumulation/-Konfiguration in ein neues aspects/ -Verzeichnis extrahieren (im Einklang mit der Art und Weise, wie Features akkumuliert werden) .GitHub-Inhalt • GitHub-Version • Diff
Technisch:
Die bootstrap Funktion wurde durch den neuen Feature.appInit() Application Life Cycle Hook v2.1.0 von feature-u ersetzt (der das Blockieren der asynchronen Initialisierung unterstützt) .
featureFlags wurden mehr Informationen zur GPS-Standortverspottung hinzugefügt.
Das Konsolenprotokoll spiegelt jetzt alle Spott-Einstellungen wider (sowohl GPS-Standort als auch Dienste).
Vereinfachte asynchrone Prozesse über async/await (Entfernung expliziter Versprechen).
GitHub-Inhalt • GitHub-Version • Diff
Allgemein:
Der Bildschirm „Restaurantliste“ hat sich wie folgt geändert:
Es ist jetzt responsiv und passt die ursprüngliche Mobiltelefonliste an eine detailliertere Tabelle an, wenn genügend Geräteplatz verfügbar ist (siehe Responsive Design) .
Wenn Pooleinträge nach Entfernung sortiert sind:
Die Kilometertrennung ist jetzt optisch deutlicher (durch Farbe)
Der Name des Restaurants wird als sekundäres Sortierfeld verwendet (im gleichen Abstand).
Über das Benutzermenü wird eine vom Benutzer wählbare Reaktionsgrenze gefördert, die definiert, wo zusätzlicher Bildschirminhalt angezeigt werden kann (basierend auf der Bildschirmbreite) . Weitere Informationen finden Sie unter baseUI Responsive Design.
Die Entfernung (Kilometerstand) ist jetzt im Bildschirm „Restaurantdetails“ sichtbar.
Dokumente:
Es wurde ein vollständiger Abschnitt „Ausführen der App“ hinzugefügt, der beschreibt, wie Sie eatery-nod-w ausführen und/oder das Projekt in Ihrer lokalen Umgebung einrichten können.
Alle Siebdrucke spiegeln jetzt diese Web-App wider (nachgerüstet von der eatery-nod-react-native-Expo-App) .
Technisch:
Die API-Anmeldeinformationen wurden von den allgemeinen „init“-Funktionspaketen entkoppelt, indem über den bereitgestellten Server auf sie zugegriffen wird (siehe Funktionen: initFirebase und initGooglePlaces).
Die Material-UI-Bibliothek wurde auf V4 aktualisiert und ALLE verbleibenden HOCs durch React Hooks ersetzt!
Auf React V16.8.6 aktualisiert.
Definieren Sie eine Reihe wiederverwendbarer benutzerdefinierter Hooks, die reaktionsfähige Haltepunkte verwalten (basierend auf konsistenten Medienabfragen) ... siehe: src/util/responsiveBreakpoints.js
GitHub-Inhalt • GitHub-Version • Diff
Technisch:
React Hooks werden jetzt anstelle von Higher Order Components (HoC) verwendet ... lesen Sie hier darüber.
Die baseUI-Funktion sortiert ausgewählte Menüelemente jetzt nach Schlüssel und gibt so vollständige Kontrolle über die Reihenfolge, in der sie angezeigt werden, unabhängig von der Reihenfolge der Funktionserweiterungen. Dazu gehören die Nutzungsverträge für:
GitHub-Inhalt • GitHub-Veröffentlichung
Allgemein:
