Blog

  • c# sealed class คืออะไร

    c# sealed class คืออะไร

    c# sealed class คือการทำให้ class ไม่สามารถสืบต่อได้อีกต่อไป

    การประกาศ Class ให้เป็น sealed class

    เราจะใส่ Keyword sealed ไว้ที่ class ก็จะทำให้ class กลายเป็น sealed class แล้ว

    public sealed class Honda : Car
        {
    
        }

    Complier กับ Sealed class

    หากเราพยายามที่จะสืบทอด class จาก sealed class แล้ว visual studio จะฟ้องว่า ไม่อนุญาตให้ทำการสืบต่อ

    จากภาพด้านล่างจะเห็นว่าได้กำหนดให้ Honda เป็น sealed class เมื่อเราทำการประกาศ class civic โดยให้สืบต่อจาก Honda class จะเห็นว่าไม่สามารถทำได้ compiler จะฟ้อง error ให้เห็นหากเราเอาเมาส์ไปชี้ข้อความ Honda ที่ขีดเส้นไว้

    error ที่ visual studio บอกเราว่าไม่สามารถทำได้

    C# Sealed class ใช้ประโยชน์อย่างไร

    เมื่อเราออกแบบคลาสไม่ให้มีการสืบทอด นอกจากนี้ยังป้องกันผู้นำ class ไปสืบทอดใช้อย่างไม่เหมาะสม ตัวอย่างเช่น Microsoft ได้ sealed class String ไว้ ถ้าหากว่าไม่ sealed แล้วเปิดให้โปรแกรมเมอร์อย่างเราไปใช้อย่างไม่เหมาะสมก็อาจจะมีผลกระทบอื่นๆตามมาได้

    นอกจากนี้การที่ระบุว่าเป็น sealed class ยังช่วยเรื่อง performance อีกด้วย เพราะว่า CLR (common language runtime) ไม่ต้องวิ่งหาคลาสลูกต่อๆไป

    บทความและแหล่งความรู้ OOP แนะนำ

    C# Abstract class คืออะไร

    Interface – OOP

    Discover Udemy’s featured courses!

  • C# Abstract class คืออะไร

    C# Abstract class คืออะไร

    C# Abstract Class – คือการประกาศว่า class เป็นต้นแบบให้ class ลูกสืบทอดโดยกำหนดความสามาคถตั้งต้นให้ class ลูกเอาไปกำหนดความสามารถต่อ โดยที่ห้าม instantiate ที่ abstract class แต่ให้ instantiate ที่ class ที่สืบต่อไปแทน

    ดูภาพรวมกันก่อน

    Abstract class เป็นการประกาศ Class โดยที่เราจะใส่ Keyword abstract ไว้ในตอนที่ประกาศ Class

    public abstract class Car
    {
        // Class members here.
    }

    นอกจากใส่ keyword คำว่า abstract ไว้ที่ class เรายังสามารถใส่ไว้ที่หน้า method ได้ด้วย และไม่จำเป็นต้องใส่ { } ต่อท้าย( ในกรณีที่ประกาศ method ไว้เฉยๆ โดยไม่ได้มี code การทำงาน)

    public abstract class Car
    {
        public abstract void StartEngine();
    }

    ซึ่งถ้าเราใส่ Abstract keyword ไว้ใน method ที่มี code ใน body แล้ว compiler จะแจ้ง error ตามภาพข้างล่างครับ

    ฟ้อง error ถ้าใส่ keyword abstract ใน class ที่มี body

    ดังนั้นถ้าเราต้องการให้ abstract class มี method ที่มี code การทำงาน เราก็เขียน method โดยที่ไม่มี abstract keyword ได้เลย

    	public abstract class Car
    	{
    		public  void StartEngine()
    		{
    			Debug.Write("start engine");
    		}
    	}

    ทำไมต้องใช้ Abstract Class

    คุณสมบัติของ abstract class คือมันห้ามไม่ให้มีการสร้าง object หรือ instance จาก abstract class ซึ่งจะมีการฟ้อง error ในตอนที่มีการพิมพ์ code เลย

    ฟ้อง error ถ้าพยายามจะ instantiate abstract class

    ดังนั้นเหตุผลที่เราจะใช้ abstract class ก็คือ

    1.ห้าม instantiate ที่ abstract class ป้องกันเอาไปใช้ผิด (ทั้งตัวเราเองหรือทีมของเรา)
    2. ต้องการกำหนดความสามารถพื้นฐานไว้ แล้วให้ลูกสืบต่อไป อาจจะมีโค้ดการทำงานไว้เลย หรือสร้างไว้เฉยๆ แล้วให้ลูกไปกำหนดการทำงานเอาเองก็ได้

    ตัวอย่างการใช้งาน

    // ห้าม instantiate ที่ car แต่ให้สืบต่อไปใช้งาน
    public abstract class Car  
    	{
    		// กำหนดให้รถทุกคันสตาร์ทเครื่องได้
    		public  void StartEngine()
    		{
    			Debug.Write("start engine");
    		}
    	}
    
    	public class Toyota : Car
        {
    
        }
    
    	public class Honda : Car
        {
    
        }
    
    	public class ShowRoom
        {
    		public void TestDrive()
            {
    
    			Toyota toyota = new Toyota();
    			toyota.StartEngine(); 
    
    			Honda honda = new Honda();
    			honda.StartEngine();
            }
    		
        }

    c# Abstract class ส่งท้าย

    เราสามารถนำประโยชน์มาใช้เพื่อ

    – กำหนด/สร้างความสามารถต่างๆให้ class ลูกนำไปใช้ (สร้างมาตรฐานและลดการเขียน code ซ้ำๆ)

    – ห้าม instantiate ที่ abstract class (ป้องกันการใช้ผิดโดยการให้ programmer ที่จะใช้ class ไปกำหนดการทำงานและสร้าง instance ใน class ลูกแทน)

    Type in C# – ว่าด้วยเรื่องชนิดของข้อมูล

    Interface – OOP

    อ้างอิง

    https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/classes-and-structs/abstract-and-sealed-classes-and-class-members

    https://en.wikipedia.org/wiki/Abstract_type

    Level Management in Unity

  • วิธีทำ App Icon ใน Adobe XD

    วิธีทำ App Icon ใน Adobe XD

    วิธีทำ App Icon ใน Adobe XD

    Adobe XD เป็นโปรแกรมที่ใช้ในการออกแบบและสร้างส่วนติดต่อผู้ใช้ (Graphic User Interface) มันสามารถสร้างการคลิกปุ่ม การเปลี่ยนหน้า คร่าวๆ ได้ ซึ่งสามารถนำไปใช้ในการสร้าง Prototype ต้นแบบ และยังสามารถนำมาใช้ทำ App Icon ใน Adobe XD ได้ด้วย

    ในตอนนี้เราจะมาสร้าง App Icon โดยใช้ Adobe XD กันครับ

    ขั้นตอน

    1 เปิดโปรแกรม Adobe XD แล้วเลือก Custom size จากนั้น กำหนดค่าความกว้างและความสูงให้เป็นสี่เหลี่ยมจตุรัส ตามตัวอย่างจะใช้ 1024 X 1024

    2. ในโปรแกรม Adobe XD ให้ใช้เครื่องมือต่างๆ วาด App Icon ที่เราต้องการลงไป

    3 เมื่อ วาดเสร็จ ให้คลิกที่ปุ่ม Plug inด้านล่าง แล้วคลิกที่เครื่องหมาย +เพื่อติดตั้ง Plugin

    4 หน้าต่าง Plug in จะแสดงขึ้น ให้คลิก Search icon

    5. ให้พิมพ์ App icon generator แล้วคลิก search เมื่อผลการค้นหาแสดงขึ้นมา จะเห็น plugin App Icon Generator ให้คลิก install

     

     

    6 เมื่อติดตั้งเสร็จสมบูรณ์แล้ว Plugin จะแสดงใน Tab plugin ให้เราเลือกใช้ได้

    7 เราจะใช้ Plugin ในการ Export Icon โดยให้ลากครอบเลือกวัตถุทั้งหมดของเราก่อน จากนั้นคลิกที่ Plug in จะมีช่องให้กรอกข้อมูล เราก็ทำการกรอกข้อมูล Path ที่จะ save ชื่อโปรเจ็ค แล้วทำการเลือก Platform จากนั้นคลิก Export

    8. เมื่อ Export  เสร็จ ระบบจะแสดงข้อความว่าเสร็จสมบูรณ์ แล้ว

    9 เมื่อเราไปยัง folder ที่เรากำหนดให้ save จะเห็นว่า โปรแกรมจะสร้าง folder แยก platform ไว้ให้ตาม platform ที่เราเลือกไว้ เมื่อเราเข้าไปดูใน folder ก็จะเห็นว่า มี icon ขนาดต่างๆ ได้ถูกสร้างไว้ให้เรียบร้อยแล้วครับ

    ส่งท้าย

    ในตอนนี้เราก็ได้เรียนรู้วิธีทำ App Icon โดยใช้ Adobe XD จะเห็นว่ามีความสะดวกในการ Export Icon เป็นขนาดต่างๆมาก ช่วยประหยัดเวลาที่เราจะต้องมาทำทีละอัน ก็หวังว่าบทความนี้จะเป็นประโยชน์แก่ผุ้อ่านกันนะครับ แล้วพบกันใหม่ สวัสดีครับ

    Download Adobe XD ฟรี

    Adobe XD

    ติดตามบทความด้าน GUI

    บทความด้าน GUI ใน Mifasoft.com

  • How to Export 3D Models from Mixamo to Unity

    How to Export 3D Models from Mixamo to Unity

    วิธีการส่งออกไฟล์จาก Mixamo ให้สามารถใช้งานได้ใน Unity 2019

    สำหรับตอนนี้จะมาแนะนำวิธีการส่งออกไฟล์ 3D Model จากโปรแกรม Maximo (เว็บ) ให้สามารถนำไปใช้ในโปรแกรม Unity 2019 เพื่อพัฒนาเกมหรือแอพปลิเคชั่นกันครับ

    แนะนำ Mixamo

    สำหรับโปรแกรม Mixamo นั้นเป็นโปรแกรมที่รันอยู่บนเว็บ ตอนนี้เป็นลูกค่ายของ Adobe โดยเว็บนี้จะให้เราสามารถ Upload Model กำหนดท่าทาง animation ต่างๆ โดยตัวโปรแกรมจะมี Preset ท่าทางมาให้ เราจะกำหนดท่าทางโดยใช้ Paramter ต่างๆ จากนั้น เราก็สามารถที่จะ download มายังเครื่องคอมพิวเตอร์ของเราเพื่อนำไปใช้งานต่อไป

    แนะนำโปรแกรม Unity 2019

    สำหรับโปรแกรม Unity นั้นเป็นโปรแกรมที่ใช้สร้างเกมและ animation ต่างๆ ซึ่งก็คือ Game engine นั่นเอง

    การใช้งานโปรแกรม Unity สามารถหาอ่านได้ตามลิงค์นี้ครับ

    https://mifasoft.com/category/article/game-engine/unity3d/

    ขั้นตอนการส่งออก 3D Models from Mixamo to Unity

    ดูผ่าน Youtube

    ขั้นตอน

    1. ไปที่ Website mixamo.com

    2. กดปุ่ม Download ทางด้านขวามือ

    3. เปลี่ยน Format เป็น FBX for Unity

    4. คลิกปุ่ม Download

    5. Save file ลงมายังเครื่อง

    6. เปิดโปรแกรม Unity ขึ้นมา จากนั้นค้นหาไฟล์ที่ Download มา แล้วลาก ใส่เข้าไปยัง project window

    7. Model ก็จะปรากฎใน Project ของเราแล้วครับ

    ส่งท้าย

    สำหรับตอนนี้ก็ได้แนะนำการส่งไฟล์จาก Mixamo ออกมายังโปรแกรม Unity3D 2019 เพื่อที่เราจะสามารถนำไปใช้งานได้ต่อไป ซึ่งเป็นขั้นตอนที่ไม่ยากเลย

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

    ติดตามบทความด้าน 3D >>> https://mifasoft.com/category/article/3d/

    ติดตามใน Facebook >>>> https://web.facebook.com/mifasoft

  • Adobe fuse  ใน Mac OS version Catalina ใช้ไม่ได้แล้ว

    Adobe fuse ใน Mac OS version Catalina ใช้ไม่ได้แล้ว

    Adobe fuse  ซึ่งเป็นโปรแกรมที่ใช้สร้างตัวละคร 3D (คล้ายๆ กับโปรแกรม  Poster) ที่ทาง Adobe เคยให้ใช้งานฟรี ตอนนี้ไม่สามารถใช้งานได้แล้วใน  Mac OS version Catalina

    ภาพจาก www.adobe.com

    ซึ่งถ้าใคร update mac os version Catalina แล้วจะไม่มี Adobe fuse ใน Adobe creative cloud desktop app ทำให้ไม่สามารถ install โปรแกรมได้ต่อไป

    โดยทาง Adobe กล่าวว่าจะไม่มีการพัฒนาโปรแกรมตัวนี้อีกแล้ว แต่จะยังคงปล่อยให้ใช้งานโปรแกรม  Adobe fuse ต่อไปให้นานที่สุด แต่เนื่องจากตัวโปรแกรมไม่สามารถทำงานได้ใน  Mac Os version Catalina

    ดังนั้น ตั้งแต่วันที่ 13 กันยายน 2562 ทางฝั่งผู้ใช้ mac ที่ update catalina จะไม่สามารถใช้งานได้แล้ว แต่ผู้ที่ยังใช้  mac version ก่อนหน้า ก็ยังสามารถใช้งานได้ ส่วนฝั่ง windows ก็ยังใช้ได้เหมือนเดิม

    ทั้งนี้ทาง Adobe ได้มีเว็บ Mixamo.com ซึ่งเปิดให้เข้าไปสร้าง  3D character แบบ ออนไลน์ ได้ฟรี รวมทั้งมีโมเดลต้นแบบต่างๆเตรียมไว้ให้ใช้ทดแทน Adobe fuse ครับ

     

     

    แหล่งข่าว https://theblog.adobe.com/an-update-on-adobe-fuse-as-adobe-moves-to-the-future-of-3d-ar-development/

    ติดตามบทความด้าน 3D ได้ที่นี่ https://mifasoft.com/category/article/3d/

  • Unity camera Orthographic size

    Unity camera Orthographic size

    Unity camera – Orthographic size คืออะไร

    ในการพัฒนาโปรแกรม 2D เราจะกำหนด camera projection เป็นแบบ Orthographic

    หลังจากนั้นเราจะกำหนดค่า size เพื่อย่อหรือขยาย 

     

     

    Camera size อยู่ที่ไหน

    Camera size จะแสดงในหน้าต่าง inspector เมื่อเราทำการเลือก camera object และกำหนดกล้องเป็นแบบ orthographic

    Screen Shot 2563-01-03 at 09.16.47.png
    Unity camera orthographic size จะแสดงเมื่อเลือก projection แบบ orthographic

    ทำไมต้องกำหนด camera size

    เนื่องจากว่าขนาดหน้าจอของอุปกร์มีความหลากหลาย ไม่ว่าจะเป็น iphone, ipad, android, pc mac ดังนั้นเราจึงต้องปรับ camera size หรือการซูมให้เหมาะกับอุปกรณ์ที่จะใช้กับโปรแกรม หรือถ้าเราจะเขียนโปรแกรมเพื่อแสดงได้กับหน้าจอหลายๆ ขนาด เราก็สามารถทำได้โดยเขียน script เพื่อปรับค่า camera sizeให้กล้องทำการ zoom ให้เหมาะกับแต่ละอุปกรณ์

    Screen Shot 2563-01-03 at 09.50.21.png
    Preview ในขนาดหน้าจอต่างๆกัน

    ถ้าเราไม่ทำการ zoom ภาพฉากหลัง บางอุปกรณ์ก็อาจจะแสดงภาพไม่ครบได้

    ติดตามบทความเกี่ยวกับ Coding ได้ที่นี่ >> https://mifasoft.com/category/article/coding/

    ติดตามความเคลื่อนไหวของ Mifasoft ได้ที่ facebook fan page : >> https://www.facebook.com/mifasoft

    Download Unity ไปลองหัดใช้ฟรี>> คลิกที่นี่เลยครับ

  • Cel shading การลงสีแนวการ์ตูน

    Cel shading การลงสีแนวการ์ตูน

    Cel shading หรือบางทีเรียกว่า toon shading เป็นการลงสีโดยที่ไม่ได้เน้นความสมจริง แต่จะใช้สีน้อยลง ลดการใช้ gradient และทำให้รูปภาพดูแบนๆ ลงหน่อย

    การลงสีแบบนี้ จะนิยมใช้ในการลงสีการ์ตูนต่างๆ

    ภาพจาก wikipedia

  • ASP.NET CORE WEB API ตอนที่ 2 การสร้าง Controller

    ASP.NET CORE WEB API ตอนที่ 2 การสร้าง Controller

    ASP.NET CORE WEB API ตอนที่แล้ว (ตอนที่ 1 การสร้างโปรเจ็ค) ได้ทดลองสร้างและ run เว็บแอปปลิเคชั่นในตอนนี้ จะเป็นการเพิ่ม controller เข้ามาในโปรเจ็ค ผลก็คือทำให้โปรเจ็คมี Path เพิ่มเติมขึ้นมาตามที่เราระบุ

    รู้จัก Controller กันก่อน

    Controller คือส่วนที่มีหน้าที่บริหารจัดการ request ที่ผู้ใช้งานติดต่อมายัง application ของเรา โดยการรับคำสั่ง (เช่นผู้ใช้งานพิมพ์ url ใน browser แล้วกด enter เพื่อเรียกเว็บ) แล้วทำงาน (Action) โดยอาจจะส่งไปหา Model หรือ View เพื่อส่งค่ากลับไปยังผู้ใช้งาน

    ขั้นตอนการสร้าง controller ใน ASP.NET CORE WEB API

    เพื่อให้เห็นภาพในการทำงาน เราจะทำการเพิ่ม controller เข้าไปยังโปรเจ็คที่เราเคยสร้างไว้ในตอนที่แล้ว โดยใน

    1. คลิกขวาที่ Folder controller จากนั้นเลือก Add controller

    2. เลือก API Read write

    3 กำหนดชื่อ โดยชื่อที่กำหนดนี้จะเป็นชื่อที่ใช้ใน URL และจะต้องมีคำว่า controller ต่อท้ายด้วย ในตัวอย่างกำหนดเป็น StudentsController

    4.ตอนนี้เราจะมีไฟล์ controller เป็นที่เรียบร้อยแล้ว

    5. ทำการ modify ข้อความสักเล็กน้อย

    6. รันโปรเจ็ค โดยกดปุ่ม ISS Express จากนั้นพิมพ์ url โดยระบุชื่อ controller ของเรา จะเห็นว่าโปรแกรมของเราจะคืนค่ามายังเว็บ browser แล้วครับ

    Controller กับ Application Path ใน ASP.Net CORE project

    การกำหนด path ของโปรแกรมนั้น จะกำหนดในไฟล์ controller โดยจะมี code [Route(“api/[controller]“)] ระบุอยู่

    ถ้าเราต้องการ Modify path ตามใจเรา เราก็แก้ไขตรงส่วนนี้ได้ เช่น แก้เป็น [Route[“myAPI/V2/[controller]”)] อย่างนี้เป็นต้น เมื่อผู้ใช้งานเรียกใช้ ก็ต้องระบุ path url เป็น http://localhost:/myAPI/V2/ชี่อcontroller ก็จะวิ่งไปหาไฟล์ controller ของเราได้ครับ

    วิธีเปลี่ยน controller ตั้งต้นหรือ url ตั้งต้น ของโปรเจ็คเรา

    หากเรารันโปรแกรมจะเห็นว่า มันจะวิ่งไปที่ https://localhost:44332/api/values เป็นที่แรก หากเราต้องการเปลี่ยนไปที่ controller ที่เราต้องการก็สามารถทำได้ โดยไปแก้ไขที่ไฟล์ launchSetting.json เป็นค่าที่เราต้องการได้ครับ

    สรุป

    สำหรับตอนนี้จะเห็นว่า เราได้ทำการเพิ่ม controller เข้ามายังโปรเจ็ค ซึ่ง controller มีหน้าที่ในการรับคำสั่งหรือรับ request จาก user แล้วนำมาประมวลผลหรือส่งต่อไปยัง view หรือ model เพื่อ ส่งค่าคืนกลับไปให้กับ user อีกทีครับ

    สำหรับตอนนี้ สวัสดีครับ

    ติดตามบทความเกี่ยวกับ coding ได้ที่นี่ https://mifasoft.com/category/article/coding/

    ติดตามความเคลื่อนไหน mifasoft ผ่านทาง facebook fan page : www.facebook.com/mifasoft

    ตอนที่ 9: Domain Event – เมื่อระบบธุรกิจขับเคลื่อนด้วยเหตุการณ์

    บทนำ ในระบบธุรกิจจริง หลายสิ่งไม่ได้เกิดขึ้นเพราะ “มีคนสั่ง” เสมอไป แต่เกิดขึ้นเพราะ เหตุการณ์บางอย่างได้เกิดขึ้นแล้ว เช่น: พนักงานผ่านทดลองงาน พนักงานลาออก เงินเดือนถูกปรับ แผนกถูกยุบ เหตุการณ์เหล่านี้คือหัวใจของแนวคิดที่เรียกว่า Domain Event ใน Domain-Driven Design (DDD) Domain …

    ตอนที่ 8: Repository ใน Domain-Driven Design – ทำไมไม่ใช่แค่ CRUD

    บทนำ เมื่อพูดถึงคำว่า Repository นักพัฒนาจำนวนมากมักจะนึกถึงไฟล์ที่มีแต่ create, read, update, delete แต่ใน Domain-Driven Design (DDD) นั้น Repository มีความหมายและบทบาทที่ลึกกว่านั้นมาก บทความตอนนี้จะอธิบายว่า Repository ใน DDD คืออะไร, …

    ตอนที่ 7: Application Service / Use Case – ตัวกลางระหว่างโลกธุรกิจกับโลกเทคนิค

    บทนำ หลังจากตอนที่ 6 เราได้รู้จัก Domain Service ซึ่งเป็นที่อยู่ของ business logic ที่ไม่ควรผูกกับ Entity ใดโดยตรง คำถามถัดมาที่มักจะตามมาคือ: แล้วโค้ดที่รับ request จาก UI, เรียก Domain Service, …

    Domain Service – เมื่อ logic ไม่ควรอยู่ใน Entity

    ตอนที่ 6 ของซีรีส์ Domain-Driven Design ฉบับระบบธุรกิจจริง Theme หลัก: ระบบบริหารพนักงาน (Staff / Employee Management System) ในตอนที่ 5 เราใช้ Aggregate เพื่อกำหนดขอบเขตและปกป้อง invariant …

    Aggregate & Aggregate Root – กำแพงป้องกัน Domain ไม่ให้เละ

    ตอนที่ 5 ของซีรีส์ Domain-Driven Design ฉบับระบบธุรกิจจริงTheme หลัก: ระบบบริหารพนักงาน (Staff / Employee Management System) หลังจากตอนที่ 4 เราแยก Entity และ Value Object …
  • ตัวเลือก Create a new ASP.Net Core Web Application

    ตัวเลือก Create a new ASP.Net Core Web Application

    ตัวเลือก Create a new ASP.NET Core Web Application อยู่ในหน้าต่างที่ขึ้นมาตอนที่เราสร้างโปรเจ็คใหม่ และมันมีหลายตัวเลือกให้เลือก เช่น Empty, API, Web Application, Web Application (Model-View-Controller) เป็นต้น

    ในตอนนี้เราจะมาดูกันว่า เราควรจะเลือกตัวไหนกันดีในแต่ละโปรเจ็คที่เราจะทำกันครับ

    ขั้นตอนการเข้าสู่หน้าจอเพื่อแสดง ตัวเลือก Create a new ASP.NET Core Web Application

    1 เปิดโปรแกรม Visual studio 2019 ขึ้นมา จากนั้นจะมีรายการโปรเจ็คที่เราเคยสร้างไว้ แสดงในหน้าแรก ให้เราทำการกดปุ่ม Create a new Project

    2. ที่ Create a new Project ให้เลือก ASP.Net core web application แล้วกด Next

    3 ใส่ชื่อโปรเจ็ค และกำหนด Directory จากนั้น กด Create

    4 เราจะเข้าสู่หน้าจอ Create a New ASP.net Core web application แล้ว

    ตัวเลือกที่มีหลังจากลงโปรแกรม Visual studio 2019 ใหม่

    ตัวเลือก

    คุณสมบัติและการใช้งาน

    Empty

    – สิ่งที่ได้ สร้างโปรเจ็คว่างๆ ขึ้นมาให้เรา โดยเราจะทำการเพิ่มไฟล์กำหนดโครงสร้างไฟล์ ด้วยตนเอง


    – การใช้งาน ต้องการกำหนดทุกอย่างด้วยตนเอง

    API

    – สิ่งที่ได้ ได้โปรเจ็คที่มีการวางโครงสร้างสำหรับการทำ API โดยจะมีการสร้างตัวอย่าง Controller ไว้ให้ สำหรับทำ Rest service


    – การใช้งาน ใช้สร้างโปรแกรมในส่วนของ Backend ซึ่งอาจจะสร้างแยกเป็นโปรเจ็คเดี่ยวๆ หรือจะเพิ่มเติมส่วนของ View เข้ามาภายหลังก็ได้

    Web Application

    – สิ่งที่ได้


    ได้โปรเจ็คที่มี Razor page ติดมาด้วย ซึ่งจะมี sturcture ของ folder แบบ Webform ไม่ได้แบ่งออกเป็น model view controller แต่จะรวมหน้า .chtml ไว้ที่ folder page


    – การใช้งาน


    ใช้สร้างโปรเจ็คที่ส่วนของ Front end + back end อยู่ในโปรเจ็คเดียวกัน


    ใช้สร้าง web ใน ไสตล์ Webform โดยที่ไม่ได้แบ่งโครงสร้างออกเป็น Model view controller

    Web Application (Model-View-Controller)

    – สิ่งที่ได้ ได้โปรเจ็คที่มีโครงสร้างแบบ Model – View – Controller (MVC)


    – การใช้งาน ใช้สร้างโปรเจ็คที่ใช้โครงสร้างแบบ MVC โดย Frontend กับ Backend อยู่ในโปรเจ็คเดียวกัน

    ข้อควรคำนึงก่อนการเลือกใช้งาน

    การสร้าง Web application โดยทั่วไปจะแบ่งออกเป็น 2 ส่วนคือ

    Back end ส่วนหลังบ้าน จะให้บริการข้อมูลต่างๆ แล้วเชื่อมต่อไปส่วนหน้าบ้าน

    Front end ส่วนหน้าบ้าน จะเป็นส่วนแสดงหน้าจอให้ผู้ใช้งาน

    Webform vs MVC : MVC คือการแบ่งส่วนของไฟล์ sourcecode โปรเจ็คออกเป็น Model view และ controller ซึ่งจะมีความซับซ้อนกว่า ลักษณะของ Webform

    แล้วเลือกอะไรดี

    ถ้าต้องการทำทุกอย่างเอง กำหนดเอง เลือก Empty

    ถ้าจะทำโปรเจ็ค Back end เลือก API (หรือทำ Backend ก่อนแล้วจะมาเพิ่มส่วน front end ในภายหลัง) โดยจะได้ folder controllers และไฟล์ต่างๆ ที่เหมาะกับการทำ API มาให้

    ถ้าจะทำโปรเจ็คที่มี Back end + Front end ในโปรเจ็คเดียวกัน หรือทำไสตล์ Webform ไม่ได้แยกเป็น MVC เลือก Web application

    ถ้าจะทำเว็บแบบ MVC ให้เลือก Web application (Model+View+Controller)

    สรุป

    สำหรับ Template ที่มีให้นั้นก็จะอำนวยความสะดวกในตอนเริ่มต้นการสร้างโปรเจ็ค ช่วยลดขั้นตอนการสร้าง folder หรือ หน้า page ต่างๆ

    ทั้งนี้ แต่ละ template ก็ไม่ได้จำกัดว่าเราจะต้องสร้างตามที่กำหนดมาให้เท่านั้น เราสามารถมาปรับเปลี่ยนในภายหลังได้เช่นกัน

    สำหรับตอนนี้ก็หวังว่าผู้อ่านจะเห็นภาพในการเลือกตัวเลือกต่างๆในการสร้างโปรเจ็คเริ่มต้นนะครับ แล้วพบกันใหม่ตอนหน้า ตอนนี้ สวัสดีครับ

    ติดตามบทความเกี่ยวกับ Coding ได้ที่นี่ >> https://mifasoft.com/category/article/coding/

    ติดตามความเคลื่อนไหวของ Mifasoft ได้ที่ facebook fan page : >> https://www.facebook.com/mifasoft

  • การดู Backlink ของ website ใน SEMRush

    การดู Backlink ของ website ใน SEMRush

    การดู Backlink ของ website ใน SEMRush จะอยู่ในส่วนของ Domain analytic แล้วเลือก Menu backlink ซึ่งเราสามารถใส่ชื่อเว็บไชต์ที่เราต้องการดูรายงาน Backlink แล้วกด search

    SemRush จะแสดงข้อมูลต่างๆ เพื่อให้เรานำไปใช้ในการวิเคราะห์และปรับปรุงเว็บของเราในการทำ SEO

    ในตอนนี้เราจะมาศึกษาขั้นตอนการดูข้อมูล Backlink กันครับ

    ขั้นตอนดู Report

    1 ไปที่เมนู Domain analytics > Backlinks จากนั้นใส่ชื่อเว็บไซต์ของเรา หรือชื่อเว็บไชต์อื่นๆที่เราต้องการศึกษา ลงไปยังช่อง search จากนั้น คลิกปุ่ม search

    2 SEMRush จะแสดงหน้า Overview เป็นหน้าแรก พร้อมแสดงข้อมูลต่างๆ ให้เราได้นำไปใช้วิเคราะห์

    การอ่านผล

    การอ่านผลนั้นจะมีข้อมูลสำคัญๆ ที่เราจะใช้เป็นพื้นฐานดังนี้

    1. Total Backlins, Referring Domains, Referring IPs, Authority Score

    ค่าทั้ง 4 ตัวมีความหมายดังนี้

    1.1 Total Backlinks คือ จำนวน Backlink ที่ชี้มาทั้งหมด

    1.2 Referring Domains คือจำนวน Domain ที่ชี้มายัง website โดยนับ 1 แต้มต่อ 1 Domain ไม่ว่าจะมีกี่ Link ก็ตาม

    1.3 Referring IPs คือ จำนวน IPs ที่ชี้มายัง website 1 แต้มต่อ 1 IP

    1.4 Authority Score : คือค่าคุณภาพของ web โดยรวม บอกถึงความแข็งแกร่งและความนิยม โดยคำนวณจาก คุณภาพของ Backlink, Organic search และ traffic data

    โดย authority score นี้มีค่า 0-100 ยิ่งสูงยิ่งดี

    การใช้งานเราจะวิเคราะห์ที่ตัว authority score เป็นหลัก โดยดูคุณภาพโดยรวม ว่าเว็บไซต์มีกลยุทธ์อย่างไร จำนวน backlink เท่าไร visit เท่าไร เพื่อให้เราเปรียบเทียบเรากับคู่แข่ง เพื่อวางแผนในการพัฒนาเว็บของเราครับ

    2 กราฟ New and Lost backlinks

    กราฟจะแสดงข้อมูว่า ในช่วงเวลาที่แสดง เว็บไซต์ที่เราทำการวิเคราะห์ มี Backlink เพิ่มขึ้นเท่าไร ลดลงเท่าไร ทำให้เราสามารถวิเคราะห์พฤติกรรมของเว็บไชต์ที่เรากำลังศึกษาได้ เช่น ในกรณีที่เรากำลังศึกษาเว็บของคู่แข่ง แล้วเห็นว่าคู่แข่งมี backlink หายไป เราอาจจะวางแผนที่จะไปเอา backlink นั้นมาเป็นของเราก็ได้

    3. กราฟ Backlink type

    กราฟนี้จะบอกว่า Backlink มาจากส่วนประกอบอะไร แยกเป็น Hyperlink, image, form, frame เป็นต้น โดยข้อมูลนี้เราจะนำมาวิเคราะห์เช่น กรณีที่เราทำเว็บเกี่ยวกับสินค้า มีรูปสินค้า เราก็น่าจะคิดหาวิธีเพิ่ม backlink ที่เป็น image เป็นต้น

    4 Follow vs Nofollow

    คำว่า follow หรือ No follow คือการบอก search engine ว่า ในเว็บไชต์ที่เราทำการวิเคราะห์อยู่นั้น เวลาที่ user คลิก Link แล้วไปยังเว็บไซต์อื่นๆ จะให้ตัว bot ของ search engine ตาม link นั้นไปหรือไม่

    Follow หรือ No follow นั้น webmaster จะกำหนดค่าใน code html

    กรณีที่ webmaster จะกำหนด เป็น No follow เช่น เว็บบอร์ด ที่ user สามารถ post ข้อความได้ ตรงนี้ก็จะมี user บางคนมักจะมาฝาก link โพสต์ Link ไว้ ดังนั้น webmaster ก็จะกำหนดให้เป็น No follow เพื่อให้ไม่มีผลกระทบต่อ SEO ของ web เป็นต้น

    สำหรับกราฟตัวนี้ใช้เพื่อดูสถานะของ Follow และ No follow โดยจุดมุ่งหมายคือ เราจะต้องพยายามเพิ่ม Follow backlink ให้มากขึ้นครับ

    5 TLD Distribution

    คือการแบ่งประเภทของเว็บไชต์ที่ชี้มา ว่ามี Domain นามสกุลอะไร โดยถ้าได้ backlink ที่มาจากรัฐบาล เช่น .gov, .edu ถือว่าเป็นประโยชน์กับเว็บเราครับ

    6 Country

    ใช้ดูว่า Backlink มาจากประเทศอะไรบ้าง ตัวนี้จะวิเคราะห์คู่แข่งได้เช่น กรณีที่มี backlink จากประเทศที่ไม่ได้เกี่ยวข้องกับ website อาจจะคาดเดาได้ว่าคู่แข่งของเรามีการซื้อ backlink ราคาถูกเพื่อชี้มายัง web เป็นต้น

    7. Top anchors and Anchors term

    ตัวนี้จะบอกว่า keyword หรือ term อะไรที่ backlink ชี้มายังเว็บ ซึ่งมักจะเกี่ยวกับสินค้าหรือบริการของเว็บที่เราทำการวิเคราะห์

    ตัวอย่างเช่น กรณีที่เราวิเคราะห์คู่แข่ง เราก็ดูตัว Term ต่างๆ เราก็คาดเดาได้ว่า คู่แข่งมีการโปรโมทสินค้าอะไร ใช้วิธีการแบบไหน เป็นต้น

    (Note : Top anchor Terms ยังเป็น beta version นะครับ ซึ่งจะยังไม่แสดงถ้าเว็บไซต์นั้นเป็น เว็บที่มี backlink สูงๆ เช่น amazon)

    8 Domain score, Trust Score

    ค่านี้จะแสดงถึงจำนวน Backlink ที่ชี้มายัง Domain โดยค่าจะมีการอัพเดตเปลี่ยนแปลงอยู่ตลอดเวลา

    (SEMRush สมัยก่อน แสดงไว้ในหน้า overview แต่ ณ ปัจจุบันวันที่เขียน ไม่ได้ถูกแสดงแล้ว แต่ยังสามารถดูได้ และได้ถูกนำไปใช้ในการคำนวน Authority score) 

    ความหมายของสองค่านี้คือ

    Domain score = จำนวนของ Backlink ที่ชี้มายัง domain name นี้

    Trust score = คือจำนวนของ Backlink จาก trust website

    ข้อมูลสองส่วนนี้มีความสัมพันธ์กัน ในกรณีที่ Trust score มีค่าต่ำกว่า Domain score มากๆ อาจจะคาดเดาว่า Backlink ที่ชี้มายัง Domain เป็น Backlink ที่ไม่ดี

    สรุป

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

    สำหรับตอนนี้ สวัสดีครับ

    Reference

    ทดลองใช้งาน SEMRush : SEMRush Free Trial

    Follow No Follow article : https://searchengineland.com/infographic-nofollow-tag-172157

    ติดตามบทความด้านการทำเว็บไซต์ได้ที่นี่ : https://mifasoft.com/category/article/web/