Effect Developer

# Quickstart Guide

In the quick start guide, we will delve into how to use the Effect Network Effect-SDK so that you can publish tasks on the platform. The purpose of this quickstart guide is to provide guided instructions on how to use the Effect-SDK to interface with the Effect Network.

This guide goes through the following steps:

  • Installing and initializing the Effect-SDK.
  • Creating and using a burner-wallet
  • Getting Testnet EFX
  • Publishing a campaign
  • Publishing tasks to Effect Network
  • Retrieving results

This guide will use a basic hello world example; the idea is that you (the developer) will type along with this example to get a feel for how the Effect-SDK works and use the Effect Network through it. So let's get started!

# Check out the Repo!

Just want to jump right into it right away? You can follow along with this guide or get started right away by going to the following link: Hackathon-Boilerplate (opens new window) There you will find boilerplate code with node and browser examples.

# Checkout the SDK-Reference

There is also a reference availbe for you with detailed information about the classes and methods: SDK-Reference (opens new window).

# Requirements

# NodeJS

At the moment, our Effect-SDK is built using TypeScript (opens new window). You will need NodeJS (opens new window) in order to install the npm package. If you do not have NodeJS installed, you can find it here: Download NodeJS for your platform. (opens new window)

TIP

Typescript is optional, but the Effect-SDK does provide types for those that enjoy programming with Typescript.

# Setup

# Initializing your project

Start the project by creating a directory, then go to that directory.

mkdir awesome-efx-project
cd awesome-efx-project

Afterward, create your main javascript file and the main HTML file inside of your project directory.

touch index.js
touch index.html

# Creating package.json

When you are inside of your project directory, initialize npm or yarn. Either one will help you to create a package.json.

npm init

# Installing the Effect-SDK

In your project folder, you can now start installing packages that will assist you in your journey.

npm install @effectai/effect-js

# Importing the Effect-SDK

Depending on the environment that you are working in, you will need to import the SDK in different ways.

# Node

Due to the way that NodeJS works, you can import or require the Effect-SDK as needed. Depending on your needs, both ways are provided for you.

# Browser

When using the Effect SDK in the browser, import the SDK from the node_modules/ directory in your project to your main HTML file. Alternatively we can use unpkg (opens new window) to import Effect-JS from a CDN. While we are at it, we will add our main javascript file index.js to the HTML file.

Import/Export

The name of the export is effectsdk and the import path of the sdk has to be relative.


Live-Server

When developing locally for your browser it might be useful to use a local server. You can quickly start a local server with the following command.

npx http-server -c -1

# Initializing the Effect Client

Now that we have installed the Effect SDK, it is time to initialize the EffectClient. Which will be the main object from which methods can be called in order to interact with the Effect Network.

The constructor can take a configuration object, but the constructor will initialize with a default configuration object if no configuration object is passed. Take a look at Effect-SDK Configuration for more information on the configuration object. The first parameter for the constructor is which network to use, there are three networks available: ['mainnet', 'testnet', 'local']. The default network is 'testnet'.

The constructor will take as its first argument the network to use. There are three networks available: ['mainnet', 'testnet', 'local']. The default network is 'testnet'. In order to use the local network, you will need to spin up a local network. Refer to the local network guide for more information. The second parameter that is taken by the constructor is the configuration object. The configuration object is an object that contains all the configuration options for SDK, such as the EOSIO endpoint, IPFS endpoint, etc. Please refer to the Effect-SDK Configuration or Effect-JS-Reference/EffectClientConfig (opens new window) for more information.

# Connect with burner wallet

For this quickstart guide, we will be using a burner wallet. You can use the createAccount() method in order to generate a random keypair for you. If you already have a keypair, you could use the private key to instantiate the bsc account with it by using createAccount('privateKey').

After creating your account, you have to add it to your wallet. With createWallet(account) you can create a wallet with your account.

After creating your wallet, all you have to do is connect your account to the SDK by passing the web3 object that gets returned by the createWallet() method to connectAccount().

# Create Campaign

The next step now is to create a campaing json structure. This campaign object contains essential information such as; description, template, instructions, reward per task, example tasks. Creating a campaign is easy when you've managed to lay down the basic information.

Use the example given below in order to create your own campaign object.

The most dificult part of making the campaign is the html itself that needs to be passed to the template property. This html will be used to render the campaign.

As can be seen below the template is not complete html. It does not contain the HTML tag: <html>, head nor body. This is because the html is rendered by the Effect-SDK.

Another important thing to note is that you can import stylesheets and your js libraries in the html.

It is recomended to use Effect Network's default style sheet, which you can import into the html template by adding this tag: <link href="https://app.effect.network/force-defaults.css" rel="stylesheet" />

Also note that in the html template we have a ${tweet_id} variable that will be replaced with an actual tweet id for every new task. The notation ${variable_name} is called a placeholder. The placeholder will be replaced with the actual value when the task is created.

Use the makeCampaign() method in order to upload and publish your campaign to the blockchain.

# Visit Testnet

Visit https://testnet.effect.network (opens new window) to see the campaign. Follow the link, sign in with your keypair and join your campaign to work on the tasks. Don't forget to use the keypair that you generated in the begining of this tutorial.

# Getting funds

Before we can continue creating a batch, you will need funds to create a batch. You will need to provide your Virtual Effect Account name in order to get your tokens. See Connect with burner wallet (opens new window) on how to create an Virtual Effect Account. you will be able to see your account name with the following code.

console.log(effectAccount)

 effectAccount: {
  "accountName": "bd9b69af4f6ed393e9c4ba7c503e80ea2fbfa1fb", // This is the account name.
  "address": "0xe345E6eD90333135288B780A37672F2d98cC9E3B",
  "privateKey": "0x123...321"
}

Join our discord and use the faucet bot to get funds. Find the Hackathon section, and join the faucet channel to find more information to get funds. Find the Effect.AI Bot and use the command !get_tokens <account_name> to get your funds.

Get tokens from the faucet. 💸

# Join the Effect Network Discord (opens new window)

# Creating batches and uploading task data

The campaign should be up and running now; the way we add data into the campaign is through batches. Every time new tasks are added, they are added as a batch. That way, the tasks are neatly organized. The task is already defined by the template as stated above, so now all that needs to be done is to pass the place_holder into the template every time it is presented to the worker.

This example relies on an image being loaded into the placeholder. This is done by passing a URL string into the image tag that is defined in the template. So we will first create the task image URLs and then create the batch so that it can be published.

Define the tasks (These tasks have already been uploaded to IPFS), create and publish the batch.

# Wait for response

When the batch is published, it will become visible to the workers, and they will start working on it as soon as possible. Completion time can vary a bit depending on the type of the campaign and campaign qualifications. When a task is done within a batch, you will be able to retrieve the results using the following method.

# Summary

You now know how to setup the SDK, create an account, connect said account it to the SDK, create campaigns, batches, tasks and retrieve submissions from said tasks.

That's it! the following things are needed to create a campaign:

  • Installing the Effect-SDK
  • Creating a burner wallet
  • Creating a campaign
  • Creating templates
  • Creating batches and tasks
  • Waiting for workers to complete the tasks
  • Retrieving the results
  • ...
  • Profit! 💸💸💸

🌽 Local →