Atom Editor with GitHub.com
Sublime | Atom | VSCode
เริ่มต้นกับ ATOM + GitHub
วันที่ 3 กันยายน 2560 มีโอกาสทดสอบการเชื่อมต่อระหว่าง ATOM Editor กับ GitHub.com ซึ่งโปรแกรม Editor ทำหน้าที่พัฒนา Code ส่วนอีกตัวคือ Web server ทำหน้าที่เก็บ Code แบบควบคุม Version ได้ แล้ว Download Package : Git-Plus มาช่วยเป็นตัวกลาง ทำหน้าที่ Commit, Push กับ Pull ครั้งตั้งใจแรก คือ Code จาก Local Host ไปยัง GitHub.com ผ่านโปรแกรม ATOM Editor สัก 1 ไฟล์ ผลการทดสอบไม่เป็นตามคาด ได้ไปเล่าใน Blog ที่ burin/8857 แล้วนำไปแชร์ประสบการณ์ไปในกลุ่มนักพัฒนา 2 กลุ่ม คือ ไทย PHP และ Programmer Thai Blood พบว่าคุณ Minato Namikazerak กับ Nimit Suwannagate ได้เข้ามาร่วมแลกเปลี่ยน แล้วแนะนำคลิ๊ป [9-1] แนะนำและติดตั้ง git ซึ่งอยู่ใน Playlist : Introduction to MEAN Stack SIPA Programming มีคลิ๊ปถึง 143 clip ๆ ละประมาณ 10 นาที มีเนื้อหาละเอียดมากเฉพาะเรื่อง Git มี 2 บท บทที่ 9 มี 5 ตอน และบทที่ 10 มี 4 ตอน ดูกันเพลินเลย ยังมีอะไรอีกมากที่น่าสนใจใน Channel ของ Sipa programming เข้าไป subscribe กันได้ครับ
หลังเล่าเรื่อง Atom กับ Github.com แล้วแชร์ในกลุ่ม "ไทย PHP" ในช่วงบ่าย แล้วช่วงเย็นก็ได้
ก็ได้อ่านคำแนะนำของ Nimit Suwannagate แล้วก็ลองตามคำสั่ง 7 บรรทัดกกันเลย
พอสรุปได้ว่าแนะให้ใช้ git ผ่าน command line อย่าใช้ gui จนเคยตัว
เพราะบางโปรแกรมจะข้ามขั้นตอนให้ หากเคยชินก็อาจจะละเลยจนพลาดขั้นตอนสำคัญ
เค้าแนะนำมา 2 ลิงค์ คือ
Getting-Started-First-Time-Git-Setup
กับ 
Git-Basics-Working-with-Remotes
แล้วพิมพ์ตัวอย่างคำสั่งมาให้ 7 บรรทัด
เริ่มจากทดสอบคำสั่ง git บน DOS โดย cd เข้าห้องเก็บ code
DOS>d:
DOS>cd D:\atom
DOS>dir /a พบว่ามีห้อง .git อยู่ แสดงว่าเป็น repository ในเครื่อง local
สรุปว่าทำผ่าน DOS ไม่ได้ เพราะไปหยุดตอนใช้ DOS>git push 
แล้วติด remote: Anonymous access .. กับ fatal: Authentication failed
===
git remote add origin https://github.com/thaiall/programming-page.git
git fetch origin
git checkout -b backup_master master
git branch -D master
git checkout --track -b master origin/master
git merge backup_master
git push
===
DOS>git remote add origin https://github.com/thaiall/programming-page.git
พบว่า fatal: remote origin already exists.
ปรากฎว่าใน config ผมกำหนด remote origin ตาม url ข้างต้นไปแล้ว

DOS>git fetch origin
ไปตรวจกับ origin ซึ่งผมสร้าง branch ใหม่ไว้ชื่อ 2560 
แล้วรายงานว่ามี branch ใหม่เกิดขึ้นพร้อมจำนวนแฟ้มที่อยู่กับ github ตาม url ที่ให้ไว้
ถ้า fetch อีกรอบแล้วไม่มีอะไรใหม่ ก็ไม่รายงานอะไรเลย

DOS>git checkout -b backup_master master
ผมแก้ไข code ไป 2 แฟ้ม ก็รายงานแฟ้มที่เปลี่ยนมา 2 แฟ้ม
แจ้งมาว่า Switched to a new brach 'backup_master'
M       test01.php
M       training49/s0index.php

DOS>git branch -D master
รายงานว่า Deleted branch master (was 82dacef)
อึ้ม น่ากลัว ชอบกล

DOS>git checkout --track -b master origin/master
Switched to a new branch 'master'
M       test01.php
M       training49/s0index.php
Branch master set up to track remote branch master from origin.

DOS>git merge backup_master
แจ้งว่า Already up-to-date

DOS>git commit -a -m "update test"
คำสั่งนี้ผมเพิ่มเอง จะ commit ก่อน push

DOS>git push
Username for 'https://github.com': your_username
Password for 'https://github.com': your_password
remote: Anonymous access to thaiall/programming-page.git denied.
fatal: Authentication failed for 'https://github.com/thaiall/programming-page.git/'
===
เท่าที่อ่านดู github.com ไม่ให้ติดต่อเข้าไปแบบธรรมดา 
ต้องมี security จึงต้องเข้ารหัสให้ปลอดภัยกันก่อน
ผมทำเรื่อง $ssh-keygen กับ $ssh-add ไปก่อนหน้านี้
พอเลือกใช้ Bash on Ubuntu on Windows 
จึงใช้งานต่อได้เลย ไม่ต้องกังวลว่าทำ keygen อีกครั้ง
ก็พิมพ์คำสั่งทั้ง 7 ข้างต้นใน bash
แต่มีสิ่งที่ต้องทำเพิ่มเติมดังนี้

1. ติดตั้ง git ใน Bash เพราะเรียกใช้จาก Atom น่าจะมีปัญหา
ด้วย $sudo apt-get install git

2. สั่ง mount ดูว่า drive d อยู่ไหน พบว่าอยูที่ /mnt/d
เข้าห้อง $cd /mnt/d/atom
เมื่อพิมพ์ 7 คำสั่งข้างต้น แล้วเพิ่มเติมนิดหน่อย สุดท้ายก็ใช้ git push ได้

3. ก่อนใช้ 7 คำสั่ง
ก็สั่ง $git config --global push.default matching
เพราะ git ที่ผมใช้ --version คือ 1.9.1 เค้าให้สั่งข้างต้น ก่อน git push

4. ก่อนสั่ง git push
ผมสั่ง DOS>git commit -a -m "update test"
เพราะจะได้ทราบว่ามีรายการแฟ้มต้องปรับปรุงหรือไม่
[master 4e857ca] update test
 2 files changed, 2 insertions(+), 3 deletions(-)
เพราะ ATOM ที่ใช้อยู่เกิดมีปัญหา Update แล้วไม่แจ้งว่า Update
ตอน git push กับตอบมาว่า Everything up-to-date
จึงต้องตรวจก่อน

5. หาก git push สำเร็จ จะแสดงข้อมูลประมาณนี้
Username for 'https://github.com': [yourname]
Password for 'https://[yourname]@github.com':
Counting objects: 13, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 517 bytes | 0 bytes/s, done.
Total 5 (delta 3), reused 0 (delta 0)
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To https://github.com/thaiall/programming-page.git
   7159ead..4e857ca  master -> master
เล่าเรื่องการใช้โปรแกรม editor ที่ชื่อ ATOM
วันนี้ 3 กันยายน 2560 ได้รุ่น 1.19.5 มา มีขั้นตอนที่จะเล่าสู่กันฟัง ดังนี้

1. ก่อน หรือหลังติดตั้ง ATOM editor 
ก็ควรไปสมัครใช้บริการของ Github.com หากคิดจะใช้งานร่วมกัน
เพื่อจะได้เชื่อมระหว่าง ATOM editor กับ Github
เพราะใน ATOM ไม่ได้เชื่อมเข้า Github ในทันที
มีขั้นตอนอีกเยอะกว่าจะสั่งอะไรใน Github ได้

2. ใน ATOM
เข้า Menu bar, Help, Welcome Guide, Install a Package, Open Installer
หรือ Menu bar, File, Settings, Install
หรือ Ctrl+Shift+P เพื่อ Search Package สำหรับ Install
พิมพ์ git ณ วันที่ 3 กันยายน 2560
package : git-plus 7.9.3 download 1737185 ของ akonwi
package : git-time-machine 1.5.9 download 265062 ของ Littlebee
package : git-control 0.9.0 download 157686 ของ Jacogr

3. เลือก install git-plus (ผมลงตัวเดียว)
หลังติดตั้งเสร็จก็เลือก Setting, Uninstall หรือ Disable ได้
เข้าไปดูใน Setting พบ Commands จำนวน 22 รายการ
คำสั่งไหนใช้บ่อยมี Hot-key ให้ใช้ด้วย
จะสั่งงานกด Ctrl+Shift+H

4. หลังติดตั้ง git-plus แล้วเรียก Git-Plus Palette
เลือกสั่ง add ก็ฟ้องขึ้นมาว่า
'git' is not recognized as an internal or external command,
operable program or batch file.
ก็มีเหตุที่ทำให้ใช้คำสั่งนี้ไม่ได้ ต้องทำข้อต่อ ๆ ไปก่อน
ปล.1 ไปสำรวจพบว่าใน Palette พบคำสั่งมากกว่า 22 รายการ ให้เลือกใช้
ปล.2 คำสั่ง add นี้คือการย้าย แฟ้มที่มีการแก้ไขเข้าไปอยู่ใน Staged changes
หากมีการ commit แล้ว push ก็จะรู้ว่าแฟ้มไหนเปลี่ยนแปลงบ้าง

5. Menu bar, View, Toggle GitHub Tab หรือ Ctrl+Shift+8
พบ This repository does not have any remotes hosted at GitHub.com
แสดงว่า ยังไม่ได้เชื่อม Repository หรือ Project เข้ากับ Github.com
เมื่อเข้าไปอ่านที่ https://atom.io/packages/git-plus
ในส่วนของ IMPORTANT พบคำแนะนำสำหรับผู้ใช้ SSH ว่าต้อง login อย่างไร
ส่วนผู้ใช้ Windows ก็เข้าไปอ่านใน [thread] ได้
พบว่า damianpirchio เค้าใช้งานได้หลังมีการ Update version ใหม่
บางปัญหา พอมี version ใหม่มา ปัญหาเหล่านั้นก็หายไป
https://github.com/akonwi/git-plus/issues/335
ปล. ปัญหานี้น่าจะเกิดจากการเชื่อมกับ repository ไม่เรียบร้อย
หากเชื่อมเรียบร้อย จะแสดงปุ่ม login เท่านั้น ตอนนี้ผมก็ยังไม่ได้ login ครับ
เวลา push ก็กรอก signin เป็นครั้งไป

6. Generating a new SSH key
บน Win10 มี Bash on Ubuntu on Windows
$ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
Generating public/private rsa key pair = [github] ตามชอบ
Enter passpharase  = [blank] ไม่ได้ใส่อะไร 
file (/home/burin/.ssh/id_rsa) = [github] ตามชอบ
ดังนั้นใน C:\Users\ACER\AppData\Local\lxss\home\burin>
จึงพบแฟ้ม github กับ github.pub

7. Adding your SSH key to the ssh-agent
ทดสอบว่า ssh-agent ทำงานอยู่ด้วย $eval $(ssh-agent -s)
พบตัวเลข PID และคำสั่งนี้ทำบน Bash on Ubuntu on Windows
แล้วสั่ง $ssh-add ~/.ssh/id_rsa
ของผมสั่งว่า $ssh-add ~/github
พบ Identity added: /home/burin/github (/home/burin/github)
เพราะกำหนด file ว่า github บน Windows ตอนที่ Generate

8. ไปแก้ config ใน git ของ Project
ตามคำแนะนำของ damianpirchio
https://github.com/akonwi/git-plus/issues/335
มีตัวอย่างที่ https://github.com/damianpirchio/inmobiliaria
เดิม
[core]
	repositoryformatversion = 0
	filemode = false
	bare = false
	logallrefupdates = true
	symlinks = false
	ignorecase = true
เป็น 
[core]
	repositoryformatversion = 0
	filemode = false
	bare = false
	logallrefupdates = true
	symlinks = false
	ignorecase = true
[remote "origin"]
	url = https://github.com/thaiall/programming-page.git
	fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
	remote = origin
	merge = refs/heads/master
[user]
	name = [youremail@example.com]
	email = [Your Name]
ที่ github ผมมี https://github.com/thaiall/programming-page ครับ

9. ตอนสั่ง add พบการใช้ git
อ่านจาก https://stackoverflow.com/questions/4492979/
ก็พบปัญหาเหมือนกัน คือ
'git' is not recognized as an internal or external command,
operable program or batch file.
มีขั้นตอนแก้ไขบน Win10 ดังนี้
9.1 หา Git ให้พบว่าอยู่ตรงไหน
จากการเข้าไปดูในโปรแกรม ATOM พบว่าติดตั้งมาแล้ว เป็น Editor ที่ใหญ่มาก ก็ต้องมีอะไรเยอะเป็นธรรมดา
C:\Users\ACER\AppData\Local\atom\app-1.19.5\resources\app\node_modules\dugite\git\cmd\
เพราะมากับ ATOM รุ่น 1.19.5 อัพเดทไปเมื่อวาน ตอนลงเป็น 1.18 ครับ ในเครื่องจึงมี GIT 2 Directory
9.2 กดปุ่ม Window+Pause เพื่อเข้า System
แล้ว Advance system setting
แล้ว Environment Variables ใต้ Advanced Tab
9.3 ในหัวข้อ System variables มองหา Path แล้ว Edit
แล้ว New
แล้วกรอกไปว่า C:\Users\[ตามที่พบข้างบนยาว ๆ]\git\cmd\
9.4 ทดสอบด้วยการเข้า DOS แล้วพิมพ์ git
แล้วสั่งอะไรไม่ค่อยจะได้นะครับ ต้องไปทำงานใน ATOM

10. พบปัญหา หลังกด push รอบแรก จาก task bar
เพราะ push คือ การ upload project ส่วน pull คือ download project
ส่วน commit คือ การให้รายละเอียดก่อน push
พบ
Note: No remote detected for branch master.
Cannot push because there is no remote named "origin"
for which to create a remote tracking branch
หรือ
fatal: Invalid refspec '+refs/heads/:refs/remotes/origin/'
พอเปลี่ยนใน config ของ git เป็น
[remote "origin"]
	url = https://github.com/thaiall/programming-page.git
	fetch = +refs/heads/*:refs/remotes/origin/*
ปัญหาก็หายไป

11. พบปัญหา หลังกด push รอบ 2
พบ
error: src refspec master does not match any.
error: failed to push some refs to 'https://github.com/thaiall/programming-page.git'
วิธีแก้ไข
กดปุ่ม commit ก่อนกดปุ่ม push 

12. กดปุ่ม commit พบปัญหาอีกแล้ว
พบ
Run
  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"
to set your account's default identity.
Omit --global to set the identity only in this repository.
fatal: unable to auto-detect email address (got 'ACER@LAPTOP-xxxxx.(none)')
วิธีแก้ไข
ต้องเข้าไปเพิ่มใน config ของ git
[user]
	name = [youremail@example.com]
	email = [Your Name]

13. ไม่มีอะไรใน Staged Changes แต่น่าจะเคย add เข้าไปแล้ว
กด Push 2 รอบ
พบ Please enter your credentials for https://github.com
พบ
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/thaiall/programming-page.git/'
สงสัยจะใช่ username กับ password ผิดจริง ๆ ไม่มีอะไรมากครับ 
ตกใจไว้ก่อน

14. ใส่รหัสถูกต้อง พบปัญหาอีกแล้ว
พบ
The tip of your current branch is behind its remote counterpart. 
Try pulling before pushing again. Or, to force push, hold cmd or ctrl while clicking.
วิธีแก้ไข
เค้าว่า ถ้าผมไม่มีแฟ้มที่ github.com ให้กดปุ่ม ctrl ค้างไว้ขณะคลิ๊ปปุ่ม push
มีหน้าต่างถาม Force Push ขึ้นมาครับ กดเลย
แล้วก็ถาม signin อีกครั้ง ดีครับ ไม่ต้องจำรหัสค้างไว้
เค้าก็เตือนให้ pull ก่อนแล้วนะ แต่ผมไม่ได้ทำ

15. หลัง push สำเร็จ พบว่าใน repository บน github.com หายเกลี้ยง
เหลือแต่ s6update.php แฟ้มเดียว
นึกขึ้นได้ว่า Download repository เป็น .zip ออกมาก่อนหน้านี้ 
unzip แล้วส่งกลับเข้าไปก็พบว่าทุกอย่างอยู่ครบ
รวมทั้ง https://thaiall.github.io/programming-page/
ทุกอย่างกลับมาเหมือนเดิม 

16. การ push มีขั้นตอน ดังนี้
1. ตรวจสอบใน Staged changes ว่ามีอะไรเปลี่ยนแปลงไหม ค่อย Push
2. กรอกข้อมูลใน Commit แล้วกดปุ่ม Commit
3. กด Push 2 ครั้ง เค้าถามมาทีละครั้ง
4. ใส่ user and password แล้ว signin
5. ไปดูผลการ push ที่ repository ใน github.com

แนะนำเว็บไซต์
+ https://technologyand.me/2016/08/29/git-with-atom/
+ https://vwannabe.com/2016/05/26/how-to-use-github-and-atom/
Data cleansing : Text Editor กับ Regular Expression
Editor ดี ๆ เช่น Notepad++ หรือ Editplus หรือ Atom หรือ Sublime
จะใช้งาน Regular Expression ได้ เพื่อทำ Data cleansing สำหรับ Text file ที่ไม่ซับซ้อน มีโอกาสจัดการแฟ้ม html ที่ได้มาจาก THE World University Ranking แล้วนำมาปรับให้สั้นลงสำหรับเผยแพร่เพื่อการศึกษา
เช่น ค้นคำว่า >(.*)>(.*)>t แล้วแทนที่ด้วย >\2>t เป็นต้น
มีตัวอย่างผลการใช้ที่ http://www.thaiall.com/topstory/
Data cleansing : Regular Expression Regular expression คือ แพรทเทิร์นสำหรับค้นหา ส่วน Wildcards คือ สัญลักษณ์ตัวแทน ใน DOS เช่น * หรือ ? ซึ่งการใช้ทำ Data Cleansing เพื่อเตรียมข้อมูลในรูปแบบที่ต้องการ ก็ทำได้ง่ายเมื่อใช้การค้นหาและแทนที่ด้วย Regular Expression เพื่อเปลี่ยนรูปแบบข้อมูลในเบื้องต้น
https://devahoy.com/posts/regular-expressions-101/
ตัวอย่าง ข้อมูล 
abc123 toe tie top
#def:567#
<a href="hello.htm">hello</a>
one>two>three>four
five>six
ตัวอย่าง pattern สำหรับ replace
1.  ทุกตัวอักษร เป็น a : . เป็น a
2. คำที่ขึ้นต้นด้วย t ลงท้ายด้วย e : t.e เป็น ค่าว่าง
3. ที่ไม่ใช่ตัวอักษร เป็น a : \W เป็น a
4.  ทุกตัวเลข เป็น a : \d เป็น a
5.  ไม่ใช่ตัวเลข เป็น a : \D เป็น a
6. whitespace(tab, space, line break) เป็น a : \s เป็น a
7. ที่ไม่ใช่ whitespace เป็น a : \S เป็น a
8. x, y หรือ z เป็น a : [xyz] เป็น a
9. ไม่ใช่ x, y หรือ z เป็น a : [^xyz] เป็น a
10. เลข 0 ถึง 9 เป็น a : [0-9] เป็น a
11. ตัวอักษร x ถึง z เป็น a : [x-z] เป็น a
12. แทรกข้อความต้นบรรทัดด้วย a : ^ เป็น a
13. แทรกข้อความสิ้นบรรทัดด้วย a : $ เป็น a
14. กลุ่มคำ abc หรือ def เป็น a : (abc|def) เป็น a
15. เปลี่ยนทุกบรรทัด เป็น a ทุกบรรทัด :  .* เป็น a 
16. หาข้อความที่มี A ต่อท้าย ก็เปลี่ยน เป็น a : .*A เป็น a
17. ขึ้นต้น ab ลงท้ายด้วย df เป็น a : ab(.*)df เป็น a
18. หา x ที่ซ้ำกัน 2 ตัว เป็น a : x{2} เป็น a
19. ลบ link ให้เลือกแต่ ข้อความ : <a href=(.*)>(.*)</a> เป็น \2
20. ลบวันที่ : \d{4}-\d{2}-\d{2} เป็น ช่องว่าง
21. ปัดบรรทัด หลังเครื่องหมาย > : > เป็น >\n