Wix Blocks 튜토리얼: 카운트다운 위젯 생성하기
템플릿 포함 사항
1 단계 | 위젯 디자인 완료하기
- 템플릿을 엽니다.
- 위젯 및 디자인 아래에서 카운트다운을 클릭합니다.
- 상단 바의 요소 추가 아이콘을 클릭합니다.
- 텍스트를 선택합니다. 48px 제목 상자를 위젯에 끌어다 놓습니다.
- 텍스트 편집을 클릭한 후 텍스트를 SS로 변경합니다.
- 속성을 사용해 텍스트 색상을 흰색으로 변경하고 텍스트를 가운데에 배치합니다.
- 텍스트 상자를 선택한 후 를 사용해 SECONDS 라벨 위의 그리드 사각형으로 이동합니다.
- 를 사용해 크기를 조정합니다.
2 단계 | 위젯의 API 속성 추가 및 정의하기
- endDate: 카운트다운이 0에 도달하는 종료일을 정의합니다. 사이트 제작자는 이 속성을 사용해 종료일을 변경해 위젯을 사이트에 맞게 사용자 지정할 수 있습니다.
- emailId: 사용자가 알림을 신청할 때 발송될 이메일 메시지를 결정합니다.
위젯 요소에 ID 지정하기
- 텍스트 상자를 클릭합니다.
- 속성 및 이벤트 패널에서 텍스트 상자에 ID를 지정합니다. 이 예제에서 ID는
secondsTxt
입니다. 다른 요소에는 이미 ID가 부여되어 있습니다.
'endDate' 및 'emailId' 속성 정의하기
- API 패널에서 속성 추가를 클릭합니다.
- 속성 이름
endDate
를 입력합니다. - 속성 유형을 선택합니다. 이 경우 날짜 및 시간을 선택합니다(날짜는 미국 형식인 mm/dd/yyyy로 표시됩니다).
- 기본값을 선택합니다(사이트 제작자는 에디터에 위젯을 설치할 때 이를 변경할 수 있습니다).
- 속성에 마우스오버하고 표시되는 아이콘을 클릭합니다.
- 트리거된 이메일에 대한 다른 속성을 생성하고 이름을
emailId
로 지정합니다. 이는 기본값이 없는 텍스트 유형 속성입니다.
3 단계 | 위젯이 작동하도록 코드 추가하기
유틸리티 가져오기
- 공개 및 백엔드 메뉴를 클릭합니다.
- 공개 아래에서 dateUtils.js를 선택합니다. 그러면 코드 패널에서 파일이 열립니다.
새 함수를 고려하도록 코드 변경하기
카운트다운 위젯이 카운트를 업데이트하도록 updateTime()
함수를 생성합니다. 새 함수는 다음과 같이 표시됩니다.
1$widget.onPropsChanged(function () { }); function updateTime() { const {days, hours, minutes, seconds} = getRemainingTime (new Date($widget.props.endDate)); $w('#daysTxt').text = days.toString(); $w('#hoursTxt').text = hours.toString(); $w('#minutesTxt').text = minutes.toString(); $w('#secondsTxt').text = seconds.toString(); }
또한, 위젯이 남은 시간을 업데이트하는 간격을 설정해야 합니다.
그러기 위해서는 onReady()
함수에 다음 코드를 추가하세요. 그러면 위젯이 1초 간격으로 업데이트됩니다.
1$w.onReady(function () { updateTime(); if (wixWindow.viewMode !== "Editor") { setInterval(updateTime, 1000); } });
위젯 미리보기 및 해당 API 속성 테스트
- 미리보기를 클릭합니다. 위젯은 종료일까지 매 초마다 카운트다운되어야 합니다.
- API 속성 테스트를 클릭합니다. 이전에 설정한 기본값이 적용된 패널이 표시됩니다.
- 날짜를 변경해 위젯이 응답하고 새로운 날짜로 카운트다운하는지 확인합니다.
4 단계 | 사용자 지정 패널 생성 및 코딩하기
사용자 지정 패널 추가하기
- 상단 바에서 패널 탭을 클릭합니다.
- 패널 추가를 클릭합니다.
- 패널 이름을 지정합니다. 이 예시에서는 '내 설정'입니다.
- 패널 추가를 클릭합니다.
- + 요소 추가를 클릭합니다.
- 텍스트 입력을 선택합니다. 이는 종료일에 사용됩니다.
- 속성 및 이벤트를 클릭합니다. 텍스트 입력에 ID로
endDateInput
을 지정합니다. - 텍스트 요소를 선택한 후 설정을 클릭합니다.
- 입력란 제목 입력란에 '종료일'이라는 이름을 추가합니다.
- 기본 텍스트 입력란의 텍스트를 삭제합니다.
- 플레이스홀더 텍스트를 '종료일'로 설정합니다.
- 섹션 구분선을 추가합니다.
- 설정을 클릭합니다. 섹션 제목 입력란에 제목을 추가합니다. 이 예시에서는 '트리거된 이메일'입니다.
- 다른 텍스트 입력을 추가합니다. 텍스트 입력에 ID로
emailIdInput
을 지정합니다. - 텍스트 요소를 선택한 후 설정을 클릭합니다.
- 입력란 제목 입력란에 '이메일 ID'라는 이름을 추가합니다.
- 기본 텍스트 입력란의 텍스트를 삭제합니다.
- 플레이스홀더 텍스트를 '이메일 ID'로 설정합니다.
사용자 지정 패널에 코드 추가하기
패널 요소가 위젯과 상호 작용하고 에디터에서 작업을 수행할 수 있도록 하려면 코드에서 Velo wix-widget
모듈을 사용할 수 있습니다.
위젯 API를 사용하려면, wix-widget
모듈에서 wixWidget
을 가져오세요.
onReady()
함수 앞에 다음 코드를 삽입합니다.
1import wixWidget from 'wix-widget';
값이 변경될 때 위젯을 업데이트하려면 onChange
이벤트를 등록해야 합니다. 또한, 일부 비동기 함수를 사용하게 되므로 onReady ()
함수에 async
를 추가해야 합니다.
onReady()
함수는 다음과 같아야 합니다.
1$w.onReady(async function () { const { endDate, emailId } = await wixWidget.getProps(); $w('#endDateInput').value = endDate; $w('#emailIdInput').value = emailId; $w('#endDateInput').onChange(e => { wixWidget.setProps({ endDate: e.target.value }); }); $w('#emailIdInput').onChange(e => { wixWidget.setProps({ emailId: e.target.value }); }); });
5 단계 | 위젯 구성하기
위젯의 플로팅 액션바에 사용자 지정 패널 추가하기
- 상단 바에서 구성을 클릭합니다.
- 카운트다운 위젯을 선택합니다. 플로팅 액션바가 나타납니다.
- 설정을 클릭합니다.
- 액션 버튼 설정을 클릭합니다. 주요 액션 설정 패널이 나타납니다.
- 드롭다운 목록에서 내 설정을 선택해 사용자 지정 패널을 선택합니다.
6 단계 | 두 번째 (내부) 위젯 추가 및 등록 로직 구현하기
카운트다운 위젯에 등록 위젯 추가하기
- 디자인 탭에서 카운트다운 위젯을 선택합니다.
- 추가 옵션을 클릭하고 위젯 추가를 선택합니다.
- 등록을 선택합니다. 내부 위젯은 카운트다운 위젯 중간에 표시됩니다.
- 카운트다운 위젯의 하단에 맞게 내부 위젯을 끌어다 늘립니다.
- 속성 및 이벤트에서 해당 ID를
등록
으로 변경합니다.
메인 위젯 코드에 등록 로직 구현하기
사전 설치 유틸리티인 contactUtils.js
를 사용해 메인 (카운트다운) 위젯에서 사용자 등록을 위한 코드를 구현합니다. 이는 wix-crm
API를 사용해 연락처를 컬렉션에 연결합니다.
이 코드는 정보를 컬렉션으로 전달합니다. 나중에 컬렉션을 생성할 때 사용할 유틸리티를 사용합니다. 코드에서 getSubscriptionsCollectionName()
을 확인할 수 있습니다.
- 새로운 async 함수를 추가합니다.
- 이름은
onSubmit
입니다. 이는 연락처 추가 유틸리티를 사용합니다.
코드는 다음과 같아야 합니다.
1 async function onSubmit({ email }) { const contact = await createContact(email); wixData.insert(getSubscriptionsCollectionName(), { endDate: new Date($widget.props.endDate), emailId: $widget.props.emailId, contactId: contact.contactId }); }
2
onSubmit 이벤트 등록하기
onReady()
에서 updateTime()
함수 뒤에 다음 코드를 추가합니다.
1$w('#registration').onSubmit(onSubmit);
7 단계 | 앱 제작 및 네임스페이스 지정하기
첫 번째 빌드
- 제작을 클릭합니다.
- 앱의 네임스페이스를 입력한 후 다음을 클릭합니다.
- 메이저 버전을 선택한 후 제작을 클릭합니다.
- 버전 1.0이 제작되었다는 메시지가 표시됩니다. 확인을 클릭해 앱 작업을 계속합니다.
8 단계 | 위젯에 컬렉션 추가하기
템플릿에는 공개 및 백엔드 아래 collectionUtils.js에 getSubscriptionsCollectionName()
라는 유틸리티가 사전 설치되어있습니다. 이는 컬렉션의 전체 이름을 생성하므로 코드에서 참조할 때마다 전체 앱 네임스페이스를 추가할 필요가 없습니다.
컬렉션 유틸리티 구성하기
- 공개 및 백엔드 아래에서 collectionUtils.js를 클릭합니다.
- 앱의 네임스페이스를 추가합니다.
1
2const NAMESPACE = '@mywixaccount/my-app-namespace'; export function getSubscriptionsCollectionName() { return `${NAMESPACE}/subscriptions`; }
컬렉션 추가하기
- 데이터베이스를 클릭합니다.
- + 컬렉션 추가를 클릭합니다.
- 컬렉션에 의미 있는 이름을 지정합니다. 이 예시에서는 구독입니다.
- 추가를 클릭합니다.
컬렉션에 입력란 추가하기
- 아이콘을 클릭해 컬렉션에 입력란을 추가합니다.
- 입력란 유형 드롭다운 메뉴에서 날짜를 선택합니다.
- 입력란 이름 입력란에 endDate를 입력합니다. 이는 사람들이 등록할 수 있는 마지막 날짜가 됩니다.
- 저장을 클릭합니다.
- 이제 트리거된 이메일에 대해 텍스트 유형 입력란을 추가하고 이름을 emailId로 지정합니다.
- 다른 텍스트 유형 입력란을 추가하고 이름을 contactId로 지정합니다. 여기에는 등록된 사용자의 연락처 정보가 저장됩니다.
- 이제 부울 유형 입력란을 추가하고 이름을 notified로 지정합니다. 이를 통해 구독자에게 알림이 한 번만 발송됩니다.
컬렉션 권한 설정하기
- 데이터베이스에서 컬렉션에 대한 추가 옵션을 클릭합니다.
- 권한 및 공개 설정을 선택합니다.
- 콘텐츠 추가 가능 드롭다운 메뉴를 선택합니다.
- 누구나를 선택합니다.
- 저장을 클릭합니다.
9단계 | Wix 에디터에서 사이트에 앱 설치하기
- 앱을 제작한 후 사이트를 엽니다.
- 앱 추가를 클릭합니다. .
- 사용자 지정 앱을 클릭합니다. 모든 앱 목록이 표시됩니다.
- 사용 가능한 앱 목록에서 앱을 선택합니다.
- 앱 설치를 클릭합니다.
- 요소 추가를 클릭합니다.
- 내 위젯을 선택합니다.
- 위젯을 두 번 클릭해 사이트에 추가합니다.
이메일 ID 설정하기
- 상단 바의 사이트 메뉴에서 내 대시보드를 엽니다.
- 개발자 도구에서 트리거된 이메일로 이동합니다.
- 시작하기를 클릭합니다.
- 제목을 입력합니다.
- 에디터 도구를 사용해 이메일을 디자인합니다.
- 저장 및 게시를 클릭합니다.
- 발신자 정보, 발신자 이름 , 회신 이메일을 추가한 후 저장을 클릭합니다.
- 닫기를 클릭합니다.
- 저장 및 게시를 다시 클릭합니다. 등록한 모든 사람에게 발송되도록 디자인한 이메일로 연결되는 식별 코드가 생성됩니다.
- 사용자 지정 패널의 이메일 ID 입력란에 해당 코드를 입력합니다.
Wix 에디터에서 백엔드 코드를 사용해 구독자에게 알림 발송하기
알림 함수 호출하기
- Wix 에디터의 공개 및 백엔드에서 백엔드 아래 + 웹 모듈 추가를 클릭합니다.
- 이름을
backend.jsw
로 지정합니다. - backend.jsw 아래의 사이트 코드 섹션에서 백엔드 함수를 가져옵니다.
코드는 다음과 같아야 합니다.
1import { notify } 'myWixId/my-application-name-backend';
이제 사이트의 코드 섹션에 있는 backend.jsw에 내보내기 함수 invokeNotify
를 생성합니다.
코드는 다음과 같아야 합니다.
1export function invokeNotify() { return notify (); }
- 백엔드에서 추가를 클릭합니다.
- 예약 작업 추가를 클릭합니다. 사이트 코드 섹션의 jobs.config 아래에 다음 코드를 추가합니다. 이 예시에서 알림 함수는 매시 정각 10분에 호출됩니다.
1{ "jobs": [{ "functionLocation": "/backend.jsw", "functionName": "invokeNotify", "description": "", "executionConfig": { "cronExpression": "10 * * * *" } }] }
10단계 | 앱 테스트하기
- 사이트를 게시합니다.
- 등록 후 이메일 알림을 수신합니다.
- 에디터로 돌아가 컬렉션을 확인합니다.
- 새로운 구독자가 추가된 것을 확인할 수 있습니다. 알림 이메일이 발송되면 알림 발송 완료 입력란에도 체크 표시가 됩니다.