DEV Community: williblue

How to take your web development to the next level with Hyperverse!

williblue — Wed, 08 Dec 2021 15:49:50 +0000

Learn Web3 to expand your knowledge and skills for the future web development. Free, effortlessly, and failproof with Hyperverse.

If you haven’t created your dapp yet. Follow this guide - Steps by steps!
How To Get Your Dapp Started with Hyperverse - Easy!

So what’s the hype about Web3? Let’s start quickly explaining the versions of the internet and why Web3 is the next generation internet.

Web1 - Read-only (the beginning of the 90s - around 2005)

You can think of Web1 as the first version of the internet. There were read-only sites to display information. There was not much interaction and creation. Small number of creators and a huge amount of information consumers.

Web2 - Read and write (around 2005 - now)

The majority of the internet that we see today is Web2 version. Web2 is an interactive and collaborative version of Web1. Where the average users are content creators such as blog writers, Tiktokers etc.

Web2 gives a more sophisticated user experience on the internet where you can interact with it e.g. you can sign up to a social media site, create a username and post images etc.

For the data architecture we are relying on the big companies as we are using their platforms/services in exchange for our personal data. Those data are stored in the servers that these companies own. Meaning every time you use internet-based services you lose control and ownership of your data. You can think of it as a data monarchy.

You are properly wondering.. then what is the alternative to data monarchy? This is where Web3 shines!

Web3 - Read, write and executable (beginning phase)

With blockchain technology you can create decentralized dapps that allow users to use services without giving up their personal data. Instead of data stores in big companies' private servers Web3 is using peer-to-peer networks that cut middelman. This means you don’t need to get permission for using services.Or when you will make payment it does not require personal data and can not prevent any payments. This is data democracy! 🙌

Learn more in depth what Web3 is and why it is the next generation internet here.

Interested to learn more?

But where to start? Hyperverse makes it possible for you to build dapps right away with multiple blockchain technologies you can choose to build with.

Hyperverse is for everyone

No or limited coding skills? No worries! Hyperverse provides Smart Contract Composability so you don’t have to write smart contracts from scratch but only know how to interact with them.

Reuse existing codes

As open source is a thing and Hyperverse also offers Smart Module Discoverability where you can search for already existing codes that you can reuse or build on top. And even better if you are the one that provides the code you will get rewarded each time your smart module has been used! 💵💵

Ask away!

What if you got stuck or got questions? What is the best practice? Hyperverse team is more than happy to help you along your journey of building dapps. The Hyperverse community and team are sweethearts and are very helpful. Don’t be shy and ask them any questions or help if you run into troubles.

Help With Smart Contract Security

How do you know if your smart contract is secured and that no hackers are able to find any loopholes? Hyperverse is so kind to also provide Decentralized Security Auditing to add an insurance layer for your smart contract!

Anyone can build with Hyperverse! Get on your Web3 journey now! Check out Decentology's Discord and website.

How To Add Multiple Modules in Hyperverse UI Harness

williblue — Wed, 08 Dec 2021 14:37:33 +0000

Testing your code is important. Hyperverse has made it easy for you to do visual testing with UI Harness feature! You can create multiple testing modules which is great when you want to separate testing for e.g. localhost (emulator) and testnet.

If you haven’t created your dapp yet. See the guide below.
How To Get Your Dapp Started with Hyperverse - Easy!

This guide will use Flow blockchain with react framework and Fast Floward as smart contract features.

UI Harness File Location

In your preferred code editor open your dapp repository and go to packages > client > src > harness. The harness folder will contain two js files fast_floward-harness.js and harness.js

UI Harness Files

harness.js file is where you edit to organize your UI Harness modules as seen below.

fast_floward-harness.js contains action cards that we can see on the client preview.

Add New UI Harness Module

Copy the pre-coded fast_floward-harness.js file in the same folder and rename it. This guide will rename the file to your_dapp-harness.js. The logic for renaming harness.js file is name1_name2-harness.js

In the new harness file your_dapp-harness.js. Change the name in the parentheses in line 12 to the new name. For this guide your-dapp-harness and save the file. Logic is name1-name2-harness

To start with there is one UI Harness module.

In harness.js file you can add the visibility of the new module. After line 45 add the example block of code below and save the file.


   {
     "name": "core-your_dapp",
     "title": "Your Dapp",
     "description": "Explore UI Harness",
     "category": "Foundations",
     "route": "/core-your_dapp"
 }

Now the module should be visible!

When entering Your Dapp module it should display action cards like this 👏

There you have it! Add as much UI Harness modules as your heart desires! ❤️‍🔥

Learn to build dapps with Hyperverse regardless of your coding skills. Join Decentology's Discord and discover new possibilities for web development and more!

How To Get Your Dapp Started with Hyperverse - Easy!

williblue — Wed, 08 Dec 2021 13:25:18 +0000

Take your web development to the next level. Start building right away with Hyperverse (formerly known as DappStarter) with these simple steps here:

1. Choose Blockchain Technology

Enter dappstarter.decentology.com and choose the desired blockchain technology you want to build with. Hyperverse provides a wide selection of blockchain technologies; Flow, Solana, Avalanche, Conflux, Ethereum, and Polygon. For this guide, we will choose Flow Blockchain.

2. Choose Blockchain Language

Normally, blockchains have one or multiple languages. Choose the programming language you want to write your smart contract with. Flow blockchain only has one programming language and that is Cadence.

If you want to build on Flow blockchain Decentology has a great Bootcamp introduction to Flow’s Cadence programming language. The Bootcamp is called Fast Floward and you can find videos and exercises here.

Decentology is also planning to do Fast Floward 2 course in the future. Join their Discord to keep up with the news or ask any questions here.

The Decentology team and community are very kind and helpful. Write or talk about your idea(s) and ask them for the possibilities about building on Hyperverse and more. They will support your journey along the way.

3. Choose Framework

Choose the framework for the client app you want to make use of. Hyperverse offers frameworks between Vanilla or React.

4. Choose Smart Contract Features

Hyperverse provides 5 different pre-coded dapps with various features that you can build on top. Choose from simple ballot voting with IPFS integration to Pack NFT with Admin and Marketplace smart contracts. Choose the one that is closest to your dapp idea or the one that you are curious to see!

If none of the above foundations match your needs you can also write smart contract from scratch.

This guide will choose Fast Floward as smart contact features.

5. Create A Dapp Name

Enter your preferred dapp name.

6. Create Your Dapp

Before you are able to download your dapp. Click Login and Sign up to Hyperverse with Apple, GitHub, Google, or email.

After logging in you will be redirected back to the Hyperverse page. The page where we filled out the dapp customization earlier.

Now click on the 'Create Dapp' button and Hyperverse will create the dapp for you!

Your dapp is now created in Decentology’s Github. You can now clone your dapp to your computer either with the link that Hyperverse provides or download the zip file.

7. Clone Dapp To Your Folder [macOS]

This guide will clone the dapp with git clone. Choose any folder you want to clone your dapp to. Right-click on the desired folder and click on New Terminal at Folder

Use git clone command. git clone [insert link to the repository]

Enter the cloned repository with cd command. cd [name of the cloned repository]
Please note that the repository’s name normally is quite random and you can change it if you like.

8. Install Yarn On Your Cloned Repository

Simply run yarn. This will install all the dependencies that your dapp needs to be able to run on your computer.

9. Start Running Dapp

Run yarn start and then allow the terminal to access control the web browser that you are using.

Your dapp will now be displayed on your localhost where you can see the client preview.

For Troubleshooting:

If you experience EACCES: permission denied issue. Try to run sudo yarn test first and then sudo yarn start.

If it is still not working make sure that you have the latest version of Flow, yarn, npm, and node. Otherwise, feel free to ask for help on Decentology discord.

If you later run into this error message:

Error: Required port [5002] is currently in use
error Command failed with exit code 1.

Run sudo pkill node and try to yarn start again.

If runs properly. It should looks like this! 🙌

Visual Testing with UI Harness

Hyperverse offers awesome features called UI Harness which is a UI interface to test your smart contract code out! This become very handy as you can ask anyone to test your code without looking into the code itself! It can also give others an idea of what kind of dapp you are trying to build.

You can create multiple UI Harness modules. For example, you can create different modules to test on localhost (emulator) or on Flow testnet. Pretty convenience, huh!

Smart Contracts Location

You can find the smart contracts files that are pre-coded in dapp repository > packages > dapplib > contracts.

Good luck and enjoy exploring and learning with Hyperverse! Be one of the first web developers to create next-generation internet! Learn more about Decentology and Hyperverse here.