eatery nod w
Simplified Mainline
Eatery-nod-wは、 Date Night Restaurant Selector ...お気に入りのプールから「デート ナイト」レストランをランダムに選択するWeb アプリです。言い換えれば、それは飲食店にうなずきます (オタクは何らかの方法で楽しむ必要があります:-)
妻と私は（別のカップルと）定期的に「デートの夜」をしていますが、お気に入りのレストランのどこに行くかいつも決めかねているので、 eatery-nod-w が糸車を提供します。
Eatery-nod-w は、 Eatery-nod React-Native Expo モバイル アプリの Web ベースの PWA レンディションです。
Eatery-nod のメイン画面はEatery Poolです (飲食店機能を参照してください)。
これにより、選択できるレストランの永続的なプールが視覚化されます (リストはオプションでフィルター処理できます)。
レストランを直接選択することも、「スピン」してランダムに選択することもできます。
「詳細」ビューでは、施設との直接コミュニケーションが可能になります (電話をかけるか、Web サイトにアクセスするか、住所に移動します)。
飲食店のプールはDiscoveryを通じて維持されます ( Discovery 機能を参照してください)。
プールの詳細を手動で管理する必要はありません。むしろ、ディスカバリー機能を使用してレストランを検索するだけです。これは、(Google プレイスに基づく) Google 検索を実行するときに使用されるのと同じソースです。
検出ビュー内で、エントリの横にあるチェックを切り替えるだけです。赤色のエントリはプール内にあり、灰色のエントリはプール内にありません。
承認は認証機能によって提供され、アプリケーション画面を昇格する前に検証済みの電子メール/パスワードが必要です。
Eatery-nod-w は、 Web ページがさまざまなデバイスやウィンドウまたは画面サイズ (デスクトップ、携帯電話、タブレットなど) で適切にレンダリングされるレスポンシブ デザインを採用しています。
例として、携帯電話で表示された飲食店のプールを次に示します。
そして、これはデスクトップブラウザ上の同じ画面マニフェストです。
詳細については、「baseUI レスポンシブ デザイン」を参照してください。
Eatery-nod-w は、デプロイメントから、またはソースからの 2 つの方法のいずれかで実行できます。
Eatery-nod-wは、運用環境デプロイメント サイト https://eatery-nod-w.js.org/ からすぐに試すことができます。
現在、無料の Google Firebase アカウントのリソースが限られているため、サインイン プロセスはアカウントの作成を「ロックダウン」しています。ただし、環境を独自の「モック化された」メモリ内データ ソース (Firebase を利用しない) に変換する「ゲスト ID」を使用することはできます。
guestNO@で始まる電子メール ID (例: [email protected] ) とパスワードguestNOを使用するだけです。
「ゲストID」を使用する場合は、次の点に注意してください。
ローカル マシン(変更できる場所)からEatery-nod-w を実行する場合は、次の手順に従ってください。
git リポジトリをローカル マシンにクローン(または zip)します。
プロジェクトを初期化します。
$ cd {project-root}
$ npm install # install project dependencies
サービスをセットアップします...選択肢は 2 つあります:
モックサービスの使用
プロジェクトを試す最も簡単な方法は、モック サービスを使用することです。これは、バックエンド サービスの資格情報または DB 構成(プール エントリを保持する)がセットアップされていないことを意味します。
モック サービスを有効にするには、 src/featureFlags.jsで次の設定を行うだけです。
useWIFI : false , // use mock service
mockGPS : { lat : 30.010479 , lng : - 90.119414 } , // simulate New Orleans GPS location実際のサービスの使用
Eatery-nod は 2 つの Google クラウド サービスを使用します。
サービス資格情報の定義
これらのサービスに対して独自の資格情報を確立する必要があります。次を参照してください。
DBスキーマの定義
userProfileとプールは永続的な Firebase DB で維持されます。 Firebase アカウントで次の DB スキーマを確立する必要があります。
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 モバイル アプリの Web ベースの PWA レンディションです。
Eatery-nod-wのツールは、Create React App を通じて維持されます。
Eatery-nod-wの実装では、 feature-uと呼ばれるユーティリティを介して機能が採用されており、機能ベースのソリューションが容易になり、機能が真のプラグ アンド プレイになります。
機能ベース開発では、問題領域(または要件)と実装(コード)の間に直接の相関関係があるため、コードの理解が大幅に向上します。
このアプローチでは、モジュール(または機能)が小さく、焦点が絞られているため、拡張性が向上し、コードの保守が容易になります。機能がプラグアンドプレイである場合、アプリケーションは本質的にいくつかのミニアプリ(いわば)に分割されます。
以下は、アプリケーションを構成するEatery-nod-w の機能と、ランタイム スタック内のフレームワークを自動構成するプラグインの側面の完全なリストです。
feature-u の詳細については、こちらをご覧ください。
このプロジェクトは React UI Framework (Facebook によって保守されている)を使用し、 Hooks と呼ばれる最新かつ最もエキサイティングな機能を採用しています。
フックを使用すると、機能コンポーネントからReact の状態とライフサイクルの側面を「フックする」ことができます。これらは、Higher Order Components (HoC) に代わるUI 実装を大幅に簡素化します。
このプロジェクトのフックのソースの前後比較を次に示します。
package.json内のこれらすべての依存関係が何なのか疑問に思われる場合のために、ここで概要を説明します。
Eatery-nodによって使用されるランタイム スタックは次のとおりです。
React: UI フレームワーク"react", "react-dom"
マテリアル 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 Reducer 構成ユーティリティ"astx-redux-util"
reselect: Redux 用セレクター ライブラリ"reselect"
redux-logic: ビジネスロジック"redux-logic"を整理します。
Firebase: Google Firebase SDK "firebase"
その他の一般的なユーティリティ:
lodash: JS ユーティリティ"lodash.isequal", "lodash.isfunction", "lodash.isplainobject", "lodash.isstring"
geodist: 地理的距離計算ツール"geodist"
yup: JS オブジェクト スキーマ バリデーター"yup" (iForms ユーティリティで使用)
"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()アプリケーション ライフ サイクル フック(非同期初期化のブロックをサポート)に置き換えられました。
GPS 位置モックに関する機能をfeatureFlagsに追加しました。
コンソール ログには、モック設定 (GPS 位置情報とサービスの両方) が反映されるようになりました。
async/await による非同期プロセスの簡素化 (明示的な Promise の削除)。
GitHub コンテンツ • GitHub リリース • 差分
一般的な：
飲食店一覧画面が以下のように変更されました。
レスポンシブになり、十分なデバイス領域が利用可能な場合に、元の携帯電話リストをより詳細なテーブルに調整します(レスポンシブ デザインを参照) 。
プール エントリが距離によって並べ替えられる場合:
走行距離の区切り線がより視覚的に明確になりました(色を使用)
飲食店名は二次ソートフィールドとして使用されます（同じ距離内）
ユーザーが選択可能な応答境界は、ユーザー メニューを通じてプロモートされ、追加の画面コンテンツを表示できる場所を定義します(画面の幅に基づいて) 。詳細については、「baseUI レスポンシブ デザイン」を参照してください。
飲食店の詳細画面に距離（走行距離）が表示されるようになりました。
ドキュメント:
ローカル環境でEatery-nod-wを実行したり、プロジェクトをセットアップしたりする方法を説明する完全な「アプリの実行」セクションを追加しました。
すべてのスクリーン プリントにこの Web アプリが反映されるようになりました(eatery-nod React-Native Expo アプリから改良されました) 。
テクニカル：
API 認証情報は、デプロイされたサーバーからアクセスすることにより、共通の「init」機能パッケージから切り離されています (機能: initFirebase および initGooglePlaces を参照)。
マテリアル UI ライブラリは V4 にアップグレードされ、残りのすべてのHOC がReact Hooksに置き換えられました。
React V16.8.6 にアップグレードされました。
(一貫したメディア クエリに基づいて) レスポンシブ ブレークポイントを維持する、再利用可能なカスタム フックのセットを定義します。参照: src/util/responsiveBreakpoints.js
GitHub コンテンツ • GitHub リリース • 差分
テクニカル：
React Hook は Higher Order Components (HoC) の代わりに使用されるようになりました。詳細については、こちらをご覧ください。
BaseUI 機能は、選択されたメニュー項目を key でソートするようになり、機能拡張の順序に関係なく、メニュー項目の表示順序を完全に制御できるようになりました。これには、以下の使用契約が含まれます。
GitHub コンテンツ • GitHub リリース
一般的な：
