eatery nod w
Simplified Mainline
eatery-nod-w — это инструмент выбора ресторана для свиданий ... веб-приложение , которое случайным образом выбирает ресторан для свидания из списка избранных . Другими словами, это отсылка к забегаловке ( гикам надо как-то развлечься :-)
У нас с женой постоянное «свидание» (с другой парой), и мы всегда не решаемся, какой из наших любимых ресторанов часто посещать, поэтому закусочная-кивок-w обеспечивает прялку!
eatery-nod-w — это веб-версия мобильного приложения Eatery-Nod React-native Expo, основанная на PWA.
Главный экран Eatery-Nod — «Eatery Pool» ( см. раздел «Закусочные» ).
Это визуализирует ваш постоянный пул ресторанов на выбор (при желании список можно отфильтровать).
Вы можете выбрать ресторан напрямую или «покрутить» для случайного выбора.
«Подробное» представление обеспечивает прямую связь с заведением (позвоните им, посетите их веб-сайт или перейдите по их адресу).
Ваш пул ресторанов поддерживается через Discovery ( см. функцию обнаружения ).
Вам не нужно вручную поддерживать информацию о вашем пуле. Вместо этого вы просто ищете рестораны, используя функцию обнаружения . Это тот же источник, который используется при выполнении поиска Google (на основе Google Адресов).
В представлении обнаружения вы просто переключаете флажок рядом с записью. Красные записи находятся в вашем пуле, серые — нет.
Авторизация осуществляется через функцию аутентификации, требующую подтверждения адреса электронной почты/пароля перед продвижением каких-либо экранов приложения.
eatery-nod-w использует адаптивный дизайн , благодаря которому веб-страницы хорошо отображаются на различных устройствах и размерах окон или экранов (настольные компьютеры, мобильные телефоны, планшеты и т. д.).
В качестве примера, вот бассейн закусочной, показанный на мобильном телефоне :
А вот тот же экранный манифест в настольном браузере :
Дополнительные сведения см. в разделе Адаптивный дизайн baseUI.
Вы можете запустить eatery-nod-w одним из двух способов: из развертывания или из исходного кода:
Вы можете сразу поиграть с eatery-nod-w через сайт производственного развертывания: https://eatery-nod-w.js.org/
В настоящее время процесс входа в систему «заблокировал» создание учетной записи из-за ограниченности ресурсов бесплатной учетной записи Google Firebase. Однако вы можете использовать «Идентификатор гостя» , который превратит среду в ваш собственный «смещенный» источник данных в памяти (который не использует Firebase).
Просто используйте идентификатор электронной почты, который начинается с guestNO@ (например: [email protected] ), с паролем guestNO .
При использовании «Идентификатора гостя» помните следующее:
Если вы хотите запустить eatery-nod-w со своего локального компьютера (где вы можете вносить изменения) , следуйте этим инструкциям:
Клонируйте (или заархивируйте) репозиторий git на свой локальный компьютер.
Инициализируйте проект:
$ 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 — это веб-версия мобильного приложения Eatery-Nod React-native Expo, основанная на PWA.
Инструменты для eatery-nod-w поддерживаются через приложение Create React.
Реализация eatery-nod-w использует функции посредством утилиты под названием Feature-u , которая упрощает решения на основе функций , делая его функции по-настоящему готовыми к использованию !
Разработка на основе функций значительно улучшает понимание кода, поскольку существует прямая корреляция между проблемным пространством (или требованиями) и реализацией (кодом) !
Этот подход лучше масштабируется, что упрощает поддержку кода, поскольку модули (или функции) меньше по размеру и более целенаправленны. Когда функции реализованы по принципу «подключи и работай» , приложение по сути разбивается на несколько мини-приложений (так сказать) .
Вот полный список функций eatery-nod-w , составляющих приложение, а также аспектов плагинов , которые автоматически настраивают платформы в его стеке времени выполнения.
Дополнительную информацию о функции-u можно найти здесь:
Этот проект использует React UI Framework (поддерживаемый Facebook) и его новейшую и самую интересную функцию под названием Hooks .
Хуки позволяют «подцепиться» к состоянию и аспектам жизненного цикла React функциональных компонентов . Они значительно упрощают реализацию пользовательского интерфейса по сравнению с альтернативой компонентам высшего порядка (HoC) .
Вот сравнение исходных кодов хуков до и после для этого проекта.
Если вам интересно, что это за зависимости в package.json , вот краткое изложение:
Стек времени выполнения, используемый eatery-nod :
React: фреймворк пользовательского интерфейса "react", "react-dom"
Material-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: создатель и организация сокращенного действия "action-u"
astx-redux-util: утилиты композиции redux-редуктора "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"
да: валидатор схемы объекта 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 | Упрощенная основная линия | 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 была заменена новой функцией Feature.appInit() -u v2.1.0 Application Life Cycle Hook (поддерживающей блокировку асинхронной инициализации) .
В featureFlags добавлено больше информации относительно имитации местоположения GPS.
В журнале консоли теперь отображаются любые настройки имитации (как местоположение GPS, так и сервисы).
Упрощены асинхронные процессы через async/await (удаление явных обещаний).
Содержимое GitHub • Релиз GitHub • Разница
Общий:
Экран списка закусочных изменился следующим образом:
Теперь он адаптивный : при наличии достаточного количества свободного места на устройстве исходный список мобильных телефонов преобразуется в более подробную таблицу (см. «Адаптивный дизайн») .
Когда записи пула сортируются по расстоянию:
разделитель пробега теперь визуально более различим (с помощью цвета)
название закусочной используется как вторичное поле сортировки (в пределах того же расстояния)
Выбираемая пользователем адаптивная граница продвигается через меню пользователя, определяя, где может отображаться дополнительный контент экрана (в зависимости от ширины экрана) . Дополнительные сведения см. в разделе Адаптивный дизайн baseUI.
Расстояние (пробег) теперь отображается на экране сведений о ресторане.
Документы:
Добавлен полный раздел «Запуск приложения», в котором описывается, как запустить eatery-nod-w и/или настроить проект в локальной среде.
Все отпечатки экрана теперь отражают это веб-приложение (модернизированное из приложения «Eatery-nod React-Native Expo») .
Технические:
Учетные данные API были отделены от общих пакетов функций «init» путем доступа к ним с развернутого сервера (см. функции: initFirebase и initGooglePlaces).
Библиотека Material-UI была обновлена до V4, ВСЕ оставшиеся HOC заменены на React Hooks !
Обновлен до React V16.8.6.
Определите набор повторно используемых пользовательских перехватчиков, которые поддерживают адаптивные точки останова (на основе согласованных медиа-запросов)... см.: src/util/responsiveBreakpoints.js
Содержимое GitHub • Релиз GitHub • Разница
Технические:
Вместо компонентов высшего порядка (HoC) теперь используются React Hooks... читайте об этом здесь.
Функция baseUI теперь сортирует выбранные пункты меню по ключу , предоставляя полный контроль над порядком их появления, независимо от порядка расширения функций. Сюда входят договоры на использование для:
Содержимое GitHub • Выпуск GitHub
Общий:
