카우치베이스 개발팀은 그동안 나쁜 웹사이트 클럽 on 무료 코드 캠프 자료.
무료코드캠프는 대화형 학습 웹 플랫폼, 온라인 커뮤니티 포럼, 채팅방, 온라인 출판물 및 지역 단체로 구성된 비영리 단체로, 누구나 소프트웨어 개발에 접근할 수 있도록 하는 것을 목표로 합니다.
나쁜 웹사이트 클럽은 신규 학습자의 프로그래밍 여정을 돕는 온라인 커뮤니티입니다.
저희는 fCC 학습자들에게 보다 '실제' 상황에서 프로젝트에 어떤 일이 일어날 수 있는지 보여주기 위해 스트리밍을 해왔습니다. 반응형 웹 디자인 과정부터 시작하여 설문조사 양식과 같은 몇 가지 예제를 가져와서 완성한 후 프로덕션에 적용했습니다. 전체 시리즈는 YouTube, LinkedIn, Twitter 및 Twitch에서 스트리밍되며, 녹화본은 이 YouTube 재생 목록에서 확인할 수 있습니다: 새로운 카우치베이스 스트림: 7월 31일부터 시작됩니다!
저는 개인적으로 설문 조사 프로젝트. 이 블로그 게시물 시리즈에서는 GitHub에 코드를 게시하고, Netlify를 사용하여 온라인으로 설문조사를 배포하고, Couchbase Capella에 콘텐츠를 저장하는 모든 추가 단계를 보여드리겠습니다.
1단계 - HTML 양식 만들기
FreeCodeCamp 설문조사 예제에서 많은 영감을 얻어(복사, 붙여넣기, 다듬기) 다음과 같은 HTML 양식을 만들었습니다. 원래 양식보다 조금 더 간단합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html> <head> <링크 rel="스타일시트" href="./styles.css" /> </head> <body> <div 클래스="컨테이너"> <헤더 클래스="header"> <h1 id="title" 클래스="텍스트 중심">설문 조사 양식</h1> <p id="설명" 클래스="설명 텍스트 중앙"> 감사합니다 당신 에 대한 복용 의 시간 에 도움말 우리 개선 의 플랫폼 </p> </헤더> <양식 id="설문조사 양식"> <div 클래스="form-group"> <레이블 id="name-label" 에 대한="name">이름</레이블> <입력 유형="text" 이름="name" id="name" 클래스="form-control" 플레이스홀더="이름 입력" 필수 /> </div> <div 클래스="form-group"> <레이블 id="번호-라벨" 에 대한="숫자" >나이<span 클래스="clue">(선택 사항)</span></레이블 > <입력 유형="숫자" 이름="age" id="숫자" 분="10" 최대="99" 클래스="form-control" 플레이스홀더="나이" /> </div> <div 클래스="form-group"> <p> Would 당신 추천 이 awesome 설문 조사 에 a 친구 ? </p> <레이블 ><입력 이름="추천" 값="추천" 유형="체크박스" 클래스="입력-체크박스" />yes</레이블 > </div> <div 클래스="form-group"> <버튼 유형="제출" id="제출" 클래스="제출 버튼"> 제출하기 </버튼> </div> </양식> </div> </body> </html> |
그리고 styles.css 파일은 원본과 완전히 동일합니다. 여기에서 열기 을 클릭하여 설문조사 양식이 실제로 작동하는지 확인하세요. 설문 조사 양식을 열 수 있습니다. 브라우저에서 해당 페이지를 마우스 오른쪽 버튼으로 클릭하면 다음과 같은 내용이 표시됩니다. 페이지 소스 보기 또는 검사. 이를 클릭하면 페이지의 코드가 표시되는 패널이 열립니다. 이 보기에 있는 동안 다음과 같은 링크를 클릭할 수 있습니다. style.css 을 클릭하거나 스타일 탭을 클릭하면 특정 요소에 적용된 CSS도 볼 수 있습니다.
이 코드 샘플을 테스트하려면 먼저 터미널을 사용하여 이 리포지토리를 로컬 컴퓨터에 복제하거나 zip 파일로 다운로드할 수 있습니다.)
브라우저로 이동하여 상단 표시줄에서 다음을 선택합니다. 파일, 열기를 선택하는 것보다 index.html 파일을 다운로드한 폴더(또는 zip 폴더)에서 실행합니다. 브라우저 URL을 살펴보면 로컬 파일의 경로가 표시됩니다. 그리고 제출을 클릭해도 아무 작업도 수행하지 않는 다음과 같은 내용이 표시됩니다.
그렇다면 문제는 어떻게 인터넷에 배포하고 어떤 작업을 수행하게 할 것인가 하는 것입니다. 클릭 후 실행할 백엔드 코드가 필요합니다. 그리고 그 코드가 양식 콘텐츠를 데이터베이스에 저장하도록 만들어야 합니다.
2단계 - Git, Github, Netlify
이 양식을 인터넷에 실시간으로 배포하는 것부터 시작해 보겠습니다. 이를 위해 Netlify를 사용하겠습니다. 먼저 가장 먼저 해야 할 일은 Netlify CLI 가 설치되어 있고 로그인되어 있는지 확인합니다. 설치되어 있지 않은 경우 가장 빠른 방법은 터미널에 직접 입력하는 것입니다:
|
1 |
npm 설치 netlify-cli -g |
자세한 내용은 Netlify 시작하기 문서.
입력 넷라이파이 버전 현재 내 터미널에서 NETLIFY-CLI/15.6.0 WIN32-X64 NODE-V18.5.0. 따라서 설치 및 준비가 완료된 것으로 알고 있습니다.
그런 다음 다음을 입력합니다. netlify 로그인 를 클릭합니다. Netflify 로그인 양식으로 이동합니다.
이제 모든 것이 배포 단계로 이동할 준비가 되었습니다. 하지만 로컬에서 테스트해야 합니다. 대부분의 개발자가 그렇게 하거든요. 이를 위해 다음과 같이 입력합니다. 넷라이파이 개발 를 클릭합니다.
터미널에서 다음과 같은 내용이 출력되고 브라우저에서 양식이 열립니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
◈ Netlify 개발 ◈ ◈ 무시됨 일반 컨텍스트 환경 var: LANG (정의 in 프로세스) ◈ 아니요 앱 서버 감지됨. 사용 simple 정적 서버 ◈ 불가능 에 결정 public 폴더 에 serve 파일 에서. 사용 현재 작업 디렉토리 ◈ 설정 a netlify.toml 파일 와 함께 a [dev] 섹션 에 지정 당신의 dev 서버 설정. ◈ 참조 문서 에서: https://cli.netlify.com/netlify-dev#project-detection ◈ 실행 중 정적 서버 에서 "프리코드캠프-설문조사" ◈ 설정 up local 개발 서버 ◈ 정적 서버 듣기 에 3999 추가 local .netlify 폴더 에 .gitignore 파일... ┌─────────────────────────────────────────────────┐ │ │ │ ◈ 서버 지금 준비 on http://localhost:8888 │ │ │ └─────────────────────────────────────────────────┘ |
브라우저 URL 표시줄을 다시 살펴보면 달라진 것을 확인할 수 있습니다. 로컬 파일이 아닌 웹 사이트 주소처럼 보입니다. 축하합니다. 방금 첫 번째 로컬 서버를 실행하여 HTML 및 CSS 파일을 제공했습니다.에틀리파이 개발! 컴퓨터에서 웹사이트가 실행되고 있습니다. 이제 인터넷의 모든 사람이 소스 코드와 사이트 자체에 액세스할 수 있도록 만들어 보겠습니다.
GitHub(또는 GitLab, Heptapod, 기타 코드 소스 호스팅 솔루션 등 다양한 솔루션이 있습니다!)로 이동하여 새 리포지토리를 만듭니다. 방문 https://github.com/new 를 선택합니다. 이제 리포지토리 마법사 생성 단계에 들어왔습니다. 조직, 리포지토리 이름 및 설명만 설정한 후 리포지토리 만들기 버튼을 클릭합니다.
작업 폴더를 변환하는 데 필요한 모든 지침을 제공합니다. git 리포지토리를 열고 GitHub 프로젝트에 연결합니다. 제가 터미널에 입력한 내용은 다음과 같습니다(아래 내용을 복사하여 터미널에 붙여넣거나 아래 각 줄 뒤에 Enter 키를 눌러 실행할 수 있습니다). 참고로 6번째 줄을 프로젝트 리포지토리 URL로 변경해야 합니다:)
|
1 2 3 4 5 6 7 |
echo "# myproject" >> README.md git init git 추가 README.md git commit -m "첫 번째 커밋" git branch -M 메인 git 원격 추가 원산지 https://github.com/ldoguin/myproject.git git push -u 원산지 메인 |
이것이 결과 터미널 출력입니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
[C:\코드\카우치베이스\내 프로젝트] $ echo "# myproject" >> README.md [C:\코드\카우치베이스\내 프로젝트] $ ls 디렉토리: C:\코드\카우치베이스\내 프로젝트 모드 마지막 쓰기 시간 길이 이름 ---- ------------- ------ ---- -a---- 8/4/2023 12:11 PM 28 README.md [C:\코드\카우치베이스\내 프로젝트] $ git init 힌트: 사용 'master' as 의 이름 에 대한 의 이니셜 branch. 이 기본값 branch 이름 힌트: 는 subject 에 변경. To 구성 의 이니셜 branch 이름 에 사용 in 모두 힌트: 의 당신의 new 리포지토리, 어느 will suppress 이 경고, 통화: 힌트: 힌트: git 구성 --글로벌 init.defaultBranch <이름> 힌트: 힌트: 이름 일반적으로 선택 대신 의 'master' 는 'main', '트렁크' 그리고 힌트: '개발'. 그리고 그냥-생성 branch can be 이름이 변경되었습니다. 경유 이 명령: 힌트: 힌트: git branch -m <이름> 초기화 빈 Git 저장소 in C:/사용자/Laurent 도긴/문서/카우치베이스/내 프로젝트/.git/ [C:\코드\카우치베이스\내 프로젝트] $ git 구성 --글로벌 init.defaultBranch 메인 [C:\코드\카우치베이스\내 프로젝트] $ git branch -m 메인 [C:\코드\카우치베이스\내 프로젝트] $ git 추가 .\README.md .\색인.html .\스타일.css [C:\코드\카우치베이스\내 프로젝트] $ git commit -m "첫 번째 커밋" [메인 (root-commit) 356ece7] 먼저 commit 3 파일 변경됨, 245 삽입(+) create 모드 100644 README.md create 모드 100644 색인.html create 모드 100644 스타일.css [C:\코드\카우치베이스\내 프로젝트] $ git 원격 추가 원산지 https://github.com/ldoguin/myproject.git [C:\코드\카우치베이스\내 프로젝트] $ git push -u 원산지 메인 열거 객체: 5, 완료. 계산 객체: 100% (5/5), 완료. 델타 압축 사용 up 에 8 스레드 압축 객체: 100% (4/4), 완료. 글쓰기 객체: 100% (5/5), 1.95 KiB | 999.00 KiB/s, 완료. 합계 5 (델타 0), 재사용 0 (델타 0), pack-재사용 0 To https://github.com/ldoguin/myproject.git * [new branch] 메인 -> 메인 branch 'main' set up 에 트랙 'origin/main'. [C:\코드\카우치베이스\내 프로젝트] $ |
이제 Github 페이지로 돌아가서 다시 로드하면 다음과 같은 화면이 표시됩니다:
축하합니다. 이제 누구나 보고, 배우고, 기여할 수 있도록 코드가 Github에 공개되었습니다. 이제 프로덕션 단계입니다! 웹사이트를 만들어 봅시다 💪
방문하기 https://app.netlify.com/start/deploy. 그러면 Netify의 새 프로젝트 마법사로 이동합니다. 시작에 도움이 되는 다양한 버튼, GitHub, GitLab, Bitbucket, AzureDevops가 표시됩니다. GitHub를 클릭해 보겠습니다.
GitHub 프로필을 Netlify에 연결할지 묻는 창이 몇 개 표시됩니다. 계속 진행하면 다음 페이지로 이동합니다.
GitHub 조직에 Netlify 앱이 설치되어 있지 않다는 메시지가 표시됩니다. 를 클릭합니다. GitHub에서 Netlify 구성하기를 클릭하면 Netlify를 설치할 GitHub 조직과 액세스 권한을 부여할 리포지토리를 선택하라는 푸프 창이 열립니다.
기본값을 그대로 두고 다음 단계로 진행합니다. 이제부터 GitHub 계정의 모든 리포지토리를 볼 수 있습니다.
기본값을 그대로 두고 배포 내 프로젝트:
인터넷 웹사이트에 새로 배포된 링크가 표시됩니다. https://jolly-sfogliatella-3e6c07.netlify.app/. 넷라이파이는 샌드박스 환경을 제공합니다. netlify.app 도메인을 사용하면 자체 도메인 이름 없이도 배포할 수 있습니다.
축하합니다, 이제 웹사이트가 인터넷에 공개되었습니다. 잠시 시간을 내어 축하해 주세요 🎉.
이제 다음을 입력하여 이 Netlify 프로젝트를 연결할 수 있습니다. 넷라이파이 링크 를 클릭합니다. 옵션 목록이 제공됩니다. 기본값을 선택합니다. 현재 git 원격 오리진 사용(https://github.com/yourOrg/yourProject). GitHub를 통해 배포했으므로 Netlify는 리포지토리의 git 정보를 가지고 있으며 어떤 프로젝트를 사용할지 유추할 수 있습니다(이 시점에는 프로젝트가 하나만 있을 수도 있습니다). 결과는 다음과 같습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[C:\코드\카우치베이스\내 프로젝트] $ netlify 링크 netlify 링크 will 연결 이 폴더 에 a 사이트 on Netlify ? 방법 do 당신 want 에 링크 이 폴더 에 a 사이트? 사용 현재 git 원격 원산지 (https://github.com/ldoguin/myproject) 보기 에 대한 사이트 연결된 에 'https://github.com/ldoguin/myproject'... 디렉토리 연결된 관리자 URL: https://app.netlify.com/sites/jolly-sfogliatella-3e6c07 사이트 URL: https://jolly-sfogliatella-3e6c07.netlify.app 당신 can 지금 실행 기타 `netlify` cli 명령 in 이 디렉토리 [C:\코드\카우치베이스\내 프로젝트] $ |
이제 몇 가지를 시도해 볼 수 있습니다. 양식에 🐼 이모티콘을 추가해 보겠습니다. In index.html에서 9번째 줄을 수정합니다: <h1 id="”title”" class="”text-center”">설문 조사 양식</h1> 에 <h1 id="”title”" class="”text-center”">설문조사 양식 🐼</h1>
그런 다음 파일을 저장하고 이 변경 사항을 Github에 푸시합니다. 그런 다음 터미널에 다음과 같이 입력합니다. netlify open:site:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[C:\코드\카우치베이스\내 프로젝트] $ git 추가 .\색인.html [C:\코드\카우치베이스\내 프로젝트] $ git commit -m"Panda" [메인 caa6f87] Panda 1 파일 변경됨, 1 삽입(+), 1 삭제(-) [C:\코드\카우치베이스\내 프로젝트] $ git push 열거 객체: 5, 완료. 계산 객체: 100% (5/5), 완료. 델타 압축 사용 up 에 8 스레드 압축 객체: 100% (3/3), 완료. 글쓰기 객체: 100% (3/3), 360 바이트 | 180.00 KiB/s, 완료. 합계 3 (델타 1), 재사용 0 (델타 0), pack-재사용 0 원격: 해결 델타: 100% (1/1), 완료 와 함께 1 local 객체. To https://github.com/ldoguin/myproject.git 356CE7..8A2EBE2 메인 -> 메인 [C:\코드\카우치베이스\내 프로젝트] $ netlify 열기:사이트 열기 "jolly-sfogliatella-3e6c07" 사이트 URL: > https://jolly-sfogliatella-3e6c07.netlify.app |
아주 멋진 일이 일어나고 있습니다. 깃허브 리포지토리가 넷플라이에 연결되어 있기 때문에 새 배포는 넷플라이에서 자동으로 수행됩니다. 따라서 웹사이트를 열면 팬더 <3을 볼 수 있습니다.
이 시점에는 코드를 보관하는 Github 리포지토리가 있으며, Netlify에 통합되어 새 코드를 푸시할 때 자동으로 새 배포를 생성합니다. 또한 netlify CLI를 작업 폴더에 저장합니다. 백엔드 코드를 작성할 준비가 되었습니다!
3단계 - 백엔드
이 장에서는 다음 질문에 대한 답변을 제공합니다: 누군가 양식을 작성하고 다음을 클릭하면 어떻게 되나요? 제출 ?
지금 당장 대답은 아무것도 없습니다. 이제 바꿔봅시다. 자바스크립트를 작성하면 됩니다. 누군가 유효한 정보를 입력하면 팝업 알림을 표시하고 제출하기. 귀하의 index.html 파일에 다음을 넣습니다. <script> 마지막 닫는 div 태그 사이의 코드 </div> 그리고 닫는 본문 태그 앞에 </body>.
|
1 2 3 4 5 6 7 8 9 10 |
<script> const 양식 = 문서.getElementById('설문조사 양식'); <1> 양식.추가 이벤트 리스너('submit', 핸들폼); <2> 비동기 함수 핸들폼(e) { e.preventDefault() <3> 알림("양식 제출!") <4> } </script> |
|
1 2 3 4 |
<1> Get 의 Dom 요소 대표 의 양식 by 사용 그것의 id <2> 각 시간 의 제출 이벤트 발생, 실행 의 핸들폼 함수 <3> 그리고 자연 행동 의 a 양식 제출 는 에 재로드 의 페이지, 우리 don't 필요 그, 따라서 우리 예방 의 기본값 행동 에 일어나다 <4> 그리고 알림 함수 디스플레이 a 팝업 와 함께 a 메시지 |
코드를 저장하고 페이지를 다시 로드한 후 양식을 작성하고 제출를 입력하면 다음과 같은 내용이 표시됩니다:
이제 사용자가 양식을 제출할 때 어떤 일이 일어나는지 알아봤으니 조금 더 나아가 보겠습니다. 양식의 내용을 살펴보고 올바른 데이터를 JSON으로 가져올 수 있는지 확인하고자 합니다. 이름에는 문자열, 나이에는 정수, 추천에는 부울이 필요합니다.
그리고 HTML 확인란이 제대로 작동하지 않는 것으로 나타났습니다. 기본값은 아무 값도 제공하지 않으며, 이 확인란을 선택하면 값 필드의 내용이 표시됩니다. 다른 입력 필드인 숨김을 추가하여 기본값이 False가 되도록 하겠습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<레이블> <입력 id="hiddenRecommend" 이름="추천" 값="false" 유형="숨겨진" /> <입력 id="추천" 이름="추천" 값="true" 유형="체크박스" 클래스="입력-체크박스" />yes</레이블> |
이제 자바스크립트 코드에 대해 살펴볼 흥미로운 새 줄이 몇 가지 있습니다.
|
1 2 3 4 5 6 7 8 9 10 11 |
const 양식 = 문서.getElementById('설문조사 양식'); 양식.추가 이벤트 리스너('submit', 핸들폼); 비동기 함수 핸들폼(e) { <1> e.preventDefault() const 데이터 = new FormData(e.대상); <1> const 값 = 개체.fromEntries(데이터.항목()); <2> const 세부 정보 = `이름: ${값.이름}\nage: ${값.나이}\추천: ${값.추천}`; <3> 콘솔.로그(세부 정보); <4> } |
|
1 2 3 4 |
<1> 그리고 매개변수 의 의 핸들폼 함수 는 an 객체(e) 와 함께 a 필드 호출 대상. 이 대상 can be 변환 에 a FormData 객체. <2> 그리고 FormData 객체 can be 변형 에 a JSON 객체. <3> 지금 그 우리 가지고 a JSON 객체 우리 can 인쇄 out 의 값 우리 는 관심 in. <4> 이 시간 대신 의 표시 an 알림 상자, 우리 는 로깅 의 세부 정보 문자열 에 의 콘솔. 그리고 콘솔 can be 액세스 통해 당신의 브라우저's dev 도구. It 는 great 에 대한 디버깅. |
정리가 되었으니 이제 본격적으로 Netlify 함수를 만들어 보겠습니다. Enter NETLIFY 함수:생성 를 입력합니다. 다음과 같은 내용이 표시될 것입니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[C:\코드\카우치베이스\내 프로젝트] $ netlify 함수:create ? 선택 의 유형 의 함수 당신'd 같은 에 create 서버리스 함수 (노드/이동) ◈ 함수 디렉토리 not 지정된 in netlify.toml 또는 UI 설정 ? 입력 의 경로, 상대 에 당신의 사이트's base 디렉토리 in 당신의 저장소, 어디 당신의 함수 should 라이브: netlify/함수 ◈ 업데이트 사이트 설정 와 함께 netlify/함수 ◈ 함수 디렉토리 netlify/함수 업데이트 in 사이트 설정 ◈ 함수 디렉토리 netlify/함수 does not 존재 아직, 만들기 it... ◈ 함수 디렉토리 netlify/함수 생성 ? 선택 의 언어 의 당신의 함수 자바스크립트 ? 선택 a 템플릿 자바스크립트-hello-세계 ? 이름 당신의 함수: 저장 양식 ◈ 만들기 함수 저장 양식 ◈ 생성됨 netlify\함수\저장 양식\저장 양식.js [C:\코드\카우치베이스\내 프로젝트] $ |
선택 서버리스 함수를 사용하고, 경로에 대한 다음 질문은 기본값을 그대로 두고, 자바스크립트를 언어로 유지하고, 기본값을 유지합니다. 헬로월드 템플릿을 사용하는 것보다 함수의 이름을 지정하는 것이 좋습니다. 제 함수는 저장 양식. 이렇게 하면 netlify 폴더에 새 파일이 생성됩니다. 실행하면 넷라이파이 개발 이제 로그에 새로운 줄이 표시됩니다:
|
1 2 |
로드됨 함수 저장 양식 http://localhost:8888/.netlify/functions/saveform. ◈ 기능 서버 는 듣기 on 62431 |
즉, 넷리파이 개발 서버가 새로 생성한 함수도 서비스하고 있다는 뜻입니다. 새로 생성된 파일을 살펴보세요. ./netlify/functions/saveform/saveform.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 이벤트 및 컨텍스트 관련 문서 https://docs.netlify.com/functions/build/#code-your-function-2 const 핸들러 = 비동기 (이벤트) => { <1> 시도 { const subject = 이벤트.쿼리 문자열 매개변수.이름 || 'World' <2> 반환 { statusCode: 200, body: JSON.문자열화({ 메시지: `안녕하세요 ${subject}` }), <3> // // 반환할 수 있는 키가 더 있습니다: // 헤더: { "headerName": "headerValue", ... }, // isBase64Encoded: true, } } catch (오류) { 반환 { statusCode: 500, body: 오류.toString() } <4> } } 모듈.수출 = { 핸들러 } |
|
1 2 3 4 |
<1> 의 서명 의 의 함수 는 비동기 (의 비동기 키워드),그리고 has an 이벤트 매개변수. 비동기식 수단 일부 코드 내부 의 함수 can be 비동기 그리고 우리 can wait 에 대한 의 코드 에 be 실행됨 와 함께 의 기다림 키워드, 대신 의 관리 의 자바스크립트 약속 객체 전통적으로 반환 by 비동기 함수. <2> 의 `이벤트` 객체 has 일부 속성 그리고 메소드, 같은 `쿼리 문자열 매개변수` 그 허용 우리 에 get 의 이름 쿼리 매개변수 <3> 이 함수 필수 반환 a JSON 객체 와 함께 an HTTP 상태 코드 그리고 an 개체 body. 만약 모든 것 작동 잘, 우리 반환 a JSON body 포함 a 메시지 필드 그리고 의 코드 200. 코드 시작 와 함께 2 수단 things 갔다 잘. <4> 만약 things 갔다 잘못, 우리 반환 의 상태 코드 500. 코드 시작 와 함께 5 수단 무언가 갔다 잘못 on 의 서버. 그리고 의 body 필드 will 포함 의 오류. |
사용자가 다음을 클릭할 때 이 함수를 호출하여 사용해 보겠습니다. 제출. 마지막 코드 뒤에 다음 코드를 추가하면 됩니다. 콘솔 로그 호출합니다:
|
1 2 3 4 5 6 7 8 9 10 11 |
콘솔.로그(세부 정보); const 응답 = 기다림 fetch("/.netlify/functions/saveform", { <1> 메서드: 'GET', <2> 헤더: { <3> '콘텐츠 유형': 'application/json', }, }) 만약 (응답.상태 == 200) { <4> 콘솔.로그(기다림 응답.텍스트()); } |
|
1 2 3 4 |
<1> fetch 는 의 메서드 당신 can 통화 에 보내기 an HTTP 요청 에 a 서버. 여기 우리 는 보내기 a 요청 에 `/.netlify/함수/저장 양식`. 공지사항 의 기다림 키워드 그 수단 이 메서드 보통 반환 a 약속. 여기 우리 는 그냥 할당 의 결과 의 의 약속 에 의 필드 응답. <2> HTTP 요청 가지고 메소드, 언젠가 또한 알려진 as HTTP 동사. 여기 우리 는 not 수정 뭐든지 on 의 서버, 우리 는 검색 정보, 그래서 우리 는 사용 의 메서드 GET <3> HTTP 요청 가지고 [헤더](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type). 여기서는 `application/json`으로 설정된 Content-type과 같은 추가 메타데이터를 제공합니다. 이것이 의미하는 바는 JSON을 조작하고 있다는 것입니다. 애플리케이션/텍스트`는 모든 형태의 텍스트를 조작한다는 의미입니다. 이를 [마임 유형 또는 미디어 유형]이라고 합니다(https://developer.mozilla.org/en-US/docs/Glossary/MIME_type). <4> 우리 는 테스트 의 상태 코드 반환 by 의 서버. 만약 it's 200, it 수단 모든 것 갔다 잘. 우리 가지고 a 메시지 에 디스플레이 in 의 콘솔. |
추가, 커밋 및 푸시. netlify open:admin
이 시점에서 인터넷에 프론트엔드와 백엔드가 배포되었습니다. 하지만 여기서는 Netlify 마법사가 만든 기본 함수를 호출하기만 하면 됩니다. 다음 단계는 양식의 콘텐츠를 해당 함수로 전송하고 데이터베이스에 저장하는 것입니다.
4단계 - 데이터베이스
가장 먼저 할 일은 양식 세부 정보를 함수에 전송하는 방법을 알아내는 것입니다. 이를 위해서는 GET 메서드를 POST 메서드로 변경해야 합니다. 이러한 것을 HTTP 요청 메서드라고 하며 HTTP 동사라고도 합니다. 전체 목록은 다음에서 확인할 수 있습니다. MDN. Get 메서드 요청은 데이터를 검색하는 데만 사용됩니다. 포스트 메서드 요청은 데이터를 생성하거나 변경하는 데 사용됩니다. 이것이 바로 우리가 원하는 것입니다. 누군가 양식을 제출할 때 Dababase에 새 항목을 만들고 싶습니다. HTTP 요청에는 메서드, 일부 헤더(요청에 대한 메타데이터, 여기서는 요청이 Content-Typ 헤더가 있는 JSON 콘텐츠라고 가정합니다), 본문이 있습니다. 요청 본문은 JSON 텍스트입니다.
|
1 2 3 4 5 6 7 |
const 응답 = 기다림 fetch("/.netlify/functions/saveform", { 메서드: 'POST', <1> 헤더: { '콘텐츠 유형': 'application/json', }, body: JSON.문자열화(값), <2> }) |
|
1 2 |
<1> 우리 변경 의 HTTP 메서드 에 POST 왜냐하면 우리 want 에 변경 무언가 대신 의 그냥 검색 정보. <2> A 요청 can 또한 가지고 a body. 여기 우리 는 보내기 a 텍스트 버전 의 우리의 JSON 객체. |
프론트엔드에서 백엔드로의 HTTP 요청이 변경되었으므로 이제 백엔드 코드를 수정해야 합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const 핸들러 = 비동기 (이벤트) => { 시도 { var 데이터 = JSON.parse(이벤트.body); <1> 반환 { statusCode: 200, body: JSON.문자열화({ 이름: 데이터.이름 }) <2> } } catch (오류) { 반환 { statusCode: 500, body: 오류.toString() } } } 모듈.수출 = { 핸들러 } |
|
1 2 |
<1> 그리고 이벤트 객체 허용 우리 에 get 의 body 의 의 요청. It's 텍스트, 우리 can parse 이 텍스트 에 a JSON 객체 그리고 할당 it 에 의 필드 호출 `데이터`. <2> To make sure 우리 did 받기 우리의 JSON 객체, 우리 변경 의 반환 메시지 그리고 사용 의 필드 `데이터.이름`. |
웹 개발 콘솔에 다른 메시지가 표시되어야 합니다. {"name":"yourName"}.
양식 데이터를 백엔드로 전송하고 확인했습니다. 이제 데이터베이스 측면으로 넘어가겠습니다. Couchbase에서 일하면서 제가 사용할 데이터베이스는 바로 이 데이터베이스입니다. 간단한 방법은 https://cloud.couchbase.com/sign-up에서 계정을 생성하면 신용카드 없이 30일 평가판을 사용할 수 있습니다.
기본값을 그대로 두거나 선호하는 클라우드 제공업체와 가장 가까운 지역을 선택할 수 있습니다. 를 클릭합니다. 지금 배포 를 클릭하고 데이터베이스 배포를 기다립니다.
거기에서 두 가지 작업을 수행해야 합니다. 백엔드 코드에서 해당 데이터베이스에 연결할 수 있는지 확인하고, 데이터를 어딘가에 쓸 수 있는지 확인합니다. 계속해서 연결 탭을 클릭합니다.
카우치베이스에서는 데이터를 버킷에 저장합니다. 기본적으로 평가판에는 미리 가져온 여행 샘플 버킷이 제공됩니다. 이 버킷을 사용하지 않겠습니다. 대신 자체 버킷을 만들겠습니다. 버킷을 클릭합니다. 설정 의 최상위 메뉴에서 버킷 를 클릭합니다.
이제 + 버킷 만들기을 클릭하고 이름을 지정하고 나머지는 기본 설정으로 둡니다. 버킷 만들기.
새 버킷이 생겼으니 이제 관련 자격 증명을 만들어야 합니다. 버킷의 데이터베이스 액세스 버튼보다 데이터베이스 액세스 만들기 버튼을 클릭합니다.
사용자 이름과 비밀번호를 모두 기억하고 있는지 확인한 후 데이터베이스 만들기. 마지막으로 해야 할 일은 이 데이터베이스에 공개적으로 액세스할 수 있도록 허용하는 것입니다. 지금은 숨겨져 있습니다. 데이터베이스에서 허용된 IP 주소보다 허용 IP 추가. 를 클릭합니다. 액세스 허용 어디서나를 클릭하고 지침을 따릅니다. 이렇게 하면 양식을 미리 채운 다음 허용 IP 추가 버튼을 클릭합니다. 다소 번거롭다고 생각할 수도 있습니다. 왜 기본값이 아닌가요?
이제 연결 탭을 클릭합니다. 탭이 표시됩니다. 연결 문자열를 클릭하고 데이터베이스 자격 증명을 선택한 다음 언어를 노드로 전환하면 백엔드 코드에서 데이터베이스에 연결할 수 있는 올바른 지침이 제공됩니다.
이것을 함수 코드에 복사하여 붙여넣고 몇 가지를 더 추가할 수 있습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
const 암호화 = require("crypto"); <1> const 카우치베이스 = require("couchbase"); <2> const 핸들러 = 비동기 (이벤트) => { 시도 { const clusterConnStr = "couchbases://cb.ar0qqwli6cczm1u.cloud.couchbase.com"; // 이것을 연결 문자열 으로 바꿉니다. const 사용자 이름 = "관리자"; // 데이터베이스 액세스 자격 증명의 사용자 이름 으로 바꾸기 const 비밀번호 = "Couch#123"; // 데이터베이스 액세스 자격 증명 의 비밀번호로 바꿉니다. // 클러스터에 대한 참조 가져오기 const 클러스터 = 기다림 카우치베이스.연결(clusterConnStr, { <4> 사용자 이름: 사용자 이름, 비밀번호: 비밀번호, // 아래에서 미리 구성된 프로필을 사용하여 연결 지연 문제를 방지하세요. 구성 프로파일: "wanDevelopment", }); const 버킷 = 클러스터.버킷("surveyform"); <5> const 컬렉션 = 버킷.기본 컬렉션(); <6> var 데이터 = JSON.parse(이벤트.body); let 결과 = 기다림 컬렉션.삽입(암호화.randomUUID(), 데이터); <7> 반환 { statusCode: 200, body: JSON.문자열화({ 이름: 데이터.이름 }) } } catch (오류) { 콘솔.로그(오류); 반환 { statusCode: 500, body: 오류.toString() } } } 모듈.수출 = { 핸들러 } |
|
1 2 |
<1> 당신 can 참조 우리 가지고 두 new 종속성 에 우리의 프로젝트. 그리고 'crypto' 패키지 는 제공 by 노드. It 허용 우리 에 생성 a 무작위 식별자 에 대한 우리의 문서 <2> 그리고 'couchbase' 패키지 는 의 카우치베이스 NodeJS SDK. It's 모든 bit 의 코드 당신 필요 에 연결 에 a 카우치베이스 데이터베이스. 이 프로젝트 는 또한 자주 호출 드라이버 에 대한 기타 데이터베이스, 또는 클라이언트. |
Couchbase의 경우 설치해야 합니다. 실행 중 npm i couchbase@4.2.4 를 사용하면 됩니다. 현재 넷리파이/카우치베이스 호환성은 카우치베이스 버전 4.2.4 이하에서 보장됩니다. 이는 SDK의 특성 때문입니다. C SDK 위에 자바스크립트 인터페이스로 구성되어 있습니다. 그리고 C 종속성은 올바른 버전에서 시스템 종속성을 찾을 것으로 기대합니다. 현재 Couchbase 4.2.5는 다음을 찾을 것으로 예상됩니다. GLIBC_29 하지만 Netlify 백엔드 코드를 실행하는 Ubuntu 시스템에서는 사용할 수 없습니다.
이제 종속성이 생겼으니 종속성을 빌드하는 방법을 명시해 보겠습니다. 종속성을 추가하려면 netlify.toml 파일을 리포지토리 루트에 다음 내용으로 수정합니다:
|
1 2 3 |
[빌드] 명령 = "npm 설치 && strip --strip-debug ./node_modules/couchbase/build/Release/couchbase_impl.node" 게시 = "." |
몇 가지 작업을 수행합니다. 종속성을 설치하고 디버그 심볼 테이블을 제거합니다. couchbase_impl.node. 이 파일은 노드 SDK에서 사용하는 C 라이브러리입니다. 그리고 이 파일은 현재 넷라이파이에서 처리하기에는 너무 큽니다. 그래서 빌드 과정에서 불필요한 불필요한 부분을 제거하고 있습니다.
|
1 2 3 4 5 |
<3> 이 변수 는 의 정보 필요 에 대한 의 SDK 에 연결 에 의 클러스터. A 연결 문자열, a 사용자 이름 그리고 a 비밀번호. <4> `카우치베이스.연결` 취하다 의 연결 문자열 as 먼저 매개변수, 보다 a JSON 객체 와 함께 사용자 이름, 비밀번호 그리고 기타 옵션. 여기 우리 또한 give 의 `완개발` 구성 프로필. It will 증가 의 기본값 시간 초과 값 의 모두 카우치베이스 작업. 기본적으로 만약 당신의 연결 는 slow it 원'는 비명을 지르지 않습니다. 클러스터 객체에서 버킷을 가져옵니다. 버킷은 범위와 컬렉션을 저장하는 곳입니다. 여기서는 `surveyform` 버킷을 가져옵니다. 여기에는 이미 기본 범위와 기본 컬렉션이 있습니다. 버킷에서 기본 컬렉션을 가져올 수 있습니다. 컬렉션은 문서 또는 키/값 쌍을 저장하는 곳입니다. 키를 문서의 식별자로, 값을 JSON 데이터로 생각하면 됩니다. 하지만 다른 무엇이든 될 수 있습니다. 컬렉션 객체에서 삽입 메서드를 호출합니다. 이 메서드에는 키와 값이라는 두 개의 매개변수가 필요합니다. 따라서 암호화 패키지에서 randomUUID() 메서드를 호출하여 임의의 식별자를 생성합니다. 그리고 데이터 객체를 값으로 전달합니다. 여기에는 JSON이 포함됩니다. 이 함수는 비동기식입니다.s 만들기 a 요청 에 의 카우치베이스 카펠라 클러스터. 우리 기다림 에 대한 의 클러스터's 응답. |
이제 새 파일을 추가하고 커밋한 후 GitHub에 푸시할 수 있습니다. 하지만 그렇게 하면 비밀번호가 GitHub로 푸시됩니다. 우리는 그렇게 하고 싶지 않습니다. 대신 다음을 실행하여 테스트할 수 있습니다. 넷라이파이 개발. 계속해서 양식을 다시 제출하세요.
모든 것이 순조롭게 진행되었다면 데이터베이스에 데이터를 기록했습니다! Couchbase Capella UI로 이동하여 쉽게 확인할 수 있습니다. 클릭 데이터 도구를 클릭하고 버킷, 범위 및 컬렉션을 선택하면 문서에서 설문조사를 볼 수 있습니다.
방금 데이터베이스 연결 코드를 작성했습니다!
5단계 - 구성 관리
GitHub에서 자격 증명을 강요하지 않기 위해 환경 변수를 사용하겠습니다. 환경 변수는 모든 운영 체제에서 공통적으로 사용되며 다양한 환경(다양한 OS, 클라우드, 테스트, 스테이징, 프리프로덕션, 프로덕션 등 워크플로에 맞는 환경)에서 구성을 관리하는 가장 좋은 방법입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.... const 엔드포인트 = 프로세스.환경.카우치베이스_엔드포인트 || "couchbase://localhost"; <1> const 사용자 이름 = 프로세스.환경.couchbase_username || "관리자";<1> const 비밀번호 = 프로세스.환경.couchbase_password || "비밀번호";<1> const 버킷 = 프로세스.환경.카우치베이스_버킷 || "surveyform"<1> const 핸들러 = 비동기 (이벤트) => { 시도 { const clusterConnStr = 엔드포인트; // 이것을 연결 문자열로 바꿉니다. const 사용자 이름 = 사용자 이름; // 데이터베이스 액세스 자격 증명에서 사용자 이름으로 바꿉니다. const 비밀번호 = 비밀번호; // 데이터베이스 액세스 자격 증명의 비밀번호로 바꿉니다. // 클러스터에 대한 참조 가져오기 const 클러스터 = 기다림 카우치베이스.연결(clusterConnStr, { usernme: 사용자 이름, 비밀번호: 비밀번호, // 아래에서 미리 구성된 프로필을 사용하여 연결 지연 문제를 방지하세요. 구성 프로파일: "wanDevelopment", }); const 버킷 = 클러스터.버킷(버킷); ... |
|
1 |
<1> 그리고 프로세스 객체 는 항상 사용 가능 와 함께 노드 그래서 아니요 필요 에 대한 a 특정 라이브러리 가져오기. 사용 || 허용 에 제공 a 기본값 값 에 대한 각 변수 만약 그들 는 not 정의. |
Mac 또는 Linux에서는 다음을 실행할 수 있습니다. 내보내기 MYVARIABLE="value" 을 클릭합니다. Windows에서는 다음을 실행할 수 있습니다. $Env:MYVARIABLE="value"
Netlify의 컨텍스트에서 이를 정의하려면 UI를 통해 수동으로 수행하거나 CLI를 사용할 수 있습니다:
|
1 2 3 4 |
netlify 환경:set 카우치베이스_엔드포인트 카우치베이스://cb.ar0qqwli6cczm1u.cloud.couchbase.com netlify 환경:set couchbase_username 관리자 netlify 환경:set couchbase_password 비밀번호 netlify 환경:set 카우치베이스_버킷 설문조사 양식 |
이제 파일을 추가하고 코드를 커밋하고 푸시할 수 있습니다. 축하합니다, 풀스택이 완성되었습니다. 백엔드, 프론트엔드 및 데이터베이스. 그리고 모든 것을 라이브로 배포했습니다! 하지만 작업이 끝난 것은 아닙니다. 더 전문적으로 만들기 위해 아직 할 수 있는 일이 몇 가지 있습니다.
6단계 - 사용자 피드백
현재로서는 사용자가 클릭할 때 많은 일이 일어나지 않습니다. 제출하기 버튼을 클릭합니다. 성공적으로 기록되었는지 여부를 알리기 위해 이를 변경해야 합니다. 먼저 개발자 측에서 오류를 확인합니다. HTTP 상태 코드는 잘 만들어져 있으며, 일반적으로 400 이상이면 오류이므로 다음과 같은 작업을 수행할 수 있습니다:
|
1 2 3 4 5 |
만약 (응답.상태 >= 400) { <1> 콘솔.로그("뭔가 잘못되었을 때"); <2> 콘솔.로그(기다림 응답.텍스트()); <3> 반환 false; } |
|
1 2 3 |
<1> 상태 코드 그 시작 와 함께 4 보통 수단 무언가 갔다 잘못 on 의 클라이언트 측면. 그리고 잘못 데이터 는 보낸, 의 클라이언트 does not 가지고 의 오른쪽 권한, 의 페이지 does not 존재 등... 여기 우리 테스트 만약 의 코드 는 같음 또는 더 높은 보다 400. <2> 만약 it 는, 우리 로그 a 메시지 in 의 콘솔 <3> 우리 또한 로그 의 오류 메시지 반환 by 의 서버 |
테스트하려면 연결 문자열 또는 Couchbase에 대한 자격 증명의 어딘가에 오타를 입력하면 됩니다. 웹 콘솔에서 오류를 클릭하면 제출하기. 하지만 웹 콘솔은 우리만을 위한 것이므로 사용자에게 적절한 오류 또는 성공 메시지를 추가해야 합니다.
양식의 끝 부분 바로 앞에 오류 및 성공 메시지가 있는 스팬 HTML 요소를 몇 개 추가했습니다. 참고로 숨기기 현재로서는 보이지 않게 만드는 CSS 클래스입니다.
|
1 2 3 4 5 6 7 8 |
... </div> <span id="form-error" 클래스="오류 메시지 숨기기"></span> <span id="감사 메시지" 클래스="숨기기"> 귀하의 참여 has been 기록, 감사 당신!. </span> </양식> ... |
그리고 여기에 해당 CSS가 있습니다. 오류를 빨간색으로 표시하고, 요소를 숨기거나 표시하고, 멋진 페이드 아웃 애니메이션을 멋지게 표현했습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
.container .error-message { 색상: 빨간색; } .hide { 디스플레이: 없음; } .show { 디스플레이: 블록; } .fade-out { 애니메이션: 페이드아웃 용이성 8s; -웹킷-애니메이션: 페이드아웃 용이성 8s; -moz-animation: 페이드아웃 용이성 8s; -o-애니메이션: 페이드아웃 용이성 8s; -ms-animation: 페이드아웃 용이성 8s; }키프레임 페이드아웃 { 0% { 불투명도:1; } 100% { 불투명도:0; } } 모즈 키프레임 페이드아웃 { 0% { 불투명도:1; } 100% { 불투명도:0; } } 웹킷 키프레임 페이드아웃 { 0% { 불투명도:1; } 100% { 불투명도:0; } } @-o-키프레임 페이드아웃 { 0% { 불투명도:1; } 100% { 불투명도:0; } } @-ms-키프레임 페이드아웃 { 0% { 불투명도:1; } 100% { 불투명도:0; 디스플레이: 없음; } |
이제 모든 것을 합칠 차례입니다. 처음 두 줄은 방금 추가된 새 스팬 요소를 가져옵니다. 호출은 form.reset() 는 반환된 응답 상태 코드가 다음과 같은 경우 양식에서 모든 값을 지우는 것입니다. 200. 페이드 아웃 클래스를 추가하여 메시지를 표시하는 것보다 7000ms 타임아웃 함수를 사용하여 모든 클래스를 제거하고 요소를 다시 숨기는 것이 더 낫습니다. 오류가 발생했을 때도 마찬가지입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const 감사 메시지 = 문서.getElementById('감사 메시지'); <1> const formError = 문서.getElementById("form-error"); <1> 만약 (응답.상태 == 200) { 양식.재설정(); <2> 감사 메시지.classList.추가('show'); <3> 감사 메시지.classList.추가('페이드아웃'); <3> setTimeout(함수(){감사 메시지.classList.제거('페이드아웃');감사 메시지.classList.제거('show');}, 7000); <3> 콘솔.로그(기다림 응답.텍스트()); 반환 false; } 만약 (응답.상태 >= 400) { 콘솔.로그("뭔가 잘못되었을 때"); 콘솔.로그(기다림 응답.텍스트()); formError.텍스트 콘텐츠 = "연락처를 기록하는 동안 문제가 발생했습니다."; <4> formError.classList.토글('show'); <4> formError.classList.토글('페이드아웃'); <4> setTimeout(함수(){formError.classList.토글('페이드아웃');formError.classList.토글('show');}, 7000); <4> 반환 false; } |
|
1 2 3 4 |
<1> 우리 할당 우리의 new 스팬 에 변수 <2> 만약 things 갔다 잘, 우리 재설정 의 양식's 데이터, it 쇼 에 의 사용자 그 it 작동. <3> 우리 먼저 추가 a CSS 클래스 그 쇼 의 오류 메시지, 보다 신청하기 의 페이드-out CSS 클래스, 보다 통화 의 시간 초과 함수. In 7000 ms, 의 페이드-out 그리고 show CSS 클래스 will be 제거됨, 숨기기 의 성공 메시지 다시. <4> 우리 do 의 동일 thing 언제 거기 는 an 오류, 사용 의 formError HTML 요소 대신. |
이제 양식을 다시 테스트 제출하고 선택한 작업에 따라 다른 성공 또는 오류 메시지를 확인할 수 있습니다. 만족스러우면 해당 코드를 추가, 커밋 및 푸시할 수 있습니다.
이 가이드의 마지막 부분까지 완료하셨습니다! git, GitHub, Netlify 및 Couchbase Capella를 사용하여 웹에 HTML 양식을 배포하고 사용자가 양식을 제출할 때마다 콘텐츠가 데이터베이스에 저장되었는지 확인했습니다.
더 자세히 알아볼 준비가 되셨나요?
-
- 확인 카우치베이스 개발자 리소스샘플 애플리케이션, 코드 및 튜토리얼을 확인하세요.
- 가입하기 커뮤니티 허브 를 클릭하여 Discord, 포럼 등을 사용하세요.
