Revamp "Hello World" template

[samajammin]

Summary

README updates to improve the "Hello World" template.

We conducted an in-depth feedback survey with a group of Ethereum developers. These are the synthesized recommendations they provided to improve this template.

• Introduce the IDE itself, NOT the line-by-line explanation of the contract
  • tons of configuration, buttons, links, windows, consoles, etc... and zero explanation of what you're looking at
  • Direct users to toggle the UI preview? Don't need that to start
  • Is studio a teaching tool? Is it a deployment tool? Is it a development tool? It's not really clear what studio is for. But the tool itself is very nice, well designed.
  • Learning by dissecting code line by line is quite a heavy ask for a user.
• Begin each README with "the goal of this template"...
  • Add what it assumes you should know - link to "How Ethereum works"
  • This page should be a 101 on deploying a contract and reading info from it using web3.js.
• Point the user to the files explorer first, and tell them to look into the smart contract - where all explanations are listed as comments.
  • Using a Readme as a tutorial means that users don't see the code while it's being explained. From a learning perspective, it's difficult to use, despite being impressive as a tool.
  • For Update Social links #1, ideal might just be a big button that says "Deploy Hello World.sol". I don't want to read so many words before figuring out that it is step3 that tells me how to do it. You could have lost me already by then.
• Then explain compilation, and only after compiling take them to configuration and then deployment. Once that's done, point out the interaction tab, and only once the user is comfortable with that, start with the js bits.
• Remove mention of metamask (not used / useful here)
• remove many of the explanations of each code block, and focus only on the most critical ones. Eg the "javascript boilerplate" can be explained in the comments in the source code, I'd drop them from the README.
• In the "The Web app" section, the README uses several concepts or libraries without introducing them, such as web3js or metamask.
  • The magic object Contract should also be introduced. It would also help explaining what is a contract_interface vs a contract_instance, as well as that most operations in web3js are async and use either promises or callbacks (hence the getMessage function looks so awkward).
    • there is a link to web3js Contract object, but it is to a different version than the one used in the tutorial, which has a completely different interface.
• The README points out that it will explain how to "Store state in a contract and to update it", but it never gets to actually calling "update".
• "Provide arguments to a contract constructor using the Configure contract modal. Store state in a contract and to update it. Fetch your newly created contract's information from the blockchain and render it to a front end."
  • If you're new to Ethereum, that makes zero sense. And also isn't actually telling us the "why" of why we should be doing this.
  • It needs more hand-holding and an appreciation that learning material needs to be excruciatingly clear and straightforward. Referencing the modal "Configure Contract" without a link (or one I could find) is confusing and doesn't inspire me to go forward.
• Remove kauri links, the project is no longer maintained
• > The getMessage function gets the message value passed to the instance of the contract. With the IDE, you pass this value from the Configure option found under the disclosure triangle of the contract file, but outside of the IDE, you could pass the value in a variety of ways.
  • I found this paragraph especially confusing. I'd also expect one of the "variety of ways" to be explained, or at least remove that bit.

Motivation

After digging into app usage:

• ~50% of total sessions are < 10 seconds
• ~50% of visitors create a project
• ~20% of projects created deploy a contract

The goal here is to improve these metrics, specifically increasing the % of projects that actually deploy a contract.

Describe alternatives you've considered

• Add onboarding tours of the IDE (e.g. via tooltip popups)