DEV Community: Doyin Olarewaju 🇳🇬🇨🇦

Working with WalletConnect from mobile Dapps (Part 1)

Doyin Olarewaju 🇳🇬🇨🇦 — Tue, 19 Jul 2022 10:24:54 +0000

Wallets are an essential part of the blockchain. They function as a way of storing our web3 assets, as a form of identity, for authentication among others. When building a Dapp knowing how to work with wallets is crucial since it is a big part of the user experience. One area that has not been covered as much is working with wallets when building mobile Dapps and in since our main goal at Weedle is promoting mobile first Dapp development, this seems like a great topic to write about.

The aim of this tutorial is to cover everything you need to know to effectively add the ability to use wallets to your mobile Dapps. The tutorial will be distributed into parts, with each part taking some more advanced topics than the last.

First Some Dependencies

I'm assuming you already have your app ready, if you don't head over to this article to learn how to setup a react native app that is web3 compatible.

The walletconnect documentation for react native can be found here. According to the docs we need three dependencies, you can go ahead and copy the code below to install them

yarn add @walletconnect/react-native-dapp react-native-svg @react-native-async-storage/async-storage

However there is a small issue with this, the types in the async storage library (@react-native-async-storage/async-storage) specified are incompatible with walletconnect. In fact using it directly with a typescript setup will show you an error saying the type is incompatible with walletconnect.
There are a couple of solutions:

Option 1

One option (long and difficult way) would be to get the types walletconnect expects and write an adapter that maps to those types. If you want to go via this route, you can find the file with walletconnect typings in a seperate utils github repo here. You can basically create a file and put the types inside it, then use it as the type for your adapter.

Option 2(My preferred option)

Is fast and dirty. Basically examining the keyvaluestorage functions from walletconnect you will see that they are not only making use of a very small set of functions from the async storage library. To get the correct types we can use the types referred to in option 1 and just cast it to the asyncStorage props from walletconnect provider.

I prefer this method since walletconnect isn't using any significant number of functions from the library, so mapping all functions just because a few are being used doesn't make sense to me. This can be seen as a temporary measure at least till this issue has been fixed by the WalletConnect team.

Integrate WalletConnect with our App

According to the docs we have two ways of using WalletConnect. We can either use it as a provider or as a Higher order component; lets stick with the provider method. The provider takes a couple of props, but only two of them are compulsory, there are default values provided for the other props which is sufficient for our use case.

Say our app currently looks like this

<View style={styles.mainContainer}>
  <MainApp />
</View>

To enable wallectconnect, we can just need to wrap the app in its provider like so

<WalletConnectProvider
  redirectUrl={`wmw://app`} // Explained below
  storageOptions={{
    asyncStorage: AsyncStorage as unknown as IAsyncStorage,
  }}>
  <View style={styles.mainContainer}>
    <MainApp />
  </View>
</WalletConnectProvider>

The value in the storageOptions was explained earlier, as for the redirectUrl this is a deep link url that walletconnect redirects to after validation. More on that here. My preferred method of handling the redirect url would be to redirect to a view where I can verify if the user has been authenticated or not, preferrably back to the current page where the user tried to login using their wallet.

Now that we have wrapped our app with the walletconnect provider, lets look at how we can authenticate using walletconnect. To explain this, lets say inside MainApp we have two components, Auth and Dashboard. We want to only show dashboard after authenticating the user

// Auth.tsx
import React, {useState} from 'react'
import WalletConnectProvider, { useWalletConnect } from '@walletconnect/react-native-dapp';
...

const Auth = () => {
  const [isConnected, setIsConnected] = useState<boolean>(false);
  const connector = useWalletConnect(); // Wallet connect hook
  ...

  // Note: for example purposes only, do better and split your components into files properly
  return (
    <View>
    {
      !isConnected ? 
        <View> 
          <Button title='Login' onPress={authenticateUser} />
        </View> :
        <Dashboard />
    }
    </View>
  )
}

In the code above, we are doing a couple of things.

useWalletConnect - This hook provides a connector object for us which contains all the functions that we need to use walletconnect.
isConnected - A state variable we can use to determine if the user has been authenticated or not.
We are also using a simple button to handle calling a auth function authenticateUser which we will define next.

// Auth.tsx

// Our login function looks like this

const authenticateUser = async () => {
  if (connector.connected) {
    setIsConnected(true)
  }else{
    const session = await connector.connect();
    // The session object will contain details about the chain you are connected to and also an accounts array
    setIsConnected(true)
  }
}

Here we are first checking if we have already authenticated with the wallet, if that isn't the case then we call .connect to take us through the authentication process with our wallet. What the process looks like is that walletconnect checks for all wallets on our device and displays them in a bottom sheet component, we can then select the specific wallet we want to use (e.g. Metamask, Trust wallet etc). An intent is then created which takes us to the selected wallet for approval, once we approve we are directed back the redirectUrl we provided to walletconnect.

The authenticate call returns a ISessionStatus type which contains details about the network we are connected to like chainId and also an accounts array which contains our wallet address from the connected wallet.

The connector object can be retrieved from the useWalletConnect hook at anytime and in any component inside our app. The object contains all we need like our accounts and network information, so we don't really need to store what we get from calling .connect

Handling Errors

Awesome, we are almost done but we need to handle some errors, like if the user rejects the auth request. This can be done by wrapping our call to .connect in a simple try catch block like this

// Auth.tsx

// Our login function looks like this

const authenticateUser = async () => {
  try{
    if (connector.connected) {
      setIsConnected(true)
    }else{
      const session = await connector.connect();
      // The session object will contain details about the chain you are connected to and also an accounts array
      setIsConnected(true)
    }
  }catch(e){
    // handle error here
  }
}

Logout Functionality

Say on our lovely dashboard we have a logout button which allows the user disconnect from their wallet from our app.

// Dasboard.tsx

const Dashboard = async () => {
  ...

  const logUserOut = async () => {
    await connector.killSession();
  }

  return (
    <View>
      <Button title='Logout' onPress={logUserOut} />
      ...
    </View>
}

Conclusion

Awesome stuff, we have been able to build a dapp that can authenticate using walletconnect. You should explore the other options from the walletconnect docs like reducing the number of wallets available for auth among others.
Although this is a pretty good starting point but there are several other things we need to do to have a stable and working dapp.

If you enjoyed this articale or it has been helpful to you in any way. Follow us here and on twitter to get notified when the follow up articles gets published. Cheers

At weedle labs, we are working on a mobile first web3 infrastructure. The aim is to simplify developing web3 Dapps on mobile and help you reach a much wider audience than what the web can offer. We are open source and are actively looking for contributors to join us in active development. Give us a shout on twitter @weedle_app or tech@joinweedle.com.
If you also wish to know when we launch and get more details, you can check https://joinweedle.com.

Tutorial: Setting up a Web3 react native Dapp

Doyin Olarewaju 🇳🇬🇨🇦 — Thu, 07 Jul 2022 00:30:39 +0000

Introduction

Web Dapps are all the rage and there hasn't been as much focus on mobile as it should be. This is with good reason though, since the libraries and cryptographic primitives required for creating a Dapp are not directly compatible with mobile, it can be difficult setting up a mobile app that is Web3 ready. The purpose of this tutorial is to walk you through setting up a react native app that is web3 compatible.

The short version

If you are lazy (like me), you can just grab a ready made app from here and call it a day. But if you wish to learn how to setup yourself you can continue reading.

The long version

Setup a react native app

To start the process we need a react native app that has native abilities. You can use either use the expo bare workflow for this or the CRNA (create react native app).

For the CRNA option:

npx create-react-native-app my-app

For the expo option:

npx expo init
Select the last template option (bare minimal)

Installing dependencies

To make our app web3 compatible, the first dependency we need is

yarn add node-libs-react-native

npm i node-libs-react-native

The purpose of this dependency is to get some of the nodejs modules we need to interact with the blockchain into react native. Some of these dependencies are cryptography libraries that will normally not work in react native, but using this package we can make them work in RN.

Setup App for web3 compatibility

Once its installed, the next thing we need to do is use the library in our metro bundler config. We need to add this module under the extraNodeModules key, basically what that would be telling metro is that if I request a module and you can't find it in my primary node_modules, check the modules I included in the extraNodeModules. This will help metro find the Nodejs modules we need from the package. The new metro config will look something like this

For expo

const { getDefaultConfig } = require('expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.extraNodeModules = require('node-libs-react-native');

module.exports = defaultConfig;

If you prefer you can also use a rn-cli.config.js file (You can create one if it isn't present)

const extraNodeModules = require('node-libs-react-native');

module.exports = {
  extraNodeModules,
};

The final step is to import a file from node-libs-react-native into the entry point of your app. We need to import

import 'node-libs-react-native/globals.js';

In expo, this will be the index.js file. This needs to be the very first line in the file. The import brings in all the required modules like the crypto module into our app.

Web3 Client

Our app is almost ready, but its not completely web3 ready without a web3 client. Two of the most popular ones are Web3.js and ethers.js. For this tutorial we will be going with ethers.

We need two dependencies

yarn add ethers @ethersproject/shims

Once installed we need to import the shims package in thesame file where we placed node-libs-react-native/globals.js. With that, our app is now fully web3 compatible.

To test out if it works, we can try generating a wallet using ethersjs. In our App.jsx or App.js

...
import { ethers } from 'ethers';

export default function App() {
  useEffect(() => {
    const w = ethers.Wallet.createRandom();
    console.log({ walletObject: w, mnemonic: w.mnemonic });
  }, []);

  ...
}

If all went well, in your console you should see a wallet object and a mnemonic. Just like that you have a web3 compatible react native app.

If you also wish to know when we launch and get more details, you can check https://joinweedle.com

How to use a Private git repo as an npm module

Doyin Olarewaju 🇳🇬🇨🇦 — Fri, 06 Dec 2019 02:54:07 +0000

There are several reasons why you might wish to use a private git repo as an npm module, but of the top of my head, the topmost would be you wish to share some highly confidential business logic code and for some reason, you can't use a private npm registry.

Well, you are in luck, here is how you go about it.

Setup the repo

For this article, I will use bitbucket as an example since GitHub is fairly easy. So set up a new project using bitbucket or a git provider of your choice.

Setup your project

To start you need a project that contains a minimum of a package.json file. Without the file, the project won't be recognized as a valid package and npm install won't work. You can set that up quickly using the npm command

npm init

The command above will take you through the steps of setting up a new project. Enter all the information as you wish including the repo URL.

Note: After setting up the project, you should add private: true to the package.json file to ensure the project does not get published by mistake.

Now write your code and push your project to the git repo.

Making use of the package

If this were a public repo, you would be done already. But unfortunately it isn't and other steps follow.

SSH

There are other authentication methods for authenticating against your git provider to access the repo. You could use HTTP and include your username and password in the URL, or generate a key that can also be used as part of the URL. Both methods are pretty unsafe, as you will be exposing your credentials out in the open.

The most secure method is, therefore, to authenticate using SSH. Generating an SSH key is out of scope here, but you can take a look at this tutorial

https://confluence.atlassian.com/bitbucket/set-up-an-ssh-key-728138079.html#SetupanSSHkey-ssh2

After generating the ssh key, save using a name you can remember in a location you can remember. I advise you do not create the key using a password, but it's totally up to you.

Setup an ssh config file in your ssh directory. The filename is just config, the content should look like this

Host bitbucket.org Preferredauthentications publickey IdentityFile ~/.ssh/bitbucket

Fetch the public key and save to bitbucket as a new ssh key. It is also advisable you use a name that sets the key apart so you know its purpose, In my case, I set up different keys for my different environments. So I used keyname-environment e.g. Payment-server-staging.

Install the repo as a module

Get the ssh URL of the repo that you set up earlier. It usually is in this form

git@bitbucket.org:acmeinc/foo-bar.git

Install using npm i git@bitbucket.org:acmeinc/foo-bar.git

If the SSH setup went well and you added the key successfully to bitbucket, the installation should go smoothly.

Bonus: Using with Docker

In my use case, I needed to use this repo in a container. There are several ways to also accomplish this, but I needed a way that would not copy the key as part of docker layers.

Modify your Dockerfile this way:

`
FROM node:10-alpine

ARG SSH_KEY

RUN apk add git OpenSSH-client

COPY package.json package-lock.json ./

RUN mkdir -p -m 0600 ~/.ssh && ssh-keyscan bitbucket.org >> ~/.ssh/known_hosts

RUN ssh-agent sh -c 'echo $SSH_KEY | base64 -d | ssh-add - ; npm install'
`

The Dockerfile above tells docker to expect a base64 string at build time and read it in a variable called SSH_KEY which we use on the last line of the Dockerfile.

To get a base64 version of your key, you can convert it manually or use the following command.

key=$(echo ~/.ssh/bitbucket | base64)

The above command will copy it key to a variable $key as base64, you can now run your Dockerfile, but the command for running it changes a little

docker build --build-arg SSH_KEY=$key -t private-git .

That's it.

Updating

This is a part that is a bit tricky, updating gave me problems when I first started using this approach. To upgrade its best you create a tag for the repo using a version number, preferably semantic versioning.

Once the tag has been created, you can add the tag name like so

"some-app": "git+ssh://git@bitbucket.org:acmeinc/foo-bar.git#TAG_NAME"

This will install the version from the tag number. This is also a very good practice as you can fall back to older versions.

Conclusion

So that's it, a bit lengthy but worth it in my opinion. Go ahead and write your function, share with colleagues or across projects. Cheers

Sending Realtime Events To The Client From Node child process

Doyin Olarewaju 🇳🇬🇨🇦 — Fri, 13 Sep 2019 16:10:29 +0000

So I recently had to add a new feature to an existing app. The new feature did some data heavy stuff like processing large documents of which the content was to be saved into a database.

Naturally, I queued the data from the file and consumed the queue in a forked child process then saved the info to the database in the child process. To send a progress report on the status of the processing, I decided to use socketio to fire events to the client. This approach presented me with several problems because for one the processing was fast and the socketio instance didn't capture most of the events another problem was how to use the same socketio Instance between parent and child.

The approach I later settled for was to use Redis Pub/Sub to fire events from the child processes, listen on the main process and send said events to the client. The approach works, scales well and gives a really good performance.

Now for Some code

I will assume you have an existing nodejs app and the data has been queued already. We need to install the following

Redis Nodejs Client (I use https://www.npmjs.com/package/redis)
SocketIo

Both can be installed using npm. npm i -S socket.io redis

RabbitMqHelper

Though this is out of scope for this article, I wrote a RabbitMq Helper which I use in my apps.

The Child Process

The feature required processing different queues that had different types of information but they both required the same underlying action; Saving into the database. So, I wrote a base child process and the specifics of each child process extended this

Base Worker

User Worker

The Main Process

The main or parent process will fork the child processes anytime it starts. Starting a few child processes isn’t very difficult, but imagine having several child processes, it can be stressful getting the path to each and running them one after the other. So for that, I like to use a glob to find all child processes.

For that, I will use a npm module called glob.

npm i -S glob

The code for the main process looks like this.

And that is it. Please leave your comments and opinions. Enjoy!

Setting up your React Workflow with Create React App, EsLint, Flow, Jest & Enzyme

Doyin Olarewaju 🇳🇬🇨🇦 — Sun, 11 Nov 2018 06:20:25 +0000

React is awesome, It gives you the power to create truly amazing apps that are performant and fast. But that's not all there is to building an app, is it? Having built multiple large apps based on React, I have discovered that the workflow is as important as the output. With a great workflow, maintenance will be easy, errors will be less and debugging will be a cinch.

So how can we get the best out of this amazing library? By using tools to optimize our workflow of course. The tools in question are Flow (For static typing), EsLint (For adhering to good coding patterns), Jest and Enzyme (For Testing).

Flow

Javascript is a dynamically typed language and so is React (goes without saying). This dynamism though convenient introduces a lot of problems with error detection and hence debugging. Statically typed languages evaluates data types at compile time, in most cases you even see the errors in your code editor before running them while dynamically typed languages on the other hand only evaluates at runtime, which means you detect type errors after the program has tried to run.

Take a look at the code snippet below

    const myObj = 2;
    // A lenghty stretch of code later... 
    myObj();

The code snippet above will result in an error, specifically "TypeError: myObj is not a function". If this were a statically typed language, you would detected this bug earlier and fixed it before even running. Though this is an oversimplified version of what could happen, this small issue can sometimes cost you a lot of time. For example, if this piece of code would not run until later on in the program, it could easily sneak past the developer's initial test and cause issues later.

To solve this issue we make use of static type checkers, in this case Flow (https://flow.org/en/). Flow is a static type checker for Javascript which means it checks your types at compile time just like other statically typed languages.

Incorporating Flow into your workflow can be tedious at first and it actually has a bit of a learning curve, but trust me the benefits far outweigh the extra effort.

Applying flow to the code snippet above

// @flow
const myObj = 2;
// A lenghty stretch of code later... 
myObj();

Flow will catch this error and display the information in your code editor or it can also catch the error when you run the flow command in your cli. Here's a sample of what flow will output in your editor

As you can see, flow tells you its not a function and even gives you further information on what type it is. Using flow will help

You code faster and with confidence (Since you don't need to run your code before seeing these type bugs).
Understand your code even better
Work better in teams (Interpretation is way easier and your code base is easier to understand).
Intellisense is better

esLint

The importance of Linting cannot be stressed enough. Linting is a code analysis tool and is part of the white box testing process. While unit tests will test your output and general program behaviour, Linting analyses the internal structure of your code.

What is Linting ? Linting is the process of checking your code for logical and stylistic errors. Linters make sure you adhere to a coding standard, provides consistency and shows you possible logical errors. A linter is a program that performs this analyses on your code by going through it. Using a Linter in a team can make the codebase look like it was written by just one person.

There are several Linters out there but my most preferred is esLint because of the robust set of rules it has and also because it's very flexible and easily configurable. You can even write your own rules that your codebase must adhere to.

Jest and Enzyme

Writing unit tests for your app is an extremely important exercise and luckily we have Jest and Enzyme to make this process really easy (Thank you facebook, Thank you airbnb).

Despite the importance of unit testing in React apps, I have seen a lot of people not bother with this which I must say is a mistake. Jest and Enzyme provide awesome testing tools such as Shallow rendering (Rendering only the component without its children for testing), Snapshot testing (Rendered output of your component stored on file and compared against to ensure your component doesn't change) and code coverage out of the box.

Testing a React component can be as simple as

it('render <ComponentX /> without errors', () => {
    const wrapper = shallow(<ComponentX />);
    expect(wrapper).toMatchSnapshot();
});

// or with a function spy

it('call function on button click', () => {
    const funcToCall = jest.fn();
    const wrapper = shallow(<ComponentX callFunc={funcToCall}/>);
    const btn = wrapper.find('button');
    btn.simulate('click');
    expect(funcToCall).toHaveBeenCalled();
});

Of course the test could become more complex depending on what you wish to test, but you get the general idea. Jest is the test framework itself that has a task runner, assertion framework and good mocking support. Enzyme on the other hand is a library that provides an easier interface to write unit tests.

All together now

Create React App

For this article I will make use of CRA (Create React App) , the easiest way to start a React app. Grab yourself a copy by running

npx create-react-app <your app name >

Enter the folder through your cli to install the rest of the tools.

Flow

Flow configuration comes with your CRA, but you need to install flow-bin into your workspace in order to use it (Read more about Flow bin).

To install Flow follow these steps:

Run npm install --D flow-bin to install flow-bin.
Run ./node_modules/.bin/flow init to create a new .flowconfig file
Add "flow": "flow" to the scripts section of your package.json.
Run ./node_modules/.bin/flow to see if it works. You should get a No Errors response. Note: To make things easier, you should install flow globally by running npm i -g flow-bin. Once that is done you don't need ./node_modules/.bin/flow any longer, you can just run "flow" from your cli.
The No errors! message comes up because you have not started flow typing any files. To see flow in action add // @flow at the top of any of your js or jsx files and run flow again. You will get messages detailing the errors and the file they exist in.

esLint

To get started with esLint do the following

Run npm i -D eslint to install esLint.
Once the installation is done, run the following command ./node_modules/.bin/eslint --init. (NB: Again you can install eslint globally by running npm i -g eslint). The init command will ask you about the linting rules you wish to use. Would you like to create yours or would you like to use a popular coding style

A popular choice and the one I usually use is the airbnb style. You also get questions about if you use React (Obviously) and which configuration file type would you like to use (JSON, Javascript or YAML), I mostly use javascript. Then finally you will be asked to install eslint's dependencies, install them to finalise.

Once done with the config an eslintrc.js will be generated for you (the file extension will depend on config file type you chose). You need to copy the following command into the .eslintrc.js file

// original file
module.exports = {
    "extends": "airbnb"
};

// change to this 
module.exports = {
    "extends": ["airbnb", "plugin:flowtype/recommended"],
    "env": {
        "jest": true
    },
    "parser": "babel-eslint",
    "plugins": [
        "flowtype"
    ],
};

We are almost done, just one more step.

Jest and Enzyme

Again the good people behind CRA included Jest as a default test runner (Read more), but it doesn't come with enzyme installed. To install enzyme run the following command

npm install --save-dev enzyme enzyme-adapter-react-16 enzyme-to-json

Then update your jest config in package.json by adding

"jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  }

Next we need to create configurations for enzyme to work with react 16. Create a file called setupTests.js in the src folder, so that we ./src/setupTests.js exists. CRA will find this file by itself, but if you are not making use of CRA, update your jest config in package.json by adding "setupFiles": ["./src/setupTests.js"] to it. Add the following command to setupTests.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

Now we are all set. If everything went well, you should already see eslint making corrections to your code with red underline.

Sample program

Let's write a simple program that will be flow typed and unit tested.

Say I have these components

// App.jsx

import React, { Component } from 'react';
import './App.css';
import MyButton from './components/MyButton';


class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 1,
    };
    this.countFunc = this.countFunc.bind(this);
  }

  countFunc() {
    this.setState({
      count,
    });
  }

  render() {
    const { count } = this.state;
    return (
      <div>
        <h1>{count + 1}</h1>
        <MyButton name="Click Me" countFunc={this.countFunc} />
      </div>
    );
  }
}

export default App;

And...

//MyButton.jsx
import React from 'react';

const MyButton = ({ name, countFunc }) => (
  <button type="button" onClick={() => countFunc(2)}>{name}</button>
);

export default MyButton;

As it is, they are both just regular functions with no flow typing. The button is passing a number back to the App component but if for some reason that changes the program breaks or loosing meaning (logical error).

// @flow

import React, { Component } from 'react';
import './App.css';
import MyButton from './components/MyButton';

type State = {
  count: number,
}

type Props = {}

class App extends Component<Props, State> {
  constructor() {
    super();
    this.state = {
      count: 1,
    };
    this.countFunc = this.countFunc.bind(this);
  }

  countFunc: (count: number)=>void

  countFunc(count: number) {
    this.setState({
      count,
    });
  }

  render() {
    const { count } = this.state;
    return (
      <div>
        <h1>{count + 1}</h1>
        <MyButton name="Click Me" countFunc={this.countFunc} />
      </div>
    );
  }
}

export default App;

And ...

// @flow
import React from 'react';

type Props = {
    name: string,
    countFunc: (count: number) => void
};

const MyButton = ({ name, countFunc }: Props) => (
  <button type="button" onClick={() => countFunc(2)}>{name}</button>
);

export default MyButton;

This is way more readable and we are sure to get a warning if the type changes.

Now for the tests

// Very simple test to check if App Renders
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';

describe('<MyButton />', () => {
  it('renders without crashing', () => {
    const wrapper = shallow(<App />);
    expect(wrapper.length).toEqual(1);
  });
});

And ...

import React from 'react';
import { shallow } from 'enzyme';
import MyButton from './MyButton';

describe('<MyButton />', () => {
  it('Should render without crashing', () => {
    const wrapper = shallow(<MyButton />);
    expect(wrapper.length).toEqual(1);
  });
  it('Should render without crashing', () => {
    const mockCountFunc = jest.fn();
    const wrapper = shallow(<MyButton countFunc={mockCountFunc} />);
    const btn = wrapper.find('button');
    btn.simulate('click');
    expect(mockCountFunc).toHaveBeenCalled();
  });
});

The above test for MyButton just tests if MyButton renders successfully and also tests if when the button is clicked it will call the countFunc prop being passed to it.

You can find the complete code here Code Sample

Conclusion

If like me you make use of Vscode, there is an extra step to take to ensure everything works smoothly. You need to make eslint allow you define flow types. If you have setup this project on your own, you might have come across an error stating only .ts files can define types (or something like that). To make this error disappear, open your settings (on Mac that will be clicking the code menu and going to preferences settings and switching to workspace settings). Open the workspace settings and add this setting

"javascript.validate.enable":false

And you are set.

Lastly, the whole process might be a lot to take in and can be overwhelming, but you will get used to it. As a general rule of thumb, I follow this pattern. I write my tests fail and let them fail, I write my Flow types next and then I write my component. Then I adjust the component to fit the previous two.

Happy coding and leave your comments. :-)

How to setup CouchDb on Azure: A step by step guide

Doyin Olarewaju 🇳🇬🇨🇦 — Tue, 25 Sep 2018 10:38:18 +0000

Over the past month I have been involved in a project that requires offline first capabilities. I worked on automatic synchronization in the past and it was a real pain to do because everything was so manual and annoying. I basically had to write the code that made all the moving parts work, from persisting the data locally, listening for network presence and then moving the data.

Enter PouchDb and CouchDb

Since then I learnt about the pouch and couch db combo and life has become much easier. Pouchdb helps with the offline storage part and has a seamless, fast and reliable relationship with couchdb. All you need do is connect both databases using your preferred replication, then save to pouchdb the rest happens automagically.

So lets get started..

What do you need

You need the following:
* Active Microsoft azure subscription
* Some knowledge of SSH
* Some knowledge of how couchdb works

Installing Couchdb

As you might already know Microsoft azure is a platform as a service (PaaS). It can provide you a dedicated environment consisting of basically almost anything you need to host, hmmm, basically anything you want (Is it just me or does that statement sound strange, anyways moving on). One of those environments is a Virtual Machine (VM).

To use Couchdb you need a VM, but never fear, Bitnami as usual is a lifesaver.

Step 1 (Go to the marketplace)

Go to the new azure portal and login if not already logged in. On the dashboard find marketplace. If you can't find it on the dashboard, click all services by the side then look for marketplace and click on it.

Step 2 (Search for Couchdb)

Just type "Couchdb" or more directly "CouchDB Certified by Bitnami" you should be get the marketplace app as shown in the image and select it on the next screen you should see some explanation about what couchbase is, Scroll to the bottom and click the create button below.

Step 3 (Configure your VM instance)

The next screen displays some configuration options for your Virtual Machine. If you are familiar with Azure already most of the options should be pretty obvious. Options like resource group, region and availability set. They all have the information icon beside them which you can hover and get information about the field, but I will explain the fields that are mission critical (wink :-), wanted to say that for a while now).

Virtual machine name
This is a name to recognize your virtual machine by and also the hostname. Use a good and explanatory name here, not too long but explanatory.

Availability Options
This is important but not an absolute must have since your app won't fail if there is no server. But I decided to talk about it (Hmm... feeling like MGK, he sucks though :-( ), because its important for some apps. Take for example, if your business logic states that you must absolutely backup every X period. Then there would be an issue if your server is down wouldn't there.

Availability options just ensures that your server doesn't go down by providing a mirror or replicated server somewhere else that will kick in whenever your real server goes down for some reason.

Image
Leave this option alone as is except you changed your mind about deploying couchdb of course.

Size
Another option you should probably leave as is. The default option should be standard A1 v2. Which is a standard setup for most purposes. I'd advice you let it be and scale up as needed with time.

Administrator Account
This is absolutely crucial. The administrator is the username and password you will use in logging into your virtual machine. As for me, i used a username and password combination for now, basically because I won't be the only one accessing the vm and I didn't wish to ship SSH keys to everyone that required access. But i intend to change this eventually when we are more certain about who gets the keys to the kingdom.

Once all fields are filled you can go ahead and click review and create. Except you absolutely know what you are doing, do not mess with the other tabs. Once you click preview and create, it loads for a while as it creates the VM, just grab your favourite drink and watch an episode of Rick and Morty while it does its thing.

It should be done now, congratulations you have a new born VM with couchbase installed. The options might seem confusing at first but work with me.

Setting up Couchdb

Bitnami provides an official documentation here. Just an FYI.

Obtain server credentials (For those that signed up using password)

Method 1: Boot Diagnostics method

By default your username is admin, but you also need to obtain your password. To do that, visit the dashboard of the virtual machine you just created and search for Boot Diagnostics. Select the option and you are presented with another menu that contains Screenshot and Serial log.

The first menu Item, screenshot, gives you are screenshot of the current system display in cli while the second contains the log file for your system. Get ready, you are about to dig through some logs. I advice you download the logs to your computer and go through it locally. What you are looking for are the words "Setting bitnami application password to".

You can see this youtube video for more info
@Youtube for bitnami

NB: This method will only work the first time you create the VM. Otherwise the password would have been overwritten by new log.

Method 2: SSH

You can also obtain the credentials by connecting to your VM using SSH. To obtain your credentials for azure SSH you can follow the steps here
How to obtain SSH credentials.

Once you are logged into SSH, execute the following command cat ./bitnami_credentials. If no content is displayed in the file above run the following command sudo cat /opt/bitnami/var/data/bitnami_credentials/credentials.

If you made use of SSH keys you will have to login using different methods. Visit the link specified above for more information.

Connect to Fauxton

Fauxton is the web interface that makes working with couchdb very easy. If you don't know about it or haven't used it before, please do, it makes your life very easy. But to work with Fauxton, you need port 5984, but that port is blocked by default for security reasons.

I will describe two methods one that is secure but limits access to one computer at a time by using tunelling and the other gives public access but with password protection of course. If you wish to expose the port publicly make sure you know what you are doing and that you absolutely have to. By absolutely have to, I mean the only reason you should even be considering it is because you wish to provide access to other members of your team/company.

Method 1 (SSH Tunelling)

By default Couchdb listens to local interface only, so an SSH tunnel is needed to access it. An SSH tunnel needs a port for both ends, a source port and a destination port. For the purpose of making this connection you need to use 5984 for both ends of the tunnel.

To connect use the following on MAC

ssh -N -L 5984:127.0.0.1:5984 USERNAME@SERVER-IP

Where username is the VM username you set when creating the VM and server IP can be found on your dashboard. You will be prompted for your password, enter it and a connection should be established.

There is a caveat however, ensure your local couchdb instance is not currently running, else you will get an error about not being able to bind to the port or something of the sorts. It took me a while to figure this one out, because i kept trying to login with the credentials of my remote couchdb, you can guess that it didn't work. I eventually had to kill the process using port 5984 before it worked.

Another caveat is that once its connected you don't get a message about connecting successfully. So what you need to do is visit fauxton's url. It will be thesame url as your local couchdb instance since you tunnelled using your localhost. http://127.0.0.1:5984/_utils/. You should see the interface now. Login and enjoy.

Method 2 (Public access)

To unlock the port you need to allow the port 5984 through your firewall. To do this you need to add an inbound rule, luckily this is pretty easy to do. Just search for Networking from the sidemenu and click the inbound rules button when the blade comes up. By default the settings for new inbound rules will be set to advanced, change it to basic and you should see the screen below

Click the service dropdown and pick couchdb from the options. You can change the name if you wish to something more easy to remember. Then save, it takes a little time.

Once the inbound rule has been added, connect to your VM using SSH then run the following command vim /opt/bitnami/couchdb/etc/local.ini. The command will open the file in the path using vim, you need to enter INSERT mode before you can edit, so press "i" on your keyboard. Scroll down and look for

[chttpd]
port = 5984
bind_address = 0.0.0.0
...

[httpd]
bind_address = 0.0.0.0
...

In my own case i only found the first one. Change 0.0.0.0 to 127.0.0.1. Save the file by exiting INSERT mode, so press esc key. Then press :wq and press enter to save. Open the file again to confirm the rules have been saved. Then restart your couchdb instance sudo /opt/bitnami/ctlscript.sh restart couchdb. Your Fauxton instance is now ready.

To connect to it use [Your VM public Ip]:5984/_utils/. You should see your fauxton instance now.

I hope you are successful in making this work, if not leave me a message and we can debug together. Please watchout for the next article on how to connect the instance we just created to pouchdb and perform data sync.

Extending Javascript array with an event handler

Doyin Olarewaju 🇳🇬🇨🇦 — Fri, 27 Jul 2018 21:38:30 +0000

I recently had to write a classifier algorithm that classified an array of items based on certain attributes. It was a pretty complicated dataset with an even more complicated set of constraints, but for the sake of this article i will keep it a simple.

Say we have the following dataset

    [
        {id:1, age:32},
        {id:2, age:4},
        {id:3, age:20},
        {id:4, age:30}
    ]

Now, say we wish to find the oldest age and the sum of all ages. This can easily be done using a loop and some variables, but for the sake of this article I will use an event listener attached to the traditional javascript array to pull this off.

First Let's extend the array object

    const MyArray = function (){
        // this events object will be explained shortly
        this.events = {}
    }

So, simply I just created a function and called it my array then gave it an events object(or hashtable) that will hold all our events and callbacks in this form:

    {eventName:callback_function}

Let's continue with creating the extended array

    MyArray.prototype = []

    MyArray.prototype.on = function (event, callback){
        this.events[event] = callback
    }    

    MyArray.prototype.push = function(args){
        Array.prototype.push.call(this, args)
        const eventName = 'push'
        if(this.events[eventName]){
            this.events[eventName](args)
        }
    }

In the snippet above we let our function inherit the properties of the array object using prototype inheritance.

The second block implements our event listener function. We call the function on, so we can do things like on('filter') etc. All this function does is take in the event (or event name) and a callback to execute once that event occurs. The function stores the event name as the key and the callback as the value in our events hashtable.

Lastly we make our own push method to put new items into our object. The next line uses the push method of the parent Array object, but by using call, we call push in the context of the current object. This works because our object has inherited from Array. That's all.

Testing our new object

So let's test this and see how it will work using the stated example data above.

const Arr = new MyArray()
let sum = 0;
let oldest = 0;
Arr.on('push', function (e){
    sum += e.age
    oldest = (e.age > oldest ? e.age:oldest)
})

for (let data of dataSet){
    Arr.push(data)
}

console.log(sum, oldest)

And that's it.