Firebase를 사용하여 CRUD 응용 프로그램 구성

2012년 발표된 이래로Firebase는 개발자 커뮤니티의 광범위한 사랑을 받았다. 많은 엔지니어들이 개발 과정에서 처리해야 할 부담을 없애기 위해서다. 데이터베이스, 저장, 신분 검증, 위탁 관리 등을 포함한다.
Firestore 데이터베이스는 핵심 제품 중 하나로 고도로 유연한 무모드 데이터베이스 접근을 허용하기 때문에 데이터베이스 분야의 게임 규칙 변화자이다.그러나 때로는 그것을 사용하는 것이 도전적일 수도 있다. 특히Firestore를 사용하여 CRUD 프로그램을 구축하려는 새로운 개발자에게는 그렇다.
Firestore, 넓은 의미에서 말하자면Firestore는 위대한 제품이지만, 그것은 단지 동전의 한 면일 뿐이다.그러나 생산급 응용 프로그램을 구축하기 위해서는 Firebase와 상호작용을 하고 Firebase가 제공하는 서비스를 제공할 수 있는 인터페이스가 필요하다.Appsmith는 동료를 위해 뭔가를 만들고 있다면 이 공백을 메울 수 있는 UI 프레임워크입니다.Appsmith는 UI와 라우터를 구축하는 시간을 절약하고 응용 프로그램의 논리와 구조에 전념할 수 있습니다.
본문에서 Firestore와 Appsmith를 사용하여 CRUD 프로그램을 구축하는 방법을 보여 드리겠습니다.Firestore의 핵심 개념, 예를 들어 Todo 응용 프로그램을 구축하여 데이터베이스에 연결하고 데이터를 읽으며 데이터베이스에 쓰는 것을 소개할 것입니다.
다음은 완료된 응용 프로그램의 모양입니다.

경탄할 만한!우리 해킹을 시작합시다.

Firestore 에 연결

우선, 우리는 Appsmith에 응용 프로그램을 만들어야 한다.Appsmith 계정에 계속 로그인하고 + 새 응용 프로그램 만들기 단추를 누르십시오.그리고 새로운 프로그램으로 가져가야 합니다. 거기서 Todo 프로그램을 구축할 수 있습니다.응용 프로그램을 Untitled Application 에서 Todo app 같은 이름으로 바꾸고 싶을 수도 있습니다.
이제 Firestore에 계속 연결할 수 있는 새로운 프로그램 설정이 생겼습니다.DB Queries 섹션 오른쪽에 있는 + 버튼을 클릭한 다음 new data source 버튼을 클릭합니다.Firestore에 연결할 것입니다. 지원하는 데이터베이스 목록에서 Firestore를 선택하십시오.
열린 양식에 Firebase 접속 자격 증명을 입력합니다.Firebase 콘솔의 프로젝트 설정에서 프로젝트 Id를 가져올 수 있습니다.데이터베이스 URL도 <your_project_id>.firebaseio.com입니다.

마지막으로 귀하는 귀하의 서비스 계정 증빙서류가 필요합니다.Firebase의 프로젝트 설정에서 서비스 계정 탭으로 이동합니다.[새 개인 키 생성] 버튼을 클릭합니다.이 파일은 JSON 파일을 다운로드하여 내용을 복사하여 서비스 계정 자격 증명 입력에 붙여 넣습니다.
당신의 연결을 저장하면 우리는 출발할 수 있습니다!

Firestore에서 데이터 읽기

현재 우리는 이미 데이터베이스에 연결되어 그것을 사용하기 시작할 수 있다.데이터베이스에 TODO가 쌓여 있다고 가정하면 다음과 같이 구성됩니다.

{
  "due": Date,
  "task": String,
  "created": Date
}

질의를 작성하여 데이터베이스에서 TODO를 쉽게 가져올 수 있습니다.Firestore 카드에서 New Query 버튼을 클릭하여 조회를 작성하여 TODO를 가져옵니다.
이 검색어의 좋은 이름을 get todos로 만듭니다.그 방법은 집합의 문서를 가져오는 것으로 설정됩니다.수집 경로의 경우 수집 경로를 입력합니다.우리는 계속해서 주문서를 ["-created"]로 설정할 수 있다. 이렇게 하면 문서의 창설 날짜에 따라 문서를 정렬할 수 있다.나의 문제는:

런 버튼을 클릭하면 Firestore 데이터베이스에서 일련의 TODO가 제공됩니다.
이제 우리는 목록의 작은 위젯으로 이 데이터를 표시하기 위해 캔버스로 돌아갈 수 있다.창의 작은 위젯 부분으로 가서 목록 창의 작은 위젯을 캔버스에 드래그합니다.구성 메뉴(속성 창)에서 Items 필드의 내용을 다음 바인딩으로 바꿉니다. 이 바인딩은 get_todos 조회의 데이터를 작은 위젯으로 끌어옵니다.

{{get_todos.data}}

변경 사항은 알 수 없지만, 현재 조회 중인 데이터를 작은 위젯에 입력하고 있으니 안심하십시오.현재 우리는 목록의 작은 위젯에 처리해야 할 사항을 계속 표시할 수 있다.

You can delete the Image widget in the list as we do not have images in our todos

몇 개의 텍스트 위젯을 드래그해서 업무 텍스트와 마감일을 표시합니다.각 텍스트 위젯의 텍스트 속성에 다음과 같은 바인딩을 사용하여 데이터를 표시합니다.
작업 필드의 경우

{{currentItem.task}}

기한 일자 필드에 사용됩니다.우리는 마감일을 설정하기 위해 내장된 직사각형 라이브러리를 사용하고 있다

{{moment(currentItem.due).fromNow()}}

잘했어!이 앱이 곧 출시됩니다!

새 업무 작성

우리가 새로운 대안을 만들 수 있다면 멋지지 않겠습니까?네, 우리 갑시다.
우리는 표 한 장이 필요하다.따라서, 모형의 작은 부품을 캔버스에 끌어다 놓으십시오.UI에서 열기 위한 단추가 필요하기 때문에 모드를 닫을 수 있습니다.이를 위해, 단추의 작은 위젯을 캔버스에 드래그합니다.속성 창에서 onClick 동작을 showModal로 설정하고, 모드 이름을 우리가 방금 만든 모드, 즉 Modal1 로 설정합니다.
지금 버튼을 누르면 자동으로 모드가 열릴 것입니다.잘 됐다!
모드에서, 우리는 todo 정보를 포착하기 위해 새로운 작은 부품이 필요하다.따라서 작업 정보를 수집하기 위해 입력된 작은 위젯과 마감일 정보를 수집하기 위해 날짜 선택기 작은 위젯을 계속 드래그합니다.내 캡처는 다음과 같습니다.

It is also important to rename the widgets so that we can easily access them later on. Here’s a gif showing how you can do that:

경탄할 만한!현재 우리는 계속해서 검색어를 작성해서 todo를 만들 수 있다.
우리가 이전에 설정한 Firestore 데이터 원본을 사용하여 새로운 조회를 만듭니다.질의create todo를 호출하고 문서 경로를 다음과 같이 설정할 수 있습니다.

todo_app/{{Math.random().toString(36).substring(7)}}

위의 컨텐트는 문서에 대한 임의 문자열 ID를 생성합니다.그런 다음 모달에서 구성된 입력 위젯에서 데이터를 가져오도록 바디를 설정합니다.

{
    "task": "{{task_input.text}}",
    "created": "{{moment().format()}}",
    "due": "{{due_datepicker.selectedDate}}"
}

경탄할 만한!이제 모드의 작은 위젯에 있는 확인 단추를 위해 돌아가서 onClick 작업을 작성할 수 있습니다.자바스크립트에 가까운 작은 JS 단추를 누르면 자바스크립트 모드를 사용하고 내용을 다음과 같이 설정합니다.

{{create_todo.run(() => {
    get_todos.run();
    closeModal('Modal1');
})}}

위의 스크립트는create todo 쿼리를 실행하고 get todos 쿼리와close form 모드를 실행하여 목록을 업데이트합니다.
한번 해봐.퀘스트를 작성하고 마감일을 설정하고 버튼을 눌러서 신기한 발생을 보세요!

업무 삭제

프로그램에 추가하고 싶은 마지막 기능은 완료된 업무를 삭제하는 것입니다.우리는 이 점을 해낼 새로운 기교가 필요하다.
삭제 검색어를 계속 작성합시다.delete todo라고 합니다.이 질의의 방법을 문서 삭제로 설정한 다음 [문서 경로]를 다음과 같이 바인딩으로 설정합니다. 이 바인딩은 appsmith의 로컬 저장소 API에서 읽기todo_path

{{appsmith.store.todo_path}}

이제 단추 위젯을 목록으로 드래그합니다.단추의 onClick 동작에 대해 현재 todos 경로를 로컬 저장소에 저장한 다음 delete_todo 조회를 실행해야 합니다.우리는 또한 실행 get_todos 조회를 통해 목록을 업데이트해야 한다.필요한 사항은 다음과 같습니다.

{{
    (() => {
      storeValue('todo_path', currentItem._ref.path);
      delete_todo.run(() => get_todos.run());
    })();
}}

그것을 붙여 테스트하다.멋있죠?

결론

Appsmith를 사용하여 포괄적인 CRUD todo Firebase 응용 프로그램을 만들 수 있습니다.다음은 실행 중인 응용 프로그램의gif입니다.

경탄할 만한!현재 DEPLOY 단추를 누르면 프로그램을 배치하고 친구와 공유할 수 있습니다. (share 단추를 누르면 공유 권한을 업데이트할 수 있습니다.)
만약 당신이 이것이 도움이 된다고 생각한다면, 사랑을 표현하고, 우리의 GitHub 환매협정 https://github.com/appsmithorg/appsmith 에 별을 남겨라.