“This is my 32nd day of participating in the First Challenge 2022. For more details: First Challenge 2022.”

The background,

I wish you to become a distinguished Audi owner!

I just started work at the beginning of the year, because I didn’t send anything before the year, and I didn’t even have a red envelope after the year. I said I had a strong desire to touch fish. Otherwise, how could I live up to the title of the fish expert? So you don’t write any demands, you’re just noodling. What? How to go online? I don’t know how to do, online and so on, very urgent…

It’s ok not to write requirements, but code can’t stop.

The thing is, our company has a platform for the development environment to query the SMS verification code, every day to query the verification code needs the following steps:

  1. Open the platform url;
  2. Log in to your account;
  3. Then enter the SMS verification code query;
  4. Then enter the test number, from theinputSelect or paste in the input history of the
  5. Press Enter again and waitloadingThe end;
  6. Finally, select and copy the text from the page to the clipboard with the mouse;
  7. The last toCV;

This is before operation, then don’t know what this cerebral thrombus in the late platform sent complications, he has added an option on the business process, and no way to customize the default business, every open is somebody else’s business, more pit dad, choose the business it is to refresh the page, the global internal tools to understand all understand, slowly don’t don’t…

What about my quick temper (never when it comes to fishing)? Praise the product and development of this platform are very smart (MDZZ)?

I’ve done this many times, but it doesn’t make my captchas any faster. So the solution is to touch the fish!

When we connected to the open-API of this platform during the E2E test, we had an idea that why not write a command line tool to obtain the verification code through Terminal, so that we could bypass these GUI interfaces and use the saved time to do fishing.

Second, the demand for

Given the above background, the requirements are already clear, but how can an aspiring fishing expert send a request using Axios?

  1. Let me write a global oneCLIOrder, we call himjoymaxJoymax, joymaxZ300, last time to write a tool name rs7, derived from Audi RS7), after the call can be pulled from the tool platform verification code;
  2. Get the verification code and write it directly toSystem clipboard, can be directlyCV (CMD + V)Go to the
  3. The verification code can be pulled by the mobile phone number, or you can call the command in advance to set the alias for the mobile phone number, for example, I put7384311234Set totf;
  4. The second step requires a need to set the alias, so you need a command to set the alias, and of course a place to save it.
  5. Our team internal business, roll up, of course, must be able to reuse to other people’s business, so the command to support the configuration of business type and other parameters;

Three, technical preparation

Let’s make a technical selection first, I choose TS + ESbuild, selection process:

  1. Raise your right hand;
  2. Pat yourself three times on the forehead;

We recommend using TS to write Node.js. It is not convenient to debug using TS to write Node.js. We need to compile it into JS in real time. As for the use of esbuild, it is the opportunity for manufacturing. Our company uses Webpack to package our business, and using esbuild means creating opportunities without opportunities.

3.1 Commands for Global Installation

This is easy to solve, if you have read my previous come on, a quick Git submission tool, you will know the answer. To install the command globally, you only need to configure the bin field in package.json correctly. The bin field corresponds to the executable file as follows:

{
  "name": "some-smscode"."version": "0.0.4"."description": "a cmd for challenge code"."main": "bin/joymax.js"."scripts": {
    "test": "bin/joymax.js"
  },
  "bin": {
    "joymax": "bin/joymax.js" / / here
  },
  "keywords": [
    "challenge code"]."author": "TouchFish"."license": "ISC"."dependencies": {
    "@xxxxx/some-tasks": "^ 1.0.3"."commander": "^ 9.0.0"
  },
  "devDependencies": {
    "chalk": "^ 5.0.0"."esbuild": "^ 0.14.21"}}Copy the code

When some-smscode is installed by NPM I -g some-smscode, joyMax can be executed globally, as follows:

$ joymax --help
Copy the code

3.2 Command Design

3.2.1 Run the q command to Query the Verification Code

$joymax Q 7384311234 $joymax Q MoyuCopy the code

3.2.2 Adding the alias add command

  • The parameters are as follows:
    • 2.1 - n - namePhone Number Alias
    • 2.2 - p - the phoneThe phone number
$ joymax add -n moyu -p 7384311234
Copy the code

3.2.3 Modifying the configuration Command CCFG

  • Parameters are as follows (this part of the parameter is confidential, I dare to write a few blind) :
    • 3.1 -f, --fidThe platformfid
    • 3.2 -k, --keyThe platformkid
    • 3.3 -a, --appidThe platformappid
$ joymax ccfg -f 250
$ joymax ccfg -a f**k
Copy the code

3.2.4 Viewing the ls command

We currently write all the configuration into the CFG. Json of this package. There are some hidden dangers in doing so.

NPM config ls is the same as a command, listing CFG. Json file content can be

$ joymax ls
Copy the code

3.3 Parsing Commands and Parameters

Here we use the open source command line support tool Commander, this package is a good thing, it can register commands, parsing command line arguments.

Next, we’ll briefly describe a common usage in a production environment. This is simple and crude, but it is recommended that you check the official documentation.

3.3.1 Command Organization

A command corresponds to a file, where the main command is joymax, subcommands joymax Q, joymax add, joymax CCFG, joymax ls;

The name of the main command prefixes the file of the subcommand, so the final command has the following files:

  1. The correspondingjoymaxOf the commandjoymax.js, which acts as an entry point where the rest of the subcommands are registered;
  2. The correspondingjoymax add 的 joymax-add.js;
  3. The correspondingjoymax qThe ` joymax – q.j s;
  4. The correspondingjoymax ccfg 的 joymax-ccfg.js;
  5. The correspondingjoymax ls 的 joymax-ls.js;

Of course, these JS files are all executable files and are compiled from TS, which is a later story;

3.4 esbuild

Esbuild is a new packaging tool, API form call, ts support, relatively simple;

3.4.1 track installation esbuild

$ npm install esbuild --save-dev 
Copy the code

The example configuration of 3.4.2 esbuild is as follows

#! /usr/bin/env node
let fs = require('fs');

let child_process = require('child_process');

// Run command, this method from Webpack, I love this method
const runCommand = async (cmd, args, needReturn = false) = > {return new Promise((resolve, reject) = > {
    if(! needReturn) {let execCmd = child_process.spawn(cmd, args, {
        shell: true.stdio: 'inherit'
      });
      execCmd.on('error', reject);
      execCmd.on('exit'.(code) = > +code === 0 ? resolve(code) : reject(code))
    } else {
      child_process.exec(cmd, args, (err, stdo, stde) = > {
        if(err && err.code ! = =0) reject({ code: err.code, data: null })
        else resolve({ code: 0.data: stdo })
      })
    }
  })
};

let esbuild = require('esbuild');

// Entry file name
let entries = [
  'joymax'.'joymax-q'.'joymax-add'.'joymax-ccfg'.'joymax-ls'
];

let p = (item) = > `./src/${item}.ts`

esbuild.build({
  entryPoints: entries.map(p),
  platform: 'node'.target: 'es2015'.bundle: true.banner: {
    js: '#! /usr/bin/env node' // Add a script parsing header to each output file to tell the system that the script is parsed by Node
  },
  outdir: 'bin'
  // minify: true, // compress
  // sourcemap: true,
}).then(() = > {
  // This callback is executed at the end of the package, where we grant +x executables to all output JS files
  entries.forEach(async (item) => {
    await runCommand(`chmod +x ./bin/${item}.js`);
    console.log(`chmod + x ${item}.js done! `)});console.log('Packing done! ')
}).catch(() = > process.exit(1));
Copy the code

3.5 Copying to the Clipboard

The pbcopy command copies everything written to std.in

I googled the cross-platform clipboard library, but it was a bit complicated, so I chose to skip 😂. So I’m using the MacOS native clipboard command pbcopy; Simple and crude, one line of command.

However, this is no longer cross-platform, but only for MacOS; Of course, in order to reduce the loss, I will output the final verification code to the command line, for the user to copy;

$ echo 010021 | pbcopy
Copy the code

Four,

This essay describes the background, analyzes the requirements, and finally prepares the technical points for implementing these functions:

  1. package.json 的 binField with go global install;
  2. Command design andcommanderOrganize commands and parse command parameters;
  3. esbuildPackage script;
  4. Implementation of copy to clipboard;

Finally, I wish you all a prosperous New Year, and I wish you to become a distinguished Audi owner.