Launch Your dApp on Effect Network
This guide will walk you through the process of how to launch a dApp on the Effect Network.
Example
You can see a living example of what kind of dApp you can create by going to Effect Socials. Here we provide an interface for users to buy engagement, simply by copying and pasting the URL of their social media post, logging in with their EOS or BSC wallet, and then paying for their order. This triggers the creation of a new task and posts it to Effect Network, where a worker will claim and complete the task. Afterward, the results will be posted back to the dApp, where you can see the results of your order.
Create Your dApp
The first thing you need to do is fork our boilerplate GitHub repo at: https://github.com/effectai/dapp-boilerplate. There you’ll find a starter template for Effect Network and a standalone web application where you can post tasks to your template on Effect Force.
You’ll be using Vue in combination with Nuxt, as well as Bulma for styling. Once you fork the boilerplate, you should cd into the Effect-Network-dApp/ folder and run the command: npm i && npm run dev to start the development build. It will run a local build that you can find by navigating with your web browser to http://localhost:3000.
Now, let’s explore several essential Effect-JS features, like configuring it up, retrieving campaigns, making placeholders, logging into the wallet, publishing tasks, and retrieving results.
Project Structure
Our web-dApp will have the following folder structure:
Effect-Network-dApp/
├── node_modules
├── nuxt.config.js
├── package.json
├── pages
│ ├── batch
│ ├── index.vue
│ └── create.vue
├── README.md
└── ...Important folders in this directory include components/ and pages/. When you first run the dev environment and navigate to http://localhost:3000, the index.vue file will be rendered. However, pages/create.vue comprises the majority of the dApp. Keep this in mind while you learn below how to install @effectai/effect-js.
Connect to Effect Network
Effect-JS is the comprehensive toolchain required for interoperability with Effect-Network. It provides all the necessary methods for creating tasks, retrieving them, creating qualifications, and retrieving user information.
Observe that Effect-JS is already present in the package.json file. Try installing the most recent version of Effect-JS using npm i @effectai/effect-js/next if you experience any issues. This will install the most recent version, which often includes fixes for bugs that may have been discovered in the past period.
create.vue
Getting back to pages/create.vue, you see at the top of the script tag we import effect-js:
import * as effectsdk from '@effectai/effect-js'This imports all the methods into the Vue template.
With the following method, we initialize and retrieve campaign data:
async getCampaign () {
try {
this.effectsdk = new effectsdk.EffectClient('mainnet')
this.campaign = await this.effectsdk.force.getCampaign(27)
this.campaign.placeholders = this.getPlaceholders(this.campaign.info.template)
console.log('this.campaign', this.campaign)
} catch (error) {
this.setErrorMessage(error)
console.error(error)
}
}This is how we initialize the effectsdk.effectsdk = new effectsdk.EffectClient('mainnet') method of construction. The EffectClient constructor parameters ('mainnet') specify which network to connect to. Currently supported are EOS mainnet and Jungle3 testnet. On mainnet, all actual tasks and transactions take place. Testnet is provided to facilitate development without using actual EFX. The faucet for free testnet tokens is located in our Discord Server.
The await this.effectsdk.force.getCampaign(27) method is used to retrieve the campaign we just created. In this instance, your campaignId is likely to be different. You can locate it by visiting your campaign on Effect Force and retrieving it.
The await this.effectsdk.force.getCampaign(27) method is used to retrieve the campaign we just created. In this instance, your campaignId is likely to be different. You can locate it by visiting your campaign on Effect Force and retrieving it.
Using this, the placeholders are then retrieved from the campaign with the getPlaceholders() method. This will iterate through the template and extract any variable names used as placeholders. You can then iterate through this list of placeholders and insert values. We can now proceed to the next step. Let's take a look at the task creation form.
Task Creation Form
The task creation form is located in pages/create.vue as step 1 (<div v-if="step === 1" id="step-1">). This form is responsible for populating the placeholder values. There is defined functionality to facilitate the insertion of values into the tasks array. In the end, however, you only need an array that can store values so that you can iterate over them and send them to Effect Network.
Wallet Login
The wallet login is also located in pages/create.vue but then as step 2 (<div v-if="step === 2" id="step-2"> In the wallet login form is where blockchain functionality begins to take place. Several login methods for the MetaMask and Anchor wallets have been defined here. These are presented as examples. The steps are as follows:
- Use the EffectSDK object we created previously, or create a new one as shown here.
- Connect using either the MetaMask or Anchor methods provided.
- Connect the Wallet-Provider to the previously initialized EffectSDK object.
Note that Anchor requires the installation of these npm packages:
"anchor-link": "^2.1.4",
"anchor-link-browser-transport": "^2.1.3"Anchor must be installed on each user’s computer.
For MetaMask, you do not need to install anything on your end; however, the user must install the web browser extension. Then, you can access their wallet in window.ethereum.
After connecting the wallet, you must connect the client account:
this.client = await this.client.connectAccount(this.connectAccount.provider, this.connectAccount.account)Using the resulting object’s methods we can generate transactions for the user to sign.
Posting Tasks
At this time, you may now post tasks. Look at the following statements from uploadBatch():
const content = {
tasks: this.batch.map(el => ({ <place_holder>: el.place_holder }));
}
const result = await this.client.force.createBatch(this.campaign.id, content, Number(this.repetitions), 'efxtaskproxy').catch(error => console.error('Failed to create batch', error))
this.createdBatchId = await this.client.force.getBatchId(result.id, this.campaign.id)You must prepare the content to be uploaded by mapping over the array where your placeholder values were stored. Return a key-value pair whose key name corresponds to the placeholder name you specified in the template. The this.client.force.createBatch() method can then be used to create and upload tasks to the Force. The this.client.force.getBatchId() method can be used to retrieve the newly created tasks.
You are now able to access the Force, either on Testnet Force or Mainnet Force, to view your newly published tasks. You will then learn how to retrieve the results once the order has been completely processed.
batch/_id.vue
When the workers have completed processing your results, you will be able to retrieve them. Create a new client or utilize an existing client. You will need the task’s batchid. This is the result of the final statement in the preceding code snippet. Put the id into the getSubmissionsOfBatch method, and it will return the results for your tasks if the batch has been processed. Otherwise, you will be required to wait until they have been processed to retrieve them.
this.results = await this.effectsdk.force.getSubmissionsOfBatch(this.createBatchId.id)Validation
Validation is a crucial step in this entire procedure. However, we do not currently offer a service to validate the submitted work. This is something you will need to accomplish on your own. You can use the provided webhook feature for the time being. Every time a worker submits a task, the webhook is invoked. Thus, you can be notified when your tasks have been updated.
