ขั้นตอนเบื้องต้นในการใช้งาน Git/Bitbucket จัดการโปรเจ็ค

ปกติแล้วการใช้งาน git ของผมจะใช้ในการเก็บโค้ดโปรเจ็คทั่วๆไป วิธีที่ผมใช้สร้าง git ก็ไม่ได้สร้างบนเครื่องด้วย ผมสร้างจากเว็บ bitbucket.org แล้วก็เอา url ของ git มาใช้คำสั่ง git clone ตามด้วย url ของ git เช่น https://finsch@bitbucket.org/finsch/gitname.git

ขั้นตอนการใช้งาน Git/Bitbucket

คัดลอกโค้ดบนเว็บลงมาที่เครื่องเรา

 

เพิ่มไฟล์เข้าไปใน git

 

เตรียมไฟล์เพื่อส่งขึ้นไปเก็บบนเว็บ

 

อัพเดตไฟล์ในเครื่องให้เท่ากับไฟล์บนเว็บ

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

ส่งไฟล์ในเครื่องเราขึ้นไปเก็บบนเว็บ

คำสั่งนี้ผมใช้อัพโหลดโค้ดขึ้นเว็บที่ใช้เป็น git server ครับ ซึ่งก็คือ bitbucket.org นั่นเอง

 

เบื้องต้นก็มีเท่านี้แหละครับ การจัดการโค้ดด้วย git ของผม ไม่ได้มีอะไรมากมาย

Angular 5 กับการจัดการ Checkbox

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

ตัวอย่างโค้ดในเทมเพลต

วิธีที่ผมแก้ปัญหาจริงๆคือ [checked]=”optionAttrArray[i].set_default == 1″ ที่อยู่ในเทมเพลต แค่เช็คค่าตามตัวแปร set_default ใน JSON ว่าถ้าข้อมูลเป็น 1 ก็ให้ติ๊กเลือกไว้เลย ถ้าเป็น 0 ก็ไม่ต้องติ๊ก แค่นั้นเอง

ตัวอย่างโค้ดในไฟล์ ts

ค่าที่ใช้งานจริงคือ set_default ใน JSON ที่ประกาศไว้นะครับ ผมใช้สำหรับตรวจสอบค่า ถ้าเป็น 1 คือ option นี้ถูกเซ็ตให้เป็น default option ถ้าเป็น 0 คือไม่ได้ถูกเลือก

หมายเหตุ ผลลัพธ์ที่ได้จาก [(ngModel)] กับ [value] มันก็ได้ผลเหมือนกันนะ เอาไว้ผมเจอความแตกต่างแล้วผมจะมาอัพเดตอีกทีละกัน

Note for CodeIgniter – จดโน้ตสำหรับการพัฒนาเว็บแอ็พด้วย CodeIgniter

ปัญหา แสดง base_url ใน sub-domain ผิด

เจอตอนรันใน sub-domain แก้ง่ายใน config ด้วยการเซ็ตค่าให้มัน

$config[‘base_url’] = “http://sub-domain.mywebsite.com/”;

 

 

หมายเหตุ

บทความนี้เป็นโน้ตที่ผมจดไปเรื่อยๆระหว่างทำโปรเจ็คนะครับ มันจะอัพเดตไปเรื่อยๆจนกว่าผมจะจบโปรเจ็ค Codeigniter โดยตัวโปรเจ็คจริงจะออนไลน์อยู่ที่ City Trek ของ Journey of the finch ซึ่งเป็นเว็บไซต์ท่องเที่ยวของผมเอง ตัวโปรเจ็คเป็น Codeigniter ที่ใช้ AngularJS ทำงานในส่วนของ view และดึงข้อมูลผ่านเว็บแม่ที่เป็น WordPress ผ่าน REST Api

ส่วนโน้ตเกี่ยวกับ AngularJS ผมจดแยกกันไว้อีกบทความนึง บทความชื่อ NOTE FOR ANGULAR – จดโน้ตสำหรับการพัฒนาเว็บแอ็พด้วย ANGULAR

Note for Angular – จดโน้ตสำหรับการพัฒนาเว็บแอ็พด้วย Angular

คำสังรัน ng serve –app appname –port portnumber

สำคัญมาก อย่าลืมอ่าน Cheat Sheet ช่วยได้เยอะมากจริงๆ

เริ่มต้นติดตั้ง Angular-cli สำหรับพัฒนาโปรเจ็ค

คู่มืออย่างละเอียดสามารถอ่านได้จากที่นี่ มีตั้งแต่การติดตั้ง Angular Cli ไปจนถึงการสร้าง App สร้าง Component และอธิบายโครงสร้างต่างๆของโปรเจ็คไว้อย่างละเอียด

// create component
https://coursetro.com/posts/code/61/Angular-4-Services-Tutorial

// use jquery with angular 4
https://stackoverflow.com/questions/43934727/how-to-use-jquery-plugin-with-angular-4
https://stackoverflow.com/questions/43557321/angular-4-how-to-include-bootstrap

// icon svg
https://icons8.com/preloaders/en/people_and_animals

// anular input bind
https://lishman.io/angular-2-input-binding

 

คำสั่งเบื้องต้นที่ควรรู้

สร้างโปรเจ็คด้วย Angular และกำหนด style เป็น Sass

คำสั่งนี้มันสร้างโปรเจ็คใหม่แล้วก็กำหนด style เป็น Sass แล้วก็แยก routing ออกมาต่างหาก ซึ่งถ้าเราไม่แยก เราก็สามารถเขียน route ที่ไฟล์ module.ts ของแต่ละ app ได้เลย

คำสั่งอัพเดต Angular Cli เพื่อให้เป็นเวอร์ชันล่าสุด

ตัวอย่าง Error ที่พบบ่อย

Node sass does not yet support your current environment

Error นี้เกิดจากเวอร์ชันของ sass ไม่รองรับตัว Node js เวอร์ชันที่เราติดตั้ง

แก้ได้ด้วยการถอนการติดตั้ง node-sass ด้วยคำสั่ง npm uninstall node-sass –save แล้วติดตั้ง node-sass ใหม่ด้วยคำสั่ง npm install node-sass

Error undefined  ‘$’

แก้ด้วยการเปลี่ยน port ตอนรัน ng serve

จดโน้ตเกี่ยวกับ Bootstrap 4 จากการลงมือทำเว็บไซต์จริง

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

  • ตัดธีม WordPress นั่งจัดเมนูแล้วมันไม่ยอมชิดขวาซักที เพราะผมใส่ mr-auto ไปกับคลาสเมนูของ WordPress แล้วมันก็ยังไม่ได้ ทั้งที่เอามาจากตัวอย่างของหน้าเว็บหลักเลย โอเค ลองเปลี่ยนเป็น ml-auto ดูละกัน ผลปรากฏว่าเวิร์ค ผมเลยสรุปว่ามันคือ margin left auto
  • Grid layout เปลี่ยนด้วยแฮะ เวลาใช้ offset ปกติมันจะใช้ col-sm-offset-number แต่เปลี่ยนเป็น offset-sm-number
  • อย่าลืมคลาส row ก่อนจะแบ่ง grid แต่ก่อนมันใส่ได้ แต่ตอนนี้พัง เหลือคอลัมเดียวซะงั้น

 

แนะนำที่นั่งทำงานชิลๆสำหรับคนไอทีในพัทยา “Anchor” Coworking Space

หลังจากย้ายมาอยู่พัทยาได้ราว 2 เดือนกว่า ชีวิตเริ่มเข้าที่เข้าทางแล้วครับ มีที่อยู่เป็นหลักแหล่งเรียบร้อย ที่ทำงานเริ่มลงตัวแล้วก็เริ่มสำรวจเมืองกันหน่อยดีกว่า เนื่องจากช่วงที่ทำงานฟรีแล้นซ์ในกรุงเทพผมจะชินกับการไปนั่งทำงานใน Co-Working space แนวๆ Ma:D Club หรือไม่ก็ Hubba ซะเป็นส่วนใหญ่ พอย้ายมาอยู่พัทยาแล้วผมก็เลยมีที่นั่งทำงานสำหรับคนไอทีมาแนะนำ ซึ่งออฟฟีสผมก็อยู่ที่นี่เหมือนกันครับ Anchor Coworking space นั่นเอง

ตำแหน่งที่ตั้งอยู่ที่ไหน?

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

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

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

ที่นี่มีบริการอะไรบ้าง?

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

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

สรุปโดยรวมสำหรับออฟฟีสกึ่งร้านกาแฟแห่งนี้

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

ทำความรู้จักกันหน่อย ในฐานะนักออกแบบและพัฒนาเว็บไซต์

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

เรียนอะไรมาถึงได้มาเป็นนักพัฒนาเว็บไซต์?

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

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

เริ่มหางานทำและเริ่มทำงานได้ยังไง?

ทำงานที่ไหนมาบ้าง?

เล่าถึงประสบการณ์การทำงานที่ผ่านมา

ปัจจุบันนี้ทำอะไรอยู่บ้าง?