PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


แนะนำ Git CMD และการใช้งาน mobile browser emulator ใน chrome

14 July 2017 By
git cmd mobile emulator git


เนื้อหานี้จะมาแนะนำเครื่องมือที่น่าสนใจ ในการใช้งานกับการสร้าง app ด้วย html และ javascript
ไม่ว่าจะใช้งานผ่านคำสั่ง phonegap ,ionic หรือ cordova ที่มีการรันคำสั่งผ่าน command line
หรือที่เรียกว่า CLI (command line interface) 
 

การติดตั้งและใช้งาน Git CMD 

ตัวนี้จะแนะนำให้ใช้แทน command prompt ของ windows เนื่องจากสังเกตเห็นว่าหลายๆ ครั้งการทำงาน
ของ command prompt มีอาการค้างหรือหยุดไปในบางคำสั่ง หรือบางทีไม่มีการส่งค่าหรืออัพเดทค่า ที่พบ
บ่อยคือ กรณีใช้งานกับ phonegap เช่น การใช้คำสั่ง phonegap serve ที่จะเป็นการรัน server จำลองของ app
โดยเมื่อมีการแก้ไขไฟล์ ปรากฎว่ามีการ cache หรือจำค่าเก่า ไม่อัพเดทตามที่เราต้องการ และปัญหาอื่นๆ
อย่างไรก็ตาม หากใครไม่มีปัญหาในส่วนนี้ ก็ยังสามารถใช้งาน command prompt ต่อไปได้
 
สำหรับ Git CMD นี้หน้าตา ก็แทบจะเหมือน command prompt ของ windows เลย การใช้งานไม่ต่างกัน
วิธีการติดตั้ง ให้ติดตั้ง git client ตามบทความนี้ ในขั้นตอนการติดตั้ง ใช้ค่า default ได้เลยไม่ต้องปรับอะไร
 
ติดตั้ง git client บน windows สำหรับใช้งานกับ phonegap ตอนที่ 8 
http://www.ninenik.com/content.php?arti_id=584 via @ninenik
 
สำหรับการติดตั้งใน windows 10 จะไม่ค่อยยุ่งยากในการตั้งค่าการใช้งาน มีเพิ่มเติมในตอนท้ายของบนความ
อัพเดทจากหัวข้อด้านบน
 

การเรียกใช้งาน Git CMD

 
ค้นหาโปรแกรม โดยพิมพ์ git cmd  ดังรูป
 
 

 
 
คลิกขวา เลือก run as administrator
 
 

 
 
หลังจากเปิดโปรแกรมมาแล้ว จะได้ดังรูป หน้าตาก็จะเหมือนกับ command prompt บน windows
แตกต่างในส่วนของไอค่อน และชื่อของตัวโปรแกรม จะเป็น Git CMD

 

 
 
ปรับแต่งขนาดฟอนท์ตามต้องการ โดยคลิกที่ไอค่อนมุมบนซ้าย แล้วเลือก property

 

 
 
เช็คเวอร์ชั่น ด้วยคำสั่ง git --version
 
 

 
 
เท่านี้เราก็สามารถใช้คำสั่ง cli หรือที่เรียกว่า command line interface ผ่าน Git CMD แทนการใช้งาน
command prompt ของ windows ได้แล้ว
 

 

การใช้งาน mobile browser emulator ใน chrome

หลายๆ คนคงรู้จักความสามารถของ chrome ในการจำลองหน้าจอของมือถือ เพื่อให้เราสะดวกในการออกแบบ
หรือปรับแต่งหน้าเพจสำหรับมือถือของเรากันมาบ้างแล้ว สำหรับใครที่ไม่เคยใช้ ลองดูตามเนื้อหาบทความ
ส่วนนี้ดู สมมติเราต้องการปรับแต่งหน้า html app ของเราที่ใช้ในโปรเจ็ค phonegap 
 
ตอนนี้เรายังอยู่ในโปรแกรม Git CMD และเราจะเรียกใช้งานคำสั่ง phonegap serve ในโปรเจ็ค phonegap
ในการสร้าง app ด้วย html ดังรูป

 

 
 
หลังจากเรารันคำสั่ง phonegap serve ตัว phonegap จะจำลอง server สำหรับ
รัน app โปรเจ็คของเรา โดยแสดง ip address และ port ให้เราเลือกใช้งาน ดังรูปด้านบน
สมมติเราต้องการใช้งานที่ 10.0.0.2:3000 
ในโปรแกรม Git CMD ให้เรากดแป้น Ctrl+m แล้วลากเพื่อ hilight เลือกข้อมูลที่
ต้องการ copy จากนั้นกดปุ่ม Ctrl+Enter เพื่อ copy  (หรือเราจะใช้วิธีพิมพ์ตามแทนก็ได้)
 
 

 
 
จากนั้นให้เราเปิด chrome ขั้นมา แล้วนำ ค่า ip และ port ที่ต้องการวาง ดังรูป
 
 

 
 
และเนื่องจากโปรเจ็ค app ของเรามีการกำหนด path หรือ state ของ app ไว้อยู่แล้ว
ตัว app ของเราจึงแสดงหน้าดังรูป พร้อมกับเปลี่ยน path ในส่วนของ url ด้านบนตาม
โครงสร้างหรือรูปแบบของ app 
 
 

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


 
 

 
 
ให้เราคลิกที่ปุ่ม toggle device toolbar ในส่วนหน้าเพจ ก็จะปรับไปเป็นขนาดหน้าจองของ mobile
เราสามารถเลือกได้ว่าจะใช้เป็นแบบไหน ในตัวอย่าง เราสมมติเป็น Galaxy S5
 
 

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

 
 
เราก็จะได้รูปแบบ mobile browser emulator พร้อมสำหรับจัดการหรือปรับแต่งหน้าตาของโปรเจ็ค app 
ของเราเรียบร้อยแล้ว
 
 


 
 
 
 
หวังว่าเนื้อหานี้จะเป็นประโยชน์ในการพัฒนา app ให้เป็นไปอย่างสะดวกเพื่มขึ้นไม่มากก็น้อย
 








เนื้อหาที่เกี่ยวข้อง



Tags:: git git cmd mobile emulator






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง