Title: Prompt user for more input

[kitchen-boy]

Description

Profile questions

• Name

• GitHub account name

• About me

  Project questions

• Project name

• Project description

• Programming Languages

• Project link

[kitchen-boy]

9.3: Node Package Manager: Lesson Goals

• Understand the purpose of npm and navigate its ecosystem.
• Learn npm commands to initiate projects and install packages using the command-line utility.
• Understand how to use and its Promise.

[kitchen-boy]

STEPS:

Create new feature branch:

• git branch checkout -b feature/questions

  Install the Inquirer package:

• install packages like Inquirer into the project by using the npm utility command-line tool. $ npm init $ npm install inquirer

  Create the .gitignore file:

• Exclude the node_modules directory from Git's tracking system and fill out our profile and project sections of the portfolio page using user data.

  Validate answers:

• Need to ensure all data is collected before the webpage is generated.
• This includes handling errors in user input and determining which questions the user sees based on their answers.

  Save progress with Git:

• Commit and merge feature branch so we can close our GitHub issue & move one. $ touch .gitignore
• Add node_modules/ to this file and save changes to all files.
• We can also add node_modules/ to the .gitignore file from the command line by typing the following command: $ echo node_modules/ > .gitignore

IMPORTANT

Create the .gitignore file during the initial setup of the project to avoid accidentally tracking the folder with the git add -A command. If the node_modules folder was accidentally tracked by git, use the following command to remove the tracking: $ git rm -r --cached node_modules.

[kitchen-boy]

Import Inquirer into app.js

• we can use the require() function to include inquirer in the app.js file.

const inquirer = require('inquirer'); // Verify that inquirer is available by adding console.log(inquirer) in the app.js file. console.log(inquirer)

[kitchen-boy]

Is the order of your require statements important?

Not for the functionality of the application, but remember you also need to code for humans to read. Try to group by source: npm packages, personal modules, and core library modules often get grouped together.

[kitchen-boy]

Use Inquirer

• Use inquirer to formulate the profile questions

• Objects/Question/ - a hash containing question related values:

• • type: (String) Type of the prompt. Defaults: input - Possible values: input, number, confirm, list, rawlist, expand, checkbox, password, editor
  • name: (String) The name to use when storing the answer in the answers hash. If the name contains periods, it will define a path in the answers hash.

• message: (String|Function) The question to print. If defined as a function, the first parameter will be the current inquirer session answers. Defaults to the value of name (followed by a colon).

inquirer .prompt([ { type: 'input', name: 'name', message: 'What is your name?' } ]) .then(answers => console.log(answers));

• Notice that 's method can receive an array of objects in its argument, known as the object. The properties of the object identify the type, name, and question message of this particular question. "Input" was chosen as the type of question because the answer will be a text reply.

• The object is returned as a Promise; this is a new tool for dealing with asynchronous functions that will return the object in the function.

• Save and run the app. You should see a prompt like the following image in the terminal:

• Place the call to inquirer.prompt() in a function so that it can be invoked on demand within the flow of the application.

• In app.js, wrap <inquirer.prompt()> inside a function, as follows: const promptUser = () => { return inquirer.prompt([ { type: 'input', name: 'name', message: 'What is your name?' } ]); };

promptUser().then(answers => console.log(answers));

• Notice that the function returns a running of inquire.prompt(), thus returning what it returns, which is a Promise. Just like fetch(), which we covered previously, the Promise will resolve with a .then() method.

• So, here we're calling a function that returns the result of inquire.prompt, which is a Promise. We therefore append the .then() method to the function call, since it returns a Promise, and we put into .then() whatever we wish to take place after the Promise is resolved.

• This allows the function expression to have a single responsibility: to prompt the user. The Promise from inquirer can now be handled by the function call, which helps maintain best practices—in contrast to how callbacks dealt with asynchronous behavior.

[kitchen-boy]

Add profile & project questions:

• Add profile questions:

const promptUser = () => { return inquirer.prompt([ { type: 'input', name: 'name', message: 'What is your name?' }, { type: 'input', name: 'github', message: 'Enter your GitHub Username' }, { type: 'input', name: 'about', message: 'Provide some information about yourself:' } ]); };

• Add the function promptProject() for the project question prompts, as follows:

const promptProject = () => { console.log( Add a New Project ); return inquirer.prompt([ { type: 'input', name: 'name', message: 'What is the name of your project?' }, { type: 'input', name: 'description', message: 'Provide a description of the project (Required)' }, { type: 'checkbox', name: 'languages', message: 'What did you build this project with? (Check all that apply)', choices: ['JavaScript', 'HTML', 'CSS', 'ES6', 'jQuery', 'Bootstrap', 'Node'] }, { type: 'input', name: 'link', message: 'Enter the GitHub link to your project. (Required)' }, { type: 'confirm', name: 'feature', message: 'Would you like to feature this project?', default: false }, { type: 'confirm', name: 'confirmAddProject', message: 'Would you like to enter another project?', default: false } ]); };

• In order to see if the new question types are working properly, we'll need to call the function promptProject().
• Using Promises, we can chain the functions together using the then() method, as shown here:

promptUser() .then(answers => console.log(answers)) .then(promptProject) .then(projectAnswers => console.log(projectAnswers));

• By chaining the function call to the then() method, we can control the sequence of the application's control flow. We only want to prompt users with the project questions after the profile questions.
• In the project answer object, pay attention to the last key value pair. The confirmAddProject key contains the user's reply regarding whether to add more projects. How can we use this info to control the flow of the application?

[kitchen-boy]

Add Multiple Projects

• Modify the <promptProject()> function so that the user can add multiple projects to their portfolio page.
• Need to change the <promptProject()> function to store multiple projects. The project data is currently in the form of the answer object from . The function is only set up for a single answer object.
• Want to store these answer objects at the completion of the question prompts. In JavaScript we have multiple options for object storage, like another object or an array. Let's choose an array, because adding objects to an array is relatively straightforward.

2 ways for object storage: We pick 2nd option.

1. Create a global variable that can store the project data but Global variables, however, can be read and altered by other parts of your program, making them susceptible to changes. A local variable wouldn't work to store multiple projects, because the variable would reset at every function call (even tho' Local variables work better because they're limited in scope, so they can't be affected by other parts of the application. )
2. Have the promptProject() function accept an argument. With the argument option, we could add project data to the argument variable and then call the function with the modified data.

• Change the <promptProject()> function to add a parameter that will store the project data. Add (portfolioData) parameter to the function:

const promptProject = portfolioData => {

• Add the empty array inside the <promptProject()> function after the console log Add a New Project & initialize it:

portfolioData.projects = [];

• *Use an control statement to initialize only if the array does not exist - to guarantee the array is initialized only on the first pass.
• • if the array is set to an empty array in every function call, this would erase all the project data we collected - so we want this expression to occur on the first pass only:

// If there's no 'projects' array property, create one. if (!portfolioData.projects) { portfolioData.projects = []; }

• The previous expression is the data collection system. Once the data has been collected by , you need to add the project data to the array.
• Add a <.then()> to the end of the that's returned by <promptProject()>, after the project questions.
• Add the following code to the callback in the <.then()>:

.then(projectData => { portfolioData.projects.push(projectData); });

• We use the array method <push()> to place the <projectData> from <inquirer> into the new <projects> array we just created.
• To evaluate whether the user wishes to add another project - add a condition that will call the <promptProject(portfolioData)> function when <confirmAddProject> evaluates to <true>.
• Add the following condition after the array <.push()> in the <.then()> callback:

.then(projectData => { portfolioData.projects.push(projectData); if (projectData.confirmAddProject) { return promptProject(portfolioData); } else { return portfolioData; } });

• Starting with the if statement: In this condition, we're evaluating the user response to whether they wish to add more projects.
• This response was captured in the answer object, <projectData>, in the property <confirmAddProject>. If the user wishes to add more projects, then this condition will evaluate to <true> and call the <promptProject(portfolioData)> function.
• If <portfolioData> isn't included as the argument in the function call, a new <projects> array will be initialized, and the existing project data will be lost.
• If the user decides not to add more projects, then the condition will evaluate to <false> and trigger the following statement:

else { return portfolioData; }

• We have to return the <portfolioData> in the <else> statement explicitly so that the object is returned. THIS is a CRITICAL STEP to retrieving the user's answer & building an HTML template.
• Revise the chained function calls at the bottom of <app.js> (i.e., <promptUser().then(answers=>...);>) to this:

promptUser() .then(promptProject) .then(portfolioData => { console.log(portfolioData); });

• Using recursion & conditional statements, you called the project question prompt - allowing the user to determine the number of projects to add to the portfolio webpage.

[kitchen-boy]

9.3.6 Validate Answers:

• Validate user input from all interfaces, e.g. web form or CLI application, to ensure we have the data we need before we start operating on it in the code.
• Validate using <inquirer>:
• This method is a function that returns a Boolean value.
• Make the first question a required answer.
• Add <validate> to the <question> object of the first question in the <promptUser()> function re: the name of the user.

{ type: 'input', name: 'name', message: 'What is your name? (Required)', validate: nameInput => { if (nameInput) { return true; } else { console.log('Please enter your name!'); return false; } } },

• The <validate> method receives an argument.

• This argument is the the user's input, <nameInput>.

• The conditional statement in the function block of the <validate> method: if the condition evaluates to <true>, the validation has passed successfully. if the condition evaluates to <false**>, the user receives a message & is prompted with the same question until an answer is received.

• Add this <validation> property to the following questions to ensure that the user doesn't skip these questions.

• Label the questions as req'd: -- GitHub username -- Project name -- Project description -- Project GitHub link

• Last step: Ask user if they'd like to add an About section. -- Then prompt user for info, but only after they confirm yes.

• Must add a confirmation type question & then ask for the info.

• Add the following confirmation question to the <promptUser()> function just below the GitHub username prompt in the <app.js> file:

{ type: 'confirm', name: 'confirmAbout', message: 'Would you like to enter some information about yourself for an "About" section?', default: true },

Using when method to conditionally prompt a question based on the user's input:

• Add another property to the prompt looking for info about user called <when>. -- this is like the <validate> method used previously, but it passes an object of all of the answers given so far as an object, instead of (for the validate method) passing the value entered for that specific question in as the parameter.
• Edit the existing <about input> to incorporate the <when> property:

{ type: 'confirm', name: 'confirmAbout', message: 'Would you like to enter some information about yourself for an "About" section?', default: true }, { type: 'input', name: 'about', message: 'Provide some information about yourself:', when: ({ confirmAbout }) => { if (confirmAbout) { return true; } else { return false; } } }

• The <inquirer> method automatically passes an object containing the user's answers to the <when> function. -- This allows us to write conditional code based on the answers the user has supplied thus far.

• When the <when> function gets this object, it looks something like this:

{ "name": "lernantino", "github": "lernantino", "confirmAbout": true }

• The user answered: -- "lernantino" to the <name> question -- "Y" to the <confirmAbout> question (the <confirm> question type automatically turns "Y" into <true>, and "N" into <false>.
• We've destructured this object to see how the user answered the <confirmAbout> response. Because the value is Boolean, we can simply return it.

[kitchen-boy]

9.3 Node Package Manager (npm):

Learned the following things:

• Search the npm registry to find stable long-term solutions.

• Install packages from npm and learn the purpose of the <package.json>, <package-lock.json>, and <node_modules> assets.

• Research documentation to find out how to use packages like <inquirer>.

• Chain <inquirer>'s Promises to control the flow of the application when prompting users.

Validate user answers with <inquirer> and conditionally prompt users based on answers.

End of Lesson 3: Code status:

• Can prompt users & capture their answers.

Beginning of Lesson 4: Code status:

• Will render these answers in the HTML template... in an attractive format!