Ez Generator some thing with Yo-Man(Yeoman)!!!

Yo!! สวัสดีครับพ่อแม่พี่น้องลุงป้าน้าอาหลานเหลนโหลนทุกท่าน ม๊ะ เรามาเข้าเรื่องกันเลยดีกว่า สืบเนื่องจากผมเป็นคนที่ขี้เกรียจมากๆๆๆๆ อยู่แล้วในการที่จะ Clone บางสิ่งจาก Github คือทุกครั้งผมจะต้องฝืนสังขารดั้นด้นเข้า Github ไปหาเจ้านรี่

เจ้า ssh คีย์ตัวร้าย

จากนั้นเมื่อเวลาผ่านไป~~ พี่ปอนด์(Jedsada Tiwongvorakul) จึงมาแนะนำให้ไปดู Yeoman Generator แรกๆ มาก็ยังมึนๆว่ามันเอามาทำหอยอะไรได้ฟะ จากนั้นก็ได้ส่องๆดูตาม Document ตามตัวอย่างของพี่ปอนด์ และเมื่อเวลาผ่านไปหน่อยๆ ก็ได้เห็นแสงสว่างปลายอุโมงค์ แท๊มแท่ม~~~~~

YO (Yeoman)

แสงสว่างนั้นคือการสั่งให้เจ้าเยล Clone บางสิ่งที่เราต้องการผ่านตัวมันนั้นเอ๊ง !!!!!

ไม่พูดเอ้ยพิมอะไรมากให้เสียเวลากันล๊าววววว เริ่ม!!!!

Giphy.com

ก่อนที่เราจะ ระเลง โค้ดกันนั้นเราต้องซีตุบ(Setup)โปรเจคกันก่อน

ต้องมี!!!

• NodeJS ไม่มีใช่ไหมไปโหลดสิไป๊!! (เกรียวกราด)

https://nodejs.org/en/

• VS Code หรือ Code editor ในดวงใจ

Mission

ทำให้เจ้า YO มันจำยอมทำการสร้างไฟล์ที่เราต้องการให้เรา

Step1 : ซีตุป(Setup) Project

เปิดก่อนได้เปรียบ

Giphy.com

npm install -g yo

เริ่มจากการสร้าง Folder หรือ Directory กันก่อนเลย แล้วตั้งชื่อตามต้องการ

mkdir <ชื่ออะไรก็ได้เอาที่สะดวกเลย>

เปิด Terminal หรือ Command Line แล้วบินเข้าไปใน Directory ที่เราสร้างไว้เลย

cd <ชื่อตามที่ตั้งไว้ตามข้อ1>

สร้าง NodeJS Project

npm init

ให้ตั้งชื่อโปรเจคเป็น generator-{ชื่อที่ต้องการ} ตามที่ท่าน Yo ได้แนะนำเอาไว้

กด Enter รัววววววๆๆๆๆๆๆ ให้ยับ สุดท้ายจะได้ออกมาแบบนี้

แล้ว กด enter ไปอีกทีแรงๆ

จากนั้นจะเป็นการติดตั้ง Package ที่ใช้ในโปรเจคนี้กันนะครัช

เริ่มจาก yeoman-generator พระเอกของเรานั่นเองงงงงงง

npm install yeoman-generator

ตัวต่อมาจะเป็นตัว fs (file system) ที่เอาไว้จัดการไฟล์

npm install fs

ตัวสุดท้ายคือ path ที่จะเข้ามาจัดการ path file ที่อันแสนจะยุ่งเหยิงของเรา

npm install path

หลังจากติดตังตัว กขค หมดแล้วเรามาสร้าง Directory และก็ JS file ตามโครงสร้างของโปรเจคได้เลย

มามะมา ดูโครงสร้างของโปรเจคของเราตามที่ท่านโย่ ได้แนะนำกันก่อน

├───package.json
└───generators/
    ├───app/
    │   └───index.js
    └───router/
        └───index.js

credit: https://yeoman.io/authoring/

ซึ่งในที่นี้เราจะตัดเจ้า routerออกนะครับเพราะผมไม่ต้องการที่จะใช้มัน

ที่นี่!!(เป็นเสียงที่เต็มไปด้วยความเกรียวกราด)

จัดเลยเริ่มที่ สร้าง Directory ชื่อว่า App แล้วใน App มีไฟล์ที่ชื่อ index.js ลงมือๆๆๆๆ

mkdir generators
mkdir generators/app
touch generators/app/index.js

จากนั้นสร้าง Directory ชื่อเอาตามที่สะดวกเลย ( ในที่นี้จะตั้งชื่อว่า android )แล้วนำตัวต้นแบบที่เราต้องการให้เจ้า Yo มันสร้างให้ สุดท้ายแล้วจะได้โครงสร้างออกมาเป็นแปปนี้

├───android
├───package.json
└───generators/
    └───app/
        └───index.js

Giphy.com

Step2 : ละเลงโค้ด

***ผมจะใช้คำว่า “android” แทนสิ่งที่ผมต้องการให้เจ้า Yo สร้างให้***

รอไรหล่ะ ยังๆๆ ยังไม่เปิด Code Editor อีกก….

เริ่มเลยละกัน…. ทำการเปิด File index.js ขึ้นมา

จากนั้นทำการ import package ที่เราต้องการใช้ทั้งหมดมาก่อนมันจะมีอยู่ 3 ตัวตามที่เราได้ทำการติดตั้งไว้แล้ว (fs, yeoman-generator, path)

const fs = require('fs')
const path = require('path')
const generator = require('yeoman-generator')

จากนั้นให้เราทำการสร้าง Class โดยให้ Extend generator

module.exports = class extends generator {}

ทำการสร้าง Constructor และทำการยัด Path ของ Directory ของตัว android เข้าไปใน sourceRoot โดยใช้ path.resolve(_dirname, “../../android”) ซึ่งตัว _dirname เป็น absolute path ของเรานั่นเองแล้วต่อด้วยที่อยู่ของ android นับจาก project root เมื่อ log ออกมาดูจะเป็น

/Users/{username}/…/{projectName}/android

ส่วนต่อมาเป็นการสร้าง function การ copy ไฟล์ต้นฉบับเราไปยังที่ บลาๆๆๆ

ชื่อ function จะเป็นชื่ออะไรก็ได้เอาตามที่สะบายใจเลย เคน๊ะ!

ถ้าจะตั้งชื่อตาม Document ของ YO ก็ได้นะไม่ต้องคิดด้วย

writing() {}

ซึ่งสิ่งที่อยู่ใน function นี้จะเป็นการทำงานที่เกี่ยวกับการ Read/Write ล้วนๆ เริ่มต้นด้วยการ Readfile ใน android กันก่อนเลย

จะเห็นว่าผมใช้ readdir ของ fs เข้ามาอ่านไฟล์โดยสิ่งที่ readdir ต้องการหลักๆคือ path file ที่เป็น path เต็มซึ่งเราได้ทำการเตรียมไว้แล้วใน sourceRoot จึงทำเรียกมาใช้ได้โลยยอย่างง่ายดาย แล้วอีกตัวที่มันต้องการคือตัวที่เป็น Callback แล้วเจ้า Callback มันจะคายออกมาเป็น 2 ค่าคือ error กับ result(ไฟล์ที่อ่านมาได้)

ในเมื่อมีการอ่านแล้วมันต้องมีการเขียนเพื่อให้ Mission นี้เสร็จสมบูรณ์ ลุยยยย

ไปต่อไม่รอแล้วน๊าาาาา

ทำได้โดยการเขียน code ตาม

เนื่องจาก items ที่ได้มานั้นเป็น array เราจึงต้อง loop ออกมา “ยำ” ทีละค่า

เราใด้ใช้ fs.copy ในการคัดลอกไฟล์ ซึ่งฟังก์ชันนี้ต้องการ ที่อยู่ต้นทางและ ปลายทางในที่นี้ใช้เป็น templatePath และ destinationPath ของYo แล้วโยนชื่อของไฟล์

ถ้าหากใครสงสัยว่า templatePath คืออะไร มันคือที่อยู่ของ android นั่นเอง และ destinationPath คือที่อยู่ของตัวเรา ณ ขณะนี้นั่นเอง

มาปิด Mission อันแสนยาวนานนี้กันเถอะ

ใช้ command lineหรือ terminal บินไปที่ root ของ project โลดแล้วละเลงคำสั่งตามนี้

sudo npm link

วิธีการใช้งาน

เปิด terminal หรือ comman line แล้วไปยังที่ๆต้องการจะสร้างโปรเจค จากนั้นพิมพ์ตามนี้สิจะรออะไร

yo generator-{ชื่อโปรเจคที่ได้ตั้งไว้}

มันก็จะสร้างไฟล์ให้เราตามดั่งที่ใจเราต้องการได้แล้ว

อะๆอ๊อๆๆๆ ลืมไปเมื่อใดที่เราทำการพิมพ์ yo generator-{ชื่อโปรเจค} แล้ว ครั้งหน้าถ้าไม่มีการแก้ไขอะไร เราสามารถพิมพ์สั้นๆได้เลย(ไม่ต้องใส่ generator)

yo {ชื่อโปรเจค} 

จบแล้วจย๊าาา ~~~~~~~~~~~~~~~~~~~~~~~~~~~

Mission Complete

Giphy.com

Github Code ตัวอย่าง

ในบทความหน้าเราจะมาต่อความหนาว(Cool) เพื่อสนองต่อมหากาพย์ความขี้ค้านของเรากันต่อ อิอิ

Coming soon