Ink Frontend Section

[FrankBevr]

Hola 👋

I'm Frank and I would like to add a tutorial.

Why would it help the Polkadot Dev Community I'm a community Member and have a hard time to make cool rectancles for ink contracts. If I have this problem, I can imagine other people have or will have it as well.

Tutorial Outline

• Main part: Connect Buttons with ink Smart Contract via vanilla polkadot JS.
• Possible outline:
  • Ink: Sacha's ink Tutorial
  • Maybe: Figma - Typographie, Colors, Userflow, Wireframe, Components, Website MVP.
  • Frontend
    • HTML, CSS to style it out.
    • TS to make something work.
    • Framework

I would love to keep it as framework agnostic as possible.

Deadline Mhh, 2 months from now.

Checks You do not have to check all.

• [x] There is no similar tutorial alread around somewhere
• [x] I want to receive funding and have not already received funding for the tutorial
• [ ] The frontend tutorial is published yet
• [x] The ink tutorial is already published. Sacha's ink Tutorial

Cheers ✌️

[github-actions[bot]]

Cool, thank you for creating your first issue on polkadot.study.

[niklasp]

Hello @FrankBevr 👋,

nice that you want to write a tutorial and publish it on polkadot.study. There is still grants available and I think another frontend tutorial is a good addition.

I would love to hear more about what you plan on writing. Could you try to explain more to me and others who have not not read Sasha's ink tutorial? (I have only looked into it but didnt follow).

I would welcome it if you could work more on that outline, like what will the chapters be and what will they cover, before starting. I see that there is more info here in the https://github.com/sacha-l/voting-dapp-workshop/issues/2 tutorial issue that is referenced above. Please provide as much information as possible here, so me and other community members can see what will be covered to agree on the funding.

I realy like the the https://snapshot.org/ site and think it would be awesome to implement something similar. Concerning the proposed content:

• "Maybe: Figma - Typographie, Colors, Userflow, Wireframe, Components, Website MVP." Would definately not cover that except components. I think it is a good way for frontend tutorials to provide a github repository with stubs that can be filled during the tutorial. That way users can also clone the styles (css, or component stubs) and you do not have to copy and past 100s of lines of code.
• What exactly do you mean by: "I would love to keep it as framework agnostic as possible." like not using react?
• Will you use any libraries named here: https://use.ink/examples/dapps/ ? What do you mean by "Frontend -> Framework"?

Please also have a look at the already existing frontend tutorials on polkadot.study, especially this one to see what I mean by a clonable github repository with stubs mentioned above.

If you have any questions contact me also on element @eennoo:matrix.org

Happy to have you onboard.

[FrankBevr]

Hoi @niklasp 👋

Explanation Sachas Ink Tutorial: Its a Governance Contract. It has two main functionalites. Numero Uno, propose. Numero Dos, vote. The Contract allows you to propose new Proposal and vote for existing proposal.
There is a great small Page, which somes it up in more detail. See User Journey
The requirments are rust and and ink.
The 2 key takeaways are 1. Organise your ink code 2. Work with openbrush in ink. At least these are my key takeaways.

Regardings to Figma
Yeah we cut it. It will blow up the scope.

Regardings to Agnostic.
Yes I would love to not use React. The reason is, when i started in Solidity, it made a bigger click when i understand web3.js/ethers.js and all the wrappers like web3modal, moralis. Besides the understanding wrappers dismisses the flexibility of the lower level interfaces. At least thats my takeways from some time ago.

Now back to the topic. : )

Tutorial - make button clicky click

Make Button Clicky Click is the Beginners Guide. Create a Snapshot clone is the Advanced Section

Beginners Guide

To get a glimbse where is it heading. I threw some hours in and see what happend. [^1][^2]

• Pullover Frank does setup and creates TS Files for each section.
• white T-Shirt Frank does Typescript Components
• Black T-Shirt Frank introduces a Framework Vue. Introduces Reactivity.
• Green Shirt Frank cleans up. Refactor to .vue files, add store, adds routing.

The Section/Components are the PolkadotJS Docs Section.
Hello World, Basic Usage, Subscription, Transction, Contract Promise

Possible Outline

Chapter	Title
PolkadotJSApps	An Introduction
Ink!	A quick rundown
PolkadotJS Api	BasicsUsage, Subscriptions, Transaction, ContractPromise
Make Button Clicky Click	Full Project

FullProject could be inspired by previous Mini Hack[^3] There is an Idea. You chunk it up till you got basic functionality. You make Button.

Current Bottleneck: ContractPromise. Make actually a call via PolkadotJS to Contract.

Create a Snapshot clone - Advnance

• Work in Progress - Would love to do it right now, but it would be end up in a mess.
  Some things are not internalized to get it nicely rolling.

[^1]: Testi Repo [^2]: Full Clip [^3]: Previous Mini Hack - Structure

[sacha-l]

I'm super stoked to see someone extend the voting dapp tutorial I wrote - kudos @FrankBevr ! I also know you're more than capable to create a beautiful UI for the dapp and document the steps to teach others how you built it. Having seen your past work and attention to ensuring your understanding of things at each step, I am confident of your ability to deliver this tutorial and that it will be useful to others too.

Leaving my two planks:

• Your starting focus should be on the final thing that's built. This is your northern star.
  • Do you have a sketch of what this is? It will help you structure your tutorial. Put yourself in the shoes of a new comer finding this tutorial. They should be excited about what they're about to build and therefore it's imperative that you present it to them upfront.
• I understand your opinion and reasons for staying away from frameworks. The nice thing about frameworks is that there's less lines of code to write.
  • If the goal is to build a neat UI for a ink! dapp, then you want the user to get there as efficiently as possible with the least amount of margin for error. If the goal is to understand more how to interact with the lower level interfaces, then having your user take detours is central to your tutorial. Just be clear on what your intentions for your user are: create a fresh UI to show-off to your grandma ? or learn the intricacies (and pain points) of building a dapp in from scratch with Polkadot JS API?
  • There's also a number of existing resources that go down the route of building with raw Polkadot JS API. One that comes to mind is: https://www.youtube.com/playlist?list=PLIHT2Jhq922aCYrmDdy4js0ioQdNeAqtb - it would be nice to have content that doesn't already sort of exist!
  • I would consider capitalizing on some new frameworks that make it easier for someone to focus on the final product (running into the least amount of pain points): https://inkathon.xyz/ or https://github.com/paritytech/useink
  • The narrative of your entire tutorial is contingent on which route you want to take here. Either way, have a clear picture of the story you want to take your user through. And be nice to them by giving them expectations up front!
• Your outline seems like there's a lack of clear narrative. My advice is that you should first build the entire thing and identify how you want to chunk the story of how you got there.
  • Is it really central to your tutorial to include intros to Polkadot JS API, and ink! ? There's a lot of resources that already exist on these - can't you just link to those if necessary? This seems like it may be taking away from the core focus of the tutorial.
  • Make a button clickable / do something is probably the first part I'd expect to dive into. I mean, yes having an intro part covering background, what you need to know before starting and what we're going to build today is important. But it shouldn't take more than 10% of the total time spend on the tutorial in my opinion.
  • It could be entirely structured by following the core functionalities of the backend. Really this UI should do 2 things: (1) allow users to make a proposal and (2) allow users to vote on proposals. It's up to you on how to break that up. And it's ok to make assumptions that will empower you to keep your focus on what you think matters more, such as: "We assume the dapp is already deployed and that users already have voting tokens" or "I assume the person completing the tutorial understands what ink! is and how contract metadata works".
  • Will there be a section on indexing for proposals? Is this UI going to be using Smoldot to connect via light client (that'd be cool and unique!) ?
  • Big advice here is to list all the things the person completing the tutorial will have to do to get to the finish line. And also make a list of the things you'll do to make it easier for that person to get there (i.e. assumptions or boiler plate code etc.)

TL;DR: first build the thing (step zero is define what it is you want to build and its features), internalize how you did it, pain points etc. and then tell the story of how you got there in a way that anyone would be able to get there too with the least friction :) Your tutorial is just you holding someone's hand through this journey. And because you've already been there you have the power to make this experience the most exciting, fun and rewarding. 🌈

[sacha-l]

In terms of scope I think the original idea of building a snapshot fork for and ink! dapp is the way to go..

"Build a Snapshot for an ink! voting dapp" ✅ "Build a UI for an ink! voting dapp using Polkadot JS API" 🤔

[FrankBevr]

Hoi 👋

1. Thanks for the kind words 🤗 Nonetheless, still a bunch of skills to master. Work in Progress. 🐒

2. Create Story - TODO

   Your starting focus should be on the final thing that's built. This is your northern star

3. The YT Link is a great ressource, but it didn't solve my Problem of make Button clicky, but it get me really close. But now, Problem solved. ✅

4. I most likely use inkathon. Denis helped me with some Problems, so i use his Tool most likely. But lets see.

5. Yeap Story is important. Like that approach

6. My whole life is a bit unstructured, I guess that spreads in all kinds of domains/doings 😄 I agree, first let me scratch something out kind of works so see🖌️__ ✏️

7. No PolkadotJS is not important, but it was important to myself. I tried to avoid my previous error of diving into fully fledged tools and wrappers before actually understand the core. (Learnings from Ethereum) Little quirk of myself.

8. 10% sounds like a good scope or i skip it fully, lets see. If I do then it will be ~30Lines. That was the line, that I was looking for. Here I got my answer of the question which I was asking. 🙌

9. Structure should get clearer, after I hurdled thruh some kind of coded concept.

10. Never touch smoldot so far, but let me take a look. In my head smoldot should be able instead of const wsProvider = new WSProvdider() something like const wsProvider = smoldot.start();. I have a bit of fear, thats not the case and its completly diffrent. But lets see, thanks for throwing in 💡

11. Get it 👍

    list all the things the person completing the tutorial will have to do to get to the finish line.

I should response with an better outline around next week. Thanks for the response, appreciate it a lot 👾

---

UPDATE 24.09.23 Still work in progress other stuff got priority. Not sure when tackle but its still in my pipeline. Just FYI ^-^

[niklasp]

what about this?

[FrankBevr]

Oh thanks for the reminder. I still have it in my head, but quite postponed month after month. The classical one. I will close the issue, when i do it, i reopen it and send a pr ^ ^

Enjoy your day 🌤️