NFT Storage V2

Start Here

Questions

did i accidentally bring in two APIs?  

---

CID - content ID
Pinning - asking the node to keep the data, so that it's not trashed, if you pin it hte data presists

Paying for image storage

Quede vs Pinning - next deal brokered to get on the Filecoin network

Step 1: Start with a Phone app
When you launch Service Studio, you want to create a mobile application by clicking on "From Scratch" and then "Phone app".

Name your application.

Drag a Screen Widget from the left side icon tray and drag into the center and name it 'Home' as your homescreen. Set the screen to Anonymous so anyone can access without a login account.

Step 2: Consume the NFT Storage REST API

Click on Service, as we are building a service to consume the REST API

Right Click on REST and consume REST API

Add Multiple Methods

Find the YAML file here
https://nft.storage/api-docs/

Convert the NFT Storage YAML file to a JSON
https://nft.storage/schema.yml

Convert with
https://www.convertjson.com/yaml-to-json.htm

Check and address any errors and warnings

Step 3: Create and map out your REST API
Add Authorizations to your Methods

Double-click on the orange REST API Method titled "Click" > "Heads and Authentication"

In the Request headers dropdown select "Authorization"

Click on the "Test" tab and include a CID in the URL parameter values

in Request headers values, Authorization, include:

Bearer[KEY TOKEN]

click on "Test" to see an "ok":true value

Copy to response body
Click on Finish

Hit the green Publish button

Now repeat Step 3 for the rest of the REST API Methods titled "delete", "list", "status", "store" respectively

at "List"

Include a future date for the before parameter

Copy over and match the fields

While you're creating an Authorization input parameter for both "Status" and "Store" you may get an error or empty payload, just click "Finish"

Hit the green Publish button

Step 4: Create a Service Action
Right Click on "Service Action" and title your action "List"

The logic flow will visually appear

In the Logic tab,
Integrations > REST > NFTStorageAPI > list
Drag the "list" Run Server Action into the logic flow and click on the icon until you see the "Authorization" dropdown

It's empty

in "list" Run Server Action, copy all four input parameters, and paste in the "List2" Service Action

Assign the "list" Run Sever Action by dragging an "Assign" blue icon from the left tray into the logic flow, below the "list" icon

Assign the variable with "Response"

Click on "list" in the logic flow and map the following:

You may get errors asking to make your structures public

Step 5: Integrate your API wrapper

To integrate your API, head to Interface > Home Screen and "Fetch Data from Other Sources", which I've named "ShowStorage"

In the upper left-hand side there is a

icon where I will manage my dependencies. I want all the modules that I've created before, to be referenced.

Head to the Logic tab and locate "List" Service Action, click on and drag the icon into the logic flow.

Head to the interface tab and double-click on the Output Parameter we've named "Response", set the Data Type to a ListResponse matching the Response Output Parameter in teh Logic tab.

On the logic flow, drag and drop an Assign into the logic flow. In the drop-down, assign Response and List3.Response (or whichever number list you have show up).

In your Run Server Action titled "List", set

before: "CurrDateTime()"
Authorization: " "Bearer TOKEN" "

Your Authoization Bearer TOKEN is a string so must close in quotes.

Step 6: Connect the database and images

On the Interface tab in the Mainflow UI Flow, add a Block widget and add an Input Parameter titled "CID".

Double-Click on the "Home" Screen icon and select "Widget Tree" on the top right.

In Content, drag and drop a Block widget and set the sources:

Source Block "MainFlow\Block1"
CID "ShowStorage.Response.value.Current.cid"

Include three "x.y Expression" widgets within Content

In the first Expression, map the expression to

ShowStorage.Response.value.Current.cid

Folder structure is seen here:

The second Expression, can be expressed as follows:

FormatDateTime(ShowStorage.Response.value.Current.created, "d MMM yyyy HH:mm")

The third Expression, we can showcase the pinning service.

The Images

In the Interface tab, click on the Block1 widget. Drag and drop an Image widget from the left.

Set the Type to "External URL"

"https://" + CID + ".ipfs.dweb.link"

In the API wrapper that I've titled "IPFSNFTStorage", create an Input Parameter within the "store" REST API Method. The Input Parameter will be named "Binary Image" and set the Data Type to "Binary Data".

Now copy the three input parameters in store and create a Service Action titled "Upload" within the Service Actions folder. Paste the three input parameters within the "Upload" Service Action

Double-click on "Upload" Service Action and drag the store REST API Method onto the logic flow

The "Store" Run Server Action is like requestion something from someone, in this case asking someone for the image.

Timestamp: 01:25:46

Therefore the Assign widget in the logic flow will be the response to the request: