윅스 (Wix) 코딩 강의 중급 (Intermediate) - 시크릿 매니저 (Secrets Manager) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 시크릿 매니저 (Secrets Manager) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 시크릿 매니저 (Secrets Manager) - 상호작용 (Interactions)

강의 내용 요약

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

 

시크릿 매니저를 활용하여 API 키를 저장하여, 미국 뉴욕시의 날씨를 웹사이트에 보여줄 수 있는 기능을 만듭니다.

 

예제 보러가기 (View Example)

HOME | Secrets Manager T

 

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

Log In | Wix

 

 

강의 내용 만드는법

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

• 시크릿 매니저
• 버튼
• 라벨

 

코드 (Code)

Home

// calling getWeatherJson from the backend file getWeather.jsw 
import { getWeatherJson } from 'backend/getWeather'

$w.onReady(function () {
	$w('#getWeatherButton').onClick(() => {
		updateWeather();
	});
	updateWeather();
});

export function updateWeather() {
	getWeatherJson().then((response) => {
		displayWeather(response);
	});
}

export function displayWeather(json) {

	const fadeOptions = {
		"duration": 1200,
		"delay": 0
	};

	$w('#weatherLabel').hide();
	$w('#temperatureLabel').hide();
	$w('#weatherLabel').text = json.currently.summary;
	$w('#temperatureLabel').text = json.currently.temperature.toString() + ' °F';
	$w('#weatherLabel').show("fade", fadeOptions);
	$w('#temperatureLabel').show("fade", fadeOptions);
}

 

getWeather.jsw

import { getSecret } from 'wix-secrets-backend';
import { getJSON } from 'wix-fetch';

export async function getWeatherJson() {
	try {
		//getting the api key from the Secrets Manager
		const secret = await getSecret('weatherApiKey');
		return getJSON(`https://api.darksky.net/forecast/${secret}/42.3601,-71.0589`); // api call requires the key(secret), latitude and longitude
	} catch (err) {
		console.error(err);
	}
}

 

API

Wix Secrets Backend API

Wix Fetch API

$w.Text API

 

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

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

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

 

 

연관된 토픽)

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

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

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

Secrets Manager | Corvid by Wix Examples | Wix.com