How to use Aeproject to access contract and API

æpp Development
1

Hello,

Bit of a new dev here

I want to use the SDK to access the API described in the below link as part of my smart contract, so my smart contract can check a users balance at a previous point in time.

https://api-docs.aeternity.io/#/account/GetAccountByPubkeyAndHeight

I have the aeproject downloaded and my project in /aepp-cli-js/my-project/

how can I use javascript to access both my contract and these API? Can you link any examples?

2 Likes
2

Ive used vue before so any pointers on doing it with vue are exta helpful

3

Hello @pizzaGee,

You can check out the How to build a ToDO list aepp Tutorial using the below Links
Part One:

Part Two which shows how to use AEproject and aepp-sdk-js to get the client height, balance and lots more:

You can also make use of the Tutorial Videos to follow up at:

I hope this helps out.

Regard.

2 Likes
4

I’m trying to follow this but a lot of it isn’t relevent to my goal so it’s confusing me a bit. Seems like a wonderful tutorial but I am not trying to use the identity app.

How can I add a front end to my contract with vue?

5

That being the case, you can make use of the Universal method to get your sdkInstance/client which you can now use to get your contract instance.

I could send you a code snippet if need be.

Regards

6

I see the Universal method used in the test file.

before(async () => {
client = await Universal({
url: “localhost:3001”,
internalUrl: “localhost:3001/internal”,
accounts: [
MemoryAccount({keypair: wallets[0]}),
MemoryAccount({keypair: wallets[1]}),
MemoryAccount({keypair: wallets[2]}),
MemoryAccount({keypair: wallets[3]})
],
networkId: “ae_devnet”,
compilerUrl: “localhost:3080”
})

How can i use it with vue/or any front end to access my contract’s functions?

Im considering attempting to create a vue project inside of aeproject, and using npm serve to host it

vue describes this here:Deployment | Vue CLI

but then I am trying to run both vue and aeproject on the same localhost server, so I feel it will not work.

maybe I can just create a vue project inside of aeproject, using “vue create my-project”? but then will aeproject actually run my html/css/javascript/vue? This seems possible, and its what I will try next.

Thank you for your help and tutorials.

1 Like
7

I recently updated the codes for the Todo List aepp where the identity aepp was not used. It’s still in the test phase but I guess it should do the tricks.

The above link leads to the GitHub Repo, you can head straight to the ToDo.vue file to see how the Universal method was used.

By the way, you can preview this update at vue-project

8

Realizing I made the title a bit misleading.

My goal is to have a frontend with html and css
a backend with my sophia contract, the aeternity SDK

connect the two with vue/javascript

1 Like
9

With this, you will see the Universal method written this way:

async getClient() {
  const getSdkInstance = async (secretKey, publicKey) => {
    const sdkInstance = await Universal({
      nodes: [{ 
        name: 'testnet', 
        instance: await Node({ 
          url: config.nodeUrl, 
          internalUrl: config.nodeUrl
        })
      }],
      accounts: [
        MemoryAccount({ 
          keypair: { 
            secretKey: secretKey, 
            publicKey: publicKey 
          } 
        })
      ],
      compilerUrl: config.compilerUrl,
    })

    return sdkInstance;
  };
  try {
    this.client = await getSdkInstance(config.priv, config.pub);
    this.$store.dispatch('setAccount', this.client);
    this.contractInstance = await this.client.getContractInstance(contractDetails.contractSource, { contractAddress: contractDetails.contractAddress });
  } catch (err) {
    console.log(err);
  }
},