윅스 (Wix) 코딩 강의 고급 (Advanced) - APIs 노출시키기 (Exposing APIs) - 통합 (Integrations)

윅스 (Wix) 코딩 강의 고급 (Advanced) - APIs 노출시키기 (Exposing APIs) - 통합 (Integrations)

윅스 (Wix) 코딩 강의 고급 (Advanced) - APIs 노출시키기 (Exposing APIs) - 통합 (Integrations)

강의 내용 요약

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

 

윅스 웹사이트의 API를 노출시킵니다.

 

 

예제 보러가기 (View Example)

Home | Exposing APIs S

 

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

Log In | Wix

 

 

강의 내용 만드는법

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

• 데이터베이스 컬렉션
• 버튼
• 입력란
• 이미지
• 텍스트

 

코드 (Code)

Home

import { getRandomImage, postImage } from 'backend/fetch';

$w.onReady(function () {
	$w('#getImageButton').onClick((event) => {
		getRandomImage().then((res) => {
			console.log(res);
			res = JSON.parse(res);
			$w('#image1').src = res.item.imageUrl;
		})
	});
	$w('#uploadButton').onClick((event) => {
		postImage($w('#input1').value).then((res) => {
			res = JSON.parse(res);
			if (res.inserted !== undefined) {
				$w("#successText").show();
				setTimeout(function(){ $w('#successText').hide() }, 3000);
			}
			else{
				$w("#failureText").show();
				setTimeout(function(){ $w('#failureText').hide() }, 3000);
			}
		})
	});
});

 

fetch.jsw

// Filename: backend/fetch.jsw (web modules need to have a .jsw extension)
import { fetch } from 'wix-fetch';

export async function postImage(url) {
	let res = await fetch("<add your domain here>/exposing-apis/_functions/image", {
			"method": "post",
			"headers": {
				"Content-Type": "application/json"
			},
			"body": JSON.stringify({"imageUrl":url})
		});
	res = await res.text();
	return res
}

export async function getRandomImage(){
	let res = await fetch("<add your domain here>/exposing-apis/_functions/randomImage")
	res = await res.text();
	return res
}

 

http-function.js

import { created, serverError, ok, badRequest, notFound } from 'wix-http-functions';
import wixData from 'wix-data';

export function get_randomImage(request) {
	let options = {
		"headers": {
			"Content-Type": "application/json",
			"Access-Control-Allow-Origin": "*"
		}
	};

	return wixData.query("images")
		.find()
		.then((results) => {
			let numberOfItems = results.items.length;
			let randomNumber = Math.floor(Math.random() * (numberOfItems));
			options.body = {
				"item": results.items[randomNumber]
			};
			return ok(options);
		})
		// something went wrong
		.catch((error) => {
			options.body = {
				"error": error
			};
			return serverError(options);
		});
}

export function post_image(request) {
	let options = {
		"headers": {
			"Content-Type": "application/json",
			"Access-Control-Allow-Origin": "*"
		}
	};
	// get the request body
	return request.body.json()
		.then((body) => {
			const regexPattern = new RegExp(/\.(jpeg|jpg|gif|png)$/); // url validation
			if (regexPattern.test(body.imageUrl)) {
				return wixData.insert("images", { "imageUrl": body.imageUrl });
			} else {
				throw new Error("invalid URL")
			}
		})
		.then((results) => {
			options.body = {
				"inserted": results
			};
			return created(options);
		})
		// something went wrong
		.catch((error) => {
			options.body = {
				"error": error.message
			};
			return serverError(options);
		});
}

 

API

Wix Http Functions API

Wix Fetch 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) - 시크릿 매니저 (Secrets Manager) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - MyApi와 MyApiClient 활용하기 (Example: MyApi and MyApiClient) - 통합 (Integrations)

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

Exposing APIs | Corvid by Wix Examples | Wix.com