Superblocks Lab starts with an empty workspace, meaning there are no projects loaded in the initial workspace. Apart from accessing external resources, presented in the Learning And Resources section located on the left side menu, the only available action when first starting out is to create a new project.
In order to create a new project, follow the Welcome screen and click the Create a new project link or the Create New Project button.
Alternatively, including subsequent project creation, create a new project by accessing the projects menu, located in the top menu bar.
Click the down arrow in the top menu bar to bring up a window, which lists all available projects and possible actions, then click Create New.
Create a new project
Currently, in order to create a project you need to go through 2 steps to do so:
1. You need to select a project from a collection of templates.
2. Provide a project name and a title to the DApp.
The Select Template window follows the initial project settings. The templates serve as a base to bootstrap creations. They are as follows:
- Empty Project - a minimum decentralized application containing a single empty contract file and a bare-bones web application to start coding
- Hello World - a simple example containing a working smart contract that stores a greetings message
- Uncensorable News Feed - an example of a decentralized news channel
- Raise to Summon* - an example of a crowdfunding campaign to raise funds for a given cause and beneficiary
- ERC-20 Token - an example DApp for transferring, burning and checking balance of a token created based on the ERC-20 standard
- Voting System - a simple and customizable voting system implementation
- Safe Math - Mathematical operations with safety checks
Select a template, for example, Hello World, then click Select Template button. The application will take you to the next state.
* Trivia: the Raise to Summon template contains the contract used to summon Nick Johnson (core developer on go-ethereum and lead developer of ENS) to Decentralized Camp in Stockholm, 2017. Visit the MeetUp group at https://www.meetup.com/decentralized-camp/
Create the new project
After selecting the template you want to start using, a new window titled Create a new project will appear, requesting information about the Project name and DApp title, respectively.
The Project name is a handle that is associated with the DApp project, for referencing and accessing the project.
The DApp title refers to the application name, to be presented to the user as the main web application title (HTML page title).
Fill in the details and click Create Project.
The workspace is divided into three main sections: the top menu bar, the left side menu, and the main window.
The top menu bar presents the Transactions button on the left side, the Help button on the far right, and the projects menu in the middle.
The projects menu is named after the currently selected project DApp title. The projects menu offers a list of all available projects, enables creating new projects with the Create New button and importing existing projects with the Import button. It also enables managing existing projects.
The available actions are:
- Configure (gear icon): opens the Edit DApp Configuration window for editing the DApp title
- Export (download icon): downloads the project, saving it to a local file on the computer
- Delete (trash can icon): removes the project from the workspace storage
The left side menu presents the Select a Network button, used to change networks, and the Select an Account button, used to manage accounts, both at the top of the menu. The buttons are followed by the Files tree hierarchy, which organizes all project files, and the Learning and Resources section, which links to additional material.
The Files hierarchy provides access to all the listed files, enabling the creation of New Files and New Folders. Together with the Rename and Delete actions, the options on the left side menu enable project organization and file management. The same actions are also available on the context menu, accessible by clicking any item on the hierarchy with the right mouse button.
The main window is the biggest area covering the screen and it is where all content is presented, for example when opening a file or performing an action that opens a new window. A status bar at the bottom of the screen also shows relevant information, along with the currently selected network end-point.