윅스 (Wix) 코딩 - 데이터 API로 작업하기 (Wix Code: Working with the Data API)

윅스 (Wix) 코딩 - 데이터 API로 작업하기 (Wix Code: Working with the Data API)

 

 

 

설명)

 

소개 (Introduction)

Wix Data API를 사용하면 코드를 사용하여 데이터베이스 컬렉션에 대한 작업을 수행할 수 있으며 에디터만 사용 가능한 것보다 많은 기능을 제공합니다.

 

Data API를 사용하지 않고 데이터를 관리하는 방법, 데이터베이스 구조 및 데이터 후크에 대한 자세한 내용은 데이터베이스 컬렉션 정보를 참조합니다.

 

Wix Data에는 컬렉션의 데이터를 관리하고 컬렉션에 대한 쿼리를 작성하고 다양한 작업에 대한 후크를 등록할 수 있는 기능이 포함되어 있습니다.

 

 

 

중요 :

- 먼저 Wix Data API를 사용하여 작업하기 전에 에디터에서 컬렉션을 만들어야합니다.

- Wix Data API를 사용하려면 wixData를 가져와야합니다.

 

 

//Add the following to the top of your code to import wixData:
import wixData from 'wix-data';

 

 

 

 

 

Wix 데이터 API (Wix Data API)

Wix Data API를 사용하면 컬렉션의 데이터를 조작하고 의미있고 유용한 방법으로 데이터를 검색할 수 있습니다. 그것은 다음을 포함합니다 :

- wix-data : 컬렉션의 데이터를 쿼리하고 조작할 수 있게 해주는 함수.

- 컬렉션과 상호 작용하기 전후에 코드를 실행할 수 있는 후크. 후크는 데이터 관리자의 컬렉션에 추가됩니다. 후크 코드는 백엔드에 있는 data.js 파일에 기록됩니다.

- WixDataFilter : WixDataQuery 필터링을 위한 함수.

- WixDataQuery : 쿼리 정의 및 쿼리를 구체화할 수 있는 함수가 포함된 개체입니다.

- WixDataQueryResult : 쿼리 결과, 쿼리에 대한 다른 정보 및 페이지 번호바 메서드를 포함하는 객체입니다.

- WixDataSort : WixDataQuery를 정렬하기 위한 함수.

 

 

온라인 보석상에 등록한 고객의 데이터베이스를 구축한다고 가정해 보겠습니다. 등록 양식은 각 고객에 대한 기본 개인 정보를 수집합니다. 또한 고객에게 쇼핑할 수 있는 친척과 같은 다른 정보를 요구할 수 있으므로 특별 제안 및 판매에 대한 알림을 언제 보내야하는지 알 수 있습니다. 더 나은 구매 제안을 제공할 수 있도록 일반적인 관심사를 알고 싶을 수도 있습니다. 고객이 상품을 구매하면 구매 내역도 저장하게됩니다.

 

 

 

컬렉션의 항목은 다음과 같습니다.

 

let newCustomer = {
  name: "Mary",
  age: 47,
  _id: "mary.jones@myemail.com",
  phone: "(345)123-4567",
  pic: "Mary.jpg",
  labels: ["female", "adult", "hiking"],
  relatives: ["husband", "daughter"],
  purchases: [
    {item: "watch", material: "gold", price: "2000.00"},
    {item: "ring", material: "platinum", price: "500.00"},
    {item: "bracelet", material: "silver", price: "250.00"}
  ]
};

 

 

그런 다음 insert 메서드를 사용하여 컬렉션에 이 항목을 추가합니다.

 

wixData.insert("Customer", newCustomer);

 

 

 

고객 목록이 증가하고 사이트에 더 많은 트래픽이 발생하고 고객 방문이 반복되면 컬렉션의 항목을 저장, 업데이트, 제거 및 수정할 수 있습니다. 컬렉션을 만들 때 가장 효과적인 데이터 모델링을 사용할 수 있도록 Wix 데이터 모델 및 쿼리 방법을 익히는 것이 중요합니다.

 

 

 

 

 

Wix 데이터의 권한 작업 (Working with Permissions in Wix Data)

공개 및 페이지 파일에서 Wix Data 메서드를 사용할 때 사이트 방문자가 가질 수있는 권한을 고려해야합니다. 일부 메소드는 컬렉션의 데이터를 수정하지만 다른 메소드는 데이터를 읽기만 합니다. 사이트 방문자는 이러한 방법이 작동하는 데 필요한 권한을 가져야합니다. 메소드가 불충분 한 권한으로 호출되면 메소드가 실패합니다. 자세한 내용은 데이터베이스 수집 권한 정보를 참조합니다.

 

기본적으로 사이트 방문자의 권한은 백엔드 코드에서 호출하는 Wix Data 메소드에도 적용됩니다. 그러나 WixData 메소드를 options 코드로 전달할 수 있습니다 : value pair suppressAuth : true.

 

 

 

 

Wix 데이터의 후크 작업 (Working with Hooks in Wix Data)

wix-data 모듈에는 컬렉션과 상호 작용하기 전이나 후에 코드를 실행할 수 있는 후크가 있습니다. 데이터 후크를 사용하는 방법을 참조합니다.

코드에서 메소드가 호출되면 시스템은 먼저 해당 메소드가 올바른 사용 권한으로 호출되었는지 확인합니다. 메소드에 후크를 등록한 경우 메소드가 사용 권한 검사를 통과한 경우에만 실행됩니다.

value pair suppressHooks : true 속성을 가진 메소드의 options 매개 변수를 전달하여 등록된 후크없이 백엔드에서 Wix Data 메소드를 호출 할 수 있습니다.

 

 

 

컬렉션 쿼리하기 (Querying Your Collection)

데이터 컬렉션은 의미있는 방법으로 데이터를 검색할 수 있는 경우에만 유용합니다. 컬렉션을 조회하려면 query 메소드를 사용합니다.

기본적으로 쿼리는 컬렉션의 처음 50개 항목을 _createdDate 값의 내림차순으로 반환합니다. 예를 들어, 다음 쿼리는 _createdDate 값의 내림차순으로 정렬된 Customer 컬렉션의 처음 50개 항목을 콘솔에 기록합니다.

 

wixData.query("Customer")
  .find()
  .then( (results) => {
    console.log(results.items);
  } );

 

 

 

find( ) 함수는 쿼리에 연결되어 쿼리를 실행합니다. find( ) 함수는 WixDataQueryResult 객체로 확인되는 약속을 반환합니다. find( )는 프로미스(Promise)를 반환하기 때문에 결과를 표시하기 위해 쿼리에 then( ) 도 연결됩니다.

쿼리에서 반환하는 항목을 표시하려면 WixDataQueryResult 개체의 items 속성을 사용합니다.

 

 

 

 

쿼리 수정하기 (Refining Your Query)

쿼리의 결과를 구체화하려면 WixDataQuery 메소드를 쿼리에 연결합니다. 예를 들어, 20세 이상의 모든 고객에 대해 Customer 컬렉션을 쿼리한다고 가정해 보겠습니다. 다음과 같이 gt( ) (보다 큼) 함수를 쿼리에 연결합니다.

 

wixData.query("Customer")
  .gt("age", 20)
  .find()
  .then( (results) => {
    console.log(results.items);
  } );

 

 

 

query( ) 함수는 쿼리의 정의가 포함된 WixDataQuery 객체를 반환합니다. 각 WixDataQuery 메소드는 WixDataQuery 객체도 반환합니다. 둘 다 동일한 유형의 객체를 반환하므로 여러 WixDataQuery 메소드를 query( ) 호출에 연결하여 쿼리 결과를 더욱 구체화할 수 있습니다.

예를 들어 이전 쿼리의 결과를 가져오고 남성 고객만 반환한다고 가정해 봅시다. paremeterName 및 Male을 값으로 사용하여 hasSome 메소드를 쿼리에 추가합니다.

 

wixData.query("Customer")
  .gt("age", 20)
  .hasSome("labels", "Male")
  .find()
  .then( (results) => {
    console.log(results.items);
  } );

 

 

 

그러면 WixDataQuery 객체에 저장된 쿼리 정의에 gt( ) 및 hasSome( ) 조건이 추가됩니다. 이제 find( )를 호출하면 이 조건을 사용하여 쿼리를 실행합니다.

 

 

 

 

 

쿼리 결과 (Query Results)

쿼리 결과는 WixDataQueryResult 객체에 반환됩니다. 이 객체에는 다음과 같은 속성이 있습니다.

- currentPage : 현재 결과 페이지 번호의 인덱스 (0부터 시작).

- items : 쿼리 결과를 저장하는 배열

- length : 현재 결과 페이지의 항목 수

- pageSize : 정의된 제한을 기반으로하는 쿼리 페이지 크기

- query : 쿼리에 사용된 WixDataQuery 객체

- totalCount : 쿼리와 일치하는 총 항목 수

- totalPages : 정의된 스킵 및 한계 값을 기반으로 쿼리가 생성하는 총 페이지 수

 

예를 들어, 다음은 20세 이상의 남성 고객에 대한 쿼리의 결과 수를 표시합니다.

 

wixData.query("Customer")
 .gt("age", 20)
 .hasSome("labels", "Male")
 .find()
 .then( (results) => {
   console.log(results.totalCount);
 } );

 

 

 

페이지 번호 매기기 (Pagination)

WixDataQueryResult에는 next( ) 및 prev( ) 함수가 있어 결과에서 앞뒤로 쉽게 페이지할 수 있습니다.

예를 들어, 반지를 구입한 20세 이상의 모든 여성 고객을 대상으로 Customer 컬렉션을 필터링한다고 가정해 봅니다. 또한 결과의 각 페이지에 15 개의 항목이 표시되기를 원합니다. 제한 방법을 사용하여 쿼리에서 반환하는 결과 수를 제한합니다.

 

let femaleRingTwenty;

wixData.query("Customer")
  .ge("age", 20)
  .hasSome("labels","Female")
  .eq("purchases.item", "ring")
  .limit(15)
  .find()
  .then( (results) => {
    console.log(results.items);
    femaleRingTwenty = results;
  } );

 

 

첫 번째 결과부터 시작하여 15일까지 끝나는 쿼리의 처음 15개 결과가 표시됩니다.

결과의 다음 페이지를 표시하려면 결과에서 next를 호출합니다.

 

femaleRingTwenty.next()
  .then(function(results) {
    console.log(results.items);
    femaleRingTwenty = results;
  } );

 

 

next( ) 함수는 프로미스(Promise)를 반환하기 때문에 next( )를 호출하여 chain( )을 연결하고 프로미스(Promise)의 해상도를 콘솔에 기록하면 16번째에서 30번째 결과가 반환됩니다. 또한 femaleRingTwenty에 next( ) 결과를 지정하면 femaleRingTwenty에서 prev( ) 또는 next( )를 호출하여 결과의 ​​이전 또는 다음 페이지를 가져올 수 있습니다.

 

 

 

 

 

 

 

 

이전 및 다음 페이지와 수동 페이지 매기기 (Manual Pagination with Prev and Next)

skip( ) 함수는 next( ) 및 prev( )가 쿼리와 일치하는 총 결과의 첫 번째 결과를 건너뛰는 쿼리 결과 페이지를 제공할 수 있게합니다. 예를 들어 위의 페이지 매김 예제에서 컬렉션을 쿼리하면 limit( )가 15인 결과가 반환되지만 기본 skip( ) 값은 0입니다. 첫 번째 결과부터 시작하여 끝나는 15번째 쿼리 결과를 반환합니다. 

 

그런 다음 next( )를 처음 호출하면 skip( ) 값이 15이고 limit( )가 15인 결과가 반환됩니다. 이렇게하면 Wix Data가 16번째 결과부터 30번째까지 끝나는 쿼리 결과를 반환합니다. femaleRingTwenty.next( )를 다시 호출하면 skip( ) 값이 30이고 제한이 15인 결과가 반환되고 결과는 31 번째 결과에서 45번째 결과로 반환됩니다. prev( ) 및 next( )를 호출하면 요청된 결과 범위와 일치하도록 skip() 값을 변경합니다.

 

skip( )에 값을 수동으로 지정할 수도 있습니다. next( ) 또는 prev( )를 여러 번 사용하지 않고도 특정 페이지로 건너뛰기를 원할 때 유용합니다. 예를 들어 앞의 예제에서 쿼리를 사용하여 페이지당 12개의 결과가 포함된 결과의 5번째 페이지를 가져오려면 48 (제한 * (5-1))와 12 제한을 건너뛰고 컬렉션을 쿼리해야 합니다.

 

 

 

let queryResults;

wixData.query("Customer")
  .ge("age", 20)
  .hasSome("labels","Female")
  .eq("purchases.item", "ring")
  .skip(48)
  .limit(12)
  .find()
  .then ( (results) => {
    console.log(results.items);
    queryResults = results;
  } );

 

 

 

 

49번째에서 60번째 결과를 기록합니다. 그런 다음 queryResults에서 next( ) 또는 prev( )를 호출하면 다음 또는 이전 12개의 결과를 반환합니다.

 

 

 

자바스크립트(JavaScript) 날짜 객체

Wix Data 항목에서 자바스크립트(JavaScript) Date 객체를 입력란(필드) 값으로 사용할 수 있습니다. 이 예에서 birthday에는 날짜가 지정됩니다.

 

let newCustomer = {
  name: "Mary",
  age: 47,
  _id: "mary.jones@myemail.com",
  pic: "Mary.jpg",
  labels: ["Female", "Adult", "Hiking"],
  relatives: ["husband", "daughter"],
  birthday: new Date(1975, 10, 5)
};

// Use wixData.insert to add a new item to the Customer collection
let entry = wixData.insert("Customer", newCustomer);

 

 

 

 

항목을 검색할 때 Date 객체가 지정된 값은 Date 객체를 반환합니다.

 

Wix Data는 항상 Date 객체를 저장하고 UTC 시간대로 콘솔에 표시합니다. 예를 들어, 이전 삽입의 결과를 표시하는 경우 :

 

entry.then( (results) => {
  console.log(results);
} );

 

 

이것은 기록합니다 :

 

{
  name: "Mary",
  age: 47,
  _id: "mary.jones@myemail.com",
  pic: "Mary.jpg",
  labels: ["Female", "Adult", "Hiking"],
  relatives: ["husband", "daughter"],
  birthday: "1975-10-05T14:24:20Z",
  _createdDate: "2004-04-01T01:04:45Z",
  _UpdatedDate: "2006-02-15T12:35:20Z",
}

 

 

 

Date 객체가 문자열로 표시되더라도 자바스크립트(JavaScript) Date를 속성 값으로 사용하려면 위의 첫 번째 코드 예에서 설명한 것처럼 자바스크립트(JavaScript) Date를 자바스크립트(JavaScript) Date 객체로 지정해야합니다. 속성에 ISO 날짜 문자열 값을 할당하면 Wix Data는 다른 날짜 문자열처럼 속성을 처리합니다.

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 - 자바스크립트 (JavaScript) (Wix Code: JavaScript Support)

윅스 (Wix) 코딩 - API 개요 (Wix Code: API Overview)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-working-with-the-data-api