И подключение простого веб-приложения к вашему собственному модулю NPM.
У меня очень занятой ум, и мне нравится создавать свои собственные инструменты, которые помогут мне запомнить свои идеи. Я очень быстро забываю свои идеи. Так что мне нужно найти способ написать их где-нибудь как можно скорее и без особых усилий. И поскольку я знаю много людей с той же проблемой, я хотел поделиться своим последним инструментом, который представляет собой приложение с интерфейсом командной строки, и он действительно полезен, поскольку как разработчик программного обеспечения я провожу весь свой день в командной строке. Мне нужно было что-то быстрое, доступное повсюду и что-то, что казалось бы действительно естественным в использовании. Я считаю, что идею нужно писать так, как она приходит нам в голову.
Инструмент представляет собой просто список цитат, куда мы добавляем цитаты или примечания, которые будут отображаться в веб-приложении или просто доступны через наше приложение CLI. Инструмент работает так:
$quotemap add "The whale has a heart bigger than a house."
И это все. Новое предложение будет добавлено в список и появится на веб-странице.
Его действительно легко использовать, поскольку мне не нужно находиться в определенном каталоге для выполнения команды, я могу использовать ту же консоль, над которой я работаю, и записывать свою новую идею, цитату или заметку. По сути, это модуль NPM, глобально установленный на моем компьютере.
Я могу получить свой список цитат следующим образом:
$quotemap getall
А если мне не хватает вдохновения, получи случайный, просто запустив:
$quotemap
В браузере это выглядит так: (Я выбрал несколько цитат здесь, чтобы проиллюстрировать этот пример)
quoteMap, веб-приложение и приложение CLI
Таким образом, мы можем разделить инструмент на две части: приложение с полным стеком, которое представляет собой веб-приложение, и приложение Node CLI.
Для веб-приложения я использовал Node js, MongoDB, Express и React. И я бесплатно развернул его на Heroku, используя MongoDB Atlas для хранения моих данных. Приложение CLI подключается к веб-приложению с помощью Axios. Нам нужно только затронуть наши конечные точки API, а именно:
GET /quotes GET /random-quote POST /add-quote
Вы можете найти полный код веб-приложения на github.com/pierreportal/quotemap.
В будущей версии я, вероятно, не буду использовать развернутое веб-приложение для установления связи между моим приложением CLI и моей базой данных, поскольку на самом деле я не так часто использую визуальную карту.
Создайте собственный пакет NPM
Для приложения CLI мы начинаем с настройки чистой и простой структуры, а затем генерируем файл package.json с помощью npm init. Мы также можем установить два пакета NPM: Chalk, чтобы немного раскрасить наши журналы, и Axios.
$mkdir quotemap && cd quotemap $mkdir bin lib $touch bin/quotemap.js lib/index.js $npm init -y $npm install chalk axios
Наш проект должен выглядеть так:
quotemap/
|
|--bin/
| |
| --quotemap.js
|
--lib/
| |
| --index.js
|
--package.js
Мы уже можем добавить эти строки в наш package.json:
...
"bin": {
"quotemap": "./bin/quotemap.js"
},
"preferGlobal": true,
...
Наш полный файл должен выглядеть так:
{
"name": "quotemap",
"version": "1.0.0",
"description": "",
"main": "index.js",
"bin": {
"quotemap": "./bin/quotemap.js"
},
"preferGlobal": true,
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.0",
"chalk": "^4.1.0",
}
}
Теперь приступим к написанию нашего модуля. quotemap.js - наш основной скрипт. Это тот, который будет выполняться при запуске наших команд. Поэтому он начинается со строки «#! / Usr / bin / env node».
#! называется шебанг. Это способ выполнения скриптов в Unix. Здесь мы говорим, что наш скрипт должен выполняться с использованием Node js.
#!/usr/bin/env node
const script = require("../lib/index.js");
const cmds = process.argv.splice(process.execArgv.length + 2);
script.executeCmds(cmds);
мы получаем параметры с помощью «process.argv», затем передаем их функции «executeCmds», записанной в нашем lib / index.js файл.
Теперь для файла index.js…
Начнем с импорта наших пакетов. Также рекомендуется добавить строку, чтобы указать тип данных, ожидаемых нашим скриптом.
/**
* @param {string[]} [cmds]
*/
const axios = require("axios");
const chalk = require("chalk");
Итак, у нас есть три разных «действия». добавление цитаты с помощью команды add ‹quote›, получение всех цитат с помощью getall или получение случайной цитаты без параметров. Я считаю полезным создать объект, в котором ключи - это ключевые слова команды, а значения - функция, которую они вызывают.
const options = {
add: (quote) => {}, // axios POST quote to /add-quote
getall: () => {} // axios GET /postes
};
Здесь мы используем Axios:
const options = {
add: (quote) =>
arg
? axios.post(`${domain}/add-quote`, { quote })
.then(() => yayy(`Your new quote "${quote}" has been successfully added!`))
.catch((err) => oops(err.response.data))
: oops("You forgot the quote!"),
getall: () => axios
.get(`${domain}/quotes`)
.then((res) => listAll(res.data))
.catch((err) => oops(err.response.data)),
};
Переменная «домен» - это адрес нашего API / веб-приложения.
И наша основная функция «executeCmds» теперь перенаправит наши команды на нужные функции. Помните, что «cmds» - это массив параметров, например [«add», «Это классная цитата». ] - это параметры из команды $ quotemap add «Это классная цитата». первый параметр - это «действие», а второй - цитата.
const executeCmds = (cmds) => {
const [action, arg] = cmds;
if (!action)
return axios
.get(`${domain}/random-quote`)
.then((res) => yayy(res.data.quote))
.catch((err) => oops(err.response.data));
return options[action]
? options[action](arg)
: oops(`Unnkown command: ${action}`);
};
Я вызываю две функции для регистрации сообщений и ответов, yayy и oops, которые предназначены только для форматирования сообщений об успехах и ошибках. Я люблю давать забавные имена своим переменным и функциям при работе над личными проектами, пока они остаются логичными и легко читаемыми.
const oops = (msg) => console.log(chalk.red(`\n🤭 ${msg}`));
const yayy = (msg) => console.log(chalk.blueBright(`\n💫 ${msg}`));
const listAll = (quotes) => quotes.forEach((quote) =>
yayy(quote.quote));
Наконец, мы можем экспортировать функцию:
exports.executeCmds = executeCmds;
И мы закончили. Теперь мы можем установить наш модуль глобально с помощью:
$npm install -g quotemap
Сейчас я много использую свое приложение CLI. И я буду продолжать улучшать и добавлять функции, делая его простым и очень быстрым в использовании. Я подумываю сделать его доступным, например, с телефона. И добавьте больше конфиденциальности и безопасности. Мне все еще нужно иметь возможность удалять цитаты или редактировать опечатки, но теперь, когда концепция работает, это действительно просто.
