윅스 (Wix) 코딩 - HTTP 함수로 사이트 API 노출하기 (Wix Code: Exposing a Site API with HTTP Functions)
설명)
윅스 코드(Wix Code)를 사용하면 사이트의 기능을 서비스로 노출시키는 기능을 만들 수 있습니다. 이는 다른 사람들이 작성한 윅스(Wix) 함수에 정의된대로 사이트의 API를 호출하는 코드를 작성하여 사이트의 기능을 사용할 수 있음을 의미합니다.
HTTP 함수를 사용하여 다음을 수행할 수 있습니다.
- 사이트를 Zapier 또는 IFTTT와 같은 자동화 도구와 통합합니다.
- 외부 webhook에서 알림 및 정보를 수신합니다.
- 사이트와 기본 모바일 응용 프로그램 간의 백엔드 공유합니다.
엔드포인트 (Endpoints)
클라이언트는 다음 패턴을 사용하여 엔드 포인트에 도달하여 HTTP 함수를 사용합니다.
- 프리미엄 사이트의 경우 : https://www.{user_domain}/_functions/<functionName>
- 무료 사이트의 경우 : https://{user_name}.wixsite.com/{site_name}/_functions/<functionName>
다음 패턴을 사용하여 엔드 포인트에 도달하여 HTTP 함수를 테스트합니다.
- 프리미엄 사이트의 경우 : https://www.{user_domain}/_functions-dev/<functionName>
- 무료 사이트의 경우 : https://{user_name}.wixsite.com/{site_name}/_functions-dev/<functionName>
노트 :
테스트 엔드 포인트와 프로덕션 엔드 포인트를 모두 사용하기 전에 최소한 한번 사이트를 게시해야 합니다. 그런 다음 엔드 포인트 테스트의 변경 사항을 적용하기 위해 사이트를 저장하고 프로덕션 엔드 포인트의 변경 사항을 적용하기 위해 사이트를 게시합니다.
API 함수 코드 (API Function Code)
API 함수 로직은 사이트의 백엔드 섹션에 있는 http-functions.js 파일에 정의됩니다.
HTTP 함수는 다음 패턴을 사용하여 정의됩니다.
export function <prefix>_<functionName>(request) { }
prefix는 get, post, put, delete 또는 use 중 하나입니다.
HTTP 함수 내부에서 들어오는 요청을 처리하고 적절한 응답을 리턴하는 논리를 작성합니다. 함수는 들어오는 요청에 대한 정보가 들어있는 WixHttpFunctionRequest 개체를 받습니다. 이 함수는 WixHttpFunctionResponse를 반환해야합니다. response (), ok (), created (), notFound (), serverError (), badRequest () 및 forbidden ()과 같이 WixHttpFunctionResponse를 만들 때 사용할 수 있는 함수가 많이 있습니다.
Wix HTTP 함수에 대한 API 참조는 여기에서 찾을 수 있습니다.
get( )
이 함수는 HTTP GET 메소드로 만들어진 요청에 응답합니다. 일반적으로 소비자가 리소스를 검색하기 위해 호출하며 다른 효과가 없어야합니다. 이 방법으로 정의되고 리소스가 발견되면 함수는 200(OK) 상태 코드와 요청된 리소스로 응답해야합니다.
예 : 요청 경로를 기반으로 항목을 찾기 위해 컬렉션을 쿼리하는 GET HTTP 함수를 만듭니다.
import {ok, notFound, serverError} from 'wix-http-functions';
import wixData from 'wix-data';
export function get_myFunction(request) {
// URL looks like: https://www.mysite.com/_functions/myFunction/John/Doe
let options = {
"headers": {
"Content-Type": "application/json"
}
};
// query a collection to find matching items
return wixData.query("myUserCollection")
.eq("firstName", request.path[0])
.eq("lastName", request.path[1])
.find()
.then( (results) => {
// matching items were found
if(results.items.length > 0) {
options.body = {
"items": results.items
};
return ok(options);
}
// no matching items found
options.body = {
"error": `'${request.path[0]} ${request.path[1]}' was not found`
};
return notFound(options);
} )
// something went wrong
.catch( (error) => {
options.body = {
"error": error
};
return serverError(options);
} );
}
post( )
이 함수는 HTTP POST 메소드로 만들어진 요청에 응답합니다. 일반적으로 소비자가 새로운 리소스를 생성하기 위해 호출합니다. 이 방법으로 정의되고 리소스가 생성되면 함수는 201(Created) 상태 코드와 일반적으로 새 리소스에 대한 참조로 응답해야합니다.
예 : 요청 본문의 항목을 컬렉션에 삽입하는 POST HTTP 함수를 만듭니다.
import {created, serverError} from 'wix-http-functions';
import wixData from 'wix-data';
export function post_myFunction(request) {
let options = {
"headers": {
"Content-Type": "application/json"
}
};
// get the request body
return request.body.text()
.then( (body) => {
// insert the item in a collection
return wixData.insert("myUserCollection", JSON.parse(body));
} )
.then( (results) => {
options.body = {
"inserted": results
};
return created(options);
} )
// something went wrong
.catch( (error) => {
options.body = {
"error": error
};
return serverError(options);
} );
}
put( )
이 함수는 HTTP PUT 메소드로 만들어진 요청에 응답합니다. 일반적으로 소비자가 기존 리소스를 업데이트하기 위해 호출됩니다. 이 방법으로 정의되고 리소스가 업데이트되면 함수는 200(OK) 상태 코드로 응답해야합니다. 이 방법으로 정의되고 리소스가 존재하지 않아 작성된 경우, 함수는 201(작성 됨) 상태 코드로 응답해야합니다.
예 : 컬렉션의 요청 본문에서 항목을 업데이트하는 PUT HTTP 함수를 만듭니다.
import {ok, serverError} from 'wix-http-functions';
import wixData from 'wix-data';
export function put_myFunction(request) {
let options = {
"headers": {
"Content-Type": "application/json"
}
};
// get the request body
return request.body.text()
.then( (body) => {
// update the item in a collection
return wixData.update("myUserCollection", JSON.parse(body));
} )
.then( (results) => {
options.body = {
"inserted": results
};
return ok(options);
} )
// something went wrong
.catch( (error) => {
options.body = {
"error": error
};
return serverError(options);
} );
}
delete( )
이 함수는 HTTP DELETE 메소드로 만들어진 요청에 응답합니다. 일반적으로 소비자가 기존 리소스를 삭제하기 위해 호출됩니다. 이 방법으로 정의되고 리소스가 삭제되면 함수는 200 (OK) 상태 코드로 응답해야합니다.
예 : 요청 경로를 기반으로 컬렉션에서 항목을 삭제하는 DELETE HTTP 함수를 만듭니다.
import {ok, serverError} from 'wix-http-functions';
import wixData from 'wix-data';
export function delete_myFunction(request) {
let options = {
"headers": {
"Content-Type": "application/json"
}
};
// delete the item from a collection
return wixData.remove("myUserCollection", request.path[1])
.then( (results) => {
options.body = {
"deleted": results
};
return ok(options);
} )
// something went wrong
.catch( (error) => {
options.body = {
"error": error
};
return serverError(options);
} );
}
use( )
이 함수는 GET, POST, PUT 또는 DELETE HTTP 메소드 중 하나를 사용하여 만들어진 요청에 응답합니다. 다른 함수가 요청의 HTTP 메소드에 대해 특별히 정의되지 않은 경우입니다.
예를 들어, get_myFunction 및 use_myFunction이라는 함수를 만들면 myFunction에 대한 GET 호출은 get_myFunction에 의해 처리되고 POST, PUT 및 DELETE 호출은 use_myFunction에 의해 처리됩니다.
디버깅 (Debugging)
console.log() 호출을 추가하여 HTTP 기능을 디버깅 할 수 있습니다. 기록한 정보는 사이트를 미리볼 때 사이트의 개발자 콘솔에 나타납니다. 게시된 버전의 사이트를 볼 때 콘솔에 아무 것도 기록되지 않습니다. 메시지 로깅은 미리보기에서만 실행되므로 로깅된 내용을 보려면 테스트 버전의 엔드 포인트를 호출해야합니다.
HTTP 함수에서 console.log()를 사용하여 디버깅하기 (To debug using console.log() in an HTTP function):
1. HTTP 함수의 코드에서 console.log ()에 대한 호출을 추가합니다.
2. 사이트를 저장합니다.
3. 사이트 미리보기를 합니다.
4. 외부 응용 프로그램에서 테스트 엔드 포인트 (_functions-dev가있는 URL)를 호출합니다.
5. 기록된 메시지는 사이트의 개발자 콘솔에 나타납니다.
연관된 토픽)
윅스 홈페이지 만들기 101
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index 윅스 (Wix.com) 윅스 ADI & 템플릿 (Wix ADI & 템플릿) 윅스 웹에디터 (Wix Editor) 윅스 코딩 (Wix Code - Corvid) 윅스 해커톤 (Wix Hackathon)
limejuicer.tistory.com
출처 :
https://support.wix.com/en/article/wix-code-exposing-a-site-api-with-http-functions
댓글