Forem: IRPAN KUSUMA W

How to rsync docker images path to some-path

IRPAN KUSUMA W — Fri, 11 Mar 2022 15:45:25 +0000

Halo sobat,

Now i want to tell you something about symlink on linux when your docker path storage have full capacity. Here script for execute this

Stop docker service

systemctl stop docker

Symlink your docker path to some-path

sudo rsync  -aP /var/lib/docker /new/path/folder

Update your file daemon.json

vi /etc/docker/daemon.json

#add this line on daemon.json
{
  "data-root": "/new/path/folder"
}

Start all docker image

docker start $(docker ps -a -q)

Start docker service

systemctl start docker

Bulk MySQL dump with bash

IRPAN KUSUMA W — Fri, 11 Mar 2022 15:28:53 +0000

[Halo Sobat,]

Kali ini saya akan menyampaikan bagaimana cara melakukan bulk backup database pada mysql.

Create file dalam server linux, dengan nama backup.sh. vi backup.sh
Paste code berikut ini dalam file backup.sh

#!/bin/sh

#your path for store backup file as filename.sql
fullpath='/path/to/backup'

#parameter for connection database
user="user"
host="your-ip-address"
passwd="pasword"
port="3306"

#name of databases, delimiter with [space]
dbnames="db_01 db_02 db_03"

#looping process for run mysqldump
for db in $dbnames; do
    filename=${db}.sql
    filepath=${fullpath}
    cd $filepath

    /usr/bin/mysqldump -u${user} -p${passwd} --databases ${db} > ${filename}

    # delete file when age is > 2 days
    find $filepath/* -mtime +1 -exec rm -rf {} \;

done

Kemudian ubah permission pada file backup.sh chmod +x backup.sh Jika berhasil maka file backup.js akan berubah menjadi hijau bold
Selanjutnya untuk menjalankan file tersebut seperti berikut ./backup.sh Tunggu sampai selesai menjalan kan proses, dan cek folder ada sesuai dengan variable fullpath di backup.js
Anda juga bisa menjalankan file backup tersebut secara scheduler menggunakan cronjob linux, seperti berikut crontab -e 0 1 0 0 0 /path/to/file/backup.sh

Bag 2 - Upload with ExpressJS API

IRPAN KUSUMA W — Fri, 11 Mar 2022 14:49:31 +0000

[Halo sobat]

Melanjutkan https://dev.to/irpankusuma/upload-file-dengan-xhr-2a3a. Sekarang saya akan menampilkan script API dengan ExpressJSnya. Pertama saya harap Anda sudah biasa menggunakan expressjs dan sudah pernah membuat sebuah API.

Kemudian sebelumnya install package multiparty berikut ini

npm i connect-multiparty

Selanjutnya dalam file route yg akan digunakan codenya seperti berikut ini
upload.js


const router = require("express").Router();
const CPM = require("connect-multiparty");
const helper = require('helper.js');
const multiparty = CPM();
const target_path = `target_path`;

///// route file for access data from API
router.post("/", multiparty, async (req, res, next) => {
  try {
    const file = req.files.upload.path;
    let obj = {
      files: req.files,
      temp: req.files.upload.path,
      filename: req.files.upload.originalFilename,
      ext: req.files.upload.type,
      target_path: target_path,
    };

    ///// file berikut yg bertugas melakukan transfer file 
    ///// dari temp file ke local folder pada API project
    await helper.uploadFile(obj, file, target_path)
      .then(async (r) => {
        let data = {
          image_type: r.data.ext,
          real_path: r.data.target_path,
          real_filename: r.data.filename,
        };
        res.status(200).send(r);
      })
      .catch((e) => {
        throw e;
      });
  } catch (err) {
    res.status(401);
    console.log(`error ${err}`)
  }
});

module.exports = router;

Kemudian selanjutnya adalah create helper.js
helper.js

const fs = require('fs')
const mv = require('mv')

module.exports = {
  uploadFile: (obj={},tmp_path,path) => {
    return new Promise((resolve,reject) => {
      try {
        const filename = path+obj.filename;
        if(!fs.existsSync(path)){
          fs.mkdirSync(path);
          mv(tmp_path,filename,function(err){
            if(err) reject(err)
            fs.unlink(tmp_path,function(){
              if(err) reject(err)
              resolve({status: true, message: 'Data uploaded success'})
            })
          })
        } else {
          mv(tmp_path,filename,function(err){
            if(err) reject(err)
            fs.unlink(tmp_path,function(){
              if(err) reject(err)
              resolve({status: false, message: 'Data uploaded failed!'})
            })
          })
        }
      } catch (error) {
        reject(error)
      }
    });
  }
}

Dalam expressJS mapping file upload.js pada routing seperti berikut ini

const router = require('express').Router()

router.use('/upload',require('./upload'))

Selanjutnya Anda bisa mencoba menggunakan postman seperti berikut

Bag 1 - Upload with XHR & VueJS

IRPAN KUSUMA W — Thu, 10 Mar 2022 14:28:15 +0000

[Halo Sobat,]

Berikut cara upload file menggunakan XHR. Saya menggunakan framework vuejs untuk ini, saya harap kalian sudah paham menggunakan vuejs + vuetify. Dan berikut adalah sample codenya

img-drop.vue

<template>
  <v-container>
    <div class="helper"></div>
    <div
      class="drop display-inline align-center"
      @dragover.prevent
      @drop="onDrop"
    >
      <div class="helper"></div>
      <label v-if="image.length == 0" class="btn display-inline">
        <div>SELECT OR DROP AN IMAGE</div>
        <div style="font-size: 8px; text-align: center">accepted image</div>
        <input
          type="file"
          :multiple="multiple"
          name="image"
          @change="onChange"
        />
      </label>

      <div
        class="hidden display-inline align-center"
        v-else
        v-bind:class="{ image: true }"
      >
        <div v-for="(k, v) in image" :key="v" class="flex">
          <v-img
            v-if="['.jpeg', '.jpg', '.png'].includes(getExt(k.savename))"
            :src="k.url"
            contain
            tile
            max-height="200"
            max-width="250"
            class="img"
          >
            <v-fade-transition>
              <v-overlay absolute color="#036358">
                <v-btn outlined x-small @click="print(k.url, k.savename)"
                  >DOWNLOAD</v-btn
                >
                <v-btn
                  class="ml-2"
                  outlined
                  color="red"
                  x-small
                  @click="removeFile(k)"
                  >DELETE</v-btn
                >
              </v-overlay>
            </v-fade-transition>
          </v-img>
          <div v-else style="max-height: 60px; max-width: 100px" class="img">
            <div>
              <v-btn outlined x-small @click="print(k.url, k.savename)"
                >DOWNLOAD</v-btn
              >
              <v-btn
                class="ml-2"
                outlined
                color="red"
                x-small
                @click="removeFile(k)"
                >DELETE</v-btn
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </v-container>
</template>

<script>
export default {
  name: "image-drop",
  props: {
    multiple: null,
    id: null,
  },
  data() {
    return {
      image: [],
      acceptMime: ["image/jpeg", "image/png"],
    };
  },
  methods: {
    onDrop: function (e) {
      e.stopPropagation();
      e.preventDefault();
      var files = e.dataTransfer.files;

      if (!this.multiple && files.length > 1) {
        console.log(`Tidak dapat meng-upload lebih dari 1 file sekaligus.`);
        return;
      }
      this.onPicked(files);
    },
    onPicked(files) {
      let image = [];
      if (files.length > 0) {
        for (let i = 0; i < files.length; i++) {
          let x = files[i].name;
          if (x.lastIndexOf(".") <= 0) {
            return;
          }

          let type = files[i].type;
          let valid = this.acceptMime.indexOf(type) !== -1;
          if (!valid) {
            console.log(`jenis ekstensi tidak didukung`);
            return false;
          }

          const fr = new FileReader();
          fr.readAsDataURL(files[i]);
          fr.addEventListener("load", () => {
            image.push({
              id: i + 1,
              uid: this.id,
              size: Math.round(files[i].size / 1000),
              isAllow: files[i].size / 1024 / 1024 > 2 ? false : true,
              type: files[i].type,
              name: x,
              savename: this.buildName(x),
              url: fr.result,
              file: files[i],
              filename: this.buildName(x),
              mime_type: files[i].type,
              filesize: `${Math.round(files[i].size / 1000)} kB`,
            });
          });
        }
      }

      let interval;
      interval = setInterval(() => {
        if (image.length > 0) {
          this.$emit("value", image);
          this.image = image;
          clearInterval(interval);
        }
      }, 50);
    },
    onChange(e) {
      var files = e.target.files;
      this.onPicked(files);
    },
    removeFile(k) {
      if (k) {
        this.image = this.image.filter((e) => e.savename != k.savename);
        this.$emit("remove", k);
      }
    },
    // untuk moment() saya menggunakan library dayjs
    buildName(name) {
      const u = moment().format("DDMMYYYYHHmmss.SSS");
      const l = name.length;
      const i = name.lastIndexOf(".");
      const e = name.substring(i, l);
      name = name.substr(0, i);
      let newname = `${name}-${u}`;
      let filename = newname;
      filename = filename.replace(
        /([~!@#$%^&*()_+=.`{}\[\]\|\\:;'<>,\/? ])+/g,
        "-"
      );

      return filename + e;
    },
  },
};
</script>

<style scoped>
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
}

.flex {
  display: flex;
}

.btn {
  background-color: #f2f2f2;
  border: 0;
  color: black;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 15px 35px;
  position: relative;
}

input[type="file"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.align-center {
  text-align: center;
}

.helper {
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  width: 0;
}

.hidden {
  display: none !important;
}

.hidden.image {
  display: inline-block !important;
}

.display-inline {
  display: inline-block;
  vertical-align: middle;
}

.img {
  border: 1px solid #b71c1c;
  display: inline-block;
  height: auto;
  max-height: 80%;
  max-width: 80%;
  width: auto;
}

.drop {
  background-color: #f2f2f2;
  border: 4px dashed #ccc;
  background-color: #f2f2f2;
  border-radius: 2px;
  height: auto;
  max-height: 400px;
  max-width: 500px;
  width: 100%;
}

.drop:hover {
  border: 4px dashed #b71c1c;
}
</style>

kemudian untuk memanggil file tersebut seperti berikut ini

Home.vue

<template>
  <v-container fluid fill-height>
    <v-row align="center" justify="center">
      <v-col sm="12" lg="12" md="12" xl="12" align-self="center">
        <image-drop :multiple="false" @value="onUpload"></image-drop>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  components: {
    ImgDrop: () => import(`@/components/ImageDrop.vue`)
  },
  data() {
    return {};
  },
  methods: {
     onUpload(v){
        const file = v[0].file
        this.uploadFile(`http://yourAPI.com`, '/', file, (res) => {
           console.log(`response callback`, res)
        }
     },
     // path is target_path on your backend
     uploadFile: (url, path = "/", upload = null, callback) => {
      let xhr = new XMLHttpRequest();
      let fd = new FormData();

      fd.append("target_path", path);
      if (upload && Array.isArray(upload)) {
        for (let i = 0; i < upload.length; i++) {
          fd.append("upload[]", upload[i].file, upload[i].filename);
        }
      } else {
        fd.append("upload", upload.file, upload.filename);
      }

      console.log("fd", fd);

      xhr.open("POST", url, true);
      xhr.onprogress = function () {
        console.log(`loading start`);
      };
      xhr.onerror = function () {
        console.log(`loading end`);
        if (typeof callback === "function") {
          callback({
            status_code: "error",
            status_code: "error",
            status_message: "Terjadi masalah saat upload data.",
          });
        }
      };

      xhr.onload = function () {
        let res = xhr.response;
        xhr.readyState == 4 && xhr.status == 200
          ? console.log("Success.")
          : console.log("Failed.");
        if (typeof callback === "function") {
          callback(res);
        }
      };
      xhr.send(fd);
    },
  }
};
</script>

kurang lebih tampilannya akan seperti berikut ini

kolom untuk di drop
kolom ketika sudah ada image yang akan di upload

Untuk API bisa cek disini ya https://dev.to/irpankusuma/bag-2-upload-with-expressjs-api-2lbi

NodeJS - Get data from Redash v6 API

IRPAN KUSUMA W — Sat, 26 Feb 2022 14:48:20 +0000

[Salam Engineering sobat,]

Sobat engineering sudah kenal Redash? ya, itu salah satu wadah untuk Big-Query dimana banyak sekali jenis database yang bisa di koneksikan. Nah berikut saya akan paparkan gimana caranya sih get data API dari Redash ini (untuk API redash https://redash.io/help/user-guide/integrations-and-api/api/).

redash_api.js


const REDASH_API_URL = `http://redash.com/api/`;
const REDASH_API_KEY = `key-on-your-user-profile-in-redash`;
const fetch = require("node-fetch");

module.exports = {
  /**
   * {
      "job": {
        "status": 1,
        "error": "",
        "id": "String UUID",
        "query_result_id": null,
        "updated_at": 0
      }
    }
   * @param {*} id 
   */
  RedashCallAPI: async (id, obj_params = '') => {
    try {
      let p = null;
      const body = { max_age: 0 };

      // when use params
      const params = qs(obj_params);

      // sample: http://redash.com/api/queries/10/refresh?p_keyword=ulala%20test&p_start=2020-01-01&p_end=2020-01-02
      const res1 = await call(
        "POST",
        REDASH_API_URL + `queries/${id}/refresh${params}`,
        body
      ).catch((e) => {
        throw e;
      });

      if (res1.status == 200) p = await pool(res1.data.job);
      else return false;

      // get data results
      if (p.status == 4) return false;
      else {
        const res2 = await call(
          "GET",
          REDASH_API_URL + `query_results/${p.query_result_id}`
        ).catch((e) => {
          throw e;
        });

        if (res2.status == 200) return res2;
        else return false;
      }
    } catch (error) {
      console.log(`error => `, error);
    }
  },
};

/**
 *
 * @param {*} id
 * 1 == PENDING (waiting to be executed)
 * 2 == STARTED (executing)
 * 3 == SUCCESS
 * 4 == FAILURE
 * 5 == CANCELLED
 * @return {*} job
 */
function pool(obj) {
  return new Promise(async (o, x) => {
    let job = null;
    let status = null;

    while (status < 3) {
      const response = await call("GET", REDASH_API_URL + "jobs/" + obj.id);
      status = response.data.job.status;

      if (response.status == 200) job = response.data.job;
      else x(`error status: ${response.status}`);
    }

    o(job);
  });
}

/**
 * serialize query-string from {}
 * @param {*} obj
 */
function qs(obj) {
  let str = [];
  for (let p in obj)
    if (obj.hasOwnProperty(p)) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }

  return str.length > 0 ? "?" + str.join("&") : null;
}

/**
 *
 * @param {*} method
 * @param {*} path
 * @param {*} body
 */
async function call(method, url, body) {
  try {
    let c = {};
    if (method == "GET")
      c = {
        method: method,
        headers: {
          Authorization: `Key ${REDASH_API_KEY}`,
        },
      };
    else
      c = {
        method: method,
        body: JSON.stringify(body),
        headers: {
          Authorization: `Key ${REDASH_API_KEY}`,
        },
      };

    const response = await fetch(url, c);
    const data = await response;
    const json = await response.json();

    return {
      status: data.status,
      data: data.status == 200 ? json : null,
    };
  } catch (error) {
    throw Error(error);
  }
}

index.js

const redash_api = require('./redash_api.js');
const run = async () => {
    try {
       // pastikan ada prefix `p_` untuk parameter
       const params = {
         p_keyword: 'cari ',
         p_start: '2020-01-01',
         p_end: '2020-01-02'
       }

       const data = await redash_api.RedashCallAPI(1,params);
       return data;
    } catch (error) { throw Error(error); }
}

run();