บทความ IT เจ๋งๆ

5 Projects สนุก ๆ ที่แนะนำให้คุณลองสร้าง

22-พ.ค.-20

คัมภีร์เทพ IT

ความลับของการเป็นสุดยอด Developer ก็คือ การทุ่มเทและทำอย่างจริงจัง หากคุณต้องการเป็น Web Developer อย่างน้อยคุณควรเรียนรู้ JavaScript เอาไว้ แต่การที่คุณจะคุ้นเคยกับพื้นฐานของ JavaScript หมายถึง การใช้ทักษะเหล่านั้นเพื่อสร้าง JavaScript Projects ซึ่งบทความนี้จะมาแนะนำ 5 Projects สนุก ๆ ที่แนะนำให้คุณลองสร้างดู

1. Project: Portfolio Website

Portfolio Website เป็นหนึ่งใน Project ที่ง่ายที่สุดที่คุณสามารถเริ่มต้นทำได้ ซึ่งไม่เพียงจะมีประโยชน์ แต่ยังทำให้คุณรู้สึกสนุกในการทำอีกด้วย

มันเป็นวิธีที่ยอดเยี่ยม (แม้แต่ Programmer ที่มีประสบการณ์) ที่จะได้ทดลองใช้ Frameworks และ Libraries ใหม่ ๆ และนี่ก็คือ Portfolio Website ของคุณ Mahdhi Rezvi (ผู้เขียนบทความนี้) ซึ่งถูกสร้างขึ้นด้วย Angular และ Firebase เชื่อเถอะว่า ในท้ายที่สุดแล้ว สิ่งที่ได้จากการทำ Project นี้จะเป็นประโยชน์อย่างแน่นอน

เมื่อทำงานร่วมกับ JS Ecosystem คุณจะได้เรียนรู้ทั้งคำศัพท์และ Concepts อื่น ๆ ที่เกี่ยวข้องกับการพัฒนา Web ไปด้วย คุณสามารถศึกษาเพิ่มได้จากทั้ง Static websites (generator), (headless) CMS และ Jamstack เป็นต้น นอกจากนี้ คุณจะได้พัฒนาทักษะทั้ง HTML และ CSS เพิ่มเติมไปด้วย หากคุณต้องการจะทำ Project นี้ สามารถเริ่มต้นได้จากที่นี่

สิ่งที่คุณจะได้เรียนรู้:

  • พื้นฐานของ HTML, CSS และ JS
  • Theming
  • Dynamic/Static Websites

2. Project: Website Change Detector (ด้วย Node JS และ Visualping)

แม้ว่าการตรวจสอบการเปลี่ยนแปลงของ Website (Website Change Detection) จะฟังดูยาก แต่ก็ไม่ยากเกินไปที่คุณจะลองทำ ด้วยความช่วยเหลือของ Visualping และ Webhooks คุณจะสามารถสร้าง Project เจ๋ง ๆ ได้

คุณสามารถสร้าง Node.js Back End และรับ Webhook จาก Visualping แล้วส่ง Message ไปยัง Telegram Chatbot ของคุณ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ Movie-Website Change Detector ที่คุณ Mahdhi สร้างได้ที่นี่

สิ่งที่คุณจะได้เรียนรู้:

  • Webhooks
  • Telegram chatbots
  • Platforms เช่น Heroku (กรณีที่ต้องการให้เป็น Host ของ Node Server)

3. Project: News Aggregator

ตัวอย่างที่ดีของ Website รวบรวมบทความ/ข่าวสาร ดังกล่าวก็คือ Echo JS และ Hacker News (HN) ซึ่ง Website ตัวหลังนี้ มาพร้อมกับ Public API ซึ่งคุณสามารถใช้ในการ Implement Version ของ HN Reader ของคุณ มันเป็นเรื่องง่ายกว่าที่จะสร้าง News Aggregator ตั้งแต่ต้นจนจบ อีกทั้งยังได้รับความนิยมอย่างมาก แทบจะเรียกได้ว่า มันเป็นตัวทดแทนของ To-do App เลยทีเดียว

คุณสามารถเริ่มต้นด้วย React และ Pusher ใน Tutorial นี้

สิ่งที่คุณจะได้เรียนรู้:

  • Data Fetching
  • List Handling
  • Array และ Object Manipulation
  • React และ Pusher (หากคุณเลือกที่จะเรียนรู้จาก Tutorial ด้านบน)

4. Project: Web Scraping/Automation ด้วย Puppeteer

แม้ว่าจะฟังดูซับซ้อน แต่มันก็สนุกและไม่ยากเกินไปที่คุณจะทำ เมื่อคุณรู้วิธีการว่าจะทำอย่างไรแล้ว คุณก็จะได้พบกับApplication ที่ทั้งสนุกและมีประโยชน์อย่างมาก

หนึ่งใน Application ที่คุณ Mahdhi สร้างขึ้น ก็คือ Automated Bot เพื่อ Post Stories ใน Newsfeed บน Facebook ของเขา ซึ่งตั้งแต่แรกเขาไม่คิดจะเสียเงินกับพวกเครื่องมือที่ตั้ง Schedule สำหรับการโพสต์เลย ดังนั้นเขาจึงตัดสินใจลองสร้างพวกมันใน Version ของเขาเองและมันก็ใช้งานได้เป็นอย่างดี คุณสามารถเริ่มต้นเรียนรู้ Puppeteer โดยทำตาม Tutorial นี้ดู

สิ่งที่คุณจะได้เรียนรู้:

  • Web automation
  • Web scraping
  • วิธีการที่ Browsers ทำงานและจัดเก็บ Cookies

5. Project: Chat App

การสร้าง Chat App นั้นต้องใช้ทั้งประสบการณ์ Front-end และ Back-end หากคุณไม่ต้องการควบคุมการเชื่อมต่อแบบ peer-to-peer (P2P) ซึ่งต้องใช้ความรู้ (อย่าง WebRTC) เป็นอย่างมาก คุณอาจจำเป็นต้องใช้ Node.js ซึ่งมันจะช่วยให้คุณได้พบกับโลกใบใหม่

โดยปกติแล้ว Node.js จะมาพร้อมกับ Ecosystem, Libraries และ Frameworks ของมันเอง ซึ่ง Frameworks ที่ได้รับความนิยมมากที่สุดที่เรียกว่า Express ทำหน้าที่เป็นตัวห่อหุ้ม (Wrapper) Node.js APIs ที่ดูไม่ค่อยจะเป็นมิตรสักเท่าไหร่ ขณะเดียวกันมันก็เป็นเรื่องยากที่คุณจะทำงานกับ Node.js โดยที่ไม่มีประสบการณ์ใน NPM (Node Package Manager) ซึ่งเป็น Package Repository ที่ใหญ่ที่สุดที่ประกอบไปด้วย Open-Source JS Libraries และ Tools ต่าง ๆ มากมายหลายล้านรายการ

ดังนั้นโดยรวมแล้ว คุณไม่เพียงจะได้พัฒนาทักษะของ Front-end และ Node.js เท่านั้น แต่ยังได้รู้จักกับ WebSockets ซึ่งเป็น Protocol ที่ใช้สำหรับการสื่อสารแบบ Real-Time ซึ่งเป็นสิ่งที่จำเป็นอย่างยิ่งสำหรับหลาย ๆ Applications นอกจากนี้คุณยังจะได้รู้จัก Socket.IO ซึ่งเป็น Library ที่โดดเด่นมากสำหรับใช้ในการ Connect แบบ Real-Time

สิ่งที่คุณจะได้เรียนรู้:

  • WebSockets
  • Node.js
  • Subscriptions และ Observables

ที่มา:  https://medium.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

ประเภทบทความ