GRAND 스택을 사용한 빠른 프로토타이핑: 파트 1

– 제품 소개, 기술 사양 및 그래프 모델.

- Apollo Graphql 서버 및 neo4j-graphql-js

- Apollo 클라이언트 및 React

이 시리즈에서는 웹에서 가장 뛰어난 최신 기능the GRAND stack을 사용하여 간단한 웹 애플리케이션을 구축하는 방법을 살펴보겠습니다. 그것은 무엇을 의미합니까? Graphql, React, Apollo 및 Neo4j 데이터베이스. 다음 프로젝트에 이 스택을 사용해야 하는 이유는 무엇입니까? 주로 훨씬 짧은 개발 주기의 경우(Michael Siebel이 MVP 구축에 대해 설명함) 제품 시장 적합성을 찾을 수 있는 더 나은 기회입니다.

제품

우리가 개발할 애플리케이션은 피어 매칭 애플리케이션입니다. 요컨대 – Tinder for indie hackers . 이 애플리케이션은 대중 문화 장르에 대한 사용자의 선호도, 기술 수준 및 협업 목표를 기반으로 피어 매칭 기회를 제공합니다. 모의 코딩 인터뷰 세션을 하고 싶다면 공동 창립자, 학습 친구, 친구를 찾거나 로그인하고 프로필을 설정할 누군가와 Coursera 과정 중 하나를 공부하십시오.



그런 다음 비슷한 선호도를 가지고 있어 자신에게 더 잘 맞는 사람들을 볼 수 있습니다.



당신이 그들을 좋아하고 그들이 당신을 좋아한다면 당신이 협업 루틴을 설정할 수 있는 매치가 생성될 것입니다:



ux 흐름을 볼 수 있습니다.

기술 사양 및 그래프 모델

무언가를 구축하기 전에 항상 기술 사양을 갖추는 것이 좋습니다. Here은 이 제품의 예제입니다. 모델링 부분의 경우 neo4j 커뮤니티에 허용되는 흐름은 http://www.apcjones.com/arrows/#의 화살표 도구를 사용하고 있습니다. 지정한 기술 사양에 따라 데이터를 모델링하는 데 유용한 리소스입니다. 다음은 이 제품에 대한 것입니다.



그래프의 장점은 생각하기에 자연스럽고 비즈니스 요구 사항을 모델링하기 쉽다는 것입니다. 보시다시피 그래프에서 응용 프로그램 흐름이 분명합니다.

사용자가 서로 좋아하거나 싫어할 수 있음

트랙 및 댓글 만들기

목표, 기술 및 대중 문화 장르에 대한 선호도가 있음

Neo4j는 그래프와 유사한 자연스러운 ASCII-Art 구문으로 쿼리를 지정할 수 있는 직관적인 암호 쿼리 언어와 함께 제공됩니다. 다음은 제품의 기본 화면에 대한 예입니다. 사용자에게 가장 적합한 공동 작업 후보는 다음과 같습니다.

MATCH (u:User{userId:"1"})-[:PREFERS]->()<-[:PREFERS]-(candidate:User)
WHERE NOT EXISTS((u)-[:LIKES|:DISLIKES]->(candidate))
WITH candidate, COUNT(*) AS score ORDER BY score DESC
RETURN {userId:candidate.userId, score:score}

한 줄씩 갑시다. 첫 번째 줄: 후보 사용자와 같은 것을 선호하는 id로 사용자를 찾습니다. [:PREFERS]->()<-[:PREFERS]로 둘러싸인 중괄호는 장르, 목표 또는 기술을 나타낼 수 있습니다. 두 번째 줄: 사용자가 이미 좋아하거나 싫어하는 후보를 제외합니다. 세 번째 줄: 선호 경로의 수를 세고 이 수만큼 후보를 정렬합니다. 네 번째 줄: 이러한 후보를 개수로 점수로 반환합니다. 이 간단한 쿼리는 우리 제품의 주요 요구 사항 중 하나인 기술 사양의 잠재적 일치 요구 사항을 즉시 충족합니다!

데이터 저장소로 neo4j를 사용할 때 좋은 점은 요구 사항을 충족하기 위해 SQL 저장소를 모델링하는 수고 없이 비즈니스 요구 사항을 바로 모델링할 수 있는 풍부함입니다. 또한 neo4j-graphql-js 통합은 graphql 서버 설정을 neo4j 쿼리에 위임하여 개발자 경험을 더욱 향상시킵니다. 에서 자세히 살펴보겠습니다.