COOL IT IDEAS AND STUFF

บทความนี้คุณ Carlos Caballero จะมาแนะนำคุณเกี่ยวกับ 7 Projects ที่ควรฝึกทำ เพื่อให้เป็น Developer ที่เก่งขึ้น โดยจะไม่ระบุถึงเทคโนโลยีที่ใช้ นั่นคือคุณสามารถเลือกมันได้เอง และหลังจากที่คุณพัฒนา Project เหล่านี้ในเทคโนโลยีที่คุณต้องการแล้ว คุณยังสามารถสร้าง Project เหล่านี้ได้อีกในเทคโนโลยีอื่น ๆ ที่คุณต้องการ

1. Project: To-do App

คุณมักจะได้เห็นวิธีในการพัฒนา To-do App มากมายจากใน Tutorials ต่าง ๆ ไม่ว่าจะใช้เทคโนโลยีใดก็ตาม ที่เป็นเช่นนั้นก็เพราะ มันเป็นโจทย์แก้ปัญหาที่เหมาะสำหรับผู้เริ่มต้น หรือผู้ที่ต้องการพัฒนาทักษะตัวเอง อันที่จริงโจทย์นี้ควรได้รับการพิจารณาให้เป็นเหมือน “Hello World” ในเรื่องการพัฒนา Application คำแนะนำก็คือ ให้คุณพัฒนา To-do App นี้เป็น Program แรกทุกครั้งที่คุณต้องการเรียนรู้เทคโนโลยีใหม่ ๆ

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

- การสร้าง Tasks ใหม่ ๆ

- การ Validate Fields

- การ Filter Tasks (Completed, Active, All) และการใช้ประโยชน์จาก Filter และ Reduce Functions

1.1 To-do node + mongoDB + Angular

Node App ที่สร้างขึ้นด้วย MongoDB และ Angular

สำหรับ Node ได้จัดเตรียม RESTful API เอาไว้ให้ ส่วน Angular ได้จัดเตรียม Frontend และสามารถเข้าถึง API ได้ และ MongoDB ก็เป็นตัว Database นั่นเอง

1.2 To-do Android

นี่เป็นอีกหนึ่ง To-Do App ที่แนะนำ พร้อมด้วย Feature พื้นฐานที่จำเป็น

2. Project: Products Admin Dashboard

นี่คือ CRUD App (Create, Read, Update และ Deleting) ง่าย ๆ ซึ่งเหมาะสำหรับการเรียนรู้เพื่อปูพื้นฐานเป็นอย่างมาก

สิ่งที่คุณจะได้เรียนรู้:
- การสร้างและจัดการกับ Products

- การทำงานกับ Database ทั้ง Create, Read, Update และ Delete ข้อมูลของ Products

- การตรวจสอบ Input และวิธีการทำงานกับ Form

มันไม่เกี่ยวข้องว่า เราจะทำงานกับ Products, Users หรือ Tasks อะไร แต่สิ่งที่เราต้องพยายามทำให้สำเร็จ ก็คือ การนำ CRUD ไปใช้ในทางปฎิบัติจริง ๆ ให้ได้

2.1 Vuejs + Firestore

CRUD App ง่าย ๆ สำหรับ Product ที่สร้างขึ้นด้วย Vuejs และ Firestore

2.2 Laravel 5.6 + Vue.js — เป็นตัวอย่างของ CRUD

Project ง่าย ๆ ที่แสดงให้เห็นว่า Laravel ทำงานร่วมกับ Vue.js ได้อย่างไรบ้าง ซึ่งเป็นการทำงานของ CRUD เพื่อบริหารจัดการในบริษัท 

3. Project: Card Memory Game

Card Memory เป็นเกมที่คุณ Click ที่ Card เพื่อดูภาพที่อยู่ด้านล่าง จากนั้นก็ต้องค้นหาภาพใน Card ใบอื่นที่เหมือนกัน (หรือเรียกง่าย ๆ ว่าเป็น เกมจับคู่ภาพ)

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

- DOM manipulation (JavaScript)

- UI Events

- Animations

- Logic พื้นฐานในเรื่องของ Views

3.1 HTML, CSS และ JavaScript

Memory Game Project ถูกสร้างขึ้นเพื่อให้เป็นส่วนหนึ่งของการเขียน Web Programming ด้วย JavaScript ของ Udacity Front-End Web Developer Nanodegree Program โดยวัตถุประสงค์ของ Assignment นี้ ก็เพื่อแสดงให้เห็นถึงความเชี่ยวชาญของทักษะหลัก ๆ ในการพัฒนา Web ทั้ง HTML, CSS และ JavaScript

3.2 JavaScript Memory Game

เป็น Memory Game ที่ทั้งง่ายและสนุก เหมือนกับเกม Super Mario 3 ที่สร้างขึ้นด้วย JavaScript ธรรมดา ๆ

4. Project: Paint Software

เป็นการสร้าง Digital Artwork บน Canvas บน Web ที่สามารถ Share แบบ Online และสามารถ Expert ออกมาเป็นรูปภาพได้

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

- UI Events

- การจัดการกับ Low level Screen

- Design Pattern ที่หลากหลาย ทั้ง Command, Singleton หรือ Strategy เป็นต้น

- Library ต่าง ๆ ที่ใช้จัดการกับ Canvas

4.1 JS Paint

เป็น MS Paint ที่สร้างขึ้นบน Web นั่นเอง เป้าหมาย ก็คือ การสร้าง MS Paint ขึ้นมาใหม่ (รวมถึง Feature ที่ไม่ค่อยเป็นที่รู้จักมากนัก) ปรับปรุงและเพิ่มประเภทของรูปภาพที่สามารถ Edit ได้

4.2 Style2Paints (JavaScript + Python)

Style2paints V4 ถือเป็นเครื่องมือสำหรับการลงสีภาพตัดเส้นแบบอัตโนมัติโดยใช้ AI ที่ดีที่สุดในปัจจุบัน มันเป็นระบบแรกที่สามารถลงสีภาพซึ่งมี Process การทำเหมือนกับที่มนุษย์ทำจริง ๆ และผลลัพธ์ที่ออกมาก็จะถูกแบ่งออกเป็น Layer ต่าง ๆ ทั้งเส้น, สี, เงา

5. Project: Make a Bot

เรากำลังอยู่ในยุคของ Bot (Chatbots และ Voicebots) แล้วทำไมเราถึงไม่ทำ Bot ที่ทำงานบน Twitter, Telegram หรือ Slack ดูบ้างล่ะ? Social Networks ที่สำคัญ ๆ ส่วนใหญ่ ก็มักจัดเตรียม APIs ไว้ให้สำหรับภาษาต่าง ๆ อยู่แล้ว

หลายปีที่ผ่านมาคุณ Carlos เริ่มเสนอให้นักเรียนของเขาทำ Bot ของ Twitter หรือ Telegram ด้วย AI ซึ่งวิวัฒนาการของ "Bot Journey" น่าจะเป็นดังต่อไปนี้:

- Level 0: สร้าง Bot ของ Twitter / Slack / Telegram ที่กล่าวทักทายเมื่อมีสมาชิกเข้ามาในห้อง

- Level 1: สร้าง Bot ของ Twitter / Slack / Telegram ที่ Post คำพูดที่สร้างแรงบันดาลใจจาก Database

- Level 2: Post คำขอบคุณทุกครั้งที่มีคน Follow Account หรือฟัง Topic ต่าง ๆ

- Level 3: Bot ที่ตอบกลับ Comment และเรียนรู้เกี่ยวกับพฤติกรรมของ User รายอื่น

Twitter-Bot Tutorial

การสร้างข้อความต้อนรับ (Welcome Message) สำหรับ Follower ใหม่ของคุณใน Twitter ถือเป็นขั้นตอนแรกเพื่อให้ผู้คนมีส่วนร่วมกับ Tweet และ Link ของคุณมากขึ้น อย่างที่คุณอาจทราบอยู่แล้ว ว่ามี Online Service มากมายที่สามารถช่วยคุณส่งข้อความไปยัง Follower ใหม่ของคุณได้โดยอัตโนมัติ แต่อย่าลืมว่า Online Service เหล่านั้นคิดค่าบริการระหว่าง 5-15 เหรียญ สำหรับเครื่องมือง่าย ๆ ในการสร้าง Bot ในเมื่อคุณเองก็สามารถสร้าง Bot เป็นของตัวเองได้

ใน Repo นี้ คุณจะได้เรียนรู้วิธีการสร้าง Bot ของ Twitter ที่จะเป็นของคุณเองทีละขั้นตอน โดยในการพัฒนา Bot นี้เราต้องการ:

- NodeJS ที่ติดตั้งแล้ว

- Twit: Twitter API Client สำหรับ Node (REST & Streaming API)

- Github Account

- Twitter Account

- Heroku Account สำหรับการ Deploy Bot

6. Project: Messenger Clone

คุณจะได้ทำความเข้าใจเกี่ยวกับการทำงานของ Native App หรือ Hybrid App และ Web App

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

- Web Sockets (Instant Messaging)

- การทำงานของ Native App และ Hybrid App

- วิธีการทำงานของ Layouts ใน Native

- การ Routing สำหรับ Native App หรือการใช้ Framework อย่างเช่น Ionic, NativeScript, Angular หรือ React

6.1 WhatsApp Clone Tutorial

Whatsapp Clone ใน Version นี้ต้องการ:

- React (with Hooks and Suspense)

- Styled-Components

- Material-UI

- TypeScript

- Apollo GraphQL

- GraphQL Code Generator

- GraphQL Modules

- PostgreSQL

- GraphQL Inspector

6.2 Flutter Chat App

Flutter Chat App ถูกสร้างขึ้นด้วย Firestore และ Firebase Cloud มันเป็น Clone ของ Messenger โดย User สามารถ Create Stories, Chat และ Search ได้แบบ Real Time

7. Project: Chess Engine/Chess Game

ลองเขียน Engine ที่สามารถเล่นหมากรุกกับฝ่ายตรงข้ามได้ดูสิ

การที่คุณเข้าใจว่า Native App และ Web App ทำงานอย่างไร จะช่วยทำให้คุณโดดเด่นจากคนอื่น ๆ ได้

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

- Web Sockets (Instant Messaging)

- การทำงานของ Native App

- วิธีการทำงานของ Layouts ใน Native

- การ Routing สำหรับ Native App

7.1 Lila (li[chess in sca]la)

Lila (li[chess in sca]la) เป็น Server เกมหมากรุก Online ฟรี ที่เน้นการเล่นเกมแบบ Real Time และใช้งานง่าย

มันมี Feature ต่าง ๆ ทั้ง Search Engine, Computer Analysis Distributed ด้วย Fishnet, Tournaments, Simuls, Forums, Teams, Tactic Trainer, Mobile App และ Shared Analysis Board ส่วน UI เอง ก็มีให้บริการกว่า 80 ภาษา ซึ่งต้องขอบคุณ Community ต่าง ๆ ด้วย

Web Client ถูกเขียนใน TypeScript และ Snabbdom โดยใช้ Sass ในการ Generate CSS

7.2 Sunfish

Sunfish เป็น Chess Engine ที่ดูเรียบง่ายแต่มีประสิทธิภาพ ที่ถูกเขียนด้วยภาษา Python และด้วยความที่มันมี Interface ที่เรียบง่ายและไม่มีกระทั่งตาราง ทำให้มันมี Code เพียงแค่ 111 บรรทัดเท่านั้น

เนื่องจาก Sunfish มีขนาดเล็กและมุ่งเน้นไปที่ความเรียบง่าย, Code ของมันจึงเป็น Platform ที่ยอดเยี่ยมสำหรับการฝึกฝน โดยผู้คนสามารถใช้มันเพื่อทดสอบ Parallel Search Algorithms, ทดสอบ Evaluation Functions และการพัฒนา Deep Learning Chess Programs

7.3 Chess.js

Chess.js เป็น Chess Library ของ JavaScript ที่ช่วยให้ขั้นตอนการวาดกระดานหมากรุกบน Web Page ทำได้ง่ายขึ้น รวมถึงสามารถเพิ่ม, วางและลากตัวหมากไปตามตำแหน่งต่าง ๆ ได้ ตรวจสอบได้ว่าจะสามารถรุกฆาตได้ หรือกำลังตกในสถานการณ์จนมุม อีกทั้งมันยังมาพร้อมกับ AI Engine เพื่อให้ User สามารถเล่นกับคอมพิวเตอร์ได้

Chess.js ได้รับการทดสอบใน Node.js อย่างแพร่หลายและใน Browser ที่ทันสมัย

สรุป

หวังว่าบทความนี้จะเป็นประโยชน์ในการช่วยพัฒนาทักษะของคุณให้ดียิ่งขึ้นได้

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

 

ดูตำแหน่งงานที่ใช้ทักษะที่เกี่ยวข้องได้ที่นี่: JavaScript / NodeJS / AngularJS / Python / Android / HTML / CSS

 

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

 

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

 

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

• 9 เคล็ดลับ JavaScript ที่ Developer ควรจดจำให้ได้ 
• 21 VS Code Shortcuts ที่จะช่วยให้คุณ Coding ได้เร็วขึ้น
• IT & Digital Events in October 2019