IPFS IPFS Camp 2022, 30 Oct 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Fleek XYZ + IPFS Storage plugin Workshop - Max Boytsov

Description

1. We’ll write a skeleton with dummy modules for IPFS Storage Plugin
2. We’ll start to fulfil the plugin, starting from its metadata and ending all the different methods being written with an SDK
3. Once the plugin file is finished, we’ll build the plugin library for it and import it into the fleek-xyz GraphQL module.
4. We’ll go to the Fleek.xyz UI to show:
1. How the newly created plugin is displayed in the list of storage plugins
2. How we’re initializing that plugin.

A

Hi I'm Max I'm the sort of lead, UI ux developer at fleek.

A

um It's super excited for me to be here um yeah what a day um so today, I'm gonna talk about um like a little bit of doing a little bit of a talk, but more do like a workshop on the website hosting on flick using our ipfs plugin, so yeah, but first, what's exactly the Fleek and the flick.com.

A

So in case you don't know who we are. Fleek is the biggest web Tree website hosting service, and we and ipf has placed a significant role in our infrastructure. It provides the decentralized website hosting and the storage in our platform, so so um yeah. In the last few years, we've been improving our platform um and putting a lot of people's energy experiences and resources uh to provide the best possible user experience in our platform.

A

So you know as we grow, we started to ask ourselves a question like how can we scale better? What should we do to scale better? How can we let the best Minds that want to push ipfs in the other services forwards, participate in what we're doing so and guess what we have?

A

Three answer to that question: so the first is the brand new, completely revamped platform that is called flick, XYZ.

A

The second is a hundred percent open sourced plug-in infrastructure and on the third one, which is the flick, Network, the decentralized content and application delivery Network. So on the flick. Network I encourage everyone to visit mahmoud's talk tomorrow at 12 40 about flick, Network I promise it'll be a lot of fun all right. So now is the first time we'll present the alpha alpha Hands-On plugins um development and how we use it to build the simple ipfs hosting plugin in almost no time.

A

So what I want to do now is I, encourage everyone who is familiar with the typescript into JavaScript to go to that link and copy or clone the repository in case. You guys want to follow the workshop up with me.

A

um Yeah and it's gonna be fun now I switch to the code.

A

um So the first thing that you guys will see in the repository uh is the plugin storage ipfs file in the SRC folder. So what is this all about? You would ask. um So, let's do this quick trick that vscot provides us we're going to implement all of the interfaces and see what's what? What actually is in that class right that um that we Implement? First of all, you would guys see this plugin helpers right. What it is all about.

A

It is the package that we provide for you guys to have the ability to extend our interfaces that will help our XYZ platform to identify um what actually the feature you'd like to provide to us right so, first time you will do that you'll you'd be able to so, for example, we're building the plugin storage ipfs out there. So the plugin storage, abstract class provides us some um useful methods um and um useful methods and the properties for for the child class, uh which we're gonna now uh Implement right. What do we got here?

A

We got get package.data right, so that's another utility that we did. The plugin helpers provide so we're going to import this. What he's gonna do is actually take your package Json file, which will also gonna import, yeah, perfect um and so take Taking attention on the ID. It takes the package name since the npm provides us the ability to Define uh packages as a unique identifiers right. So we use that concept to differentiate between those plugins that you guys will create and uh yeah. So uh this package name is coming from the package.json file.

A

We can say: hey call it just the plugins.

A

Gonna be really helpful and hold the mic for Max.

A

Thank you. Thank you very much he's super famous. He has a mic holder. No, no worries. Okay, so uh now we're taking the package name from the get package data, uh we're missing something, of course. uh uh Let's take a look, can anyone see what's missing, help him out we're doing a live coding session here, yeah, yeah, yeah I do so.

A

um Perfect, okay: this is gonna move forward. um What I'm going to show you next is that uh we need so we will use the ipfs HTTP um client to sort of start using apfs right.

A

All right it's already installed, so we don't need to do anything. Then we will import the create function to create the API apfs instance right. So what we're going to do here is: um let's write the let's, try it one of the required methods out there, which is called the upload right, I'm gonna. Do it this way?

A

If you don't mind and clean this up,.

A

um Yeah so, let's start from there perfect um required method called upload, uh public async upload um and what's it's used for it's to exactly upload the content to the ipfs?

A

So in order to do that, we have to initialize the ipfs instance right, so we're gonna create it. The private ipf, uh init ipfs.

A

um And this is will be used across all of the different methods that we provide right.

A

So now we have the client and we're gonna provide uh the options to that client.

A

Perfect, so what we're going to do next? Next, we're gonna, um we're gonna, use the glob Source uh sort of the function that apfs provides to us and that's going to be useful for taking the folder in the local environment to upload it to ipfs right.

A

So let me connect this. As you can see, there is the ipfs client ad method and we Leverage The glob Source. uh We get the folder name from the instance fields which I'm going to explain to you guys right now, and what we're going to return from that function is the instance Fields. That's going to be a crucial part of this infrastructure right, um perfect. So.

A

A

This and zoom in a bit hope you guys can see it um so as we get this uh what's the magic right now is that the upload function is gonna. It's gonna be all that is necessary to deploy your plugin to the flick right and like. Let me explain that so think about it. So what is required for us to have the website hosted on the ipf ipfs? It's only the content right. We handle the other parts of the infrastructure like the good we handle CI CD. We handle everything.

A

So we don't you guys, don't have to worry about it at all, and uh once you define this upload method, it is all done. It is your own plugin that you can actually put into the flick and use it share it share it share it with another people um and uh and yeah, so it's all down hosting. So what are we going to continue with, or you guys can continue with is like defining the other methods uh in this case, other methods in this class.

A

We're going to be only needed for the storage feature of the flick right. So we combine one powerful interface to leverage the. uh Thank you very much. Thank you.

A

We provide this to leverage both the hosting and the storage parts.

A

So uh it's up to you guys to say: hey I, want to use ipfs that way or I want to create my SDK based on ipfs use it there and put it into the Fleek and it's going to work um the what's the amazing part. um What's the amazing part of all this uh yeah? It's it's the freedom right, it's the freedom of a choice. um Now, let's use that quick trick of of the vs God to see what actually is needed to have the storage right.

A

Those are all the other methods that storage will require and uh yeah. So this is only quite for the storage uh we get this all done and uh once you're done, you would have that ipfs plugin in the list of uh there's some other plugins. uh So what it is all about is that you can create share, use, improve plugins right. All of our new platforms. Infrastructure is fully pluginized. So it's up to developer Define.

A

What he's going to see in the flick XYZ right, unlike thefleek.com, so we let all the developers to be part of this journey. The flick, XYZ platform will be available. This year's on November, so we will also open source all of the plugins infrastructure. So anyone can join this amazing journey building with us. What's another crazy thing is that there will be a possibility to monetize everything right. So, as a plugin developer, you would get a the monetization from the usage.

A

As your plugin gets popular more popular, more popular, you get more monetization the scenario huge part. um Yes, so I wanted to say thanks to all of you, uh that was the quick Hands-On plugin developments, a development on the flick XYZ. Thank you very much. uh This is a great. This is a great event thanks for inviting and hope you see on the Journey of the plugin development for flick. Thank you.