Retool을 사용하여 분산 SQL 및 React 어플리케이션 신속 구축
이 블로그에서는 다음 단계를 안내합니다.
분산 SQL이란 무엇입니까?
분포식 SQL 데이터베이스는 데이터 인프라를 클라우드나 클라우드 네이티브 환경으로 이동하려는 조직에서 점점 유행하고 있다.이것은 일반적으로 TCO를 낮추거나 Oracle, MySQL, SQL Server 등 단일 RDBMS의 확장 제한에서 벗어나려는 바람에서 비롯된다.분산 SQL의 기본 특징은 다음과 같습니다.
분산 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을 사용하면 몇 분만에 구축할 수 있다.
Reference
이 문제에 관하여(Retool을 사용하여 분산 SQL 및 React 어플리케이션 신속 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/yugabyte/use-retool-to-quickly-build-distributed-sql-and-react-apps-f3m
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이 섹션에서는 클러스터에 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을 사용하면 몇 분만에 구축할 수 있다.
Reference
이 문제에 관하여(Retool을 사용하여 분산 SQL 및 React 어플리케이션 신속 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/yugabyte/use-retool-to-quickly-build-distributed-sql-and-react-apps-f3m
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ 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
$ 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)
northwind=# SELECT count(*) FROM products;
count
-------
77
(1 row)
northwind=# ALTER ROLE yugabyte WITH PASSWORD 'password';
먼저 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을 사용하면 몇 분만에 구축할 수 있다.
Reference
이 문제에 관하여(Retool을 사용하여 분산 SQL 및 React 어플리케이션 신속 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/yugabyte/use-retool-to-quickly-build-distributed-sql-and-react-apps-f3m
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
select * from products where product_name ilike {{ '%' + product_name_input.value + '%' }} order by product_id desc
우리는 지금 우리의 응용 프로그램을 테스트할 준비를 하고 있다.간단한 방법 중 하나는 Retool UI 오른쪽 상단의'공유'단추를 누르면'공공 액세스 링크'를 통해 응용 프로그램을 공유하는 것이다암호 보호를 활성화하는 것이 좋습니다.우리는 지금 우리가 가장 좋아하는 브라우저에서 응용 프로그램과 상호작용할 수 있어야 한다.
이름에'lager'가 있는 제품의 재고 수준을 찾아봅시다.텍스트를 입력하고enter를 누르십시오.Northwind 데이터베이스에서 두 가지 결과를 얻었습니다.제품 검색 기능이 예상대로 작동하고 있는 것 같습니다.
다음은 Northwind 데이터베이스에 신제품을 추가합니다.
'제품 추가'단추를 누르면 이름에'soda'가 있는 제품을 검색하여 신제품이 재고 중인지 확인하도록 합니다.
보아하니 슈퍼 사이다는 지금 우리의 재고 중이다.
또한 모바일 어플리케이션에서 동일한 URL을 사용하여 재고 어플리케이션에 액세스할 수 있습니다.비록 완벽하지는 않지만, 그것은 우리의 목적에 있어서는 이미 충분한 이동 우호이다.
결론
그렇습니다!현재 GKE에는 3개의 노드가 있는 YugabyteDB 집단이 있는데 예시적인 Northwind 데이터베이스와 간단한 목록 응용 프로그램이 있다. 이 응용 프로그램은 Retool을 사용하면 몇 분만에 구축할 수 있다.
Reference
이 문제에 관하여(Retool을 사용하여 분산 SQL 및 React 어플리케이션 신속 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/yugabyte/use-retool-to-quickly-build-distributed-sql-and-react-apps-f3m
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Retool을 사용하여 분산 SQL 및 React 어플리케이션 신속 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/yugabyte/use-retool-to-quickly-build-distributed-sql-and-react-apps-f3m텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)