어떻게 동물과 삼나무가 있는 작업판을 만듭니까?js

머리말

홍삼js & 전체 창고

Redwood는 자신의 의견을 고집하는 전체 창고의 서버가 없는 웹 응용 프로그램 프레임워크로 개발자가 Jamstack 응용 프로그램을 쉽게 구축하고 배치할 수 있도록 한다.
레드우드의 주요 이념 중 하나는 표준의 힘이다. 따라서 어떤 기술을 사용해서 코드를 파일로 구성하고 명명약정을 할지 결정한다.

동물군

Fauna는 기능이 강하고 기능이 완비된 서버 없는 데이터베이스다.웹 원생GraphQL 인터페이스를 가지고 사용자 정의 업무 논리와 일치하는 데이터를 지원하며 데이터베이스 조작의 영향을 전혀 받지 않습니다. 왜냐하면 이것은 완전히 관리할 수 있기 때문입니다.
이 프로그램의 체계 구조에서 사용Fauna을 통해 우리는 코드를 간소화하고 원가를 낮추며 더욱 빨리 발표할 수 있다.

응용 프로그램.

이 강좌에서 우리는 간단한 작업판을 개발할 것이다.

시작하자.

우리는 사선yarn을 사용하여 우리 응용 프로그램의 기본 구조를 만들 것이다.

yarn create redwood-app ./job-board

몇 개의 디렉터리와 파일을 포함하는 새 디렉터리 '작업판' 을 만들 것입니다.그 목록으로 바꿔.

홍목 파일 구조

생성된 파일과 디렉토리를 살펴보겠습니다(프로파일은 일시적으로 제외됨).
웹 폴더에 있습니다.

api 폴더에 있습니다.

위의 구조에서 레드우드가 어떤 기술을 사용할지, 코드를 파일로 어떻게 구성할지, 그리고 이름을 어떻게 명명할지 명확하게 알 수 있다.
이미 우리를 위해 만들어진 모든 것을 보면 좀 당황스러울 수도 있다.우선 주목할 점은 다음과 같은 두 개의 디렉토리로 나뉘어 있는 레드 나무 애플리케이션입니다.

응용 프로그램 전단의 웹 디렉터리입니다.

백엔드api

동물군을 만들다.

동물 계정 만들기
응용 프로그램의 모든 데이터를 저장하기 위해서, 우리는 먼저 데이터베이스를 만들어야 한다.다행히도, 이것은 명령이나 코드일 뿐이며, 아래와 같다.계속하기 전에 Fanous 계정을 만드는 것을 잊지 마세요!
참고:
Fauna는 당신의 앱을 테스트할 수 있을 뿐만 아니라 작은 취미 앱을 구축할 수 있는 아낌없는 무료 층을 제공합니다.

동물의 껍데기

Fauna의 API에는 많은 인터페이스/클라이언트가 있는데 예를 들어 JS, GO, 자바 등 드라이버, 클라우드 컨트롤러, 로컬과 클라우드 셸, 심지어 VS 코드 확장도 있다!본문에서, 우리는 현지의fauna Shell에서 시작하여, 다른 인터페이스와 거의 100% 교환할 수 있다.

npm install -g fauna-shell

npm을 사용하여 Fanua Shell을 설치한 후 Fanua 자격 증명을 사용하여 로그인하십시오.

$ fauna cloud-login

Email: [email protected]
Password: **********

데이터베이스 만들기

이제 우리는 데이터베이스를 만들 수 있다.
데이터베이스를 만들려면 데이터베이스 만들기 명령을 입력하고 데이터베이스 이름을 입력합니다.

fauna create-database job-board

새 데이터베이스로faunashell을 시작하려면faunashell 명령을 입력하고 데이터베이스 이름을 입력하십시오.

fauna shell job-board

동물군에 대한 도표.

Fauna의 많은 중요한 기능 중 하나는 GraphQL에 대한 일류 지원이다.
Fauna에서 GraphQL을 사용하는 가장 큰 장점은 패턴을 정의하고 백엔드에서 마력을 발휘하여 실체, 집합과 관계를 만들 수 있다는 것이다.모드만 제공하면 됩니다.

편찬 모드.

우리는 응용 프로그램에서 다음과 같은 모델을 사용할 것이다.
디렉토리에 파일을 만들고 이름을 job-board-schema.gql로 지정합니다.

type Listing {
 title: String!,
 description: String!,
 location: String!
 company: String!
}

type Query{
 listings: [Listing]
}

구조를 가져오는 중입니다.

Fauna의 데이터베이스 페이지에서 왼쪽 열에 있는 GraphQL 탭으로 이동합니다.위와 유사한 페이지를 볼 수 있습니다.
'가져오기 모드' 를 누르고 프로그램 디렉터리에서 예시 모드를 선택하십시오.
이렇게 하면 필요한 컬렉션, FQL 쿼리를 자동으로 작성하여 데이터와 쿼리 및 변종 기능에 필요한 인덱스를 가져오고 작성합니다.

테스트 모드(Graphiql) 및 질의를 작성합니다.

현재 GraphQL 모드 정의를 성공적으로 가져왔습니다. 현재 다음 변종을 실행하여GraphQL API가 작동하는지 테스트하고 초기 데이터 피드를 데이터베이스에 삽입할 수 있습니다.

mutation {
  createListing(data:{
    title: "Python Developer",
    description: "Experience Python developer with experience in Flask and FaunaDB",
    location: "Kisumu",
    company: "Dala Systems"
  }),
  {
    _id
    title
  }
}

그리고 나서

mutation {
  createListing(data:{
    title: "Node.js Developer",
    description: "Outstanding Node.js with 3+ Years experience in developing serverless apps",
    location: "Cape Town",
    company: "Sugar Systems"
  }),
  {
    _id
    title
  }

만약 상술한 돌연변이가 성공적으로 실행된다면, 그들은 새로 만든 작업 목록의 _id 과 title 을 되돌려야 한다.
또한 다음 조회를 실행해서 이 점을 확인할 수 있습니다. 이 조회는 집합에 발표된 모든 사용 가능한 작업을 열거해야 합니다.

query {
  listings {
    data{
      title
      description
      company
    }
  }
}

4. 홍삼을 세워 동물군과 합작한다.

Thread를 사용하여 프로젝트를 생성할 때 기본 데이터베이스는 PrismaClient의 인스턴스입니다.Prisma는 현재 Fauna를 지원하지 않기 때문에, 위에서 만든 graphql API를 조회하기 위해 graphql 요청을 사용할 것입니다.

yarn add graphql-request graphql

api/src/lib/db.js에 다음 코드를 추가합니다.

import { GraphQLClient } from 'graphql-request'

export const request = async (query = {}) => {
  const endpoint = 'https://graphql.fauna.com/graphql'

  const graphQLClient = new GraphQLClient(endpoint, {
    headers: {
      authorization: 'Bearer <FAUNADB_KEY>'
    },
  })
  try {
    return await graphQLClient.request(query)
  } catch (error) {
    console.log(error)
    return error
  }}

GraphQL 포트를 통해Fauna 데이터베이스에 접근하려면Fauna가 제공하는 데이터베이스 키를 포함하는 요청 헤더를 설정해야 합니다.

데이터베이스 키를 가져옵니다.

데이터베이스의 Fanous Shell로 이동하여 다음 명령을 사용하여 키를 만듭니다.

CreateKey({
      name: "redwood-app",
      role: "server"
   })

# Example result.
# NOTE: Make sure you copy and store the secret!
# {
#   ref: Ref(Keys(), "280185139463529993"),
#     ts: 1603464278974000,
#     role: 'server',
#     secret: 'fn…………………………………………………..',
#     hashed_secret: ...
# }

그 다음에 api/src/graphql/listings.sdl.js 파일을 만들고 다음과 같은 내용을 추가해야 한다.

import gql from 'graphql-tag'

export const schema = gql`

type Listing {
  title: String!,
  description: String!,
  location: String!,
  company: String!
}

type ListingsPage {
  data: [Listing]
}

type Query{
  listings: ListingsPage
  jobs: [Listing]
}
`

홍삼js 서비스

api/src/서비스 디렉터리에 목록 디렉터리를 만들 것입니다.listings라는 파일을 포함합니다.js.서비스는 레드우드가 모든 업무 논리를 집중하는 곳이다.GraphQLAPI나 백엔드 코드의 다른 곳에서도 사용할 수 있습니다.listings 함수는Fauna GraphQL 단점을 조회하고POST 데이터를 되돌려줍니다.Listings Cell에서 이 데이터를 사용할 수 있도록 합니다.

// api/src/services/listings/listings.js

import { request } from 'src/lib/db'
import { gql } from 'graphql-request'

export const listings = async () => {
 const query = gql`
 {
   listings{
     data {
       title
       description
       location
       company
     }
 }
 }
 `

 const data = await request(query, 'https://graphql.fauna.com/graphql')
 return data['listings']
}

5. 신청서를 쓴다.

현재 우리의 응용 프로그램이 설정되어 있으니, 우리는 페이지를 만들기 시작할 수 있다.generate 페이지 명령을 사용하여 이 페이지를 저장하기 위해 홈 페이지와 폴더를 만들 것입니다.페이지를 생성하는 명령은 "generate"입니다. 비록 우리가 g를 사용하여 입력을 저장할 수 있지만.

yarn rw g page home /

이 페이지에서, 우리는 우리 동물군 수집에서 발표된 모든 사용 가능한 작업 목록을 열거할 것이다.

홍삼js세포.

홍삼에 있어요.js에서, 단원격은 더욱 간단하고 성명적인 데이터 획득 방법을 제공합니다.GraphQL 조회, 불러오기, 비우기, 오류, 성공 상태를 포함하고 있으며, 모든 상태는 칸이 있는 상태에 따라 자동으로 나타납니다.
웹/src/components에 ListingsCell라는 폴더를 만들고 이 폴더에 ListingsCell.js라는 파일을 만듭니다.
이 파일에 다음 코드를 추가합니다.

// web/src/components/ListingsCell/ListingsCell.js

export const QUERY = gql`
 query LISTINGS {
   listings {
     data {
       title
       description
       location
       company
     }
   }
 }
`

export const Loading = () => <div>Loading Job Listings...</div>
export const Empty = () => <div>No Job Listings yet!</div>
export const Failure = ({ error }) => <div>Error: {error.message}</div>

export const Success = ({ listings }) => {
 const {data} = listings
 return (
   <div style={{maxWidth:"50%", margin:"auto"}}>
     {data.map(listing => (
       <>
       <div style={{border: "black 1pt solid", padding: ".7em"}}>
       <h4>{listing.title}</h4>
       <p>{listing.description}</p>
       <p>Organization: {listing.company} <br/>
       Location: {listing.location}</p>
       </div>
       </>
     ))}
   </div>
 )
}

현재 웹/src/pages 폴더에 HomePage라는 HomePage 폴더가 있습니다.js.
이 파일에 다음 코드를 추가합니다.

import ListingsCell from 'src/components/ListingsCell'

const HomePage = () => {
 return (
   <>
     <h1>Fauna Redwood.js Job Board</h1>
     <ListingsCell />
   </>
 )
}

export default HomePage

6. 응용 프로그램을 테스트합니다.

프로그램이 정상적으로 작동하는지 미리 보기 위해서 터미널에서 다음 명령을 실행해야 합니다.

yarn rw dev

그리고 방문http://localhost:8910/하면 다음과 같은 미리보기를 볼 수 있습니다.

7. Netlify 에 구축

Redwood의 창설은 Jamstack에서 전체 웹 응용 프로그램을 구축하고 배치하기 쉽도록 하기 위해서입니다.기왕 우리가 홍목 응용 프로그램을 구축하는 과정을 이해한 이상 하나를 배치하는 것이 어떻습니까?
응용 프로그램의 배치 준비를 위해 우리는 홍목 생성기를 이용할 수 있다.이를 위해 다음 코드를 실행하십시오.

yarn rw g deploy netlify

그러면/netlify 에 파일이 생성됩니다.Netlify에서 Redwood 응용 프로그램을 구축하는 데 필요한 명령과 파일 경로가 포함되어 있습니다.
다음은 Github에 응용 프로그램이 제출되고 전송되는지 확인해야 합니다.

git init
git add .
git commit -m 'First commit'
git remote add origin ...
git push -u origin master

그 다음에 Netlify를 Googlegit repo에 직접 연결합니다. 간단한 메일링 전송은 Google 프로그램 전체를 재배치할 것입니다.
Netlify 계정에서 "Git에서 새 사이트 만들기"옵션을 선택하고, 알림에 따라 환매 프로토콜을 연결하면 자동으로 배치됩니다.
이 때, 게시물이 불러오지 않은 것을 발견할 수 있습니다.Netlify 환경에 동물 키가 없기 때문입니다.이 문제를 해결하려면 응용 프로그램 페이지로 이동합니다.

Build &deploy 탭에서 Environment(환경) 섹션으로 스크롤하고 Fanua 키를 사용하여 Fanua 데이터베이스 키를 추가하고 저장합니다.
현재 프로그램이 실행 중입니다.응용 프로그램 URL에 액세스하면 비슷한 페이지가 표시됩니다.

불러오면 작업 목록을 볼 수 있습니다.

결론

본 강좌에서 우리는 홍삼과 동물군으로 완전한 창고 응용 프로그램을 개발하는 것이 얼마나 간단한지 알 수 있다. 이것은 확실히 강력한 데이터베이스이다.웹 네이티브 GraphQL 인터페이스가 있어 사용자 정의 업무 논리와 서버 없는 생태계와의 통합을 지원한다.이것은 개발자로 하여금 코드를 간소화하고 더욱 빨리 발표할 수 있게 한다.
Netlify와 결합하여 우리는 서버가 없고 완전히 관리되는 전체 창고 응용 프로그램을 가질 수 있다.이러한 아키텍처의 이점은 서버와 데이터베이스의 DevOps 대신 애플리케이션과 사용자가 고유한 기능을 경험할 수 있도록 하는 데 집중할 수 있다는 점입니다.
나는 네가 나처럼 《동물군》이 매우 훌륭하다고 생각하고 이 문장을 좋아하길 바란다.만약 당신이 좋아한다면, 트위터에서 나를 주목하는 것을 환영합니다!
보너스:
이 강좌를 위한 모든 코드는 아래Github Repo에서 찾을 수 있습니다.