eatery nod w
Simplified Mainline
Eatery-nod-w هو تطبيق Date Night Restaurant Selector ... وهو تطبيق ويب يقوم بشكل عشوائي باختيار مطعم "موعد ليلي" من مجموعة من المفضلات . وبعبارة أخرى، فإنه يعطي إشارة إلى المطعم ( المهوسون بحاجة إلى الحصول على المتعة بطريقة أو بأخرى :-)
أنا وزوجتي نقضي "موعدًا ليليًا" ثابتًا (مع زوجين آخرين) ونحن دائمًا غير حاسمين بشأن أي من المطاعم المفضلة لدينا نتردد عليها، لذلك يوفر Eatery-nod-w عجلة الغزل!
Eatery-nod-w هو عرض PWA قائم على الويب لتطبيق الهاتف المحمول Eatery-nod React-Native Expo .
الشاشة الرئيسية لإيماءة المطعم هي Eatery Pool ( يرجى الرجوع إلى ميزة المطاعم ).
يؤدي هذا إلى تصور مجموعتك المستمرة من المطاعم للاختيار من بينها (يمكن تصفية القائمة اختياريًا).
يمكنك تحديد مطعم مباشرة، أو "تدوير" لاختيار عشوائي.
يوفر العرض "التفصيلي" اتصالاً مباشرًا بالمؤسسة (اتصل بهم، أو قم بزيارة موقع الويب الخاص بهم، أو انتقل إلى عناوينهم).
تتم صيانة مجموعة المطاعم الخاصة بك من خلال Discovery ( يرجى الرجوع إلى ميزة الاكتشاف ).
ليس عليك الحفاظ على تفاصيل حمام السباحة الخاص بك يدويًا. وبدلاً من ذلك، يمكنك ببساطة البحث في المطاعم باستخدام ميزة الاكتشاف . وهذا هو نفس المصدر الذي يتم استخدامه عند إصدار بحث Google (استنادًا إلى أماكن Google).
ضمن عرض الاكتشاف، ما عليك سوى تبديل علامة الاختيار بجوار الإدخال. الإدخالات الحمراء موجودة في مجموعتك، والإدخالات الرمادية ليست كذلك.
يتم توفير التفويض من خلال ميزة المصادقة، مما يتطلب بريدًا إلكترونيًا/كلمة مرور تم التحقق منها قبل الترويج لأي شاشات تطبيق.
يستخدم Eatery-nod-w تصميمًا سريع الاستجابة حيث يتم عرض صفحات الويب بشكل جيد على مجموعة متنوعة من الأجهزة وأحجام النوافذ أو الشاشات (أجهزة الكمبيوتر المكتبية والهواتف المحمولة والأجهزة اللوحية وما إلى ذلك).
على سبيل المثال، هذا هو حوض المطاعم الذي يظهر على الهاتف الخليوي :
وهنا نفس بيان الشاشة على متصفح سطح المكتب :
لمزيد من المعلومات، راجع التصميم المستجيب لواجهة المستخدم الأساسية.
يمكنك تشغيل Eatery-nod-w بإحدى طريقتين: من النشر أو من المصدر:
يمكنك اللعب مع Eatery-nod-w على الفور من خلال موقع نشر الإنتاج الخاص به: https://eatery-nod-w.js.org/
في الوقت الحالي ، "أغلقت" عملية تسجيل الدخول عملية إنشاء الحساب ، وذلك بسبب الموارد المحدودة لحساب Google Firebase المجاني. ومع ذلك، يمكنك استخدام "معرف الضيف" الذي سيحول البيئة إلى مصدر بيانات في الذاكرة "مستهزئ" خاص بك (لا يستخدم Firebase).
ما عليك سوى استخدام معرف بريد إلكتروني يبدأ بـ guestNO@ (على سبيل المثال: [email protected] )، مع كلمة مرور guestNO .
عند استخدام "معرف الضيف"، تذكر ما يلي:
إذا كنت ترغب في تشغيل Eatery-nod-w من جهازك المحلي (حيث يمكنك إجراء التغييرات) ، فاتبع التعليمات التالية:
انسخ (أو اضغط) git repo على جهازك المحلي.
تهيئة المشروع:
$ cd {project-root}
$ npm install # install project dependencies
قم بإعداد الخدمات... أمامك خياران :
استخدام الخدمات الوهمية
أسهل طريقة للتعامل مع المشروع هي استخدام الخدمات الوهمية. هذا يعني أنه ليس لديك أي إعداد لبيانات اعتماد الخدمة الخلفية أو تكوين قاعدة البيانات (الاحتفاظ بإدخالات التجمع) .
لتمكين الخدمات الوهمية، ما عليك سوى إجراء الإعدادات التالية في src/featureFlags.js :
useWIFI : false , // use mock service
mockGPS : { lat : 30.010479 , lng : - 90.119414 } , // simulate New Orleans GPS locationاستخدام الخدمات الحقيقية
يستخدم Eatery-nod خدمتين سحابيتين من Google:
تحديد بيانات اعتماد الخدمة
يجب عليك إنشاء بيانات الاعتماد الخاصة بك لهذه الخدمات... راجع:
تعريف مخطط قاعدة البيانات
يتم الاحتفاظ بملفات تعريف المستخدم والتجمعات في قاعدة بيانات Firebase المستمرة. يجب عليك إنشاء مخطط قاعدة البيانات التالي في حساب 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
}
} ,
}ابدأ تشغيل خادم التطوير الخاص بك، وقم بتشغيل التطبيق على http://localhost:3000
$ npm start
يمكن العثور على التفاصيل الفنية حول تطبيق Eatery-nod-w هنا.
Eatery-nod-w هو عرض PWA على شبكة الإنترنت لتطبيق الهاتف المحمول Eatery-nod React-Native Expo .
تتم صيانة أدوات Eatery-nod-w من خلال تطبيق Create React.
يستخدم تنفيذ Eatery-nod-w ميزات من خلال أداة مساعدة تسمى feature-u ، والتي تسهل الحلول القائمة على الميزات ، مما يجعل ميزاتها قابلة للتوصيل والتشغيل حقًا!
يعمل التطوير القائم على الميزات على تحسين فهم التعليمات البرمجية بشكل كبير، نظرًا لوجود ارتباط مباشر بين مساحة المشكلة (أو المتطلبات) والتنفيذ (الكود) !
يتوسع هذا الأسلوب بشكل أفضل، مما يجعل صيانة التعليمات البرمجية أسهل، لأن الوحدات (أو الميزات) أصغر حجمًا وأكثر تركيزًا. عندما تكون الميزات عبارة عن ميزة التوصيل والتشغيل ، يتم تقسيم التطبيق في جوهره إلى عدة تطبيقات صغيرة (إذا جاز التعبير) .
فيما يلي قائمة كاملة بميزات Eatery-nod-w التي يتكون منها التطبيق، وجوانب المكونات الإضافية التي تقوم بتكوين أطر العمل تلقائيًا في مكدس وقت التشغيل الخاص به.
يمكنك العثور على مزيد من المعلومات حول الميزة-u هنا:
يستخدم هذا المشروع إطار عمل React UI (الذي يحتفظ به Facebook) ، ويستخدم أحدث ميزاته وأكثرها إثارة والتي تسمى Hooks .
تسمح لك الخطافات "بالربط" بحالة React وجوانب دورة الحياة من المكونات الوظيفية . إنها تعمل على تبسيط تنفيذ واجهة المستخدم إلى حد كبير بدلاً من المكونات ذات الترتيب العالي (HoC) .
فيما يلي مقارنة لمصدر الخطافات قبل/بعد هذا المشروع.
إذا كنت تتساءل عن كل هذه التبعيات الموجودة في package.json ، فإليك ملخصًا:
مكدس وقت التشغيل الذي تستخدمه Eatery-nod هو:
رد الفعل: إطار عمل واجهة المستخدم "react", "react-dom"
Material-UI: مكتبة مكونات واجهة المستخدم "@material-ui/core", "@material-ui/icons"
"notistack" feature-u: يسهل الحلول القائمة على الميزات "feature-u", "feature-redux", "feature-redux-logic", "feature-router"
الإعادة: مدير حالة التطبيق "redux", "react-redux"
أدوات متنوعة للإعادة:
action-u: إعادة إنشاء العمل وتنظيمه "action-u"
astx-redux-util: أدوات مساعدة لتكوين مخفض الإرجاع "astx-redux-util"
إعادة التحديد: مكتبة محدد لـ Redux "reselect"
منطق الإعادة: ينظم منطق الأعمال "redux-logic"
Firebase: Google Firebase SDK "firebase"
استخدامات عامة متنوعة:
lodash: أدوات JS "lodash.isequal", "lodash.isfunction", "lodash.isplainobject", "lodash.isstring"
الجيوديسي: حاسبة المسافة الجغرافية "geodist"
نعم: مدقق مخطط كائن JS "yup" (يستخدمه iForms util)
"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 | الخط الرئيسي المبسط | 24 أغسطس 2019 |
| v2.2.0 | تهيئة أفضل للمزامنة | 25 يوليو 2019 |
| v2.1.0 | تصميم سريع الاستجابة | 07 يونيو 2019 |
| v2.0.0 | رد فعل السنانير | 10 مايو 2019 |
| v1.0.0 | الإصدار الأولي | 05 مايو 2019 |
محتوى GitHub • إصدار GitHub • الفرق
اِصطِلاحِيّ:
app.js ) عن طريق استخراج تراكم/تكوين Aspect Plugin في aspects/ دليل جديد (بما يتوافق مع كيفية تجميع الميزات) .محتوى GitHub • إصدار GitHub • الفرق
اِصطِلاحِيّ:
تم استبدال ميزة bootstrap بميزة v2.1.0 الجديدة الخاصة بـ Feature.appInit() خطاف دورة حياة التطبيق (يدعم حظر التهيئة غير المتزامنة) .
تمت إضافة المزيد من الذكاء إلى featureFlags فيما يتعلق بالاستهزاء بموقع GPS.
يعكس سجل وحدة التحكم الآن أي إعداد ساخر (كل من موقع GPS والخدمات).
تبسيط العمليات غير المتزامنة عبر المزامنة/الانتظار (إزالة الوعود الصريحة).
محتوى GitHub • إصدار GitHub • الفرق
عام:
تم تغيير شاشة قائمة المطاعم على النحو التالي:
أصبح الآن سريع الاستجابة ، حيث يقوم بضبط قائمة الهواتف المحمولة الأصلية إلى جدول أكثر تفصيلاً عند توفر مساحة كافية للجهاز (راجع التصميم سريع الاستجابة) .
عندما يتم فرز إدخالات التجمع حسب المسافة:
أصبح مقسم الأميال الآن أكثر وضوحًا (باستخدام اللون)
يتم استخدام اسم المطعم كحقل فرز ثانوي (ضمن نفس المسافة)
يتم الترويج لحدود الاستجابة التي يمكن للمستخدم تحديدها من خلال قائمة المستخدم، لتحديد المكان الذي يمكن أن يظهر فيه محتوى الشاشة الإضافي (استنادًا إلى عرض الشاشة) . لمزيد من المعلومات، راجع التصميم المستجيب لواجهة المستخدم الأساسية.
أصبحت المسافة (المسافة المقطوعة) مرئية الآن في شاشة تفاصيل المطعم.
المستندات:
تمت إضافة قسم تشغيل التطبيق الكامل الذي يصف كيفية تشغيل Eatery-nod-w و/أو إعداد المشروع في بيئتك المحلية.
تعكس جميع مطبوعات الشاشة الآن تطبيق الويب هذا (تم تحديثه من تطبيق Eatery-nod React-Native Expo) .
اِصطِلاحِيّ:
تم فصل بيانات اعتماد واجهة برمجة التطبيقات (API) عن حزم ميزات "init" الشائعة، عن طريق الوصول إليها من الخادم المنشور (راجع الميزات: initFirebase وinitGooglePlaces).
تمت ترقية مكتبة Material-UI إلى الإصدار V4، مع استبدال جميع العناصر ذات الترتيب الأعلى المتبقية بخطافات React !
تمت الترقية إلى React V16.8.6.
حدد مجموعة من الخطافات المخصصة القابلة لإعادة الاستخدام، والتي تحافظ على نقاط توقف الاستجابة (استنادًا إلى استعلامات الوسائط المتسقة) ... راجع: src/util/responsiveBreakpoints.js
محتوى GitHub • إصدار GitHub • الفرق
اِصطِلاحِيّ:
تُستخدم الآن خطافات React بدلاً من المكونات ذات الترتيب العالي (HoC)... اقرأ عنها هنا.
تعمل ميزة baseUI الآن على فرز عناصر القائمة المحددة حسب المفتاح ، مما يوفر تحكمًا كاملاً في الترتيب الذي تظهر به، بغض النظر عن ترتيب توسيع الميزات. يتضمن ذلك عقود الاستخدام من أجل:
محتوى GitHub • إصدار GitHub
عام:
