So baust du deinen Lebenslauf auf npm

Erst gestern hat Ali Churcher eine clevere Methode geteilt, wie man einen Lebenslauf mit einem CSS Grid Layout erstellt. Darauf aufbauend möchten wir eine Vorlage erstellen, die wir jederzeit über die Kommandozeile aufrufen können. Das Coole daran ist, dass du sie mit nur einem Befehl ausführen kannst.

Ich weiß, dass die Kommandozeile einschüchternd sein kann, und ja, wir werden uns ein wenig mit Node.js beschäftigen. Wir werden die Dinge in kleine Schritte aufteilen, um das Nachvollziehen zu erleichtern.

Wie bei vielen Projekten ist ein wenig Setup erforderlich. Beginne damit, einen leeren Ordner in deinem Arbeitsverzeichnis zu erstellen und ein Projekt mit npm oder Yarn zu initialisieren.

mkdir your-project && cd "$_"

## npm
npm init

## Yarn
yarn init

Wie auch immer du "dein-projekt" benennst, so wird dein Paket in der npm-Registrierung heißen.

Der nächste Schritt ist die Erstellung einer Einstiegsdatei für die Anwendung, in diesem Fall index.js. Wir benötigen auch einen Ort, um Daten zu speichern, also erstelle eine weitere Datei namens data.json. Du kannst sie von der Kommandozeile aus öffnen, sobald du sie erstellt hast.

touch index.js && touch data.json

Erstellen der Kommandozeilenschnittstelle

Der große Vorteil, den wir durch die Erstellung dieser App erzielen, ist, dass sie uns eine semi-visuelle Möglichkeit bietet, einen Lebenslauf direkt in der Kommandozeile zu erstellen. Dazu benötigen wir ein paar Dinge.

• Das Objekt zur Speicherung der Daten
• Eine interaktive Kommandozeilenschnittstelle (die wir mit Inquirer.js erstellen werden)

Beginnen wir mit dem ersten Punkt. Öffne data.json und füge Folgendes hinzu.

{
  "Education": [
    "Some info",
    "Less important info",
    "Etc, etc."
  ],
  "Experience": [
    "Some info",
    "Less important info",
    "Etc, etc."
  ],
  "Contact": [
    "A way to contact you"
  ]
}

Dies ist nur ein Beispiel, das die Objekte und Schlüssel definiert, die für jeden Schritt in der Schnittstelle verwendet werden. Du kannst es gerne an deine eigenen Bedürfnisse anpassen.

Das ist das Erste, was wir brauchten. Das Zweite ist die interaktive Schnittstelle. Inquirer.js wird 90% davon übernehmen. Lies ruhig mehr über dieses Paket, denn du kannst fortgeschrittenere Schnittstellen erstellen, sobald du mit den Feinheiten vertrauter bist.

yarn add inquirer chalk

Was ist das chalk Ding? Es ist eine Bibliothek, die uns hilft, unsere Terminalausgabe anzupassen, indem sie Farbe und Stil hinzufügt, um die Erfahrung zu verbessern.

Jetzt öffnen wir index.js und fügen folgenden Code ein.

#!/usr/bin/env node

"use strict";

const inquirer = require("inquirer");
const chalk = require("chalk");
const data = require("./data.json");

// add response color
const response = chalk.bold.blue;

const resumeOptions = {
  type: "list",
  name: "resumeOptions",
  message: "What do you want to know",
  choices: [...Object.keys(data), "Exit"]
};

function showResume() {
  console.log("Hello, this is my resume");
  handleResume();
}

function handleResume() {
  inquirer.prompt(resumeOptions).then(answer => {
    if (answer.resumeOptions == "Exit") return;

    const options = data[`${answer.resumeOptions}`]
    if (options) {
      console.log(response(new inquirer.Separator()));
      options.forEach(info => {
        console.log(response("|   => " + info));
      });
      console.log(response(new inquirer.Separator()));
    }

    inquirer
      .prompt({
        type: "list",
        name: "exitBack",
        message: "Go back or Exit?",
        choices: ["Back", "Exit"]
      }).then(choice => {
        if (choice.exitBack == "Back") {
          handleResume();
        } else {
          return;
        }
      });
  }).catch(err => console.log('Ooops,', err))
}

showResume();

Zoikes! Das ist ein großer Codeblock. Zerlegen wir ihn ein wenig, um zu erklären, was passiert.

Oben in der Datei importieren wir alle notwendigen Dinge, die zum Ausführen der App benötigt werden, und legen die Farbstile mit der Chalk-Bibliothek fest. Wenn du dich mehr für Farben und Anpassungen interessierst, schau dir die Chalk-Dokumentation an, denn du kannst ziemlich kreativ werden.

const inquirer = require("inquirer");
const chalk = require("chalk");
const data = require("./data.json");

// add response color
const response = chalk.bold.blue;

Das Nächste, was dieser Code tut, ist die Erstellung unserer Liste von Lebenslaufoptionen. Das sind die Optionen, die angezeigt werden, nachdem wir unseren Befehl im Terminal eingegeben haben. Wir nennen sie resumeOptions, damit wir genau wissen, was sie tut.

const resumeOptions = {
  type: "list",
  name: "resumeOptions",
  message: "What do you want to know",
  choices: [...Object.keys(data), "Exit"]
};

Wir interessieren uns hauptsächlich für das Feld choices, da es die Schlüssel aus unserem data -Objekt enthält und uns die Möglichkeit gibt, die App bei Bedarf zu "beenden".

Danach erstellen wir die Funktion showResume(), die unsere Hauptfunktion sein wird, die direkt nach dem Start ausgeführt wird. Sie zeigt eine Art Willkommensnachricht und ruft unsere Funktion handleResume() auf.

function showResume() {
  console.log("Hello, this is my resume");
  handleResume();
}

OK, nun zur wichtigsten Funktion: handleResume(). Der erste Teil ist eine bedingte Prüfung, um sicherzustellen, dass wir die App nicht beendet haben und um die registrierten Optionen aus unserem Datenobjekt anzuzeigen, wenn alles in Ordnung ist. Mit anderen Worten, wenn die gewählte Option Exit ist, beenden wir das Programm. Andernfalls rufen wir die Liste der verfügbaren Optionen unter dem gewählten Schlüssel ab.

Sobald die App bestätigt hat, dass wir nicht beenden, erhalten wir answer.resumeOptions, was, wie du vielleicht erraten hast, die Liste der Abschnitte ausgibt, die wir in der Datei data.json definiert haben. Die von uns definierten Abschnitte waren Ausbildung, Berufserfahrung und Kontakt.

Das bringt uns zu den Inquirer.js-Sachen. Es ist vielleicht am einfachsten, wenn wir diese Teile auflisten.

Hast du die Funktion new inquirer.Separator() in der Optionsausgabe bemerkt? Das ist eine Funktion von Inquirer.js, die einen visuellen Trenner zwischen Inhalten bereitstellt, um die Dinge ein wenig aufzuteilen und die Schnittstelle leichter lesbar zu machen.

Wir zeigen also die Liste der Optionen an! Jetzt müssen wir einen Weg schaffen, um zum vorherigen Bildschirm zurückzukehren. Dazu erstellen wir einen weiteren inquirer.prompt, in den wir ein neues Objekt übergeben, diesmal aber nur mit zwei Optionen: Beenden und Zurück. Er gibt uns ein Promise mit Antworten zurück, die wir verarbeiten müssen. Wenn die gewählte Option Back ist, rufen wir handleResume() auf, was bedeutet, dass wir unseren Hauptbildschirm mit den Optionen wieder öffnen; wenn wir Exit wählen, beenden wir die Funktion.

Zuletzt fügen wir die Catch-Anweisung hinzu, um mögliche Fehler abzufangen. Gute Praxis. :)

Veröffentlichung auf npm

Glückwunsch! Versuche, node index.js auszuführen, und du solltest die App testen können.

Das ist alles schön und gut, aber es wäre schöner, wenn es ohne jedes Mal im Arbeitsverzeichnis sein zu müssen, ausgeführt werden könnte. Das ist viel einfacher als die Funktionen, die wir uns gerade angesehen haben.

1. Registriere ein Konto auf npmjs.com, falls du noch keins hast.
2. Füge einen Benutzer zu deiner CLI hinzu, indem du npm adduser ausführst.
3. Gib den Benutzernamen und das Passwort ein, das du für die Registrierung des npm-Kontos verwendet hast.
4. Gehe zu package.json und füge folgende Zeilen hinzu.

   "bin": {
     "your-package-name": "./index.js"
   }

5. Füge eine Datei README.md hinzu, die auf der npm-Seite der App angezeigt wird.
6. Veröffentliche das Paket.

npm publish --access=public

Jedes Mal, wenn du das Paket aktualisierst, kannst du diese auf npm hochladen. Lies mehr über npm-Versioning hier.

npm version patch // 1.0.1
npm version minor // 1.1.0
npm version major // 2.0.0

Und um die Updates auf npm hochzuladen.

npm publish

Lebenslauf-Magie!

Das ist es! Jetzt kannst du die Magie erleben, indem du npx dein-paket-name in die Kommandozeile tippst und deinen Lebenslauf direkt dort erstellst. Übrigens, npx ist der Weg, Befehle auszuführen, ohne sie lokal auf deinem Rechner zu installieren. Es ist automatisch für dich verfügbar, wenn du npm installiert hast.

Das ist nur eine einfache Terminal-App, aber wenn du die Logik dahinter verstehst, kannst du erstaunliche Dinge erschaffen, und das ist dein erster Schritt dorthin.

Quellcode

Viel Spaß beim Codieren!