React 및 Appwrite로 포럼 만들기 - 1부
11760 단어 appwritejavascriptopensourcewebdev
전제 조건
이 가이드에서는 몇 가지 가정을 할 것입니다. 가장 중요한 것은 Appwrite 설치(로컬 또는 원격)에 액세스할 수 있다는 것입니다. 없는 경우 이 항목installation guide을 확인하십시오. 또한 다음을 가정합니다.
(진화하는) 프로젝트는 다음에서 찾을 수 있습니다: https://github.com/Swinkid/appwrite-forum
설정하자!
충분한 잡담. 이제 우리는 우리가 무엇을 하는지 알았습니다. 설정을 시작하겠습니다! 먼저, 처음부터 프로젝트를 시작하지 않아도 되는 중요한 파일이 포함된 프로젝트를 복제해야 합니다.
git clone https://github.com/Swinkid/appwrite-forum-setup
cd appwrite-forum-setup/
npm install
다음으로 Appwrite 설치에서 프로젝트를 생성해야 합니다. 수동으로 수행하는 대신 appwrite.json 파일을 컬렉션으로 채웠습니다. 이렇게 하면 컬렉션과 프로젝트 ID가 동일합니다(.env 파일에 중요!).
alex@Alex-PC:~/IdeaProjects/appwrite-forum-setup$ appwrite init project
? How would you like to start? (Use arrow keys)
❯ Create a new Appwrite project
Link this directory to an existing Appwrite project
Appwrite 리소스가 있는 위치를 반응에 알리려면 .env 파일이 필요합니다. 프로젝트에 예제를 넣었으니 다음을 수행하십시오.
cp .env.example .env
그런 다음 이 .env 파일을 열면 다음이 표시됩니다.
REACT_APP_ENDPOINT=http://localhost:3000/v1
REACT_APP_PROJECT=624096a0130c10e3dceb
REACT_APP_ADMIN_TEAM=6240989c8d1a6db01d39
REACT_APP_CATEGORY_COLLECTION=6240986d4947526ebfd4
프로젝트와 컬렉션을 생성했으므로 이를 조정할 필요가 없습니다. 나중에 프로젝트에서 이 파일에 추가할 것입니다.
마지막으로 포럼 카테고리를 실제로 채워야 합니다. appwrite의 카테고리 컬렉션으로 이동하여 흰 토끼, neo gif를 따르세요.
🛠️ 코딩하자!
주요 초점은 Appwrite와의 인터페이스 방식이므로 일부 페이지는 미리 채워져 있습니다. 원하는 대로 수정할 수 있습니다. 각 페이지에 대한 '비즈니스' 논리를 구현하게 됩니다.
카테고리
src/Components/Forum/Categories/Categories.js
를 열면 현재 가짜 포럼 카테고리가 있는 함수를 생성했음을 알 수 있습니다.function fetchCategories(){
let stubbedCategories = [];
stubbedCategories.push({
$id: 'asdadasdasd',
name: 'Test Forum',
description: "We're going to need a bigger boat"
});
return stubbedCategories;
}
몇 가지 수정이 필요합니다. 먼저 위의 함수를 다음으로 대체합니다.
function fetchCategories(){
api.listDocuments(REACT_APP_CATEGORY_COLLECTION).then((data) => {
setCategories(data.documents || []);
});
}
다음으로 useEffect 함수를 다음으로 바꿉니다.
useEffect(() => {
fetchCategories();
}, []);
상황이 구체화되면 이제 react를 실행할 때 포럼 카테고리를 나열할 수 있습니다!
로그인
계속해서 열어보세요
src/Components/Auth/Login/Login.js
. 다음 코드를 포함하는 handleSubmit이라는 함수를 찾을 수 있습니다.const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log({
email: data.get('email'),
password: data.get('password'),
});
};
현재 모든 코드는 브라우저 콘솔에 이메일 및 비밀번호 양식의 내용을 출력하는 작업을 수행하고 있습니다. 이를 수정하고
console.log(...);
를 다음으로 바꿉니다.api.login(data.get('email'), data.get('password')).then((result) => {
// Store logged in 'state' in redux.
dispatch(login({
account: result.account,
}))
navigate('/');
}).catch((error) => {
setErrors(true);
});
간단히 말해서 우리가 하는 일은 계정 데이터를 Redux에 저장한 다음 사용자를 포럼의 홈 페이지로 다시 리디렉션하는 것뿐입니다. 소용돌이를 줄 시간입니다!
등록하다
다음으로 등록 페이지를 알아 보겠습니다. 가서 열어
src/Components/Auth/Register/Register.js
. 로그인 페이지와 마찬가지로 handleSubmit 기능이 있습니다. 이전과 마찬가지로 console.log(...);
문을 다음으로 바꿉니다.api.createAccount(data.get('email'), data.get('password'), data.get('firstName') + ' ' + data.get('lastName')).then((result) => {
navigate('/login');
}).catch((error) => {
setErrors(true);
})
이제 Appwrite 콘솔로 이동하지 않고도 자신의 계정을 등록할 수 있습니다! :디
결론
휴! 정말 많았어요! 오늘 우리는 사용자가 로그인, 등록 및 포럼 카테고리를 볼 수 있는 포럼을 만들기 시작했습니다. 다음 기사에서는 여기에 추가하고 새 게시물을 만들 수 있도록 할 것입니다. 다음 기사를 게시할 때 내 눈을 유지!
📚 더 알아보기
Reference
이 문제에 관하여(React 및 Appwrite로 포럼 만들기 - 1부), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/alexcodes/creating-a-forum-with-react-and-appwrite-part-1-3jm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)