iOS 12: เขียนแอพ iPhone จากดีไซน์ UI/UX (Programmatically)

Description

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

เนื้อหาในแต่ละบทจะเป็นเหมือนขั้นบันไดให้ทุกคนเรียนรู้ไปทีละขั้นตอนเพื่อทำให้เราเข้าใจการพัฒนาแอพได้อย่างถูกต้องและพัฒนาแอพได้อย่างมีประสิทธิภาพ

โดยเริ่มต้นตั้งแต่การสร้าง Extensions เพื่อนำไปใช้สำหรับทุกๆ โปรเจ็ค ซึ่งจะทำให้เราประหยัดเวลาในการพัฒนาแอพได้อย่างมาก ต่อจากนั้นจะเป็นเรื่องของการสร้าง Elements โดยผมได้ยกตัวอย่าง Element ตัวที่เราใช้งานบ่อยๆ มาให้ทุกคนได้สร้างมันขึ้นมา เช่น UIView, UILabel, UIButton, UIImageView, UITextField, UITextView เป็นต้น

เรื่องที่สำคัญอีกเรื่องคือ Code Snippets ตัวช่วยที่ทำให้เราพัฒนาแอพได้อย่างรวดเร็วและประหยัดเวลามากๆ ส่วนใหญ่เราก็จะสร้าง Elements จากการใช้เรียกใช้ Code Snippets หรือว่าคีย์ลัดของโค้ดที่เราเก็บเอาไว้

แอพแรกที่เราจะสร้างกันก็คือ Welcome เป็นแอพง่ายๆ ที่ทำให้เราเข้าใจเรื่องการสร้าง Elements และการจัดวางตำแหน่งบนหน้าจอ

ต่อด้วยแอพ Sign Up ที่เริ่มต้นด้วยการแนะนำการสร้างพื้นหลังแบบเฉดสีไล่ไปเรื่อยๆ คล้ายๆ ของ Instagram โดยเป็นการใช้ไลบรารี่จาก Cocopods รวมถึงการสร้าง UIStackView สำหรับวาง Elements ในส่วนของ Textfield

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

โปรเจค NavigationBar จะเป็นของพื้นที่ด้านบนของหน้าจอที่เราสามารถจะปรับแต่งในส่วนของข้อความ Title ได้ เปลี่ยนฟอนต์หรือเพิ่มในส่วนไอคอนลงไป โดยในไอคอนแรกจะเป็นส่วนของการแสดง Alert ต่อมาเป็นส่วนการแสดง ActionSheet และสุดท้ายแสดงในส่วนของการแชร์ไปยังแอพอื่นๆ ภายในเครื่องของเรา

โปรเจค TableView เป็นบทที่สำคัญบทหนึ่งเพราะว่าหลายแอพจะใช้ TableView โดยเฉพาะแอพ Chat ซึ่งผมมี TableView แบบธรรมดาและ TableView Animation ในส่วนของข้อมูลผมได้จำลองแอพ Messenger ขึ้นซึ่งเป็นรายชื่อเพื่อนที่เรากำลังคุยด้วย เราสามารถลบแถวออกไปได้ หรือส่งอีเมล หรือแม้แต่เก็บเป็น Favorite ได้ นอกจากนั้นยังมีในส่วนของ Settings เพื่อให้เราตั้งค่าต่างๆ ภายในแอพได้ ซึ่งทุกแอพจะต้องมีในส่วนของตรงนี้

โปรเจค GridView เป็นโปรเจคง่ายๆ ที่ทำให้เราเข้าใจการสร้าง CollectionView โดยการแสดงรูปภาพออกมาเป็นคอลัมน์

โปรเจค Featured จะเพิ่มเติมมาจากในส่วนของ GridView คือเพิ่มเติมในส่วนของข้อความและการจัดเรียง Elements ที่แตกต่าง

โปรเจค Item List จะเป็นการแสดง CollectionView Layout ด้วยกัน 2 แบบคือ Grid และ List ซึ่งเราสามารถคลิกไอคอนเปลี่ยน Layout ได้ ซึ่ง Elements ทุกอย่างจะเหมือนกันแต่จัดตำแหน่งที่แตกต่างกัน

โปรเจค CollectionView Horizontal จะเป็นการสร้าง CollectionView ที่ซับซ้อนขึ้นโดยการวาง CollectionView ซ้อนกันและให้ Layout เรียงลำดับเป็นแนวนอน และมีการผสมกันระหว่างการเรียงลำดับแบบแนวนอนและแนวตั้ง

โปรเจ็ค PageControl จะเป็นการนำ CollectionView มาใช้ร่วมกับ PageControl ซึ่งผมจะใช้ไลบรารี่จาก Cocopods เข้ามาช่วยทำให้ดูน่าสนใจมากขึ้นโดยการแสดง Animation 

โปรเจค Pinterest Layout จะเป็นการเปลี่ยน Layout ของ CollectionView ให้เปลี่ยนแปลงตามขนาดหรือไซต์ของรูปภาพ เพื่อให้ Layout ดูน่าสนใจและสวยงามมากขึ้น

โปรเจค Top Bar Menu จะเป็นการนำ CollectionView มาใช้เป็นในส่วนของ Menu เพื่อแสดงหน้าเพจตามที่เราคลิกเลือกหรือว่าสไลด์หน้าจอ เราจะเจอบ่อยในแอพ Shopping 

โปรเจค Segmented Control จะคล้ายๆ กับโปรเจค Top Bar Menu คือคลิกเลือกเพจที่ต้องการแสดงแต่จะไม่สามารถเลื่อนหน้าจอได้ ซึ่งผมได้สร้างแอพขึ้นมาคล้ายๆ กับหน้า Instagram Profile

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

โปรเจค Item Search จะเป็นโปรเจคสำหรับค้นหารายการสินค้า โดยใช้ TableView ร่วมกับ CollectionView โดยให้ช่องการค้นหารายการสินค้าแสดงอยู่ด้านบน แล้วแสดงในส่วนรายการสินค้าที่เคยคลิกเข้าไปดูแล้วแสดงที่ด้านล่างลงมา ในส่วนด้านล่างสุดจะเป็น Keyword ที่เคยค้นหาไปแล้ว เมื่เราค้นหาสินค้าก็จะแสดงรายการ Keyword ที่เกี่ยวข้องออกมาให้เราได้คลิกเลือก เมื่อเราเลือก Keyword ก็จะแสดงรายการสินค้าขึ้นมา แต่ถ้า Keyword ไหนที่ไม่มีสินค้าก็จะแสดงขึ้นมาว่าไม่พบรายการสินค้า

โปรเจค My Music เป็นแอพที่ใช้ในการเล่นเพลงซึ่งมีอยู่ 2 วิธีคือ การเล่นเพลงที่เพิ่มเข้ามาในโปรเจค และการเล่นเพลงจาก URL หรือว่าลิงค์ที่เราฝากไฟล์ไว้บนเว็บไซต์ การเลื่อนหน้าปกอัลบั้มรายชื่อเพลงก็จะเปลี่ยนไปเรื่อยๆ เวลาเล่นเพลงเราก็สามารถจะเลื่อนตำแหน่งเพลงได้

TAKE THIS COURSE