React에서 웹 수익 창출을 시작하기 위한 멋진 게시물이 있으며 Vue 3로 다시 만들도록 영감을 받았습니다.

React에서 웹 수익 창출 시작하기

Emma Goto 🍙 ・ 2020년 5월 9일 ・ 2분 읽기

#gftwhackathon #webmonetization #react

우리는 vite이라는 Vue 3용 번들이 없는 개발 서버를 사용하여 개발 중에 번들링 없이 단일 파일 구성 요소로 Vue 앱을 개발할 수 있습니다.

초대 앱 만들기

터미널을 열고 다음을 수행하십시오.

$ npx create-vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

사용자가 웹에서 수익을 창출하는지 확인하기 위한 후크 만들기

프로젝트 폴더의 루트에 use-web-monetization.js라는 파일을 만들고 아래 코드를 붙여넣습니다.

import { ref, onMounted } from "vue";

export const useWebMonetization = () => {
  const isMonetized = ref(false);
  const isLoading = ref(true);

  onMounted(() => {
    if (!document.monetization) {
      // No web monetization polyfill is installed (e.g. Coil).
      isLoading.value = false;
      isMonetized.value = false;
      return;
    }

    // Check the value of document.monetization.state
    // to see if a user is web monetized.
    const { state } = document.monetization;

    if (state === "stopped") {
      // Not currently sending micropayments, nor trying to.
      isLoading.value = false;
      isMonetized.value = false;
    }

    // Determine when Web Monetization has started actively paying
    document.monetization.addEventListener("monetizationstart", (event) => {
      isLoading.value = false;
      isMonetized.value = true;
    });
  });

  return {
    isMonetized,
    isLoading,
  };
}

useWebMonetization 및 isMonetized 상태를 반환하는 isLoading라는 재사용 가능한 후크가 있는 파일을 만들었습니다.

이제 아래와 같이 모든 .vue 파일 내에서 사용할 수 있습니다.

<template>
    <div>
      <div v-if="isLoading">
        Loading...
      </div>
      <div v-else-if="isMonetized">
        Some exclusive content!
      </div>
      <div v-else>
        Show ads here!
      </div>
    </div>
</template>

<script>
import { useWebMonetization } from "./use-web-monetization";

export default {
  setup() {
    const { isLoading, isMonetized } = useWebMonetization();

    return {
      isLoading,
      isMonetized,
    };
  }
};
</script>

웹 수익 창출 테스트

test-web-monetization은 Coil 계정에 가입하지 않고 프로젝트를 테스트하는 데 사용할 수 있는 북마클릿을 제공하는 웹사이트입니다.

샘플 앱

시작할 수 있는 sample simulator app입니다.



에 가입하는 모든 사람에게 행운을 빕니다!