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

ทำ Side Project อย่างไร ให้เสร็จภายใน 10 วัน

24-ส.ค.-18

คัมภีร์เทพ IT

การทำ Side Project ถือเป็นอีกหนึ่งวิธีที่จะช่วยให้เหล่า Programmer/Developer ได้ฝึกฝนทักษะของตนเอง อีกทั้งสามารถทำอะไรก็ได้ตาม Idea ที่มีแบบไร้ขีดจำกัด แต่ปัญหาคือ หลายคนอาจไม่รู้ว่าจะเริ่มจากตรงไหนดี ซึ่งในบทความนี้จะช่วยแนะนำวิธี Launch Side Project ใน 10 วัน ให้คุณได้ลองนำไปประยุกต์ใช้กันครับ

Kyle Gill ซึ่งเป็นผู้เขียนบทความนี้ ได้แนะนำวิธี Launch Side Project สำหรับสร้าง Web App อย่างรวดเร็วเป็นขั้นเป็นตอน โดย Side Project ที่เขาทำคือ Card Surge ซึ่งใช้อ้างอิงในบทความนี้ เราไปดูกันว่าเขาแนะนำอะไรบ้าง

Idea (ใช้เวลา 1 วัน)

Kyle ใช้เวลาอย่างเต็มที่ในการ Design และ สร้าง Sites นั่นคือ เขาต้องหา Sites ที่ได้รับการ Design เป็นอย่างดีจาก เพื่อใช้เป็นแบบอย่าง และต้องเปิด Chrome Inspector เพื่อดูว่า Sites เหล่านั้นมีการใช้ Style อย่างไรและมี Elements อะไรบ้าง จะได้รู้ว่าการ Design แบบไหนมีดีอย่างไรบ้าง จากนั้นเขาก็สร้าง Site ของตัวเองโดยประยุกต์จากตัวอย่างที่ได้เห็นๆ มา ใช้ Inspector และปรับแต่ง Style ควบคู่กันไป, จัดวาง Position ต่างๆ ให้เรียบร้อย จนมันดูน่าจะ Work ซึ่งการใช้ในเรื่องนี้ ทำให้เขารู้จัก Design Tools อื่นๆ ที่มีประโยชน์อย่างมาก อย่าง Coolors หรือ Hero Patterns ซึ่งสามารถนำไปประยุกต์ใช้ให้ตรงตามความต้องการได้

Design (ใช้เวลา 2 วัน)

คุณจะเห็น Cards ต่างๆ ใน Layouts ทั้ง Pricing pages, Product pages, Lists และอื่นๆ ซึ่งเป็นวิธีที่ดีในการจัดกลุ่มข้อมูลที่เกี่ยวข้องกัน และทำให้เห็นโดดเด่นขึ้นด้วยการใช้ Drop shadow หรือ Outline ลองดูตัวอย่างด้านล่างได้เลย ซึ่งคุณจะเห็นว่า มันสามารถมี Drop shadows, มี Border ในบางด้าน, hover styles ซึ่งสามารถใช้สีหลากหลายได้และสามารถใช้ Multiple shadows ใน Single element เพื่อสร้าง Gradient ใน Drop shadows ได้ด้วย ลองดูตัวอย่างด้านล่าง:

        

https://crisp.chat/en/pricing

https://flat.io/pricing

https://www.timekit.io

Kyle ToolDesigners Developers Cards Card Idea Figma โดย Focus ไปที่สิ่งสำคัญๆ ก่อน สำหรับส่วนที่สำคัญน้อยก็ค่อยกลับมาทำในภายหลัง (เช่น การเพิ่ม Logo สำหรับ Brand, การเพิ่ม Icon ของ Social เป็นต้น) และมันก็ได้ออกมาแบบนี้:

https://www.figma.com/file/Cav6jxGjiOSOJLaZrnWUtiG1/Cards

โดยสิ่งที่เขาต้องการมีดังนี้

  1. ตัว Editor เพื่อปรับแต่ง Style ที่จะสามารถเห็น UI แบบ Real time ได้
  2. Slider ที่สามารถหมุนเวียนใช้งานได้ดี
  3. สถานที่เพื่อใช้ในการ Export code โดยการ Copy ไปยัง Clipboard

Develop (ใช้เวลา 7 วัน)

Kyle คิดว่าส่วนที่ต้องใช้เวลามากที่สุดในการทำ App คือการเขียน Code ของ App ซึ่งมักจะมีประเด็นที่ทำให้กังวลอยู่บ้าง คือ สิ่งต่างๆ จะยังไม่มีปัญหาจนกว่าคุณเริ่ม Coding 

Kyle Process Develop Gatsby ก็เพราะ

  1. เขาสามารถสร้าง Interface โดยใช้ React ได้
  2. การ Convert site ไปเป็น PWA ก็สามารถทำได้ง่ายเพียงแค่เพิ่ม Code ไปไม่กี่บรรทัดลงไปใน Config file
  3. Hosting ก็ทำได้ง่ายด้วย Static files ในการ Deploy
  4. เขาสามารถข้ามขั้นตอนบางอย่างได้ และเริ่มสร้างส่วนที่น่าสนใจได้เลย
  5. Gatsby มันเป็นสิ่งที่สุดยอดมาก (ในความคิด Kyle)

Kyle เริ่มต้นที่ gatsby-default-starter และสร้าง Function ต่างๆ มากมายโดยไม่มีปัญหา เขาใช้ 3rd Party libraries อย่าง React-color และ React-slick เพื่อลดความยุ่งยากในการสร้าง Slider ที่ซับซ้อน รวมทั้ง Color components ซึ่งในช่วงนี้เองที่เขาตัดสินใจเลือกที่จะวาง Content ในส่วนอื่นๆ ของ Page และสร้างส่วนนี้ไปด้วย ทำให้เขาได้ความรู้จาก Trends ใหม่ๆ จาก  CSS Grid ซึ่งสร้าง Responsive Layouts ได้ง่ายขึ้น

เมื่อถึงจุดหนึ่ง Kyle ตระหนักว่า Diagonal Divider ที่อยู่ใน Layout ของ App สามารถดึงมาใช้ได้และกลายเป็น NPM Package ที่คนอื่นๆ ก็สามารถนำไปใช้ได้ หลังจากสร้าง Component และ Publish Package บน NPM แล้ว เขาก็พบว่า กำลังออกนอกเส้นทางจากเป้าหมายที่ตั้งไว้ตอนแรกแล้ว และมันน่าจะใช้เวลามากขึ้นอีก เขาจึงตัดสินใจไม่ทำสิ่งที่อยู่นอกเหนือเป้าหมาย

Deploy (ประมาณ 45 นาที) และ Launch

เมื่อไปถึงจุดที่ App ของเขาทำงานและใช้งานได้ตามที่คิดไว้ แต่เขากลับคิดว่ามันยังไม่ดีพอ เขานึกภาพ Portal ที่ User สามารถ Authenticate, Save และ Share Styles ที่ได้ทำ และใช้ App เป็น Reference เพื่อให้คนย้อนกลับมาใช้งาน  เขาก็ได้ข้อสรุปว่า นั่นไม่ใช่จุดมุ่งหมายที่ตั้งไว้ตอนแรก จึงตัดสินใจทำสิ่งที่ตั้งใจไว้แต่แรกให้เสร็จ จนในที่สุดก็ได้ผลงานตามรูปด้านล่าง:

เมื่อทำงานเสร็จแล้ว การ Deploy ถือเป็นขั้นตอนต่อไป การ Deploy เป็น Process ที่ง่าย เขาไม่ต้องการทุ่มเงินมากมายไปกับ Domain ของ Side Project ซึ่งเขาก็ได้ใช้ Host ฟรีอย่าง Surge โดยมีชื่อ Free domain ว่า card.surge.sh จากนั้นเขาก็ Run Gatsby build จากนั้นก็เป็น Surge แล้ว Code ของเขาก็ Online นอกจากนี้เขายังใช้ Kap ในการทำ Screenshot และ เขียน Description รวมทั้งโพสต์ Card Surge ใน Product Hunt

เมื่อมองย้อนกลับไป

การทำงานอย่างรวดเร็วและผลักดันให้ทุกอย่างเสร็จในเวลาที่กำหนดไว้ ถือเป็นรางวัลที่ยิ่งใหญ่ เขาเรียนรู้ที่จะทำให้ปัญหามันเล็กลงให้มากที่สุด และให้ความสำคัญเฉพาะสิ่งที่จำเป็นจริงๆ ก่อน เพื่อให้งานเสร็จจนได้ launch project และเขาก็เชื่อว่าหากเขาอยากจะทำ Side project อื่นๆ อีก ก็คงจะเสร็จในไม่กี่สัปดาห์ และจะทำให้เสร็จได้รวดเร็วอย่าง Project นี้

ที่มา:  https://medium.freecodecamp.org/

 

 

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

 

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

เพิ่มเพื่อน

 

บทความที่เกี่ยวข้อง

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