DEV Community: Thnawat Gulati

Git and github 101 - พื้นฐาน git และ github

Thnawat Gulati — Thu, 03 Dec 2020 17:21:21 +0000

ก่อนอื่นต้องเล่าถึงการทำงานของ git ก่อน git คือ version control ตัวหนึ่งในท้องตลาดที่มีความนิยมสูงสุด ปกติ git จะอยู่บน Computer เราเป็นตัวควบคุมเวอร์ชั่นของงานเรา คุณเคยประสบปัญหากับการที่ต้อง Save ไฟล์ซำ้กันมั้ยเช่น Project-Final.pdf

พอเอาไปแก้ไขก็ไม่อยากจะเซฟทับไปเรื่อยๆก็เลยสร้างไฟล์ใหม่เป็น Project-final-2.pdf , Project-final-final.pdf ไปเรื่อยจน ตอนแรกในโฟล์เดอร์มี แค่ไฟล์เดียขนาด 20 MB ไปๆมา 500-600 MB

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

นั่นแหละคือสิ่งที่ Github จะแก้ปัญหาได้คือ การทำไฟล์ไปวางไว้บน git server และ git และ github มีประโยชน์นอกจากจะเป็นตัวควบคุมเวอร์ชั่นแล้ว ยังสามรถทำแะไรได้อีกหลายอย่างเช่น Code Review , สามารถ Track การแก้ไข Code , issues , branch

การติดตั้ง Git

สามารถเลือกดาวน์โหลด ได้ตามระบบ ปฏิบัติการที่ใช้อยู่ได้เลย

หลังจากติดตั้ง git แล้วให้เป็น Teminal บน Mac,Linux หรือ Command Line บน Windows และทดลองใช้คำสั่งตามนี้

git --version

ในหน้า Command Line หรือ Termainl จะต้องแสดง version ของ git ประมาณภาพด้านล่างนี้

หลังจากเราได้ทำการติดตั้ง และ ทดลองเรียนร้องแล้วเราจะมาลองดูฝั่งของ Github ดูบ้าง การใช้งาน github ต้องสมัครสมาชิกก่อน โดยเข้าที่เว็บ
https://github.com

ให้สมัครสมาชิก ใส่ username , email , password และ ทำตามขั้นตอนที่ ทางเว็บเขาให้ทำ หลังสมัครสมาชิกเสร็จแล้วก็พร้องที่จะลองทำการ สร้าง Repository แรกในชีวิตแล้ว

ให้มาที่หน้า Profile ของตัวเองโดยการเข้า Link : https://github.com/ชื่อ username ที่ใช้ตั้งไปตอนสมัครสมาชิก นี่คือหน้าโปรไฟล์ของคุณ

ให้มาที่ปุ่ม + ด้านบนขวาแล้วก็กด New Repioitory
หลังจากกดเข้าไปแล้วหน้าเว็บจะพาไปสร้าง Repo ของคุณ

ช่อง Repository name : ให้ใส่ชื่ออะไรก็ได้ แต่ตามปกติที่จะใส่กันคือ ชื่อ ของ Project ที่จะทำ

ช่อง Description : สามารถใส่รายระเอียดของ Project เข้าไป ( ใส่หรือไม่ก็ได้ )

Radio Button [ Public, Private ] ถ้าต้องการให้คนอื่นสามารถเข้าถึง Repo ของเราได้ ให้เลือก public แต่ถ้าหากไม่ต้องการให้เข้าถึง Repo ของเราก็ให้เลือก Private

ช่อง Initialize this repository with a README ยังไม่ต้องติ๊กก็ได้ แต่ถ้าใคร่อยากจะติ๊ก ก็เชิญได้ตามสบาย หลังจากทำทุกขั้นตอนแล้สก็ให้ก็ Create repository ได้เลย

หลังจากสร้างโปรเจ็ค ไปแล้วจะพบหน้าตาประมาณในภาพ กรณีที่ไม่ได้ติ๊ก Readme นะ

คราวนี้เรากลับมาที่คอมพิวเตอร์ของเรา ที่ผมจะยกตัวอย่างให้ดูนี้คือ ผมสร้างโฟล์เดอร์ใหม่ในคอม ในโฟล์เดอร์ ผมใส่ไฟล์ Reamme.md ไว้

ผม ใช้ Command line เข้าไปที่ โฟล์เดอร์ ที่ผมจะ push ไฟล์ขึ้นไป หาก โฟลเดอร์ ถูกสร้างขึ้นมาใหม่ ให้ใช้คำสั่ง

git init

เพื่อที่ทำการ initialize ตัว .git ขึ้นมา หลังจากใช้คำสั่ง init ไปแล้ว ให้ใช้คำสั่งที่จะทำการ add ไฟล์ คือ คำสั่ง

git add .

add และตามด้วย จุดคือ add ทุกไฟล์ แต่ถ้าหาต้องการ add เฉพาะบางไฟล์หรือบางโฟลเดอร์ ให้ใช้คำสั่ง

git add ชื่อโฟล์หรือโฟลเดอร์

หลังจาก Add เสร็จเราจะต้องทำการ Commit อธิบายแบบง่ายๆ คือ เหมือนแบบ add เสร็จ เราก็เอา ที่ add ไป แพ็คใส่กล่อง และแปะ ชื่อ และ ก็รหัสพัสดุ ประมาณนั้นแหละ โดยการใช้คำสั่ง

git commit -m "ข้อความที่อยากจะเขียน เอาไว้สื่อให้เราได้รู้ว่าเราทำอะไรไปบ้าง"

พอเรา commit เสร็จมันจะขึ้นประมาณนี้

ตอนนี้เราก็ได้ version control บนเครื่องละ หลังจากที่ถ้ามีการแก้ไขไฟล์ก็ทำแค่ add . และก็ commit แต่คราวนี้อย่างที่บอกไปตอนแรกว่านี่เราแค่เก็บไว้บนเครื่องยังไม่ได้ทำการเอาไปเก็บบน github server

วิธีการเอาขึ้นไปบน github ก็คือ จะต้อง Remote เข้าไปก่อน อธิบาย Remote ง่ายๆคือ เหมือนการจูนให้ คอมเรา สัญญาณตรงกับ github repo ที่สร้างขึ้นมา อันนี้คืออธิบายแบบไม่ใช่เทคโนโลยีนะ

การ Remote ใช้คำสั่งตามนี้

git remote add origin https://github.com/ชื่อusername/ชื่อrepo

พอหลังจาก Remote ไปแล้วก็ถึงขั้นตอนการ push ขึ้นไปบน github โดยการใช้คำสั่ง

git push -u origin master

มันจะถูก push ขึ้นไปอยู่บน master branch ตามภาพ

และถ้าเราลองกลับไปดูที่ browser ที่ repo เราลอง refresh ดู มันจะมีไฟล์เราขึ้นไปอยู่บน github เรียบร้อย ตามภาพด้านล่าง

แล้วหลังจากนี้ถ้าหารเราแก้ไขก็ทำตามขั้นตอนที่ผ่านมา คือ

1) add
2) commit
3) push

เท่านี้เราก็ทำ version control พร้อมกับเอาไปเก็บ บน github ได้เรียบร้อย เดียวตอนหน้าๆ เราจะลองมาสอนการ แตก branch และ อื่นๆอีกมากมายฝากติดตามด้วยนะครับ หากมีอะไรผิดพลาดประการใดขออภัย ณ ที่นี้
ติดตามเพื่มเติมที่

Github : t6tg

การแปะ Github gist บน medium

Thnawat Gulati — Mon, 01 Jun 2020 17:24:26 +0000

วิธีการนำ Github gist มาแปะบนหน้าเว็บ medium หรือ เว็บอื่นๆ

ขั้นตอนที่ 1 ให้มาที่เว็บ

Discover gists

และให้ไปที่ หน้าโปรไฟล์ของตัวเองก่อน จะได้หน้าตา github gist ของตัวเอง

วิธีการเพิ่ม gist ก็คือให้กดปุ่มบวกใกล้ๆกับ รูปโปรไฟล์

Add new gist

พอหลังจากที่เรา กดเครื่องหมาย “+” แล้วจะพาเรามาที่หน้านี้ให้เราใส่ description ใส่ชื่อไฟล์ และก็ใส่ Code ของเราลงไปตามช่อง หลังจากเสร็จให้เรากด Create public gist นะ เพราะถ้า private จะแปะไม่ได้

พอหลังจากที่เรา Create เรียบร้อยจะได้หน้าตาประมาณนี้

ให้กดปุ่ม Embed แล้วเลือกเป็น Share สำหรับที่จะไปแปะบน medium แต่ถ้าจะไปแปะบนเว็บให้ใช้ embed แบบเดิม

แล้วก็เอา link ที่ได้ไปแปะบน medium แล้วกด enter ได้เลย แล้วมันก็จะขึ้นแบบนี้เลยยย

แค่นี้เราก็ได้ github gist มาแปะลงบนเว็บเราให้ Code ดูง่ายๆแล้วววววววววววววววว

Cloud Firestore , ReactJS and deploy on Firebase Hosting [ EP.1 ]

Thnawat Gulati — Mon, 01 Jun 2020 16:58:04 +0000

Cloud Firestore , ReactJS and deploy on Firebase Hosting [EP.1 ]

เราจะมาลองทำเว็บด้วย Firebase Cloud Firestore และ Hosting กันมาดูกันว่าเราจะทำยังไง

ต้องเล่าก่อนว่า Cloud Firestore คือ อะไร Cloud Firestore มันก็เปรียบเสมือน NoSQL Database คล้ายๆ กับ MongoDB แต่ส่ิงที่ดีของ Firebase คือ Eco System ที่ดี ไม่ว่าจะ Firebase Auth , Hosting , Realtime Database , Storage อื่นๆอีกมากมาย

มา เรามาเริ่มกันเลยดีกว่าก่อนอื่นสิ่งที่ต้องทำสิ่งแรกคือ ติดตั้ง Firebase-toolsโดยใช้คำสั่งดังนี้ เพื่อที่จะติดตั้ง Firebase-tools แบบ Global

$ yarn global add firebase-tools 
หรือ 
$ npm i firebase-tools -g

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

$ firebase login

หลังจากพิมพ์คำสั่งนี้ ระบบจะเด้งเปิด Browser ให้ Login ผ่าน Google Account

พอทำการ Login เสร็จ คราวนี่เราดูฝั่งของ Fronted กันต่อ ก่อที่จะทำการ Config Firebase Firestore และ Firebase Hosting วิธีการติดตั้ง React โดยการใช้คำสั่งตามนี้

$ npx create-react-app [ชื่อที่อยากจะตั้ง]

แล้วหลังจากที่เราเข้ามาในโฟลเดอร์แล้วให้ใช้คำสั่ง

$ yarn start
หรือ 
$ npm start

สามารถ run ได้ หน้าตาประมาณนี้

ให้แก้ไฟล์ package.json ตามนี้

https://medium.com/media/563e16e47ce73e2b478ad7c6a21f4c4d/href

พอเราแก้ไขไฟล์ package.json กันแล้ว เราก็มาที่ไฟล์ src/App.js ลองแก้ไขประมาณนี้ดู

https://medium.com/media/c56d247924dfebdddb55e10c02095f72/href

หลักจากลองพิมพ์ตามด้านบนแล้วให้เข้า terminal แล้วของพิมพ์

$ yarn start
หรือ 
$ npm run start

Initial project

ถ้าขึ้นแบบนี้ แสดงว่า run ได้ ปกติไม่มีปัญหาอะไร คราวนี้เรามา Config Firebase hosting กัน โดยการไปสร้างโปรเจ็คที่เว็บ

Firebase

โดยการทำตามขั้นตอนนี้

ให้มาที่ Console เตือนละนะ ว่าจะต้องเป็น Account เดียวกับที่ firebase login

แล้วให้เลือก Add Project ปุ่มเพิ่ม ขนาดมหึมา

จะได้มาหน้าแบบนี้ คราวนี้ก็ตั้งชื่อ project ที่อยากจะตั้ง ชื่ออะไรก็ได้ตรงนี้ตามใจ หลังจาที่ใส่เสร็จก็กด Continue และไปต่อกันโลดดดดดดดดดดดดดดดดด ทำตามสิ่งที่เขาให้ทำตามขึ้นตอน ก็จะได้ Project มาคราวนี้เรามา Initial firebase ใน Project กันดีกว่าโดยใช้คำสั่ง

$ firebase init

ให้เลื่อนลูกศรลงมาที่ hosting และ กด Spacebar แล้วก็กด Enter พอเรากด Enter ไปแล้วก็เลือก “ Use an existing project ” ก็กด enter ก็จะมี Project มาให้เลือก ก็เลือกตามที่สร้างไว้ได้เลย หลังจากนั้นทำตามภาพนี้

พอทำตามภาพเสร็จลอง ใช้คำสั่ง

$ yarn deploy 
หรือ 
$ npm run deploy

แล้วเราจะได้ Link firebase เว็บกลับมาให้ลอง Click เข้าไปดูจะได้หน้าตาแบบ run ในเครื่องเลยยยยยยยยยยย

Deploy to firebase hosting

เดียว EP.2 เรามาดูการเริ่มใช้ Firestore กัน

สามารถติดตามเพิ่มเติมได้ที่

https://thanawatgulati.com

thanawatgulati - Overview

รีวิวคอร์ส Introduction Typescript‍

Thnawat Gulati — Mon, 18 May 2020 09:45:38 +0000

ต้องขอท้าวความก่อนว่าทำไมถึงมาเริ่มสนใจการใช้ Typescript ก็เพราะว่าได้เริ่มเรียนรู้และ เริ่มสนใจจากการได้เรียน กับ คอร์สสดของ The Self Made หากใครสนใจลองไปดูได้ที่ คลิกที่นี่

แล้วได้ทดลองเปลี่ยนจากการเขียน JavaScript มาลงเป็น Typescript แล้วรู้สึกว่า Typescript ก็มีความเขียนสนุก วันนี้จะมาลองเขียน Typescript ตาม docs และที่พี่เขา ให้ลองดูๆเพื่อใครสนใจจะศึกษาเพิ่มเติม

ก่อนอื่นต้องบอกก่อนว่า Typescript การเขียนจะต่างจาก Javascript เล็กน้อยตรงที่ Typescript จะต้องระบุ Type ให้กับ ไม่ว่าจะเป็น Variable หรือ Method อื่นๆ

ตัวอย่าง Data-Type

Boolean / String / Number / Any

const isLoadingTS: boolean = true; // Boolean แบบ Typescript
const cat: string = "CAT"; // String แบบ Typescript
const quantity: number = 300; // Number แบบ Typescript

// Number จะสามาระใช้ได้ แบบทั้ง Decimal , Hex , Octal , Binary
const deciamal:numebr = 100; 
const hex: number = 0xf66a0; // 0 - 9 & a - f
const binary: number = 0b00101; // 0 , 1
const octal: number = 0o31752; // 0 - 7
const anyType : any = "james" // สามาถใช้ Type อะไรก็ได้

ตัวอย่าง Method

Void / Number / String / Boolean / Any

// การ Return แบบ Void
const voidReturn = () : **void** => {
    console.log("Hello World")
}

// การ Return แบบ Number
const numberReturn = () : **number** => {
    const **num** : number = 10;
    return **num** ;
}

// การ Return แบบ String
const stringReturn = () : **string** => {
    const **name** = "James";
    return **name** ;
}

// การ Return แบบ Boolean
const boolReturn = () : **boolean** => {
    const **isLogin** = true;
    return **isLogin** ;
}

// การ Return แบบ Any
const boolReturn = () : **any** => {
    const **word** = "Hello Any";
    return **word** ;
}

// การ Return แบบ Never สำหรับ method ที่ทำงานไม่สิ้นสุด
const boolReturn = () : **never** => {
    **while(true) {  
 console.log("Hello From the outside");  
 }**  
}

// และถ้าหากมีการรับ parameter ก็จะต้องใส่. Type ให้กับ parameter ด้วย
const stringReturn/ = ( **name : string** ) : **string** => {
    return **name** ;
}

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

ยังมีเรื่องอื่นๆอีกมากมายที่น่าสนใจไม่ว่าจะ Enum , interface , Gerneric Type ที่สามารถไปศึกษาเพิ่มเติมได้ที่

antronic/theselfmade-typescript

ติดตามเราได้ที่

- thanawatgulati - Overview

คอร์สสอน NodeJS พื้นฐาน By Coursedex

Thnawat Gulati — Fri, 15 May 2020 13:16:22 +0000

คอร์สสอน NodeJS พื้นฐาน By Coursedex

เป็นคอร์สสอน Api ด้วย NodeJS/Express ออนไลน์ใน Youtube สามารถเข้าไปรับชมได้ฟรี

สอน NodeJS พื้นฐาน EP.1 — การติดตั้ง node และ อื่นๆ

https://www.youtube.com/watch?v=aNLQsbc4sRU

สอน NodeJS พื้นฐาน EP.2 — Vscode Extension และ เริ่มใช้ Express

https://www.youtube.com/watch?v=Ios6umwtLLQ

สอน NodeJS พื้นฐาน EP.3 — การติดตั้ง Nodemon และ Basic HttpReques

https://www.youtube.com/watch?v=aAlZ9l45TIQ

website : https://thanawatgulati.com

blog : https://blog.thanawatgulati.com

github : https://github.com/thanawatgulati/test_express

ประสบการณ์พัฒนา Grader Computer Programming ในการเรียนการสอนของมหาวิทยาลัย

Thnawat Gulati — Fri, 01 May 2020 16:11:01 +0000

ตัวอย่างส่วนของการออกแบบ ( Design )

การออกแบบของระบบตรวจสอบภาษา C และ C++ ตอนแรกออกแบบไว้ได้ประมาณนึงแต่เนื่องจากสุดท้ายเวลาค่อนข้างกระชั้นชิด และ เอาเวลาไปพัฒนาระบบ Backend ค่อนข้างเยอะ เลยเปลี่ยนจากเขียน Code Design เองไปเป็นการใช้ AdminLTE Theme

ส่วนของฝั่งผู้ใช้ หรือ ฝั่งนักเรียน

ส่วนของหน้าส่ง Source Code

ส่วนของ Backend ที่ใช้ในการพัฒนาระบบ คือ PHP สำหรับส่วนของการตรวจสอบ Source Code ใช้ shell_exec ในส่วนที่ภาษา PHP มีให้ เพื่อใช้ในการ Compile โดย Compiler ที่เลือกใช้ในภาษา C คือ GCC

ตัวอย่างคำสั่ง Compile

gcc -std=gnu99 -w -O2 -fomit-frame-pointer -lm

และส่วนของฐานข้อมูลที่เลือกใช้ในการพัฒนาคือ MySQL

Source Code ทั้งหมด -> GitHub : Thanawatgulati/compro2grader

thanawatgulati/compro2grader

ประสบการณ์หลังเริ่มใช้งานไปได้ 1 ภาคการเรียน

พบปัญหาหลักๆ คือ การที่มหาลัยใช้ Windows และการเขียนโปรแกรมของรุ่นน้องบ้างครั้งเขียน Compile บน Windows แต่ละเครื่องคำตอบไม่เหมือนกันบ้าง หรือ เอามา Compile บน Grader [Linux] ผลลัพธ์ออกไม่เหมือนบน Windows

และอีกปัญยหา คือ การจัดการ Memory คิดว่ายังไม่ไดัพอใน การ Compile

และส่วนอื่นๆของฝั่ง Admin ที่อาจจะออกแบบให้ใช้ยากเกินไป จึงได้เริ่มพัฒนาระบบใหม่ในชื่อของ sigma-Grader ซึ่งครั้งนี้ใช้ Frontend เป็น NextJS และ Backend เป็น NodeJS ส่วนของ ฐานข้อมูลเปลี่ยนไปทดลองใช้ MongoDB ที่เป็นแบบ NoSQL เพื่อเพิ่มความเร็วในการอ่านเขียนข้อมูล และลดปัญหาGraderตัวนี้คิดว่าจะช่วยลดปัญหา คอขวด ในการรอตรวจโดยใช้ STRUCTURE แบบ Queue ในการจัดการคิวในการตรวจ

ทั้งนี้ระบบนี้อยู่ในขั้นตอนการพัฒนา สามารถตรวจสอบได้ที่

SigmaGrader

ฝากผลงานเพิ่มเติมที่

thanawatgulati - Overview

ยังมีระบบ ลงทะเบียนกิจกรรมชุมนุม และ ระบบ Grader v.beta ที่เป็นภาษา python อีกด้วย