차례[숨다][보여 주다]
저는 최근에 HTML, CSS 및 JavaScript 이외의 웹 개발 접근 방식에 관심을 갖게 되었습니다.
노코드(no-code) 환경이 증가함에 따라 웹 애플리케이션 개발을 위한 보다 표준적인 접근 방식에 대한 몇 가지 대안이 있다는 사실을 발견한 것은 놀라운 일이 아닙니다.
코드가 거의 없는 WordPress와 같이 잘 알려진 일부 CMS 플랫폼에 익숙해야 합니다. 그러나 웹 앱을 구축하려는 경우 이러한 플랫폼은 제한적으로 보일 수 있습니다.
여기서는 강력한 기능인 Bubble.io를 소개합니다. 코드 없는 도구 이전과는 전혀 다른 방식으로 웹 앱을 구축할 수 있습니다.
본격적으로 알아보자!
버블아이오?
Bubble은 시각적 프로그래밍 언어와 웹 개발 프레임워크.
사용자는 이러한 프로그래밍 도구를 사용하여 고유한 온라인 응용 프로그램을 구성하고 데이터베이스 및 프로세스를 변경하며 페이지 구성 요소(이미지, 텍스트, 입력 양식, 지도)를 추가하고 인터페이스를 디자인할 수 있습니다.
강력한 제품을 구축하는 데 도움이 되는 이상적인 템플릿, 플러그인 및 서비스를 찾을 수 있는 마켓플레이스입니다.
일반적인 프로그래밍 프레임워크를 설정하지 않고도 Bubble을 사용하여 시장에서 소셜 네트워크, CRM(Customer Relationship Management)에 이르기까지 무엇이든 만들 수 있습니다.
사용자에게 친숙한 인터페이스와 포인트 앤 클릭 편집기를 사용하여 앱을 만들고 개인화할 수 있는 기능을 고객에게 제공합니다.
페이스북, SQL, 애널리틱스, 결제 앱 등 REST API를 제공하는 서비스와 연동하여 사용할 수 있습니다. 이를 통해 사용자는 태블릿과 모바일 장치에서 잘 보이도록 응용 프로그램의 기능과 모양을 개선하는 데 시간을 할애할 수 있습니다.
중소기업에서 대기업에 이르기까지 모든 비즈니스 규모에 적합합니다. Windows, Mac 및 웹에서 액세스할 수 있습니다.
비주얼 프로그래밍이란?
시각적 프로그래밍은 본질적으로 소리처럼 들립니다. 코드를 작성하여 수동으로 프로그래밍하는 대신 구성 요소를 클릭하고 페이지로 드래그하여 그래픽 방식으로 프로그래밍합니다.
그 짧은 설명에 현혹되지 마십시오.
온라인에서 본 다른 쿠키 커터 앱이나 웹사이트 구축 도구와는 다릅니다. 대부분의 앱 빌더는 기본 템플릿에 의존해야 하며 기능이 극도로 제한되어 있습니다. 특정 종류의 앱을 개발하고 개인화를 제한할 수만 있습니다.
Bubble에서 "비주얼 프로그래밍"과 "드래그 앤 드롭"의 개념은 쉬워 보이지만 엄청나게 강력합니다.
시각적 프로그래밍 환경에서는 텍스트, 그래픽, 입력 등과 같은 개체를 페이지로 드래그할 수 있을 뿐만 아니라 이러한 요소가 수행하는 작업을 구성할 수도 있습니다.
버블은 무엇을 하나요?
Bubble의 주요 목표는 누구나 코드를 작성하지 않고도 웹 앱을 만들 수 있도록 하는 것입니다.
그러나 이것은 쉽게 기억할 수 있는 목표 선언문을 제공하지만 이야기의 상당 부분을 생략합니다. 아이디어에서 시장으로 가는 길은 단순히 코드 라인을 만드는 것보다 더 복잡합니다.
기존 개발에서는 앱 생성, 성장 및 유지 관리의 특정 섹션에서 작업하는 고도로 훈련된 전문가 팀이 필요합니다. 이걸 고려하세요.
모든 앱에는 무엇이 필요합니까?
- 아무도 데이터에 무단으로 액세스하지 못하도록 하는 보안입니다.
- 항목, 기사 및 소셜 미디어 업데이트와 같은 정보를 저장하고 검색하기 위한 데이터베이스입니다.
- 사용자 기반 및 데이터 볼륨의 방해받지 않는 개발을 가능하게 하는 확장성.
- 앱을 매력적이고 사용하기 쉽게 만드는 쾌적한 사용자 인터페이스.
- 다양한 서비스 및 시스템과의 통합.
Bubble은 코더보다 훨씬 더 많은 것을 대체합니다. 이 모든 서비스를 시각적으로 매력적이며 고도로 자동화된 방식으로 제공하므로 간단하지는 않지만 한 사람이 모든 것을 처리할 수 있습니다.
그동안 노코드 플랫폼은 다양한 방식으로 코딩을 대체하려고 시도했다. 반응형 디자인과 애니메이션에서 호스팅, 버전 배포, 보안 및 데이터베이스 운영에 이르기까지 모든 것을 처리하여 앱이 시장에 도달하는 데 가능한 한 많은 장벽을 제거하는 것이 그 개념입니다.
API 커넥터를 사용하여 Bubble을 다른 서비스에 연결
API 커넥터는 아마도 시장에서 가장 중요한 플러그인일 것입니다. 이름에서 알 수 있듯이 이를 통해 다른 앱과 서비스에 연결하여 작업과 데이터를 공유할 수 있습니다.
이것이 어떻게 작동하는지에 대한 기술적 세부 사항을 탐구하는 대신 API가 수행할 수 있는 작업에 대한 다음 예를 고려하십시오.
- 액세스 권한 얻기 기계 학습 이미지 인식 및 번역과 같은 방법.
- 지구상 어디에서나 최신 기상 정보를 얻을 수 있습니다.
- Bubble에서 이벤트가 트리거되면 CRM에서 리드를 설정하거나 Google 캘린더에서 약속을 설정하는 것과 같은 정보가 시스템 간에 교환됩니다.
- 전 세계 어디에서나 항공편이나 호텔 숙박을 예약하세요.
- Google 지도에서 모든 회사의 전화번호, 위치, 사진, 로고 및 리뷰를 가져옵니다.
플러그인을 사용하여 기본 기능 향상
기술적으로는 JavaScript 코드 모듈, CSS 및 HTML을 기능 노드로 혼합합니다. JS.JSON으로 작성된 애플리케이션은 자체 언어의 기반 역할을 합니다.
앱을 구성하기 위해 이러한 용어를 완전히 이해할 필요는 없지만 한 가지 중요한 사실을 나타냅니다. 그것은 알려지고 승인된 웹 표준을 준수하므로 개발자가 기본 기능을 상당히 향상시킬 수 있습니다.
이는 기본 기능에 대한 수백 개의 무료 및 유료 확장을 사용할 수 있는 플러그인 사이트에서 이미 볼 수 있습니다. 또한 기본 기능이 충분하지 않은 지점에 도달하면 맞춤형 솔루션을 제공하려는 JavaScript 전문가가 많이 있음을 의미합니다.
어떤 유형의 앱을 개발할 수 있나요?
다양한 응용 프로그램을 만들 수 있으며 그 중 일부는 아래에 나와 있습니다.
- 커뮤니티가 있는 전문 시장용 앱.
- 다양한 분야의 구인 게시판용 앱입니다.
- 병원 인력을 위한 소프트웨어.
- 실제 매장용 POS 소프트웨어.
- 흰색 레이블이 있는 치과 사무용 소프트웨어입니다.
- 개인 비즈니스 재고 및 고객 서비스 소프트웨어.
- 브로커 및 고객 대면 부동산 집계 애플리케이션.
- 시중의 이벤트 및 코스용 앱(심지어 보트 포함).
- 전문 인증서에는 내부 테스트 애플리케이션이 필요합니다.
- 첫 번째 응답자를 위한 응용 프로그램입니다.
- 내부용 직원 관리 소프트웨어.
솔직히 말해서 플랫폼은 모든 것을 할 수 있도록 설계되지 않았습니다. 복잡한 비주얼과 모션이 포함된 게임 앱을 디자인하는 경우 이상적인 선택이 아닐 수 있습니다. 게다가 네이티브 앱(앱 스토어용 앱)을 만드는 경우 다른 타사 서비스와 통합해야 합니다.
주요 기능
거품에는 기능이 가득합니다. 여기에서 모든 것을 다룰 수는 없지만 가장 중요한 것들을 다루려고 노력할 것입니다.
1. 플러그인
인터넷에 있는 수많은 도구의 기능을 웹 애플리케이션. 예를 들어 사용자가 Facebook 계정을 사용하여 로그인하도록 하려면 Facebook 플러그인을 사용하여 이를 수행할 수 있습니다.
2. 개발
이를 통해 데스크톱 및 모바일 웹 브라우저용 동적 다중 사용자 앱은 물론 Instagram 또는 Airbnb와 유사한 사이트를 구축하는 데 필요한 모든 도구를 구성할 수 있습니다.
3. 디자인
모바일 친화적인 레이아웃과 동적 콘텐츠를 만들어 다른 사람들에게 기꺼이 자랑할 제품을 완성할 수 있습니다.
4. 호스팅
서버 유지, 인프라 또는 운영에 대해 반복해서 걱정할 필요가 없습니다.
안전하고 안전한 방식으로 배포 및 호스팅을 처리합니다. 사용자 수, 트래픽 볼륨 및 데이터 저장은 모두 제한이 없습니다.
Bubble로 앱 만들기(튜토리얼)
이제 행동으로 들어가 Bubble에서 뉴스 앱을 구축할 수 있는 방법을 살펴보겠습니다.
1. 시작
시작하려면 먼저 Bubble에 무료 계정 등록.
먼저 Bubble의 시각적 디자인 도구를 사용하여 플랫폼의 사용자 인터페이스. 포함할 주요 페이지 중 일부는 다음과 같습니다.
- 업로드 페이지 – 게시자가 기사를 개발하고 배포하는 웹사이트입니다.
- 홈페이지 – 최근 게시된 스토리 목록이 표시됩니다.
- 내러티브 페이지 - 각각의 고유한 스토리를 찾을 수 있는 페이지입니다.
- 출판사 페이지 - 특정 출판사의 이야기 목록을 보여주는 페이지입니다.
2. 데이터베이스 구성
제품 디스플레이를 배치한 후에는 애플리케이션에 연료를 공급할 데이터 필드를 구축하는 데 집중할 수 있습니다. 이러한 필드를 사용하여 제품의 기본 워크플로를 연결합니다.
이 예에서는 각 뉴스 기사에 대해 두 가지 고유한 데이터 유형을 설정합니다. 하나의 데이터 유형에는 이야기의 기본 사실(예: 제목, 주요 사진 및 게시자)이 포함되고 다른 데이터 유형에는 전체 내러티브 자체와 같은 더 큰 콘텐츠 파일이 포함됩니다.
개별 데이터 유형으로 정의하면 필요할 때만 필요한 정보를 로드할 수 있으므로 Bubble 편집기에서 생성해야 하는 자료의 양이 제한됩니다.
다음 데이터 유형 및 필드가 생성됩니다.
데이터 형식: 사용자
전지:
- 성함
- 다음 게시자는 게시자 목록입니다. 중요 참고 사항: 고유한 데이터 유형을 기반으로 필드를 목록으로 만들면 추가 필드를 만들지 않고도 모든 필수 데이터 필드를 쉽게 통합할 수 있습니다.
데이터 형식: 이야기
전지:
- Title
- 주요 이미지
- 작가
- 범주
- 작성자
- 스토리 내용
데이터 형식: 스토리 내용
전지:
- 스토리 내용
데이터 형식: 작성자
전지:
- 성함
- 심벌 마크
- 팔로워
3. 워크플로 구축
애플리케이션의 디자인과 데이터베이스를 구성했으므로 이제 모든 것을 통합하고 작동하도록 시작할 때입니다.
워크플로는 Bubble에서 이를 수행하기 위한 기본 방법입니다.
각 워크플로우는 이벤트가 발생할 때 발생하고(예: 사용자가 버튼 클릭) 응답으로 일련의 "작업"을 수행합니다(예: "사용자 가입", "데이터베이스 변경" 등). .
4. 뉴스 스토리 만들기
우리가 제공할 첫 번째 기능은 게시자가 뉴스를 작성하고 사이트에 게시할 수 있는 도구입니다.
업로드 페이지에서 데이터베이스에 데이터를 입력하는 데 적용될 많은 입력 항목을 통합하는 것으로 시작합니다. 텍스트 입력, 사진 업로더 및 드롭다운 선택이 이러한 필드의 예입니다.
또한 동적 옵션 목록을 표시하려면 게시자 드롭다운 메뉴를 맞춤설정해야 합니다. 각각의 새 기사가 게시자의 총 기사 목록에 추가되므로 데이터베이스에서 기존 게시자를 선택해야 합니다.
이 드롭다운 메뉴를 설정할 때 게시자가 될 옵션 유형을 선택합니다.
그런 다음 데이터 소스는 데이터베이스를 스캔하고 모든 현재 간행물 목록을 반환합니다. 마지막으로 게시자의 이름을 포함하도록 소스 캡션을 변경합니다.
작가가 각 페이지 항목에 필요한 정보를 입력하면 게시 버튼을 클릭하여 새로운 이야기를 생성합니다.
그런 다음 데이터베이스 내에서 내러티브로 설정된 데이터 유형으로 새로운 항목을 생성합니다.
그런 다음 필요한 필드로 데이터베이스를 채우기 시작해야 합니다. 각 페이지 입력 구성 요소를 해당 데이터베이스 열에 연결합니다.
먼저 이야기 자체에 연결될 이야기 콘텐츠 유형을 만듭니다.
다음으로 이 절차에 또 다른 단계를 추가하여 다른 것을 생성합니다. 이번에는 이야기 자체입니다.
이 이야기와 함께 개발한 첫 번째 내러티브 자료를 통합하여 플랫폼 전체에서 이 데이터를 쉽게 통합할 수 있습니다.
이 절차가 활성화될 때마다 새로운 이야기가 생성됩니다.
5. 피드에 동적 콘텐츠 표시
발행인이 모바일 앱에 자료를 업로드하기 시작하면 각 기사를 동적 목록으로 표시하는 로직을 홈페이지에 생성해야 합니다. 이는 반복 그룹 요소를 사용하여 수행할 수 있습니다.
반복 그룹은 데이터베이스와 함께 작동하여 동적 자료 목록을 표시하고 새로 고칩니다.
반복 그룹을 적용할 때 먼저 요소를 데이터베이스의 데이터 유형에 연결해야 합니다.
이 경우 자료의 종류를 이야기로 분류합니다. 또한 데이터베이스의 모든 테이블 목록으로 데이터 원본을 제공해야 합니다.
또한 이 반복 그룹을 각 스토리의 시작 날짜별로 정렬하여 시간 역순으로 목록을 표시합니다. 이제 각 그리드 내에 나타날 동적 자료 구성을 시작할 수 있습니다.
표시하려는 적절한 자료로 상단 행을 채우기만 하면 이 강력한 요소가 현재 데이터베이스의 데이터로 나머지 열을 채웁니다.
6. 페이지 간 데이터 전송
반복 그룹의 각 행 내에서 이벤트를 구성하는 것도 가능합니다. 플랫폼용 탐색 기능을 개발할 때 이 기능이 유용합니다.
뉴스 앱의 홈페이지에는 게시자, 추천 이미지, 기사 제목을 포함한 각 기사의 미리보기만 표시됩니다.
그러나 사용자가 스토리 페이지를 클릭할 때까지 기사의 전체 내용이 표시되지 않습니다. 워크플로 편집기를 사용하여 이 자료를 표시하기 위해 페이지 간에 데이터를 전송합니다.
시작하려면 스토리 그림을 클릭할 때 사용자를 스토리 페이지로 보내는 프로세스를 만듭니다.
이 프로세스를 개발하는 동안 탐색 이벤트를 사용하여 사용자를 다른 페이지로 이동하십시오.
드롭다운 메뉴에서 설명 페이지가 될 대상 페이지 유형을 선택합니다. 그런 다음 말풍선 편집기가 표시할 고유한 이야기를 이해할 수 있도록 이 페이지에 추가 정보를 제공해야 합니다.
제공해야 할 정보는 현재 세포 이야기에서 나옵니다.
7. 스토리 페이지에 동적 콘텐츠 표시
이 이벤트 데이터를 쉽게 검색하고 사용자가 특정 스토리 페이지로 이동했을 때 내러티브에서 관련 자료를 표시할 수 있습니다.
이 기능을 만들려면 먼저 대상 페이지 유형이 워크플로를 통해 전달하는 데이터 속성과 일치하는지 확인해야 합니다. 이 경우 스토리 페이지를 스토리 속성과 연결해야 합니다.
페이지의 콘텐츠 유형을 분류하여 기존 소스에서 적절한 데이터를 간단히 가져와 전달할 수 있습니다.
이제 단일 테이블의 정보를 표시하는 필드에 동적 자료를 삽입할 수 있습니다.
8. 게시자의 기사 표시
뉴스 항목을 읽은 후 사용자는 게시자의 전체 기사 카탈로그를 검토하도록 선택할 수 있습니다. 게시자 데이터 유형을 개발한 경우 게시자를 위한 별도의 페이지를 만드는 것은 원래 홈페이지를 만드는 것만큼 간단합니다.
이 페이지에서 페이지 유형을 게시자로 설정하여 시작해야 합니다.
그런 다음 홈 페이지에서 반복 그룹을 복사하고 설정을 편집합니다.
이 경우 반복 그룹의 데이터 원본은 게시자가 현재 페이지 게시자인 모든 기존 기사를 찾습니다.
9. 다음 게시자
MVP를 위해 구축할 세 번째 기본 기능은 플랫폼에서 게시자를 팔로우하는 기능입니다. 게시자 페이지에 팔로우 버튼을 추가하겠습니다. 이 아이콘을 클릭하면 사물을 수정하는 새로운 프로세스가 시작됩니다.
현재 페이지 게시자를 다음 게시 목록에 추가하면 현재 사용자가 변경됩니다.
그런 다음 현재 사용자를 추가하여 현재 페이지 게시자의 팔로어 목록을 업데이트해야 합니다.
10. 추가할 수 있는 추가 기능
이제 사용자 정의 데이터 필드를 작성하고 동적 정보를 표시하는 데 익숙해졌으므로 제품에 대해 생성한 경험으로 창의력을 발휘할 수 있습니다. 다음을 포함할 수도 있습니다.
- 사용자가 나중에 읽을 수 있도록 콘텐츠를 저장할 수 있는 기능을 만듭니다.
- 각 항목의 맨 아래에 반복되는 추천 기사 모음을 제공합니다.
- 사람들이 사이트에서 최신 콘텐츠를 찾는 데 도움이 되는 검색 도구를 만듭니다.
11. 결과
최종 앱은 다음과 같이 표시됩니다.
장점
- 많은 API 및 플러그인에 연결할 수 있습니다.
- 사용하기 쉽고 코드가 없는 애플리케이션입니다.
- 프로그래밍 경험이 없는 사람들도 이점을 누릴 수 있습니다.
- 다재다능하고 강력한 디자인 도구.
- 빠른 쿼리 처리.
단점
- 신뢰성 증가.
- 데이터 처리 속도가 느립니다.
- 성능이 제한됩니다.
가격 정책
무료 플랜을 사용하면 플랫폼에 대해 배우고 애플리케이션을 개발할 수 있습니다.
유료 구독에는 화이트 라벨링, 사용자 지정 도메인, Bubble API에 대한 액세스, 아래에 나열된 예약된 서버 용량과 같은 추가 기능이 포함됩니다.
- 개인 – $25/월(연간 지불) 또는 $29/월(매월 지불).
- 전문가 – $115/월(연간 지급) 또는 $129/월(매월 지급).
- 프로덕션 – $475/월(연간 지급) 또는 $529/월(매월 지급).
결론
Bubble은 정보만 표시하거나 최소한의 UI만 있는 웹 애플리케이션을 구축하기 위한 훌륭한 대안입니다.
사용이 매우 간단하고 Bubble에서 제공하는 자습서가 매우 유용합니다. 기본 설정에 따라 웹 앱을 디자인할 수 있는 온라인 비주얼 편집기입니다.
가장 좋은 점은 프로그래밍 경험이나 전문 지식이 필요하지 않다는 것입니다. Bubble은 코딩 방법을 알고 있는지 여부에 관계없이 모든 사람에게 적합합니다.
그러나 프런트엔드 언어에 대한 사전 이해는 이벤트 처리와 관련하여 수행하는 작업을 빠르게 파악할 수 있으므로 우위를 점할 수 있습니다.
그렇다면 버블의 능력에 대해 어떻게 생각하시나요?
우리가 댓글에 알려주세요!
아르베히
bubble.io 도구를 사용하여 제품을 판매하기 위한 상점을 만들 수 있습니까?