В этом руководстве я хочу помочь вам создать очень быстрый и грязный прототип для сбора отзывов о концепциях интерфейса командной строки, которые вы хотите быстро протестировать, быстро вывести из строя и перейти к следующему решению.
В последние несколько месяцев мне было поручено переработать интерфейс командной строки для одного из наших продуктов в Canonical (Ubuntu), MAAS. Не стесняйтесь ознакомиться с моим прототипом MAAS CLI.
Прежде чем мы начнем, я предполагаю, что на вашем локальном компьютере установлены npm и node.
Моя текущая среда:
node version: v12.16.1 npm version: 6.13.4
В этом руководстве я покажу вам, как создать приложение с интерфейсом командной строки для магазина пузырькового чая под названием macha.
Две основные команды, которые могут выполнять наши пользователи:
- Перечислите все в меню:
$> 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-специалистов, прототипов и всех, кто разделяет любовь к прототипированию. Не стесняйтесь обращаться по любым вопросам! Удачного прототипирования :).