DEV Community: Enoch Chejieh

How to build a Live Chat in your Web Application using Robin Part 2

Enoch Chejieh — Fri, 12 Aug 2022 10:13:18 +0000

In the last part, you looked at how you can set up Robin using its Javascript SDK while building a web applications customer service live chat feature. In this part, you will be looking at how you can set up Robin's Vue SDK to quickly set up a customer support client for CryptoDegen to respond to their user messages.

Prerequisites

To follow along with this tutorial, you should have the following:

Knowledge of Vue.JS
Robin API key
A backend server to retrieve data from a database (You can use any of your choice)

If you haven't gotten your Robin API key already, you can get your Robin API key from your Robin Account.

Registering Robin Vue SDK

Before proceeding, you first need to install the Robin Vue SDK. Copy and paste the following code into your terminal.

npm install robin-vue --save

Next, in your main entry file, you will need to register the Robin Vue SDK in your Vue instance. In this tutorial, it's src/main.ts. Copy and paste the following code:

// main.ts

import RobinChat from 'robin-vue'

Vue.use(RobinChat)

Next, import Robin's global styles. Add the following line of code to your src/main.ts file:

// main.ts

import 'robin-vue/dist/style.css'

RobinChat Component

Before setting up your RobinChat component, Create a view component called src/views/Login.vue. This is how the support team for CryptoDegen would gain access to the Robin platform to respond to user messages.

// login.vue

<template>
  <div class="signin-ctn section" id="app">
    <div class="inner">
      <div class="auth-box">
        <!-- image -->
        <span>Distributing finance for everyone</span>
        <form @submit.prevent>
          <div class="form-group" :class="{ error: !emailValidate }">
            <input
              v-model="email"
              type="email"
              placeholder="email@company.com"
            />
            <label>Your Email</label>
          </div>
          <div class="form-group">
            <div class="password-field">
              <input
                v-model="password"
                :type="obscure ? 'password' : 'text'"
                placeholder="********"
              />
              <i class="material-symbols-outlined" @click="obscure = !obscure">
                {{ obscure ? 'visibility_off' : 'visibility' }}
              </i>
            </div>
            <label>Password</label>
          </div>
          <button v-if="!isLoading" class="primary-btn" @click="signIn()">
            Login
          </button>
          <button v-else class="primary-btn" disabled>
            <div class="spinner2"></div>
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

export default Vue.extend({
  name: 'Login',
  data() {
    return {
      email: '' as string,
      password: '',
      obscure: true,
      isLoading: false,
    }
  },
  computed: {
    emailValidate() {
      // eslint-disable-next-line
      return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
        this.email
      )
    },
  },
  methods: {
  },
})
</script>

<style scoped>
h1 {
  font-weight: 500;
  font-size: clamp(0.3rem, 7vw, 2rem);
}
span {
  display: block;
  font-size: clamp(0.3rem, 7vw, 1rem);
  color: #8d9091;
  margin: 0.625rem 0 1.375rem;
}
label {
  font-size: clamp(0.3rem, 5vw, 1rem);
}
.section {
  display: flex;
  justify-content: center;
  width: 100%;
}
.section > .inner {
  width: 90%;
}
.signin-ctn.section {
  min-height: 100vh;
  align-items: center;
}
.signin-ctn > .inner {
  max-width: 600px;
}
.auth-box {
  text-align: center;
  padding: 10% 15%;
  height: auto;
  min-height: 650px;
  padding-bottom: 5%;
}
.auth-box img {
  border-radius: 11px;
  margin-bottom: 1rem;
}
.form-group {
  margin-top: 1.5rem;
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column-reverse;
}
.form-group label {
  font-size: 1rem;
  display: block;
  line-height: 32px;
  transition: 0.3s;
}
.form-group input {
  display: block;
  background: #f5f7fc;
  border-radius: 4px;
  transition: 0.3s;
  width: 100%;
  height: 55px;
  padding: 0 1.5rem;
  font-size: 1rem;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}
.form-group input::placeholder {
  color: #9999bc;
}
.form-group .password-field {
  padding-right: 1.5rem;
  display: flex;
  align-items: center;
  background: #f5f7fc;
  border-radius: 4px;
  width: 100%;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}
.form-group .password-field input {
  border: none;
  transition: 0s;
  -webkit-transition: 0s;
  -moz-transition: 0s;
  -ms-transition: 0s;
  -o-transition: 0s;
}
.form-group .icon {
  position: absolute;
  right: 16px;
  top: 50%;
}
.flex-ctn.link {
  width: max-content;
  margin-left: auto;
  margin-top: 0.5rem;
  font-size: 0.925rem;
}
.flex-ctn.link div {
  font-size: 1rem;
  color: #f66b03;
  cursor: pointer;
  font-weight: 400;
  line-height: 24px;
}
.header {
  margin: 10% auto 0 auto;
}
form {
  margin-top: 10%;
}
.primary-btn {
  margin-top: 2rem;
}
@media screen and (max-width: 1450px) {
  .section > .inner {
    width: 90%;
  }
}
@media screen and (max-height: 900px) {
  .auth-box {
    padding: 5% 15%;
    min-height: 560px;
  }
  .header {
    margin-top: 5%;
    font-size: 1.3rem;
  }
  .primary-btn {
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 600px) {
  .auth-box {
    padding: 5% 8%;
    height: auto;
    min-height: auto;
  }
  .primary-btn {
    min-width: auto;
    width: 100%;
    font-size: 0.9rem;
    height: 45px;
  }
  .flex-ctn.link {
    margin-top: 15%;
    font-size: 0.775rem;
  }
  .section > .inner {
    width: 95%;
  }
}
</style>

This tutorial mocks the user authentication process from the client side same as in the part 1 of this series.

Next, Create a function called signIn():


async signIn() {
  this.isLoading = true
  const promise: Promise<ObjectType> = new Promise((resolve, reject) => {
    setTimeout(() => {
      if (
        this.email == 'cryptodegensuppor@gmail.com' &&
        this.password == 'JetpaySupport'
      ) {
        resolve({ status: 'success', data: { 
           _id: '983388d4d769496eb4bc0e42a6c0593a',
          email: 'cryptodegensuppor@gmail.com',
          username: 'Support',
          user_token: 'SxPzdCcGZeyNUGPUZRNIiFXH'
        }})
      } else {
        reject({ status: 'error', error: 'Invalid email or password' })
      }
    }, 2000)
  })
  const response = await promise as ObjectType
  if (response.status === 'success') {
    this.$router.push('/chat')
    localStorage.setItem('data', JSON.stringify(response.data))
  } else {
    console.log(response)
  }
  this.isLoading = false
}

Now, to initialize the RobinChat component, create a view component src/views/Chat.vue and paste the following code snippet below:


<template>
  <div class="chat">
    <RobinChat
      logo="https://iili.io/wUVjdG.png"
      api-key="NT-XmIzEmWUlsrQYypZOFRlogDFvQUsaEuxMfZf"
      :users="users"
      :user-token="userToken"
      :keys="keys"
      :user-name="userName"
      channel="private_chat"
      :features="[]"
    >
    </RobinChat>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

type ObjectType = Record<string, any>

export default Vue.extend({
  name: 'Chat',
  data() {
    return {
      userName: '',
      userToken: '',
      users: [] as Array<ObjectType>,
      keys: {
        userToken: 'robin_user_token',
        profileImage: 'profile_photo',
        userName: 'username',
      },
    }
  },
  created() {
    if (localStorage.getItem('data')) {
      const data = JSON.parse(localStorage.getItem('data') || '{}')
      this.userToken = data.user_token
      this.userName = data.user_name
    }

    this.getUsers()
  },
  methods: {
    async getUsers() {
      const promise: Promise<Array<ObjectType>> = new Promise((resolve) => {
        setTimeout(() => {
          const users = [
            {
              _id: '983388d4d769496eb4bc0e42a6c0593a',
              email: 'cryptodegensupport@gmail.com',
              username: 'CryptoDegen Support',
              robin_user_token: 'SxPzdCcGZeyNUGPUZRNIiFXH',
              profile_photo: '',
            },
            {
              _id: 'b990738c18584abfbad077ad90712b56',
              email: 'enoch11@gmail.com',
              username: 'Enoch Chejieh',
              robin_user_token: 'SHkPHNIYqwQIvyaYFaovLlHa',
              profile_photo: '',
            },
          ]
          resolve(users)
        }, 1000)
      })
      const response = await promise
      this.users = [...response]
    },
  },
})
</script>

Robin Vue SDK provides extra options like features which allows you to specify which Robin feature you would like to use on the platform, such as create-chat, forward-messages, delete-messages, archive-chat, reply-messages, voice-recorder, message-reactions.view and message-reaction.delete.

Conclusion

So quick recap. In this part you’ve learned how to use the Robin Vue SDK in your Vue application.

In-app live chat communication just got a lot easier with no extra configurations needed using Robin’s official SDKs is as easy as plug-in-play.

You can get the source code in this repository and view the demo in action.

I hope you enjoyed this short series, I can’t wait to see what you build!

How to build a Live Chat in your Web Application using Robin Part 1

Enoch Chejieh — Fri, 12 Aug 2022 09:34:00 +0000

This article is part of a two-part series on “How to build a Live Chat in your Web Application using Robin”.

Now let’s get started.

Instant gratification and fast-paced decision-making have become the main driving factors that draw user's attention to any modern web application. Live chat is one of those features which offers this to users, A user just needs to type a question, and in a few minutes, they have gotten a response.

Over 70% of B2C and B2B companies use live chat services as part of their customer strategy, and research tells us it delivers the highest customer satisfaction levels.

In this two-part series, I will show you how you can integrate Robin into your web application using Robin's Javascript and Vue SDK. Robin is a chat messaging solution that allows users and developers to leverage its chat API and SDK for building in-app messaging without worrying about implementing complex features.

Prerequisites

To follow along with this tutorial, you should have the following:

Any frontend framework of your choice
Robin API key
A backend server to retrieve data from a database (You can use any of your choice)

For demonstration purposes, the demo application used in this article was built with Next.JS, but you can follow along using any frontend framework of your choice.

CryptoDegen is a decentralized analytical tool which allows users to keep track of their digital assets.

You can get your Robin API key from your Robin Account. This will give you the authorization to access Robin features.

Initializing Robin Javascript SDK

To initialize Robin Javascript SDK, you first need to install the SDK into your frontend application.

To install, simply copy and paste the following code into your terminal:

npm install robin.io-js --save

Before you initialize Robin, head over to your Robin account to get your API key, It's recommended you store it in a secure location like in your environment variables, for example.

Once you've stored your API key, you can proceed on to initializing Robin in your application.

Create a new page called src/pages/index.tsx:

// index.tsx

import { useState, useEffect } from 'react'
import Message from '../components/Message'
import { Robin } from 'robin.io-js'

const Home: NextPage = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(false)
    const [userData, setUserData] = useState({} as ObjectType)
    const apiKey = 'NT-XmIzEmWUlsrQYypZOFRlogDFvQUsaEuxMfZf'
    const channel = 'private_chat'
    const [robin, setRobin] = useState(null as Robin | null)

    const initiateRobin: () => void = () => {
    const robinInstance = new Robin(apiKey, true)
    setRobin(robinInstance)
    }

    return ( 
      <Message isLoggedIn={isLoggedIn} robin={robin} channel={channel} userData={userData} />
    )
}

export default Home

Place the initiateRobin function in a useEffect() hook to ensure Robin is initiated as soon as the Dom has loaded.

// index.tsx

useEffect(() => {
   initiateRobin()
 }, [])

Creating a Robin user token

This tutorial mocks the user login process from the frontend to simulate what it would be like to authenticate a real user or create a new one and then assign a Robin user token to that user from a backend server.

Create a method called createUserToken() this is where you would create the robin user token:

const createUserToken: (data: ObjectType) => Promise<string> = async (data: ObjectType) => {
    const response: ObjectType = await robin?.createUserToken({
      meta_data: {
        ...data
      },
    });

    return response.data.user_token
}

Next, create a method called mockUserLogin():

// index.tsx

const mockUserLogin: () => Promise<void> = async () => {
    const userPromise: Promise<ObjectType> = new Promise((resolve, _reject): ObjectType => {
      return setTimeout(async () => {
        const data: ObjectType = {
          first_name: 'Enoch',
          last_name: 'Chejieh',
          username: 'Enoch Chejieh',
          email: 'enoch11@gmail.com'
        } as ObjectType

        data.user_token = await createUserToken(data)

        resolve({ data })
      }, 100)
    })

    const response: ObjectType = await userPromise

    setUserData({ ...userData, ...response.data })

    setIsLoggedIn(true)
  }

Next, create a function called mockUserSignup():

// index.tsx

const mockUserSignup: () => Promise<void> = async () => {
  const userPromise: Promise<ObjectType> = new Promise((resolve, _reject): ObjectType => {
    return setTimeout(async () => {
      const data = {
        first_name: 'Enoch',
        last_name: 'Chejieh',
        username: 'Enoch Chejieh',
        email: 'enoch11@gmail.com'
      } as ObjectType

      data.user_token = await createUserToken(data)

      resolve({ data })
    }, 100)
  })

  const response : ObjectType = await userPromise

  setUserData({ ...userData, ...response.data })

  setIsLoggedIn(true)
}

Next, create a function called mockUserLogout():


// index.tsx

const mockUserLogout = () => {
  setIsLoggedIn(false)
}

You would need to create these functions to simulate the user authentication processes.

Handling events

Robin dispatches a variety of events you can listen to such as user.connect, user.disconnect, new.conversation, message.forward, message.reaction, message.remove.reaction, remove.group.participant, read.reciept, and group.icon.update.

Before you can listen to a dispatched event, we need to establish a connection to Robin's WebSocket.

Create a component called src/components/message.tsx, copy and paste the following code:

// message.tsx

import { useState, useEffect, useRef } from 'react'
import { Robin } from 'robin.io-js'

type ObjectType = Record<string, any>

interface PropTypes { isLoggedIn: boolean, robin: Robin | null, channel: string, userData: ObjectType }

const Message: React.FC<PropTypes> = ({ isLoggedIn, robin, channel, userData }) => {
    const message: any = useRef(null)
    const [isMessagerOpen, setIsMessagerOpen] = useState(false)
    const [connection, setConnection] = useState(null as any)

    const connect: () => void = () => {
      const connectionInstance = robin?.connect(userData?.user_token)

      setConnection(connectionInstance)

      const WebSocket: WebSocket | undefined = connection

       window.onbeforeunload = function () {
         WebSocket?.close()
       }
   }

   return (...)
}

export default Message

The connect() method is what you use to establish a connection to Robin's WebSocket.
Once we have established your WebSocket connection.

Next, you need to handle events. Copy and paste the following code in your src/components/message.tsx Component:

// message.tsx

useEffect(() => {
     if (isLoggedIn) {

       if (connection) {
         connection.onopen = () => {
           robin?.subscribe(channel, connection as WebSocket)
         }

          connection.onmessage = (event: any) => {
          const message = JSON.parse(event.data)

          if (!message.is_event) {
             if (message.conversation_id === conversation._id) {
               setConversationMessages((messages) => [...messages, message])
              }
           } else {
             handleRobinEvents(message)
           }
           }

         connection.onclosed = () => {
           connect()
         }
       } else {
         connect()
       }
    }

}, [isLoggedIn, connection, conversation])

const handleRobinEvents: (message: ObjectType) => void = (message: ObjectType) => {
    switch (message.name) {
      case 'user.connect':
        // Event dispatched when WebSocket connection is established.
        break
      case 'user.disconnect':
        // Event dispatched when the WebSocket connection has been disconnected.
        break
      case 'new.conversation':
        // Event dispatched when a new conversation is created.
        break
      case 'message.forward':
        // Event dispatched when a message is forwarded.
        break
      case 'message.reaction':
        // Event dispatch when message reaction has been added.
        break
      case 'message.remove.reaction':
        // Event dispatched when a message reaction has been removed.
        break
      case 'remove.group.participant':
        // Event dispatched when a group participant has been removed.
        break
      case 'read.reciept':
        // Event dispatched when a message has been read.
        break
      case 'group.icon.update':
        // Event dispatched when a group icon has been updated.
        break
      default:
        break
    }
  }

The Robin method subscribe() is used for subscribing your Robin connection to a channel name. You need to do this to send messages.

Creating a conversation

Once you have established a connection with Robin's WebSocket, you can now proceed to create a conversation.

Create a function called createConversation() in your src/components/message.tsx component:

// message.tsx

const createConversation: () => Promise<void> = async () => {
    setIsMessagesLoading(true)

    const response = await robin?.createConversation({
      sender_name: userData.username,
      sender_token: userData.user_token,
      receiver_token: receiverToken,
      receiver_name: receiverName
    })

    if (response && !response.error) {
      setConversation({ ...conversation, ...response.data })
    }
}

The Robin method createConversation() takes in an object as a parameter which must contain a sender_name, sender_token, receiver_token, and receiver_name key and value.

Getting conversation messages

To handle retrieving messages from a conversation, create a function called getMessages() in your src/components/message.tsx Component:

// message.tsx

const getMessages: () => Promise<void> = async () => {
    setIsMessagesLoading(true)
    const response = await robin?.getConversationMessages(conversation._id, userData.user_token)
    if (response && !response.error) {
      setIsMessagesLoading(false)
      if (response.data) setConversationMessages((messages) => [...messages, ...response.data])
    }
}

This function is called as soon as the src/components/message.tsx Component is mounted on the Dom and retrieves the messages from the given conversation_id provided.

The Robin method getConversationMessages() takes in two parameters the conversation_id and user_token.

Sending a message to a conversation

Next, handling sending messages, you need to create a function called sendMessage in your src/components/message.tsx Component:

// message.tsx


const sendMessage: () => Promise<void> = async () => {
    const messageObject: ObjectType = {
      msg: message.current.value,
      sender_token: userData.user_token,
      receiver_token: receiverToken,
      timestamp: new Date()
    }

    await robin?.sendMessageToConversation(
      {
        ...messageObject
      },
      connection,
      channel,
      conversation._id,
      userData.user_token,
      userData.username
    )

    message.current.value = ''
}

The Robin method sendMessageToConversation takes in couple of parameters, which includes message_object, connection, channel, connection_id, user_token, and username.

Sending a message with an attachment to a conversation

Next, handling sending message attachments, you would need to create a function called sendMessageAttachment() in your src/components/message.tsx Component:

// message.tsx

const sendMessageAttachment: (file: File) => void = async (file: File) => {
    await robin?.sendMessageAttachment(userData.user_token, conversation._id, file, userData.username, '')

    message.current.value = ''
}

The Robin method sendMessageAttachment takes in a few parameters, which include user_token, conversation_id, username, and message.

Conclusion

In this part, you’ve learned how to initialize Robin, create conversations, user tokens, get messages, send messages and more.

Robin was instrumental in creating this Live Chat feature on the CryptoDegen application used in this article, as it is integrated easily and helps with customer support.

Robin also provides other APIs which the Javascript SDK utilizes. To view more, check them here.

Robin has a variety of SDK for different frameworks and languages such as Javascript, Vue, Flutter, Go and Python to support the developer’s various needs.

You can get the source code in this repository and view the demo in action.

In the next part, we’ll look at how we can utilize Robin’s Vue SDK to interact with the user messages from the customer's support end.

How to build a blockchain from scratch in Rust

Enoch Chejieh — Mon, 03 Jan 2022 08:59:25 +0000

2021 was a huge year for cryptocurrencies, NFT's, and decentralized applications (DAPPs), and 2022 will be even bigger. Blockchain is the underlying technology behind all these technologies.

Blockchain technology has the potential to change nearly every aspect of our lives from the Finance industry, Travel & mobility, Infrastructures, Healthcare, Public sector, Retail, Agriculture & mining, Education, Communication, Entertainment, and more.

Every smart person that I admire in the world, and those I semi-fear, is focused on this concept of crypto for a reason. They understand that this is the driving force of the fourth industrial revolution: steam engine, electricity, then the microchip — blockchain and crypto is the fourth.
— Brock Pierce

What is a blockchain?

A blockchain is a decentralized ledger of transactions across a peer-to-peer network, you can also think of a blockchain like a decentralized database that is immutable. A blockchain can be broken down fundamentally into several components e.g Node, Transaction, Block, Chain and The consensus protocol (proof of work, proof of stake, proof of history).

If you are anything like me, you learn by building. Now the reason I’m writing this article is to give you a basic overview of how blockchains work by building a blockchain with Rust.

Sounds good? Let’s get to it.

Getting Started

Let us start by creating a new Rust project:

cargo +nightly new blockchain

Change to the directory you just created:

cd blockchain

Let’s add the necessary packages we need to build a blockchain:

[dependencies]
chrono = "0.4"
serde = { version = "1.0.106", features = ["derive"] }
serde_json = "1.0"
sha2 = "0.10.0"

Next, create folder called models, that’s where you will keep most of your blockchain logic. In that folder create two (2) files called blockchain.rs and block.rs.

Import the following packages in both of the files and save them:

blockchain.rs

use chrono::prelude::*;
// Internal module
use super::block::Block;

block.rs

use super::blockchain::Blockchain;
use chrono::prelude::*;
use sha2::{Sha256, Digest};
use serde::{Deserialize, Serialize};

If you noticed we imported use super::block::Block; in our blockchain.rs file, we are just importing the struct located in our block.rs file here, don’t worry I will explain that a bit later.

After we have imported the necessary packages let’s create a type in our blockchain.rs file called Blocks:

type Blocks = Vec<Block>;

Next, let’s create a Blockchain type in blockchain.rs and an empty implementation for our Blockchain type:

// `Blockchain` A struct that represents the blockchain.
#[derive(Debug)]
pub struct Blockchain {
  // The first block to be added to the chain.
  pub genesis_block: Block,
  // The storage for blocks.
  pub chain: Blocks,
  // Minimum amount of work required to validate a block.
  pub difficulty: usize
}
impl Blockchain {}

Next, let’s create a Block type in block.rs and an empty implementation for our Block type:

// `Block`, A struct that represents a block in a Blockchain.
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct Block {
   // The index in which the current block is stored.
   pub index: u64,
   // The time the current block is created.
   pub timestamp: u64,

   // The block's proof of work.
   pub proof_of_work: u64,
   // The previous block hash.
   pub previous_hash: String,
   // The current block hash.
   pub hash: String
}
impl Block {}

Creating the genesis block:

The genesis block is the first block created in a blockchain. Let’s create a function that creates a genesis block for our blockchain and returns a new instance of the Blockchain type.

Add the following code in our Blockchain implementation in blockchain.rs:

impl Blockchain {
   pub fn new(difficulty: usize) -> Self {
     // First block in the chain.
     let mut genesis_block = Block {
        index: 0,
        timestamp: Utc::now().timestamp_millis() as u64,
        proof_of_work: u64::default(),
        previous_hash: String::default(),
        hash: String::default()
     };
     // Create chain starting from the genesis chain.
     let mut chain = Vec::new();
     chain.push(genesis_block.clone());
     // Create a blockchain Instance.
     let blockchain = Blockchain {
        genesis_block,
        chain,
        difficulty
     };
     blockchain
   }
}

In the code above, we did the following:

Created our genesis_block instance.
Added the genesis_block we created to the chain in our Blockchain type.
Returned an instance of the Blockchain type.

In the genesis_block instance we created, notice how we set our previous_hash key to an empty string value (String::default()) that’s because there would be no previous block since the genesis block is the first block in the blockchain.

Also notice we made the hash of our genesis_block to be an empty string (“”) that’s because we haven’t calculated the hash value for our genesis block yet.

Generating the hash of a block

A hash is generated with the help of cryptography and current information present in the block.

Let’s create a function in our block implementation in the block.rs file we created called calculate_hash() :

// Calculate block hash.
pub fn calculate_hash(&self) -> String {
  let mut block_data = self.clone();
  block_data.hash = String::default();
  let serialized_block_data = serde_json::to_string(&block_data).unwrap();
  // Calculate and return SHA-256 hash value.
  let mut hasher = Sha256::new();
  hasher.update(serialized_block_data);
  let result = hasher.finalize();
  format!("{:x}", result)
}

In the code above, we did the following:

Converted the block’s data to JSON format.
Hashed the block’s data with the SHA256 algorithm.
Returned the hashing result in base16.

Creating a new block

Great!, we have implemented functionalities for creating our genesis block and calculating the block hashes of our blocks.

Now let’s add the functionality for adding new blocks to the blockchain, in our blockchain.rs file add this function to the Blockchain type implementation:

pub fn add_block(&mut self, nonce: String) {
  let new_block = Block::new(
    self.chain.len() as u64,
    nonce,
    self.chain[&self.chain.len() - 1].previous_hash.clone()
  );
  new_block.mine(self.clone());
  self.chain.push(new_block.clone());
  println!("New block added to chain -> {:?}", new_block);
}

Here we did the following:

Created an add_block function that takes in an argument called &mut self (instance of the Blockchain type).
Created our instance of the Block type.
Mined a block hash using the Block type’s mine function.
Added the new block to the chain of blocks.

Next, in our block.rs file add the following code in the Block type implementation:

// Create a new block. The hash will be calculated and set automatically.
pub fn new (
 index: u64,
 previous_hash: String,
) -> Self {
   // Current block to be created.
   let mut block = Block {
      index: 0,
      timestamp: Utc::now().timestamp_millis() as u64,
      proof_of_work: u64::default(),
      previous_hash: String::default(),
      hash: String::default(),
   };
   block
}

Here we did the following:

Created a function called new() that takes in three arguments index and previous_hash.
Created our instance of the Block type.
Generated a block hash for our block.
Returned an instance of the Block type.

Mining new block

We have successfully implemented functionality for creating a new block.

Let's implement functionality for mining new blocks. The process of mining new blocks involves generating a SHA256 hash that starts with a desired number of 0s which would be the mining difficulty miners have to solve to mine a new block.

Let's create a function in our block.rs file inside our Block type implementation:

// Mine block hash.
pub fn mine (&mut self, blockchain: Blockchain) {
  loop {
    if !self.hash.starts_with(&"0".repeat(blockchain.difficulty)) {
      self.proof_of_work += 1;
      self.hash = self.generate_block_hash();
    } else {
       break
    }
  }
}

Great job, we are done with implementing our blockchain, now let’s test it out.

Let’s create a file called mod.rs in our models folder and save the following code:

pub mod block;
pub mod blockchain;

All we are doing here is making the files we created earlier blockchain.rs and block.rs publicly accessible in our main.rs file.

Now let’s paste the following code in our main.rs file:

mod models;
fn main() {
   let difficulty = 1;
   let mut blockchain = models::blockchain::Blockchain::new(difficulty);
   models::blockchain::Blockchain::add_block(&mut blockchain);
}

Now to initiate a transaction run cargo +nightly run in your terminal.

Conclusion

In this tutorial you’ve learned how to create a simple blockchain from scratch with Rust.

I hope you’ve enjoyed reading this article, you can get the full source code of this Rust blockchain here

If you have any comments, please feel free to drop them below.

What exactly is IPFS?

Enoch Chejieh — Fri, 12 Nov 2021 17:37:02 +0000

InterPlanetary File System (IPFS) is a term used to describe a peer-to-peer (p2p) distributed file-sharing system for storing and accessing data.

IPFS is one of a few projects that are part of the Protocol Labs Organization, which was also founded by Benet. Inter-Planetary Linked Data (IPLD) and Filecoin are two Protocol Labs projects that are closely related to IPFS. The IPLD data model is a data model for distributed data structures such as blockchains. This model makes it simple to store and access blockchain data via IPFS. Users who store data on IPFS will be rewarded with Filecoin.

How does IPFS work?

Let's imagine you just uploaded some content to IPFS. That content will then be split up into small pieces of data, the data is then given a certain unique fingerprint called a cryptographic hash.

When multiple people upload the same content to IPFS, it will only be created once and that makes the network very efficient.

Also when you need to look up content to view or download on IPFS you don't need to remember the hash assigned to that content, every content on IPFS can be found using Inter-Planetary Naming System (IPNS), a human-readable decentralized naming system for IPFS.

Why use IPFS?

The internet as it is today is built on technologies like Hypertext Transfer Protocol (HTTP), Domain Name System (DNS), and the way it works is by looking up IP addresses and forwarding the content from the IP address, This is called location-based addressing.

When a user searches for a website, let's say amazon.com for instance the user is trusting that whatever is located at that server to be the content that they want and that could be a problem because theirs nothing stopping the content from changing without the user doing anything about it.

Another problem is that when there's only one source of content it creates constriction and centralization. On the contrary, IPFS uses content-based addressing. So when a user is requesting a piece of data it retrieves the content and not the location of that content which is more efficient. This really makes the web a lot more robust and protected.

Conclusion

Software developers are currently moving to decentralized data networks as a way to build new models around data ownership and to develop a better internet.

This article is just an introduction to IPFS, there's still a lot to know about this wonderful technology. If you want to know more you can check out their website.

Error Handling in Rust

Enoch Chejieh — Sun, 24 Oct 2021 08:08:18 +0000

Introduction

In this article, we're going to take a look at Error handling in Rust and how it improves the performance of Rust web applications.

Error handling is an important part of software development because it improves the way we think about software as we build and it allows us to intercept errors/failures.

When we build software, we tend to run into bugs or errors in our code and when we do, we are greeted with great error messages which help us identify problems efficiently. This, in turn, boosts our productivity and can lead to a better developer experience.

Major Difference between Error Handling in Rust and Other Programming Languages

Compared to other programming languages that handle errors by throwing exceptions, Rust handles errors by returning actual errors. While throwing exceptions is very useful for the identification of error types and error reporting, it's not very explicit, which means it would be easy to miss areas of code that should have exception handling. Rust, on the other hand, returns errors explicitly.

How Rust Handles Errors

Result Type

The result type Result<T, E> is an enum that has two possible states:

enum Result<T, E> {
    Ok(T),
    Err(E)
}

T can be any type and E can be any error. The two states Ok(T) represent success and holds a value, and Err(E) represent error and holds a specific error value.

We use the result type when operations might go wrong. An operation is expected to succeed, but there might be cases where it fails.

For example:

use std::num::ParseIntError;

fn convert_string_to_integer(number_str: &str) -> Result<(), ParseIntError> {
    let number:i32 = match number_str.parse() {
        Ok(number) => number,
        Err(e) => return Err(e)
    };

    println!("{}", number); // 200

    Ok(())
}

Here's what happens:

When convert_string_to_integer is called, this function converts a string to an integer value based on the string parameter passed in the function.
With the match number_str.parse() we are required to handle the two possible states. When we pass a string containing only numbers, the operation succeeds then we assign the converted value to the number variable, or we return from the function by returning the error when the operation fails.

Panic

In Rust, When you encounter an unrecoverable error they can be handled by panic!. panic! allows you to stop your program in execution when you encounter this kind of error and also provides useful feedback.

Here's an example:

use std::num::ParseIntError;

fn convert_string_to_integer(number_str: &str) -> Result<(), ParseIntEror> {
    let number:i32 = match number_str.parse() {
        Ok(number) => number,
        Err(_) => panic!("Invalid digit found in string")
    };

    println!("{}", number); // 200

    Ok(())
}

When we encounter an error in this function panic!('Invalid digit found in string') will be invoked.

Unwrap

There might be some situations that you are very confident about the code you have written and you feel positive that your code won't encounter errors and you want to opt-out of error handling.

In that case you can simply use the unwrap() method, for example:

fn convert_string_to_integer() -> i32 {
    let number_str:&str = "200";
    let number:i32 = number_str.parse().unwrap();

    return number; 
}

let result = convert_string_to_integer();
println!("{}", result); // 200

Expect

The expect() method is similar to the unwrap() but unlike unwrap(), The expect() method allows you to set an error message. This makes debugging a lot easier.

fn convert_string_to_integer(number_str: &str) {
    let number_str:&str = "o100" 
    let number:i32 = number_str.parse();

    number.expect("Invalid digit in string");
}

The output

thread 'main' panicked at 'Invalid digit in string: ParseIntError { kind: InvalidDigit }', src/main.rs:11:20
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

The Question Mark Operator (?)

The (?) operator makes the propagation of errors much easier and it's equivalent to the match expression. It eliminates a lot of verbosities when implementing functions and it can only be applied for Result<T, E> and Option<T> types, unlike the match expression, it unpacks the Result if Ok and returns the error if it's not.

For example:

use std::num::ParseIntError;

fn convert_string_to_integer(number_str: &str) -> Result<i32, ParseIntError>  {
    let number:i32 = number_str.parse()?;

    Ok(number)
}

let result = convert_string_to_integer("200");
println!("{:?}", result); // Ok(200)

Notice how our code looks much more simpler and easier to read.

Conclusion

Error handling is about good communication. Rust has made a strong emphasis on making error handling a good experience for developers.

There is of course more methods used in Rust for error handling, but the ones covered in this article should get you started, this is also my first technical rust article and I look forward to writing more, please if you have any questions or comments please feel free to ask them in the comment section.