Filecoin Filecoin Grant 1 Hackathon Series, 25 Jun 2021

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Filecoin Grant: R1 Hackathon Series \\ Workshop 3

Description

This workshop is the 3rd sub-event of Filecoin Grant 1 Hackathon series from Filecoin and DoraHacks.

00:00 Introduction - Steve
01:38 NFT storage by Yusef Napora of Protocol Labs
31:54 The Fleek Toolbox by Samuele Agostinelli of Fleek

Join Filecoin Grant 1 Online Hackathon: https://hackerlink.io/grant/Filecoin/1

A

Hey guys,, this is steve from dorahacks and today we're very happy to host two amazing engineer and developer.

A

From protocol labs and fleek to introduce.

A

Two amazing workshops on filecoin.

A

So now we are running filecoin grant 1 on a hackerlink.

A

We're using quadratic funding and voting to support early stage, filecoin ecosystem projects.

A

The grant is still live so make sure to go on hackerlink.io/grant.

A

To support the filecoin ecosystem project.

A

That you may find interesting and contributing a lot to the growth of filecoin ecosystem.

A

And yeah, today we have two workshops for you: guys.

A

If you have any questions, feel free to ask.

A

On the bilibili channel or youtube live streaming, session.

A

And if you want to engage with the mentors today,.

A

Feel free to reach out to us and we'll pass on the questions to the host today.

A

So first we have yusef napora,.

A

The documentation engineer of protocol labs., he will introduce the topic of how to mint nfts.

A

From your browser with nft.storage.

A

So yeah, without further ado,, let's welcome yusef, to take on from here.

B

Thanks very much.

B

yeah,, I'm yusef., I'm from protocol labs and what I've been working on.

B

For the past few months, basically is figuring out.

B

How we can best, you know, leverage, our technology.

B

We develop ipfs and filecoin and several other projects.

B

That are used throughout this sort of decentralized web ecosystem., but we want to use that technology to help make nfts.

B

As solid and secure and long lived as possible.

B

And that's kind of where my head has been at for the past few months.. I figured (indistinct) with you guys and we could see,.

B

You know,, we could see. see how everything works. so I'm going to share my screen real quick..

B

I have a few slides that I stole from my friend, allan.

B

Those are... he has created this sort of thing. and then we'll just jump into a little demo.

B

And if you guys have questions, (indistinct).

B

So yeah. minting ntfs in the browser.. How does that work? we're going to talk about ipfs and filecoin here, 'cause, that's what I'm familiar with as a pl kind of guy.

B

There are other ways to mint ntfs, but of course, we think that we're pretty good solution..

B

So why is that? right? so, and then one of the big issues with nfts currently, right, is that, generally speaking, very little data.

B

Can be stored on a blockchain where the nft is defined.

B

Simply because data storage is really expensive when you need global consensus like on a blockchain.

B

So most nfts are really fancy links, right?.

B

They link out to content, elsewhere., usually there'll, be a metadata manifest and then that manifest will link to more (indistinct).

B

Like images, music, whatever.

B

But links are fragile, right?

B

if they..., especially http links that we're all familiar with on the web. like they're tied to a single domain and the naming scheme within that domain.

B

Can change at any time, can change at the other end of a link, (indistinct).

B

Pretty much anything., you can tell a web server to return different content.

B

For any number of reasons. so that poor fit in our view, for something that needs to be written immutably to a blockchain,, then you're never going to be able to change this link later..

B

So you want something that is as future proof as you can make it, and we think that if ipfs helps. so quick overview ipfs if you've never used it.

B

Or heard about it before., so when you add data to ipfs,.

B

First, you add it to your local node.: it produces a cid or content. Identifier.

B

looks like little random seeming string down here.

B

And that's a cryptographic hash of the content itself., so it's derived from the content..

B

If you came to the content at all, like flip, a single bit, you'll get a new cid., so this kind of gives us a way to give every single.

B

Piece of digital content in the world, unique identifier.

B

That won't collide, ideally,, because these are the big space..

B

We have 256 bit hash as the default, so collisions are very rare., so basically now, ipfs,, you can think of it as like. A giant e-value storage, database.

B

And when I request content, from...

B

I say, "here's my, the cid,, the content id,.

B

Please fetch me this data, ipfs.".

B

Now this node over here, okay.

B

yeah,, it's a copy. and now it can provide it to a third node, right?.

B

Now, there's two locations where this content can be attached, and so on.

B

note this third node now has a copy.. Whenever anybody is requesting, it, there'll be ineligible.

B

You know,: if they get the request,, they can provide it.

B

So that's kind of cool. now, instead of our content being tied to a single server,.

B

Anybody who has it can provide it., and ideally the closest person in terms of network latency, would be the one that results will request. The fastest.

B

And what's kind of cool too, is that like pieces of a large file can all be provided from different people. and so similar to,? I guess, how bittorrent works.

B

So then yeah, the data is retrievable from any of these nodes,, but there's a caveat,.

B

Which is that? What, if everybody just stops hosting it?.

B

Like if all of these nodes drop, the content,.

B

It won't be resolvable., so ipfs,. I feel like there's a fairly common misconception.

B

About ipfs, that, like you, put your data on to the network,.

B

And then the network just sort of takes care of it, right?

B

like... when in fact,. That's not necessarily the case, because if all of these nodes have removed the content.

B

I'm sorry, I jumped ahead a little bit.

B

then,, you know, you. It will just disappear., so somebody actually has to be online serving the content for it to be resolved.

B

and the second caveat is related, which is that.

B

Your data can get garbage collected because this space is a finite resource..

B

So if you're running up against your disc based limit,.

B

You'll probably,, your ipfs node will clear out these sort of.

B

The little copies that it made along the way for things that it doesn't know is important, right? because, as you're browsing, ipfs,, (indistinct) copy.

B

As long as you have disc space,, that's great., but once you start feeling pressure, you'll run this garbage collection.. So, even though the network is helping, you distribute your content,, you can't rely on those extra copies for longterm storage,.

B

Because they're pretty (indistinct)., so you can pin your content, right?.

B

That's saying, "hey,, you never garbage, collect this, please." and then it will never get removed from your node.

B

and you can also contract with a remote ping service like pinata,, fleek,, (indistinct).

B

Basically, there's a few providers where they will say,.

B

"Hey we have a bunch of ipfs (indistinct).. Give us your content,, give us a few cents per gigabyte.

B

Or whatever,, like whatever the pricing scheme works out to be for (indistinct), and then we will make sure.

B

That this stuff is always online, so you don't have to run an ipfs node yourself..

B

You can still participate in the ecosystem and get all the content addressing benefits.", because, like one of the great things about the nft context for ipfs is that like,.

B

You know,, let's say that at the nft marketplace,.

B

I want to host my, the images and so on on ipfs.

B

For the people who are going to buy these entities., but I don't necessarily want to do that. Forever.

B

Even if that marketplace disappears, completely, right?

B

like if they just go out of business or whatever,. If I've bought the nft and the nft has an ipfs content id in it,.

B

I can host it myself and it's still alive.

B

or I can say, "hey,. You know,.

B

Somebody else please come in and swoop in." and actually a protocol labs,. This is sort of a side note,, but we're working now on taking all the publicly addressed nfts on ethereum.

B

And other evm (indistinct).

B

and just backing up that long, term, using nft storage.

B

Which I'll get to in a second. what? it is. it's the next slide.. This is my first time running through slide text though., I'm as surprised as you are (indistinct)., but nft storage, right?.

B

This is a service that protocol labs is (indistinct).

B

And it's sort of,: it does a few interesting things, right?.

B

So it acts like a pinning service where, like similar pinata,, where you can just say, "hey,. Please make this data available in ipfs indefinitely.".

B

And the way it does, it is kind of interesting..

B

So first it does through an ipfs, but it also stores it on the filecoin network which, if you are not familiar with that,, it is a decentralized storage network where we have a basically,, a bunch of storage providers called miners who have, you know, data centers, basically, and they will store your data.

B

and the filecoin blockchain protocol will ensure that they're doing it, right?. They will be periodically challenged over time to say, "hey,. You still like storing this data?" and if not, there's a penalty and so on..

B

So this is a way to get persistent storage over time.

B

Without having a single service provider that you have.

B

Or (indistinct) have centralized relationship, with,, right?.

B

So which, I mean, there are certainly,, you know,, there's a lot of use cases for this and what we think nfts are a good one.

B

however, nft, that storage kind of fits into the mix here.

B

By giving you like one simple, http interface to at all.,.

B

And it also will take your small nft data.

B

And back it up into larger sizes for more efficient filecoin deal making., so it kind of like aggregates and makes it more like friendly to the filecoin miner expectations.

B

And so as a result, you get this,, I mean, you get the content addressing benefits of ipfs.

B

Plus you get this decentralized storage, (indistinct) layer.

B

And because we're kickstarting this and like really, like we are at pl,, like enthusiastic about the nft use case,.

B

And really want to support it, we're footing the bill.

B

like we're paying the filecoin storage costs for all nft storage users., so that service is free to use indefinitely.

B

Like we have no plans to turn it off, basically, as long as we can afford to keep the lights on., it's my understanding. and if it ever becomes a financial issue or like we just,.

B

You know,, if we ever decided to discontinue ipfs storage, we've committed to at least like alerting you 90 days notice,.

B

So that you can provide another persistent (indistinct).

B

Because again,, like ipfs, gives you that portability like.

B

Your nft is referencing. This ipfs cid.

B

then,, you know,. Even if these filecoin storage deals, expire,.

B

You could certainly make another filecoin storage deal or provide another persistent backing for that data.

B

And the user of the nft never has to know the difference.

B

It's just like,, you know,. They were just using ipfs.

B

And they never had to know that behind the scenes, there was this other blockchain incentivized (indistinct).

B

And you know, that's pretty cool. so, and it's really easy to use, which is another nice thing.

B

Like one thing, that's learned as a documentation engineer.

B

Is that ipfs has some a lot of (indistinct).

B

But if you're not familiar with it at all,, there's a bit of a learning, curve, right?, there's some new concepts., I mean, content addressing is new to a lot of developers,, but also, you know, peer to peer networking in general is really complicated compared to the client server model.

B

So kind of adds friction and especially in coming from a web browser context,, it can be difficult to like speak the native protocols.

B

To ipfs and filecoin.

B

and it's nice to have an http sort of layer in between.

B

So the nft (indistinct) storage providing that., it's just a simple,, you know, rest-ish kind of api.

B

And then we also have a really nice javascript client.

B

That what I think is kind of the coolest part about this.

B

About, you know, a few months ago. I did a version of this nft minting tutorial where,.

B

You know,, it was a command line app, but the biggest part of it was like,. You know, you construct metadata for your nft and then the metadata needs to reference, an image and whatever the asset, is.

B

and then finally, you write something to the blockchain., and this was like a three,. You know,, there's a multi-step process,, not a huge deal,, but it (indistinct) kind of fiddly and to know nft, (indistinct) kind of does that for you..

B

So you get this,, you know, a javascript object that has.

B

The metadata you want for your nft and a file that has your data.

B

and it'll take this file, that's in the middle of this nested structure and that to ipfs and then replace the, in the metadata,.

B

Just give you an ipfs uri, like a just link, you can follow.

B

So just kind of makes this whole bundling of nfts.

B

(Indistinct), like nice. a one-liner for what took me, maybe,, you know,.

B

50 lines of code in the previous (indistinct) without any (indistinct),, so that's kind of nice.

B

There's other clients, because there are they're kind of starting.

B

From like a generated openapi schema., so we have a lot of,, you know, clients for different programming languages.

B

And so on. and yeah. moving on. oh, wait, sooner we can add (indistinct) storage to our new thing, which is a project that I've been working on for a couple of weeks. Now,.

B

We haven't like launched it yet, but I guess, hey, here,. I am telling you about it, so please go and check it out.. What we're trying to do at this phase of development is gather feedback., so yeah,. This is a nft school., we're trying to create a resource where we can come and figure out, like,.

B

First of all, like you're brand new to nfts,, we've got some concept articles like what are they in the first place and like,?

B

How does content addressing fit into the mix?.

B

You can view many under construction placeholders, where we're saying, like things, that we want to talk about.

B

and part of the reason for leaving it in an unfinished state right now is we want to gather feedback on like,?

B

Is this really what you want to see from a site like this??

B

So if you're watching this now and you're like,.

B

"This is either too low,. You know, "it's too easy for me or too confusing," anything like that, please,. We would really appreciate the feedback.

B

As we kind of try and figure out the direction for this.- and the other thing too is like we want direct contributions.

B

Because the long,, our addition for this site, nft school,.

B

Is not to be like a protocol labs, you know, (indistinct).,.

B

Like,, ideally, we would step.

B

Largely away from the content of the site as we build it out. and then what we want to do is start soliciting input.

B

From people in the nft development community that may,.

B

You know, have experiences that compliment ours.

B

Or come from a different perspective.

B

Personally, so far, what's there is coming largely filtered.

B

Through my experience, because (indistinct) the primary writer on the site.

B

But my experience is limited. you know,. We are really very much aware of that.

B

And trying to (indistinct) as much external feedback as we can.. So that's enough, I guess talking about the site, itself.

B

Why don't we do stuff?.

B

So I will go back to the nft school site, because what we're going to do for the demo is try and walk through this end-to-end experience tutorial.

B

Which is something that I,.

B

Again, threw it together using this really awesome.

B

Ethereum boiler plate repository called scaffold-eth.

B

So if you guys have never heard of this before,, it's amazing for just quickly getting a ethereum powered dapp just up and running.

B

Without a bunch of fiddling about- and it gives you a lot of handy, react, components and hooks, and just very nice, like scaffolding.

B

Okay. and so it's also,, if you're just getting into ethereum development,, you can learn a lot by just switching through the different branches on this repo.. A lot of people have built out specific examples.

B

Using the scaffold-eth grant starter framework.

B

And then, yeah, you can just,. You can find a lot of interesting techniques just poking around here.

B

So, okay., so we started there and we're adding nft minting to it.

B

To kind of see how the whole process works.

B

So let's run it. so here I am.

B

I've already checked out the code and done the (indistinct) install because my internet is slow and nobody wants to watch that.

B

So here we are, though, at the,, basically a clean slate.

B

So I'm going to run a local blockchain simulator, basically.

B

(Indistinct) ethereum forming.

B

And it comes with a bunch of fake mining.

B

But then, once I've done that, I have a smart contract.

B

That we'll see in a second and I'm going to deploy it to (indistinct) new, empty blockchain.

B

(Indistinct) play script and it's going to just compile the contract. For me.

B

And then deploy out to this little fake ethereum.

B

So now, the contract has been deployed to this address and the eth, scaffold-eth, you know, script,.

B

A pair of getting the contract address.

B

And the other information that you need to connect to it into the right place so that the front end can find it.

B

So what we're going to do next is build a react front end.

B

On the dev server., so I'll do start.

B

And then this will wire up the little example here, and we can poke at it.

B

and it's really simple., I'm just going to show you,. You know, how it works.

B

That's not the prettiest thing, but we can walk through,.

B

You know, how the moving process works in the app.

B

and then I'll dig into the code a little bit and show you guys what's actually going on.

B

B

Actually,, while that's happening,, maybe I will open up my code. Editor (indistinct).

B

B

This is the smart contract is basically straight out of the openzeppelin tutorial,, which is.

B

They maintain a bunch of really excellent.

B

Smart and reasonable contracts, (indistinct), frameworks and stuff like that., so it's a great resource for getting started with ethereum. Development., so they have this implementation of erc-72.

B

Which was the first formal nft specification on ethereum.

B

And it's still the most popular and common.

B

and it basically what it's doing here.

B

I am this part where,, like I set a little base, uri.

B

Is just to save a few bites on chain 'cause, I'm using the same prefix for (indistinct).

B

What's actually happening to mint, the token is very,. Very simple is that you have a counter to assign token ids.. Every token gets a new,, you know,, you increment the counter, and that becomes the id..

B

This is built into the base contract, that erc-721 is safe, mint..

B

They even (indistinct) experts to see if the new owner is capable of receiving one of these tokens.

B

Before (indistinct) program.

B

And then here's the bit that actually associates the token id with our ipfs (indistinct).

B

And then you have a new token., it's on the blockchain. and when you look it up,, you can get (indistinct) out of it and that's who the heart of the nft mechanic is..

B

You have saved into the blockchain and from there,.

B

You can sort of perverse the link and get the metadata.

B

And the (indistinct) et cetera.

B

(indistinct) has compiled now.

A

B

So yeah, we're just. sure. you'll agree.. We can pick an image.

B

B

Hello! this is dog. and now I'm going to say mint and what's going to happen now,.

B

Is it will be uploaded to the nft.storage.

B

And then nft.storage is going to give me back an ipfs uri or the metadata.

B

No! oh, failed., so my demo gremlins that are clearly aren't happy.

B

Perhaps I did not... oh,, I skipped an important step., so let's do that. forgot to get somewhere to take money.

B

So here we are., I have no money., it starts you out with a burner wallet., you can connect, if you have metamask or something installed,, connect your actual wallet to that (indistinct).

B

and going to get some fake money from the local developed faucet..

B

Now, if I try this again.

B

B

It worked! (indistinct), broken everyone. okay,, so now, yeah.. We can go on and do it on this page again, it'll, clear the blockchain and then download the image from ipfs again.

B

So that's it really.! That's all this thing does,, although you can, if you're super interested, like if you're interested in the mechanics of it,, you can manually call any smart contract function from here.

B

This is built into scaffold-eth, which I think is kind of,, it's just kind of a cool way to interact while you're in development to see what's going on..

B

So if I wanted to say, who is the owner of that first token? (indistinct).

B

Oh, anyway,, that's something that poke out., but I think that once you're here,, probably what you would want to do, assuming that you're still interested is go and look at the code and see what we're working with.

B

So for that, we have in here the important debts.

B

Are all in this (indistinct).

B

And really the actual action is happening all in this one function, where we're saying making a new nft, storage, client and upload my nft (indistinct).

B

Once I have that,, I got a metadata url.

B

And that's going to be ipfs://, some cid.

B

But that was fancy earlier and like hard coded that prefix into the blockchain.

B

I'm stripping it out, here. that's kind of not super necessary.

B

and then the rest is just,. This is the calling.

B

The mint token function on my contract..

B

It gets wrapped into some ui magic that was provided by scaffold-eth.

B

once the transaction has been confirmed,.

B

We get the transfer event out of the transaction receipt.

B

And that tells us who owns the new token and what its id is. and that's the bit.. Then we have an nft on ethereum.

B

And for me, like the most satisfying part,.

B

Of this was just like, huh,, one line.

B

Then I got to throw away so much code that I had to write last time around before nft.storage (indistinct)..

B

But I do want to call out one important thing here, which is that I'm playing a little fast and loose here by including the nft storage key here in line.

B

In a production application, like if you guys, are going to go, run out and build nft minters based on this code,, that's not a safe option, because this (indistinct).

B

Will be bundled into your front end and then (indistinct), your nft storage, account.

B

So the reason I'm leaving it like this and have it like on the website, on nft school,, I haven't like plastered writings on there yet is that I'm hoping by the time we really launch nft school,.

B

Nft storage will have implemented wallet, loss (indistinct) because we're using odd provider that can integrate with ethereum wallets.

B

and that's,. I think, the ultimate flow here, (indistinct) that you connect your ethereum wallet to the minter app,, the minter app then requests (indistinct) from nft storage.

B

Using your wallet credentials and then the user of your app just apparently uploads.

B

Their nft storage, account. and that way your minting platform isn't, you know,.

B

There's not like one centralized account for all nfts that go through the platform..

B

Instead, each user, who interacts with your application.

B

Can have their own nft storage and be like they would have control over it.

B

And I feel like that adds a nice level of decentralization.

B

The next level of decentralization will come when other nft storage, like services.

B

Are there to be swapped in and out of., so grand ambitions for nft storage to actually be.

B

One of many entry points into this flow.

B

So we kind of using it as a proving ground and (indistinct).

B

Now,, we don't have all the use cases sorted out.

B

and we really want,. I mean,. We want users..

B

So if you guys have nfts that need storing,, please sign up.

B

It's free. we're going to store your data and it's easy to use.

B

And as far as nft school goes,, if you guys could really help me out by clicking on stuff.

B

And telling me what you hate about it: basically.

B

You know, what you want to see in it.

B

It is..., I think, you know,. Our resources right now are pretty limited in terms of actual time to write and tutorials and develop them..

B

So it's very important for us to like, you know, prioritize on the things that,, you know,.

B

You actually want to see.. So right now we're starting sort of at the low, low,.

B

Or,, you know,, starting with the basics and we're going to build our way up to more complex examples,.

B

Ideally involving custom logic, like,, you know,.

B

(Indistinct) transfer rules., and maybe we could have like some sort of,. I don't know, cryptokitties, like breeding mechanic..

B

I think these are all things that we could, but we need your help to figure out what, you know, what you really want to see.. So that's my pitch.

B

or so please, help me out. Here..

B

Tell me how to do my job..

B

I think that, like,, I mean,. I'm excited about the direction that we're heading in nft storage, 'cause, it's one of the simplest ways to get into the ipfs ecosystem that I've come across in my,.

B

You know, I've been working on this stuff for a couple of years, now.

B

and I think that,, you know,. I don't know.

B

I think this whole nft use case has a lot of potential.

B

That is just now being.

B

Realized., it's still such early days that there's a lot of opportunity, here., so yeah, nft school is us trying to say,.

B

You know,, we want to be in the middle of this conversation.

B

Currently, you know,, I feel like there's still a lot for me to learn. so,, but I'm doing my best to, you know, spread the knowledge that I have and build on it. As I go.

B

So, yeah. again,, like any impressions that you have on the site, are useful,, even if it's just clicking around and we have little buttons that say: like, "do. You really want to see this article or like is this you don't even care?".

B

So the more you guys, click on those,, the more I'll know what I'm doing with my life.

B

Yeah. all right. so, great., I think that's about all. I've got for you, guys.

B

I think I might have.

B

A couple more slides, (indistinct)., yeah,, just thanks., and here's me,- if you guys want to reach out to me directly.

B

Probably I will...

B

I mean,. I reply to email more quickly than I do to twitter.

B

'cause, I just have weaned myself off it over the past several years,, but I will eventually see it if you tweet at me.

B

But yeah, (indistinct).

B

Email. and like I said, like.

B

There's just so much stuff learn..

B

I can't keep up with everything, but the more you send at me, the better chance. I will have.

B

Of like setting a good direction for this site and hopefully building out a community of nft devs,.

B

Where we can all hang out and figure out what the next big nft thing is together.

B

[Steve] awesome. awesome.

B

yeah, thank you.

A

Thank you,, yusef. yeah,, we can see nft dos storage is a very new.

A

And exciting project coming out.

A

And like yusef have mentioned,.

A

We're we're still at early stage where.

A

Yusef really expects to expand his team.

A

And expand the community to contribute to the project.

A

When it comes to documentation or participating, maybe deeper,.

A

You know, research or development to make this project,.

A

Let's take this project to the next level, maybe.

A

And also also like, we can just have fun to see.

A

What kind of fun nft projects can be developed using nft.storage on filecoin or ipfs network.

A

Yeah,. Thank you so much for joining us. Today, yusef.

A

Guys, audience,, if you have any question,, if you want to participate in,, you know, the development.

A

Or the development of product,, the development of the community, feel free to reach out yusef at his twitter, at his email link..

A

His email is yusef@protocol.ai.

A

So yeah, feel free to reach out to him there.

A

Yeah,, if you have any questions, reach out to us and we can pass on to yusef after this..

A

Thank you so much for joining us.. It's a great workshop. yep.

B

All right, thanks., that's totally fine. [steve] yeah.

A

Awesome. awesome. yeah,, I especially love the vibe. is like super cool. (chuckles).

A

After yusef next,, we have samuele from fleek.

A

He's the front end developer of fleek.

A

So samuele is sharing with us. The fleek toolbox.

A

Guide to web3 development on ipfs.

A

hi, samuele.: are you with us now?.

C

Yes,, I'm here.. How are you doing?.

A

[Steve] pretty great., how are you?, how are you?.

C

Is very good. you good?.

A

[Steve] awesome. awesome. yeah.. I think we can start here. like we can start right. Away.

A

C

I'm going to share my screen,, my slides., all right., so welcome to this presentation..

C

So like I was introduced to,, I am samuele from fleek.

C

So this presentation is going to be about presenting the tools.

C

That we created at fleek to help you make ipfs applications.

C

And there will be a special focus on nft applications.

C

I'm assuming that we think nfts are cool and you've got a cool idea of an nft application.

C

That you want to create., so we're going to show you some useful tool to deploy your site.

C

And to even create your nfts.

C

at the end of the presentation,, you can start right away, deploying your application.

C

C

so like the two parts that we'll talk about, the first one is fleek hosting..

C

So if you have an ipfs, nft app,.

C

There's probably a front end,, fleek hosting can be used for the front end and the fleek storage,, which also uses ipfs.

C

And if you add an nft,, there's, probably a file,, a jpeg.

C

Or an artwork associated with your nft.

C

And you can use fleek storage for that., so we're going to talk about both of those things.

C

and for both of them, I'll show you a demo of the nft application,, an example.

C

So we're going to be a pretty practical.

C

Next, slide. all right., so first,, let's talk about fleek hosting..

C

So what is fleek hosting? well,, a simple way to put it, it's like a netlify, but on ipfs..

C

So the idea is that if you have a static site.

C

Using a variety of a framework,, you can use our platform to.

C

Publish your application on ipfs.

C

and the flow is very easy..

C

I will show you in in the demo like we'll together upload a site,.

C

Deploy a site, and you will see like, the flow is very simple., so you can push your site on ipfs without too much problem.

C

And we have all kinds of like fun features like you can connect your github account.

C

We detect which framework you're using.

C

(Indistinct) ci/cd flowing through.

C

(Indistinct) show you afterwards. so like just to make your life easier, so you don't have to worry about your hosting.

C

Also, ipfs is web3, but we understand that no.

C

You might want to use web2 also., so when you deploy with fleek,, we also deploy on a cdn,.

C

Which means that that your site is accessible.

C

In a performant manner.

C

So why would you want to do this? well, if you're going to do an nft, application,.

C

Then obviously, you care a lot about decentralization.

C

And if you care about decentralization,, then it makes sense that you would want your site, your front, end,, that your customers are going to access.

C

To also be decentralized., and that's where ipfs comes in.

C

ipfs,, the access protocol allows you to decentralize your app.

C

As you note ipfs,, in order for your files to be accessed.

C

And by your fires, I mean your site,, it needs to be pinned.

C

And so at fleek, we take care of pinning it for you.

C

And since this is ipfs,, if you want to pin it yourself,.

C

You can also pin it yourself., like your site, cannot be taken down.

C

And it takes leverages ipfs., that's a cool aspect of it.

C

also,. We back up and filecoin.. It's a feature that we launched earlier. This year.

C

Like you, don't have to worry about it., we just do it automatically in the background.

C

And finally, framework agnostic, if it's a (indistinct) site.

C

So just to talk quickly about what kind of file can I.

C

Deploy on the fleek?, so I say first framework agnostic,.

C

Because we don't really care what framework you're using,.

C

You can pretty much deploy anything if it's a static, site.

C

Which means like, if you understand ipfs, ipfs, is a file system..

C

So when you go to a site on ipfs,.

C

You fetch the files from the network.

C

There's no like a server that runs some logic.

C

Because that's why only static sites can be deployed.

C

On fleek and ipfs.

C

and like I said, framework agnostic.

C

Whatever static search framework you are using,, all you got to do is build your site and whatever it is I'll put, you publish that..

C

So we'll tell you is react, jekyll, hugo.

C

You can deploy everything provided the right settings.

C

Also, we provide decentralized naming.

C

So like when you have a website,, you access it like the dnf url.

C

For example, I go to google,, I go to google.com., but there are other types of naming other than dns.

C

And they're decentralized.

C

for example,, you might have heard about about ens, the ethereum naming system., well, ethereum is like dns,, but on ethereum., and what is cool, it would fleek is that you can connect your site with your ens and we take care of updating,.

C

Keeping your site on ens up-to-date with the latest the version., so is that automatically, you don't have to worry about it..

C

It's like a very useful feature that we provide.

C

Also, earlier this year,, we launched handshake.

C

It's an (indistinct) another protocol for naming sites.

C

That you can use., you can go namebase.io, here, to get yourself.

C

An handshake domain and you can connect it to fleek.

C

And again, we'll keep it up to date., so it's just very fun that you can use it. Web3 based naming systems.

C

But, like I said, previously, we're both web3 and web2..

C

So your site is accessible in normal dns domain.

C

So if you have a domain,, you can connect it to your site also.. So you can,, you can add it both ways: web3 and web2..

C

Is a cooler feature, fleek.

C

Also tools, in this presentation,, I won't have time to go over to them because it could be too long.

C

But just some quick tools that we created., we have a cli. so to deploy your site,. You can do it on our user interface,.

C

On the app.fleek.co or alternatively,.

C

You can do it with the fleek cli on the command line..

C

It just another fun way to deploy your site.

C

We also expose the fleek graphql api.

C

That allows you to create your small programs.

C

That interact with your fleek account.

C

The cool thing about this api is that the methods that we surface are the same one, that we use ourselves on the front end.

C

so like,, it's pretty powerful. and it's worth exploring. If you want to, yeah, run with it.

C

And github actions., like I said, previously, like,, when you create a site on fleek,, your site gets updated. Automatically.

C

We have our own ci/cd pipeline that we give to every dev.

C

But if you want to create your own ci/cd, workflow,.

C

You can use to github action to customize it.

C

So just a different tool that you can use..

C

So it's worth keeping these tools in mind that if you go on our documentation,, it is all the information on how to use them and et cetera..

C

So keep it in mind.

C

Some resources,, like I said, docs.fleek.co.,.

C

It's our docs.. It has docs for every thing we're going to talk about in this presentation and more.

C

The blog are articles about deploying your site on fleek.

C

With different frameworks, like a tutorial., it's worth checking it out.

C

and definitely, youtube.com/c/fleekhq.

C

That's our youtube channel..

C

It has a video for a lot of stuff, including hosting.

C

One of the first videos that we have is.

C

How to deploy your site using react., so it's fun a tutorial that you can follow.

C

so make sure you subscribe to the youtube channel..

C

We post a lot of content on it.

C

All right., so let's just do it quick, demo., I'm going to close this., so the demo,. What is it going to be?? I'm going to be on.

C

Open a browser. wait: a minute. we're going to deploy together a site.

C

So I am on app.fleek.co, which is our front end.

C

And here is my account.: I have a ton of slides because I play around with it a lot,.

C

Understandably., but he here on the hosting (indistinct).

C

That's everything (indistinct)., so I got my list of sites and, let's just add a new site.

C

Click on this. and that's our (indistinct) to connect to github.

C

In my case, it's already done so it's easy..

C

I can choose my account.

C

And the app that we'll publish.

C

Is the crypto museum.

C

and they believe the correct (indistinct)? Is this one.

C

So ipfs, continue. and here we have our build settings.

C

so (indistinct) I (indistinct) it from top to bottom.. So the first one is the repo and the branch.

C

So it's pretty self explanatory. here,. We got the framework and all the build settings.

C

So I know that my react. Application is done with react.

C

So I could select. React.

C

is going to pre-fill all these fields.

C

But some changes I need to do. so here,. I have a field called the docker image.

C

The docker image is the environment in which your site will be built..

C

So if you have a problem, for example,, your site you're able to build it locally, but maybe you have an error message on fleek,.

C

That means that maybe it has a dependency that you have on your computer, that you don't have on the docker container.

C

So just make sure that your docker container contains all the dependencies and the test container is search from docker hub.

C

So you can create your own docker container that contains all your dependencies.

C

And you don't you don't have to use the docker images that the fleek provides for you., but in this case, I want to use this docker image. But I will.

C

Add node 12 because I know my app needs: node 12.

C

So with our fleek images, and we have a version for each node version, just to be.

C

More useful. here, the build command,. It is a react application.

C

So if you know especially with (indistinct), react app., so if you know,, the basic is correct.

C

You yarn to install all the dependencies.

C

And you undo to build a site.

C

and when you build a site, it gets output to a folder called build.

C

If you're using a different framework,, then just add the different bulk commands in a different directory and in different docker image.

C

So you can customize it for any framework that you are using.

C

As long as the static site or a single page application.

C

(Indistinct) base the directory. if they can show you what the report looks like.

C

To know how to fill the field., so that's the crypto museum, repo.

C

That I am trying to publish. if I look at the architecture of this,.

C

As you can see here, I got a smart contracts that I will show you (indistinct)..

C

I got the various folders and inside the app,.

C

Here is where my react: application is located.

C

So like it's common, like with the web3 project, that you have a folder that contains your front-end and other folders, that contains,, you know, your smart contracts.

C

So if I want to publish my app,, that is my app folder,.

C

I can put the app base directory.

C

when I put my business directory to app, every other command and folder is going to be done.

C

Relative based directory., so now I can deploy.

C

C

and you are now on this part here.. It says: (indistinct) progress., you have a bunch of lines.

C

that as we build and do all that stuff is going to show up the input.

C

And if you have an error,, I highly recommend that you read the log, because the error will appear in the log and you'll know how to debug it..

C

So (indistinct) takes like a minute or two.

C

I already did it for you, here.

C

So that's the crypto museum app that I pre-deployed.

C

Just so we don't put the time waiting..

C

So when it's successful, it becomes blue and we give you a url, that on.fleek.co.

C

Any fact that you do,, we provide a free, url.

C

But this url is that customizable like if I go on general,, I can change the site name to.

C

Dorahacks 2021.

C

C

And that's going to change.

C

you see,, it changed the url.!

C

So now it's a customizable url., so just pretty useful.

C

I want to show you the domains here.

C

Because,. As I said, previously, you can add custom domain.

C

So the custom domain is a dns domain..

C

So if you own your own domain on dns,.

C

You can connect it to your site over here.

C

Ens,, you can add this here and hns, here.

C

So you can have like everything mixed up. Together,.

C

Can have both the normal dns domain, simultaneously have a ens domain and simultaneously have an hns domain.

C

They are not mutually exclusive., that's just very useful., and just like that,, we published our site to ipfs on fleek.

C

It's like that, simple.

C

And we'll go back to the presentation and for a second part,.

C

We'll go back to the site that we just published.

C

And we'll show you a demo of how.

C

You can use a fleek storage to publish your nfts to ipfs.

C

So let's go back to the presentation., I'm going to open the (indistinct) again.

C

Presenter view, present.

C

place this here.

C

okay. all right., so we show the demo. nothing burned, like in the picture..

C

Everything went well., but it's pretty easy to do.. So I encourage you to publish your site on fleek.

C

Because it's simple.

C

C

fleek storage., so what is fleek storage?.

C

Is to store files on ipfs.

C

for example,, an image,, a video, music,, any kind of file.

C

That you want to store ipfs,, you can use fleek storage for that.

C

Easy. so like fleek hosting,, it has a fun ui.

C

That you can use to upload your file, (indistinct) system.

C

Like here on the image, (indistinct) tab,, that's the ui.

C

There's an upload button., there's a..., you see a list of your file and you can, or folders get navigate, open, files.

C

It's pretty simple. or if you don't want to use the ui, there's a library that I will show you afterwards.

C

That can do it programmatically., and I said here performant because it is an ipfs,.

C

Your site,, you have a ipfs cid, identifying your file,.

C

But like the same as in hosting,, where a both web3 and web2.

C

So we provide you with a cdn and the url.

C

That you can use to access your file on your site.

C

So you don't have to like compromise anything when you publish the ipfs.

C

So what are the use cases for fleek storage?

C

well,? The first one is to store your web assets.

C

So, you know, like, if you have a website,, you probably have images like a logo., maybe there's a video., maybe there's music., it can be any kind of things.

C

and you need to show them to the user.

C

So one way to do that is inside your report,.

C

You can put all your images, all your videos.

C

And your assets., but the problem, if you do that, is that.

C

It's going to take a very long time to build your sites because it's going to to have to be copied to a build folder.

C

So it takes a long time to build your site.

C

That's not good., so the solution is upload it to fleek storage,.

C

You're going to get a url like this, and what you can do, is, for example,.

C

If you want to show the image,.

C

You open in image tag an.

C

Html image tag in the source,.

C

You put the url and just like that,, it's going to show up. and it will not slow down the build process.

C

So it's the same thing that you would do with any cloud app, a cloud solution,.

C

But instead it uses ipfs..

C

But the second use case- and this is going to be the focus of the rest of the presentation to store files for nfts..

C

(Indistinct) the next slide that before (indistinct).

C

We're going to use the fleek storage js,, the demo.

C

Fleek storage js is javascript library to.

C

Upload your files on ipfs, very easily.

C

And I wish we were able to use it. it's very simple..

C

It requires api keys, so like,.

C

Don't try to use it on the front end.

C

on the demo we do, but in reality, you're going to need a backend to protect your api keys.

C

And make make your (indistinct).

C

But let's just talk about nfts now.

C

So with nfts, very often there is art associated to it.

C

For example, this image over here from foundation.app,.

C

People can buy and sell any of these, and these ntfs have an image,, a piece of art.

C

Associated with them., this is like very common with non-fungible tokens.

C

So like,, what I wanted to show with the slide is there's.

C

A bad way to surface this image and there's a good way to surface it.. The bad way is to not use ipfs.

C

Is bad because for example,, if I were to upload it like to imgur, for example,.

C

Well, now I have a problem because imgur could go down.

C

And if imgur goes down, just centralized service goes down,.

C

I lose the file., and now the nft is worthless.

C

or this 123 that identifies my file,.

C

They could lose my file, for example, or they could refuse to give me a file.

C

or they could change my file and any (indistinct).

C

To compromise the value of your nft., so it's not good. the good way to do this is by storing an ipfs hash.

C

Or the cid. is better because you can not change the cid.

C

So if I change one pixel of that image,.

C

It produces a different cid.

C

so like it fixes the problems with this here.

C

Also, because it's an ipfs,, anyone can pin and distribute the file.

C

So that's fixed the problem with the centralized service.

C

I pointed out earlier., so if you make an nft application,, you have to use ipfs.

C

The alternative is not really good.

C

All right.: let's pull the demo now. (indistinct) that we just published.

C

Somewhere, I open a browser over here,.

C

Here. and I press the url.

C

Now this app uses ropsten.

C

So, oops!, how do I close this? okay. okay,? I want to open metamask.

C

And if you want to use the demo,, we can on crypto-museum-demo.on.fleek.co.

C

I'm going to show you how it works, and after that I will shoot the code how it works.

C

So I'm going to type the password and now I see this.

C

This is my account. here I have a collection of tokens.

C

That have an image associated with them. they're, all on the ethereum blockchain..

C

After than I'll also show you the smart contracts,, pretty fun also., but basically what this app does is. I can choose an image,.

C

And fleek storage is going to upload it to ipfs,.

C

Generate a hash,, a cid,.

C

And this cid will write it on the ethereum blockchain.

C

So here I got this.

C

C

now it's offloading to fleek storage., it's offloading. and after it's been uploaded, now it triggers a metamask transaction.

C

I going to put my password again., I don't know it's asked twice, but here it is.

C

The (indistinct) transaction is to write the cid to the ethereum blockchain., so let me create the gas,.

C

Click confirm and now it's minting the token on the (indistinct) system.

C

The (indistinct). and if I wait a little bit,, what that my token.

C

Is going to appear in this list as it is accepted.

C

In the ethereum blockchain.

C

I want to show the smart contracts.

C

for here,. That's the address of my erc token.

C

(Indistinct) this my new token.. I know that by the way, there are people from china listening..

C

So this is (indistinct) from the three kingdoms book.

C

If you know that.

C

anyways,, I want to show you the smart contracts.

C

So it has a smart contract. here it is., I can click on read, contract and each token has an id.

C

So at this token is 100.

C

C

And if I want to the cid,, I can query token 100.

C

And this tells the cid in the ethereum block chain.

C

And now I can go to ipfs.io/ipfs,.

C

Copy my cid, and my image is there on ipfs.

C

That's how you can create an example of nft application.

C

I want to show you the code however.

C

(Indistinct), the code really quick.

C

In this,, this is an example.. The more,, like I said,, the in real life,, you add a backend.

C

That will make the call then secure the api key., but because this is a demo,, I put the api keys directly into the the front. End. don't do that in reality..

C

I just didn't have the time to (indistinct) front end. anyway,, the code. so here,, I import fleek storage from fleek storage, js.

C

And the part that does the upload is here.

C

It's very simple. await fleekstorage.upload., you give it the api key and the secret that the docs will show you how to get.

C

You give a name to your file. here. I give it this name based on the token id.

C

And you give it the data to upload.

C

Then it uploads and you can get information like the ipfs cid.

C

Then what I do is I take this cid and I trigger an ethereum transaction.

C

And just like that, I've minted my token.

C

So, as you can see,, the upload to ipfs is very easy.

C

It's like one line of code. and if you go to our docs, you'll, see the other methods: fleek, storage, uses., it's like very easy., it's upload, get,, just some basic stuff.

C

That are easy to use., so I encourage you to use the fleek storage for your nft. Project. is going to save you a lot of time.

C

And in the contracts, really quick., the smart contract is very basic.

C

I pretty much got the erc-721 contract from openzeppelin.

C

And I did a few more functions like this.

C

Cid, that allows me to get to the cid, and in the function,.

C

That's the one I couldn't.

C

Here I increased the total supply.

C

I mint my token, and then after I mint this token,.

C

I give a cid to that token.

C

It's like it's very (indistinct) simple.

C

and just like that,. Now I have an nft token.

C

Within ipfs cid written to the ethereum blockchain.

C

And now I can (indistinct) with my app.

C

So it's like very simple.

C

Let me go back to the presentation really quick.

C

Present. here., I will make it a full screen.

C

All right., so this is the demo. I see time is running out,, but we are done., so it's good.

C

so just to recap,. First part of the presentation.

C

We talked about fleek hosting.. Can you say to host your site on ipfs?

C

so for your nft application,? You can also your front end.

C

Like I showed you with the crypto museum.

C

fleek storage,, you can host web assets or for an nft app.

C

We can host.

C

The images (indistinct) with your nft.

C

Like I showed you inside the code,, one line of code is very simple., so it's like very easy to interact with the ipfs.

C

And that's it., so thank you for listening.. I encourage you to go to app.fleek.co to host your sites,.

C

Upload some files on fleek storage.

C

And just learn more about the platform..

C

You can also go on docs.fleek.co to learn about how to use the tools.

C

or you can also go to our youtube channel /c/fleekhq.

C

(Indistinct) want to learn more about this specific topic.

C

So like, yeah., thank you for listening.. I don't know if there are some questions,, we can answer them. but, thank you.

A

[Steve] yeah. thank you, samuele, for the amazing workshop.

A

A

guys,, please check out more on fleek.

A

Basically, samuele today shared two things.

A

First is fleek hosting that you can.

A

Actually use fleek to host a site and also their storage.

A

So, basically, you can store any kind of asset.

A

Including nfts using fleek's tool, kits.

A

So make sure you go to fleek website to check everything.

A

Let me quickly check if there's any question on.

A

The community side.

A

Yeah,, I think it's pretty much it.

A

Yeah. I want to thank you again,, yusef and samuele, for joining us today. and guys, audience,. I see, we do have.

A

More than 1,000 listeners today., if you have any questions regarding nft storage, or,,.

A

You know, general storage of digital assets or hosting a site using fleek,, feel free to explore more.

A

Of the toolkits introduced today,.

A

Go to the sites to check out more details.

A

and if you're interested in joining the community,.

A

Feel free to join the filecoin slack channel., also like you can reach out to us, and we can put you into direct communication with the host today.

A

yeah., so filecoin grant 1 on hackerlink is still hosting.

A

Is still live on the moment., so if you want to build any interesting dapps,.

A

Applications, using ipfs.

A

Or interact with the filecoin.

A

Tool, kits, tech, stacks, and ecosystem,.

A

Feel free to upload your project and join the official hackathon channel.

A

If you don't know how to join, that, feel free to reach out to us on weechat or on telegram.

A

And we'll respond to there.

A

yeah., so we're still looking for new amazing projects.

A

To submit to the hackathon.

A

And we were also like onboarding the whole filecoin and dorahacks ecosystem.

A

To vote for your amazing project using hackerlink's quadratic funding, scheme.

A

So go to hackerlink.io to find the amazing projects.

A

That you might be interested, upload your project, there,.

A

And if you have any questions, feel free to reach out to us after this.

A

yeah.. Thank you. Again, samuele and yusef for joining us. have a great one. yeah.