GIFT Hackathon + Bonus Hack 및 5가지 프로젝트 아이디어에 참여할 수 있도록 해주는 Angular 9 튜토리얼을 통한 웹 수익화

<div *ngIf="!monetized" class="notification is-primary">
  You need monetization to see the code
</div>

8. Create an interface
Now we will do some logic.

Go to the src/app/app.component.ts and create an interface for the Document.

Add this code above the @Component decorator.

declare global {
  interface Document {
    monetization?: any;
  }
}

9. Add OnInit and setup monetized
Next, we should add “implement OnInit” to the line with our class.

export class AppComponent implements OnInit {

As the second step, we will add this code after the title variable.

monetized = false;

10. Unlock content if web monetization
Now we will create the logic that will start with ngOnInit, create the event listener for ‚monetizationstart’, and will set up monetized prop as true, that will unlock our content.

Add this code after “monetized” prop.

ngOnInit() {
  if (document.monetization) {
    document.monetization.addEventListener('monetizationstart', () => {
      this.monetized = true;
    });
  }
}

11. Fake payment
In the last step, we will fake enabled monetization by triggering event that we did set up a listener for.

Create a function named pay, create a new event called “monetizationstart”, and dispatch the event on the listener.

pay() {
  const event = new Event('monetizationstart');
  document.monetization.dispatchEvent(event);
}

Congratulations, now your app is ready, feel free to test it, and it’s a great way to use it as the first step to the projects that you can find in the next section of this tutorial.

Web monetization bonus hack
Web monetization browser API is a very fresh thing, and there are not a lot of projects and a huge community yet.

It can cause some issues for the potential user that would want to micro-sell his content to the users.

If we will follow Web Monetization API documentation, and implement that in their current way there it bases on the events.

No hash, no token, no session, or key authorization in the docs yet.

So less experienced users can follow that, and implement step-by-step by docs, which will be very easy to jump over.

Let’s take a look at my tutorial of the implementation. I’ve used similar to step by step tutorial by docs.

const event = new Event('monetizationstart');
document.monetization.dispatchEvent(event);

In this case, app checks if we fire “monetizationstart”, if yes, the app will unlock the content.

You can easily hack it around by paste code like this in the browser’s console.

const event = new Event('monetizationstart');
document.monetization.dispatchEvent(event);

It will unlock content for us, and we can even trigger an event with some custom data inside.

In this case, content should be unlocked after the call to our backend with some publicKey of a token.

That will return a response to the front-end with the unlocked content.

Web monetization project ideas
Here I’ve found 5 project ideas that you could develop and submit to the hackathon (maybe some of them will be interesting, and you will get the $$$ high prize):

-Own browser extension that can pay by shares

-A plugin that will help you to get faster registration approval

-First access to the content for the supporting users

-A plugin that will pay to the visitors for reading the content (watch and earn)

-Web monetization affiliate plugin that will share money with affiliate’s link owner

Conclusion
I love the idea of the Web Monetization API, and definitely will keep looking on for the next updates.

I think it can change the lives of tons of bloggers and written-content based startups.

It can be a great addition to ads as well.

I hope now you’re ready to make your step into the hackathon and provide real huge-value ideas for the content world.

Let’s do it!

If you would like to learn more about angular here are more tutorials:

Angular tutorial

React vs Angular vs Vue

How to build dApp with Solidity, Truffle and Angular 6 step by step

Thanks for reading,

Radek from Duomly