Blog

  • cocoapods ตอนที่ 4 – การนำ Library มาใช้ใน Project

    จากตอนที่แล้ว ตอนที่ 3 การติดตั้ง Pod ใน Project เราได้ทำการสร้าง Podfile ใน project ในตอนนี้เราจะมาทำการแก้ไข Podfile แล้ว install library ต่างๆ

    ขั้นตอน

    1 ไปที่ web coccoapods.org เพื่อทำการค้นหา library ที่ต้องการใช้งาน เช่น ในบทนี้ผมต้องการทำโปรเจ็คเกี่ยวกับ Json ผมก็ทำการค้นหาและพบว่า SwiftyJSON เป็น library ที่นักพัฒนานิยมนำมาใช้

    ภาพที่ 1 SwiftyJSON ใน cocoapods.org
    ภาพที่ 1 SwiftyJSON ใน cocoapods.org

    2 จาก Podfile ที่เปิดทิ้งไว้ใน xcode จากตอนที่แล้ว เราทำการเพิ่ม คำสั่งว่าเราจะใช้ swiftyJSON โดยพิมพ์ pod ‘SwiftyJSON’

    pod 'SwiftyJSON'
    ภาพที่ 2 แก้ไข Podfile เพื่อเตรียมทำการ load SwiftyJSON
    ภาพที่ 2 แก้ไข Podfile เพื่อเตรียมทำการ load SwiftyJSON

    3 save แล้วปิด xcode จากนั้นไปที่ terminal ใน folder ของ project พิมพ์ pod install

    $pod install
    ภาพที่ 3 install library เข้ามาใน project
    ภาพที่ 3 install library เข้ามาใน project

    4 cocoapods จะทำการ download library ต่างๆ ที่เราระบุใน podfile มาให้โดยอัตโนมัติ

    ภาพที่ 4 install library เรียบร้อยแล้ว
    ภาพที่ 4 install library เรียบร้อยแล้ว

    5 กรณีที่ต้องการ update ก็ไปที่ terminal ใน folder project แล้วพิมพ์​ pod update ก็จะเป็นการ update library ต่างๆ ให้เป็น version ล่าสุดครับ

    ตอนนี้ก็จะเป็นตอนสุดท้ายของ cocoapods intallation แล้วนะครับ หวังว่าจะเป็นประโยชน์กับเพื่อนๆทุกคน แล้วพบกันใหม่ สวัสดีครับ

  • Cocoapods ตอนที่ 3 – ติดตั้ง pod ใน project

    ทุกโปรเจ็คที่จะใช้งาน library จาก cocoapods.org จะต้องติดตั้งตัว pod ลงใน project ก่อน โดยมีขั้นตอนดังต่อไปนี้ครับ

    ขั้นตอนการติดตั้ง Pod

    1. สร้าง Xcode project ก่อน จากนั้นให้ปิด project ปิด xcode โดยจากภาพผมสร้างโปรเจ็คชื่อ TestCocoapods ไว้ที่ desktop

    ภาพที่ 1 ทำการสร้าง xcode project ไว้บน desktop
    ภาพที่ 1 ทำการสร้าง xcode project ไว้บน desktop

    2. เปิด terminal แล้วไปยัง directory ของ project ใช้คำสั่ง ls เพื่อดูไฟล์ใน folder จะเห็นว่ามี 2 รายการอยู่ข้างใน

    $ cd desktop
    $ cd TestCocoaPods
    $ ls
    ภาพที่ 2 ใช้คำสั่ง ls จะเห็นไฟล์ xcode project กับ folder
    ภาพที่ 2 ใช้คำสั่ง ls จะเห็นไฟล์ xcode project กับ folder

    3. ติดตั้ง pod โดยพิมพ์ว่า pod init

    ภาพที่ 3 ใช้คำสั่ง pod init เพื่อติดตั้ง podfile ใน xcode project
    ภาพที่ 3 ใช้คำสั่ง pod init เพื่อติดตั้ง podfile ใน xcode project

    4. จะมีไฟล์ Podfile สร้างขึ้นใน folder ของโปรเจ็ค

    ภาพที่ 3 Podfile ถูกสร้างขึ้นใน folder ของ Project
    ภาพที่ 3 Podfile ถูกสร้างขึ้นใน folder ของ Project

    5. เข้าไปแก้ไขหรือดูรายละเอียด podfile โดยใช้ texteditor ของ xcode โดยพิมพ์ open -a Xcode Podfile

    $ open -a Xcode Podfile
    ภาพที่ 5 คำสั่งเปิด Podfile ใน xcode
    ภาพที่ 5 คำสั่งเปิด Podfile ใน xcode
    ภาพที่ 6 เปิด Podfile ใน xcode
    ภาพที่ 6 เปิด Podfile ใน xcode

    Podfile จะใช้ในการระบุ Library ที่เราจะใช้ในโปรเจ็คครับ ในตอนหน้าเราจะมาทำการแก้ไข podfile กันครับ

  • Cocoapods ตอนที่ 2 – การติดตั้ง cocoapods

    Cocoapods จะต้องถูกติดตั้งลงในเครื่องก่อน เพื่อใช้ดึง Library เข้ามาใช้ในโปรเจ็ค โดยการติดตั้งจะทำครั้งแรกครั้งเดียว

    ขั้นตอนในการติดตั้ง

    1. เปิด Terminal แล้วพิมพ์ sudo gem install cocoapods (เวลาพิมพ์ระวังพิมพ์ผิดนะครับ cocopod, coacopods, cocopods ตัว a จริงๆ ต้องเป็น cocoapods)

    sudo gem install cocoapods

    ภาพที่ 1 เปิด Terminal แล้วพิมพ์คำสั่งเพื่อติดตั้ง coacopods
    ภาพที่ 1 เปิด Terminal แล้วพิมพ์คำสั่งเพื่อติดตั้ง coacopods

    2. ระให้ระบบทำการ install จากนั้นระบบจะแสดงข้อความว่า install เรียบร้อยแล้ว

    ภาพที่ 2 cocoapods ถูกติดตั้งในเครื่อง

    3. Set up Pod โดยพิมพ์ pod setup –verbose

    pod setup –verbose

    ภาพที่ 3 set up pod
    ภาพที่ 3 set up pod

    จากนั้นรอให้ระบบทำการ setup จนเสร็จ อาจจะใช้เวลาบ้างแล้วแต่ความเร็วของอินเตอร์เน็ต เมื่อเสร็จแล้วโปรแกรม pod ก็พร้อมที่จะใช้งานในการดึง library เข้ามาในโปรเจ็คแล้วครับ

  • Cocoapods ตอนที่ 1 – แหล่งรวม Library สำหรับนักพัฒนา

    cocoapods.org เป็นเว็บที่รวม Library สำหรับ swift และ Objective C

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

    ภาพที่ 1 เว็บ cocopods.org
    ภาพที่ 1 เว็บ cocopods.org

    การใช้งานเว็บ cocoapods ให้ไปที่ www.cocopods.org จะมีหน้าต่างค้นหาแสดงเป็นหน้าแรก เราสามารถทำการค้นหาโดยพิมพ์ข้อความในช่อง search

    ภาพที่ 2 การค้นหา Library ใน cocopods
    ภาพที่ 2 การค้นหา Library ใน cocoapods

    จากตัวอย่าง ผมต้องการ Library ที่สามารถแสดงภาพไอคอนว่าแอปกำลังโหลดอยู่ โดยวัตถุประสงค์เพื่อนำมาใช้ในโปรเจ็คขณะรอโหลดหน้าข้อมูล ผมก็ search คำว่า Progress

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

    ภาพที่ 3 ตัวอย่าง Library จะมีการแสดงข้อมูลและตัวอย่างหน้าจอ
    ภาพที่ 3 ตัวอย่าง Library ProgressHUD จะมีการแสดงข้อมูลและตัวอย่างหน้าจอ

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

    การนำมาใช้ในโปรเจ็คจะอาศัยเครื่องมือของ cocoapods ซึ่งผมจะอธิบายในตอนถัดไปครับ

  • ASP.NET CORE WEB API ตอนที่ 1 การสร้างโปรเจ็ค

    Asp.net core ได้เตรียม template สำหรับการสร้างโปรเจ็คไว้แล้ว สามารถสร้างแล้วลองรันดูได้เลย

    ขั้นตอน

    1.เลือก File > New project

    ภาพที่ 1 การสร้างโปรเจ็ค

    2. เลือก Asp.net core web application

    ภาพที่ 2 เลือก project web API

    3. เลือก Version เป็นล่าสดุ (ในขณะเที่เขียนเป็นเวอร์ชั่น 2.1) จากนั้น เลือก API และเอา check ที่ docker ออก

    ภาพที่ 3 เลือกเวอร์ชั่นล่าสุด แล้วเลือก API

    4. Visual studio จะทำการสร้าง Project ให้ โดยมี structure และไฟล์ที่จำเป็นต่างๆ ไว้ให้แล้ว

    ภาพที่ 4 โปรเจ็คถูกสร้างพร้อมด้วยไฟล์ต่างๆ ที่จำเป็น

    5. ทำการทดสอบ Run หน้าต่าง browser จะแสดงตัวอย่างข้อมูล

    ภาพที่ 5 browser แสดงข้อมูลตัวอย่าง
  • CLI package manager ติดตั้งโปรแกรมไม่ง้อ GUI

    การติดตั้งโปรแกรมโดยปกติจะทำผ่าน Graphic User interface คือ ดับเบิ้ลคลิก ไฟล์ที่ใช้ติดตั้ง แล้วก็ next next next ซึ่งการทำแบบนี้เหมาะกับการติดตั้งที่ไม่ได้สลับซับซ้อน

    แต่ถ้าต้องการติดตั้งที่ซับซ้อนขึ้นมีการทำ automate ต่างๆ แล้ว การใช้ command line จะสะดวกกว่า

    เครื่องมือฟรีในการติดตั้งผ่าน command line (หรือเรียกว่า CLI pakcage manageer) ที่นิยมได้แก่

    ค่าย Window – Chocolatey

    Chocolatey เป็น CLI package manager สำหรับ windows
    การลงโปรแกรมใช้คำสั่ง

    choco install ชื่อpackage

    สำหรับ package ที่สามารถ install ผ่าน chocolatey ได้ สามารถเข้าไปดูได้ในเว็บ chocolatey ในหน้า package ตัวอย่างเช่น โปรแกรม acrobat reader, flash และอีกมากมาย

    ภาพที่ 1 Chocolatey website

    ค่าย Mac – Homebrew

    สำหรับคนใช้ mac ก็มี Homebrew ที่ใช้ติดตั้ง package ต่างๆ ได้ เช่นเดียวกับ choco

    การติดตั้ง พิมพ์ว่า :

    brew install ชื่อpackage
  • Angular ตอนที่ 1 ติดตั้ง

    ขั้นตอน

    1. ไปที่ command prompt พิมพ์ npm install -g @angular/cli
    ภาพที่ 1 การติดตั้ง angular

    2. รอจนติดตั้งเสร็จ

    ภาพที่ 2 ระบบแจ้งว่าติดตั้ง angular เรียบร้อยแล้ว

    3. สร้าง project โดยไปยัง path ที่ต้องการสร้าง project จากนั้น พิมพ์ :

    ng new my-app

    4. ไปยัง folder ที่สร้าง project จากนั้นสั่ง run server โดยพิมพ์ :

    ng serve

    ภาพที่ 4 run server แล้วระบบจะบอก url ที่ใช้ทดสอบ server มาให้

    4.จากนั้นทดสอบ Run โดยไปที่ browser แล้วพิมพ์ url ตามที่ ระบบบอกใน comand prompt จากภาพตัวอย่าง พิมพ์คำว่า localhost:4200

    ภาพที่ 5 หลังจาก พิมพ์ localhost:4200 ใน browser จะแสดงหน้าแรกของ angular

    เสร็จขั้นตอนการติดตั้งและทดสอบสร้าง project

  • Unity3D ตอนที่ 9 เหตุการณ์การชนกันของวัตถุ (Collision)

    ภาพที่ 9-1 ติ๊กถูกที่ Is Trigger เพื่อให้วัตถุตอบสนองต่อเหตุการณ์การชน
    ภาพที่ 9-2 สร้าง script กำหนดการทำงานเมื่อเกิดเหตุการณ์การชน
    ภาพที่ 9-3 จัดระเบียบไฟล์ script
    ภาพที่ 9-4 Double click ไฟล์ script เพื่อทำการแก้ไข
    ภาพที่ 9-5 script ที่ระบบสร้างให้
    ภาพที่ 9-6 ลบ script ที่ระบบสร้างให้ออก แล้วแก้ไขดังภาพ จากนั้น Save file แล้วกลับไปที่ Unity3D
    ภาพที่ 9-7 กด Play เพื่อทดสอบ
    ภาพที่ 9-8 เมื่อบอลชนกล่องแล้วกล่องจะหายไป ตามที่เขียนไว้ใน script
  • Unity3D ตอนที่ 8 การชนของวัตถุ (Rigidbody physics)

    ภาพที่ 8-1 สร้างกล่องสี่เหลี่ยม (cube)
    ภาพที่ 8-2 ปรับขนาดกล่อง
    ภาพที่ 8-3 ย้ายตำแหน่งกล่องใน scene
    ภาพที่ 8-4 เพิ่ม Physic rigidbody component ไปยังกล่อง
    ภาพที่ 8-5 เอาติ๊กออกที่ use gravity
    ภาพที่ 8-6 ทดสอบการเล่น
    ภาพที่ 8-7 ทดสอบติ๊ก Is Kinematic
  • Unity3D ตอนที่ 7 การปรับแต่งแสงในเกม

    ภาพที่ 7-1 ขั้นตอนการเลือก Light
    ภาพที่ 7-2 การหมุนมุมของแสง