DEV Community: Atthaphon Urairat

ใช้ ChatGPT Plus แทน AI Agent ยังไง

Atthaphon Urairat — Mon, 26 May 2025 16:38:21 +0000

ช่วงหลัง ๆ นี้ AI กลายเป็นผู้ช่วยที่ขาดไม่ได้ในชีวิตผมไปแล้ว โดยเฉพาะ ChatGPT Plus ที่ผมจ่ายเงินสมัครใช้งานทุกเดือน ถึงแม้ในตลาดจะมี AI Agent ทางเลือกใหม่ ๆ ออกมามากมาย แต่ผมยังเลือกอยู่กับ ChatGPT เพราะมันตอบโจทย์ทั้งในแง่ความสามารถและความคุ้มค่า และที่สำคัญ ผมสามารถปรับวิธีใช้งานให้มัน “รู้จักโปรเจกต์ผม” ได้ดีขึ้นเรื่อย ๆ

วันนี้เลยอยากมาแชร์แนวทางที่ผมใช้ให้ ChatGPT ทำงานได้เหมือน AI Agent ส่วนตัว — โดยไม่ต้องจ่ายเพิ่ม

จุดเริ่มต้น: จากคนที่ใช้ AI ช่วยแค่เรื่องเล็ก ๆ

ตอนแรก ผมใช้ AI แค่ช่วยเขียนอีเมลภาษาอังกฤษ หรือหาสาเหตุเวลาเจอ error แปลก ๆ แทนที่จะเปิด Google, Stack Overflow หรือดู Issue ใน Github โดยไล่หาด้วยตัวเอง ซึ่งก็ช่วยประหยัดเวลาไปได้เยอะ

ต่อมาเริ่มใช้เขียนโค้ดแบบจริงจัง — ตั้งแต่ยุค GitHub Copilot จนตอนนี้มาจบที่ ChatGPT Plus ซึ่งกลายเป็นเครื่องมือที่ใช้ทุกวัน ไม่ใช่แค่ตอนเขียนโค้ด แต่รวมถึงงานอื่น ๆ อย่าง:

เขียนสคริปต์หรือเทสเคสให้ทีม QA
แนะนำไอเดียเวลาตัน
ช่วยสอนการบ้านลูก 😄

ทำไมยังไม่เปลี่ยนไปใช้ AI Agent อื่น?

AI Agent หลายตัวมีฟีเจอร์น่าสนใจ แต่ส่วนใหญ่ต้องจ่ายเพิ่มหรือซื้อเครดิตเพิ่ม ซึ่งโดยส่วนตัวแล้ว ผมคิดว่า ChatGPT Plus ก็เพียงพอแล้ว — โดยเฉพาะถ้ารู้จักใช้ให้ถูกวิธี

อีกอย่างคือ ChatGPT ใช้ร่วมกับ extension บน VS Code ได้ และตอนนี้มันก็สามารถจำ session ได้ดีขึ้นมาก แถมรองรับการอัปโหลดไฟล์เพื่อช่วยวิเคราะห์ context ของโค้ดเราได้แล้ว

วิธีที่ผมเปลี่ยนการใช้งานโดย เขียน `PROJECT.md`

ผมค้นพบว่า การมีไฟล์สรุปโปรเจกต์ (ในรูปแบบ markdown) ช่วยให้ ChatGPT เข้าใจงานเราได้ลึกขึ้น และติดตามความคืบหน้าได้เหมือนเป็นเพื่อนร่วมงานจริง ๆ

ในไฟล์นั้นจะมี

เป้าหมายของแอป
เทคโนโลยีที่ใช้
โครงสร้างโฟลเดอร์
ฟีเจอร์ที่ทำเสร็จแล้ว / วางแผนไว้
และโน้ตอื่น ๆ ที่อยากให้ ChatGPT ช่วย

ทุกครั้งที่เริ่ม session ใหม่ ผมจะส่งไฟล์นี้ให้ก่อน แล้วจึงค่อยคุยหรือให้มันช่วย implement ทีละฟีเจอร์

ปัญหาที่เจอ และวิธีแก้ ผมใช้ zip code ก่อนเริ่มงาน

แม้จะมี PROJECT.md แล้ว แต่เมื่อห่างจากงานไปนาน ๆ ผมก็ยังเจอว่าเจ้า ChatGPT จำอะไรไม่ได้เท่าที่ควร

ทางออกของผมคือ zip โค้ดโปรเจกต์ แล้วอัปโหลดให้ ChatGPT วิเคราะห์เอง

ผมสร้าง CLI เล็ก ๆ ที่ชื่อว่า chatpack ซึ่งจะ zip เฉพาะไฟล์ที่จำเป็น (โดยใช้ .chatpackignore) พร้อมกับรวม PROJECT.md เข้าไปใน zip นั้นด้วย

พอเปิด session ใหม่ ก็แค่อัปโหลด zip นั้นให้กับ ChatGPT แล้วมันจะช่วยผมทำงานต่อได้เหมือนเดิม

ตัวอย่าง: ChatGPT ช่วยอัปเดต `PROJECT.md` เอง

อีกไอเดียที่ผมใช้คือ ให้ ChatGPT เป็นคนอัปเดตไฟล์ PROJECT.md ให้เองหลังจากทำ feature เสร็จ เช่น

"ช่วยเพิ่ม section สำหรับฟีเจอร์ Apply Tracking ที่เพิ่งทำเสร็จเมื่อกี้ลงไปใน PROJECT.md ด้วย"

แบบนี้เวลาผมกลับมาทำงานวันถัดไป ก็เหมือนมีบันทึกย่อพร้อมให้เริ่มทำงานต่อทันที

แล้วเรื่องความปลอดภัยล่ะ?

นี่เป็นสิ่งที่ผมระวังมาก เพราะบางโปรเจกต์เป็นของบริษัทหรือมีข้อมูลที่ต้องปกปิด

ผมจัดการความเป็นส่วนตัวยังไง:

ปิดการแชร์ข้อมูลกับ OpenAI
ไปที่ ChatGPT → Settings → Data Controls แล้วปิด Improve the model for everyone
ระวังไม่ใส่ข้อมูลสำคัญใน zip
ใช้ .chatpackignore เพื่อไม่ให้ zip พวก .env, API key, customer data หรือ credentials ต่าง ๆ เข้าไป
ใช้แค่ environment local
สำหรับพวกไฟล์ config ผมมักจะเก็บไว้เฉพาะในเครื่อง ไม่รวมไว้ใน repo ด้วยซ้ำ

สรุป

ถ้าคุณใช้ ChatGPT อยู่แล้ว ลองใช้แนวทางนี้ดูครับ:

เขียน PROJECT.md ช่วยให้ AI เข้าใจ context
zip เฉพาะไฟล์ที่จำเป็นด้วยเครื่องมือแบบ chatpack
เริ่มต้นทุกวันด้วย context ที่พร้อมใช้งาน

และที่สำคัญ...คุณไม่จำเป็นต้องจ่ายแพงขึ้น เพื่อให้ได้ AI Agent ที่รู้จักคุณมากขึ้น — แค่ใช้ ChatGPT ให้ “ฉลาดขึ้น” ก็พอแล้ว

หากใครสนใจลอง chatpack เข้าไปดูได้ที่
🔗 https://github.com/uatthaphon/chatpack

ผมเขียนให้ใช้ได้ง่าย และรองรับทุกคนที่ใช้ ChatGPT เป็นผู้ช่วยในงานแบบจริงจังครับ

MariaDB ROW_NUMBER() ช่วยได้

Atthaphon Urairat — Mon, 24 Jan 2022 15:56:06 +0000

วันนี้มาแชร์ปัญหาที่เจอตอนทำงานและวิธีแก้ไข เรื่องมีอยู่ว่า เรามีข้อมูลที่ต้องแก้ไข ซึ่งข้อมูลชุดนี้มีการจัดเรียง priority ตามลำดับแบ่งตาม group id ต่างๆ และดาต้าเบสที่เราใช้คือ MariaDB

ความเป็นมา

ปัญหาที่เจอเป็นเรื่องของข้อมูลที่ผิดเพี้ยนไป เนื่องจากตัวระบบมีการอัพเดตข้อมูลผิดพลาด ตัวอย่างชุดข้อมูลจะเป็น

Table property_informations

id	name	group_id	priority
1	Condo floor 1	1	1
2	Condo floor 2	1	2
3	Condo floor 3	1	2
4	House room 1	2	1
5	House room 2	2	1
6	House room 3	2	1
7	House room 4	2	1

ตอนนี้ปัญหาคือ ข้อมูลมีการเรียง priority ผิดพลาด ซึ่งถ้าชุดข้อมูลที่มีปัญหามีน้อย เราก็สามารถที่จะแก้ไขข้อมูลแบบ manual ได้ไม่เสียเวลานัก แต่เหตุการณ์จริงคือ ชุดข้อมูลที่ต้องการแก้ไขมีเยอะๆๆๆ มาก

โจทย์คือ จากชุดข้อมูลที่เรามี เราต้องการเรียง priority ใหม่ทั้งหมดให้ถูกต้อง โดยอิงจาก group_id และเรียง order ตาม id แบบ asc ได้เลย

น้อง บูมสุดหล่อ ที่ทำงานด้วยกันแนะนำ ROW_NUMBER() เพื่อนำมาใช้แก้ไขปัญหา ซึ่งก็ได้ผลดีและเร็วมากทั้งกับการเช็คข้อมูล และ การแก้ไข

SELECT QUERY เริ่มต้นการสร้าง Query เพื่อตรวจสอบ

SELECT 
    property_informations.id,
    property_informations.name,
    property_informations.group_id,
    property_informations.priority AS current_priority,
    sub_property_informations.new_priority
FROM property_informations
INNER JOIN (
    SELECT 
        ROW_NUMBER() OVER (PARTITION BY group_id ORDER BY id asc) new_priority,
        id
    FROM property_informations
) sub_property_informations ON sub_property_informations.id = property_informations.id

เมื่อเรา run คำสั่ง sql เราจะผลลัพธ์เพื่อตรวจเหมือนในตาราง

id	name	group_id	current_priority	new_priority
1	Condo floor 1	1	1	1
2	Condo floor 2	1	2	2
3	Condo floor 3	1	2	3
4	House room 1	2	1	1
5	House room 2	2	2	2
6	House room 3	2	2	3
7	House room 4	2	2	4

เมื่อดูที่ column current_priority และ new_priority จะเห็นได้ว่า ส่ิงที่เราต้องการที่จะอัพเดตหน้าตาจะเป็นอย่างไร

UPDATE QUERY จัดการอัพเดตรวดเดียวไปเลย

UPDATE
  property_informations
  JOIN 
    ( 
      SELECT id, ROW_NUMBER() OVER (PARTITION BY group_id ORDER BY id asc) AS new_priority 
      FROM property_informations
    ) AS sub_property_informations
  ON sub_property_informations.id = property_informations.id
SET 
  property_informations.priority = sub_property_informations.new_priority;

เมื่อรัน update query ด้านบน ข้อมูลจะถูกอัพเดตเป็น

id	name	group_id	priority
1	Condo floor 1	1	1
2	Condo floor 2	1	2
3	Condo floor 3	1	3
4	House room 1	2	1
5	House room 2	2	2
6	House room 3	2	3
7	House room 4	2	4

เท่านี้เราก็สามารถแก้ไขข้อมูลปริมาณเยอะๆ ได้ในคราวเดียว แต่เวลาใช้ก็อย่าลืม Backup ข้อมูลไว้ก่อนด้วยนะครับ

Laravel Package Starter Kits

Atthaphon Urairat — Thu, 20 May 2021 10:33:13 +0000

เอา Repository มาแชร์ครับ พอดีช่วงนี้ดูทรงแล้วน่าจะได้เขียน package เรื่อยๆ เลยทำตัว starter kits เอาไว้เลย ก็เลยอยากเอามาแชร์เผื่อเป็นประโยชน์กับเพื่อนๆ ครับ

เข้าไปดูดได้จาก https://github.com/uatthaphon/laravel-package-starter-kits

ไปดูกันเลยครับ

Table of contents

Laravel Package Starter Kits
- Directory Structure 🗂️
- Package Skeleton 🦴
- Development Environment 🌱
- การ import package ที่เรากำลังพัฒนาเข้าไปใน laravel project ซึ่งอยู่บนเครื่องของเราแบบ locally 🏠
- สิ่งที่ต้องปรับเปลี่ยนก่อนทำการ Coding ✅
- License

Laravel Package Starter Kits

ชุดตั้งต้นใช้สำหรับการเริ่มสร้าง Laravel Package

Directory Structure 🗂️

- src
- tests
CHANGELOG.md
README.md
LICENSE
composer.json

Package Skeleton 🦴

สำหรับการเริ่มต้นสร้าง package เราไม่จำเป็นที่จะต้องวาง package ของเราเอาไว้ใน laravel project folder ก็ได้

ผมแนะนำให้เราสร้าง folder package วางไว้ในระดับเดียวกันกับ folder ของ laravel project ที่เราจะเอาไว้ใช้ทดสอบ package ของเรา

ตัวอย่างเช่น ผมสร้าง package เอาไว้ที่ ~/packges/ โดยที่ตัว folder ของ laravel ผมก็วางเอาไว้ที่ระดับเดียวกันกับ package ก็ได้ ~/laravel-website

Development Environment 🌱

ให้เราปรับแก้ไฟล์ต่างๆ ที่มีอยู่ใน Directory Structure ตามความต้องการได้เลย

การ import package ที่เรากำลังพัฒนาเข้าไปใน laravel project ซึ่งอยู่บนเครื่องของเราแบบ locally 🏠

ตัวอย่างเช่น ในกรณีที่เราวาง package ที่เราสร้างไว้ในระดับเดียวกันกับ laravel project ที่เรากำลังพัฒนา

/packages/my-package
/laravel-website

เราสามารถเรียก package ที่อยู่บนเครื่อง local ของเราได้ตามตัวอย่างด้านล่างนี้ได้

// laravel-website/composer.json

{
  "scripts": { ... },

  "repositories": [
    {
      "type": "path",
      "url": "../packages/my-package"
    }
  ]
}

จากนั้นเราต้องทำการเรียกคำสั่ง composer require เพื่อเพิ่ม package ที่เรากำลังทำการพัฒนาให้เข้ามารวมอยู่ใน autoload ด้วยคำสั่งด้านล่างนี้ครับ

ชื่อของ pacakge ก็ตามที่เราตั้งเอาไว้ใน composer.json เลยครับ เช่นของผมตั้งไว้ว่า

// laravel-website/composer.json

{
    "name": "uatthaphon/packagename"
    ...
},

ผมก็รันคำสั่งเรียกเป็น

comsopser require uatthaphon/packagename

สิ่งที่ต้องปรับเปลี่ยนก่อนทำการ Coding ✅

[ ] แก้ข้อมูลใน LICENSE ไฟล์

// LICENSE

Copyright (c) Atthaphon Urairat <- เปลี่ยนตรงนี้ครับ

[ ] แก้ข้อมูลใน composer.json

// pacakges/my-package/composer.json

{
    "name": "uatthaphon/package-name", <- เปลี่ยนตรงนี้ครับ

    ...

    "authors": [
        {
            "name": "Atthaphon Urairat", <- เปลี่ยนตรงนี้ครับ
            "email": "u.atthaphon@gmail.com" <- เปลี่ยนตรงนี้ครับ
        }
    ],

    ...
    "autoload": {
        "psr-4": {
            "Uatthaphon\\PackageName\\": "src" <- เปลี่ยนตรงนี้ครับ
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Uatthaphon\\PackageName\\Tests\\": "tests" <- เปลี่ยนตรงนี้ครับ
        }
    },

    ...

    "extra": {
        "laravel": {
            "providers": [
                "Uatthaphon\\PackageName\\PackageNameServiceProvider" <- เปลี่ยนตรงนี้ครับ
            ]
        }
    },
}

[ ] แก้ชื่อไฟล์ตั้งต้น และ namespace

ชื่อของไฟล์ที่ต้องเปลี่ยน

src/PackageNameServiceProvider.php

namespace ที่ต้องเปลี่ยน

// src/PackageNameServiceProvider.php

<?php

namespace Uatthaphon\PackageName; <- เปลี่ยนตรงนี้ครับ

Happy Coding ครับ 🥰🥰🥰

อีกนิดครับ ใน composer.json มี script ที่เอาไว้รัน test แล้วครับ ดังนั้นเราไม่ต้องเพิ่มคำสั่งยาวๆอย่าง ./vendor/phpunit/phpunit/phpunit เพื่อทำการเทสนะครับ ให้ใช้คำสั่งนี้ก็พอ

composer test

composer testUnit

composer testFeature

composer testVerbose

License

The MIT License (MIT). Please see License File for more information.

รัน Laravel 8 ด้วย Sail บน Mac M1

Atthaphon Urairat — Sat, 24 Apr 2021 10:05:49 +0000

ผมเพ่ิงได้ใช้ Macbook Air ซึ่งใช้ M1 chip มาครับ และก็ได้เจอปัญหาตอนที่ลองใช้ Docker ในการใช้งาน laravel นิดหน่อย เลยอยากจะมาแชร์ให้ฟังเผื่อคนที่เจอปัญหาเดียวกันจะได้นำไปแก้ไขได้ครับ

ต้องขอบอกก่อนว่าตอนที่ผมใช้นั้น Docker Desktop รองรับการใช้งาน M1 Chip แล้วนะครับ แต่ปัญหาจะอยู่ที่ Image บางตัวที่อาจจะยังไม่รองรับเท่านั้น เอาล่ะมาดูกันเลยครับ

ขั้นแรกเลยให้เราติดตั้ง Laravel ด้วยคำสั่ง

# เปลี่ยน "my-app" ให้เป็นชื่อโปรเจ็คที่เราต้องการ
curl -s https://laravel.build/my-app | bash

การใช้คำสั่งนี้แทนที่จะใช้คำสั่ง composer ในการสร้างโปรเจ็คนั้นจะทำให้เราได้ ไฟล์ Dockerfile และ Default setting สำหรับ Docker มาโดยอัตโนมัติ โดยที่เราไม่ต้องมานั่ง setup docker เองให้เสียเวลา แต่สำหรับ M1 เมื่อดาวโหลด laravel ด้วยคำสั่งนี้จะติดปัญหาที่ตัว MySQL ครับ

แก้ไขปัญหาเพื่อทำให้ MySQL สามารถทำงานได้

ปัญหาตอนนี้คือ ณ ปัจจุบัน MySQL ไม่สามารถทำงานร่วมกันได้กับสถาปัตยกรรม arm ของ M1 การแก้ไขอาจทำได้มากกว่า 1 วิธี เช่นการเปลี่ยนไปใช้ MariaDB image แทน แต่วันนี้จะขอแสดงวิธีแก้ไขด้วยการเพิ่ม platform linux/x86_64 แทนครับ

ให้เราเปิดไฟล์ docker-compose.yml ขึ้นมาและเพ่ิม platform: 'linux/x86_64' ตามตัวอย่างด้านล่างได้เลยครับ

services:
  mysql:
    image: 'mysql:8.0'
    platform: 'linux/x86_64'
    ...

ในส่วนของด้าน performance แล้วการเพ่ิม emulator linux/x86_64 เข้ามาจะมีผลทำให้เ MySQL ช้าลง แต่อย่างไรก็ดี การทดลอง โปรแกรมในเครื่อง local โดยมากก็ไม่ได้ใช้ข้อมูลทั้งหมดเหมือนใน production ดังนั้นการใช้งาน docker ที่เครื่อง local แบบนี้ก็ไม่น่าจะเป็นประเด็นเท่าไหร่นัก เว้นเสียแต่คุณจะ deploy setting นี้ขึ้น production

หลังจากนั้นก็ทดสอบการใช้งาน Laravel ได้เลย

ทำการ spin up container ด้วยคำสั่ง

./vendor/bin/sail up

จากนั้น รอสักพัก เพื่อให้มันทำการ build เสร็จแล้วก็ไปทดสอบโดยคลิ๊กเข้าไปที่ลิงค์ http://localhost ได้เลย

MAMP ตั้งค่า Virtual Hosts

Atthaphon Urairat — Sun, 17 Nov 2019 06:20:39 +0000

ผมหาบทความการตั้งค่า Virtual Hosts ในภาษาไทยได้ยากเหลือเกินเมื่อตอนเริ่มทดลองใช้งาน แต่ในส่วนบทความภาษาอังกฤษก็พอมีอยู่บ้าง และหลังจากที่ได้ทดลองกับตัวเองเป็นที่เรียบร้อยแล้วก็เลยอยากเอามาแชร์ให้เพื่อนๆที่กำลังหาวิธีติดตั้ง Virtual Hosts ได้ใช้เป็นบทความอ้างอิงเอาไว้ใช้ในยามจำเป็น

MAMP คือ

MAMP คือโปรแกรมที่ใช้ในการจำลอง Web Server บนเครื่องคอมพิวเตอร์ของเรา ซึ่งเราสามารถเลือกได้ว่าจะใช้ PHP version ไหน หรือจะเลือก Web Server เป็น Apache หรือ Nginx และ MySQL ซึ่งมี Interface ที่ใช้งานได้ง่ายมากๆ ดูเพิ่มเติมที่ MAMP

Virtual Hosts คือ

Virtual Hosts คือการจำลอง host เพื่อให้รันได้กับหลายๆเว็บ เพราะโดยปกติ Web server จะใช้ได้กับ เว็บเดียวต่อ server แต่ถ้าทำ Virtual Hosts ก็จะสามารถใช้งานแยกได้หลายๆ เว็บด้วยการทำงานจาก web server ตัวเดียวกัน

บทความนี้จะไม่ขอพูดถึงเรื่องการคิดตั้ง MAMP นะครับ เพราะมันง่ายมากๆ เพียงแค่เพื่อนๆ ดาวน์โหลดมาติดตั้งและดับเบิ้ลคลิก ไอคอนขึ้นมาเราก็สามารถใช้งานได้แล้วครับ เราจะมาพูดเรื่องที่มันน่าสนใจมากกว่านั้น นั่นคือการตั้งค่า Virtual Hosts

อนุญาตให้สามารถใช้งาน Virtual Hosts

Mac

เปิดไฟล์ Applications > MAMP > conf > apache > httpd.conf จากนั้นลองหาบรรทัดที่เหมือนกับโค้ดด้านล่าง

# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

เมื่อเจอแล้วก็ให้ทำการ uncomment ดังเช่นโค้ดตัวอย่างด้านล่าง

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

อนุญาต SymLink Override

เปิด httpd.conf ไฟล์และมองหา

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None
</Directory>

จากนั้นให้ทำการเปลี่ยน None เป็น All

<Directory />
  Options Indexes FollowSymLinks
  AllowOverride All
</Directory>

เพิ่มโปรเจคที่ต้องการทำ Virtual host

ปรกติที่อยู่ของโปรเจคที่เราต้องการเพิ่มจะอยู่ใน Applications > MAMP > htdocs ซึ่งถือเป็นค่าเร่ิมต้น แต่เมื่อเราต้องการเพิ่มโปรเจคที่เก็บไว้ในโฟลเดอร์อื่น เราก็สามารถที่จะทำได้เช่นเดียวกัน

เรามาลองเพิ่มกันเลย เริ่มจากเปิดไฟล์ extra/httpd-vhosts.conf จากนั้นเราก็ทำการเพิ่มโค้ดลงไปในบรรทัดสุดท้ายของไฟล์

<VirtualHost *:80>
  ServerName example.localhost
  DocumentRoot "/path/to/project_directory"
</VirtualHost>

ให้เราทำการเปลี่ยน DocumentRoot ให้เป็นที่อยู่ของโปรเจคที่เราต้องการทำ virtual host ได้เลยครับ

อย่างเช่น โปรเจคของผมเก็บไว้ใน /Users/uatthaphon/websites/myproject

/Users/uatthaphon/websites/myproject

จากนั้นก็ทำการ restart server ของ MAMP เพื่อทำให้เซิร์ฟเวอร์ รับรู้การแก้ไขที่เกิดขึ้น

การตั้งชื่อโดเมนในเครื่องหรือใน local

เปิดไฟล์ hosts ด้วย text editor ที่เราถนัดได้เลยครับ ของผมใช้ sublime ซึ่งได้ทำการสร้างทางลัด (symlink) เอาไว้แล้ว ถ้าใครสนใจการสร้าง symlink ของ sublime สำหรับเปิดจาก commandline ก็สามารถเข้าไปดูได้จาก Sublime OS X Command Line

subl /etc/hosts

จากนั้นผมก็จะทำการเพิ่มโดเมนที่ใช้ใน local ของตัวเองเข้าไปเหมือนในตัวอย่างด้านล่างนะครับ

จะเห็นได้ว่าในบรรทัดที่สิบ ผมได้ทำการเพิ่ม domain ใหม่เข้าไป และทำให้เครื่องคอมพิวเตอร์ของผมจดจำชื่อโดเมนนี้เอาไว้ ซึ่งจะทำให้ผมสามารถเปิดมันได้จากหน้าเว็บเบราว์เซอร์จากเครื่องคอมของผมเอง

127.0.0.1     example.localhost

ใกล้เสร็จแล้วครับ ทีนี้เราก็เหลืออีกเพียงไม่กี่ขั้นตอนแล้วครับ

ต่อเลยนะครับ

ต่อไปเราต้องทำการ Restart MAMP server อีกครั้งหนึ่ง เพื่อทำให้มันจดจำการอัปเดตของเราครับ หลังจาก Restart เรียบร้อยแล้วให้เราลองเปิด example.localhost ในหน้าเว็บเบราว์เซอร์ กันเลยครับ

ผมสร้างไฟล์ index.php ซึ่งใส่ echo "Hello world!!! Atthaphon is here!!!"; เอาไว้ในโฟลเดอร์ /Users/uatthaphon/websites/myproject ครับ

เรียบร้อยแล้วครับ จากนั้นถ้าหากว่าเราต้องการเพิ่มโปรเจคและโดเมนใหม่ก็ให้ทำตามขั้นตอนเดิมได้เลยนะครับ โดยการเพิ่มโปรจเจ็คอื่นๆ ต่อท้ายไฟล์ไปเรื่อยๆ ครับและถ้าหากต้องการเพิ่มโดเมนใหม่ก็ให้ไปเพิ่มที่ hosts ไฟล์ได้เลยครับ

คนรู้จักแทงบน 3 ตัวตรง แต่ลืมกลับเลขเลยถูกกิน

Atthaphon Urairat — Thu, 11 Jul 2019 02:11:09 +0000

เสี่ยงโชค

"โชคร้ายพี่ลืมกลับเลข ไม่งั้นล่ะก็นะ~~~~" เสียงบ่นจากพี่ที่ผมรู้จัก ซึ่งเป็นเหมือนคำพูดติดปากของแกในทุกวันที่ 1 และวันที่ 16 ของทุกเดือน เอาล่ะครับผมว่าหลายคนก็พอที่จะเดาออกว่ามันเป็นคำบ่นเกี่ยวกับเรื่องอะไรใช่ไหมครับ😂 พี่แกเล่นทียาวเป็นหางว่าวเลย🤭

ในใจผมก็คิดไปหลายอย่าง ไม่ว่าจะเป็นสงสารที่แกเฉียดตลอดไม่โดนเต็มๆ สักทีจะมีก็แต่ถูกเขากิน แต่อีกใจก็คิดว่าพี่ไม่น่าเล่นเลยเสียดายตังค์เปอร์เซ็นถูกมันน้อย ผมว่าเล่นหุ้นยังจะดูมีลุ้นมากกว่าเพราะ อย่างน้อยๆ ก็มีข้อมูลให้เราได้เลือกตัดสินใจ

แต่สิ่งนี้ก็เหมือนจะเป็นส่วนหนึ่งของสังคมบ้านเราไปเสียแล้ว และผมก็เชื่อด้วยว่าทั่วโลกก็เล่นกัน สำหรับผมนานๆ ทีก็มีซื้อสลากกินแบ่งรัฐบาลบ้าง เอาไว้ให้ได้ฝันดีก่อนวันประกาศผล เอาไว้คุยกับครอบครัวว่าจะเอาเงินไปทำอะไรบ้าง ให้ได้พอยิ้มกัน

สร้างฟังก์ชั่นแก้ปัญหา

เมื่อผมมองว่ามันเป็นปัญหาที่หลายคนน่าจะเคยเจอเหมือนๆ กัน ผมเลยเอามันมาแปลงเป็นโจทย์เพื่อ exercise ตัวเองสักหน่อย

วันนี้เราจะมาลองสร้าง ฟังก์ชั่นความน่าจะเป็น สำหรับเลขท้าย 2 ตัวและ 3 ตัวกัน โดยจะใช้หลัก ความน่าจะเป็น

ตัวอย่าง สมมุติว่าพี่เขาทำการซื้อเลข 2 ตัว คือ 12 โดยมากแล้วคนส่วนใหญ่จะซื้อเลขกลับด้วย ซึ่งนั่นก็คือ 21 ดังนั้น สรุปได้ว่าเมื่อพี่เขามีเลข 2 ตัวที่ชอบอยู่แล้ว พี่เขาก็มักจะซื้อเลขกลับด้วย ดังนั้นพี่เขาก็จะทำการซื้อเลข 12 และ 21

เข้าใจง่ายใช่ไหมครับ แต่ถ้ามันเป็นเลข 3 ตัวล่ะ และในกรณีที่พี่เขาไม่ได้ซื้อเลขโต๊ด แล้วเลขที่พี่เขาซื้อมันออกรางวัลด้วยเพียงแต่พี่เขาไม่ถูกเพราะเลขที่ออกกับเลขที่พี่เขาซื้อมันสลับตำแหน่งกันล่ะ!! เฮ้อ~ มันก็คงจะวนเข้าลูปเดิมเช่นเคย คือ บ่นว่าเฉียดแค่นิดเดียว แต่ถ้าพี่เขาไล่ซื้อเลขกลับของ เลข 3 ตัวทั้งหมดไปแล้วถึงแม้ว่ามันไม่ถูกมันก็อาจไม่ทำให้พี่เขารู้เสียดาย เพราะอย่างไรเสียพี่แกก็เล่นซื้อยาวเป็นหางว่าวอยู่แล้ว🤭

โจทย์ 👩‍🏫

ดังนั้น เราก็จะได้โจทย์ในการ exersice คือ จงสร้างฟังก์ชั่นสำหรับกลับเลข 2 สองตัว และเลข 3 ตัว เพื่อหาชุดเลขจากความน่าจะเป็นทั้งหมด เพื่อที่ว่าพี่เขาจะได้ไม่ต้องมานั่งเสียใจทีหลัง เมื่อเลขที่พี่เขาซื้อมันเฉียดแต่ไม่ถูกรางวัล

ตัวอย่าง พี่เขาได้เลย เด็ด 2 ตัว และ 3 ตัว มาจากการไปถูกต้นไม้ศักดิ์สิทมาจากวัดนั่งเทียน จังหวัด เขียนเอา โดยที่เลข 2 ตัวที่ได้มาจากการโรยแป้งและถูต้นไม้ พี่เขาเห็นเป็นเลข 64 และเลข 639 งวดนี้พี่เขาเห็นได้อย่างชัดเจนอย่างที่ไม่เคยเป็นมาก่อน ดังนั้นพี่เขามั่นใจว่าต้องถูกแน่นวล~ แต่ด้วยความที่เราเป็นห่วงพี่ ดังนั้นเราเลยต้องเขียนฟังก์ชั่นเพื่อช่วยกลับเลขที่พี่เขาไปได้มาดังนี้

ต้องขอขอบคุณ Permutations - all possible sets of numbers

<?php

    function pc_permute(array $items, array $perms = [ ])
    {
        if (empty($items)) {
            $return = [$perms];
        } else {
            $return = [];
            for ($i = count($items) - 1; $i >= 0; --$i) {
                $newitems = $items;
                $newperms = $perms;
                list($foo) = array_splice($newitems, $i, 1);
                array_unshift($newperms, $foo);
                $return = array_merge($return, pc_permute($newitems, $newperms));
            }
        }

        return $return;
    }

สำหรับโค้ดตัวด้านบนนั้นเป็นฟังก์ชั่นที่เอาไว้สำหรับหา ชุดตัวเลขที่เป็นไปได้ทั้งหมด จากตัวเลขเด็ดที่เราได้มา โดยจะรับค่าในรูปแบบ อาเรย์ ในชื่อ $item ส่วน $perms ให้ปล่อยว่างไว้ เพราะมันเอาไว้ใช้สำหรับการเรียงสลับชุดตัวเลขที่เราจะทำการค้นหาความเป็นไปได้

<?php

    function all_possibility($number)
    {
        $digits = pc_permute(str_split($number));
        $result = [];

        foreach ($digits as $data) {
            $result[] = (int) implode("", $data);
        }

        $result = array_unique($result);
        sort($result);

        return $result;
    }

เราสร้างฟังก์ชั่นอีกฟังก์ชั่นหนึ่งขึ้นมาเพื่อจัดการข้อมูล input และ output และเพื่อให้ง่ายต่อการป้อนข้อมูล เพราะฟังก์ชั่น pc_permute ของเรานั้นรับค่าเป็น อาเรย์ ในการค้นหาค่าที่เป็นไปได้ทั้งหมดและคืนค่าออกมาในรูปแบบอาเรย์ ที่ย่อยตัวเลขออกเป็นชั้นๆอีกที ถ้าหากสงสัยหรือนึกภาพไม่ออก ก็ลองเอาฟังก์ชั่น pc_permute ไปรันเพื่อดูผลลัพธ์ก่อนได้ครับ

เท่านี้เราก็จะได้ฟังก์ชั่นหาค่าที่เป็นไปได้จากการสลับตำแหน่งไปมาของเลขเด็ดที่เราได้มาแล้วครับ ฟังก์ชั่นตัวนี้เป็นการหาค่าความน่าจะเป็นทั้งหมดของตัวเลขที่เราป้อนเข้าไป แต่สิ่งที่ผมต้องการคือแค่หาค่าของเลขสามตัว เพราะเลขสองตัวเราก็สามารถกลับเลขได้เองง่ายๆ อยู่แล้วใช่ไหมล่ะครับ แต่ถ้าเป็นเลขสามตัวก็อาจต้องใช้กระดาษหรือเวลาเพิ่มขึ้นหน่อย แต่เมื่อมีฟังก์ชั่นนี้ก็จะทำให้การซื้อเลขของคุณง่ายมากยิ่งขึ้นครับ

ทดสอบกับเลข 2 ตัว ที่พี่เขาไปได้มาจากต้นไม้ศักดิ์สิทธิ์

// เมื่อเราทำการรันเลข 64
all_possibility(64);

// ผลลัพธ์ที่ได้ก็จะเป็น
array:2 [
  0 => 46
  1 => 64
]

ทดสอบกับเลข 3 ตัว ที่พี่เขาไปได้มาจากต้นไม้ศักดิ์สิทธิ์

// เมื่อเราทำการรันเลข 639
all_possibility(639);

// ผลลัพธ์ที่ได้ก็จะเป็น
array:6 [
  0 => 369
  1 => 396
  2 => 639
  3 => 693
  4 => 936
  5 => 963
]

คราวนี้ถ้าเลขมันออกตามที่พี่เขาซื้อไว้เพียงแต่มันสลับตำแหน่งกัน พี่เขาก็จะได้เต็มๆ (บางคนคงสงสัยว่าทำไมไม่โต๊ด เอาเป็นว่าพี่เขาไม่ชอบซื้อโต๊ดก็แล้วกันครับ) ดังนั้นจึงสรุปได้ว่าพี่เขาอาจไม่ต้องมานั่งเสียใจ และเสียโอกาสในการเป็นเศรษฐีในงวดที่กำลังจะมาถึงนี้นั่นเอง

จบแล้วครับ

Git Rebase คอมมิทที่ push ขึ้นไปแล้ว

Atthaphon Urairat — Tue, 02 Jul 2019 12:49:48 +0000

วิธีง่ายๆ ในการกรุ๊ปรวมคอมมิทหลายๆ ตัวให้เป็นตัวเดียว และยังสามารถทำได้แม้ในกรณีที่เรา push คอมมิทเหล่านั้นขึ้นไปยัง git server เรียบร้อยแล้วด้วย

Git สามารถที่จะกรุ๊ปรวมคอมมิทให้กลายเป็นคอมมิทเดียวได้ด้วยคำสั่ง git rebase --interactive HEAD~[N] หรือสั้นๆ git rebase -i HEAD~[N] โดยที่ [N] คือจำนนวนคอมมิทก่อนหน้านี้

อธิบายเพิ่มเติมในส่วนของ HEAD~[N] ยกตัวอย่างง่ายๆ ในกรณีที่ตอนนี้เราอยู่ที่คอมมิทล่าสุด และถ้าหากเราต้องการกรุ๊ปรวมคอมมิทก่อนหน้านี้ 3 คอมมิท เราสามารถที่จะเพิ่มอาร์กิวเมนต์ต่อท้าย git rebase -i เพื่อที่จะนำคอมมิทก่อนหน้านี้มา 3 ตัวเพื่อนำมากรุ๊ปรวมให้เป็นคอมมิทเดียว ซึ่งเราสามารถเพิ่มอากิวเมนต์ได้โดยเพิ่มคำสั่ง HEAD~4 ต่อท้าย แต่เมื่อนับรวมกับคอมมิทล่าสุดของเราด้วยแล้วก็จะกลายเป็นว่าเราจะมีคอมมิทที่จะนำไปแก้ไขทั้งหมด 4 ตัว เพื่อให้เข้าใจได้ง่ายขึ้นเดี๋ยวเรามาลองดูโค้ดตัวอย่างกัน

ขั้นตอน 👩‍🏫

ก่อนที่เราจะทำ rebase เรามาดูคอมมิทที่เรามีกันก่อน เราสามารถเช็คคอมมิทได้จากหน้าต่างเครื่องมือช่วยอย่าง Sourcetree หรือจะใช้ command line อย่าง git log

commit 1e3399... (HEAD -> master, origin/master)
Author: Atthaphon Urairat <xxx@xxxxx.com>
Date:   Wed Jun 26 09:27:07 2019 +0700

    Completed B

commit 729dad...
Author: Atthaphon Urairat <xxx@xxxxx.com>
Date:   Wed Jun 26 09:21:11 2019 +0700

    add more option for header

commit f7375b...
Author: Atthaphon Urairat <xxx@xxxxx.com>
Date:   Wed Jun 26 09:06:29 2019 +0700

    disable cache

commit 256bbc...
Author: Atthaphon Urairat <xxx@xxxxx.com>
Date:   Wed Jun 26 08:54:46 2019 +0700

    corrected method

commit f62f5f...
Author: Atthaphon Urairat <xxx@xxxxx.com>
Date:   Tue Jun 25 18:42:33 2019 +0700

    Completed A

...

หรือถ้าหากว่าเราต้องการดู log แต่ละคอมมิทในบรรทัดเดียว เราก็สามารถเพิ่มอาร์กิวเมนต์ git log --pretty=oneline

1e3399... (HEAD -> master, origin/master) Completed B    <<< คอมมิทล่าสุด
729dad... add more option for header
f7375b... disable cache
256bbc... corrected method
f62f5f... Completed A                                    <<< คอมมิทเก่ากว่า
...

จากตัวอย่างข้างต้น ตอนนี้เราอยู่ที่คอมมิทแรก 1e3399... (HEAD -> master, origin/master) Completed B และต้องการที่จะกรุ๊ปคอมมิทก่อนหน้านี้สามตัวถึงคอมมิทที่ชื่อ 256bbc... corrected method

ผลลัพธ์ที่เราคาดหวังไว้คือการกรุ๊ปรวมคอมมิทให้เป็นดังนี้

1e3399... (HEAD -> master, origin/master) Completed B
f62f5f... Completed A
...

นั่นคือการกรุ๊ปรวมคอมมิททั้งหมดที่อยู่ระหว่าง Completed B และ Completed A ให้เหลือเพียงคอมมิทดังตัวอย่างก่อนหน้านี้ ต่อไปเราก็มารันคำสั่งกันเลย

git rebase -i HEAD~4

คำเตือน เมื่อเรารันคำสั่งไปแล้ว ต่อจากนั้นหน้าจอก็จะเปลี่ยนเป็นตัว editor เพื่อโชว์คอมมิทที่เราต้องการจะทำการกรุ๊ปรวม แต่!! มันจะถูกแสดงออกมาในลำดับการจัดเรียงกลับหลัง ซึ่งต่างจากการรันคำสั่ง git log ของเราก่อนหน้านี้

TIP 💡 ในกรณีที่เรามีคอมมิทที่ต้องการจะกรุ๊ปรวมเยอะ และการนับคอมมิทเพื่อเอาเลขมาใส่ท้าย HEAD~ มีความยุ่งยากหรืออาจเกิดข้อผิดพลาดได้ง่าย เราก็สามารถที่จะใช้เลขคอมมิทแทนการใช้ HEAD~[N] ได้ดังนี้ git rebase -i [commit-number]

git rebase -i f62f5fd

ผลลัพธ์ของการรันทั้งสองคำสั่งก็จะได้ค่าออกมาเหมือนกันดังที่แสดงในตัวอย่างด้านล่างนี้

pick f62f5fd corrected method            <<< คอมมิทเก่ากว่า
pick f7375bf disable cache
pick 729dad4 add more option for header
pick 1e3399c Completed B                 <<< คอมมิทล่าสุด

# Rebase f62f5fd..1e3399c onto f62f5fd (3 commands)

จากนั้นเราก็ทำการ เปลี่ยน pick เป็น squash หรือสามารถเขียนสั้นๆ s ก็ได้เพื่อทำการกรุ๊ปรวมคอมมิทจากเก่าสุดเพื่อให้รวมกับคอมมมิทล่าสุด

pick f62f5fd corrected method            <<< คอมมิทเก่ากว่า
s f7375bf disable cache
s 729dad4 add more option for header
s 1e3399c Completed B                    <<< คอมมิทล่าสุด

# Rebase f62f5fd..1e3399c onto f62f5fd (4 commands)

จากนั้นเมื่อเราทำการเซฟไฟล์แล้ว editor ก็จะพาเราไปอีกหน้าซึ่งเป็นหน้าสำหรับ commit msg ใหม่ แต่จะมีข้อความเริ่มต้นให้เราแบบด้านล่างนี้ แต่เราสามารถลบและใส่ข้อความใหม่ได้ หรือจะใช้ข้อความที่มีมาให้ก็ได้

# This is a combination of 3 commits.
# This is the 1st commit message:

corrected method

# This is the 1st commit message #2:

disable cache

# This is the 1st commit message #3:

add more option for header

# This is the 1st commit message #4:

Completed B

...

ผมจะทำการลบข้อความทั้งหมดให้เหลือเพียงคำว่า Completed B

Complete B

หลังจากทำการเซฟและออกจาก editor แล้วก็จะปรากฏข้อความแสดงความยินดี ซึ่งแสดงว่าเราทำการรวมคอมมิทให้กลายเป็นคอมมิทเดียวได้สำเร็จแล้ว 🥳🥳 ❤️🎉 (หรืออาจเป็นข้อความ ตอกย้ำก็ได้ในกรณีที่เราทำผิดพลาด 😫😫)

[detached HEAD 1bc71e4] Completed B
 Date: Wed Jun 26 08:54:46 2019 +0700
 4 files changed, 11 insertions(+), 21 deletions(-)
Successfully rebased and updated refs/heads/master

จากนั้นเราก็จะได้ คอมมิทใหม่มาซึ่งกรุ๊ปรวมคอมมิททั้งหมดที่เราได้ทำไปก่อนหน้านี้มาเป็นที่เรียบร้อยแล้ว

สุดท้ายนี้ ก็ทำการ push ขึ้นไปยัง git server ของเราอีกครั้งแบบ force push ด้วยคำสี่ง git push origin master --force

เตือน ❗️ ตั้งสติก่อนสตาร์ท เอ้ย!! โทด โทด ตั้งสติก่อน push ครับ 🤣🤣 เพราะการทำ force push มันถือว่าเป็นความเสี่ยง ดังนั้นเราควรแน่ใจกับ commit ของเรา หรืออาจสร้าง branch ไว้เป็น backup ก่อน ทำการ force push ไว้ดีกว่าครับ

วันนี้จบแล้วครับ ขอบคุณที่ติดตามอ่านจนจบครับ หวังว่าจะเป็นประโยชน์กับใครบ้างสักคนบ้างนะครับ

สร้าง PHP pacakge สำหรับ Composer

Atthaphon Urairat — Sat, 29 Jun 2019 03:09:51 +0000

เมื่อเราสามารถสร้าง Repository ไม่ว่าจะใน Github หรือ Bitbucket สำหรับ PHP code เป็นที่เรียบร้อยแล้ว จากนั้นเราก็สามารถที่จะใช้ git clone เพื่อดึง Project repository ที่เราได้สร้างไว้เพื่อเอามาใช้กับโปรเจ็คอื่นๆ ได้โดยง่าย แต่เพื่อที่จะให้ง่ายไปยิ่งกว่านั้น และเพื่อซัพพอร์ต Package management ซึ่งถูกใช้กันอย่างแพร่หลายในปัจจุบัน ถ้าหากว่า Repository ที่เราสร้างไว้ไม่ซัพพอร์ตมันแล้วล่ะก็ มันก็คงจะดูไม่ค่อยคูลสักเท่าไหร่ใช่ไหมล่ะครับ 😋

ด้วยเหตุฉนั้น จึงเป็นสาเหตุที่ทำให้เราต้อง เพิ่ม PHP Repository ของเราเข้าไปใน Packagist เพื่อทำให้ Repository คูลๆ ของเราสามารถเรียกใช้งานด้วย composer ได้ครับ อย่างเช่น composer require yourname/coolcool

ขั้นตอน

เรามาเริ่มกันเลยดีกว่าครับ ด้วยความหวังว่าจะมีใครสักคนเห็นว่าเราพยายามหรือไม่ได้ทำงานแบบขอไปที "อู้ว~ แพคเกจของคนนี้เขาใช้ composer ได้ด้วย ดีดี เดี๋ยวกดดาวให้สักหน่อย" ในใจของเราคงหวังไว้อย่างนี้ใช่ไหมครับ อิอิ หรือแม้ว่าเพื่อนๆ ที่เข้ามาอ่านจะไม่ได้คิดแบบนี้ แต่ผมว่าคงมีใครสักคนล่ะที่คิดประมาณนี้ อย่างน้อยก็ผมคนนึงล่ะที่หวังไว้แบบนี้ เพราะอยากได้ดาวกับเขาบ้าง ฮ่าๆ เข้าเรื่องครับ มาเริ่มกันเลยดีกว่า

1) สร้าง composer.json ไฟล์ในโปรเจ็คที่เราสร้าง

{
    "name": "uatthaphon/g-crawler",
    "description": "A simple php Web Scraper that wrap up Guzzle and DomCrawler",
    "keywords": ["scrap", "dom-crawler", "guzzle"],
    "type": "library",
    "license": "MIT",
    "authors": [
        {
            "name": "Atthaphon Urairat",
            "email": "u.atthaphon@gmail.com",
            "homepage": "https://atthaphon.urairat.com/"
        }
    ],
    "require": {
        "php": "^7.2",
        "symfony/dom-crawler": "^4.2",
        "guzzlehttp/guzzle": "^6.3",
        "symfony/css-selector": "^4.2"
    },
    "require-dev": {
        "phpunit/phpunit": "^8.1"
    },
    "autoload": {
        "psr-4": {
            "GCrawler\\": "src/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "GCrawler\\Tests\\": "tests/"
        }
    }
}

2) สร้าง Repository ใน Github หรือ Bitbucket จากนั้นก็ push โปรเจ็คขึ้นไป หรือถ้าหากว่าสร้างไว้แล้วก็คูลเลยครับ

3) เพิ่ม Repository ของเราใน Packagist เพิ่ม Repository url เพื่อเช็คและกด Submit ได้เลยครับ

4) หลังจากที่ Packagist เพิ่มโปรเจ็คเราเข้าไปในระบบเป็นที่เรียบร้อยแล้วเราก็จะสามารถใช้ composer require yourname/coolcool ได้แล้วครับ

สุดท้ายนี้ใครที่กำลังทำ scrap ข้อมูลด้วย php อยู่ ก็สามารถลองดึง Repository g-crawler ของผมมาใช้ได้นะครับ เป็น โปรเจ็ค Wrap up symfony/dom-crawler,symfony/css-selector และ guzzlehttp/guzzle ที่ทำไว้เพื่อให้เรียกใช้งานได้ง่าย ไม่ต้องไปเพิ่มโปรเจ็คเองเยอะแยะและทำให้ Config ง่ายและเร็วขึ้นครับ ผมหวังว่าบทความและ Repo ของผมคงจะมีประโยชน์สำหรับคนอื่นบ้างไม่มากก็น้อยนะครับ

ต่อยอด Laravel Debugbar เพื่อดีบัก Rest API Routes

Atthaphon Urairat — Fri, 28 Jun 2019 02:45:55 +0000

ปัญหา 👹

บทความนี้เขียนจากประสบการณ์จริง โปรเจ็คที่ผมทำอยู่มีปัญหาด้านความเร็วในการตอบสนอง เพราะ endpoint บางตัวใช้เวลาในการตอบสนองนานกว่า 10s ทำให้ไม่สามารถที่จะยอมรับได้ เพราะ ช้าเกินไปมากๆๆๆ 😩😩😩 ถ้าเป็นคนที่ทำโปรเจ็คมาตั้งแต่ต้น การดีบักก็คงไม่มีปัญหา

ผมลองจินตนาการดู ถ้าเราไม่ได้ทำโปรเจ็คต่อล่ะ สมมุติถ้าคนที่มาจับโปรเจ็คต่อไม่ได้มีงานแค่ตัวเดียวล่ะ เขาต้องมาเสียเวลาส่วนมากไปกับแก้ปัญหานิดๆ หน่อยๆ อย่างนั้นหรือ ดูไม่คุ้มเลย 😡

ผมเลย install package Debugbar เผื่อไว้เพื่อทีจะเอาไว้ดีบัก แต่ติดที่ว่า debugbar ไม่สามารถโชว์ผลลัพธ์ใน api route ได้ 😭😭 เอาล่ะสิต้องพึ่งพา อากู๋ หน่อยล่ะ แล้วในที่สุดหลังจากการ research ผมก็ได้มาซึ่งสิ่งที่ต้องการ 🎉🎉🎉

Framework & Packages ⚙️

# install laravel 5.4
composer create-project --prefer-dist laravel/laravel yourProjectName "5.4.*"
# install debugbar 2.4 that compatible with laravel 5.4
composer require barryvdh/laravel-debugbar:~2.4
# install dingo/api
composer require dingo/api

ผมไม่ได้แสดงวิธี install ทุกขั้นตอนนะครับ เพื่อนๆ สามารถอ่านวิธีการ install และ config เบื้องต้นได้จาก link ที่ให้ไว้ได้นะครับ

วิธีทำ 👩‍🏫

จากที่เห็น โปรเจ็คตัวนี้ใช้ laravel v5.4, debugbar v2.4 และ dingo api v1 ส่ิงที่เราต้องการคือ การโชว์ข้อมูลจาก debugbar เมื่อเราทำการ access api route จาก browser หรือ postman

เริ่มด้วยการสร้าง Middleware

<?php

namespace App\Http\Middleware;

use Closure;
use Dingo\Api\Http\Response;

class ProfileDingoHttpResponse
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $response = $next($request);

        if ($response instanceof Response &&
            app()->bound('debugbar') &&
            app('debugbar')->isEnabled()
        ) {
            $queries_data = $this->sqlFilter(app('debugbar')->getData());
            $response->setContent(json_decode($response->morph()->getContent(), true) + [
                '_debugbar' => [
                    'total_queries' => count($queries_data),
                    'queries' => $queries_data,
                    'time' => app('debugbar')->getData()['time'],
                    'memory' => app('debugbar')->getData()['memory'],
                ],
            ]);
        }

        return $response;
    }

    /**
     * Get only sql and each duration
     *
     * @param $debugbar_data
     * @return array
     */
    protected function sqlFilter($debugbar_data)
    {
        $result = array_get($debugbar_data, 'queries.statements');

        return array_map(function ($item) {
            return [
                'sql' => array_get($item, 'sql'),
                'duration' => array_get($item, 'duration_str'),
            ];
        }, $result);
    }
}

จากนั้นทำการเพิ่ม middleware ProfileDingoHttpResponse ที่เราเพิ่งสร้างไป ในไฟล์ Kernel.php ซึ่งอยู่ใน yourProjectName/app/Http/Kernel.php

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    ...

    protected $routeMiddleware = [
        ...
        'profile-dingo-http' => \App\Http\Middleware\ProfileDingoHttpResponse::class,
    ];
}

หลังจากที่เราเพิ่ม 'profile-dingo-http' => \App\Http\Middleware\ProfileDingoHttpResponse::class, ไปใน $routeMiddleware จากนั้นเราก็สามารถเพิ่ม middleware ได้แล้ว โดยในโปรเจ็คนี้เราใช้ Dingo api ซึ่งจะเห็นวิธีเพิ่ม middleware ได้จากตัวอย่างด้านล่าง

<?php
$api = app('Dingo\Api\Routing\Router');

$api->version('v1', ['middleware' => 'profile-dingo-http'], function ($api) {
    ...
});

🎉🎉🎉 เสร็จแล้วครับ

ผลลัพธ์ 💯

หลังจากทำการเรียก api จาก url เราจะได้ผลลัพธ์ซึ่งเป็นข้อมูลจาก debugbar ที่เราสร้างไว้ใน Middleware ProfileDingoHttpResponse ห้อยท้ายมาด้วย

นี่คือผลลัพธ์ที่ได้ห้อยท้ายเพิ่มเติมเมื่อเราเพิ่ม middleware เข้าไปครับ ถ้าหากไม่ชัดก็สามารถดูตัวอย่างจากด้านล่างได้ครับ

"_debugbar": {
    "total_queries": 1,
    "queries": [
        {
            "sql": "select `id`, `name`, `description` from `product` where `id` = '2' limit 1",
            "duration": "14.01ms"
        }
    ],
    "time": {
        "start": 1561688591.7021,
        "end": 1561688591.8966,
        "duration": 0.19451189041138,
        "duration_str": "194.51ms",
        "measures": [
            {
                "label": "Booting",
                "start": 1561688591.7021,
                "relative_start": 0,
                "end": 1561688591.786,
                "relative_end": 1561688591.786,
                "duration": 0.083874940872192,
                "duration_str": "83.87ms",
                "params": [],
                "collector": null
            },
            {
                "label": "Application",
                "start": 1561688591.7738,
                "relative_start": 0.071721792221069,
                "end": 1561688591.8966,
                "relative_end": 0.0000050067901611328,
                "duration": 0.12279510498047,
                "duration_str": "122.8ms",
                "params": [],
                "collector": null
            }
        ]
    },
    "memory": {
        "peak_usage": 19660800,
        "peak_usage_str": "18.75MB"
    }
}

ด้วยเหตุฉนั้น เลยได้ผลลัพธ์ในแบบฉนี้ และแล้วในตอนนี้การ debug ก็จะง่ายขึ้นไม่ว่าจะสำหรับคนเก่าหรือใหม่ ซึ่งสามารถทำให้เราหาสาเหตุของสิ่งที่เราต้องการแก้หรือปรับปรุงได้ง่ายยิ่งขึ้น ขอบคุณครับ จบแล้วครับ 🥳 🥳 🥳

Source & so much thanks ❤️🎉🥰

REST API profiling #252

gowebexamples ภาษาไทย

Atthaphon Urairat — Thu, 27 Jun 2019 03:31:31 +0000

Golang ได้ครับความนิยมากขึ้นในทุกชั่ววินาที เมื่อก่อนผมก็หาเวลาว่างในการศึกษาเพิ่มเติมเหมือนกัน แม้ตอนนี้จะแผ่วๆ ไปบ้าง (^_^)

แต่ตอนที่ได้ทำการศึกษาภาษา Go อยู่นั้นก็ได้ไปเจอกับ gowebexamples ที่อยู่บน github เลยเอามาลองแปล เพื่อที่จะได้เป็นการศึกษาเรียนรู้ และน่าจะมีประโยนช์สำหรับคนอื่นด้วย ตอนนี้ก็ได้ทำการแปลเสร็จเป็นที่เรียบร้อยแล้วครับ เลยเอามาแปะเผื่อจะเป็นประโยชน์สำหรับคนที่กำลังสนใจที่จะเรียนรู้ภาษ Go ครับ

เข้าไปที่ gowebexamples.urairat.com ได้เลยครับ

เนื้อหาที่มี จะประกอบไปด้วย

จากที่ผมได้ลองทำความเข้าใจและเปรียบเทียบกับบทความอื่นๆ gowebexamples อาจจะไม่ครอบคลุมเนื้อหาที่มีความ Advance หรือครอบคลุมกระบวนท่าทั้งหมดในการสร้างเว็บไซต์ แต่ก็ถือว่าเป็นจุดเร่ิมต้นที่ดีในการที่จะเรียนรู้ภาษา Go ผ่านโค้ดและการใช้งาน package พื้นฐานต่างๆ ที่มีในการสร้างเว็บไซต์ด้วยภาษา Go

ความเห็นส่วนตัวของผมคือ มันเป็นบทเรียนที่เหมาะสำหรับผู้เริ่มต้นที่พอมีพื้นฐานด้าน programming อยู่บ้าง เนื่องด้วยความง่ายต่อการทำความเข้าใจของโค้ดตัวอย่างที่มีให้ และการอธิบายที่กระชับครับ

Hugo + Firebase

Atthaphon Urairat — Sat, 22 Jun 2019 15:29:45 +0000

เป็น Deveploper มาก็นานทำงานมาไม่ว่าจะเป็นงานบริษัท งานฟรีแลนซ์ หรือจะเป็นโปรเจ็คของตัวเองก็ดี แต่เพิ่งมานึกได้ว่าตอนนี้เรายังไม่มีเว็บ portfolio เป็นของตัวเองเลย

เมื่อนึกได้ดังนั้นผมจึงตัดสินใจจะสร้างเว็บ portfolio แต่ถ้าทำมาแค่โชว์ผลงาน ผมก็ไม่ค่อยมีอะไรจะเอาออกมาโชว์เหมือนคนอื่นๆเขาซะด้วยสิ งั้นทำ blog ละกันจะได้ดูดีมีเนื้อหาสาระขึ้นมาหน่อย

หลังจากการเซาะแสวงหาความรู้ใน internet ได้ซักพัก ก็ได้ข้อสรุป Hugo + Firebase เป็นบทสรุปที่ลงตัวสำหรับผม ณ ตอนนี้เป็นที่สุด

ทำไมต้อง Hugo + Firebase

ก่อนการเซาะแสวงหาเครื่องมือ และ hosting ในการสร้างเว็บไซต์ในครั้งนี้ ผมได้ถามความต้องการของตัวเองก่อน ผมต้องการอะไรที่ง่ายๆ เพียงแค่สร้างเว็บ portfolio และเขียน blog ไปด้วย ซึ่งความต้องการของเว็บไซต์ที่ควรจะมีคือ

โหลดเร็ว
ง่ายต่อการเขียน blog แค่ Markdown พอ
ง่ายต่อการพัฒนา
ง่ายต่อการบำรุงดูแลรักษาและจัดการตัวโค้ด
ไม่ต้องปวดหัวเรื่องระบบความปลอดภัย
Free hosting จัดการง่าย

นั่นคือที่มาของการเลือกเครื่องมือ ซึ่งนั่นก็คือ Hugo Static Site Generators + Firebase Hosting ในครั้งนี้

ทำไมต้อง Hugo

เหตุผลหลักๆที่เลือกใช้ Hugo

ความเร็วในการคอมไพล์ html
ความเรียบง่ายของโครงสร้างในส่วนของการจัดการโปรเจ็ค
ง่ายต่อการพัฒนาเช่นเมื่อเราทำการอัพเดต Theme เจ้า Hugo ก็จะทำการ refresh อัพเดตให้เราโดยอัตโนมัติเลย
เอกสารที่เข้าใจง่าย

การติดตั้งในครั้งนี้ผมทำการติดตั้งในเครื่อง Mac หากว่าใครใช้ Window หรือ Linux ก็เข้าไปดูวิธีติดตั้งได้ใน Install Hugo

ติดตั้ง Hugo

เริ่มกันเลย พร้อมแล้วก็เปิด iTerm หรือ Mac Terminal ขึ้นมา พิมพ์คำสั่ง

# ติดตั้ง Hugo ด้วย Homebrew
brew install hugo

** หากใครยังไม่ได้ลง Homebrew ก็ให้ติดตั้งก่อนโดยพิมพ์คำสั่ง

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`

หลังจากติดตั้งเรียบร้อยก็เช็คดูว่าการติดตั้งเรียบร้อยดีหรือไม่

# เรียกดูเวอร์ชั่นของ hugo ที่ทำการติดตั้ง
hugo version

เพียงเท่านี้เราก็จะได้ Hugo มาไว้กำมือของเราแล้ว

สร้างเว็บด้วย Hugo

พิมพ์คำสั่งเพื่อเริ่มสร้างโปรเจ็คใหม่กันเลย

hugo new site dejo

ตอนนี้เราก็จะได้โปรเจ็คที่อยู่ในโฟลเดอร์ที่มีชื่อว่า dejo

เลือก Theme สำหรับโปรเจ็ค

Theme สำหรับ Hugo มีให้เลือกเยอะมาก เราสามารถเข้าไปดูได้จาก https://themes.gohugo.io/ สำหรับ Theme ที่เลือกมาใช้ในบทความนี้มีชื่อว่า Hyde Theme

# เข้ามายังโฟลเดอร์ themes
cd dejo/themes/

# โคลน Theme ที่ชื่อว่า hyde
git clone https://github.com/spf13/hyde.git

# ทำการเพิ่ม Hyde Theme เข้าไปยัง config.toml
echo 'theme = "Hyde"' >> config.toml

เท่านี้เราก็ได้ theme สวยๆมาใช้แล้ว

เพิ่มบทความให้กับ Blog ของเรา

# ทำการสร้างไฟล์ที่มีขื่อว่า first-post.md ในโฟลเดอร์ posts
hugo new posts/first-post.md

หลังจากเขียนบทความแล้ว เราก็ดูว่าหน้าตาเว็บไซต์ของเราเป็นอย่างไร โดยพิมพ์คำสั่ง

# สร้าง server จำลองพร้อมทั้งเปิดใช้งาน draft โหมด
hugo server -D

ส่วนที่เหลือก็อยู่ที่การตกแต่งต่อยอดเว็บไซต์ให้เป็นไปในสไตล์ที่เราชอบ และเพิ่มเนื้อหาของเว็บไซต์ของเรา

ทำไมต้อง Firebase

เหตุผลหลักๆที่ผมเลือกใช้ Firebase ก็เพราะ

ง่ายต่อการเพิ่ม Custom domain อีกทั้งยังมี SSL ให้เราใช้ฟรีอีกด้วย
ฟรี Worldwide CDN edge servers

เริ่มแรกเลย เราก็ต้องสร้างโปรเจ็คใน Firebase Console เพื่อทำการ Host เว็บไซต์ของเรา หรือถ้าหากยังไม่มี เราก็สามารถลงทะเบียนได้ฟรีโดยใช้บัญชี google ของเรา

ขั้นตอนการติดตั้งและใช้งาน

หลังจากทำการสร้างโปรเจ็คใน Firebase Console เสร็จเรียบร้อยแล้ว เราก็ต้องทำการติดตั้ง Firebase CLI Tool ซึ่งเราจำเป็นจะต้องทำการติดตั้ง Node.js ให้เรียบร้อยเสียก่อน หลังจากที่เราติดตั้ง Node.js เรียบร้อยแล้วก็ให้เราพิมพ์คำสั่ง

# ติดตั้ง firebase tools ด้วย Node.js
npm install -g firebase-tools

ต่อไปเราก็ต้องทำการเชื่อมต่อ Firebase Tools เข้ากับบัญชี Google ของเราด้วยคำสั่ง

firebase login

คำสั่งนี้จะทำการเปิดเบราเซอร์เพื่อให้เราเลือกบัญชีและทำการล็อกอิน เราสามารถใช้คำสั่ง firebase logout เพื่อทำการล็อกเอาท์ในกรณีที่เราทำการล็อกอินผิดบัญชี

ใช้คำสั่ง firebase list เพื่อดูรายชื่อทั้งหมดของโปรเจ็คใน Firsbase project ของเรา โดยที่รายชื่อทั้งหมดควรที่จะเหมือนกับรายชื่อโปรเจ็คที่อยู่ใน Firebase console ของเรา

ให้เราทำการเปลี่ยนโปรเจ็คไดเรกทอรีที่เราต้องการติดตั้ง firebase ซึ่งในที่นี้ คือ dejo ที่เราได้สร้างไว้ และพิมพ์คำสั่งเพื่อทำการตั้งค่าเริ่มต้น

firebase init

จากตรงนี้

เลือก Hosting ใน feature question
เลือก โปรเจ็คที่เราต้องการ ที่เพิ่งสร้างใน Firebase Console
เลือก default สำหรับดาต้าเบส rules file
เลือก default สำหรับ publish directory (public)
เลือก “No” ถ้าเราทำการ deploy a single-page app, แต่สำหรับผมเลือก "Yes"

จากนั้นเราจะได้ ไฟล์ใหม่ 2 ไฟล์อยู่ในโปรเจ็คโฟลเดอร์คือ firebase.json และ .firebaserc

เราสามารถ ignore .firebaserc ใน git ได้เพราะไฟล์ตัวนี้มีไว้เพียงเพื่อเก็บข้อมูลว่าโปรเจ็คที่เราใช้อยู่นั้น ใช้ firebase tool อะไรบ้าง ในส่วนของไฟล์ firebase.json นั้นเอาไว้เพื่อทำการตั้งค่า Hosting

{
  "hosting": {
    "public": "public",
    "ignore": [
      "**/.*",
      "firebase.json",
    ],
  }
}

ตอนนี้เราก็พร้อมที่ทำการนำโค้ดในโปรเจ็คใหม่ของเราเข้าไปวางที่ Firebase Hosting ของเราแล้ว โดยให้เราพิมพ์คำสั่ง

firebase deploy

จากนั้นก็รอ... เมื่อการโอนย้ายเสร็จสิ้น เพียงเท่านี้เราก็สามารถเข้าไปดูเว็บไซต์ใหม่ของเราด้วย URL ที่ได้จากหน้า Firebase Console ในส่วนของ Hosting ได้เลย

ยังไงต่อล่ะทีนี้

ในบทความนี้เราพูดถึงเรื่องของพื้นฐานการติดตั้ง Hugo และการเซ็ตอัพ Firebase hosting เพื่อการ deploy เท่านั้น

ในส่วนตัวของผม นอกเหนือจากการตกแต่งและเพิ่มเนื้อหา ขั้นตอนต่อไปก็เห็นจะเป็น

การผูกโดเมนเข้ากับ Firebase hosting
การเซ็ตค่า header ต่างๆให้กับโปรเจ็ค
การทำ continuous integration

อู้หู!! เหลืออีกหลายอย่างเลยกว่าจะเสร็จตามต้องการ

Go สำหรับสร้าง Mobile Apps

Atthaphon Urairat — Sat, 22 Jun 2019 15:28:56 +0000

Go นับเป็นภาษาใหม่ที่น่าจับตามอง อีกทั้งยังเป็นที่สนใจของหลายๆคน
โดยนอกเหนือจากความโดดเด่นในการสร้างเว็บไซต์ที่มีความเร็วในการประมวลผล
และรองรับการใช้งานพร้อมๆกันได้ดีกว่าภาษาอื่นๆ
อย่างเห็นได้ชัด ซื่งเราสามารถเห็นได้จากผลการทดสอบเปรียบเทียบในบทความต่างๆที่แพร่หลายอยู่ในขณะนี้

ในตอนนี้ Go ก็ได้มีความพยายามพัฒนา Project
ที่จะนำมาพัฒนาโปรแกรมมือถือซึ่งในขณะนี้ก็ถือว่ายังอยู่ในขั้นตอนของการพัฒนา
ซึ่งการนำตัวโปรเจ็คมาใช้ก็อาจมีความเสี่ยงและพบปัญหาการใช้งานบ้าง
ด้วยความที่ตัวโปรเจ็คกำลังอยู่ในขั้นตอนของการพัฒนา และยังไม่มีการซัพพอร์ตอย่างเป็นทางการ
จากทั้งทาง Google และ Go team เพราะตอนนี้ Go team
ก็กำลังพยายามเป็นอย่างมากในการปรับปรุงตัวโปรเจ็ค เราสามารถเข้าไปดูได้จาก github.com/golang/mobile

แต่สำหรับคนที่อยากลองของใหม่ก่อนใครเพื่อน ก็คงไม่ใช่ปัญหาใช่ไหมล่ะครับ
ถ้าคุณเป็นอีกคนหนึ่งที่เชื่อว่า "มาก่อนได้ก่อน"
อย่ารอให้มันเป็นที่นิยมก่อนแล้วค่อยกระโดดเข้ามาเลยครับ

Go Mobile

Go mobile เป็น repository ย่อย ของ Go project ที่รองรับระบบการทำงานของ Smart
phone ทั้ง Android และ iOS และมีเครื่องมือช่วยสำหรับการ build โปรแกรมของเรา

ในส่วนของการใช้งาน Go สำหรับสร้างแอพพลิเคชั่น นั้นสามารถแบ่งออกได้เป็น 2 แบบคือ

ใช้ Go ในการสร้าง แอพพลิเคชั่น หรือให้ Golang เป็น Native application
ใช้ Go ร่วมกับ Native application หรือ SDK applications and generating bindings

เลือกใช้ Go เป็น Native หรือ ใช้ Go เป็น Package เสริมดี

ในส่วนนี้ขึ้นอยู่กับลักษณะของโปรเจ็คที่เรากำลังทำ หรือกำลังจะทำ
เราลองมาดูข้อดีข้อเสียหรือข้อจำกัดของทั้งสองแบบนี้กันดีกว่า

ใช้ Go ในการสร้าง แอพพลิเคชั่น หรือให้ Golang เป็น Native application

ในส่วนของการที่เราจะใช้ Go เป็น Native นั้นหมายถีงการที่เราเลือกจะใช้ภาษา Go
เป็นภาษาหลักในการสร้าง แอพพลิเคชั่น ซึ่ง ณ ตอนนี้ (29 Dec 2018) Go mobile ยังมี
package ให้เราได้ใช้สำหรับสร้าง mobile แอพพลิเคชั่นไม่มากนักซึ่งก็จะมี

App control and configuration
OpenGL ES 2 bindings
Asset management
Event management
Experimental packages include OpenAL bindings, audio, font, sprite and motion sensors

เราสามารถเข้าไปดูตัวอย่างสำหรับ Go native application โค้ดได้ที่ golang.org/x/mobile/example

ใช้ Go ร่วมกับ Native application หรือ SDK applications and generating bindings

ข้อดีของการใช้ Go ร่วมกับ Native application

เราสามารถนำ Go package มาใช้ซ้ำได้โดยการเพิ่ม หรือ เสริมเข้าไปในตัวโปรเจ็คที่มีอยู่แล้ว โดยที่เราไม่ต้องแก้ไขตัวโปรเจ็คที่มีอยู่แล้ว
ตัว Go package เสริมที่เราสร้างไว้สามารถนำไปใช้กับ Native application ไม่ว่าจะเป็น Android หรือ iOS ก็ได้

ต่อไปนี้คือข้อจำกัดที่มี

ตอนนี้สามารถรองรับ types ได้เพียงไม่กี่ชนิดเท่านั้น ดูได้จาก subset of Go types
การใช้ language binding จะมีปัญหาในเรื่องของการประมวลผล
การเรียกใช้งาน APIs นั้นมีข้อจำกัด ดังนั้นเราจำเป็นต้องศีกษาข้อจำกัดของตัวภาษาที่เราจะทำการใช้งานด้วย

ติดตั้งและทดลองรันโปรแกรม

เรารู้แล้วว่าการใช้ Go ในการสร้าง Mobile application มีอยู่ด้วยกัน 2
แบบหลักๆ ซึ่งในบทความนี้เราจะทำการติดตั้งและทดลองรันโปรแกรม ในแบบที่ใช้ Go เป็น
Native application โดยจะทำการติดตั้งด้วยเครื่องมือที่ Go Mobile มีมาให้ และดาวน์โหลด
Source code ตัวอย่างมาติดตั้งเพื่อทำการ build APK สำหรับ Android
สำหรับทดสอบในมือถือกัน

ถ้าเพื่อนๆต้องการดูตัวอย่างการติดตั้งในแบบอื่นๆ ก็สามารถเข้าไปดูได้ที่ Go Mobile

สำหรับการใช้งาน Go mobile เราต้องทำการติดตั้ง Go 1.5 หรือเวอร์ชั่นที่สูงกว่า หรือย่างน้อยที่สุดต้องใช้ เวอร์ชั่น 1.7.4 ในกรณีที่คุณใช้ macOS sierra

ขั้นแรกเราต้องทำการติดตั้ง tools กันก่อน โดยการรันคำสั้งต่อไปนี้ใน terminal หรือ iTerm
ของคุณ

$ go get golang.org/x/mobile/cmd/gomobile
$ gomobile init # ใช้เวลาในการติดตั้งพอควร

หลังจากเราทำการติดตั้ง gomobile เสร็จ
เราก็ทำการดาวน์โหลดตัวอย่างมาไว้ในเครื่องของเราด้วยคำสั่ง

$ go get -d golang.org/x/mobile/example/basic

ต่อไปเราก็จะทำการ build ตัวโปรเจ็คที่เราเพิ่งดาวน์โหลดมาเพื่อสร้างไฟล์ APK
เพื่อที่จะทำการติดตั้งและทดสอบใน Smart phone ของเรา

$ gomobile build -target=android golang.org/x/mobile/example/basic

ในกรณีที่เกิด error gomobile: no Android NDK path is set. Please run gomobile init with the ndk-bundle installed through the Android SDK manager or with the -ndk flag set. แสดงว่า gomobile ของเราหา ndk ไม่เจอดังนั้นให้เราทำการรันคำสั่ง gomobile init ใหม่อีกครั้งพร้อมทั้งพ่วง path ของ ndk-bundle เข้าไปด้วย

$ gomobile init -ndk ~/Library/Android/sdk/ndk-bundle/

จากนั้นให้รันคำสั่ง

$ gomobile build -target=android golang.org/x/mobile/example/basic

ในที่สุดเราก็ได้ ไฟล์ APK มาแล้ว ต่อไปเราก็นำไฟล์ APK
ที่ได้ไปติดตั้งและทดสอบในมือถือของเราได้แล้ว

DEV Community: Atthaphon Urairat

ใช้ ChatGPT Plus แทน AI Agent ยังไง

จุดเริ่มต้น: จากคนที่ใช้ AI ช่วยแค่เรื่องเล็ก ๆ

ทำไมยังไม่เปลี่ยนไปใช้ AI Agent อื่น?

วิธีที่ผมเปลี่ยนการใช้งานโดย เขียน PROJECT.md

ปัญหาที่เจอ และวิธีแก้ ผมใช้ zip code ก่อนเริ่มงาน

ตัวอย่าง: ChatGPT ช่วยอัปเดต PROJECT.md เอง

แล้วเรื่องความปลอดภัยล่ะ?

ผมจัดการความเป็นส่วนตัวยังไง:

สรุป

MariaDB ROW_NUMBER() ช่วยได้

ความเป็นมา

SELECT QUERY เริ่มต้นการสร้าง Query เพื่อตรวจสอบ

UPDATE QUERY จัดการอัพเดตรวดเดียวไปเลย

Laravel Package Starter Kits

Laravel Package Starter Kits

Directory Structure 🗂️

Package Skeleton 🦴

Development Environment 🌱

การ import package ที่เรากำลังพัฒนาเข้าไปใน laravel project ซึ่งอยู่บนเครื่องของเราแบบ locally 🏠

สิ่งที่ต้องปรับเปลี่ยนก่อนทำการ Coding ✅

License

รัน Laravel 8 ด้วย Sail บน Mac M1

ขั้นแรกเลยให้เราติดตั้ง Laravel ด้วยคำสั่ง

แก้ไขปัญหาเพื่อทำให้ MySQL สามารถทำงานได้

หลังจากนั้นก็ทดสอบการใช้งาน Laravel ได้เลย

MAMP ตั้งค่า Virtual Hosts

MAMP คือ

Virtual Hosts คือ

อนุญาตให้สามารถใช้งาน Virtual Hosts

Mac

อนุญาต SymLink Override

เพิ่มโปรเจคที่ต้องการทำ Virtual host

การตั้งชื่อโดเมนในเครื่องหรือใน local

คนรู้จักแทงบน 3 ตัวตรง แต่ลืมกลับเลขเลยถูกกิน

เสี่ยงโชค

สร้างฟังก์ชั่นแก้ปัญหา

โจทย์ 👩‍🏫

ทดสอบกับเลข 2 ตัว ที่พี่เขาไปได้มาจากต้นไม้ศักดิ์สิทธิ์

ทดสอบกับเลข 3 ตัว ที่พี่เขาไปได้มาจากต้นไม้ศักดิ์สิทธิ์

Git Rebase คอมมิทที่ push ขึ้นไปแล้ว

ขั้นตอน 👩‍🏫

สร้าง PHP pacakge สำหรับ Composer

ขั้นตอน

ต่อยอด Laravel Debugbar เพื่อดีบัก Rest API Routes

ปัญหา 👹

Framework & Packages ⚙️

วิธีทำ 👩‍🏫

ผลลัพธ์ 💯

Source & so much thanks ❤️🎉🥰

gowebexamples ภาษาไทย

Hugo + Firebase

ทำไมต้อง Hugo + Firebase

ทำไมต้อง Hugo

ติดตั้ง Hugo

สร้างเว็บด้วย Hugo

เลือก Theme สำหรับโปรเจ็ค

เพิ่มบทความให้กับ Blog ของเรา

ทำไมต้อง Firebase

ขั้นตอนการติดตั้งและใช้งาน

ยังไงต่อล่ะทีนี้

Go สำหรับสร้าง Mobile Apps

Go Mobile

เลือกใช้ Go เป็น Native หรือ ใช้ Go เป็น Package เสริมดี

ใช้ Go ในการสร้าง แอพพลิเคชั่น หรือให้ Golang เป็น Native application

ใช้ Go ร่วมกับ Native application หรือ SDK applications and generating bindings

ติดตั้งและทดลองรันโปรแกรม

วิธีที่ผมเปลี่ยนการใช้งานโดย เขียน `PROJECT.md`

ตัวอย่าง: ChatGPT ช่วยอัปเดต `PROJECT.md` เอง