윅스 (Wix) 코딩 강의 고급 (Advanced) - 실시간 공지글 만들기 (Real time notifications for Real Estate) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 실시간 공지글 만들기 (Real time notifications for Real Estate) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 실시간 공지글 만들기 (Real time notifications for Real Estate) - 상호작용 (Interactions)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

웹사이트에 새로운 정보가 들어올 때마다 알림 메세지를 전달하는 기능을 만듭니다.

 

예제 보러가기 (View Example)

Buy | Realtime API S

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 데이터베이스 컬렉션
• 버튼
• 이미지
• 반복 레이아웃 / 리피터
• 텍스트

코드 (Code)

Upload

import * as realtime from 'wix-realtime';
import wixData from 'wix-data';

$w.onReady(function () {
	const channel = { name: 'new-property' };
	realtime.subscribe(channel, newPropertyUploaded);
	$w('#listingDataset').onBeforeSave(() => {});
});

async function newPropertyUploaded({ payload }) {
	if ($w('#notificationBox').hidden) {
		$w('#newPropertyButton').link = payload.link;
		$w('#newPropertyText').text = payload.message;
		$w('#notificationBox').show('fade');
		setTimeout(() => $w('#notificationBox').hide('fade'), 10000);
	} else {
		console.log("Another propery is shown, waiting...");
		setTimeout(() => newPropertyUploaded({ payload }), 10000);
	}
}

 

Buy

import * as realtime from 'wix-realtime';
import wixData from 'wix-data';

$w.onReady(function () {
	const channel = { name: 'new-property' };
	realtime.subscribe(channel, newPropertyUploaded);
});

async function newPropertyUploaded({ payload }) {

	if ($w('#notificationBox').hidden) {
		$w('#newPropertyButton').link = payload.link;
		$w('#newPropertyText').text = payload.message;
		$w('#notificationBox').show('fade');
		setTimeout(() => $w('#notificationBox').hide('fade'), 10000);
	} else {
		setTimeout(() => newPropertyUploaded({ payload }), 10000);
	}
}

 

data.js

import { publish } from 'wix-realtime-backend';

export function Listings_afterInsert(item, context) {
	const channel = { name: 'new-property' };
	let message = `New property at ${item.neighbourhood} neighborhood added to site now! `;
	let link = item["link-listings-title"];
	publish(channel, { message: message, link: link }, { includePublisher: true });
	return item
}

 

Listings (Title)

import * as realtime from 'wix-realtime';
import wixData from 'wix-data';

$w.onReady(function () {
	if (!$w('#notificationBox').hidden) $w('#notificationBox').hide('fade');
	const channel = { name: 'new-property' };
	realtime.subscribe(channel, newPropertyUploaded);
});

async function newPropertyUploaded({ payload }) {

	if ($w('#notificationBox').hidden) {
		$w('#newPropertyButton').link = payload.link;
		$w('#newPropertyText').text = payload.message;
		$w('#notificationBox').show('fade');
		setTimeout(() => $w('#notificationBox').hide('fade'), 10000);
	} else {
		setTimeout(() => newPropertyUploaded({ payload }), 10000);
	}
}

 

 

API

Wix Real Time Backend API

Wix Real Time API

Wix Data API

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 검색창 만들기 (Search a Database) - 데이터 (Data)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 검색창 만들기 (Search a Database) - 데이터 (Data)

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Real time notifications for new Real Estate | Corvid by Wix Examples | Wix.com