Wir von QUIKK Software entwickeln Web- und Desktopanwendungen, mobile Apps und E-Commerce-Lösungen. Außerdem bieten wir Ihnen unsere Unterstützung bei der Planung, Konzeption und Umsetzung Ihrer IT- und Softwareprojekte an.

Individuelle Softwareentwicklung und mobile Apps für Hannover.

Stadt Hannover Logo

Es ist soweit! Dein WooCommerce/Wordpress Webshop läuft schon seit einiger Zeit, aber nun soll es endlich ein neuer Webshop mit modernen Webtechnologien sein, welcher endlich die lang ersehnte Individualität, sowie Konfigurations- und Funktionalitätsfreiheit zulässt.  
Es kommt schnell die Frage auf: wie transferiere ich meine Daten von WooCommerce/Wordpress auf meinen neuen Webshop? Und noch wichtiger: Wie kann ich Daten wie Produktbilder **sinnvoll** sichern?

Dieser Post soll Dir zeigen, wie Du sämtliche Produktinformationen deines Webshops im JSON-Format, sowie **alle** dazugehörigen Bilder in einer sinnvollen Ordner- und Dateistruktur speichern kannst. 

Was Du dafür benötigst:
- den Zugang zu Deinem Wordpress Admin-Dashboard
- Node.js

### Schritt 1: Erzeuge WooCommerce API Consumer und Secret Key
Da WooCommerce für Deine eigene Seite eine leicht zugängliche Schnittstelle bereit stellt, ist dieser Schritt recht einfach.
- Navigiere in dein altbekanntes Wordpress Admin-Dashboard (yoursite.com/wp-admin) und wähle den Menüpunkt "WooCommerce"
- Wähle den Submenüpunkt "Einstellungen"
- Wähle den Tabmenüpunkt "Erweitert"
- Wähle den Subtabmenüpunkt "REST-API"
- Drücke den Knopf "Schlüssel hinzufügen"
- Füge eine kurze Beschreibung hinzu, wähle einen Benutzer aus und verwalte die Berechtigungen der zu generierenden Zugangsberechtigungen (für das simple sichern der Daten reicht die Berechtigung **lesen**)
- Du hast mit diesen Daten nun Zugriff auf die WooCommerce Schnittstelle deines Webshops. Bewahre diese Daten sicher auf, leichtsinnig geteilte Zugangsdaten können großen Schaden verursachen.

### Schritt 2: Installiere Node.js
Für den nächsten Schritt wird die JavaScript Laufzeitumgebung Node.js benötigt. Node.js kannst Du schnell und einfach [hier](https://nodejs.org/en/download/)  herunterladen. Die Installation ist ebenso einfach.

### Schritt 3: Schreibe ein Node.js Skript für die Datensicherung

In diesem Beispiel wird die auszuführende Skriptdatei `backup.js` genannt.

Jegliche Bezeichnungen, welche in Diamantoperatoren (`<>`) umschlossen sind, sind mit gültigen Daten auszutauschen.

Folgende Module werden benötigt:
```javascript
const axios = require("axios");
const fs = require("fs");
const outputLocation = require("path").resolve(__dirname, "wc_backup.json");
```
Nachgehende Konstanten und globale Variablen werden verwendet:
```javascript
const CONSUMER_KEY = "<WOOCOMMERCE_CONSUMER_KEY>";
const CONSUMER_SECRET = "<WOOCOMMERCE_CONSUMER_SECRET>";
const DIR = "./imagebackup";
const PERCENT_MULTIPLIER = 100;
const PRODUCTS_PER_PAGE = 100;
let GLOBAL_DOWNLOAD_COUNTER = 0;
let IMAGE_COUNTER = 0;
```

Die Funktion `downloadImage` lädt ein Bild über die gegebene URL herunter und speichert diese im Verzeichnis `imagebackup`:
```javascript
const downloadImage = async (url, path) => {
  const writer = fs.createWriteStream(path);

  const response = await axios.get(url, { responseType: "stream" });

  await response.data.pipe(writer);

  return new Promise((resolve, reject) => {
    writer.on("finish", resolve);
    writer.on("error", reject);
  });
};
```

Die Funktion `createJSONBackup` erzeugt eine Backup-Datei deiner WooCommerce Produkte im `JSON`-Format:
```javascript
const createJSONBackup = () => {
  return new Promise(async (resolve, reject) => {
    let products = [];
    let productsPerPageCount = 0;
    let page = 1;
    do {
      const res = await axios.get(
        `https://<yoursite.com>/wp-json/wc/v3/products?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}&per_page=${PRODUCTS_PER_PAGE}&page=${page}`
      );
      productsPerPageCount = Object.keys(res.data).length;
      for (var i = 0; i < productsPerPageCount; i++) {
        products.push(res.data[i]);
      }
      page++;
    } while (productsPerPageCount > 0);

    fs.writeFile(
      outputLocation,
      JSON.stringify(products, null, 4),
      function (err) {
        if (err) {
          console.log(err);
          reject(err);
        } else {
          console.log("JSON saved to " + outputLocation);
          resolve(outputLocation);
        }
      }
    );
  });
};
```

Die Funktion `createImagesBackup` lädt alle Bild-URLs aus Deiner Backup-Datei herunter und speichert diese in einem Ordner, welche nach der spezifischen Produkt ID benannt ist. So kannst Du später die Relation zwischen einem Bilderordner und einem Eintrag der Backup-Datei herstellen:
```javascript
const createImagesBackup = async () => {
  const raw = fs.readFileSync("./wc_backup.json");
  const products = JSON.parse(raw.toString());
  const dir = "./imagebackup";

  products.forEach((product) => product.images.forEach(() => IMAGE_COUNTER++));

  fs.mkdirSync(dir, { recursive: true });

  products.forEach(async (product, i) => {
    fs.mkdirSync(DIR + `/${product.id}`, { recursive: true });
  });

  for await (const product of products) {
    for await (const image of product.images) {
      const path = DIR + `/${product.id}/${image.id}.jpeg`;
      console.log("Download image: ", image.id);
      await downloadImage(image.src, path).catch(() => {
        GLOBAL_DOWNLOAD_COUNTER++;
        console.log(
          "Download rejected - ",
          (GLOBAL_DOWNLOAD_COUNTER / IMAGE_COUNTER) * PERCENT_MULTIPLIER,
          "%"
        );
      });
      GLOBAL_DOWNLOAD_COUNTER++;
      console.log(
        "Downloaded image - ",
        (GLOBAL_DOWNLOAD_COUNTER / IMAGE_COUNTER) * PERCENT_MULTIPLIER,
        "%"
      );
    }
  }
};
```

Der folgende Code führt das Skript aus:
```javascript
const promise = createJSONBackup();
Promise.resolve(promise).then(() => createImagesBackup());
```

Das Skript kann über ein Terminal mit dem Befehl `node backup.js` ausgeführt werden.

![Wordpress/WooCommerce Backup Fortschritt: Ansicht im Terminal](https://res.cloudinary.com/quikk/image/upload/v1615455520/woocommerce_backup_progress_87bda630ac.png)

Je nachdem, wie viele Dateien gesichert werden und wie schnell Deine Internetverbindung ist, kann das Sichern deiner Daten mehrere Stunden dauern.

Schlussendlich liegen Deine Bilder im Verzeichnis `imagebackup` wie folgt vor:

![wordpress-image-backup-directory.png](https://res.cloudinary.com/quikk/image/upload/v1615455846/wordpress_image_backup_directory_263166baf8.png)

Das war's! Deine Backup-Datei `wc_backup.json` und Dein Bilderverzeichnis `imagebackup` sind bereit für die weitere Verwendung.

Den Code findest Du auch auf [GitHub](https://github.com/quikk-software/woocommerce-image-backup).






small_wordpress-image-backup-directory.png

thumbnail_wordpress-image-backup-directory.png

wordpress-image-backup-directory.png

WordPress: Vollständige WooCommerce Datensicherung inkl. Bilder 

Dieser Post behandelt das Einbinden des npm Moduls [`react-image-crop`](https://www.npmjs.com/package/react-image-crop) in eine React/Next.js Applikation.

Im Verlaufe der Einbindung des Moduls in eines unserer Kundenprojekte sind einige unerwartete Probleme aufgetreten, weshalb dies für mich Anlass genug ist, diesen Post zu verfassen.

### Welche Probleme sind aufgetreten?
Die Doku des Moduls verspricht eine schnelle & einfache Einbindung in die eigene App, trotz der vielen und ausführlichen Code-Beispiele wollte die Einbindung aber auf Anhieb nicht klappen.
Häufig aufgetretene Fehler waren beispielsweise falsche Seitenverhältnisse im Ausgabebild oder gänzlich falsch ausgeschnittene Bereiche von Bildern. Auch die Initialisierung des Image Croppers war mit Fehlern verbunden, da laut Doku zwar die Einheiten '%' und 'px' akzeptiert werden sollen, reell aber nur prozentuale Werte unter der Haube verwendet werden, weshalb die Pixelwerte des Ausgabebildes eigentlich die prozentualen Werte des Croppings widerspiegelten und die Bilder daher stark gestreckt oder gestaucht waren.

### Die Lösung
Nach einer Weile des Testens und Ausprobierens, sowie der Evaluation lag die Lösung des Problems vor: Es mussten fälschlicherweise prozentual berechnete Werte des Moduls durch die eigentlichen Pixelwerte ersetzt werden. Hierzu habe ich eine Hilfsfunktion geschrieben:

```javascript
const backToPixel = (value, dimensionSize) => {
    return Math.round((value / 100) * dimensionSize);
};
```

Diese Funktion habe ich im vorgegebenen [Codebeispiel](https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o) an den nötigen Stellen eingesetzt. Das folgende Beispiel enthält neben dem Modul `react-image-crop` außerdem die Module `antd` und `@antd-design/icons`:

```javascript
import { Button, Row, Col, Card } from "antd";
import { LoadingOutlined } from "@ant-design/icons";
import React, { useState, useCallback, useRef, useEffect } from "react";
import ReactCrop from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";

function getImageDimensions(file) {
  return new Promise(function (resolved, rejected) {
    var i = new Image();
    i.onload = function () {
      resolved({ w: i.width, h: i.height });
    };
    i.src = file;
  });
}

export default function ImageCrop({
  base64,
  setBase64,
}) {
  const [isLoading, setIsLoading] = useState(true);
  const [imageWidth, setImageWidth] = useState(0);
  const [imageHeight, setImageHeight] = useState(0);
  const [crop, setCrop] = useState({});
  const [completedCrop, setCompletedCrop] = useState(null);

  const imgRef = useRef(null);
  const previewCanvasRef = useRef(null);

  const onLoad = useCallback((img) => {
    imgRef.current = img;
  }, []);

  useEffect(() => {
    const setImageCropDimensions = async () => {
      const { w, h } = await getImageDimensions(base64);
      const c = { width: 100, height: 100, x: 0, y: 0 };
      setImageWidth(w);
      setImageHeight(h);
      setCrop(c);
      setIsLoading(false);
    };
    setImageCropDimensions();
  }, [base64]);

  useEffect(() => {
    if (!completedCrop || !previewCanvasRef.current || !imgRef.current) {
      return;
    }

    const image = imgRef.current;
    const canvas = previewCanvasRef.current;
    const crop = completedCrop;

    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    const ctx = canvas.getContext("2d");
    const pixelRatio = window.devicePixelRatio;

    canvas.width = backToPixel(crop.width * pixelRatio, imageWidth);
    canvas.height = backToPixel(crop.height * pixelRatio, imageHeight);

    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
    ctx.imageSmoothingQuality = "high";

    ctx.drawImage(
      image,
      backToPixel(crop.x * scaleX, imageWidth),
      backToPixel(crop.y * scaleY, imageHeight),
      backToPixel(crop.width * scaleX, imageWidth),
      backToPixel(crop.height * scaleY, imageHeight),
      0,
      0,
      backToPixel(crop.width, imageWidth),
      backToPixel(crop.height, imageHeight)
    );
  }, [completedCrop]);

  const backToPixel = (value, dimension) => {
    return Math.round((value / 100) * dimension);
  };

  const toBase64 = (file) =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
    });

  function generateBase64(canvas, crop, setBase64) {
    if (!crop || !canvas) {
      return;
    }

    canvas.toBlob(
      async (blob) => {
        const base64 = await toBase64(blob);
        setBase64(base64);
        setIsLoading(true);
        setImageWidth(0);
        setImageHeight(0);
        setCrop({});
        setCompletedCrop(null);
      },
      "image/png",
      1
    );
  }

  return isLoading ? (
    <LoadingOutlined />
  ) : (
    <div className="app" style={{ height: "100%" }}>
      <Row style={{ height: "100%" }} gutter={[16, 16]}>
        <Col xs={12} style={{ height: "100%" }}>
          <ReactCrop
            src={base64}
            onImageLoaded={onLoad}
            crop={crop}
            onChange={(c) => setCrop(c)}
            onComplete={(c) => setCompletedCrop(c)}
            style={{ height: "100%" }}
          />
        </Col>
        <Col xs={12}>
          <Card title="Vorschau">
            <canvas
              ref={previewCanvasRef}
              style={{
                width: `${Math.round(
                  backToPixel(completedCrop?.width, imageWidth) ?? 0
                )}px`,
                height: `${Math.round(
                  backToPixel(completedCrop?.height, imageHeight) ?? 0
                )}px`,
              }}
            />
          </Card>
        </Col>
        <Col xs={24} className="d-flex justify-content-end">
          <Button
            onClick={() =>
              generateBase64(previewCanvasRef.current, completedCrop, setBase64)
            }
            type="primary"
          >
            Bild zuschneiden
          </Button>
        </Col>
      </Row>
    </div>
  );
}
```

large_crop-image-example.png

medium_crop-image-example.png

small_crop-image-example.png

thumbnail_crop-image-example.png

crop-image-example.png

Image Cropping: react-image-crop in Applikationen einbinden

Dieser Artikel behandelt den Dateitransfer per SFTP-Protokoll über Serverless Functions von Next.js.

Auf Grund weniger ausführlicher Anleitungen im WWW, wie mit Hilfe der Serverless Functions von Next.js Dateien per SFTP-Protokoll an einen entsprechenden Server gesendet werden können, folgt hier nun meine Lösung.

## Das Problem
Next.js ermöglicht mit Hilfe der standardmäßig verfügbaren Serverless Functions die Entwicklung eigener APIs, ohne hierfür auf externe (Express) Server ausweichen zu müssen.
Hierbei ist es ebenfalls möglich, per `POST`-Request größere Dateien an eine API Route zu schicken, welche diese dann verarbeitet.
Wie der Name schon impliziert, sind o.g. Funktionen `serverless`, weshalb üblicherweise verfügbare Speicherkapazitäten und Read/Write/Delete Operationen entweder stark eingeschränkt oder gar nicht verfügbar sind.
Wenn nun eine Datei per `POST`-Request an eine API Route gesendet wird, kann die Datei zum Beispiel nicht mit Hilfe des Filesystem-Moduls `fs` explizit gespeichert werden. Für die weitere Verarbeitung und das Versenden der Datei per SFTP-Protokoll heißt dies, dass kein relativer Pfad zu der Datei auf dem Server vorliegt, obwohl dieser notwendig ist.

## Die Lösung
Die Implementierung sieht folgende Dateistruktur des Projekts vor:

```
/root
- /pages
- - /api
- - - /sftp
- - - - index.js
- - _app.js
- - index.js
- /public
- /styles
- .env
```

### Implementierung des Clients
Auf Client-Seite ist repräsentativ die simple Implementierung einer automatischen Dateigenerierung und das Versenden dieser mittels dem Modul `axios` vorgesehen:

```
/**
*  index.js
*/
import React from "react";
import axios from "axios";

export default function Home() {
  const uploadFile = async (e) => {
    const file = new File(
      [
        "QUIKK Software\n\n",
        "Übertragung von Dateien per SFTP und Serverless Functions"
      ],
      "testFile.txt",
      {
        type: "text/plain",
      }
    );
    const formData = new FormData();

    formData.append("testFile", file);

    const data = await axios.post("/api/sftp", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
  };

  return (
    <>
      <button onClick={uploadFile}>UPLOAD</button>
    </>
  );
}

```

### Implementierung der Serverless Functions
Nach einiger Zeit des Ausprobierens und der Einsicht, dass auf Grund der Serverless Functions keine relativen Pfade zu Dateien feststellbar sind, lag die Annahme nahe, dass für eine adäquate Lösung auf eine komplizierte externe Lösung ausgewichen werden musste.
Nach einer letzten Recherche zu Gunsten der deutlich besseren Lösungen mit Serverless Functions, stieß ich auf diesen [Stack Overflow Eintrag](https://stackoverflow.com/questions/60465564/create-upload-files-api-in-next-js).

`formidable` ist ein Modul zum Einlesen von `FormData` aus `POST`-Requests, welche neben den Inhalten der `FormData` auch einen **temporären Pfad** zu den nun auf dem Server befindlichen Dateien vorhält.

Wie bereits beschrieben bezieht sich diese Lösung auf Next.js. Ein Einstieg zu Next.js kann [hier](https://nextjs.org/) gefunden werden.

Folgende Module werden benötigt:

```
import { IncomingForm } from "formidable";
import fs from "fs";
import { Client } from "ssh2";
require("dotenv").config();
```

Zu aller erst muss die API Route `api/stfp/index.js` konfiguriert werden, hierbei wird das Attribute `bodyParser` auf `false` gesetzt, um stattdessen `formidable` das Einlesen des `POST`-Requests zu ermöglichen.

```
export const config = {
  api: {
    bodyParser: false,
  },
};
```

Das folgende Code Beispiel zeigt eine API Route ohne Funktionalität:

```
export default async (req, res) => {
  const { method } = req;
  switch (req.method) {
    case "POST":
      try {
        /* CODE HERE */
      } catch (error) {
        console.error(error);
        res.status(409).json({
          error,
        });
      }
      break;
    default:
      res.setHeader("Allow", ["POST"]);
      res.status(405).send(`Method ${method} Not Allowed`);
      break;
  }
};
```

Um mit `formidable` den `POST`-Request einlesen zu können, kann folgende `Promise` basierende Funktion genutzt werden:

```
const data = await new Promise((resolve, reject) => {
  const form = new IncomingForm();
  form.parse(req, (err, fields, files) => {
    if (err) return reject(err);
    resolve({ fields, files });
  });
});
```

Nun folgt auch schon der verschlüsselte Dateitransfer mit Hilfe des Moduls `ssh2` und des Protokolls `sftp`.

```
var conn = new Client();
conn
    .on("ready", function () {
    console.log("Client :: ready");
    conn.sftp(function (err, sftp) {
        if (err) throw err;

        var readStream = fs.createReadStream(data?.files?.testFile?.path);
        var writeStream = sftp.createWriteStream(
        "/testFile.txt"
        );
        writeStream.on("close", () => {
        console.log("- file transferred succesfully");
        conn.end();
        res.status(200).json({
            message: "file transfer successful",
        });
        });

        writeStream.on("end", () => {
        console.log("sftp connection closed");
        conn.end();
        });

        readStream.pipe(writeStream);
    });
    })
    .connect({
    host: process.env.HOST,
    port: 22,
    username: process.env.USERNAME,
    password: process.env.PASSWORD,
    });
```

Das Modul `dotenv` ermöglicht die serverseitige und gesicherte Nutzung von kritischen Daten wie Passwörtern direkt im Code und wird dringend empfohlen.

Auf dem SFTP-Server sollte nach erfolgreicher Ausführung die Datei `testFile.txt` mit dem Inhalt 

"QUIKK Software

Übertragung von Dateien per SFTP und Serverless Functions"

vorliegen.

[Github Repo](https://github.com/quikk-software/sftp-file-transfer)

large_nextjs-serverless-functions.jpg

medium_nextjs-serverless-functions.jpg

small_nextjs-serverless-functions.jpg

thumbnail_nextjs-serverless-functions.jpg

nextjs-serverless-functions.jpg

Next.js: SFTP-Dateitransfer via Serverless Functions

This article shows you how to exploit the useEffect hook in React to create a while loop for calling an asynchronous function.

## The problem
While developing a order management system for one of our projects, I stumbled over a problem using Next.js Serverless Functions. The problem I had was, that there is a pre configured limit with using Serverless Functions, which leads to a request or response with a maximum size of 5MB.
The database I worked with returned documents way larger than 5MB, so I needed to implement a pagination for the database requests.
When using pagination, you can only get a fracture of the data you actually need. So if you need to fill a table with the data of the whole database, it would be really nice to call the database with pagination until you don't receive any more data. In my case, I needed to call a MongoDB (using Mongoose) on page load to fill an order table with all available orders in the database. To achieve that with pagination, I needed to find a way to call my fetchOrders-function in an asynchronous "while loop".

## Prerequisites
In this example, I'm just using the useState and useEffect hooks from React.

## Doing the loop
To solve my problem, I searched the internet for a solution for my loop problem. After a while without finding anything useful, I thought of exploiting the useEffect hook of React, which will be called on any change of states in the useEffect's dependency array. To be sure, that the useEffect hook is called as long as I need it to be called, I implemented a state, which acts like a mutex. I just change the boolean state to the opposite state (if it's true, it will be changed to false, and vice versa) on each fetchOrders()-function call, so the useEffect hook will be called on the next render cycle.

## My approach for a solution
In the following, you are going to see a template example for exploiting the useEffect hook to call a function over and over again until a specific state is reached (in this example: noMoreData === true).

```
import React, { useState, useEffect } from "react";
import axios from "axios";

const FetchDataLoop = () => {
  const [dataArray, setDataArray] = useState([]);
  const [noMoreData, setNoMoreData] = useState(false);
  const [loopMutex, setLoopMutex] = useState(true);

  const fetchData = async () => {
    try {
      const { status, data } = await axios.get("/your/api/route");
      if (status === 200) {
        if (data["fetchedDataArray"].length > 0) {
          const extendedDataArray = dataArray.concat(data["fetchedDataArray"]);
          setDataArray(extendedDataArray);
        }
      }
    } catch (error) {
      // 404 is usually the status, when there is no more data to fetch
      if (error.response.status === 404) {
        setNoMoreData(true);
      } else {
        console.error(error);
      }
      setLoopMutex(!loopMutex);
    }
    setLoopMutex(!loopMutex);
  };

  useEffect(() => {
    if (!noMoreData) {
      fetchData();
    }
  }, [loopMutex]);

  return <></>;
};

export default FetchDataLoop;

```

Be sure to use this example as a template or for your own solution finding.

Leistungen

Projekte

Blog

Team

Karriere

Kontakt

Individuelle Softwareentwicklung und mobile Apps für Hannover.

UNSER FOKUS