Search
Angular (以前稱Angular 2) 允許你使用 TypeScript / JavaScript 的能力開發很棒的 Web 應用程式。是否使用 Angular 知識來建構 Web 應用程式也可以編譯成在任何 iOS 或 Android 設備上運行的原生手機應用程式？
Ionic 框架允許你這樣做！使用你現有的 Angular 、HTML、JS和 CSS 知識，並建構你的原生手機應用程式！
https://softnshare.com/ionic-2-the-practical-guide-to-building-ios-android-apps/
🔥 "อยากสร้างแอปบนมือถือ เริ่มต้นยังไง ? มีทางเลือกอะไรบ้าง ? มาดูไปพร้อมกันเลยย" 🔥
.
สำหรับวันนี้แอดและทีมงานได้สรุปภาพรวมของการสร้างแอปมือถือ 1 ตัว ว่าสามารถใช้อะไรในการพัฒนาได้บ้างนะ ?
.
เพราะปัจจุบันได้ยินมาเยอะแยะหลายรูปแบบจนชวนปวดหัวไปหมดดด
.
ซึ่งวันนี้จะมาอธิบาย สรุปแต่ละตัวว่าแตกต่างกันยังไง ทั้ง Native Apps, Mobile Web Apps, Hybrid Apps, Progressive Web Apps, React Native Apps และสุดท้าย Xamarin Native Apps <3
ถ้าพร้อมแล้วมาเริ่มที่ตัวแรกกันเลยย
.
✅ Native Apps ⭐
.
App ที่เน้นไปที่การพัฒนามาเพื่อใช้กับอุปกรณ์ใดอุปกรณ์ชนิดใดชนิดหนึ่งเท่านั้น App ชนิดนี้จะเข้าถึงทรัพยากรที่จำเป็นในการใช้งานของอุปกรณ์นั้นๆได้อย่างมีประสิทธิภาพ
.
ทำให้ App ที่ออกมาเร็ว และมีฟังก์ชันที่หลากหลาย แต่ก็มีข้อเสียคือไม่สามารถใช้งานกับอุปกรณ์ชนิดอื่นได้ เช่น App สำหรับ Android ไม่สามารถใช้กับ iOS ได้ และมี cost ในการพัฒนาที่สูง
.
ตัวอย่างเทคโนโลยี
iOS: Xcode, Swift, Objective-C
Andorid: Java, Kotlin,
.
✅ Mobile Web Apps ⭐
.
App ที่พัฒนาเหมือนการพัฒนา Website ที่แสดงผลบน browser แต่เน้นในการที่สามารถใช้บนอุปกรณ์มือถือได้อย่างมีประสิทธิภาพ
.
App ประเภทนี้การพัฒนาจะมีราคาถูกกว่า Native และใช้ได้หลาย platform แต่ก็แลกกับการที่มีฟังก์ชันน้อย เพราะไม่สามารถเข้าถึงทรัพยากรในเครื่องได้เท่า Native เช่น กล้องถ่ายรูป และต้องใช้ internet ในการเข้าถึง
.
ตัวอย่างเทคโนโลยีที่ใช้
HTML, CSS, Javascript, JQuery, Ruby
.
✅ Hybrid Apps ⭐
.
App ที่เป็นส่วนผสมระหว่าง Mobile Web App และ Native Web App โดยจะสามารถใช้ทรัพยากรในเครื่องได้เหมือน Native และแสดงผลเหมือน Website เหมือน Mobile Web App
.
โดยจะเป็น application ที่สามารถติดตั้งผ่าน store ได้เลย และสามารถรันข้าม platform ได้ แต่ความสามารถก็จะไม่เท่า native และราคาไม่ถูกเท่ากับ Mobile App และยังต้องใช้ internet ในการเข้าถึงอยู่
.
ตัวอย่างเทคโนโลยีที่ใช้
HTML, CSS, Javascript, Cordova, Ionic
.
✅ Progressive Web Apps ⭐
.
App ที่คล้ายกับ Mobile Web App โดยมีแนวคิดว่าเป็น Application ที่ผู้ใช้งานไม่จำเป็นต้องติดตั้งและขอ permission ผ่าน store และสามารถทำงานได้เหมือน Application ทั่วไป โดยเราสามารถเข้าถึงได้ผ่าน browser เหมือน Mobile App
.
และสามารถเซฟเก็บมาเป็น App ปกติได้ โดยไม่จำเป็นต้องติดตั้งผ่าน store บาง App สามารถเขียนให้ App เก็บ Cache ไว้ล่วงหน้าและสามารถรันได้โดยที่ไม่ต้องใช้ Internet เลยก็ได้
.
ตัวอย่างเทคโนโลยี
HTML, CSS, Javascript, JQuery
.
✅ React Native Apps ⭐
.
App ที่สร้างจาก framework JavaScript ที่ชื่อ React Native เป็นหลัก ซึ่งเป็น framework ที่พัฒนามาจาก React Js ที่เน้นการสร้าง Website มาต่อยอดเพื่อสร้างเป็น mobile App
.
โดยสามารถใช้ข้อดีจากการใช้ภาษา JavaScript และ component ของ React มาสร้างเป็น mobile app และสามารถใช้งานข้าม platform ได้
.
ตัวอย่างเทคโนโลยี
HTML, CSS, Javascript, ReactJs
.
✅ Xamarin Native Apps ⭐
.
App ที่สร้างจากเครื่องมือในการสร้าง mobile apps ชื่อ Xamarin ซึ่งรองรับการสร้าง mobile apps ข้ามแพลทฟอร์ม โดยเราสามารถใช้ภาษา C# ในการเขียน และตอน compile จะทำการเปลี่ยนให้เป็น Native Apps
.
ตัวอย่างเทคโนโลยี
C#, .net framework, Xamarin
.
⚡️ สุดท้ายนี้แอดอยากจะบอกว่า
.
"ไม่มีตัวไหนดีที่สุดหรอกฮะ ขึ้นกับประเภทของงานเราล้วน ๆ ถ้าประหยัด ไว ๆ ไปได้ทั้งหมดอาจจะเป็น Web App แต่นั่นแหละ ก็ไม่สามารถตอบโจทย์ในการใช้สิทธิ์บางอย่าง หรือ ความเร็วในการใช้งาน"
.
เหมือนในบทเพลง เพลงนึงที่เคยกล่าวไว้ว่า
.
"ได้..อย่าง.. ก็ต้องเสีย..อย่าง.." 😂
.
#BorntoDev - 🦖 Coding Academy ให้การพัฒนาเทคโนโลยีเป็นเรื่องง่ายสำหรับทุกคน
評價4.9分的課程. 上完本課程也將實際用ReactJS做過十個專案，且你將免費獲得這些專案的Royal Free 原始碼，應用到工作上。 這是堂物超所值的課。 (本課程不適合JavaScript的新手，基本上你需要懂object oriented js、es6 、 dom javascript、 html 以及 css。 原價NT1400, 現在可以NT300取得. )
React 兩種使用CSS方法一、在檔案中寫寫css的第一個作法Header.js import React from "react"; class Header extends... ... <看更多>
React 有兩種方法將CSS 套用，一種是外部新增一個CSS 檔再引入，另一個作法是在標籤內撰寫inline sttyle，下列範例我將子元件 Person.js 使用外部CSS ... ... <看更多>
reactjs css 在 Styling and CSS - React 的相關結果
如何在Component 中加入CSS Class？ 傳遞一個string 作為 className 的prop：. render() { return <span className="menu navigation-menu">Menu</span> }. ... <看更多>