Node CLI Based Restaurant Feedback App With Using Chalk, Clear, Figlet & Enquirer

Rizwan Jamal — Thu, 12 Sep 2019 15:20:29 +0000

Let’s talk little bit about what we are going to develop. We are making a CLI based feedback application for a Restaurant. Using this app, people can give feedback about their experience regarding food taste, quality, & can provide their valuable suggestions also.

Let's begin,

We have created Feedback-CLI-App folder and installed Enquirer, Chalk, Figlet and Clear npm modules. The final package.json file should look like this:

{
  "name": "feedback-cli-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chalk": "^2.4.2",
    "clear": "^0.1.0",
    "enquirer": "^2.3.1",
    "figlet": "^1.2.1"
  }
}

Now, create index.js file at the root of your app & require these module that we installed earlier. I will let you know their usecase one by one

const clear = require("clear");
const chalk = require("chalk");
const figlet = require("figlet");

We want to clear the console when the application runs, so we are using the clear module for that

// Clearing Console On App Starts
clear();

Now we want to show User a wonderful heading & a welcome message, so we are using figlet and chalk module for that purpose.

// Create Heading Using Chalk & Figlet
console.log(
  chalk.yellowBright(
    figlet.textSync("Feedback Form", { horizontalLayout: "full" })
  )
);
console.log(
  chalk.cyanBright(
    "\n\tA Simple CLI Based Restaurant Feedback Form Using NodeJS"
  )
);
console.log(
  chalk.cyanBright(
    `\tFor Commands Run ${chalk.greenBright(
      "Just Follow These Instruction\n"
    )} `
  )
);

The current output should look like this

Let's add the feedback questions now, create a questions.js file at the root. Inside that file we are now going to use enquirer, a great module having wonderful & Stylish CLI prompts that are user-friendly, intuitive and easy to create. Few examples of these prompts are shown below:

Inside questions.js file, after requiring enquirer, create a function that returns an array of questions like this:

const enquirer = require("enquirer");

const feedbackQuestions = () => {
  const questions = [
    {
      type: "input",
      name: "name",
      message: "What is your name ?"
    },
    {
      type: "autocomplete",
      name: "favourite",
      message: "Which dish you liked the most ?",
      limit: 10,
      choices: [
        "Biryani",
        "Butter Chicken",
        "Hamburger",
        "Blackberry",
        "Strawberry Cheesecake",
        "Italian Beef",
        "Red Valvet Cake"
      ]
    },
    {
      type: "multiselect",
      name: "improvement items",
      message: "Which of these dishes you want them to improve ?",
      limit: 7,
      choices: [
        "Biryani",
        "Butter Chicken",
        "Hamburger",
        "Blackberry",
        "Strawberry Cheesecake",
        "Italian Beef",
        "Red Valvet Cake"
      ]
    },
    {
      type: "input",
      name: "suggestion",
      message: "What would you like to suggest ?"
    },
    {
      type: "survey",
      name: "experience",
      message: "Please rate your experience",
      scale: [
        { name: "1", message: "Strongly Disagree" },
        { name: "2", message: "Disagree" },
        { name: "3", message: "Neutral" },
        { name: "4", message: "Agree" },
        { name: "5", message: "Strongly Agree" }
      ],
      margin: [0, 0, 2, 1],
      choices: [
        {
          name: "quality",
          message: "The food quality was well",
          initial: 3
        },
        {
          name: "taste",
          message: "The taste is outclass",
          initial: 3
        },
        {
          name: "environment",
          message: "The environment is wonderful too",
          initial: 3
        },
        {
          name: "service",
          message: "I like their service",
          initial: 3
        }
      ]
    }
  ];

Before ending the function, we need to call prompt method of enquirer(that's an async method) with passing these questions array. It will return a promise like this:

  enquirer.prompt(questions).then(ans => {
    clear();
    console.log(
      chalk.yellowBright(
        figlet.textSync("Feedback Form", { horizontalLayout: "full" })
      )
    );
    console.log(
      chalk.cyanBright("\n\t Thanks For Providing Us Your Feedback !\n")
    );
    console.log(ans);
  });
};

And at the end we are simply exporting the feedbackQuestions function from this module. So the final questions.js file should look like this:

const enquirer = require("enquirer");
const clear = require("clear");
const chalk = require("chalk");
const figlet = require("figlet");

const feedbackQuestions = () => {
  const questions = [
    {
      type: "input",
      name: "name",
      message: "What is your name ?"
    },
    {
      type: "autocomplete",
      name: "favourite",
      message: "Which dish you liked the most ?",
      limit: 10,
      choices: [
        "Biryani",
        "Butter Chicken",
        "Hamburger",
        "Blackberry",
        "Strawberry Cheesecake",
        "Italian Beef",
        "Red Valvet Cake"
      ]
    },
    {
      type: "multiselect",
      name: "improvement items",
      message: "Which of these dishes you want them to improve ?",
      limit: 7,
      choices: [
        "Biryani",
        "Butter Chicken",
        "Hamburger",
        "Blackberry",
        "Strawberry Cheesecake",
        "Italian Beef",
        "Red Valvet Cake"
      ]
    },
    {
      type: "input",
      name: "suggestion",
      message: "What would you like to suggest ?"
    },
    {
      type: "survey",
      name: "experience",
      message: "Please rate your experience",
      scale: [
        { name: "1", message: "Strongly Disagree" },
        { name: "2", message: "Disagree" },
        { name: "3", message: "Neutral" },
        { name: "4", message: "Agree" },
        { name: "5", message: "Strongly Agree" }
      ],
      margin: [0, 0, 2, 1],
      choices: [
        {
          name: "quality",
          message: "The food quality was well",
          initial: 3
        },
        {
          name: "taste",
          message: "The taste is outclass",
          initial: 3
        },
        {
          name: "environment",
          message: "The environment is wonderful too",
          initial: 3
        },
        {
          name: "service",
          message: "I like their service",
          initial: 3
        }
      ]
    }
  ];

  enquirer.prompt(questions).then(ans => {
    clear();
    console.log(
      chalk.yellowBright(
        figlet.textSync("Feedback Form", { horizontalLayout: "full" })
      )
    );
    console.log(
      chalk.cyanBright("\n\t Thanks For Providing Us Your Feedback !\n")
    );
    console.log(ans);
  });
};

module.exports = feedbackQuestions;

Now we just need to import that function inside our index.js file & call it at the end. The final index.js file should look like this:

const clear = require("clear");
const chalk = require("chalk");
const figlet = require("figlet");

const feedbackQuestions = require("./questions");

// Clearing Console On App Starts
clear();

// Create Heading Using Chalk & Figlet
console.log(
  chalk.yellowBright(
    figlet.textSync("Feedback Form", { horizontalLayout: "full" })
  )
);
console.log(
  chalk.cyanBright(
    "\n\tA Simple CLI Based Restaurant Feedback Form Using NodeJS"
  )
);
console.log(
  chalk.cyanBright(
    `\tWelcome To The Feedback Form ${chalk.greenBright(
      "Please Answer The Below Questions\n"
    )} `
  )
);

// Feedback Question
feedbackQuestions();

That's all ! Here is the final output :

Cheers...... ! You did it :)

react-native run-android failed ? Here is the solution

Rizwan Jamal — Wed, 11 Sep 2019 19:35:05 +0000

I've faced a similar problem, and after spending so much time and lots of searching about this issue the only solution worked for me is:

Please Install the Required SDKs as shown in this below image. Configure Required SDKs
If You have already installed it, so you must have to update the following SDKs:
- Android SDK Tool (update it to latest version)
- Android SDK Platform-tools (update it to latest version)
- Android SDK Build-tools (update it to latest version)
- Android Support Repository under Extra folder (update it to latest version)
You Must have at least installed the same version Android API as the installed Android SDK Build-tools & Android SDK Platform-tools version as shown in the Configure Required SDKs image above.

Note: Local Maven repository for Support Libraries which is listed as the SDK requirement in the official docs of React-native is now named as Android Support Repository in the SDK Manager.

DEV Community: Rizwan Jamal

Node CLI Based Restaurant Feedback App With Using Chalk, Clear, Figlet & Enquirer

react-native run-android failed ? Here is the solution