Coding with Voice using Serenade

How I created a React Component with Serenade

Serenade is a specialized software that has the ability to interpret natural speeches into codes. As a web developer, I found it very interesting since we can easily integrate it with IDEs like VS Code, and it supports several languages, including JavaScript and HTML.

However, before using it in practice, we must be well aware of its feasibility. In this article, I will put Seranade to the test by developing a React component.

How to Setup Serenade?

Setting up Serenade is very straight forward. All you need to do is download the latest version from serenade.ai and install it on your local machine.

As the second step, open VS Code and enable Serenade extension.

Enabling VS Code extension for Serenade

Then you can run Serenade, and it will float above all your applications allowing you to work side by side.

Side by side view of Serenade and VS Code

The bottom left corner of the Serenade window will indicate the currently focused application, and now, you can start working on your application.

Tip: Build applications differently

OSS Tools like Bit offer a new paradigm for building modern apps.

Instead of developing monolithic projects, you first build independent components. Then, you compose your components together to build as many applications as you like. This isn’t just a faster way to build, it’s also much more scalable and helps to standardize development.

It’s fun, give it a try →

An independently source-controlled and shared “card” component. On the right => its dependency graph, auto-generated by Bit.

Serenade Cheat Sheet

Before getting into coding, I will list down some most used Serenade commands to get a basic understanding of them.

• insert: used to insert new codes to the current cursor pointer. Eg:insert hello readers ==> hello readers
• add:add command is similar to insert but, it is used in the creation of much larger codes like functions and classes. E.g.: add function calculator ==> function calculate() {}
• type: This is another way to insert text, But specialized for inserting raw text. Useful when you need to specify manual formatting. E.g.: type camel case hello readers ==> helloReader
• newline: Adds a new line in your code.
• go to: You can move your cursor around the code with this command. E.g.: go to line three ==> corsour will move to line 3
• delete: You can delete code with the delete command. E.g.: delete line six
• copy, cut, select,paste and duplicate commands can be used to manipulate text.
• You can control your editor with Serenade using commands like save, undo, redo, open, close.

Apart from these commands, there is a large vocabulary to follow and you can find them in Serenade documentation.

First JavaScript Function With Serenade

As we all know, JavaScript is one of the most used languages in web development. So let's try to develop a simple JavaScript code using Serenade to check its capabilities.

In this example, I will be creating a simple calculator function. You can follow the instructions given below to try it on your own. I have added the voice commands as comments.

Step 1: Generating a new function named calculator.

//add function calculator
function calculator() {}

Step 2: Adding 3 input parameters to the calculator function named as number1, number 2, and operator.

//add parameter number 1
//add parameter number 2
//add parameter operator
function calculator(number1, number2, operator) {}

Step 3: If condition to check whether the operator equals to “addition.”

//add if operator equals quotes addition
function calculator(number1, number2, operator) {
  if (operator == "addition") {
  }
}

Step 4: If the condition satisfies, return the sum of numbers 1 and 2.

//add return number 1 plus number 2
function calculator(number1, number2, operator) {
  if (operator == "addition") {
    return number 1 + number 2;
  }
}

Step 5: Similarly, add if conditions to the rest of the operations.

//line 7
//add if operator equals quotes subtraction
//add return number 1 minus number 2
//line 11
//add if operator equals quotes division
//add return number 1 divide number 2
//line 15
//add if operator equals quotes multiplication
//add return number 1 times number 2
function calculator(number1, number2, operator) {
  
  if (operator == “addition”) {
    return number1 + number2;
  }
  if (operator == “subtraction”) {
    return number1 — number2;
  }
  if (operator == “division”) {
    return number1 / number2;
  }
  if (operator == “multiplication”) {
    return number1 * number2;
  }
}
//Please note that you can use commands, "line 7","line 11" and "line 15" was used to move into new line.

That’s it !!! Now you have successfully created your first JavaScript function using Serenade, and I’m sure you will be more familiar once you get hold of Serenade commands.

Serenade also Supports HTML & CSS

It’s almost impossible to develop a web application without HTML and CSS. So, let’s see how Serenade performs with HTML & CSS.

However, you need to be well aware of HTML tags and attributes since you have to specify whether you need a tag or attribute.

In this case, I will develop a simple HTML page with few tags and import a CSS file for styling. Similar to the JavaScript example, I will add the voice commands as comments.

Step 1: Creating basic HTML skeleton with a header.

//add tag html
//add tag head
//add tag title
//type my blog
<html>
 <head>
  <title>my blog</title> 
 </head>
</html>

Step 2: Linking stylesheet

//go to end of line 3
//add tag link
//add attribute rel equals stylesheet
//add attribute type equals text slash css
//add attribute href equals main dot css
<html>
 <head>
  <title>my blog</title> 
  <link rel=stylesheet type=text/css href=main.css></link>
 </head>
</html>

Step 3: Adding body part of HTML file & bind CSS class.

//go to end of line 5
//add tag body
//add tag h1
//add attribute class equals heading
//type hello readers
//go to end of line 7
//add tag p
//type welcome to my blog
<html>
 <head>
  <title>my blog</title> 
  <link rel=stylesheet type=text/css href=main.css></link>
 </head>
 <body>
  <h1 class=heading>hello readers</h1>
  <p>welcome to my blog</p>
 </body>
</html>

Step 4: Create a separate CSS file for styling.

//add ruleset dot heading
//add color is blue
//add font size is 10 em
//type my blog
.heading {
  color: blue;
  font-size: 10em;
}

That’s it, you have successfully created an HTML file and imported CSS to it as well.

Although there are few difficulties, now we have some understanding of its feasibility in using for basic web development tasks.

But the question is, can we use Serenade for more advanced tasks like using with frameworks or libraries?

You will get your answer soon since I’m going to show you how we can use Serenade to create a React component.

Using Serenade with React

Now, I will combine all the previous things and develop a simple React component using Serenade. Again, check the comments for the voice commands.

Step 1: Importing React, creating a new class with a constructor.

//add import default capital react from react
//add class Example
//add extends react dot component
//add constructor
//add parameter props
//add super of props
//add this dot state equals braces
//add entry count colon zero

import React from "react";
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}

Step 2: Implementing the component view.

//add method render
//add return tag div
//add tag p
//type number of clicks space
//insert braces this dot state dot count
//add tag button
//insert click
//add attribute onclick equals braces e arrow this dot click parens
import React from "react";
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    <div>
      <p>number of clicks {this.state.count}</p>
      <button onClick={e => this.click()}>Click</button>
    </div>;
  }
}

Step 3: Adding a function to increment the count.

//add method click
//add this dot set state of braces
//add entry count colon this dot state dot count plus one
import React from "react";
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    <div>
      <p>number of clicks {this.state.count}</p>
      <button onClick={e => this.click()}>Click</button>
    </div>;
  }
  create(){
    this.setState({
      count:this.state.count + 1
    });
  }
}

Now, you have coded your React component by voice, and I think most of you must realize Serenades’ capabilities by now.

My Experience with Serenade

First of all, I must admit that Serenade is an exciting tool. But, after testing Serenade with several web development languages and frameworks, I think it still has to improve in certain ways to replace the keyboard.

If I talk about the positive side first, it was quite easy to get started with Serenade. Although there is a large command set, skim through the documentation and pick the important commands to try out simple examples.

Also, I had several doubts about the indentations and formatting at the beginning. But, Serenade was spot on with the code structure, and especially it managed the HTML files well.

On the other hand, the pronunciation of the commands was a bit difficult for me. Although I’m quite good at speaking English, I had to try several times to get the exact command. Since English is my second language, I hope my accent might be the reason for that. Besides, I think it can be different from person to person

But, Serenade provides a list of options to select if it couldn’t understand the exact command.

Serenade command options list

Although there were no major issues in the above examples, things can get difficult when we move on to complex logic. We might have to give long commands at once, and there is a high chance of misinterpreting the command as it gets lengthy.

For example, we can use the keyboard and finish the following command in seconds.

this.setState({
items: this.state.items.concat(["item1"])
});

But, the Serenade command will look like below, and it requires us to say the full command at once, which could be harder for many people.

add entry items colon this dot state dot items dot concat of in brackets in quotes item

Also, we need to be well aware of the Serenade command to use it in practice; otherwise, there is a high chance of confusion even with little things like brackets.

Conclusion

Serenade is a promising tool, and it has the potential to expand. Overall we can use it for simple development or coding tasks without many issues and explore the limitations.

Also, Serenade has some features like Siri or Google, allowing it to control other applications in your computer with your voice.

Most importantly, it is an excellent option for people who cannot use keyboards for coding due to physical limitations.

However, in my opinion, Serenade is still not up for mainstream development, and it can be improved in several areas, as I’ve discussed in the article. But as a developer, I highly encourage you to download Serenade and give it a go. It will be a whole new experience.

Thank you for Reading !!!

Learn More

Build Scalable React Apps by Sharing UIs and Hooks

10 Top Visual Studio Code Extensions in 2020

Honeycode: 3 Steps to Build Apps with No-code