เรียนไปจดไป: MongoDB

บทความนี้เป็นการจดโน้ตในการเรียนคอร์ส MongoDB ส่วนตัวจาก LinkedIn Learning ชื่อ Learning MongoDB ผมจดไว้เตือนความจำเฉยๆ กันลืม มาเริ่มจดกันเลยดีกว่า อันแรกก็สะดุดเลย หาตัว mongoimport.exe ไม่เจอ อยู่ไหนเนี่ย ลง MongoDB ไม่ได้ให้ Tools มาด้วย ต้องดาวน์โหลดแยกจากลิงค์ MongoDB Database Tools แล้วเอามาวางในโฟลเดอร์ bin ของ MongoDB อีกที หลังจากได้ Tools มาแล้วลอง import ดูตามตัวอย่างก็ติดปั๊บ import ไม่ได้เฉย ซึ่งวิธีแก้ก็หาเอาจาก Stack Overflow ซึ่งได้ความตามนี้ ใส่ –jsonArray ต่อท้ายเข้าไปนั่นเอง

การ deploy React Project ขึ้น Github Pages

Github Pages คืออะไร? ในมุมมองของผมมันก็คือโฮสต์ฟรีที่เอาไว้เก็บเว็บที่ build จาก React ผมนั่นแหละ(สำหรับบทความนี้น่ะนะ) ซึ่งมันสะดวกมากๆ เพราะเราแค่ตั้งค่านิดหน่อยแล้ว push code ขึ้น Github ปกติ แค่นี้เราก็ได้เว็บไซต์ที่ออนไลน์พร้อมใช้งานแล้ว โดยเฉพาะเว็บไซต์ทั่วๆไปที่ไม่ได้ใช้ฟังก์ชันอะไรมากมาย บอกเลยว่า Github Pages ก็เหลือเฟือแล้ว ตั้งค่าไฟล์ package.json สำหรับการ deploy ก่อนอื่นเลยก็เปิดไฟล์ package.json ในโปรเจ็คของเราขึ้นมา แล้วก็ใส่ homepage เข้าไปแบบนี้สำหรับแต่ละโปรเจ็ค หรือแบบนี้สำหรับหน้าหลักของ Github Pages ของเรา หรือหากจะตั้งค่าเว็บไซต์ส่วนตัวให้ชี้มาที่ Github Pages ก็ใส่ไปแบบด้านล่างนี้ ติดตั้ง gh-pages สำหรับ deploy script ส่วนตัวผมใช้ npm มากกว่า yarn ผมก็เลยเพิ่มเข้าไปแบบด้านล่างนี้ หลังจากนั้นก็เป็นการตั้งค่าสคริปต์สำหรับ build และ deploy ใน file… Continue reading การ deploy React Project ขึ้น Github Pages

เริ่มต้นพัฒนาเว็บแอ็พด้วย React ต้องทำยังไงบ้าง

บทความนี้ไม่มีอะไรมากครับ ผมแค่อยากมาเขียนไว้กันลืมเฉยๆ เป็นขั้นตอนการเริ่มโปรเจ็คจากการสร้างแอ็พเริ่มต้นจาก create-react-app แล้ว deploy ขึ้นไปบนโฮสฟรีอย่าง Heroku เพื่อทดสอบว่ามันเวิร์ครึเปล่าเท่านั้นเองจริงๆ ก่อนอื่นที่เราต้องมีในเครื่องเลยก็คือ Node js ครับ โหลดจากหน้าเว็บหลักแล้วติดตั้งให้เรียบร้อย ที่เราใช้บ่อยก็คือคำสั่ง npm โน่นนี่นั่นนั่นแหละ ลงเสร็จแล้วก็ลองเช็คดูครับว่ามันเวิร์คมั้ยด้วยคำสั่งด้านล่างนี้ด้วย Command Prompt หรือ Terminal ใน VS Code ที่ผมชอบใช้ประจำก็ได้ ก็ถ้าได้ตัวเลขเวอร์ชั่นมาก็คือใช้ได้นั่นแหละ จากนั้นเราก็ต้องมีตัวที่ใช้สร้าง React Project ที่ชื่อว่า create-react-app ซึ่งเราติดตั้งด้วยการรันคำสั่ง เราก็จะได้ตัวที่ใช้สร้างโปรเจ็คสำหรับ React มาใช้งานแล้ว ซึ่งการสร้างโปรเจ็คก็คือการรันคำสั่งง่ายๆด้วยเจ้า create-react-app นี่แล้วตามด้วยชื่อโปรเจ็คของเราแบบด้านล่างนี้ แล้วก็ cd เข้าไปใน folder ที่มันสร้างโปรเจ็คมาให้เราแล้วลองรันดูด้วยคำสั่ง ซึ่งมันก็จะได้หน้าแอ็พเริ่มต้นของ React นั่นแหละ ไม่มีอะไรพิเศษ ใน Vue Js ก็เช่นกัน ในส่วนของการตั้งค่า Server เบื้องต้น… Continue reading เริ่มต้นพัฒนาเว็บแอ็พด้วย React ต้องทำยังไงบ้าง

การเช็คขนาดหน้าจอสำหรับทำ Responsive Website (หรือการใช้งาน Css Media Query ในภาษาที่นักพัฒนาเว็บไซต์เรียกกัน)

อันนี้ผมอิงจากของ Bootstrap ตัวล่าสุดนะครับ เลือกเอาแล้วแต่ถนัดว่าจะเอาจากเล็กไปใหญ่ หรือใหญ่ลงมาเล็กตามความถนัดได้เลย ความต่างของการเขียนจากเล็กไปใหญ่คือ mobile first กับ large screen size first ครับ อันแรกคือจอเล็กมาก่อน อย่างหลังคือจอใหญ่มาก่อน ก็คือแบบแรกเช็คจาก Min-width แบบหลังเช็คจาก Max-width หรือจะเช็คเป็นช่วงๆก็ได้ เช็คจาก min-with นี้ ถึง max-width นี้ อะไรประมาณนี้ Mobile First(จอเล็กก่อน หรือมือถือนั่นเอง) แบบแรกสำหรับเขียนใน Sass css ส่วนอันนี้สำหรับเขียนด้วย Css ธรรมดา ต่อไปเป็นการเอาจอใหญ่ก่อน แล้วตามด้วยจอเล็ก(Large screen first) แบบแรกสำหรับเขียนใน Sass css ส่วนอันนี้สำหรับเขียนด้วย Css ธรรมดา โน้ตนิดนึง ก่อนจะเขียนด้วย Sass css เราต้องประกาศตัวแปรสำหรับแต่ละขนาดหน้าจอก่อนนะครับ ด้านล่างนี้เลย อีกแบบนึงก็คือเป็นช่วงสำหรับแต่ละขนาดหน้าจอ ตัวอย่างเช่นเริ่มจากเล็กสุด… Continue reading การเช็คขนาดหน้าจอสำหรับทำ Responsive Website (หรือการใช้งาน Css Media Query ในภาษาที่นักพัฒนาเว็บไซต์เรียกกัน)