Retool을 사용하여 분산 SQL 및 React 어플리케이션 신속 구축

Retool는 WSIWYG SaaS 기반의 차세대 도구로 다양한 사전 구축 블록을 사용하여 기존 데이터 소스로부터 React 응용 프로그램을 신속하게 구축하여 내부적으로 사용할 수 있도록 합니다.개발자는 58개의 드래그 구성 요소 중에서 선택하고 사용자 정의 자바스크립트와 결합하여 Heroku와 같은 로컬이나 위탁 관리 환경에 안전하게 배치할 수 있는 응용 프로그램을 만들 수 있습니다.Retool은 PostgreSQL, GraphQL, AWS S3, Cassandra 등 30여 개의 네이티브 통합을 지원합니다.YugabyteDB는 PostgreSQL과 호환되므로 대부분의 타사 PostgreSQL 도구 및 응용 프로그램은 "즉시 사용 가능"Retool은 여기서도 예외가 아닙니다.
이 블로그에서는 다음 단계를 안내합니다.
  • Google Kubernetes 플랫폼에 3 노드의 YugabyteDB 클러스터 설치
  • Northwind 샘플 데이터베이스 구축
  • YugabyteDB에 PostgreSQL 드라이버
  • 를 통한 Retool 구성
  • Northwind 데이터베이스에 간단한 React 응용 프로그램을 구축하여 재고 관리를 돕습니다
  • 분산 SQL 또는 YugabyteDB의 초보자?계속 읽어 주세요.

    분산 SQL이란 무엇입니까?


    분포식 SQL 데이터베이스는 데이터 인프라를 클라우드나 클라우드 네이티브 환경으로 이동하려는 조직에서 점점 유행하고 있다.이것은 일반적으로 TCO를 낮추거나 Oracle, MySQL, SQL Server 등 단일 RDBMS의 확장 제한에서 벗어나려는 바람에서 비롯된다.분산 SQL의 기본 특징은 다음과 같습니다.
  • 데이터를 조회하고 모델링하는 데 사용되는 SQL API는 기본 키, 외부 키, 인덱스, 저장 프로세스, 트리거 등 전통적인 RDBMS 기능을 지원합니다.
  • 자동 분포식 조회가 실행되기 때문에 단일 노드가 병목이 되지 않는다.
  • 분산 SQL 데이터베이스는 자동 분산 데이터 저장소를 지원해야 합니다.이것은 하나의 노드가 고성능과 고가용성을 확보하는 병목이 되지 않도록 집단의 여러 노드에 자동으로 분포해야 하는 인덱스를 포함한다.
  • 분산 SQL 시스템은 또한 고도의 일치된 복제와 분산 ACID 사무를 제공해야 한다.
    분산 SQL이 무엇인지 자세히 보려면“What is Distributed SQL?”
  • Yugabyte DB가 뭐예요?


    YugabyteDB는 오픈소스, 고성능의 분포식 SQL 데이터베이스로 구글 스패너의 계발을 바탕으로 확장과 용량 오류 설계를 구축한다.YugabyteDB는 PostgreSQL wire와 호환되며 저장 프로세스, 트리거, UDF 등 고급 RDBMS 기능을 지원합니다.
    네, 계속 보여주세요.

    1단계: GKE 클러스터에 Helm 3을 사용하여 YugabyteDB 설치


    이 섹션에서는 클러스터에 YugabyteDB를 설치합니다.전체 단계를 기록합니다here.GKE 클러스터가 이미 있다고 가정하고 이를 시작점으로 실행합니다.
    먼저 해야 할 일은 도표 저장소를 추가하는 것이다.
    $ helm repo add yugabytedb https://charts.yugabyte.com
    
    이제 업데이트를 가져옵니다.
    $ helm repo update
    
    네임스페이스를 만듭니다.이런 상황에서 우리는 이를yb시범이라고 부른다.
    $ kubectl create namespace yb-demo
    
    예상 출력:
    namespace/yb-demo created
    
    우리는 지금 YugabyteDB를 설치할 준비를 하고 있다.다음 명령에서는 리소스가 제한된 환경에 값을 지정합니다.
    $ helm install yb-demo yugabytedb/yugabyte \
    --set resource.master.requests.cpu=1,resource.master.requests.memory=1Gi,\
    resource.tserver.requests.cpu=1,resource.tserver.requests.memory=1Gi,\
    enableLoadBalancer=True --namespace yb-demo --wait
    
    클러스터의 상태를 확인하려면 다음 명령을 수행합니다.
    $ kubectl get services --namespace yb-demo
    

    YugabyteDB와 Flyway 사이의 연결을 위해ybtserver 서비스의 외부 IP를 사용합니다.위의 화면 캡처에서 IP는 130.211.XX.XX, YSQL 포트는 5433 입니다.

    단계 2: Northwind 샘플 데이터베이스 만들기


    다음 단계는 예시 모드와 데이터를 다운로드하는 것이다.YugabyteDBin our Docs와 호환되는 다양한 예제 데이터베이스를 찾을 수 있습니다.이 강좌에서는 Northwind 예시 데이터베이스를 사용합니다.Northwind 데이터베이스에는'Northwind Traders'라는 허구의 회사의 판매 데이터가 포함되어 있으며 이 회사는 세계 각지에서 특색 있는 식품을 수입하고 수출한다.Northwind 데이터베이스는 중소기업ERP의 우수한 강좌 모델로 고객, 주문, 재고, 구매, 공급업체, 출하, 직원과 단일 항목 회계를 포함한다.
    다음 명령을 실행하여ybtserver 크레인에 연결합니다.
    $ kubectl exec -n yb-demo -it yb-tserver-0 /bin/bash
    
    스키마 및 데이터 파일을 다운로드하려면 다음 명령을 실행합니다.
    $ wget https://raw.githubusercontent.com/yugabyte/yugabyte-db/master/sample/northwind_ddl.sql
    $ wget https://raw.githubusercontent.com/yugabyte/yugabyte-db/master/sample/northwind_data.sql
    
    pod 케이스에서 YSQL 서비스 출구에 연결하고 다음 명령을 실행하십시오.
    $ exit 
    $ kubectl exec -n yb-demo -it yb-tserver-0 -- ysqlsh -h yb-tserver-0.yb-tservers.yb-demo
    
    데이터베이스를 만들고 다음 명령을 사용하여 데이터베이스에 연결합니다.
    yugabyte=# CREATE DATABASE northwind;
    northwind=# \c northwind;
    
    이제 데이터베이스 객체를 만들고 다운로드된 파일을 사용하여 다음 명령을 사용하여 데이터를 로드할 수 있습니다.
    northwind=# \i 'northwind_ddl.sql';
    northwind=# \i 'northwind_data.sql';
    
    다음 명령을 실행하여 테이블을 만들었는지 확인합니다.
    northwind-# \d
    
                     List of relations
     Schema |          Name          | Type  |  Owner
    --------+------------------------+-------+----------
     public | categories             | table | yugabyte
     public | customer_customer_demo | table | yugabyte
     public | customer_demographics  | table | yugabyte
     public | customers              | table | yugabyte
     public | employee_territories   | table | yugabyte
     public | employees              | table | yugabyte
     public | order_details          | table | yugabyte
     public | orders                 | table | yugabyte
     public | products               | table | yugabyte
     public | region                 | table | yugabyte
     public | shippers               | table | yugabyte
     public | suppliers              | table | yugabyte
     public | territories            | table | yugabyte
     public | us_states              | table | yugabyte
    (14 rows)
    
    간단한 yb-tserver-pod 을 발표하여 데이터가 있는지 확인합니다.
    northwind=# SELECT count(*) FROM products;
     count
    -------
        77
    (1 row)
    
    기본적으로 YugabyteDB 설치에는 기본SELECT 사용자의 암호 설정이 없습니다.하나를 지정하는 방법은 PostgreSQL에 있는 방식과 같습니다.
    northwind=# ALTER ROLE yugabyte WITH PASSWORD 'password';
    

    3단계: YugabyteDB가 있는 Retool을 네이티브 PostgreSQL 통합 구성 사용


    먼저 https://retool.com/에 가서 이 서비스를 등록하십시오.다음에 우리는 마법사를 통해 우리의 첫 번째 프로젝트를 설정할 것이다. 이것은 간단한 응용 프로그램으로 우리가 북풍 데이터베이스에 있는 재고를 관리하는 데 도움을 줄 것이다.

    PostgreSQL 리소스 선택


    돌이켜보면 YugabyteDB는 PostgreSQL과 호환됩니다. Retool의 경우 PostgreSQL 데이터베이스에 연결되어 있다고 생각합니다.

    연결 구성


    1단계에서 설명한 YugabyteDB의 외부 IP 및 포트 번호를 사용합니다.

    연결을 테스트합니다.성공하면 응용 프로그램을 계속 만드십시오.

    4단계: Retool을 사용하여 인벤토리 대시보드 만들기


    우리는 현재 바이어를 위해 간단한 React 응용 프로그램을 구축하여 쉽게 검색하고 북풍 데이터베이스에 신제품을 추가할 준비를 하고 있다.Retool은 몇 개의 템플릿을 포함하고 있습니다. 이 템플릿을 사용하여 제품의 작업 원리를 이해하거나 응용 프로그램을 구축하는 출발점으로 사용할 수 있습니다.나는 그들의 전자상거래 관리 예시 응용 프로그램을 계속 사용하고 나의 목적에 따라 그것을 조정했다.

    제품 검색



    이 특수한 기능에 대해 나는 구매자가 제품을 더욱 쉽게 검색하여 그들이 재고 수준을 검사할 수 있도록 하고 싶다.
    이 기능을 구축하기 위해 "Table"구성 요소를 사용했습니다. 이 구성 요소는 페이지가 있는 표 데이터를 표시합니다.그리고 이 구성 요소에 필요한 연결과 필요한 SQL 조회를 분배하여 테이블의 데이터를 검색했습니다.
    select * from products where product_name ilike {{ '%' + product_name_input.value + '%' }} order by product_id desc
    
    비록 당신은 대량의 다른 옵션을 지정할 수 있지만, 이 강좌의 목적을 위해서, 나는 그것을 간단하게 유지할 것입니다.

    다음 구성 요소는 텍스트로 다른 구성 요소나 조회를 제어하는 텍스트 입력 구성 요소입니다.이 구성 요소의 설정에서 주의해야 할 몇 가지 점은 입력 형식은 반드시'텍스트'이고, 자리 표시자 텍스트는'이름에 따라 검색...'이며, 텍스트를 제출할 때, 우리가 이전 단계에서 설정한'제품'구성 요소를 터치해야 한다는 것이다.

    신제품 추가



    제가 구축하고자 하는 다음 기능은 Northwind 데이터베이스에 신제품을 쉽게 추가할 수 있다는 것입니다.이를 실현하기 위해'텍스트 입력'구성 요소를 다시 사용했습니다. 연결할 자원과 변경 집합을 구성할 열을 지정했습니다.

    예를 들어 yugabyte 필드에 대한 자세한 내용은 다음과 같습니다.

    마지막으로, "Form"구성 요소를 사용하여 "Add Product"단추를 사용하십시오. 이 단추는 방금 설정한 "Add\u Product"조회를 통해 모든 텍스트 입력 필드를 제출합니다.

    마찬가지로, 당신은 대량의 다른 옵션을 지정할 수 있지만, 본 강좌의 목적으로, 나는 간단함을 유지하기로 선택했다.

    단계 5: 인벤토리 대시보드 테스트


    우리는 지금 우리의 응용 프로그램을 테스트할 준비를 하고 있다.간단한 방법 중 하나는 Retool UI 오른쪽 상단의'공유'단추를 누르면'공공 액세스 링크'를 통해 응용 프로그램을 공유하는 것이다암호 보호를 활성화하는 것이 좋습니다.우리는 지금 우리가 가장 좋아하는 브라우저에서 응용 프로그램과 상호작용할 수 있어야 한다.

    이름에'lager'가 있는 제품의 재고 수준을 찾아봅시다.텍스트를 입력하고enter를 누르십시오.Northwind 데이터베이스에서 두 가지 결과를 얻었습니다.제품 검색 기능이 예상대로 작동하고 있는 것 같습니다.

    다음은 Northwind 데이터베이스에 신제품을 추가합니다.

    '제품 추가'단추를 누르면 이름에'soda'가 있는 제품을 검색하여 신제품이 재고 중인지 확인하도록 합니다.

    보아하니 슈퍼 사이다는 지금 우리의 재고 중이다.
    또한 모바일 어플리케이션에서 동일한 URL을 사용하여 재고 어플리케이션에 액세스할 수 있습니다.비록 완벽하지는 않지만, 그것은 우리의 목적에 있어서는 이미 충분한 이동 우호이다.

    결론


    그렇습니다!현재 GKE에는 3개의 노드가 있는 YugabyteDB 집단이 있는데 예시적인 Northwind 데이터베이스와 간단한 목록 응용 프로그램이 있다. 이 응용 프로그램은 Retool을 사용하면 몇 분만에 구축할 수 있다.

    좋은 웹페이지 즐겨찾기