В этом руководстве я хочу помочь вам создать очень быстрый и грязный прототип для сбора отзывов о концепциях интерфейса командной строки, которые вы хотите быстро протестировать, быстро вывести из строя и перейти к следующему решению.

В последние несколько месяцев мне было поручено переработать интерфейс командной строки для одного из наших продуктов в Canonical (Ubuntu), MAAS. Не стесняйтесь ознакомиться с моим прототипом MAAS CLI.

Прежде чем мы начнем, я предполагаю, что на вашем локальном компьютере установлены npm и node.

Моя текущая среда:

node version: v12.16.1
npm version: 6.13.4

В этом руководстве я покажу вам, как создать приложение с интерфейсом командной строки для магазина пузырькового чая под названием macha.

Две основные команды, которые могут выполнять наши пользователи:

  1. Перечислите все в меню:
$> macha list

2. Закажите что-нибудь из меню.

$> macha order

Функции:

У пользователя должен быть выбор: добавлять начинку, выбирать уровень сахара, подавать горячим или холодным и выбирать уровень льда. Результат покажет общую стоимость вашего заказа.

Приступим!

Прежде всего, давайте создадим рабочее пространство и установим несколько пакетов.

Инициализация:

$> mkdir macha && cd macha
$> npm init -y

Ваш результат должен выглядеть так:

{
  "name": "macha",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

После инициализации пакета нам необходимо установить commanderJS, inquirerJS вместе с двумя модулями npm: colors, чтобы добавить цвета в наш интерфейс командной строки, и pad , чтобы добавить отступы к выходам. Это пригодится позже.

$> npm install --save commander inquirer colors pad

Теперь, когда наш проект инициализирован, нам нужно добавить поле bin в файл package.json. В поле bin нам нужно добавить macha, потому что это будет имя нашего приложения в интерфейсе командной строки.

{
  "name": "macha",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin": {
     "macha": "./bin/index.js"
     },
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Добавьте 2 папки в рабочий каталог (bin и lib):

Вам нужно будет создать папку bin и папку lib в вашем рабочем каталоге. Под bin находится index.js, где вы разместите все свои команды и то, как вы хотите их структурировать. В библиотеке вы храните все свои команды, такие как list и order. Эта папка обрабатывает все выходные данные команд. Вам понадобится еще один файл, в котором вы храните все ваши значения, назовем его menu_items.js.

|-macha
 |-bin
   |-index.js
 |-lib
   |-menu_items.js
   |-list.js
   |-order.js
 |-node_modules
 |-package.json

Создавайте элементы в нашем меню menu_items.js:

На этом шаге мы собираемся поместить все элементы нашего меню в одно место menu_items.js. В этом файле нам нужно экспортировать все переменные, чтобы мы могли использовать их в других модулях.

Создайте свой первый вывод команды list.js:

В файле list.js вы импортируете переменную tea из menu_items.js и настройте способ отображения вывода. Я использую pad и colors, чтобы пространство между выходами было легко читаемым.

Создайте команду списка в index.js:

В нашем index.js файле мы определим команду list, поэтому, когда приглашение вызывает команду list, она вызывает файл list.js для отображения вывода.

Теперь попробуем запустить команду с вашего терминала.

В вашем каталоге macha запустите:

~/macha> node bin/index.js

Ваш результат должен выглядеть так:

Создайте правильную подкоманду list:

Давайте создадим правильную подкоманду списка, способом commanderJS. Мы хотим иметь возможность запускать $> macha list из нашей командной строки, поэтому нам нужно создать list как подкоманду с CommanderJS.

Это работает так, что Commander будет анализировать аргументы в program.parse(arguments), в результате чего любые аргументы не используются параметрами программы в массиве program.args.

В приведенном выше примере нам нужно добавить строку Shebang в первую строку (поскольку позже мы сделаем ее глобальной). Затем создайте команду list с помощью Commander. Удобство этой библиотеки в том, что commanderJS создаст для вас аргумент по умолчанию help. Существуют различные варианты и разновидности, которые вы можете выбрать в конкретных опциях commanderJS, где вы можете выбрать, как вы хотите настроить свою команду.

Наконец, добавьте process.agrv в последнюю строку, чтобы Commander мог анализировать вводимые пользователем данные.

Перед запуском давайте установим это приложение CLI глобально, чтобы вы могли получить доступ к этой команде из любого приглашения.

$> npm install -g ./

Теперь вы можете ввести macha list из любого приглашения.

Использование InquirerJS для создания интерактивной подсказки для команды заказа:

Для подкоманды order я покажу вам другой подход. InquirerJS существенно упростил вам создание интерактивной командной строки, он принимает список вопросов, в котором вы можете определить его тип: list rawlist expand checkbox confirm input number и password.

Структура ответов представлена ​​в виде хэша "ключ-значение". Он будет содержать ответ, который вы выберете в подсказке. Также доступно несколько плагинов для более интересных вещей, таких как inquirer-emoji, chalk-pipe, search-list, autocomplete и т. Д.

Для начала вам нужно создать набор вопросов.

В приведенном ниже примере я создал 2 набора вопросов. Первый набор вопросов - это общий вопрос. Однако, если пользователь хочет холодный чай, ему нужно ответить еще на один вопрос, прежде чем увидеть общую цену.

В этом примере inquirer.prompt принимает этот список вопросов и возвращает какPromise, который будет разрешен, когда на все вопросы будут даны ответы.

Поскольку answers, которые я получил из приглашения запрашивающего, имеет тип: String, мне нужно было преобразовать переменную в Float, чтобы я мог суммировать общую цену за чай + топпинг + молоко.

total = parseFloat(answers.tea.split("$")[1]);

Ваш index.js файл теперь будет включать подкоманду order.

Давайте попробуем команду порядок:

$> macha order

Это подводит итог нашему руководству по CommanderJS и InquirerJS.

Если вы хотите клонировать этот проект и поэкспериментировать с ним, вот код для macha-cli: https://github.com/amylily1011/macha-cli

Очки обучения:

  • Когда вы применяете цвета к выходному тексту и одновременно используете PAD, они могут не выровняться.
  • Inquirer имеет настройку цвета по умолчанию, это сложнее изменить. При тестировании убедитесь, что вы сообщили об этом пользователю.
  • Цветной вывод - это хорошая функция, но на самом деле у вашего пользовательского терминала может быть тема, которая не поддерживает ваш цветной вывод. Например, если вы используете обычный синий цвет для текста, он может быть слишком темным и нечитаемым для определенных тем терминала.

Бонусные баллы за модные дополнения:

Если вы хотите создать CLI в стиле со счетчиками и индикаторами выполнения, существуют библиотеки, такие как cli-progress, cli-table, cli-spinner и т. Д., Которые могут сэкономить вам много времени на создание классных вещей.

Я надеюсь, что это будет полезно для UX-специалистов, прототипов и всех, кто разделяет любовь к прототипированию. Не стесняйтесь обращаться по любым вопросам! Удачного прототипирования :).