DEV Community: Corey Lai

eBPF on a Mac: A 5-Minute Linux VM with Multipass or Lima

Corey Lai — Fri, 19 Jun 2026 02:34:33 +0000

Foreword: this series started in a packed room at KubeSummit 2025

In October 2025 I gave a talk at KubeSummit 2025 (hosted by iThome) — "Exploring the Core of eBPF: Using eBPF and Kubernetes to Modernize Monitoring for Traditional-Industry ERP Systems." The room was full, and afterward the most common question wasn't about theory. It was some version of:

"This is great — but how do I actually run any of this myself?"

That question is what this series is for: turning that talk into small, runnable guides you can follow on your own machine. And it has to start with the wall every Mac developer hits first — eBPF doesn't run on macOS. So before the kernel tracing and the benchmarks, here's step zero: getting a Linux environment where eBPF actually works.

TL;DR: eBPF runs in the Linux kernel, so it can't run natively on macOS. Run a real Ubuntu VM with Multipass (simplest) or Lima (auto-mounts your code) — both give you the BTF that modern CO-RE eBPF needs. Don't use Docker Desktop for this: its LinuxKit kernel usually ships without BTF. A copy-paste setup script is at the end.

The problem: your Mac isn't Linux (and eBPF only speaks Linux)

eBPF is a Linux kernel technology. macOS runs the XNU kernel — there is no eBPF there. So every "I'll learn eBPF" attempt on a Mac hits the same wall on day one.

The good news: running Linux on a Mac for eBPF is a solved, 5-minute problem — if you pick the right tool. The trap is reaching for Docker Desktop (more on that below).

What you'll learn

Why you need a Linux VM (and why Docker Desktop is the wrong one for eBPF)
Multipass vs Lima — which to pick
A one-command script that gives you a working, verified eBPF dev VM

The one rule that saves you hours: you need BTF

Modern eBPF (CO-RE — compile once, run everywhere) reads the kernel's BTF (/sys/kernel/btf/vmlinux) to stay portable across kernel versions. If your VM's kernel was built without BTF, the very first step — generating vmlinux.h — fails.

Ubuntu 22.04 / 24.04 VMs ship with BTF enabled. ✅
Docker Desktop's LinuxKit kernel often does not. ❌ — this is why "I tried eBPF in a container and vmlinux.h failed" is so common.

So: a real Ubuntu VM, not a container.

Multipass vs Lima — pick one

	Multipass	Lima
Install	`brew install --cask multipass`	`brew install lima`
Vibe	dead simple, "just give me a VM"	lightweight, dev-friendly
Your code → VM	`multipass mount` / `transfer`	auto-mounts your home dir
Best for	fastest start	edit-on-Mac, build-in-VM loop

Both work great and both give you BTF. New to this? Use Multipass. Want your files to "just be there" in the VM? Use Lima.

Option A — Multipass (quickest)

brew install --cask multipass
multipass launch 24.04 --name ebpf-dev --cpus 2 --memory 4G --disk 20G
multipass shell ebpf-dev

Inside the VM:

sudo apt update
sudo apt install -y clang llvm libbpf-dev libelf-dev zlib1g-dev \
                    make bpftrace git linux-tools-common linux-tools-$(uname -r)

Share your project folder (edit on the Mac, build in the VM):

# back on the Mac:
multipass mount "$PWD" ebpf-dev:/home/ubuntu/work

Option B — Lima (auto-mounts your code)

brew install lima
limactl start --name=ebpf-dev template://ubuntu-lts
limactl shell ebpf-dev

Lima mounts your home directory at the same path inside the VM, so you can cd straight to your project — no copying. Install the same toolchain as above.

Or just run one script

Both options, wrapped up with a BTF check and an eBPF smoke test:

#!/usr/bin/env bash
# setup-ebpf-mac.sh — ./setup-ebpf-mac.sh [multipass|lima]   (default: multipass)
set -euo pipefail
PROVIDER="${1:-multipass}"; VM_NAME="ebpf-dev"

read -r -d '' VM_SETUP <<'EOF' || true
set -e
echo "[VM] kernel: $(uname -r)  arch: $(uname -m)"
[ -r /sys/kernel/btf/vmlinux ] && echo "[VM] BTF: OK" || { echo "[VM] BTF: MISSING"; exit 1; }
sudo apt-get update -y
sudo DEBIAN_FRONTEND=noninteractive apt-get install -y \
  clang llvm libbpf-dev libelf-dev zlib1g-dev make bpftrace git linux-tools-common
sudo apt-get install -y "linux-tools-$(uname -r)" || sudo apt-get install -y linux-tools-generic || true
echo "[VM] smoke test (3s): tracing execve()"
sudo timeout 3 bpftrace -e 'tracepoint:syscalls:sys_enter_execve { printf("%-6d %-16s %s\n", pid, comm, str(args->filename)); }' || true
echo "[VM] ✅ ready"
EOF

if [ "$PROVIDER" = multipass ]; then
  command -v multipass >/dev/null || brew install --cask multipass
  multipass info "$VM_NAME" >/dev/null 2>&1 || \
    multipass launch 24.04 --name "$VM_NAME" --cpus 2 --memory 4G --disk 20G
  multipass exec "$VM_NAME" -- bash -c "$VM_SETUP"
  echo "Enter: multipass shell $VM_NAME   |   Share code: multipass mount \"$PWD\" $VM_NAME:/home/ubuntu/work"
elif [ "$PROVIDER" = lima ]; then
  command -v limactl >/dev/null || brew install lima
  limactl list --format '{{.Name}}' 2>/dev/null | grep -qx "$VM_NAME" || \
    limactl start --name="$VM_NAME" --tty=false template://ubuntu-lts
  limactl shell "$VM_NAME" bash -c "$VM_SETUP"
  echo "Enter: limactl shell $VM_NAME   (Lima auto-mounts your home dir)"
else
  echo "use: multipass | lima"; exit 1
fi

Run it:

chmod +x setup-ebpf-mac.sh
./setup-ebpf-mac.sh            # or: ./setup-ebpf-mac.sh lima

(The full version, with fallbacks and friendlier output, is in the repo linked below.)

Verify it actually works

Inside the VM:

# 1) BTF present? (CO-RE needs this)
ls -l /sys/kernel/btf/vmlinux

# 2) eBPF works? trace every program launch, live:
sudo bpftrace -e 'tracepoint:syscalls:sys_enter_execve {
    printf("%-6d %-16s %s\n", pid, comm, str(args->filename)); }'

Open another shell, run ls — it shows up instantly. That's eBPF running in your VM's kernel.

Real output: bpftrace attached to the execve tracepoint; ls from another shell appears immediately.

Then build the real C + libbpf example from this series:

cd hello-ebpf
make
sudo ./hello

Takeaways

eBPF is Linux-only — on a Mac you run it in a Linux VM, not a container.
You need BTF. Ubuntu 22.04/24.04 VMs have it; Docker Desktop usually doesn't.
Multipass = fastest, Lima = best dev loop. Either gets you running in ~5 minutes; one script does it all.

Resources

The setup script + hello-ebpf example: github.com/hyperredstart/hello-ebpf
Multipass docs: multipass.run
Lima: lima-vm.io

Part of a series on eBPF for traditional-industry / cloud-native systems. With the VM ready, the next post traces real syscalls with C + libbpf.

On a Mac and stuck setting up eBPF? Tell me where it broke — I'll help.

What is eBPF, Really? A Builder's Mental Model

Corey Lai — Tue, 16 Jun 2026 11:09:40 +0000

TL;DR: eBPF lets you run small, sandboxed programs inside the Linux kernel — to observe or change what the system is doing — without patching the kernel or modifying your apps. If you've ever run tcpdump, you've already used its ancestor.

The problem: you can't easily change the kernel, and a new capability can take years to land

There's a famous cartoon by Liz Rice that nails the old pain:

An app developer wants a new capability from the kernel.
The kernel maintainer says: "Sure — give me a year to convince the whole community."
A year later it's upstream. A few years after that, your distro finally ships it.
By then… your requirements have changed.

Source: Learning eBPF — Liz Rice

The kernel sees almost everything that happens on the system — every syscall, every packet, every file operation. And it's open source: you can read the code in as much detail as you like. So the hard part was never seeing inside — it's changing it: safely growing the exact capability you need into a kernel that's already serving production traffic. Historically there were only two awkward paths. One: patch the kernel source, recompile, reboot — slow, risky, and you still have to convince upstream to take your patch. Two: bolt on a user-space agent that pokes from the outside by polling /proc and /sys — easy to install, but blind to first-hand events inside the kernel. eBPF is the third way.

What you'll learn

What eBPF actually is, in one sentence
Why it exists — told through its own history (tcpdump → today)
How it works in 30 seconds, and when to reach for it (and when not to)

A one-sentence mental model

eBPF is a safe, sandboxed virtual machine inside the Linux kernel that runs your tiny programs in response to events — a packet arrives, a syscall fires, a function is called — letting you observe or control the system without changing kernel source or your application.

It's a mechanism for safely loading kernel extensions at runtime. Every tiny program you attach is a hook bound to some event — but unlike the "write whatever you want" scripts in a browser, every eBPF program must first pass the kernel's built-in verifier: a static check that strictly bounds which instructions it may use, how many loop iterations it may run, and what memory it may touch. That constraint isn't red tape — it's the very thing that lets it run safely inside a live kernel.

Why it exists: from Classic BPF to eBPF

1992 — Classic BPF (you've already used it). BPF was born as a packet filter. Every time you run:

tcpdump -i eth0 tcp port 80

…this happens under the hood:

tcpdump hands your filter (tcp port 80) to libpcap
libpcap compiles it into Classic BPF bytecode
A syscall pushes that bytecode down into the kernel
The kernel runs it at the network layer and only hands matching packets back up

That's the whole idea, already present in 1992: push a small program down into the kernel so the work happens there, not in your app. (You can even see the compiled bytecode with tcpdump -ddd.)

~2014 — extended BPF (eBPF). The same idea got generalized far beyond packets. Now you can attach tiny programs to almost anything in the kernel — syscalls, function entry/exit, the scheduler, memory, the whole network stack. Brendan Gregg's well-known BPF performance tools map shows how far it spread: there's an eBPF-powered tool for nearly every layer of the kernel.

How it works (the 30-second version)

   Your C code
      │  clang / LLVM
      ▼
   eBPF bytecode (.o, an ELF object)
      │  bpf() syscall  (via libbpf / bpftool / BCC)
      ▼
   ┌──────────────────── Kernel ────────────────────┐
   │  1. Verifier  →  checks it's safe                │
   │       (no crashes, no infinite loops)           │
   │  2. (JIT)     →  runs in the BPF virtual machine │
   │  3. Attached to a hook:                         │
   │       tracepoint / kprobe / XDP / tc / ...       │
   └───────────────────┬─────────────────────────────┘
                       │  maps / ring buffer
                       ▼
              Your user-space app reads the data

Two things make this both safe and practical:

The verifier rejects any program that could crash or hang the kernel before it runs. This is the reason eBPF is safe to run in production.
maps & ring buffers are how the kernel-side program and your user-space program share data.

Where you can attach — the SEC(...) you'll see in real code:

Hook	Level	Used for
`xdp`	NIC driver	fastest packet processing, DDoS drop, load balancing
`tc`	traffic control	packet shaping, classification
`tracepoint/...`	kernel tracepoints	syscalls, file ops, scheduling events
`fentry`/`fexit`	kernel functions (CO-RE)	low-overhead function tracing
`usdt`	user space	trace inside apps (e.g. SQL query time)

How people actually write it (pick your entry point)

You rarely touch raw bytecode. The common toolchains:

Toolchain	Language	Best for
C + libbpf	C	production; CO-RE (`vmlinux.h` + BTF) → portable, compile-once-run-anywhere
BCC	Python + C	quick prototypes; heavier dependencies
bpftrace	a small DSL (awk-like)	one-liners and ad-hoc tracing
cilium/ebpf	Go	embedding eBPF in Go services
aya	Rust	type-safe kernel + user space in Rust

Just starting? Use bpftrace to explore, then C + libbpf when you're ready to build something real.

When to reach for eBPF (and when not to)

eBPF shines for observability, networking, security, and performance analysis — anywhere you need kernel-level visibility or control with minimal overhead. Here's where it sits versus the usual approaches:

Approach	How it sees your system	Trade-off
Agent-based (e.g. Prometheus exporters)	polls `/proc`, `/sys`	simple, but constant overhead & limited depth
Library-based (e.g. OpenTelemetry SDKs)	you instrument your code	rich, but you must change every app
Kernel-based (eBPF)	hooks the kernel directly	deep + low overhead, no app changes — but Linux-only, steeper learning curve

Don't reach for eBPF when: a simple existing tool already does the job; you're on an old kernel (many features need 5.x+, ring buffer needs 5.8+); or you're not on Linux (it's a Linux kernel technology — on a Mac, you run it inside a Linux VM).

Try it yourself (no compiler needed)

The fastest way to see eBPF work is to trace every program your machine launches — live. On any Linux box, with bpftrace:

sudo apt install -y bpftrace
sudo bpftrace -e 'tracepoint:syscalls:sys_enter_execve {
    printf("%-6d %-16s %s\n", pid, comm, str(args->filename));
}'

Open a second terminal and run anything (ls, date). It shows up instantly:

3310   bash             /usr/bin/ls
3310   bash             /usr/bin/date

That's a real eBPF program: attached to a kernel tracepoint, checked by the verifier, streaming events to user space — no kernel patching, no app changes.

Want the grown-up version (C + libbpf, CO-RE, ring buffer, a proper make build)? The full runnable example — hello-ebpf — is in the repo linked below.

On a Mac? eBPF is Linux-only — run the snippet inside a quick Ubuntu VM (Multipass/Lima). The repo README has a one-command setup.

Takeaways

eBPF = safe, event-driven programs inside the kernel — observe or control the system without patching it or your apps.
It turns the kernel from something you could only read but couldn't easily change into a platform you can safely extend at runtime — and the verifier is why that's safe in production.
It's powerful, not free: right problem (deep visibility, low overhead, Linux), right time (modern kernel). Don't use it where a simpler tool will do.

Resources

My hands-on examples: github.com/hyperredstart/hello-ebpf
Learning eBPF — Liz Rice (the cartoon is from here)
BPF Performance Tools — Brendan Gregg
ebpf.io

中文版 / Chinese version: https://hyperredstart.github.io/posts/what-is-ebpf/

New to eBPF? Tell me the one concept that still feels fuzzy, and I'll cover it.

Using Configurations and Options

Corey Lai — Tue, 12 Apr 2022 08:14:29 +0000

這個章節會介紹到基本的 webpack config 設定的實際使用，透過設定的層層疊加，並討論組態設定、資源管理、輸出管理、對 webpack 的設定。

💈 基本 Webpack Config 設定指南 💈

1. 使用不同的設定檔

在 package.json 中指定 webpack config 的設定檔案名稱

"scripts": {"build": "webpack --config example.config.js" }

2. 設定模組選項

mode 可以針對不同的輸出模式進行優話
entry 預設為 src 底下目錄，代表開始封裝的起始目錄位置

const path = require('path');
module.exports = {
mode: "production", // "production" | "development" | "none"
entry: "./app/entry", // string | object | array

3. 輸出選項

設定輸出路徑，輸出檔案名稱，以及公共路徑位置，library 設定輸出給其他第三方的名稱，libraryTarget 可以指定引用語句類型

output: {
path: path.resolve(__dirname, "dist"), // string
filename: "bundle.js", // string
publicPath: "/assets/", // string
library: "MyLibrary", // string,
libraryTarget: "umd", // universal module definition
},

4. 引用檔案名稱規則

設定模組內需要引用的檔案規則，可以引入指定目錄，或是將其排除

module: {
  rules: [{
    test: /\.jsx?$/,
    include: [ path.resolve(__dirname, "app") ],
    exclude: [
      path.resolve(__dirname, "app/demo-files")
    ],

5. enforce / issuer

issuer 指定支援的使用，如 svg 檔案可讓 js 副檔名的檔案，進行加載

{
  test: /\.svg(\?.*)?$/,
  issuer: /\.js$/,
  loader: 'svg-inline-loader'
}

設定 enforce 指定載入順序

pre 優先
normal 正常
inline 其次
post 最後

enforce: "pre" | enforce: "post"

6. performance

限制效能警告
當檔案過大造成效能頻緊時，提出緊告

performance: {
hints: "warning", // enum
maxAssetSize: 200000, // int (in bytes),
maxEntrypointSize: 400000, // int (in bytes)
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}

7. devServer

設定啟動開發測試環境，實現 Live Reload

devServer: { 
  proxy: { '/api':'http://localhost:3000' },
  contentBase: path.join(__dirname, 'public'),
  compress: true,
  historyApiFallback: true,
  hot: true,
  https: false,
  noInfo: true,
},

運行 server

npx webpack serve

資源管理

CSS / Image / woff 資源檔案

安裝資源載入相應套件

npm install --save-dev style-loader css-loader file-loader

📚 設定資源載入套件

module: {
  rules: [{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
  }, {
    test: /\.(png|svg|jpg|gif)$/,
    use: ['file-loader']
  }, {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ['file-loader']
  }
]}

載入後就可以在js中透過import 加載資源檔

import './style.css';
import Icon from './icon.png';

CSS 中加載字型

@font-face {
  font-family: 'SampleFont';
  src: url('./sample-font.woff2') format('woff2'),
  url('./sample-font.woff') format('woff');
}

JSON/ CSV / XML 資源檔案

除了一般的 CSS / 圖檔以外，也可以載入文字資源檔
安裝資源載入相應套件

npm install --save-dev csv-loader xml-loader

設定資源載入

{
  test: /\.(csv|tsv)$/,
  use: ['csv-loader']
},
{
  test: /\.xml$/,
  use: ['xml-loader']
}

載入資源

import Data from './data.xml';

HtmlWebpackPlugin

使用 html plugin 透過 webpack.config.js 來設定 html內容

npm install --save-dev html-webpack-plugin

ex: 設定網頁 title

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
  new HtmlWebpackPlugin({
    title: 'Output Management'
  }
)]

清除發布目錄

在開發中我們輸出至dist的目錄內，可能會有很多殘留檔案，可以透過以下工具，清理目錄內容

npm install --save-dev clean-webpack-plugin

const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
  new CleanWebpackPlugin(),
],

Bail

Bail 參數設定為布林值，會強迫 Webpack 在編譯中發生錯誤問題後，立刻終止

module.exports = {bail: true};

其他介紹的屬性參數

profile : 布林屬性，提供分析資料，可使用 https://webpack.github.io/analyse/ 進行分析
parallelism : 正整數並行數量，透過並行的方式執行各個模組
recordsPath：字串路徑，紀錄code splitting 跨檔案之間的關聯，以便確保緩存(Cahching)行為能正常再分散的檔案中。

第三章節 Using Configurations and Options 結束 🎉
第四章會介紹更多的第三方 Webpack 套件，指導我們如何應用 Webpack 整合各式的開發工具，以及使用 Webpack 進行各種複雜的建置設定。

Working with Modules and Code Splitting

Corey Lai — Fri, 08 Apr 2022 06:30:19 +0000

此章節會介紹 Webpack 中的模組 (Module) 以及程式碼分離 (Code Splitting) 兩個 Webpack 特色，透過以上特色使專案代碼分割並以最適合的方式分割代碼。

此章節包含內容：

解釋 Webpack 中的 Modules
了解 Code Splitting 機制
將所需要的模組預先載入
範例展示

Module

透過 Webpack 模組會將共用的方法集合在同一檔案內，並會依照不同類型進行分類，如下圖所釋：

Webpack 根據不同的模組標準有以下幾種語句：

ECMA 2015 : import
CommonJS : require
ASM(Asynchronous Module Definition) : define / require
CSS : @import stylesheet

模組支援語言

確保 Webpack 支援這些模組，必須要使用允許的程式語言，透過 Webpack 社群所建立的 Loaders 支援了大量的語言例如以下幾種。

TypeScript
SASS
LESS
C++
Babel
Bootstrap

載入模組路徑

絕對路徑
從根目錄開始定位到引用檔案
import 'C:\Users\project\file';
相對路徑
根據當前檔案定位到引用檔案
import '../src/file';
模組路徑
從模組中搜尋名稱，引用模組內的檔案
import 'module/sub-directory/file';

Code Splitting

允許使用者將片段的程式放入不同的套件中，並且可以按需求或是並行載入，被認為是 Webpack 最具矚目的功能。

達成方法

Entry Points: 可以手動設置片段程式進入點設定檔
SplitChunksPlugin: 並免相同程式載入，將片段的程式碼整合成群組這種群組稱為 "chunks"
Dynamic Imports: 透過程式來動態將片段程式碼載入

Entry Points

使用 Entry points 是最簡單可以達成 code splitting 的方法。

我們根據第一章範例的專案，增改以下內容

src/another-module.js

import _ from 'lodash';
console.log(_.join(['Another', 'module', 'loaded!'], ' '));

webpack.config.js

const path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

編譯專案

$ npm run build
Asset Size Chunks Chunk Names
another.bundle.js 550 KiB another [emitted] another
index.bundle.js 550 KiB index [emitted] index
Entrypoint index = index.bundle.js
Entrypoint another = another.bundle.js

編譯完成後再 dist 目錄下產生了 index.bundle.js/another.bundle.js 倆的檔案，但因為兩支js程式都有加載 lodash 導致兩支程式代碼重複。

SplitChunksPlugin

預防重複程式碼

從剛剛的 entrypoints 結果我們的程式碼重複了，為了避免這個狀況我們可以使用 SplitChunks 的 Webpack 套件

webpack.config.js
在 module 中增加 optimization 參數，再進行編譯

const path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

編譯專案

$npm run build

> 01-sample-app2@1.0.0 build
> webpack --config webpack.config.js
asset vendors-node_modules_lodash_lodash_js.bundle.js 550 KiB [emitted] (id hint: vendors)
asset index.bundle.js 8.83 KiB [emitted] (name: index)
asset another.bundle.js 8.75 KiB [emitted] (name: another)
Entrypoint index 559 KiB = vendors-node_modules_lodash_lodash_js.bundle.js 550 KiB index.bundle.js 8.83 KiB
Entrypoint another 559 KiB = vendors-node_modules_lodash_lodash_js.bundle.js 550 KiB another.bundle.js 8.75 KiB
runtime modules 7.3 KiB 16 modules
cacheable modules 532 KiB
  ./src/index.js 212 bytes [built] [code generated]
  ./src/another-module.js 83 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
webpack 5.69.1 compiled successfully in 326 ms

此時除了 anotherjs 與 indexjs 外多了一個檔案 "vendors-node_modules_lodash_lodash_js.bundle.js" lodash 的代碼就統一放在這個檔案，避免代碼重複

現在我們了解了如何避免重複代碼，接下來就要換到另一個更難的主題，Dynamic Imports。

Dynamic Imports

Dynamic Imports 是實現 on-demand imports 的必要方法。

webpack.config.js
output 中增加 chunkFilename 指定Dynamic Import Moudle 檔案名稱

const path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
};

index.js
透過在程式中 import 以動態的方式載入第三方模組，編譯過後就會產生相應檔案，並透過 webpackChunkName 指定產出名稱。

function getComponent() {
  return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
  var element = document.createElement('div');

  element.innerHTML = _.join(['Hello', 'Webpack'], ' ');

  return element;

  }).catch(error => 'An error occurred while loading the component');
}

getComponent().then(component => {
  document.body.appendChild(component);
});

編譯專案

$npm run build
> 01-sample-app2@1.0.0 build
> webpack --config webpack.config.js

asset another.bundle.js 554 KiB [emitted] (name: another)
asset lodash.bundle.js 550 KiB [emitted] (name: lodash) (id hint: vendors)
asset index.bundle.js 14.2 KiB [emitted] (name: index)
runtime modules 9.2 KiB 17 modules
cacheable modules 532 KiB
  ./src/index.js 390 bytes [built] [code generated]
  ./src/another-module.js 83 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
webpack 5.69.1 compiled successfully in 316 ms

透過這些方法可以改善瀏覽器的快取速度。

Caching

章節最後也介紹了其他的 Plugin 來協助我們來預先載入或是減少記憶體用量。

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "Output Management",
      title: "Caching",
    }),
  ],
  output: {
    filename: "bundle.js",
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
  },
};

好了我們的第二章節 Working with Modules and Code Splitting 結束 🎉
後面的章節會再介紹有關 Webpack 的強大功能！敬請期待！

Apache Airflow 初體驗

Corey Lai — Fri, 11 Mar 2022 04:16:48 +0000

Airflow 是由 Airbnb 所貢獻的 Apache 頂級專案，用於流程控制，建立有向無環的工作流程(DAGs) ，以事件排程的方式部屬我們的 DAG Schedule 並可以部屬到各個雲端平台上， GCP / AWS / Azure，可透過網頁 UI 調配部屬排程，主打彈性、高擴充性、搭配Jinja Template Engine 優雅的設計 Workflow 工作流程！

1.建置 Airflow 環境 - 使用 Docker

下載官方提供 docker-compose 文件

curl -LfO 'https://airflow.apache.org/docs/apache-airflow/2.2.4/docker-compose.yaml'

產生相依目錄並設定 Airflow 使用者權限

mkdir -p ./dags ./logs ./plugins
echo -e "AIRFLOW_UID=$(id -u)" > .env

2.資料庫初始化

docker-compose up airflow-init

3.啟動 Airflow 服務

docker-compose up -d

確認我們的 Container 是否都健康！

4.下載 airflow 命令工具

curl -LfO 'https://airflow.apache.org/docs/apache-airflow/2.1.1/airflow.sh'
chmod +x airflow.sh

5.撰寫 Demo 程式

將我們第一隻 DAGs 程式放至於 Container掛載目錄 dags 下
dags/test_app_v1.py

import time
from datetime import datetime, timedelta
from airflow import DAG
from airflow.operators.python import PythonOperator

default_args = {
  'owner' : '',
  'start_date' : datetime(2022, 1, 1, 0, 0),
  'schedule_interval': '@daily',
  'retries':2,
  'retry_delay': timedelta(minutes = 1)

}


def fn_one(): 
  print('execute jobs')

with DAG('test_app_v1' ,default_args=default_args) as dag:
  tesk = PythonOperator(
    task_id = 'one',
    python_callable=fn_one
  )

6.透過 airflow.sh 將執行我們的 DAG 程式

# 建立運行 python container 
./airflow.sh bash
# 執行 python 檔案
python dags/test_app_v1.py

7.網頁中查看新建立的 test_app_v1 DAG

Airflow Web Server
http://localhost:8080
airflow/airflow

在執行py腳本後我們就可以在 Airflow 首頁中查找到我們的 DAG 排程！

查看執行狀態，使否有異常失敗等情況

8.REST API

使用 Airflow Rest Api 可以取代我們在 WebUI 上的工作，進行 DAG 的抓取執行刪除等工作。

https://airflow.apache.org/docs/apache-airflow/stable/stable-rest-api-ref.html

curl -X GET 'http://10.1.200.67:8080/api/v1/dags' --user "airflow:airflow"

{
  "dag_id": "test_app_v1",
  "description": null,
  "file_token": "",
  "fileloc": "/opt/airflow/dags/test_app_v1.py",
  "is_active": true,
  "is_paused": false,
  "is_subdag": false,
  "owners": [],
  "root_dag_id": null,
  "schedule_interval": {
    "__type": "TimeDelta",
    "days": 1,
    "microseconds": 0,
    "seconds": 0
  },
  "tags": []
}

Conclusion

很多需要進行排定的工作項目都可以在 Airflow 的幫助下進行運行，搭配 python的語法可以很快速的撰寫爬蟲、資料轉換、事件觸發等工作，Airflow 提供WebUI操作畫面可以讓我們更便利的去對我們的 DAGs 進行監控，解決了我們在設計排程上的諸多困難！

Dart - Mixin Vs Class

Corey Lai — Tue, 08 Mar 2022 03:15:39 +0000

在 Dart 中有一較為特殊的關鍵字， Mixin 透過這個關鍵字可以讓我們實現多重繼承的關係，透過將關鍵字分離，可以更清楚在宣告時我們應該如何對此類別進行設計。

1.標準繼承

Class Child 繼承來至 Class A 在呼叫建構子的時候，進行呼叫 getMessage() ，沒意外的得到 A Construct -->A.getMessage() 的訊息。

abstract class A {
  A() {
    print('A Construct');
    getMessage();
  }

  getMessage() {
    print('-->A.getMessage()');
  }
}

class Child extends A {}

void main() {
    Child child = Child();
}

Output

A Construct
-->A.getMessage()

2.加入Mixin使用

增加 mixin MB 並於混合於 Child 當中，MB Mixin 也是基於 A Class 所建構的，並透過 super 呼叫父類別的 getMessage 方法，也就是 -->A.getMessage() 。

mixin MB on A {
  @override
  getMessage() {
    print('-->MixMB.getMessage()');
    super.getMessage();
    print('-->MixMB');
  }
}

class Child extends A with MB {}

Output

A Construct
-->MixMB.getMessage()
-->A.getMessage()
-->MixMB

製造錯誤 🪲

我們嘗試把 class Child ~~extends A~~ with MB {} 。

Error: 'Object' doesn't implement 'A' so it can't be used with 'MB'.

此時編譯器提示錯誤，物件尚未實現 A 所以不可以混合 MB Mixin ，因為 MB 依賴著 Class A 所以如果混合 MB 時，類別未繼承制 A Class 就會得到提示，在使用上不可不留意！

3.再來一個Mix!

我們在替 Child Class 混合多一個類別， MC Mixin 程式與 MB Mixin 相同只是訊息部份從 MixMB 換成 MixMC 方便我們了解流程。

在MixMC中呼叫super.getMessage() 會先執行 MixMB 這邊Dart 使用堆疊的先進後出的方式，根據 with 後面的順序依序進行 pop 處理，就會看到我們的顯示結果！

mixin MC on A {
  @override
  getMessage() {
    print('-->MixMC.getMessage()');
    super.getMessage();
    print('-->MixMC');
  }
}

class Child extends A with MB, MC {}

Output

A Construct
-->MixMC.getMessage()
-->MixMB.getMessage()
-->A.getMessage()
-->MixMB
-->MixMC

4.再來一個Class!?

接著我們在替程式加上一個 Class B 並讓 MB 基於 A,B ，此時我們的Child 需要把B也跟著繼承，但是 extends 只能繼承一個Class 所以我們就把 B Class 用在 with 一起混入，執行後發現我們的 A Class 的getMessage 就被 B Class override 了，消失在我們的結果當中！

abstract class B {
  getMessage() {
    print('-->B.getMessage()');
  }
}

mixin MB on A,B {
  @override
  getMessage() {
    print('-->MixMB.getMessage()');
    super.getMessage();
    print('-->MixMB');
  }
}

class Child extends A with B, MB, MC {}

Output

A Construct
-->MixMC.getMessage()
-->MixMB.getMessage()
-->B.getMessage()
-->MixMB
-->MixMC

Conclusion

Dart 中使用 Mixin 可以讓我們的物件重用性更高，更能減少我們程式碼重複部份，但邏輯上可能就會便得更加的複雜，使用上不可不謹慎！

後續會增加更多 Dart/Flutter 的開發介紹，歡迎大家持續關注！

OpenGL Programming Using VSCODE

Corey Lai — Fri, 04 Mar 2022 07:31:51 +0000

這篇文章為一個簡單的開端，做為後續開發 OpenGL 的基礎教學，如何使用 VSCODE 來開發我們的 OpenGL 程式，這邊作業系統以 Ubuntu 為範例

首先第一步安裝我們的 OpenGL 開發工具 glfw3

透過 apt 安裝開發套件

sudo apt-get install libglfw3
sudo apt-get install libglfw3-dev

再來我們需要 GLAD 去管理 OpenGL 的各項功能，依照需要的功能去進行載入動作

GLAD

📁 透過網站產生檔案下載到本機中，並將檔案複製到 /usr/include 內

sudo cp -r * /usr/include

並將 glad.c 放入專案同目錄下
編寫 CMakeLists.txt

# cmake 版本
cmake_minimum_required(VERSION 3.9.1)
# 專案名稱
project(CMakeHello)
# 套件搜尋
find_package(glfw3 REQUIRED)
find_package(OpenGL REQUIRED)
find_package(Threads REQUIRED)
# 加入程式與連結函式庫
add_executable(hello_triangle hello_triangle.cpp glad.c)
TARGET_LINK_LIBRARIES(hello_triangle dl glfw3 pthread)

VSCODE

安裝 CMake Tools Extenstion

Hello Triangle

將撰寫範例程式 hello_triangle.cpp 這段範例程式在後面的章節中，會再做詳細的介紹！

#include <glad/glad.h>
#include <GLFW/glfw3.h>

#include <iostream>

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow *window);

// settings
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;

const char *vertexShaderSource = "#version 330 core\n"
    "layout (location = 0) in vec3 aPos;\n"
    "void main()\n"
    "{\n"
    "   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
    "}\0";
const char *fragmentShaderSource = "#version 330 core\n"
    "out vec4 FragColor;\n"
    "void main()\n"
    "{\n"
    "   FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
    "}\n\0";

int main()
{
    // glfw: initialize and configure
    // ------------------------------
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

#ifdef __APPLE__
    glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
#endif

    // glfw window creation
    // --------------------
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

    // glad: load all OpenGL function pointers
    // ---------------------------------------
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }


    // build and compile our shader program
    // ------------------------------------
    // vertex shader
    unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);
    glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
    glCompileShader(vertexShader);
    // check for shader compile errors
    int success;
    char infoLog[512];
    glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
    if (!success)
    {
        glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
    }
    // fragment shader
    unsigned int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
    glCompileShader(fragmentShader);
    // check for shader compile errors
    glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
    if (!success)
    {
        glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;
    }
    // link shaders
    unsigned int shaderProgram = glCreateProgram();
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);
    // check for linking errors
    glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
    if (!success) {
        glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << std::endl;
    }
    glDeleteShader(vertexShader);
    glDeleteShader(fragmentShader);

    // set up vertex data (and buffer(s)) and configure vertex attributes
    // ------------------------------------------------------------------
    float vertices[] = {
        -0.5f, -0.5f, 0.0f, // left  
         0.5f, -0.5f, 0.0f, // right 
         0.0f,  0.5f, 0.0f  // top   
    }; 

    unsigned int VBO, VAO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);
    // bind the Vertex Array Object first, then bind and set vertex buffer(s), and then configure vertex attributes(s).
    glBindVertexArray(VAO);

    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);

    // note that this is allowed, the call to glVertexAttribPointer registered VBO as the vertex attribute's bound vertex buffer object so afterwards we can safely unbind
    glBindBuffer(GL_ARRAY_BUFFER, 0); 

    // You can unbind the VAO afterwards so other VAO calls won't accidentally modify this VAO, but this rarely happens. Modifying other
    // VAOs requires a call to glBindVertexArray anyways so we generally don't unbind VAOs (nor VBOs) when it's not directly necessary.
    glBindVertexArray(0); 


    // uncomment this call to draw in wireframe polygons.
    //glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

    // render loop
    // -----------
    while (!glfwWindowShouldClose(window))
    {
        // input
        // -----
        processInput(window);

        // render
        // ------
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
        glClear(GL_COLOR_BUFFER_BIT);

        // draw our first triangle
        glUseProgram(shaderProgram);
        glBindVertexArray(VAO); // seeing as we only have a single VAO there's no need to bind it every time, but we'll do so to keep things a bit more organized
        glDrawArrays(GL_TRIANGLES, 0, 3);
        // glBindVertexArray(0); // no need to unbind it every time 

        // glfw: swap buffers and poll IO events (keys pressed/released, mouse moved etc.)
        // -------------------------------------------------------------------------------
        glfwSwapBuffers(window);
        glfwPollEvents();
    }

    // optional: de-allocate all resources once they've outlived their purpose:
    // ------------------------------------------------------------------------
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    glDeleteProgram(shaderProgram);

    // glfw: terminate, clearing all previously allocated GLFW resources.
    // ------------------------------------------------------------------
    glfwTerminate();
    return 0;
}

// process all input: query GLFW whether relevant keys are pressed/released this frame and react accordingly
// ---------------------------------------------------------------------------------------------------------
void processInput(GLFWwindow *window)
{
    if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
        glfwSetWindowShouldClose(window, true);
}

// glfw: whenever the window size changed (by OS or user resize) this callback function executes
// ---------------------------------------------------------------------------------------------
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    // make sure the viewport matches the new window dimensions; note that width and 
    // height will be significantly larger than specified on retina displays.
    glViewport(0, 0, width, height);
}

Compile & Run

<Ctrl> + <SHIT> + P 開啟VSCODE命令工具，執行 CMake:Debug

Result

Debug

我們可以在 VSCODE 下中斷點，來監看我們的變數

Conclusion

完成我們的基本配置，接下來就可以更順利的開發我們的 OpenGL 程式 !

Reference

https://learnopengl.com/Getting-started/Hello-Triangle

Skia - First Look Part 1

Corey Lai — Fri, 04 Mar 2022 03:37:51 +0000

Skia 是 Flutter 2D渲染引擎的底層框架，並應用於 Android、Google Chrome、Chrome OS、Chromium OS、Mozilla Firefox、Firefox OS以及Sublime Text、LibreOffice 。

✨ Feature

CPU 軟體點陣圖計算
GPU 加速渲染
透過 ANGLE 轉編譯 OpenGL 至 Native Api DirectX, Vulkan, Metal
PDF / XPS / SVG 格式輸出

可惜的是目前按照官網的方式嘗試多次都無法正常運行，~~所以原本寫的一篇文章就廢掉了😭~~

bin/gn gen out/Static
python2 tools/git-sync-deps
bin/gn gen out/Release  --args='is_debug=false'
ninja -C out/Release

-> failed!

其他苦主 ->
https://bugs.chromium.org/p/skia/issues/detail?id=12765&q=SkPDFSubsetFont&can=2

參考其他大多數的文章都已經過時老舊，索性有大神在去年分享了在Windows的做法，但使用 Skia 在 github上最新的版本編譯出的程式碼並無法正常在 VS 中運行，目前只能靠以下 github 中已經編譯好的 dll檔案進行測試。

https://github.com/nightelf3/FirstSkiaApp/tree/example

輕鬆點開我們的 Solution 就可以開始測試 Skia 的強大功能，

程式主要是 C++ WinApi 框架所開發的視窗程式範例，透過 Layer 將多個範例放入到我們的主程式中 !

透過 <Tab> 切換我們的範例

透過 <z> / <x> 可以切換 Raster 與 OpenGL

Raster

OpenGL

Conclusion

無法從原始碼編譯成功還是覺得有點小可惜，希望未來官方可以再補足文件，讓更多人有機會透過 Skia 進行開發。

未來的章結會再根據 Skia 開發進行更深入的說明，可能會搭配 OpenGL / Vulkan / Meta 等圖像庫一起進行研究 !

📣 大力祈求有其他先進好手能提供完整的 SKIA 建置教學 ! 📣

Reference

https://skia.org/docs/user/build/
https://chromium.googlesource.com/skia.git/+/chrome/m42/site/user/sample/hello.md
https://blog.csdn.net/yujunyu12/article/details/100859127
https://blog.csdn.net/var_Rain/article/details/79318208
https://github.com/cisen/blog/issues/464
https://kyamagu.github.io/skia-python/install.html
https://www.youtube.com/watch?v=lEj_GfH8is8&ab_channel=EngineeringCommunity

Introduction to Webpack 5

Corey Lai — Thu, 03 Mar 2022 01:23:06 +0000

Webpack 是一個帶有豐富多樣功能的前端網站包裝工具，將我們網站的各項資產 HTML, CSS, images, JS 進行包裝/壓縮/相容性排除/效能提昇等工作，這次就讓我們透過 Webpack 5 Up and Running 這本書一一剖析 Webpack 的各種強大功能吧！

1. Without Webpack or Other Module Bundler Library

首先先來測試看看，我們在沒有 Webpack 的情境下，應該如何進行作業。

Let's Do This Now 🔥

專案初始化

# 初始化專案
mkdir 01-sample-app && cd 01-sample-app
npm init -y

自動產生 package.json

{
  "name": "01-sample-app",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

撰寫 JS Component

Dir: src/index.js

function component() {
  let element = document.createElement('div');
  // _ 使用 lodash 第三方 Lib
  element.innerHTML = _.join(['Testing', 'without', 'webpack'], ' ');
  return element;
}

document.body.appendChild(component());

撰寫 HTML

Dir: index.html

<!doctype html>
<html>
  <head>
    <title>Webpack - Test</title>
    <!-- 引用 lodash Lib -->
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <!-- 載入 index Component -->
    <script src="./src/index.js"></script>
  </body>
</html>

結果預覽

完成我們的第一步驟! 實做如何在沒有 Webpack 的狀況下完成我們的網站！

2. With Webpack

專案初始化

# 初始化專案
mkdir 01-sample-app && cd 01-sample-app
npm init -y
# 安裝 webpack lib
npm install webpack webpack-cli --save-dev
# 安裝 lodash lib
npm install lodash

自動產生 package.json 看到多增加了 webpack / lodash 🌈

{
  "name": "01-sample-app2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

撰寫 JS Component

Dir: src/index.js

// 透過 webpack 的封裝我們可以直接使用 import 來引用我們所需要的 lib
import _ from 'lodash';
function component() {
  let element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'Webpack'], ' ');
  return element;
}

document.body.appendChild(component());

撰寫 HTML

Dir: dist/index.html

不需要在引用我們的lib webpack 會自動幫我們進行包裝

<meta charset="utf-8"/> ⬅️ 缺少這句在 Webpack5 production mode 狀況下會發生錯誤

<!doctype html>
<html>
  <head>
    <!-- webpack mode=production -->
    <meta charset="utf-8"/>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

使用 Webpack 進行編譯

npx webpack mode=development

開啟 index.html 預覽結果

好了我們的第一章節 Introduction to Webpack 5 結束 🎉
後面的章節會再介紹有關 Webpack 的強大功能！敬請期待！

Java Hot Reload Plan

Corey Lai — Wed, 02 Mar 2022 08:18:26 +0000

Java Hot Reload Plan

透過 DCEVM 可以達到與 JRebel 相同的熱重載效果。 😂

進入 http://dcevm.github.io/ 下載 Dynamic Code Evolution Virtual Machine

開啟 DCEVM 工具開啟，並指定要安裝的 JDK 版本

安裝完成後開啟喜好的 IDE 並設定 Java Opt

JAVA_OPTS = -XXaltjvm=dcevm -javaagent:c:/hotswap-agent.jar

完成收工 🙌🙌🙌

Git Basic Tutorial

Corey Lai — Tue, 01 Mar 2022 06:40:12 +0000

Git Tutorial

Git Command 影響範圍

Gitlab 專案初始化

Command line instructions

Git global setup

git config --global user.name "Corey Lai"
git config --global user.email "corey.lai@deanshoes.com"

Create a new repository

git clone http://gitlab/ws/wsrm-react-ide.git
cd wsrm-react-ide
touch README.md
git add README.md
git commit -m "add README"
git push -u origin master

Existing folder

cd existing_folder
git init
git remote add origin http://gitlab/ws/wsrm-react-ide.git
git add .
git commit -m "Initial commit"
git push -u origin master

Existing Git repository

cd existing_repo
git remote add origin http://gitlab/ws/wsrm-react-ide.git
git push -u origin --all
git push -u origin --tags

創建

在local端建立一個

$ git init

從gitlab內載入已經建立的庫

$ git clone http://gitlab/zk/deplm.git

Local 端操作

顯示目前已修改文件

$ git status

顯示與上次提交版本不同處

$ git diff

將修改檔案加入index

# 所有修改進行提交
$ git add .
# 指定特定文件進行提交
$ git add -p{patch 批次確認} <filename>
# 解決衝突後，將檔案標記為以解決
$ git add <resolved-filename>

提交更改

$ git commit -a{略過 git add 步驟}
$ git commit -m "comment"
$ git commit --amend {撤回提交}

git history

顯示歷程

$ git log
#顯示指定檔案所有修改
$ git log -p <filename>

分支

git branch

# 顯示所有分支
$ git branch -av
# 基於當前分支創建新分支
$ git branch <new-branch>
# 刪除本地分支
$ git branch -d <branch>
# 刪除遠端分支
$ git branch -dr <branch>

git tag
給當前提交設標籤

$ git tag <tag-name>

更新與發佈

git remote

# 列出遠端庫
$ git remote -v
# 新增遠端庫
$ git remote add <nickname> <url>

git fetch

# 取得遠端庫所有變動，不合併到local
$ git fetch <remote>
#

git pull

# 取得遠端庫所有變動，不合併到local
$ git pull <remote> <branch>
$ git pull origin development

合併

git merge

# 將當前分支合併到指定分支
$ git merge <branch>

git rebase

# 將當前分支重新接枝到指定分支
$ git rebase <branch>
# 終止rebase
$ git rebase --abort
# 解決衝突後繼續重新接枝
$ git rebase --continue

撤銷

git reset

# 放棄目前所有修改
$ git reset --hard HEAD
# 回到指定commit，並將之後修改標記
$ git reset <commit>
# 放棄目前所有修改，並回到指定commit
$ git reset --hard <commit>
# 回到指定commit，並保留local尚未提交的修改
$ git reset --keep <commit>
# 取消已 add file
$ git reset HEAD <filename>

git revert

# 回到前一次 commit 的狀態
$ git revert HEAD

本機憑證快取

記憶憑證

git config credential.helper store

清除憑證

git config --global --unset credential.helper
git config --system --unset credential.helper

Git checkout

Git 從特定 branch 取得特定檔案

$ git checkout <another-branch> <path-to-file> [<one-more-file> ...]
$ git status
$ git commit -m "'Merge' specific file from '<another-branch>'"

Git 標準流程

如專案已從 Gitlab 上下載並開發完成請從 Step 5. 開始

# Step 1. 
$ git clone http://gitlab/zk/<project>.git
# Step 2. 
$ git checkout development
# Step 3. 
$ git pull
# Step 4.
Coding ...
# Step 5.
$ git add <file> or . {all file that was changed}
# Step 6. check the files you add
$ git status
# Step 7.
$ git commit -m "comment"
# Step 8.
$ git push origin development
# Step 9. git conflict happen
Resolve... 
# Step 10. git conflict happen
$ git add <resolved-file>
# Step 11.
$ git push origin development

Git merge branch

$ git checkout release
$ git merge development
$ git add .
$ git push

### forced update
$ git checkout release
$ git reset --hard development
$ git push --force origin release

Git feature

1. merge origin/master branch to feature branch

# step1: change branch to master, and pull to update all commits
$ git checkout master
$ git pull

# step2: change branch to target, and pull to update commits
$ git checkout feature
$ git pull

# step3: merge master to feature(⚠️ current is feature branch)
$ git merge master

2. merge feature branch to origin/master branch

$ git checkout master
$ git pull origin master

$ git merge feature
$ git push origin master

gitignore file

git rm -r --cached .
git add .
git commit -m ".gitignore"

git branch

feature

# create feature
git checkout -b desc-feature master
git status
git add <some-file>
git commit

# finish dev
git push -u origin desc-feature
git push

# merge master
git checkout master
git pull
#git pull origin desc-feature
git merge desc-feature

git push

git branch -d desc-feature

Git module

git submodule add <repository> [<path>]</path></repository>

Mongodb + GraphQL + Django

Corey Lai — Tue, 01 Mar 2022 06:27:43 +0000

Mongodb + GraphQL + Django

Mongodb installation

Mongodb Image

docker pull mongo
docker run --name mongodb mongo
docker ps
================================
CONTAINER ID        IMAGE               COMMAND                  CREATED      STATUS              PORTS                      NAMES
2fef936de7f9        mongo               "docker-entrypoint.s"    10 days ago  Up About an hour    0.0.0.0:27017->27017/tcp   mongodb

Mongodb Compass

Django Constructor

conda update conda
conda create --name NGDP python=3.6
activate NGDP
(NGDP) D:\NGDP>

conda install -y Django=3.1.2
conda install -y -c conda-forge django-cors-headers
conda install -y  -c conda-forge graphene-django
conda install -y  -c conda-forge graphene-mongo
conda install -y  -c conda-forge django-filter
conda install -y  -c conda-forge mongoengine
conda install -y  -c conda-forge mongomock
conda install -c conda-forge neo4jdjango
conda install pytest
conda install pytest-django

django-admin startproject ngdp
conda install pip

Start Project

django-admin startproject shoesstore
cd shoesstore
django-admin startapp store
django-admin startapp shoes

Start Programming (Backend)

Project Structure

shoesstore/settings.py

# 載入 mongodb 引擎
from mongoengine import connect

# 允許所有裝置連線
ALLOWED_HOSTS = ['*']

# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 預載程式
    'graphene_django',
    'graphene_mongo',
    'store',
    'shoes'
]

# mongodb connection
_MONGODB_USER = ""
_MONGODB_PASSWD = ""
_MONGODB_HOST = "localhost"
_MONGODB_NAME = "shoesstore"
_MONGODB_PORT = 27017
_MONGODB_DATABASE_HOST = "mongodb://%s:%s@%s/%s" % (
    _MONGODB_USER,
    _MONGODB_PASSWD,
    _MONGODB_HOST,
    _MONGODB_NAME,
)

connect(_MONGODB_NAME, host=_MONGODB_HOST, port=_MONGODB_PORT)

# Graphql Schema
GRAPHENE = {"SCHEMA": "shoesstore.schema.schema"}

shoesstore/urls.py

# 增加 graphql 路徑，csrf_exempt 跨網站請求豁免
urlpatterns = [
    path('admin/', admin.site.urls),
    path("graphql", csrf_exempt(GraphQLView.as_view(graphiql=True)), name="graphql-query")
]

Graphql

query ($name: String) {
  bikes(first:1, name_Istartswith: $name) {
    totalCount
    pageInfo {
      hasPreviousPage
      hasNextPage
    }
    edges {
      node {
        name
        brand
        year
        size
        wheelSize
        type
      }
    }
  }
}

query {
  allCategories(first: 1, after: "opaqueCursor") {
    edges {
      node {
        name,
        ingredients {
          edges {
            node {
              name
            }
          }
        }
      }
    }
      pageInfo {
        hasNextPage
      }
  }
}

{
  shoes(first: 2) {
    totalCount
    pageInfo {
      startCursor
      hasNextPage
      hasPreviousPage
      endCursor
    }
    edges {
      cursor
      node {
        name
        brand
        model
        id
      }
    }
  }
}

query ($name: String) {
  bikes(first:2, name_Istartswith: $name, after: "YXJyYXljb25uZWN0aW9uOjE=") {
    totalCount
    pageInfo {
      endCursor
      hasPreviousPage
      hasNextPage
    }
    edges {
      node {
        id
        name
        brand
        year
        size
        wheelSize
        type
      }
      cursor
    }
  }
}

React Native App

expo init ShoesStoreProjectR