eatery nod w
Simplified Mainline
eatery-nod-w 는 Date Night Restaurant Selector 입니다... 즐겨찾기 풀에서 "데이트 밤" 레스토랑을 무작위로 선택하는 웹앱입니다 . 즉, 식당 에 고개를 끄덕이게 합니다( 괴짜들은 어떻게든 재미를 느껴야 합니다 :-)
제 아내와 저는 (다른 커플과 함께) 꾸준하게 "데이트 밤"을 보내고 우리가 가장 좋아하는 레스토랑 중 어느 곳을 자주 방문할지 항상 결정하지 못하기 때문에 eatery-nod-w 가 물레를 제공합니다!
eatery-nod-w는 eatery-nod 반응 네이티브 엑스포 모바일 앱 의 웹 기반 PWA 변환입니다.
eatery-nod의 메인 화면은 Eatery Pool 입니다( 식당 기능을 참조하세요 ).
이는 선택할 수 있는 레스토랑의 영구 풀을 시각화합니다(목록은 선택적으로 필터링될 수 있음).
레스토랑을 직접 선택하거나 "회전"하여 무작위로 선택할 수 있습니다.
"상세" 보기를 통해 시설에 직접 연락할 수 있습니다(전화, 웹사이트 방문, 주소 탐색).
귀하의 식당 풀은 Discovery를 통해 유지됩니다( 검색 기능을 참조하십시오 ).
풀의 세부 사항을 직접 관리할 필요가 없습니다. 오히려 검색 기능을 사용하여 간단히 레스토랑을 검색할 수 있습니다. 이는 Google 검색을 실행할 때 사용되는 것과 동일한 소스입니다(Google 지역 정보 기반).
검색 보기 내에서 항목 옆에 있는 확인 표시를 전환하면 됩니다. 빨간색 항목은 풀에 있고 회색 항목은 없습니다.
승인은 인증 기능을 통해 제공되며, 애플리케이션 화면을 승격시키기 전에 검증된 이메일/비밀번호가 필요합니다.
eatery-nod-w는 웹 페이지가 다양한 장치와 창 또는 화면 크기(데스크톱, 휴대폰, 태블릿 등)에서 잘 렌더링되는 반응형 디자인을 사용합니다.
예를 들어, 다음은 휴대폰 에 표시된 식당 수영장입니다.
다음은 데스크톱 브라우저 의 동일한 화면 매니페스트입니다.
자세한 내용은 baseUI 반응형 디자인을 참조하세요.
배포에서 또는 소스에서라는 두 가지 방법 중 하나로 eatery-nod-w를 실행할 수 있습니다.
프로덕션 배포 사이트인 https://eatery-nod-w.js.org/를 통해 즉시 eatery-nod-w를 사용해 볼 수 있습니다.
현재 무료 Google Firebase 계정의 리소스가 제한되어 로그인 프로세스가 계정 생성을 "잠금" 했습니다. 그러나 환경을 자체 "모의" 메모리 내 데이터 소스(Firebase를 활용하지 않음)로 변환하는 "게스트 ID"를 사용할 수 있습니다.
guestNO@ 로 시작하는 이메일 ID(예: [email protected] )와 비밀번호 guestNO 사용하세요.
"게스트 ID"를 사용할 때 다음 사항을 기억하십시오.
변경이 가능한 로컬 컴퓨터에서 eatery-nod-w를 실행하려면 다음 지침을 따르세요.
git repo를 로컬 머신에 복제 (또는 압축)합니다 .
프로젝트를 초기화합니다.
$ cd {project-root}
$ npm install # install project dependencies
서비스를 설정하세요. 두 가지 선택이 있습니다 .
모의 서비스 사용
프로젝트를 진행하는 가장 쉬운 방법은 모의 서비스를 사용하는 것입니다. 이는 백엔드 서비스 자격 증명이나 DB 구성 (풀 항목 유지) 에 대한 설정이 없음을 의미합니다.
모의 서비스를 활성화하려면 src/featureFlags.js 에서 다음과 같이 설정하면 됩니다.
useWIFI : false , // use mock service
mockGPS : { lat : 30.010479 , lng : - 90.119414 } , // simulate New Orleans GPS location실제 서비스 사용
eatery-nod는 두 가지 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 반응 네이티브 엑스포 모바일 앱 의 웹 기반 PWA 변환입니다.
eatery-nod-w 용 도구는 Create React App을 통해 유지됩니다.
eatery-nod-w 의 구현은 기능 기반 솔루션을 용이하게 하는 feature-u 라는 유틸리티를 통해 기능을 사용하여 기능을 진정한 플러그 앤 플레이로 만듭니다!
기능 기반 개발은 문제 공간 (또는 요구 사항) 과 구현 (코드) 사이에 직접적인 상관 관계가 있기 때문에 코드 이해력을 크게 향상시킵니다!
이 접근 방식은 확장성이 뛰어나고 모듈 (또는 기능) 이 더 작고 집중되어 있기 때문에 코드를 더 쉽게 유지 관리할 수 있습니다. 기능이 플러그 앤 플레이 인 경우 애플리케이션은 본질적으로 여러 개의 미니 앱 (말하자면) 으로 분할됩니다.
다음은 애플리케이션을 구성하는 eatery-nod-w 기능 의 전체 목록과 런타임 스택에서 프레임워크를 자동 구성하는 플러그인 측면 입니다.
feature-u 에 대한 자세한 내용은 여기에서 확인할 수 있습니다.
이 프로젝트는 React UI Framework (Facebook에서 관리) 를 사용하고 Hooks라는 최신 기능을 사용합니다.
후크를 사용하면 기능적 구성 요소의 React 상태 및 수명 주기 측면 에 "연결" 할 수 있습니다. HoC(Higher Order Components) 대신 UI 구현을 크게 단순화합니다.
다음은 이 프로젝트의 후크 소스 전후 비교입니다.
package.json 에 모든 종속성이 무엇인지 궁금하신 경우 다음 요약을 참조하세요.
eatery-nod 에서 사용하는 런타임 스택은 다음과 같습니다.
React: UI 프레임워크 "react", "react-dom"
Material-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 감속기 구성 유틸리티 "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 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 | 단순화된 메인라인 | 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/ 디렉토리에 Aspect Plugin 축적/구성을 추출하여 메인라인( app.js )을 단순화합니다 (기능 축적 방식과 일치) .GitHub 콘텐츠 • GitHub 릴리스 • 차이점
인위적인:
bootstrap 기능은 feature-u 의 새로운 v2.1.0 Feature.appInit() 애플리케이션 수명 주기 후크 (비동기 초기화 차단 지원) 로 대체되었습니다.
GPS 위치 모의와 관련하여 featureFlags 에 더 많은 인텔리전스를 추가했습니다.
이제 콘솔 로그에 모의 설정(GPS 위치 및 서비스 모두)이 반영됩니다.
async/await(명시적 약속 제거)를 통해 비동기 프로세스가 단순화되었습니다.
GitHub 콘텐츠 • GitHub 릴리스 • 차이점
일반적인:
음식점 목록 화면이 다음과 같이 변경되었습니다.
이제 반응형 이며 충분한 장치 공간을 사용할 수 있을 때 원래 휴대폰 목록을 보다 자세한 표로 조정합니다 (반응형 디자인 참조) .
풀 항목이 거리별로 정렬되는 경우:
마일리지 구분선이 이제 시각적으로 더욱 뚜렷해졌습니다 (색상 사용).
식당 이름은 보조 정렬 필드로 사용됩니다(동일한 거리 내).
사용자가 선택할 수 있는 반응 경계 는 사용자 메뉴를 통해 승격되어 추가 화면 콘텐츠가 나타날 수 있는 위치 (화면 너비 기준) 를 정의합니다. 자세한 내용은 baseUI 반응형 디자인을 참조하세요.
이제 식당 세부정보 화면에 거리(마일리지)가 표시됩니다.
문서:
eatery-nod-w를 실행하고/하거나 로컬 환경에서 프로젝트를 설정하는 방법을 설명하는 전체 앱 실행 섹션을 추가했습니다.
이제 모든 화면 인쇄에는 이 웹 앱이 반영됩니다 (eatery-nod 반응 네이티브 엑스포 앱에서 개선됨) .
인위적인:
API 자격 증명은 배포된 서버에서 액세스하여 일반적인 "init" 기능 패키지에서 분리되었습니다(기능: initFirebase 및 initGooglePlaces 참조).
Material-UI 라이브러리가 V4로 업그레이드되어 나머지 모든 HOC가 React Hooks 로 대체되었습니다!
React V16.8.6으로 업그레이드되었습니다.
일관된 미디어 쿼리를 기반으로 반응형 중단점을 유지하는 재사용 가능한 사용자 정의 후크 세트를 정의합니다. src/util/responsiveBreakpoints.js 참조하세요.
GitHub 콘텐츠 • GitHub 릴리스 • 차이점
인위적인:
React Hooks는 이제 HoC(Higher Order Components) 대신 사용됩니다. 여기에서 이에 대해 읽어보세요.
이제 baseUI 기능은 선택한 메뉴 항목을 키별로 정렬하여 기능 확장 순서에 관계없이 표시되는 순서를 완벽하게 제어할 수 있습니다. 여기에는 다음에 대한 사용 계약이 포함됩니다.
GitHub 콘텐츠 • GitHub 릴리스
일반적인:
