# Javascript SDK

Javascript Developer Kit for OCAP Service that runs in browser/node.js/native environments.

There are many different ways to use @arcblock/ocap-js in your javascript(webapp/node.js/react-native) applications.

# Requirements

• Node.js v10+, we need node.js as a tooling env
• Yarn as a more performant package manager alternative

That's all, if you are willing to setup projects with command line, a good command line app is recommended.

# Use in WEB application

# 1. Integrate with new React application

If you have npm version 6+, using following command to bootstrap:

npx create-react-app my-ocap-app --scripts-version @arcblock/react-scripts
cd my-ocap-app
yarn start

If not, we need to install create-react-app first:

yarn global add create-react-app

Then,

create-react-app my-ocap-app --scripts-version @arcblock/react-scripts
cd my-ocap-app
yarn start

If anything does not work, file an issue at here.

# 2. Integrate with new Vue.js application

vue create --preset ArcBlock/ocap-vue-starter my-ocap-dapp
cd my-ocap-dapp
yarn serve

For more instructions, please read ocap-vue-starter documentation.

# 3. Integrate with existing ES6+ application

If you want to integrate ocap javascript sdk to an existing application that already have webpack and babel included:

# 3.1 Add dependency

yarn add @arcblock/ocap-js babel-polyfill

# 3.2 Update project entry

Because babel polyfill should be included at the beginning of application code, we need to import it in our entry file:

import 'babel-polyfill';

If you are using webpack for building, prepend babel-polyfill to your main entry file will have the same effect.

# 4. Integrate with existing ES5 application

OCAP JS SDK provides a standalone bundle for developers that donot have a build process with webpack and babel.

# 4.1 Add dependency

<script src="https://cdn.jsdelivr.net/npm/@arcblock/ocap-js@@latest/lib/bundle.js"></script>

# 4.2 Use SDK

const client = new OCAPClient({
  dataSource: 'btc',
});

(async () => {
  const account = await client.accountByAddress({ address: '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa' });

  console.log(account);
})();

# Use in Node.js application

# 1. Add dependency

yarn add @arcblock/ocap-js

# 2. Use SDK

const OCAPClient = require('@arcblock/ocap-js');

// init client
const client = new OCAPClient({
  httpBaseUrl: 'https://ocap.arcblock.io/api', // we may have multiple hosts in future
  socketBaseUrl: ds => `wss://ocap.arcblock.io/api/${ds}/socket`,
  dataSource: 'eth', // btc, eth
  enableQuery: true,
  enableSubscription: true,
  enableMutation: true,
});

// list api
const queries = client.getQueries();
const subscriptions = client.getSubscriptions();
const mutations = client.getMutations();

// query
const account = await client.accountByAddress({
  address: '0xe65d3128feafd14d472442608daf94bceb91e333',
});

// subscription
const subscription = await client.newBlockMined();
subscription.on('data', data => console.log(data));

# Use in Native Application (React Native)

Exactly same as Node.js server integration, for an working example, please visit ocap-react-native-starter.

Please note, we donot need babel-polyfill for react-native.

# Starter Projects

# GitHub

• ocap-react-starter
• ocap-vue-starter
• ocap-react-native-starter

# CodeSandbox

Start building apps without tedious environment setup.

• @arcblock/ocap-react-starter
• @arcblock/ocap-vue-starter