Feat: Added tutorials, deployments and command line options to aelf p…

…layground (#273) * feat: Added aelf-playground with new features * feat: Added tutorials, deployment and command line options
AElfProject · Oct 2, 2024 · 2f01738 · 2f01738
1 parent b497733
commit 2f01738
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 11 deletions.
diff --git a/docs/tools/aelf-playground/index.md b/docs/tools/aelf-playground/index.md
@@ -64,42 +64,63 @@ Now as the workspace setup is done and project is setup inside aelf's playground
 - src/`ContractName`State.cs
 
 Once all the changes are done in the above files and all other required files (whereever nacessary). Then below operations can be performed on the selected workspace project: 
-1. AI Audit: Complete the AI audit of the writtwn smart contract. Result similar to below image will be visible once the AI audit completes.
+1. **AI Audit**: Complete the AI audit of the writtwn smart contract. Result similar to below image will be visible once the AI audit completes. The interpretation of the AI audit results will be shown when you hover over the smart contract code once the audit finishes.
 
   ![AI-Audit](/img/playground-9.png)
 
-2. Save Gas Fee: Optimise the smart contract to save gas fee.  It will suggest to make changes to the smart contract if the smart contract is not optimised. If the smart contract is already optimed then result like below will appear.
+2. **Save Gas Fee**: Optimise the smart contract to save gas fee.  It will suggest to make changes to the smart contract if the smart contract is not optimised. If the smart contract is already optimed then result like below will appear.
 
   ![Save-Gas-Fee](/img/playground-10.png)
 
-3. Build: Build the smart contract code. It will show `building` status when the user clicks the `Build` button and will output below result including whether build was successful or failed once the build process ends.
+3. **Build**: Build the smart contract code. It will show `building` status when the user clicks the `Build` button and will output below result including whether build was successful or failed once the build process ends.
 
   ![Build](/img/playground-11.png)
 
-4. Test: Test the smart contract code. It will show `Running Tests` status when the user clicks the `Test` button and will output below result including how many tests have passed and failed once the test process ends.
+4. **Test**: Test the smart contract code. It will show `Running Tests` status when the user clicks the `Test` button and will output below result including how many tests have passed and failed once the test process ends.
 
   ![Test](/img/playground-12.png)
 
-5. Deploy: Deploy the smart contract code on the aelf blockchain. It will show `Deploying` status when the user clicks the `Deploy` button and will output below result including `transactionId`, `proposal status` and `contract address` once the build process ends. You can verify the contract address by visiting [aelf testnet explorer](https://testnet.aelfscan.io/tDVW).
+5. **Deploy**: Deploy the smart contract code on the aelf blockchain. It will show `Deploying` status when the user clicks the `Deploy` button and will output below result including `transactionId`, `proposal status` and `contract address` once the build process ends. You can verify the contract address by visiting [aelf testnet explorer](https://testnet.aelfscan.io/tDVW).
 
   ![Deploy](/img/playground-13.png)
 
-6. Export: Export the project in a local directory. It will open an alert to save the workspace in the local directory. Users can rename the local directory.
+6. **Export**: Export the project in a local directory. It will open an alert to save the workspace in the local directory. Users can rename the local directory.
 
   ![Export](/img/playground-14.png)
 
-7. Share: Share the project with a sharable link. It will show `Generating share link` status when the user clicks the `Share` button and will output below result including the sharable link.
+7. **Share**: Share the project with a sharable link. It will show `Generating share link` status when the user clicks the `Share` button and will output below result including the sharable link.
 
   ![Share](/img/playground-15.png)
-  
-8. Upload Files: Upload more files to the project when necessary. It will show a `drag and drop files` section to drop files from the local directory.
+
+8. **Command Line Options**: Command line additionally provides options to check txID and clear terminal including above options. Use the help command to see all the options inside terminal. `check txID` helps in checking the transaction details.
 
   ![Upload Files](/img/playground-16.png)
 
-9. Add a New File: Manually add a new file in the playground project structure. It will allow users to add a new file in the workspace project structure add smart contract code, new proto files, etc.
+9. **Upload Files**: Upload more files to the project when necessary. It will show a `drag and drop files` section to drop files from the local directory.
 
-  ![Add a New File](/img/playground-17.png)
+  ![Upload Files](/img/playground-17.png)
 
+10. **Add a New File**: Manually add a new file in the playground project structure. It will allow users to add a new file in the workspace project structure add smart contract code, new proto files, etc.
+
+  ![Add a New File](/img/playground-18.png)
+
+11. **Rename & Delete File**: `Renames` & `Deletes` the chosen file or folders in the project directory structure.
+
+  ![Add a New File](/img/playground-19.png)
+
+12. **Tutorials**: Some pre-compiled tutorials are curated under `Tutorials` section of aelf-playground. It provides an option to filter the tutorials based on the difficulty level (`Beginner`, `Intermediate` & `Advanced`) and smart contracts languages (C# & Solidity).
+
+  ![Add a New File](/img/playground-20.png)
+
+
+13. **Deployments**: `Deployments` section provides a list of all deployed tutorials along with the wallet address used to deploy smart contracts on the aelf blockchain. You can click on the wallet address to view wallet details on the aelf explorer.
+
+  ![Add a New File](/img/playground-21.png)
+
+14. **Themes**: Users can also choose to toggle between `dark` and `light` themes.
+
+  ![Add a New File](/img/playground-22.png)
+
 
 ### Conclusion
 The aelf Playground offers a seamless and accessible platform for developers to build, test, and deploy smart contracts without the need for any local setup. With built-in features like AI audit, gas fee optimization, and GitHub integration, it simplifies the entire smart contract development process. Whether you're writing new code or modifying existing templates, the aelf Playground provides all the essential tools in one place, making it an ideal sandbox for both beginners and experienced developers.
diff --git a/static/img/playground-16.png b/static/img/playground-16.png
diff --git a/static/img/playground-17.png b/static/img/playground-17.png
diff --git a/static/img/playground-18.png b/static/img/playground-18.png
diff --git a/static/img/playground-19.png b/static/img/playground-19.png
diff --git a/static/img/playground-20.png b/static/img/playground-20.png
diff --git a/static/img/playground-21.png b/static/img/playground-21.png
diff --git a/static/img/playground-22.png b/static/img/playground-22.png
diff --git a/static/img/playground-23.png b/static/img/playground-23.png
diff --git a/static/img/playground-9.png b/static/img/playground-9.png