Forem: Skcript

Building Gmail Addons

Varun Raj — Mon, 30 Nov 2020 12:17:59 +0000

Addons and integrations are the most impactful features when it comes to building SaaS products. The reason being the more your tool integrates with others, the more reach and user base it gets. Basically when you integrate with popular tools or products like Gmail which is already used by millions of people, your product just gets super charged.

Today, you’ll learn how to build one such cool add-on for your app, and yes, it's gonna run on Gmail.

Step 1: The Setup

One new thing about this, is that you don't need to worry about your local environment when developing, as everything happens inside your browser on a platform called Google App Scripts

Navigate to http://script.google.com/home and create a new project from the sidebar option.

A new editor window opens where you’re going to spend most of your time building the addon.

Click on the “Untitled project” to edit the project name to your app name, in my case I'm going to create an addon to show the latest news.

Once you name the project, you need to create a manifest file. It's more like the manifest file we create for our Chrome Apps or an Outlook Plugin. It contains meta information, scope to access, and other such information about the app.

Click on “View → Show manifest file” from the menu bar and it opens a new file named “appsscript.json”

The contents of the manifest file is in JSON format and will hold the below information by default,

{
  "timeZone": "Asia/Kolkata",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

Step 2: Configuration

Now that we’ve our base of the addon, let's configure it to work in Gmail.

Under the dependencies section of the manifest add the gmail service with the following config,

"dependencies":{
    "enabledAdvancedServices":[
      {
        "userSymbol":"Gmail",
        "serviceId":"gmail",
        "version":"v1"
      }
    ]
  },

After defining that we’re going to use the Gmail service, we need to define the behaviour, appearance of the addon inside Gmail.

Create a new block with the key “gmail” in the manifest root where you enter all the config of Gmail.

"gmail":{
    "name":"Today's News",
    "logoUrl":"https://www.gstatic.com/images/icons/material/system/1x/receipt_black_24dp.png",
    "contextualTriggers":[
      {
"unconditional":{

        },

        "onTriggerFunction":"startApp"
      }
    ],
    "primaryColor":"#F47041",
    "secondaryColor":"#2E8B57",
    "version":"TRUSTED_TESTER_V2"
  }

In the config above, the main part to notice is the contextualTriggers section. It’s an array of functions.

Currently we’re going to use a simple trigger onTriggerFunction, which as the name explains will get triggered when the app is opened in the addons section of Gmail. This will call a function defined in any of our .gs files.

There’s also other cosmetic configurations like name, icon and colors.

Step 3: Creating the UI

The UI is also created by the script in Gmail addon. Open the code.gs and create a new function called startApp. This function will be triggered when we open the app from the addons section.

Note: In app script the function names are unique no matter which file you write it.

Lets create a simple card in the UI

function startApp() {
  var card = CardService.newCardBuilder();
  card.setName("NewsListCard").setHeader(CardService.newCardHeader().setTitle("News"));

  var sectionNews = CardService.newCardSection();

  sectionNews.addWidget(CardService.newTextParagraph().setText("News of the day"));

  return card.addSection(sectionNews).build();
}

Save the file and lets try to run and see the result

To test the addon, click on “Publish → Deploy from manifest” in the menu bar,

This brings up another window that lists all the versions of your addon. Click on the Install add-on button in the “Latest Version (Head) Version 0” since this is the development version.

Once installed, you can open your Gmail account (the one where the app script project was created) to see the addon in the sidebar.

In the first run, you need to authorize access to the app to use it. After authorization you can see the cards that we created in the script.

Step 4: Loading Data From API

We’ve set up the basic card section to show the basic static information of the app. Now let's try to pull in some data from remote API to show in the addons section. Currently I'm going to use a public API for the demo purpose, but you can also use your own APIs to pull your app’s data.

For this demo I'm going to use https://newsapi.org/ API since it has a free plan and public.

We’ll be using the UrlFetchApp class to make external API calls. For writing clean code, I’ve created a new file called “APIs.gs” from the file menu

Write the below function to make an API call to the new API with your token in the payload to get the news articles.

function getNews() {
  var response = UrlFetchApp.fetch("http://newsapi.org/v2/top-headlines?country=us", {
    method: "GET",
    muteHttpExceptions: true,
    headers: {
      "X-Api-Key": "YOUR NEWS API KEY HERE",
    },
  });

  Logger.log(response.getContentText());
  var responseText = response.getContentText();
  var responseJSON = JSON.parse(responseText);
  return responseJSON;
}

Now that our API call is ready, let's call it and render the data in the UI. Open your Code.gs file and add the following

function startApp() {
  // .....
  var newsResult = getNews();
  var news = newsResult.articles;

  for (var i = 0; i < news.length; i++) {
    var newsItem = news[i];
    var newsBlock = CardService.newDecoratedText().setText(newsItem.title);
    sectionNews.addWidget(newsBlock);
  }

  // …..
  // .....
  return card.addSection(sectionNews).build();
}

This will call the getNews function and render each item into the sectionNews Card section.

Save the file and refresh the addon from your Gmail addon panel.

After refreshing you’ll get the list of news title in the addon screen

And we’ve created a simple addon which can list your daily news inside Gmail! This can be your app’s addon too. The best part is that most of your business users can adopt it so quickly which helps your app grow faster.

In the next article, I’ll write about how to use user credentials to get the current user info and also session storage. Until then, keep exploring! :D

Red, Green, Refactor.

Sathish — Wed, 25 Nov 2020 12:14:25 +0000

Red, Green, Refactor is a TDD approach or framework that the developers use to build the test suite first, write the implementation code, and refactor the code once the test suite passes.

According to Computer Scientist Robert C Martin who advocates TDD, we can write effective code only when there is a test case to pass and the only time we have the time to write tests is before writing the implementation code. The feasible way to do so is to use the Red, Green, Refactor approach.

What are they?

We can compartmentalize writing code into 3 segments as the title suggests.

Red - Write a test suite without the implementation code, making it fail.

Green - Now, we can write the implementation code, just so the test suite passes. Nothing more, nothing less.

Refactor - After the test suite passes, we can look for ways to optimize.

...rinse & repeat. This happens until we have a fully functional implementation code.

Robert C. Martin (“Uncle Bob”) provides a concise set of rules for practicing TDD.

Write production code only to pass a failing unit test.
Write no more of a unit test than sufficient to fail (compilation failures are failures).
Write no more production code than necessary to pass the one failing unit test.

How is it done?

We can see how it’s done by looking at an implementation of the Fibonacci problem with recursion. We’ll use the Jest playground.

Iteration 1

We have two JavaScript files, one is fib.js to contain the implementation code, fib.test.js to contain the test suites. As an overkill, you can start without the function defined in fib.js. Let me keep the post as short as possible.

Red

Since we are solving the problem with recursion, we need to first define our base case first. Which is, if n is lesser than 2, we need to return n.

Let’s first write the test suite for the base case, which will be the following,

const fib = require("./fib");

describe("base case , n < 2", () => {
  test("n = 1 will return 1", () => {
    expect(fib(1)).toBe(1);
  });
});

We expect this to fail since we don’t have any implementation code.

Green

We now need to write the implementation code for the base case. Remember, only the code that’s needed to make our test suite pass.

function fib(n) {
  if (n < 2) {
    return n;
  }
}
module.exports = fib;

Now, this code satisfies our test suite. What’s next? Let’s look at refactoring the above code.

Refactor

From the above implementation code, we don’t have anything much to refactor so let’s move to Iteration 2.

Iteration 2

Red

Now we have our base case, let’s look at the next step which is to write the recursive code. Let’s extend our test suite to test the recursive case.

describe("recursive case , n >= 2", () => {
  test("n = 8 will return 21", () => {
    expect(fib(8)).toBe(21);
  });
  test("n = 15 will return 610", () => {
    expect(fib(15)).toBe(610);
  });
});

Now, that we extended our test suite, let’s see the failing test case result which is as follows,

As you have guessed, this is because, in our implementation code, we check if n is lesser than 2 and return n. It doesn’t currently handle the case where n is greater than or equal to 2.

Green

We’ll now write the implementation code so that our test suite passes.

function fib(n) {
  if (n < 2) {
    return n;
  } else {
    return fib(n - 1) + fib(n - 2);
  }
}
module.exports = fib;

With recursion, we have written the implementation code to handle the case where n >= 2. We’ll now have Green, where our test suite passes.

Refactor

What could we possibly do here to refactor the above code? Not much, but as a cosmetic update, we can remove the unwanted braces and the else part since we are returning in the if part. After refactoring, our code will look like the following,

function fib(n) {
  if (n < 2) return n;

  return fib(n - 1) + fib(n - 2);
}
module.exports = fib;

Iteration 3

Well, there’s no Iteration 3 since we have a fully functional module. So, it ends here.

Conclusion

This approach might look time-consuming at first, but once we get a hold of it, it can be employed to write effective testable code that will make everyone’s life easier, while building a more robust solution than you otherwise would have.

Ok, bye!

Building and Using Custom Entities in Dialogflow

Varun Raj — Mon, 28 Sep 2020 16:28:36 +0000

In this article, I'll cover how we can create custom entities that cover your business requirements.

Before proceeding, I strongly recommend you to read my previous article in case if you missed it: https://www.skcript.com/svr/building-a-serverless-telegram-chatbot-with-dialogflow-and-firebase-functions/

What are the entities? a quick recap.

Entities as something similar to your data types in a programming language that helps you define what sort of data is stored in a variable. Here, entities in chatbot language are nothing but the pattern or the meaning we classify certain parts or elements of the conversation.

For example, in the below message, the user is asking for weather information in the city of Dubai. So, when configuring the chatbot we classify "Dubai" as the city, and post the training the bot will understand any city.

What is the limitation with inbuilt entities?

In Dialogflow, the inbuilt entities are trained based on the generic scenarios like date, city, and other standard units. But in most cases, we've to create our entities to satisfy the business requirements.

For an instance consider the below statement in an HR chatbot.

Here, we can easily train the bot to extract the start date and end date since it's a very general information class. But the challenge comes when we try to extract the type of leave. The type of leave is information related to a specific requirement. Leave type could change between one organization to another.

These are the cases that can't be solved with built-in entities and we need to depend on custom entities.

How do we create custom entities?

Let's take our leave application use case for this article. To Dialogflow classify the leave type, we need to create a new entity called "Leave".

Navigate to the Entities section in the sidebar of the project console.

Here you get to see all the custom entities that you created in your project, let's create our first custom entity.

If you notice, the Dialogflow gives us the option to create the Entity and various items under that entity. This works more like your enum in programming as I mentioned earlier.

In our case, under the leave types, we've sick leave, annual leave, and vacation leave. So I create those under the entity items. Also providing more synonyms will help the bot to train for understanding better.

You can simply save after you created the required items for the entity. Post the training we can start using these new custom entities in the intent configuration page similar to system entities.

Now let's ask the bot question to see if it can classify all the leaves properly.

Similar to this you can create any number of custom entities based on your requirements and use them together as well in the intent. Here is a small example from another chatbot project where I've used more than one custom entity in a statement.

Here both the facility attribute as well as facility entities are custom built for this hotel chatbot where the user asks for details of a facility in the hotel.

Webpack with React Typescript

Sooraj (PS) — Sun, 23 Aug 2020 13:41:43 +0000

Ever wondered if there is a way to just tie up all your code into one single module for easy usage. If so, in this article I will show you how to bundle all your code into a single javascript module that you can easily use in any other project.

So you write a web app with multiple dependencies like jquery etc, images and multiple styles and then you look at the code and think, “If I am going to use this code in the client then I will need to import each and every module along with the application javascript files. Great!”. This is where webpack comes to the rescue.

What is Webpack?

Webpack is a static module bundler for JavaScript applications. As you can see from the name, Web + pack - means creating a single package for the web. So, it takes all your code, runs through your code, transpile into the correct format, and gives you full control to bundle all your files into a single or a few files to easily run on the browser. In this article, we will build and configure a React TS app using Webpack to load on the client.

Setting up the project:

We will be creating the project from scratch.

Step 1: Initialize package.json

The first step is to create a folder and initialize that with npm init for the package.json file. For this project, we will follow the default options. To create a default package.json file, run the following command from the folder on your terminal or vscode terminal.

npm init --y

The --y command will choose the default values for all the fields.

You can also run.

npm init

But, this will take you through all the fields manually and ask you for a value. You can skip each value by pressing enter.

Me when I say yes to each field.

I prefer the --y param because it lets you create the same file with one command rather than each field.

Step 2: Add the necessary packages to the package.json

We will be adding the following to the package.json file

Developer Dependencies

babel (core, env, react, ts and loader) as the transcompiler.
cross-env for setting environment variables across cross platforms.
html-webpack-plugin to create HTML files and serve your bundle.
serve to serve the single page created.
terser-webpack-plugin to minify your bundled javascript.
typescript
@types/necessary packages for the type-checked versions.
webpack (core, cli, dev-server) as a webpack package.

Dependencies

react
react-dom

package.json

"dependencies": {
  "react": "^16.12.0",
  "react-dom": "^16.12.0"
},
"devDependencies": {
  "@babel/core": "^7.7.7",
  "@babel/preset-env": "^7.7.7",
  "@babel/preset-react": "^7.7.4",
  "@babel/preset-typescript": "^7.7.7",
  "@types/node": "^12.12.5",
  "@types/react": "^16.9.11",
  "@types/react-dom": "^16.9.3",
  "babel-loader": "^8.0.6",
  "cross-env": "^6.0.3",
  "html-webpack-plugin": "^3.2.0",
  "serve": "^11.3.0",
  "terser-webpack-plugin": "^2.3.2",
  "typescript": "^3.7.4",
  "webpack": "^4.41.5",
  "webpack-cli": "^3.3.10",
  "webpack-dev-server": "^3.10.1"
}

Step 3: Add the necessary scripts

For our webpack to bundle everything we need to add the scripts to either create a dev server or a production build. Add the following under scripts in package.json.

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server",
  "build": "cross-env NODE_ENV=production webpack",
  "start": "serve dist"
},

cross-env will make sure that the environment variable setting is consistent across all the platforms. We will create 2 scripts, 1 for the development and 1 for production. We will use the webpack-dev-server for the development bundle and webpack for the production build. The bundle will be created in the dist folder and we can serve the dist folder in the development or production builds.

This is the setup for package.json. After doing this run npm install to install all the dependencies.

Step 4: Adding the babel configuration file

Now for the babel compiler to work in sync with webpack, we need to add the configuration for babel. Create a file called ‘.babelrc’ and add the following in the file.

{
  "presets": ["@babel/env", "@babel/react", "@babel/typescript"]
}

This will just tell babel to use the env, react and typescript presets.

Step 5: Add the tsconfig for the typescript configurations

We need to create a tsconfig.json file in our root directory for typescript configurations. If you have typescript installed, the easiest way to generate this file is to use

tsc --init

This will add a tsconfig.json to your root directory with all the possible configurations. For this project, we will create a tsconfig.json file manually and add simple configuration options like

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "jsx": "react",
    "moduleResolution": "node",
    "strict": true,
    "noEmit": true,
    "allowJs": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

You can take a look at all possible options in the typescript documentation for further details.

Step 6: Webpack Configuration

This is one of the most confusing configuration options that developers come across in projects. Let us first create a file called webpack.config.js in the root directory and add the following.

First, we need to import our plugins. The 2 main plugins we will be using here are the html-webpack plugin and the terser-webpack-plugin. We will also import the path package to read the files from their relative path. Import them as follows:

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");

Next, we will create the configuration object as follows:

const isProd = process.env.NODE_ENV === "production";

const config = {
  mode: isProd ? "production" : "development",
  entry: {
    index: "./src/index.tsx",
  },
  output: {
    path: resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      inject: "body",
    }),
  ],
};

if (isProd) {
  config.optimization = {
    minimizer: [new TerserWebpackPlugin()],
  };
} else {
  config.devServer = {
    port: 9000,
    open: true,
    hot: true,
    compress: true,
    stats: "errors-only",
    overlay: true,
  };
}

module.exports = config;

The most important options in webpack are entry, output, and module.

The entry specifies the entry point of the application.
output specifies where the bundle has to be built to.
modules specify the test cases to classify the files and use the corresponding loaders for those files. In this case, we have used the babel-loader on the files with .tsx extension.

We have also added some ‘dev’ vs ‘prod’ conditions to either run on the dev server if the environment specified is development or minify the bundle if it is production.

Step 7: Adding React

Finally, we need to add a react in the code. Just add an src folder in the root directory and create the following files.

index.html
index.tsx
App.tsx

Add the following code to the files.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack with React TS</title>
  </head>
  <body></body>
</html>

index.tsx

import React from "react";
import { render } from "react-dom";
import App from "./App";

render(<App />, document.body);

App.tsx

import React from "react";
const App: React.FC = (props) => {
  return <div>Webpack is cool!</div>;
};

export default App;

Step 8: Run the webpack servers

npm run dev: This will use the webpack dev-server to create a dev server and will watch for your code changes and be recompiled every time you make a change.

npm run build: This command will build your code and generate a single bundle file and insert it into the html file generated.

npm run start: This command will run the serve package which will use the dist folder to create a static page.

And that’s it. We have our application with a webpack configured and ready to go. The main reason for writing this article is to make the people understand how the webpack works or any other generic bundling tool works. A lot of people would say to just use a template and get it done within 5 - 10 minutes, but the whole point is to understand what you are doing with it. I have had a lot of issues with this because I used to use templates, but once I got to know how the actual flow works, it was really interesting.

Building a Serverless Telegram Chatbot with Dialogflow and Firebase Functions

Varun Raj — Mon, 17 Aug 2020 03:18:55 +0000

A couple of years back, I was struggling to manage my documents - tried all available cloud storages and even thumb drives. Nothing came handy and also searching documents in cloud storage was never easier for me. So, I decided to build a chatbot which can send me documents whenever I ask for it. That's when I built Nila, my first personal chatbot.

Often people ask me how I built Nila. They were surprised when I said it is not a rule-based chatbot and it can understand my language. So, later I added more features to it, but that's a different story.

Since it created a lot of interest among my friends and community, I thought of writing an article about how I built it. And, here it is.

The Tech Stack

I wanted it to be a very thin setup and without major maintenance. As soon as this requirement was decided, the first thing that popped into my mind was serverless architecture. The best thing about it is that I don't have to maintain a server - deploying code was a lot easier compared to server infrastructure. The next question that came to my mind was where to store all this information. This is where my 'Swiss army knife' of product development comes into play. In addition, I decided to use Firebase for everything other than the NLP part.

So, the final tech stack was drilled down to:

Firebase Cloud Functions - Backend Processing
Firebase Storage - File Storage
Firebase Firestore - For Database
Dialogflow - For NLP

The Infrastructure

The next step was to come up with an infrastructure to build an architecture design that becomes the core. Since the entire system is broken down into distributed modules, I came up with the below setup.

The Use Case

In this article, I'm going to set a simple use case of requesting weather information from the chatbot. And for this, we'll be using the OpenWeatherMap API. So in case, you're going to try the same, sign up for it and get yourself an API Key

Creating the Telegram Bot

Creating bots in telegram is pretty much fun but there is no fancy UI to do that. All you have to do is just ask another bot to create your bot.

There is a bot in telegram called Bot Father and you have to message the bot to create or manage your bots.

Send /start to bot father and it will show you the list of the available options.

Just click on the /newbot hyperlink and it will automatically send the slash command to create a new bot for you. Following that, you'll be asked for some basic information like Name for the bot, username (remember it should end with "bot").

On completing, you'll get a token displayed in the final message from bot father. This token is very important so copy it safely somewhere. In the following sections, we'll refer to this token as the telegram bot token or shortly bot token.

Setting Up Dialogflow

The user-facing piece is now ready. Let's now focus on the bridge part which is our Dialogflow. Setting up DialogFlow is as simple as setting up the telegram bot. All you've to do is to sign up for Dialogflow and create a new agent.

That's it! You're all set with the Dialogflow project. Now, let's go ahead and connect our telegram to the Dialogflow project.

Navigate to the integration option in the Dialogflow sidebar. This page will list all the possible platforms that Dialogflow can seamlessly integrate. You can navigate to Telegram and enable the platform. This will bring up an option to configure your bot with the help of the bot's token ID - the token that we got from telegram's bot father earlier.

Paste the token in the telegram token field of the modal and click on start to complete your operation. As you connect both of these services, you're ready to talk to your bot.

Click on the bot's link that's available in the last message from bot father to start the bot. Now, all you can send is just "Hi" and a few other basic greetings. This is because Dialogflow comes with basic greetings inbuilt and for anything more you need to configure it.

Setting up the Weather intents

Let's make the bot more meaningful by making it understand what we're trying to ask. To do that we need to create something called Intents in Dialogflow (This is quite a common term used in chatbot domain). Intents are nothing but conversations that happen between the bot and the user. In our case, we're going to ask the bot to give us the weather information, so let's create an Intent called "AskWeather".

The real magic happens when we configure the training phrase.

The training phrases are nothing but the statements that the user asks or tells the bot in the conversation. In our cases, the phrases could be any of the following for weather information

"What's the weather in Dubai?"
"What's the weather in Dubai tomorrow?"

Also, if you notice there is certain information hidden inside these statements, which is nothing but the city of which we're asking the weather for and the time or date. Dialogflow is smart enough to identify these in our conversation and extract them as variables. In case, if the bot is missing it we can also configure ourselves by just selecting and mapping it.

On scrolling down, you can see "Action and Parameters" which is where we define the properties required and action mapped to this specific intent.

Actions in Dialogflow intents are nothing more than a namespace that we give to the action performed in webhook, as a result of this intent to get data from your customer services.

In our case, the city and date are the possible params, but it could be more down the line which we can add on the fly. Also, I've made the city parameter as required field as we won't be able to get the weather information without a city or location. But, the date is optional since we can assume that the user is asking for today's weather, in case if it is not mentioned implicitly.

Now, that we've configured the intent, we can start testing it. Before that, save the intent and then the system will take some time to retrain the agent. So once it's trained, you can try asking the bot in the interface to the right side.

In the right section, after asking your question the DF system will parse the statement and show you the action and parameter for the corresponding user phrases.

Setting Up Cloud Functions

The dialogs are set now! Time for the geeky stuff. Not every dialog can be answered with some static reply or a bunch of static questions. This is where the webhook/fulfilments come into the place where we can configure intents to be handled by your server. In our case, as our title says we're going to use firebase cloud functions as our backend.

Let's get started by creating our new firebase project in our local system. In this article, I'm going to use an existing firebase project.

Setting up the local project

Create a new folder in a location in your machine and initialize a firebase project.

npm install -g firebase-tools
mkdir WeatherKiosk
cd WeatherKiosk
firebase init

The initializer will be a wizard which asks you the project and the modules we need for the project. I'll be selecting the project and the functions as the module.

On completion, you'll be finding a functions folder where we have the server code. Let's write an endpoint for Dialogflow to use as webhook/fulfillment.

functions/index.js

const functions = require("firebase-functions");

exports.chatWebhook = functions.https.onRequest((request, response) => {
  response.json({
    fulfillmentMessages: [
      {
        text: {
          text: ["Text response from webhook"],
        },
      },
    ],
  });
});

Now, this endpoint will send back a simple text response. For now, I'm having this as a dummy text response. In the later stages, we'll configure the weather API for getting the expected weather data.

Let's take it to live by deploying the functions with the below code.

firebase deploy --only functions

After deploying you can get the endpoint from the firebase function's console. Copy the URL, this will be our Webhook's URL in DF.

Configuring the fulfillment in Dialogflow

In the sidebar of the Dialogflow agent, you'll find the fulfillment section where you need to configure.

Post that you can configure the intent to use the fulfillment like below.

Let's check if it works by sending a message to the bot. The bot has to reply "Text response from webhook" then we can confirm that it works.

The Final Code with API Integration

I've updated the function to parse the params and actions and make the corresponding call to Weather API, and generate the text response that will be sent to the user as bot's reply.

function/index.js

const functions = require("firebase-functions");
const Axios = require("axios");

const WEATHER_API_KEY = "YOUR OPENWEATHERMAP HERE";

const responseBuilder = (msg) => ({
  fulfillmentMessages: [{ text: { text: [msg] } }],
});

exports.chatWebhook = functions.https.onRequest((req, res) => {
  let body = req.body;
  let { parameters, action } = body.queryResult;

  if (action !== "askWeather") return res.json(responseBuilder("Unable to process your query"));
  let city = parameters["geo-city"];
  let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${WEATHER_API_KEY}`;

  return Axios.post(url)
    .then((result) => result.data)
    .then((data) => `The temperature is  ${Math.round(data.main.temp - 273.15)} °C`)
    .then((message) => res.json(responseBuilder(message)))
    .catch((err) => res.json(responseBuilder(err.message)));
});

In the above code, we're extracting the action and the parameters from the body which is sent by Dialogflow when the user asks the question.

After deploying the function, the bot will be able to process the user's message with the help of the webhook.

This is just a very small example of what Dialogflow can do, but you can do a lot more with it. It also provides some custom formatting for telegram like inline buttons, links, etc.

Extract UI Components with AlpineJS and TailwindCSS using x-spread and @apply

Praveen Juge — Thu, 06 Aug 2020 14:41:20 +0000

Today we are going to create a dropdown component using AlpineJS and TailwindCSS.

AlpineJS is a simple JavaScript toolkit for creating reactive components. TailwindCSS is an utility based CSS framework. You can use both these frameworks in the HTML markup itself. But for some repeating components, you can extract it as a separate component so that you can reuse it.

Note: The following example doesn't follow accessibility principles to keep it simple. Make sure you follow accessibility principles for production websites.

Check out this gist for full source code.

HTML

Open a new html file in your website and add the following snippet.

<div class="dropdown">
  <button class="dropdown-trigger" id="open-color-menu">
    Open Dropdown
  </button>
  <div class="dropdown-list" id="color-menu">
    <a href="#" class="dropdown-item">Red</a>
    <a href="#" class="dropdown-item">Blue</a>
    <a href="#" class="dropdown-item">Green</a>
  </div>
</div>

CSS

Let's start with all the CSS that we need, I assume you have already set up a Tailwind integrated website. So in your CSS file, you can add this.

We use a special @apply function here that is available from TailwindCSS. It's used to inline any Tailwind utility classes into our own custom CSS.

[x-cloak] {
  @apply hidden;
}

.dropdown-trigger {
  @apply inline-block py-2 px-4 rounded-md bg-purple-700 text-white;
}

.dropdown-list {
  @apply absolute z-10 shadow-md w-56 flex flex-col border border-solid border-gray-200 bg-white p-2 rounded;
}

.dropdown-item {
  @apply relative flex px-2 py-1 items-center text-gray-800;
}

JS

Next, we can use Alpine to give our dropdown that sweet interactivity. Make sure you already have AlpineJS defined and then change your dropdown markup to this.

<div x-data="dropdown()">
  <button class="dropdown-trigger" id="open-color-menu" x-spread="trigger">
    Open Dropdown
  </button>
  <div class="dropdown-list" id="color-menu" x-spread="dropdown" x-cloak>
    <a href="#" class="dropdown-item">Red</a>
    <a href="#" class="dropdown-item">Blue</a>
    <a href="#" class="dropdown-item">Green</a>
  </div>
</div>

Here, x-data is the encapsulating function, the x-spread attributes will allow us to bind the object of Alpine directives to an this element so that we can reuse it everywhere.

And x-cloak hides the dropdown list before Alpine is defined. So we won't see the dropdown list and then hide on page load.

And then add this to a script file in your website:

window.dropdown = function () {
  return {
    open: false,
    trigger: {
      ["@keydown.escape"]() {
        this.open = false;
      },
      ["@click"]() {
        this.open = true;
      },
    },
    dropdown: {
      ["@keydown.escape"]() {
        this.open = false;
      },
      ["x-show.transition"]() {
        return this.open;
      },
      ["@click.away"]() {
        this.open = false;
      },
    },
  };
};

When you click on the dropdown trigger,

The @click directive makes the open variable true.
When the open variable is true, the dropdown will show because of the x-show.transition directive, where transition will add a little animation while opening up.

When you click outside or press escape button,

The @click.away and @keydown.escape directives will make the open variable false.
It will make the same x-show.transition hide the dropdown element.

And that's it, you can use this markup everywhere in your website and it will work for you. If you need to change CSS or JS in this component, you have to do it just once.

Check out this gist for the full source code.

Web Animation With GSAP

Sooraj (PS) — Wed, 05 Aug 2020 02:47:25 +0000

Ah animations, who doesn’t love some animations! When I was young, I was so curious to know how my favorite cartoons were animated. I used to imagine all sorts of tricks they would have used - maybe it was black magic?

Me getting excited for an animated series (back then … and now)

As I grew up, I realised animations were nothing but static frames which were slightly different from each other but when viewed so quickly in sequence seemed to “animate”. In earlier days animation was very difficult and blocky on the web with the technological limitations of that era. Nowadays, with high performance devices and with almost no tech limitations, it's possible to animate anything on the web with ease. But we still look out for ways which are easy, lightweight, high performant and but that can still deliver what all the other heavyweight packages offer right?

Well that’s when I found this plugin/package/library called GSAP. GSAP is an industry standard animation library that was created by GreenSock. It uses highly optimized and high performance javascript animation with a small bundle size. In this article, I will take you through the steps of setting up and writing cool animations on the web using GSAP.

I came across GSAP last year while I was browsing through animation tutorials. But back then I was not able to quite grasp its concepts. So last month I spent a couple of days exploring GSAP and immediately my mind was blown.

My Brain, after using GSAP

And since the release of GSAP3, all the functions of GSAP are very easy to both code and understand. We will be using GSAP version 3 for this article. We will be going through

gsap.to()
gsap.from()
gsap.fromTo()
gsap.timeline()

First of all let us set up our codebase. To install GSAP for your project, just go to your project directory and use the cli command

npm install gsap

If you need to use the CDN version, you can just head over to https://greensock.com/ and Click on “Get GSAP Now” button, and copy and paste the min.js link to your code’s html file.

In this article we will be using the CDN version and along with it Codepen as our code editor and Bootstrap 4 for design. Now that our setup is done, nice and easy. Let us start with GSAP and its functions.

Now if you are a web developer, in the beginning you would have spent countless hours animating the color of a DIV or moving a DIV across the screen using CSS animations and transitions. If you are good at JavaScript, GSAP will make animations a piece of cake. And the best part is that you don’t have to manually write any CSS animations. You only need to specify what property to animate and gsap will do that for you.

The way GSAP makes smooth and performant efficient animations is through a method called requestAnimationFrame. Now this is a browser function that optimises itself on each browser and does not execute when we are not on the viewport. So it's completely efficient.

Now to the smoothness. Let’s assume we want to make an element disappear by changing its opacity from 1 to 0. When you run this in CSS, we will see the element disappear in the blink of an eye. That is because there are no frames in between 1 and 0. There is a common term in animation called “tweening”, which means adding intermediate frames between the start and end, to make the transition as smooth as possible. gsap takes care of this and we only need to decide the duration and the ease (ease is the property that defines how the animation will happen over time. We will get to this later in the article). Now let us start with the methods.

1. gsap.to()

to() is a method provided by gsap to animate any element to the new state. to() method takes 2 arguments. So it takes your original element’s styles “to” the new style properties provided in the vars. For example,

original properties -> tween -> { opacity: 0 }

gsap.to(DOMelement / selector, vars);

The first argument is an element. You can pass either a DOM element or selector string to target an element. The second argument is something called “vars”, which is just an object that has all properties that you want to change. vars mostly consists of all the CSS properties that can be animated, but follow a camelCase syntax. For example “z-index” must be given as “zIndex”.

A simple example is to move an element’s x position to a new position (or left).

2. gsap.from()

from() is a similar method provided by gsap to animate any element from a new state. to() method takes 2 arguments. This first adds the styles given in the vars and theme gradually brings it to the original styles of the element. For example,

{ opacity: 0 } -> tween -> original properties

gsap.from(DOMelement / selector, vars);

The argument structure is the same as to() method.

A simple example is to move an element’s x position from a position ( or left ).

3. gsap.fromTo()

fromTo() is a method provided by gsap to animate any element from a given state to the new state. fromTo() method takes 3 arguments.

gsap.to(DOMelement / selector, varsFrom, varsTo);

The first argument is an element. The second argument is the properties that will be applied first to the element. The third argument is the properties that it will be reaching to at the end. For example,

{ opacity: 0 } -> tween -> { opacity: 1 }

A simple example is to move an element’s x position from a position ( or left ) to a new position.

4. gsap.timeline()

timeline() is a method provided by gsap to create a sequential timeline for animation. Suppose you need to animate 5 elements. And each element’s animation needs to wait for the previous animation to complete. This case becomes very complex in keyframe animations, because maintenance becomes a major issue. That is where timeline() method comes into use.

var myTimeline = gsap.timeline();

myTimeline
  .to(DOMelement / selector, vars)
  .from(DOMelement / selector, vars)
  .fromTo(DOMelement / selector, varsFrom, varsTo);

timeline() does not take any argument. You can add as many animations to a timeline. Each animation is triggered only after its previous animation has been completed.

Timeline animation is a bit different from the other animations.

Each method also has specific callbacks that you can use to execute certain functions after an update. Be sure to check out the callback functions on the gsap documentation, because you might never know what will miss.

And it is also very easy to integrate gsap methods with Promises, because these methods also return a promise on execution. This would be very useful when fetching data from an api. For example, If you have a list of books, and you add a book. The API/hook to add a new book will in turn set a loading and add the new book to the data and return a promise. You can now set the GSAP method in the promise resolving step and once the animation is done, the promise returned from that can be used to reset the loading. Promises in GSAP can also be used instead of timelines for shorter animation chains.

Apart from these gsap methods, there are a whole lot of plugins, some of which are free and some need a premium account. Some of the other plugins are ScrollTrigger, SnapPlugin, MotionPath, Inertia, Pixi, Text etc.

You can use the gsap methods in any way, and in any order to your creativity level. I have just made a simple button click animation. Even though it is minimal, it is effective

The main thing to remember is that, although animations are really eye catching to the user, overdoing it will definitely be a disadvantage. Don’t be flashy. Try to keep animations minimal but also attractive at the same time.

Indexing Firebase Data in Algolia For Full-Text Search

Varun Raj — Sat, 01 Aug 2020 12:29:37 +0000

Firebase being a BaaS solution comes with a bunch of features for developers to build their app faster and with real-time capabilities. But, there is one thing that is yet to be addressed by Firebase’s feature set - the ability to perform full-text search on the data that is stored in Firebase databases (like Firestore or Realtime Database). This creates a huge bottleneck for developers since search is one of the primary user experiences for any application we build.

Thankfully we’ve got Algolia that can help us solve this problem. This is a service which helps you store the index of data from firebase, making it searchable. The important advantage of Algolia is that it’s supported in different platforms with a lot of UI components, which can be easily used to develop search modules for your apps.

In this article, I’ll walk you through how to set up your Algolia and index your data when new data is created or modified in your Firebase Firestore. This article is split into the following sections, you can skip any, in case if you’re already aware of them.

Creating an account in Algolia
Setting up Firebase Cloud Function
Index data from Firebase Firestore on create and edit.

Creating an account in Algolia#

As the first step, you can navigate to Algolia and register your account by either signing up with Google or Github or just with email.

Once you’ve created your Algolia account, go to the dashboard and find a default project created under your account. Let’s use that project for this article.

Similar to Firestore collections Algolia has an “Index” - the aggregation of data under a common umbrella. Create your index to store the data.

In this case, I have created an index called “Recipes” to save food recipes

After creating an account, add data to the index. Among the 3 different options for adding the data, we’ll be using the API for importing data with help from the firebase cloud functions.

Setting up Firebase Cloud Functions#

Let’s assume that you’re already having a firebase project and upgraded to Blaze Plan since we have to call external APIs from functions. Then, initialize the functions in your project with the Firebase CLI tool and setup cloud functions.

cd ProjectFolder
firebase init

On completion, you’ll find a folder named “functions” in your project folder. Open the project folder in a text editor like VSCode.

Now we’re going to index data in the “recipes” collection to our new Algolia index. So, let’s create two functions that listen to onCreate and onEdit of any document in the “recipes” collection.

functions/index.js

const functions = require('firebase-functions');
const onCreate = require('./triggers/recipes/onCreate');
const onEdit = require('./triggers/recipes/onEdit');

exports.onRecipeCreate = functions.firestore
                                   .document("recipes/{recipeId}")
                                   .onCreate(onCreate);

exports.onRecipeEdit = functions.firestore
                                   .document("recipes/{recipeId}")
                                   .onUpdate(onEdit);

Create the handler functions for onCreate of recipe docs and onEdit of the same. So, I’ve created two files under the triggers folder of our functions

functions/triggers/recipes/onCreate.js

module.exports = (snap, context) => {
}

functions/triggers/recipes/onEdit.js

module.exports = (change, context) => {
}

Index data from Firebase Firestore on create and update.#

To index the documents in Algolia, configure Algolia keys in the firebase cloud functions. The secured way is to use firebase environment variables.

To get the API keys from Algolia, go API Keys section in Algolia dashboard and copy your Application ID and the Admin API Key

These keys need to be configured to our Firebase Cloud function’s environment variables. You can do that with the help of the firebase CLI tool

firebase functions:config:set algolia.app_id="THE APP ID" algolia.admin_key="THE ADMIN API KEY"

After updating the config, we can start using it in the ‘functions’ code. In order to use Algolia, we need to install the npm package in our functions code base.

cd functions
npm install --save algoliasearch

After installing the package, create a config file to setup Algolia with the API Keys

functions/config/algolia.js

const functions = require('firebase-functions');
const algoliasearch = require('algoliasearch');

const ALGOLIA_ID = functions.config().algolia.app_id;
const ALGOLIA_ADMIN_KEY = functions.config().algolia.admin_key;

module.exports = algoliasearch(ALGOLIA_ID, ALGOLIA_ADMIN_KEY);

This file exports the Algolia Client which we can use to index data and delete the indexed data. Thus, we need to import this in our onCreate and onEdit file.

With the client, you can initialize the index, in our case “Recipes” and we use saveObject function to store the data inside the index.

functions/triggers/recipes/onCreate.js

const client = require("../../config/algolia");
const recipeIndex = client.initIndex('Recipes');

module.exports = (snap, context) => {
 let data = snap.data();
 data.objectID = snap.id;
 recipeIndex.saveObject(data);
}

functions/triggers/recipes/onEdit.js

const client = require("../../config/algolia");
const recipeIndex = client.initIndex('Recipes');

module.exports = (change, context) => {
 let data = change.after.data();
 data.objectID = change.after.id;
 recipeIndex.saveObject(data);
}

In the above two files, we’ve extracted the data from the snap (in onCreate) and changed (in onEdit) to a variable called data. In Algolia, the primary key is stored in the attribute objectID of data, so we’re storing the firebase document ID as the objectID.

Let’s deploy the function and test the setup. Deploy the firebase functions by executing the below command from the project’s root folder.

firebase deploy --only functions

After deploying, create a document under the **recipes **collection and see if it’s indexed in Algolia.

As soon as you create the data in Firestore, the cloud functions will be triggered and the indexes will be created in your Algolia project.

Similarly, the index will be updated every time you edit the data in Firestore. This happens in realtime and thus your search will be always updated.

Thus, you can replicate the data from firebase to Algolia to create a full-text search index. Hope this article helped you to get started with Algolia setup for your firebase project.

Rise of Tailwind - A Utility-First CSS Framework

Praveen Juge — Fri, 24 Jul 2020 04:21:23 +0000

Tailwind is a utility-first CSS framework, the keyword being ‘utility’. It is basically a set of classes that you can use in your HTML.

For instance, to recreate the following button, we can use:

<button class="bg-purple-700 text-white py-1 px-4">Button</button>

Here the classes are prebuilt by tailwind to give the following CSS:

.bg-purple-700 {
  background-color: #6b46c1;
}
.text-white {
  color: #ffffff;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.px-4 {
  padding-top: 1rem; 
  padding-bottom: 1rem;
}

Therefore, we don't have to write any custom CSS to get this button. This can be heavily extended to build whole web applications without the need for any other styles apart from a tailwind.

Benefits of Tailwind that I love

No need to write any responsive media queries any more

If you want something to display on mobile and not on the desktop, add the class block md:hidden. As this is a mobile-first approach, that element will have display: block on mobile and after the md breakpoint, which is 768px, it will toggle to display: none.

Consistent spacing and typography

As everything in utility classes is predefined, we will have consistent padding and margin throughout our platform. And, typography in tailwind is the best, you don't have the need to change any of the default config yet.

PurgeCSS built-in

It has the ability to remove unused CSS that we didn't use in our app. It does this with the help of purge css built-in within tailwind. This gives loads of size savings on the final CSS build.

Let's build something...

Now let's build a simple alert component to see how tailwind works in detail. Enter the following command in your terminal, make sure you have Node installed.

mkdir tailwind-alert
cd tailwind-alert
npm init # Follow the steps to initialize a npm project
touch index.html postcss.config.js main.css
npm i -save tailwindcss postcss-cli

In your index.html, postcss.config.js and main.css copy the following code:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="tailwind.css" />
  </head>
  <body class="m-10">
    <div role="alert">I'm an alert that informs you of stuff.</div>
  </body>
</html>

// postcss.config.js
module.exports = {
  plugins: [require("tailwindcss")],
};

/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, add the following script in your package.json:

// package.json
...
  "scripts": {
    "start": "postcss main.css -o tailwind.css --watch"
  },
...

Now do npm start in your terminal and open index.html in your browser, you should see this:

Style with tailwind

Let's style it with a tailwind! For a typical alert component, we need to give a background color and text color first. So in your index.html, change the following:

<div class="bg-purple-200 text-purple-700" role="alert">I'm an alert that informs you of stuff.</div>

Now let's add some padding with rounded corners, for padding we have p-{n} utilities and border radius can be also given with utility classes.

<div class="bg-purple-200 text-purple-700 py-2 px-4 rounded" role="alert">I'm an alert that informs you of stuff.</div>

This looks better! But, for reusability, we can make this a component. In your main.css file add the following code:

/* main.css */
@tailwind base;
@tailwind components;

.alert {
  @apply border-2 border-solid text-base rounded py-2 px-4;
}

.alert-primary {
  @apply bg-purple-200 border-purple-200 text-purple-700;
}

@tailwind utilities;

The @apply is a special tailwind directive that makes it easy to refer to the tailwind utility classes here. Now refresh index.html in your browser and you will see this:

You can now use this alert component everywhere and can change its styles in one place. Since we are using tailwind classes, this will give us better control of spacing, colors and typography compared to our own CSS styles.

Conclusion

As I am using tailwind in my projects, I didn't have the need to use sass or even create multiple stylesheets. Everything I need can be done within the tailwind itself.

Some cons that I see:

The steep learning curve for new developers
Postcss takes a long time to compile for big projects
Initial setup for projects is long

I'm sure the tailwind team will address and solve these issues with the best they can in the future. Check out the official documentation and get started. Happy coding!

What I learnt about obsessing with my competitors

Karthik Kamalakannan — Sat, 16 Feb 2019 15:50:51 +0000

I am obsessed with my competitors. I literally track them everywhere. Meticulously and relentlessly.

When I started Skcript back in 2013, I was obsessed over my competition that I would give a lot of damn about it. Few years went by, and it was 2016, and the feeling of never being able to ‘pause’ (not stop) my running started sinking in. I went on a drive one nice evening to see how I cloud overcome this mindset and move on to focus on other things that we could do at Skcript.

What I realized about analyzing by competition was something different.

People say that competition is good. And that you will have to be obsessed over your competition. The real reason behind that is not to keep your company updated all the time, but to know what your customers really want. Period. It is that simple.

Knowing what your customer wants is more important than watching your competition closely. It is probably the only single metric that will matter to you when you are new to the market trying to create something good.

Watching your competition and being obsessed over them comes as a part of knowing your customers well enough.

Post that long drive I had in 2016, after being stressed, the one thing that changed in me to build great products that matter, is where I looked at my competition.

Earlier, I used to obsessively follow them everywhere. On social media, get more information about them from friends, and my major stress came in when I used to hear news saying that they on-boarded say 2000 more users on-to their platform.

Today, all that I look for and the one metric that helped me grow our revenue was to analyze my competitors’ feature set and figure out why they built it like they did. Considering my competitor as one of my biggest and free user-testing providers made all the difference.

Ultimately, we all are here to solve a customers’ problems. Not our own problems.

This post first appeared on Karthik's Desk on Skcript.

Writing your first Business Model in Hyperledger Composer

Naveen Honest Raj — Wed, 21 Feb 2018 04:53:44 +0000

This article focuses on creating a simple business model that helps you with visualizing the abstract nature of Hyperledger Composer’s language.

If you are confused on where to start or wasted a lot of your time in getting started with Hyperledger Composer, you should read this article. My co-worker, Varun has explained it in such a simple way that anyone can understand it.

What is Business Network Definition?

The Business Network Definition is the core definition that holds the Hyperledger Composer’s programming model. In short, it controls the model definition, the relationship between them, the access control over them and the actions that could be performed on/with them.

BND has three core components :

The Model written in .cto files
The Business Logic written in .js files
The Access Control Logic written in .acl files

(Optional) There is a Query file written in .qry files that help us to query over the persistent DB.

These three components are easy to maintain and they govern our whole business application on the Composer.

Let’s see how to write a manageable simple model file that helps anyone understand most of our business logic. We will implement this in the business logic file.

Understanding The Key Concepts Of A Model

Before writing our own model, let us understand the key concepts of it. In a model file, you will be defining the following,

A namespace namespace org.skcript.svr
Resources, which includes
1. Participants
2. Assets
3. Transactions
4. Events
Optional import statements that are used to inherit or import other model files.

Resources Are Everything In A CTO File

A ‘Participant’ denotes the person who does the action (in simple terms). This is to whom the ID is issued and this is the one who performs transactions.

For example: Consider the example

participant Author identified by id {
    o Integer id
    o String name
    o String email
    o String specialized_in 
    o Double age
}

In the above example, we see there’s a participant named Author and the keyword identified by is used to select the primary key. Here, it is id field that acts as a primary key. We will know the wide applications of having this identified by on right field to have an easy and readable access to the model.

The circles are nothing but lower case ‘o’ (The O, yeah ! ). Composer’s model file has a unique way of representing a new key in their object. But you will get used to it.

Assets are the resource which our business model has. Considering our above example, Author is a participant, then Post will be the asset that he holds. And we know that every post will always belong to an author. There can never be an asset that won’t belong to an author. This can be done by creating a relationship between our participant and asset. This is easy-peasy because of the CTO’s modeling language.

P.S. You should be careful with relationship because it is unidirectional and you can’t do the vice versa which you can do in most of the application frameworks.

Example:

/**
* An enumerated type
*/
enum Category {
  o AI
  o BLOCKCHAIN
  o WEB-DEVELOPMENT
  o BACKEND
  o DESIGN
  o FUN
}

/**
 * A post asset.
 */
asset Post identified by id {
  o String id
  o String title
  o Category category
  o DateTime timestamp
  --> Author author
  --> Author coAuthor optional
}

In the above example, as we learned earlier identified by is used with id as primary key which makes sense. Right? Now you can understand.

But where’s the new thing coming up? No rush. Let’s take it slow.
Let’s see the Line 21 - we see an arrow. Okay. I didn’t write it because it looks good on the code and it’s not a comment too. That’s again our Composer’s modeling language’s weird way of writing relationship. So we should read it as Post belongs to Author. That’s simple. Done.
In Line 22 , we can see there’s a new keyword optional. This helps us avoid mandatory entry to create an asset. This is defined as optional by thinking that there may or may not be a coauthor for a particular post.

Next, why enum ? It’s for managing a neat code. As our articles goal is not only to learn how to write a model but also to write a good one that can be easy to read and update.
So enum holds the possible values our field can take. So we defined an enum called Category and we gave it all the possible values it can take. Now in Line 19 we used it and created a category of enum Category .

Transactions are the process in which our participants do the operation on assets. Considering our scenario, author creating a post is also a transaction.
Example:

transaction createPost {
  --> Author owner
  o String title
  o Category category
}

The above transaction definition emphasizes that we are creating a post by pointing out the author of the post. We also provide title and category while creating the post.

P.S: In our next post, we will learn more about the transactions and transaction processor functions.

Events are used to trigger some other third party application. You can write the logic for the event which will help you to send an email about the author’s new post. These events can be used to help you to send emails if and only if you subscribed to the particular author which helps to avoid spam and improves integrity. Events are also defined the same as transactions. The purpose is only different. Used with event keyword for declaration.

The Endless Possibilities Of The CTO File

You can still segregate the model declaration by abstract keyword which won’t create participant or asset in the registry, rather is used to inherit from the other resources.

Example: Considering the same scenario, try to understand the following code

abstract Participant UserInformation identified by name {
  o String name
  o String address
  o String email
  o Integer age
}

participant Author identified by id {
    o Integer id
    o String specialized_in 
    o UserInformation user_information
}

We created an abstract participant which holds most information about a user and we inherit and use that in our Author participant. This helps us have a clean model that still maintains Single Responsibility Principle. We can do abstract type for assets and transactions too.

Conclusion

There are much more magical things like extends that we can do with CTO file. But let’s end it clean and easy here. After you write your first model, you will figure out most of the conventions you might need to follow to have a maintainable code. Wish you a good luck, readers.

Should I choose Hyperledger Sawtooth 1.0 over Fabric 1.0 for my private blockchain?

Karthik Kamalakannan — Fri, 16 Feb 2018 17:58:49 +0000

The Hyperledger Blockchain project is at its peak right now. With big companies like IBM and technology based companies like us, contributing to the project, the project is seeing faster development cycles than it had before. This is something we're definitely proud of.

The recently announced Enterprise Ready Sawtooth 1.0 is big. The Sawtooth project, which was moved from Intel to the Linux Foundation, is something that aligns a bit with Hyperledger Fabric, but with a little more maturity.

The biggest area where both the project differ are in the philosophy behind the projects.

Hyperledger Sawtooth for example, focuses on creating very secure way to handle your smart contracts, with stricter rules and consensus.

Hyperledger Fabric on the other hand, can optionally enforce these rules, which helps a lot of different private blockchain providers right now.

If you are looking to build a very secure, strictly distributed private blockchain, Sawtooth would be the best choice. Here's why, Sawtooth 1.0 is a major release in the history of Hyperledger Project:

Distributed ledger; Sawtooth aims to have distributed ledgers, truly distributed.

Secure Smart Contracts; With a strict policy to have your information truly distributed, the Smart Contracts are safer and Enterprise ready.

BFT Enabled; When I saw that Sawtooth is Enterprise ready, the major reason is that it comes with Byzantine Fault Tolerance features. This BFT feature gives much higher tolerance rate than the Crash Fault Tolerance in Fabric.

Global State Agreement enforces; This module gives a assurance that each node has exact same copy of the database as the other notes in the blockchain network. Backed heavily by cryptography.

Parallel Transactions; The ability to have parallel transactions with Sawtooth makes all the difference. Thus reducing the amount of time it takes to process transactions in the system.

So, should I choose Fabric or Sawtooth?

The decision purely depends on your use-case. A well experienced Blockchain Consultant will be able to help you make this decision faster.

If you are looking at a private blockchain network that holds highly sensitive data and a sensitive smart contract, Sawtooth could be one option you should consider.

You can interact in our Blockchain Forum with more questions.