Builder 16

[Appgyver] 데이터 바인딩(Data Binding)

바인딩 관련 예제를 작성합니다. 목표는 변수 A와 바인딩 된 Pragraph이 있고 input 필드를 변수 A와 바인딩하여 input필드 값에 value를 입력하면 Pragraph에 해당 값이 출력되도록 하겠습니다. 새로운 캔버스에 Paragraph와 Input 컴포넌트를 생성합니다. 다음으로 상단 VARIABLES 슬라이드바를 클릭하여 좌측 메뉴 PAGE VARIABLES를 선택하고 ADD PAGE VARIABLE을 클릭한다음 Variable name은 "input", Initial value는 "Welcom"으로 입력한 후 저장합니다. 다시 VIEW 화면으로 돌아와서 Paragraph 1에 변수명을 지정해야합니다. (맨 위 설명에서 변수 A에 해당합니다.) 이를 위해 우측 메뉴에서 Content 아이..

Builder/Appgyver 2021.05.25

[Appgyver] 페이지 변수(Page Variables)

상단 VARIABLES 슬라이드 바를 선택하면 좌측 메뉴에 많은 변수 및 파라미터 값 설정이 있습니다. 오늘은 페이지 변수(Page Variables)에 대해 확인해 보겠습니다. 설명은 다음과 같습니다. Page variables exist in the context of the current page. They are initialized when the page opens, and removed from app state when the page is closed. They should be used for things that exist in the context of the current page, such as form data, loading state of the current page, s..

Builder/Appgyver 2021.05.25

[Appgyver-과일정보] 3. 상세 페이지 만들기

1. 페이지 생성 좌측 상단 링크를 클릭하고 ADD NEW PAGE를 클릭합니다. 페이지명을 입력하여 과일정보 상세 페이지를 생성합니다. 2. 변수설정 과일 상세페이지에서 사용할 변수를 정의하고 데이터 바인딩해야 합니다. 상단 슬라이드를 VARIABLE를 선택하고 좌측 메뉴에서 PAGE PARAMETERS를 선택한다. 페이지 파라미터는 리스트에서 과일명을 선택할 때 넘겨 받을 변수명을 정의하며 유일한 값인 ID값을 파라미터로 받아야하기 때문에 Parameter name을 fruit_id로 입력하고 저장합니다. 좌측 메뉴에서 DATA VARIABLES를 클릭하고 우측 ADD DATA VARIABLE을 클릭, Resource ID인 fruits를 선택합니다. 변수명을 입력하고 Single data recor..

Builder/Appgyver 2021.05.24

[Appgyver-과일정보] 2. 리스트 페이지 만들기

1. 프로젝트 생성 "과일정보"라는 이름으로 새로운 프로젝트를 생성합니다. 우측 Page name은 현재 페이지의 이름으로 과일전체정보라는 이름으로 정하고 모든 과일을 리스트 형태로 보여주겠습니다. 2. Data Resource 셋팅 상단 툴바의 DATA 메뉴을 선택합니다. 바뀐 화면에서 우측 상단 ADD DATA RESOURCE를 클릭하고 REST API direct integration을 선택합니다. 이전 게시물에서 확인하였던 REST API 관련 데이터를 확인합니다. 확인할 내용은 총 3가지 입니다. - Base URL - 인증 키와 값 - GET 파라미터 변수명과 값 좌측 메뉴 중 BASE를 선택하고 Resource ID는 fruits로 정의하고 Resource URL은 위 정보의 Base URL..

Builder/Appgyver 2021.05.24

[Appgyver-과일정보] 1. Airtable 설정 및 REST API 확인

과일정보의 최종 완성 모습입니다. 페이지를 열면 미리 저장한 과일정보가 리스트로 출력됩니다. 리스트 페이지에서는 과일 이름과 평점을 별 아이콘으로 표시합니다. 과일 이름을 클릭하면 해당 과일의 상세 페이지로 이동합니다. 상세 페이지에서는 과일 이름과 사진, 설명이 표시됩니다. 참고로... 휴대폰 화면으로 보고 싶다면 앱스토어 들어가셔서 appgyver 검색 하시면 어플이 있습니다. 해당 어플 설치하시면 작업중인 프로젝트 확인이 가능합니다. 1. Data Resource 데이터베이스는 REST API를 지원하며 간단하게 사용할 수 있는 Airtable을 이용합니다. Airtable은 무료 계정 가입할 수 있으며 Airtable 관련 자세한 내용은 여기서 설명하지 않겠습니다. https://www.airta..

Builder/Appgyver 2021.05.24

[Appgyver] 설정 및 Composer Pro 기본 화면

요즘 코딩 없이 App을 개발할 수 있는 도구들이 많이 나옵니다. 유투브를 보다보니 아래와 같이 NO-CODE 빌더를 소개하는 내용도 있더군요. https://www.youtube.com/watch?v=3_ftZdc-sYI&t=261s 그 중 Appgyver을 몇달 전에 알게 되었고 이번에 백수된 김에 자세히 공부해보려 합니다. Appgyver 1. URL : https://appgyver.com/ AppGyver The world's first professional no-code platform to build React and React Native based apps for mobile, web and more. Sign up for the free-forever developer plan and..

Builder/Appgyver 2021.05.21
반응형