Posted on Leave a comment

React.StrictMode คืออะไร? มาทำความรู้จักกัน

react-v1
react-v1

จะเห็นว่าช่วงหลังๆ React มีการเพิ่ม Component ใหม่เข้ามาในโปรเจค โดยเฉพาะคนที่ใช้ createi-react-app ในการสร้างโปรเจค จะเห็นเลยว่าในไฟล์ index.js มีการเพิ่ม Component ประหลาดเข้ามาชื่อ <React.StrictMode>

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

มันมีความสำคัญยังไง? ทำไมถึงเอามาครอบตั้งแต่ App Component?

มาทำความเข้าใจกับมันกันครับ

คุณครูมาตรวจแล้ว!

หน้าที่หลักของ <React.StrictMode> คือการช่วยเราตรวจสอบการใช้งาน React ที่ไม่เหมาะสมครับ คล้ายๆ กับคุณครูฝ่ายปกครองมาเดินตรวจความเรียบร้อยของพวกเรานี่แหละ

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

React.StrictMode เป็นตัวตรวจสอบการใช้งาน code ของเราว่าเหมาะสมหรือไม่ และให้คำแนะนำ แถมทำงานเฉพาะในโหมดพัฒนา (Development Mode) และไม่ทำงานใน Production จ้า

โดยหน้าที่หลักในปัจจุบันของ <React.StrictMode> มีดังนี้

ตรวจจับการใช้งาน Context API แบบเก่า และให้คำแนะนำในการแก้ไข (ดูการใช้งาน Context API แบบใหม่ที่นี่)

ตรวจจับผลของ Side-effect ที่ไม่เหมาะสมจากการเขียนใช้งาน Lifecycle Method

แจ้งเตือน หากตรวจจับการใช้งาน findDOMNode ที่กำลังจะปลดระวางการใช้งาน และให้คำแนะนำในการแก้ไข

แจ้งเตือน หากตรวจจับการใช้งาน String Ref API แบบเก่า และให้คำแนะนำในการแก้ไข (ดูการใช้งาน createRef API แทนที่นี่)

ตรวจจับการใช้งาน Lifecycle ที่ไม่เหมาะสม

วิธีใช้ React.StrictMode

ดังนั้นหากต้องการตรวจสอบการทำงานของโค้ดเรา เพื่อปรับปรุงให้ทันสมัยขึ้น เราก็ใส่ React.StrictMode ในครอบ Component ที่เราต้องการได้ เช่น

 <React.StrictMode>
    <NextflowComponent />
  </React.StrictMode>,

หรือถ้าเกิดเราสร้างโปรเจคใหม่โดยใช้ create-react-app มันก็จะใส่มาที่ตั้งแต่ ReactDOM.render() ในไฟล์ index.js เลย

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ติดตามเทคนิคดีๆ แบบนี้ ได้ทางช่องทางด้านล่าง และดูคอร์สเรียนโปรแกรมที่น่าสนใจได้เลยจ้า

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

คอร์สออนไลน์เริ่มต้นสร้าง Mobile App ด้วย Google Flutter

เหมาะผู้เริ่มต้น และนักพัฒนาเว็บ, เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

อ้างอิง – React Documentation

Posted on Leave a comment

วิธีใช้ Firebase Hooks ใน Ionic React

หลังจากที่ Ionic รองรับการเขียน React ก็มีตัวอย่างโปรเจคสาธิตออกมามากมาย พลไปเจอตัวอย่างหนึ่งของการทำ Firebase Hooks กับตัว Ionic React มาสรุปเป็นภาษาไทยให้ได้ลองกันครับ

รู้จักกับ React Hooks ก่อน

React hooks เป็นกลไกล่าสุดในจักรวาล React ที่ทำให้เราสามารถใช้งาน State และกลไกอื่นๆ ของ React ได้โดยไม่ต้องเขียนในรูปแบบของ Class Component

ตอนเราเขียน Component จะเห็นว่า เรามีการเขียนแบบ Function และแบบ Class

เขียน React Component แบบ function

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

เขียน React Component แบบ Class

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ซึ่งก่อนการมาถึงของ React Hooks แบบ Class จะได้รับความนิยมมากกว่า เพราะสามารถจัดการ State และกลไกอื่นๆ ได้ในรูปแบบที่ค่อนข้างง่ายกว่าแบบ Function

และ React Hooks เกิดมาเพื่อคืนความเรียบง่ายของ React Component สู่รูปแบบของ Function นั่นเอง ดังนั้นไม่มีการบังคับว่าเราชอบเขียนแบบ Function หรือแบบ Class อีกต่อไปครับ

แต่สไตล์ของ React Hooks ก็จะแหวกแนวจากแบบ Class ไปเลยนะ

แล้ว hooks ที่สร้างขึ้นใช้เอง ก็จะเรียกว่า Custom Hooks ครับ Firebase hook ก็เป็นหนึ่งใน custom hooks ของเราวันนี้

เริ่มต้นใช้ Firebase Hooks

อย่างแรกคือ เราต้อง Import และ setup ตัว custom hooks และ Setup ให้เรียบร้อย

// custom hook that will upload to firebase
import useFirebaseUpload from "../hooks/useFirebaseUpload";


// setting up the hook to upload file and track its progress
const [ { data, isLoading, isError, progress }, setFileData ] = useFirebaseUpload();

จากนั้นใน parent component เราจะทำการดึงเอา

  1. error ที่อาจเกิดขึ้นระหว่าง upload file
  2. สถานะของการอัพโหลดไฟล์
<IonContent>
  {/* get error from hook and display if necessary */}
  {isError && <div>ERROR: {isError.message}</div>}

  {/* get loading info from hook & display progress if necessary */}
  {isLoading && progress && (
    <IonProgressBar value={progress.value}></IonProgressBar>
  ) }
</IonContent>

ส่วนสุดท้ายของ Component จะเป็นตัวแบบฟอร์มสำหรับกดอัพโหลดไฟล์ จะใช้ hook function ที่ชื่อ setFileData() ที่เรา setup ไว้ตอนแรกนั่นเอง

{/* user selects a file and returns the info required for upload */}
  <input
    type="file"
    onChange={(e: any) => setFileData(e.target.files[0])}
  />

กลไกของ Firebase File Upload Hook

วิธีใช้งาน File Upload ของ Firebase Hook เราจะตั้งค่าที่จำเป็นต่างๆ ของ Firebase ให้เรียบร้อย

วิธีการตั้งค่าส่วนนี้ สามารถดูได้จากคำแนะนำวิธีใช้งาน Firebase ครับ

import { useState, useEffect } from "react";
import firebase from "firebase";

var firebaseConfig = {
// ADD YOUR FIREBASE CONFIGURATION
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// the firebase reference to storage
const storageRef = firebase.storage().ref();

และในที่นี้เราใช้งาน typescript เราต้องมีการกำหนด interface สำหรับใช้ใน hook เพื่อกำหนดเป็น type ของค่าที่ return ออกมาจาก hook ครับ

interface UploadDataResponse { metaData: firebase.storage.FullMetadata, downloadUrl: any };
interface ProgressResponse { value: number }

function FirebaseFileUploadApi(): [{
    data: UploadDataResponse | undefined,
    isLoading: boolean,
    isError: any,
    progress: ProgressResponse | null
},
    Function
] { //additional code... }

จากนั้นเราจึงไล่กำหนดค่า state ที่ต้องใช้ใน hook

// the data from the firebase file upload response
const [data, setData] = useState<UploadDataResponse | undefined>();

// sets properties on the file to be uploaded, this is called
// by the parent component
const [fileData, setFileData] = useState<File | null>();

// if we are loading a file or not
const [isLoading, setIsLoading] = useState<boolean>(false);

// if an error happened during the process
const [isError, setIsError] = useState<any>(false);

// used for tracking the % of upload completed
const [progress, setProgress] = useState<ProgressResponse | null>(null);

การประยุกต์ใช้ useEffect

useEffect จะทำงานทุกครั้งหลังจาก Component ถูก render เราจึงสามารถควบคุมลำดับการ render นี้ได้ด้วยการกำหนด array เป็น parameter ตัวที่ 2

ในที่นี้ custom hook ของเรา ต้องการให้ทำงานเฉพาะตอนที่ค่า fileData เปลี่ยน นั่นหมายถึงผู้ใช้ต้องเลือกไฟล์ในการอัพโหลด และเราสามารถตรวจจับการทำงานนี้ได้โดยการเรียกใช้ Method ชื่อ setData

// this function will be called when the any properties in the dependency array changes
useEffect(() => {
    const uploadData = async () => {
        // initialize upload information
        setIsError(false);
        setIsLoading(true);

        setProgress({ value: 0 });

        if (!fileData) return;

        // wrap in a try catch block to update the error state
        try {
            let fName = `${(new Date()).getTime()}-${fileData.name}`

            // setting the firebase properties for the file upload
            let ref = storageRef.child("images/" + fName);
            let uploadTask = ref.put(fileData);

            // tracking the state of the upload to assist in updating the
            // application UI
            //
            // method details covered in the next section...
            uploadTask.on(
                firebase.storage.TaskEvent.STATE_CHANGED,
                _progress => { },
                _error => { },
                async () => { }
            );
        } catch (_error) {
            setIsLoading(false);
            setIsError(_error);
        }
    };

    fileData && uploadData();
}, [fileData]);

การจัดการสถานะของ State ของ File Upload ใน Firebase

ตอนที่เราเรียกใช้ ref.put(fileData) จะมีการคืนค่าที่เราสามารถใช้เช็คสถานะของการอัพโหลดไฟล์ได้

ตัวแปรที่คืนกลับมาให้เรานี้ สามารถเช็คได้ทั้ง error, สถานะการอัพโหลด, หรือการอัพโหลดที่เสร็จสมบูรณ์

ใน custom hooks ของเรานี้ มีการใส่ handler สำหรับเหตุการณ์ดังกล่าวแต่และแบบเอาไว้ และทำให้สามารถเข้าถึงได้จากตัว hook เอง

เช่นในที่นี้เรามีการเรียกใช้ Firebase ที่ชื่อ uploadTask.snapshot.ref.getDownloadURL() ที่จะทำให้เราได้ URL มาแสดงผลเป็นภาพในแอพพลิเคชั่นของเรา

// tracking the state of the upload to assist in updating the
// application UI

uploadTask.on(
    firebase.storage.TaskEvent.STATE_CHANGED,
    _progress => {
        var value =
            (_progress.bytesTransferred / _progress.totalBytes);
        console.log("Upload is " + value * 100 + "% done");
        setProgress({ value });
    },
    _error => {
        setIsLoading(false);
        setIsError(_error);
    },
    // completion handler
    async () => {
        setIsError(false);
        setIsLoading(false);

        // need to get the url to download the file
        let downloadUrl = await uploadTask.snapshot.ref.getDownloadURL();

        // set the data when upload has completed
        setData({
            metaData: uploadTask.snapshot.metadata,
            downloadUrl
        });

        // reset progress
        setProgress(null);
    }
);

สรุป

น่าจะเห็นวิธีการอีกแบบในการใช้ Custom Hooks ใน React อีกแบบนะครับ ตัวอย่างนี้ค่อนข้างให้ภาพชัดเจนในการเรียกใช้บริการของ Firebase ในส่วนของ File Upload มาใช้ใน Custom Hook ของเราเอง

ติดตามเรื่องใหม่ๆ ได้ตามช่องทางต่อไปนี้ครับ

อ้างอิง – Ionic Blog, Github Repo 1 (Full version), Repo 2 (File upload hook only)

Posted on Leave a comment

React Native: โค้ดที่ต้องเปลียนใน react-navigation 4.x

ไม่นานมานี้ทางทีมพัฒนา React-navigation ได้ทำการอัพเดต Node package ขอตัวเองเป็นเวอร์ชั่น 4.x ครับ

มีความยืดหยุ่นมากขึ้น แต่ก็มีการเปลี่ยนแปลงโครงสร้างของ Package เหมือนกัน ทำให้เราอาจจะต้องมา recode กันอีกรอบ

พอดีโค้ชพลเจอมาส่วนหนึ่ง ขอเอามาแชร์ไว้ในนี้

แยก Navigator ไปไว้ใน package ของตัวเอง

ยกตัวอย่างเช่น createStackNavigator ที่ปกติเราสามารถนำมาใช้จาก react-navigation ตรงๆ ได้แบบด้านล่าง

import { createStackNavigator } from 'react-navigation';

ก็มีการแยกไปที่ react-navigation-stack แทน

import { createStackNavigator } from 'react-navigation-stack';

ดังนั้นถ้าใช้ react-navigation 1.4+ แล้วต้องเปลี่ยนหน่อยนะครับ

วิธีแก้ Error: react-navigation-stack does not exist in haste module map

ซึ่งหลังจากการติดตั้ง react-navigation-stack ในโปรเจค React Native ที่ใช้ Expo ทำให้เกิด Error ดังด้านล่าง

Error: react-navigation-stack does not exist in haste module map

ให้แก้โดยรันคำสั่งด้านล่าง แล้วค่อยเริ่มใช้งาน expo start ใหม่ครับ (อ้างอิง)

expo r -c

วิธีแก้ Warning: Accessing view manager configs directly off UIManager via UIManager[‘getConstants’] is no longer supported.

แล้วสำหรับใครที่ปรับแล้ว ขึ้น warning ด้านล่างนี้ ใน Expo

Accessing view manager configs directly off UIManager via UIManager['getConstants'] is no longer supported. Use UIManager.getViewManagerConfig('getConstants') instead.

สามารถแก้ไขได้ดังนี้ครับ (อ้างอิง)

// อัพเกด expo กันก่อน
$ npm install -g expo@latest

// ลบ node_modules และ package-lock.json เพื่อความชัวร์
$ rm -rf node_modules package-lock.json

// เช็คดูว่า เรามี `react-native-gesture-handler` อยู่ไหม ถ้ามีก็ลบออก
$ cat package.json | grep react-native-gesture-handler

// ใช้ expo ติดตั้ง เวอร์ชั่นที่เหมาะสม (expo จะเซ็ตค่าไว้อยู่แล้ว
$ expo install react-native-gesture-handler

// เริ่มรันโปรเจคด้วย Expo แบบไม่โหลด cache เก่ามาใช้งาน 
$ expo start --clear

สนใจเริ่มต้นเรียนรู้ React + Redux เข้าใจง่าย ดูด้านล่างเลย

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

Posted on Leave a comment

React Native: วิธีการ debug โปรเจค Expo ด้วย Visual Studio Code

ปัจจุบันเครื่องมือในการใช้พัฒนา Mobile Application ด้วย React Native รุดหน้าไปมาก

รวมถึง Visual Studio Code ที่สามารถเชื่อมต่อกับ Expo และ React native เพื่ออำนวยความสะดวกในการค้นหา และ debug ตัวแอพของเราทั้ง iOS และ Android

วันนี้โค้ชพลจะมาแนะนำการตั้งค่า Visual Studio Code ให้รองรับการ Debug กับแอพที่สร้างด้วย React Native กันครับ

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

1. ติดตั้ง VSCode Extension ก่อน

ในที่นี้เราจะลงเครื่องมือสำคัญก่อน ก็คือส่วนเสริมของ Visual Studio Code ของเรานั่นเอง ชื่อว่า:

React Native Tools โดย Microsoft (นั่นเอง เอง เอง)

2. สร้าง Launch configuration file

  1. จากนั้นให้เข้าไปที่ส่วน Debug
  2. และเลือก Add Configuration…

จากรายการให้เลือก Chrome หรือ Node อย่างใดอย่างหนึ่งก่อน เพื่อให้มีการสร้างไฟล์ที่ชื่อ launch.json ขึ้นมา

อย่างของโค้ชพลจะเลือก Chrome จะได้ประมาณด้านล่าง

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

และจริงๆ เราสามารถลบส่วนนี้ออกจากไฟล์ได้ เพราะมันสร้างขึ้นมาให้เป็นโปรไฟล์การ debug เริ่มต้นเท่านั้นเอง

// ส่วนนี้ลบออกได้
{
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
}

3. กำหนด Launch Profile เป็น React Native: Attach to Packager

จากนั้นให้กดเลือก Add Configuration… อีกครั้งครับ

แล้วจากรายการที่แสดงขึ้นมาในไฟล์ launch.json ให้เราเลือก React Natiive: Attach to Packager

จะมีการใส่โค้ด profile เข้าไปแบบนี้

    "configurations": [
        {
            "name": "Attach to packager",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "attach"
        }
    ]

4. กำหนดค่า port ของ React Native Tools

ในที่นี้ตอนเรารันแอพพลิเคชั่นด้วยคำสั่ง expo start จะมีการรันระบบที่เรียกกันว่า packager หรือที่ Expo จะแสดงเป็นชื่อว่า Metro Bundler

ให้สังเกตดูหมายเลข port ของ Packager ดีๆ (ส่วนสีเขียว ไม่ใช่ส่วนสีแดง) เราจะต้องเอาส่วนนี้มาใส่ใน VSCode

จากนั้นให้เราเปิด User Setting ขึ้นมา โดยการคลิกปุ่มรูปเฟืองที่อยู่ด้านล่างซ้าย

จากนั้นให้ค้นหา Setting ของ React Native Tools

  1. ค้นหาด้วย keyword: react native package
  2. ใส่เป็นหมายเลข port ของ packager

5. ทดสอบใช้งาน Debugger

ดังนั้นเมื่อทุกอย่างพร้อมแล้ว ก็ให้เราทำการเริ่มการทำงานของ Expo server โดยรันคำสั่งผ่าน Terminal ในโปรเจค

expo start

พอรันทุกอย่างขึ้นมาแล้ว (รวมถึง iOS Simulator หรือ Android Emulator) ให้เราทดลองวาง Breakpoint และรัน Debugger ขึ้นมา ก็สามารถใช้งานได้แล้ว

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

Posted on Leave a comment

React Native: วิธีแก้ error ‘getCurrentUserAsync’ of undefined ในการ debug แอพด้วย VSCode

ในการทำแอพด้วย React Native แน่นอนว่าเราอาจจะทำ TDD แล้ว แต่ถ้าเกิดเราต้องการ debug ตัวโค้ดของโปรเจคเราด้วย VSCode ได้ ก็คงจะดีไม่น้อยใช่ไหม

โค้ชพลก็คิดเหมือนกันครับ บางทีของมันต้องใช้ 😀

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

อาการ Error: ‘getCurrentUserAsync’ of undefined

แต่ถ้าเราทำตามวิธีที่พลแชร์ไว้ก่อนหน้านี้ ในการติดตั้งระบบ Debug React Native ใน VSCode

แล้วเจอ Error ตอนพยายามรันตัว Debugger ขึ้นมาทำงานใน Tab ชื่อ Debug Console ของ VSCode ตามข้างล่าง

Adapter node: v10.2.0 x64
vscode-chrome-debug-core: 6.7.46
Could not debug. Cannot read property 'getCurrentUserAsync' of undefined

ทำให้รันยังไงก็ไม่เข้า Debugger ได้แต่นั่งจ้องตากับแอพ Expo เงียบๆ

มาดูวิธีแก้ไขกันครับ

สาเหตุมาจาก Bug ของ module ที่ชื่อ @expo/xdl นั่นเอง มีคนเจอปัญหานี้ครั้งแรกเมื่อ 21 กรกฎาคมที่ผ่านมา และมีวิธีแก้ไขเบื้องต้น ก่อน Expo จะปล่อย Patch มาแล้วครับ

1. เข้าไปที่โฟลเดอร์ Extension ของ React Native Tools

ใช้คำสั่ง cd เข้าไปที่โฟลเดอร์เก็บ extension ของ VSCode

cd YOUR_HOME_DIRECTORY/.vscode/extensions/

เช่นของพล อยู่บน Mac ก็ให้เปิด Finder และใช้ปุ่มลัด Ctrl + Shift + G และวางคำสั่งด้านล่างลงไป

~/.vscode/extensions

จากนั้นกด Enter

เราจะเข้ามาในโฟลเดอร์ที่ใช้เก็บ Extension ต่างๆ ของ VSCode ให้เรามองหา

msjsdiag.vscode-react-native-X.X.X

จากนั้นให้เปิด Terminal ขึ้นมาที่โฟลเดอร์นี้ล่ะครับ

2. ถอนการติดตั้ง และติดตั้ง module @expo/xdl ใหม่

พอเราเปิด Terminal ขึ้นมาในโฟลเดอร์นี้แล้ว เราต้องรัน 2 คำสั่ง

npm uni --no-save @expo/xdl

npm i --no-save @expo/xdl@56.0.0

3. ปิดการทำงานทั้งหมด และเปิดใช้งานใหม่

ในที่นี้ถ้าเราเปิดระบบต่อไปนี้ไว้ให้ไล่ปิดให้เรียบร้อย

  1. ระบบ Expo
  2. iOS Simulator หรือ Android Emulator
  3. React Native Debugger
  4. VSCode

จากนั้นค่อยไล่เปิดการทำงานทีละตัวใหม่

4. ทดสอบรันโปรเจค และ debugger

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

Posted on Leave a comment

5 เรื่องที่เราอาจทำพลาด ในการใช้ React JS

React in Red

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

และด้วยความแข็งแกร่งของ Community คนใช้ React ทำให้มีคำสอนจากระดับผู้มีประสบการณ์เลเวลสูงๆ มาให้ศึกษากันบ่อยๆ พลเองก็รวบรวมเอามาแชร์ไว้ใน tag #nextflow-react-tip เรื่อยๆ

และนี่ก็เป็นหนึ่งในนั้นครับ

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

1. ไม่ใช้ Library “สำคัญ” ในโปรเจคตั้งแต่เริ่มแรก

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

จริงอยู่ว่า React นั้นเป็นแนวคิดเรียบง่าย จากการประยุกต์การใช้งาน JavaScript ทั่วไป แต่อย่าประเมินความยิ่งใหญ่ของ Community ต่ำไปนะครับ

เพราะหากเรารู้สึกใช้ React ทำส่วนไหนของแอพแล้วลำบาก แนะนำให้เอะใจ ลองหา Library มาแก้ปัญหาดู

เช่น การจัดการ Form ที่ดูเป็นงานช้างสำหรับคนที่เริ่มต้นใช้งาน React เพราะต้องจัดการ State และ Input ของ Form ที่มีวิธีการวุ่นวาย

ใครยังไม่ได้ใช้ Formik ก็ให้ลองใช้ดูครับ รูปแบบการทำงานของ Formik จะทำให้ชีวิตง่ายขึ้นหลายชั่วโมงเลยทีเดียว

2. ไม่จัดการแบ่งโค้ดที่ใช้ซ้ำออกเป็นชิ้นเล็กๆ

React เป็นแนวคิดการจัดระเบียบของ User Interface ที่เราสร้างขึ้นมาในแอพพลิเคชั่น

แน่นอนว่าไม่มีกฎตายตัวว่าเราควรแบ่งโค้ดของเราย่อยจนเป็นชิ้นเล็กๆ ขนาดไหน

แต่จากประสบการณ์ของพลเอง นอกจากที่เราแบ่งแอพออกเป็น App Page ต่างๆ แล้ว

โค้ดส่วนไหนที่จะมีการ Reuse บ่อยๆ ก็เหมาะสมที่จะย่อยออกมาเป็น Component ต่างหากครับ

ยกตัวอย่างในการทำแบบฟอร์มสำหรับเลือก จังหวัด อำเภอ/เขต และตำบล/แขวง เราอาจจะเห็นการทำงานที่ซ้ำกัน เช่น

เลือกตัวเลือกจากรายการแล้ว แสดงเป็นชื่อที่เลือกใน Dropdown menu

เราก็สามารถแยก Drop Down ออกมาเป็นอีก Component ได้ต่างหาก เพื่อใช้ซ้ำในส่วนของการระบุที่อยู่ และที่อื่นๆ ครับ

3. ไม่ให้เวลา กับการจัดระเบียบโค้ด

ในการอบรมทุกครั้ง พลจะพูดถึงเรื่อง Code Guideline หรือ Code Convention ที่เราควรจะมีการร่างขึ้นมาก่อนที่จะเริ่มโปรเจค

ถึงแม้ว่าจะเป็นการทำโปรเจคคนเดียวก็ตาม แต่เราก็คงอยากให้โปรเจคนี้สามารถมีคนมาช่วย หรือมาแทนเราได้ง่ายๆ ใช่ไหมครับ?

ยิ่งทำงานเป็นทีมยิ่งแล้วใหญ่ Code Guideline นั้นควรมีเลยล่ะ

หลังจากมี Code Guideline แล้ว ก็ควรสละเวลาสักเล็กน้อยในแต่ละช่วง เพื่อทำการรีวิวตัว Code (Code Review) และทำการ Refactoring ให้เป็นกิจวัตร

อาจจะดูเสียเวลาประมาณ 30 นาที หรือ 1 ชั่วโมง แต่ในระยะยาว เราสามารถลดปัญหาด้าน Technical Debt หรือดินระเบิดพอกหางหมูไปได้เยอะเลยนะ

4. ไม่ใช้ linter ก่อนเริ่มโปรเจคแบบทำเป็นทีม

Merge Conflict ของโค้ดในโปรเจคเรา เป็นปัญหาที่จะมาเผยตัว หลังจากเราละเลยข้อที่ 3 มาแล้ว สักระยะหนึ่ง การที่มีคนในทีมช่วยกันทำ อาจจะทำให้เกิด Merge Conflict นี้เยอะขึ้น

แน่นอนว่า การแก้ Merge Conflict นั้นอาจดูใช้เวลาไม่มาก และสามารถยอมรับได้

แต่การที่เกิด Merge Conflict ถี่ๆ ตลอดระยะเวลาการทำโปรเจค มันผลาญพลังงาน และเวลาของทีมโดยเปล่าประโยชน์เลยนะครับ

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

5. ไม่เขียน Component หรือ Class ครอบการใช้งาน 3rd Component

ถ้าเรามีการใช้งาน Library ของเจ้าอื่นในงานของเรา อาจจะพิจารณาข้อนี้เป็นพิเศษ

เพราะยกตัวอย่าง ถ้าเรามีการใช้ Module ที่ชื่อ react-timeago เพื่อแสดงช่วงเวลาของโพสใน Timeline

นั่นหมายถึง เราจะต้อง import มันเข้ามาในทุกๆ Component ที่เราอยากใช้งานมัน

ซึ่งมันก็ดูปกติดีใช่ไหม จะใช้งานมัน ก็ต้อง import เข้ามาสิ

แต่เวลาเอามาใช้เราก็ต้องเขียน import เข้ามาใน Component ต่างๆ ของโปรเจคแบบนี้

ถ้าช่วงหลังๆ เราดันเกิดนึกได้ว่า จริงๆ ต้องมีการปรับแต่งการทำงานของ react-timeago component ล่ะ? และต้องมีผลกับทุกส่วนที่เอา react-timeago ไปใช้ด้วย!?

กรี๊ดใช่ไหมครับ

ดังนั้นหากเริ่มต้นโปรเจค แล้วเริ่มมีการทำ Module หรือ Library ของเจ้าอื่นมาใช้ อย่าลืมครอบด้วย Component หรือ Class ของเราเองตามความเหมาะสมนะครับ

สำหรับคนที่ใช้ Design Pattern เทคนิคนี้ คือ Facade pattern หรือ Proxy Pattern ก็ได้ครับ

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

Posted on Leave a comment

สรุปเนื้อหาเรื่อง Google Flutter และ All Cross Platform จากงาน Mobile Conf 2018

จบไปแล้วกับงาน Mobile Conf 2018 ที่จัดโดยทีมงานคุณภาพตลอด 1 วันเต็ม และพลก็ได้มีโอกาสไปพบปะกับเพื่อนพี่น้อง และได้แชร์ความรู้ในฐานะ Speaker ของ Session ปิดท้าย

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

เพราะตอนเดโมเกิดขัดข้องทางเทคนิคนิดหน่อย มาใส่ล้ิงค์ไว้ให้ลองตรงนี้แล้วกันเนอะ

Session ของพลมี 3 ส่วนครับ.

Now. How. Adapt.

ในส่วนของเนื้อหา Session ของพล คือ “OK, Flutter” เป็นการสรุปสถานะของเครื่องมือ Cross Platform ในปัจจุบันว่าจะไปในทิศทางใด

ก่อนจะแนะนำตัว Google Flutter ว่ามีลักษณะเด่นอย่างไร และการเรียนรู้มันสามารถเริ่มต้นได้ยากง่ายแค่ไหน

1. Now: ทิศทางของเครื่องมือ Cross Platform ในปัจจุบัน

Now we have a lot of choice

หัวข้อนี้ เป็นความคิดต่อยอดจากเมื่อ 2 ปีที่แล้ว ที่พลได้ไปแชร์เรื่อง React Native ในงาน iOS Dev Meetup คลิกอ่านได้ใน link ครับ

จากปัจจุบันที่เครื่องมือ Cross Platform ทยอยกันดาหน้าออกมาเรียงแถวให้เราเลือกใช้งาน ซึ่งงานแต่ละแบบก็เหมาะกับ Framework หรือ Tools แต่ละตัว อย่างปัจจุบันก็มี

  1. Cordova (aka PhoneGap)
  2. Ionic
  3. Xamarin
  4. React Native
  5. NativeScript
  6. และอื่นๆ อีกมากมาย

และนอกจาก Google Flutter แล้ว เราก็น่าจะเห็นแล้วว่าน่าจะมีเครื่องมือ Cross Platform แนวเดียวกันนี้ออกมาอีกไม่น้อย

อย่าง Kotlin/Native ก็เป็นอีกตัวเลือกหนึ่งที่น่าสนใจ (ขอบคุณคุณบาสที่แนะนำ เราน่าจะได้เจาะกันเรื่องนี้ใน Meetup ครั้งหน้า แต่ขอไป “ย่าง” มันก่อน)

แต่ทำไมมันเยอะอย่างนี้ และที่สำคัญคือ Cross Platform กำลังเติบโตไปในทิศทางใด?

ความจริง: เราไม่ได้มีแค่ iOS และ Android

All platform mobile web and desktop

หากพูดถึง Platform หรือระบบที่เราพัฒนา Solution ไว้ใช้งานที่จับต้องกันได้ในชื่อของ “โปรแกรม” หรือ “แอพพลิเคชั่น” จริงๆ แล้ว จะพบว่าเราไม่ได้มีแค่ Mobile Platform อย่าง iOS และ Android

แต่จริงๆ เรายังมี Desktop Platform ที่ทำงานด้วยระบบปฏิบัติการ (OS) เก่าแก่อย่าง MacOS (ชื่อเดิมคือ OS X), Windows, และ Linux

ทั้ง 3 ตัวนี้ เคยเป็นโจทย์ที่พวกเราต้องเคาะให้ออกว่า จะพัฒนาโปรแกรมเดียวกัน แต่ใช้งานกันบน OS 3 ตัวนี้อย่างไร

ในยุคนั้น การปะทะที่ค่อนข้างชัดเจนที่สุดคงเป็น Java กับ .NET

และ Platform ที่ทรงพลังที่สุดในยุคของ Internet อย่าง Web Platform ที่ทำให้พวกเรามานั่งเขียน PHP, JSP, ASP.NET นี่ยังไม่นับของใหม่ๆ อย่าง Ruby on Rails หรือ Node.js นะ

และในยุค Web นี่แหละทำให้เราคิดว่า โลกนี้คงไม่มีอะไรมากไปกว่า Web Application อีกแล้ว (และสตีฟก็ทำให้เราคิดผิด)

นั่นทำให้จริงๆ แล้ว เรามีถึง 6 ระบบที่ลูกค้า หรือผู้ใช้สามารถใช้งาน Solution ของเราได้

  1. iOS
  2. Android
  3. MacOS
  4. Windows
  5. Linux
  6. Web

นี่มันมณีทั้ง 6 เม็ดบนถุงมือทานอสชัดๆ!!

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

Cross Platform เกิดขึ้นจากความขี้เกียจ

All cross platform framework and tools today

เครื่องมือ สร้างขึ้นเพื่อลดความลำบากของมนุษย์

และพูดได้ว่า Framework และ Tools ต่างๆ สร้างขึ้นมาเพื่อพิชิตข้อจำกัดเดิมๆ ของนักพัฒนา และตอบสนองความขี้เกียจนั่นเอง

จากโจทย์ที่ต้องตอบความต้องการถึง 6 ระบบด้วยกัน เอาแค่ iOS และ Android ก็มีเครื่องมือ ถึง 6 ตัวแล้ว (ไม่นับที่ล้มหายตายจากไปตามกาลเวลานะ)

ไม่ว่าจะเป็นแนวคิด Hybrid อย่าง PhoneGap, Cordova, Ionic

หรือจะพยายามเป็น Native อย่าง React Native, Xamarin, NativeScript, และ Google Flutter จะเข้ามาอยู่ในส่วนนี้

โอเค ถ้าเรามอง Google Flutter ตอนนี้ มันก็จะติดใจอยู่ว่า สร้างมาทำไม? ทำไมต้องใช้ Dart?

แต่ถ้าถอยออกมามองในภาพรวมที่กว้างขึ้น พลมองว่า การขยับของหลายๆ เจ้าในตอนนี้ กำลังพาเราเข้าสู่ยุคที่น่าสนใจกว่า ของการพัฒนาแอพพลิเคชั่น

เรากำลังเข้าสู่ยุค All Platform Framework

Capacitor and 6 OS target platform

จากที่เห็นว่า ถึงแม้เราจะมีเครื่องมือสร้างแอพพลิเคชั่นแบบ Cross Platform แต่จริงๆ แล้วมันยังจำกัดอยู่ที่ส่วนของ Mobile Application เท่านั้น ก็คือ Android และ iOS

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

มีการขยับจากฝั่งของ Web Technology อย่าง Electron ที่เคยเล่าไปแล้วในงาน Meetup

แต่ Electron เป็นระบบที่แยกออกจาก Cross Platform Framework สำหรับ Mobile App อยู่ การทำเลยต้องทำมือด้วยตัวเอง

Cross Platform หลายๆ เจ้า ในตอนที่พลเล่นอยู่นี้ เริ่มเป็นรูปเป็นร่างให้จับต้องได้บ้างแล้ว เช่น Capacitor (เล่ารายละเอียดในนี้) ที่ออกตัวเป็น Runtime แบบ All Platform

ถึงแม้จะเป็น Product จากทีมงาน Ionic อันเลื่องชื่อ แต่ทีมงานก็บอกชัดเจนว่า ไม่ได้จำกัดว่าจะต้องใช้ Ionic Framework กับ Capacitor อย่างเดียว

ไม่ว่า React, Vue.js, Angular, หรือ JavaScript เพียวๆ ก็ใช้ Capacitor ทำ All Platform Application ได้

โค้ชพลเล่าวิธีการใช้งานไว้เบื้องต้นที่นี่

เดี๋ยวสิ้นเดือนนี้จะทำเป็นคลิปให้ดูใน Youtube channel นะ กดติดตามได้ 

Resource ที่เกี่ยวข้องกับหัวข้อนี้

2. How: Google Flutter ดีงาม, ยากง่ายแค่ไหน?

Google Flutter Compare with other framework

อย่างที่บอกว่า Google Flutter กำลังจะเป็นอีกตัวเลือกหนึ่ง สำหรับเครื่องมือสร้างแอพแบบ Cross Platform มีความยากง่ายในการเริ่มต้นยังไง

ภาพรวมเกี่ยวกับ Google Flutter

  1. เป็น Mobile Native UI Framework
  2. สร้างโดย Google
  3. ใช้ภาษา Dart เขียน
  4. รองรับ iOS และ Android (เป็นเครื่องมือ Cross Platform ประเภทหนึ่ง)
  5. ทำความเร็วได้ระบบ 60 เฟรมต่อวินาที (หนัง HD เนียนๆ เลย)

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

UI และ Logic

ถ้าไม่นับโครงสร้าง Architecture อย่างพวก MVC, MVVM, หรือ VIPER (อันนี้ของใหม่ เพิ่งรู้จากคุณบาสในงาน) ส่วนของแอพพลิเคชั่น จะแบ่งของเป็น 2 ส่วนใหญ่ๆ นั่นคือ

  1. User Interface
  2. Logic

ซึ่งใน 2 ส่วนนี้มี 2 แนวคิดใหญ่ๆ ที่ใครเป็นอยู่แล้ว ก็จะเข้าใจการใช้งาน Google Flutter ได้ในเวลาอันรวดเร็วเลยครับ

1. Dart เป็​น OOP

OOP หรือ Object-Oriented Programming เป็นแนวคิดที่กำหนดโครงสร้างภาษาโปรแกรมมิ่งหลายตัวมากๆ

อย่างเช่นใครเขียน Java, .NET, หรือ TypeScript มา จะเข้าใจ Dart ได้ไม่ยากเลย เพราะแรงบันดาลใจมาเต็ม เช่น

  • Class
  • Inherit ด้วย extend
  • Property กับ Method
  • DataType ก็มี
class NextflowDev extends NextflowEmployee {
   
    String name;

    void code() {
       print('Coding...');
    }

}

2. User Interface เป็นแนว Reactive Programming

Bento as concept of Flutter UI

User Interface ที่เราเห็นบน Flutter เรียกว่า Widget

และ Widget สามารถประกอบเข้าด้วยกันได้ เหมือนจัดวางอาหารลงไปในช่องข้าวกล่อง

ในโลกของการสร้าง User Interface ยุค Web แบบดั้งเดิม เห็นจะไม่มีอะไรมาแทนที่การเขียนแนว XML ที่แสนฮิตไปได้ เช่น

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mobile Conf 2018</title>
</head>
<body>
    Thailand Mobile Conference 2018
    <img src="assets/mobile_conf2018.png" width="100%" alt="">
</body>
</html>

หรือ XAML ใน Xamarin.Forms

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamlSamples"
             x:Class="XamlSamples.MainPage">

    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin Forms!" 
               VerticalOptions="Center" 
               HorizontalOptions="Center" />
    </StackLayout>

</ContentPage>

เพียงแต่ถ้าเรามาใช้งาน Flutter ตอนเขียน UI จะรู้สึกแปลกตามากๆ โดย Google เตรียม User Interface เป็นชิ้นๆ ไว้ให้เราแล้ว แต่เราก็สามารถเอามาประกอบใช้งานเองได้

ซึ่งใน Flutter เราจะเรียก UI แต่ละส่วนว่า Widget (คำนี้จำไว้เลย จะเห็นอยู่ทุกที่ใน Flutter)

เช่นการสร้างแอพ 1 หน้า แบบมีข้อความน่ารักๆ ไว้ตรงกลางจะเป็นโค้ดแบบนี้

void main() {
  runApp(MaterialApp(
      title: 'Nextflow What to eat',
      debugShowCheckedModeBanner: false,
      theme:  ThemeData(primarySwatch: Colors.blue, fontFamily: "Noto"),
      home:  Scaffold(
        appBar:  AppBar(
          title:  Text("What to eat"),
        ),
        body:  Center(
          child:  Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
               Text(
                'สวัสดีจ้ะ',
                style: TextStyle(fontSize: 60.0),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Text('จัดมา')
        ));,
    ););
}

สำหรับคนที่ไม่เคยเขียน React มา ไม่น้อยเลยที่จะอุทานว่า “อุ๊ต๊ะ”​ (หรือคำประจำตัวของแต่ละคน) เพราะการเขียนแบบนี้มันเหมือนกับ…

การ New object ซ้อนๆ กัน หรือ เรียกว่าเป็น Constructor ซ้อน Constructor ก็ได้

แต่ถ้าเราเข้าใจว่า:

สิ่งที่เห็นนี้ คือการสร้าง Widget ของ UI แต่ละชิ้นซ้อนๆ กัน เหมือนกับการจัดวางอาหารลงไปในข้าวกล่อง มันจะดูง่ายขึ้นเยอะ

เช่นถ้าโค้ชพล ใช้ สีแยก Widget แต่ละอันออกจาก Widget ตัวใหญ่ที่ชื่อว่า Scaffold

Break down Scaffold Widget in Google Flutter

เราจะเห็นว่าจริงๆ แล้ว มี Widget 3 ตัวที่ถูกกำหนดให้ลงไปอยู่ในแต่ละส่วนของ Widget ที่ชื่อ Scaffold ของเรา นั่นคือ

  1. AppBar
  2. Center (ตัวนี้เป็น Widget ที่ใช้จัด Layout ตัวหนึ่ง)
  3. Floating Action Button

เราก็จะมองเห็นว่า จริงๆ แล้วมันเป็นโครงสร้างง่ายๆ แนวเดียวกับ HTML ในการเขียนเว็บ หรือใน React Native นั่นเอง

ด้านล่างนี้เปรียบเทียบระหว่าง การเขียน Web UI ด้วย HTML กับ CSS และการเขียน Mobile App UI ด้วย Dart ใน Flutter

Web UI (HTML/CSS)

<div class="greybox">
    Lorem ipsum
</div>

.greybox {
      background-color: #e0e0e0; /* grey 300 */
      width: 320px;
      height: 240px;
      font: 900 24px Georgia;
    }

Mobile App UI (Dart)

Container( // grey box
  child: Text(
    "Lorem ipsum",
    style: TextStyle(
      fontSize: 24.0
      fontWeight: FontWeight.w900,
      fontFamily: "Georgia",
    ),
  ),
  width: 320.0,
  height: 240.0,
  color: Colors.grey[300],
);

Reactive UI ใน Flutter

Stateful and Stateless Widget in Google Flutter

ทีนี้พอเราสร้าง User Interface ด้วยภาษา Dart ไปซักพัก เราก็จะเริ่มรู้ว่า นี่มันเหมือนกับการสร้างหน้าเว็บนิ่งๆ อันหนึ่งนี่นา

แต่แอพพลิเคชั่นมันต้องมีส่วนของ Logic มีการอัพเดต รับข้อมูลเอาไปใช้งานใช่ไหม ส่วนนี้แหละที่ OOP ของ Dart จะเข้ามามีบทบาทสำคัญ

นั่นคือ Flutter มีการกำหนด Class ที่ชื่อ StatefulWidget  และ StatelessWidget  ขึ้นมาให้เราเลือกสร้าง Widget ของเราอีกที

แนวคิดการเลือกใช้ Class ทั้ง 2 ตัวมีดังนี้

  • Stateful Widget จะใช้กับส่วนของแอพที่มีการอัพเดต เปลี่ยนแปลงข้อมูล
  • Stateless Widget จะใช้กำหนดส่วนของแอพที่แสดงขึ้นมาเฉยๆ ไม่มีการเปลี่ยนแปลงอะไร

เช่น Logo ของบริษัทเราในแอพ อาจจะมองเป็น Stateless Widget ได้ (ลองสังเกตว่า Class นี้ return เป็น Widget ที่ชื่อ Container ที่มีรูปโลโก้เว็บไซต์พลไปใช้งาน)

class Logo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return  Container(
       child: Image.asset('Nextflow.png')
    );
  }

}

แต่เราพูดถึง List ที่แสดงรายชื่อหุ้น ที่อัพเดตอยู่เป็นระยะ เราก็อาจจะสร้างเป็น Stateful Widget ได้

class StockList extends StatefulWidget {

@override
  _StockListState createState() => new _StockListState();

}

class _StockListState extends State<StockList> {
   
    // เรียกข้อมูลจาก Web API
    void updateData() {
       setState(() {
           // update stock data
       });
    }

    @override
    Widget build(BuildContext context) {

       return ListView.builder(...)

    }

}

ตรงจุดนี้ถ้าเริ่มเขียนแอพพลิเคชั่นขึ้นมาด้วย Google Flutter สัก 2-3 ตัว ก็จะเริ่มจับทางได้ว่า จะสร้าง Stateful หรือ Stateless Widget ดี

Resource ที่เกี่ยวข้องกับหัวข้อนี้

3. Adapt: Cross Platform ที่ดีต้องเปิดช่องทำงานกับ Native API ได้ง่าย

Cameleon

จากการใช้งานเครื่องมือ Cross Platform มาตั้งแต่ยุคเริ่มต้น จุดหนึ่งที่เครื่องมือ Cross Platform กำลังเดินหน้าไป คือการเชื่อมต่อส่วนของ Cross Platform เข้ากับ Native API ได้ง่ายขึ้น

เพราะในอดีต นักพัฒนาจะคุ้นเคยกับการที่เจ้าของ Framework เตรียม Plugin ที่จะติดต่อกับ Native API (อย่างพวกตัวแสกน Barcode หรือ Apple Pay)

แน่นอนว่าสะดวกดี แต่ในงานพวกเราลงความเห็นตรงกันว่า การโยนความหวังไว้ที่นักพัฒนา Plugin บางตัว ทำให้เกิดความเสี่ยงต่อชีวิต และการลงทุนของพวกเรา เพราะบางครั้งกว่า Plugin ตัวที่ใช้จะอัพเดตตามเวอร์ชั่นใหม่ของ OS ก็อาจจะมี bug ที่ทำให้แอพพลิเคชั่นเราใช้งานไม่ได้

และตอนนี้พลมองเห็นว่า เจ้าของ Framework แต่ละเจ้า รับทราบจุดด้อยตรงส่วนนี้แล้ว และปรับปรุงให้เราสามารถเขียนโค้ดเรียกใช้ Native API ได้โดยตรง (และต้องง่ายด้วยนะ) เพื่อลดความเสี่ยง

และทำให้นักพัฒนามีอำนาจในการควบคุมการติดต่อกับ API ของระบบโดยตรง

ต่อไป Cross Platform Framework จะให้เราเรียกใช้ Native API โดยตรง

ในส่วนของ Cordova และ Ionic ก็รู้ตรงจุดนี้ดี ดังนั้นใน Capacitor ที่ถูกออกแบบมาเป็น Runtime กลางตัวใหม่ จึงมี “ส่วนเชื่อมต่อ” ท่ีว่านี้เรียบง่ายขึ้นมาก (ดูตัวอย่างสำหรับ Android และ iOS)

สำหรับ Google Flutter มีส่วนของ Dart Package มาให้ก็จริง แต่จุดแข็งของมันคือ “ส่วนเชื่อมต่อ” ระหว่าง ภาษา Dart กับภาษา Programming ในส่วน Native ที่ทำการบ้านมาค่อนข้างดี

อย่างการติดต่อกับโค้ด Swift กับ Kotlin (โปรเจคที่เขียนด้วย Java กับ Objective-C ก็ใช้ได้นะครับ) ในแอพ iOS และ Android ที่ดูแล้วก็เป็นการพัฒนาเทคนิคจาก React Native และ Xamarin ให้เรียบง่ายมากขึ้น ที่สำคัญ Document ละเอียดและชัดเจน

สรุปเนื้อหา Session จากงาน Mobile Conf 2018

เอาล่ะ ค่อนข้างยาว แต่รายละเอียดที่พูดในงานก็น่าจะครบถ้วน จะมี Demo นี่แหละที่ติดขัดนิดหน่อย แต่ก็เอามาทำเป็นคลิป YouTube ให้แล้วเนอะ

ดังนั้นเนื้อหาโดยรวมก็คือ

  1. Now: Cross Platform ตัวใหญ่ๆ แต่ละเจ้า กำลังเพิ่มศักยภาพของตัวเอง ให้รองรับ Platform มากขึ้น เช่น Desktop และ Progressive Web App
  2. How: Google Flutter เป็นน้องใหม่ ที่เรียนรู้ค่อนข้างง่าย ใช้แนวคิด OOP กับ Reactive ที่ปัจจุบันก็เป็นที่กว้างขวาง
  3. Adapt: Cross Platform ในตอนนี้ และอนาคต จะลดความเจ็บปวดของนักพัฒนาโดยเปิดให้เรียกใช้ Native API ได้โดยตรง ไม่ต้องรอ 3rd-party Plugin

โลกของ Cross Platform นี่น่าตื่นเต้นจริงๆ

กดติดตามอัพเดตกับโค้ชพลได้ทาง:

ถ้าต้องการให้ไปช่วยอบรม หรือแนะนำทีมในองค์กร ก็ดูหลักสูตรปัจจุบันที่พลทำให้ได้ที่ส่วนของ การเรียนและอบรม Training หรือโทร 083-071-3373 ได้นะ

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

Posted on Leave a comment

วิธีติดตั้งเครื่อง Mac สำหรับพัฒนาแอพ Android ด้วย React Native

React Native Black
React Native Black

อัพเดตข้อมูลล่าสุดเป็นปี 2020 ให้แล้วนะ 👍🎉

บทความนี้เป็นส่วนหนึ่งของหลักสูตร “พัฒนาแอพ iOS และ Android ด้วย React Native” จะได้เป็นพื้นฐาน และให้ทุกคนสามารถทบทวนกันได้ครับ

สำหรับวิธีติดตั้ง MacOS ทำแอพ iOS ด้วย React Native ดูที่นี่เลย

ส่ิงที่ควรรู้

  • เครื่อง Android จีนส่วนใหญ่หา driver ยาก สามารถทำแอพลงได้ แต่ไม่แนะนำให้เอามาอบรม เพราะสั่งรันแอพผ่าน USB โดยตรงไม่ได้

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

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

  1. ติดตั้ง Node.js
  2. ติดตั้ง Android Studio
  3. ตั้งค่า PATH ให้ Android SDK
  4. ติดตั้ง Android API
  5. ติดตั้ง HomeBrew
  6. ติดตั้ง Xcode และเปิดใช้งาน
  7. ติดตั้งคำสั่ง React Native
  8. ติดตั้งโปรแกรม Expo
  9. ติดตั้ง Visual Studio Code และส่วนเสริม

วิดีโอแนะนำการติดตั้งแต่ละขั้นตอน

1. ติดตั้ง Node JS

2. ติดตั้ง Android Studio

  1. ดาวน์โหลด JDK (ต้องเป็น JDK 1.8 นะครับ)
  2. ดาวน์โหลด Android Studio
  3. แก้ไขปัญหาอัพเดต Android Studio ไม่ได้ 

3. ตั้ง PATH ของ Android SDK บน Mac OS X

4. ติดตั้ง Android SDK เพิ่มเติม

ให้เราเปิดโปรแกรม Android Studio ขึ้นมา เราสามารถเปิดส่วนการจัดการ Android SDK Manager ได้ 2 วิธี

  1. จากหน้า Startup > คลิกเลือกปุ่ม Configure ด้านล่างขวา > เลือก SDK Manager
  2. จาก Menu > ให้เลือก Preference และค้นหาคำว่า SDK Manager

4.1 เลือกติดตั้ง Android SDK

จากนั้นเราจะเปิดมาที่ส่วนของ SDK Platform (หมายเลข 1)

Android SDK Manager - SDK Platform

ให้เราเช็ครายการในส่วนหมายเลข 2 โดยให้สังเกตในช่อง API Level โดยเราจำเป็นต้องมีการติดตั้ง ตามรายการด้านล่าง (ตัวที่ติดตั้งในเครื่องแล้ว จากขึ้น Status: Installed สังเกตจากช่องด้านขวาสุด)

ถ้าอันไหนยังไม่มี ก็ให้ติ๊กเครื่องหมายถูกในช่องด้านซ้ายสุดนะครับ

API ที่ต้องติดตั้งคือ: 23, 24 และ 26, 27, 28, และ 29

เสร็จแล้วก็กดปุ่ม Apply (หมายเลข 3) จะเป็นการดำเนินการติดตั้ง

4.2 เลือกติดตั้ง Android SDK Tools

เสร็จแล้วให้กด tab ชื่อ SDK Tools ตามภาพด้านล่าง (หมายเลข 1)

จากนั้นให้เช็คในรายการ (หมายเลข 2) ถ้าตัวไหนมีบอก Status ว่าอัพเดต ให้เลือก และกดปุ่ม Apply (หมายเลข 3) ให้เรียบร้อย

Android SDK Manager - SDK Tools

เสร็จขั้นตอนในส่วนนี้ครับ

5. ติดตั้ง Homebrew

รันคำสั่งติดตั้ง Homebrew ในโปรแกรม Terminal ดูคำสั่งติดตั้งได้จากที่นี่

หลังจากติดตั้งเสร็จแล้ว ให้รันคำสั่งติดตั้งเพิ่มเติมตามนี้ ทีละคำสั่ง

brew install watchman 
brew install flow

6. ติดตั้ง Xcode

7. ติดตั้งชุดคำสั่ง React Native

รันคำสั่งในโปรแกรม Terminal

sudo npm install -g react-native-cli 
sudo npm install -g exp 
sudo npm install -g expo-cli
sudo npm install -g create-react-native

ขั้นตอนนี้ใช้เวลาในการติดตั้งพอสมควร ขึ้นอยู่กับความเร็ว Internet ครับ

เรียบร้อยแล้ว ลองพิมพ์คำสั่ง react-native  และกด enter ถ้าไม่ขึ้นข้อความ Error ก็โอเคครับ

8. ติดตั้งโปรแกรม Expo

เราจะใช้ Expo เพื่อลดระยะเวลาในการทดสอบแอพพลิเคชั่น สามารถดาวน์โหลดได้จากลิ้งค์ด้านล่าง

9. ติดตั้ง Visual Studio Code

  1. ดาวน์โหลด และติดตั้งโปรแกรม Visual Studio Code
  2. เสร็จแล้วกดติดตั้งส่วนเสริมช่วยเขียนโค้ดของ Nextflow จากที่นี่ได้เลย

สรุป

เมื่อมาถึงจุดนี้ ถือว่าเครื่อง Mac OS X ของเราพร้อมจะพัฒนาแอพ Android ด้วย React Native แล้วครับ มีคำถามสงสัย สามารถสอบถามได้ทางแฟนเพจของผมที่นี่

แล้วถ้าสนใจมาอบรม Workshop กับผมได้ตามรายละเอียดในนี้ครับ

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

Posted on Leave a comment

วิธีเตรียมเครื่อง Mac เพื่อพัฒนาแอพ iOS ด้วย React Native รุ่นล่าสุด

react-native-ios-javascript
react-native-ios-javascript

อัพเดตข้อมูลล่าสุดเป็นปี 2020 ให้แล้วนะ 👍🎉

บทความนี้เป็นส่วนหนึ่งของหลักสูตร “พัฒนาแอพ iOS และะ Android ด้วย React Native” แบบออนไซต์ที่องค์กร จะได้เป็นพื้นฐาน และให้ทุกคนสามารถทบทวนกันได้

สำหรับใครที่จะเตรียมเครื่อง Mac ไว้ทำ Android Application ให้ไปดูที่นี่

สิ่งที่ควรรู้

  • การจะทดสอบแอพ iOS บน iPhone หรือ iPad สามารถใช้ Apple ID ปกติที่ใช้ใน App store ทั่วไปได้ แต่จำกัดเครื่องละ 2 โปรเจคนะ
  • ถ้าอยากอันลิมิต ต้องมีการสมัคร iOS Developer Program, ชำระเงิน ($99), และยืนยันให้เรียบร้อย

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

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

  1. ติดตั้ง NodeJS
  2. ติดตั้ง Homebrew
  3. ติดตั้ง NVM
  4. ติดตั้ง watchman
  5. ติดตั้ง flow
  6. ติดตั้ง Xcode
  7. ติดตั้งชุดคำสั่ง React Native
  8. ติดตั้ง Expo
  9. ติดตั้ง Visual Studio Code

1. ติดตั้ง Node JS

2. ติดตั้ง Homebrew

รันคำสั่งติดตั้ง Homebrew ในโปรแกรม Terminal ดูคำสั่งได้จากที่นี่

3. ติดตั้ง NVM

เปิดโปรแกรม Terminal และให้ก๊อปปี้คำสั่งด้านล่าง ไปรันในหน้าต่างโปรแกรม Terminal

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

4. ติดตั้ง Watchman

รันคำสั่งติดตั้ง Watchman ในโปรแกรม Terminal

brew install watchman

5. ติดตั้ง Flow

รันคำสั่งติดตั้ง flow ในโปรแกรม Terminal

brew install flow

6. ติดตั้ง Xcode และ Development Tools

ขั้นตอนและ Link ที่เกี่ยวข้องใน Video

  1. Download โปรแกรม XCode มาติดตั้งจาก Mac App Store โดยค้นหา “XCode” หรือคลิกที่ลิ้งค์นี้ และกดปุ่ม “View on Mac App Store”
  2. เปิดโปรแกรม Xcode และกดติดตั้งส่วนเสริมเพิ่มเติม

7. ติดตั้งชุดคำสั่ง React Native

รันคำสั่งในโปรแกรม Terminal

sudo npm install -g react-native-cli 
sudo npm install -g exp 
sudo npm install -g expo-cli
sudo npm install -g create-react-native

8. ติดตั้งโปรแกรม Expo

เราจะใช้ Expo เพื่อลดระยะเวลาในการทดสอบแอพพลิเคชั่น สามารถดาวน์โหลดได้จากลิ้งค์ด้านล่าง

9. ติดตั้ง Visual Studio Code

  1. ดาวน์โหลด และติดตั้งโปรแกรม Visual Studio Code
  2. เสร็จแล้วกดติดตั้งส่วนเสริมช่วยเขียนโค้ดของ Nextflow จากที่นี่ได้เลย

สรุป

เมื่อมาถึงจุดนี้ ถือว่าเครื่อง Mac OS X ของเราพร้อมจะพัฒนาแอพ iOS ด้วย React Native แล้วครับ มีคำถามสงสัย สามารถสอบถามได้ทางแฟนเพจของผมที่นี่

แล้วถ้าสนใจมาอบรม Workshop กับผมได้ตามรายละเอียดที่นี่ครับ

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

Posted on Leave a comment

วิธีติดตั้ง React Native บน Windows สำหรับทำแอพ Android

อัพเดตข้อมูลล่าสุดเป็นปี 2020 ให้แล้วนะ 👍🎉

หน้านี้เป็นวิธีการติดตั้งโปรแกรม เพื่อเตรียมเครื่องสำหรับผู้ใช้ Windows 7, 8, และ Windows 10 ในหลักสูตรการพัฒนาแอพ iOS และ Android ด้วย React Native และจะทดสอบกับอุปกรณ์ Android ต่างๆ

ควรเผื่อเวลาในการดาวน์โหลด และติดตั้ง เพราะมี 9 ขั้นตอน

ให้ทำความเข้าใจทีละขั้นตอน และทำตาม จะได้ไม่เสียเวลา หรือโอกาสตอน Workshop นะครับ

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

ประกอบไปด้วย

  1. ติดตั้ง Node JS
  2. ติดตั้ง Git
  3. ติดตั้งชุดคำสั่ง React Native
  4. ติดตั้ง Expo
  5. ติดตั้งโปรแกรม Android Studio และตั้งค่า PATH ให้ Android SDK
  6. ติดตั้ง Android API 22 – 24 และ 26 – 28
  7. ลง USB Driver ที่ตรงกับรุ่น/ยี่ห้อของอุปกรณ์ Android
  8. เปิดโหมดตัวเลือกนักพัฒนา (Developer Option) ในอุปกรณ์ Android ของเรา
  9. ติดตั้ง Visual Studio Code และส่วนเสริม

สิ่งที่ควรรู้

  • เครื่อง Android จีนส่วนใหญ่หา driver ยาก สามารถทำแอพลงได้ แต่ไม่แนะนำให้เอามาอบรม เพราะสั่งรันแอพผ่าน USB โดยตรงไม่ได้
  • เจอปัญหาระหว่างการติดตั้ง ให้ลงไปดูหัวข้อ “ปัญหาที่อาจพบ” ด้านท้ายบทความ

[us_separator type=”invisible” size=”small” icon=”fas|star”]

1. ติดตั้ง Node JS

ดาวน์โหลดตัวติดตั้ง Node JS ได้จากที่นี่ www.nodejs.org

** แนะนำให้ใช้เวอร์ชั่น LTS: Recommended for Most User

2. ติดตั้ง Git

เราต้องติดตั้งระบบ Git client เสียก่อน สามารถ download ได้จากที่นี่

ดูรายละเอียดการติดตั้งที่ถูกต้องได้จาก video ด้านล่างครับ ส่วนสำคัญคือให้เลือก “Run Git from Windows Command Prompt” ตอนติดตั้ง

3. ติดตั้งชุดคำสั่ง React Native

เราต้องมีการดาวน์โหลด และติดตั้งชุดคำสั่งเอาไว้ใช้งาน (เรียกว่า CLI)โดยต้องมีการเชื่อมต่อเครื่องที่ติดตั้งเข้ากับ Internet

  1. เปิดโปรแกรม Command Prompt หรือ Powershell
  2. รันคำสั่ง
sudo npm install -g react-native-cli 
sudo npm install -g exp
sudo npm install -g expo-cli
sudo npm install -g create-react-native

ขั้นตอนนี้ใช้เวลาในการติดตั้งพอสมควร ขึ้นอยู่กับความเร็ว Internet ครับ

เรียบร้อยแล้ว ลองพิมพ์คำสั่ง react-native  และกด enter ถ้าไม่ขึ้นข้อความ Error ก็โอเคครับ

4. ติดตั้งโปรแกรม Expo

เราจะใช้ Expo เพื่อลดระยะเวลาในการทดสอบแอพพลิเคชั่น สามารถดาวน์โหลดได้จากลิ้งค์ด้านล่าง

5. ติดตั้งโปรแกรม Android Studio และตั้งค่า PATH ให้ Android SDK

5.1 โปรแกรมที่ต้องดาวน์โหลด และติดตั้ง

ต้องทำการดาวน์โหลดโปรแกรมต่อไปนี้มา (ถ้ามีการติดตั้งบางโปรแกรมอยู่แล้วก็ไม่ต้องดาวน์โหลดมาก็ได้)

  • Java Development Kit (JDK เวอร์ชั่น 1.8) ถ้าเครื่องตัวเองเป็น 32-bit ก็โหลดแบบ Windows X86 มาติดตั้ง ถ้าเครื่องเป็น 64-bit ก็โหลดแบบ Windows X64 มาติดตั้งนะครับ
  • Android Studio ชุดแพคเกจแบบทีเดียวอยู่ของ Google ก็ให้ดาวน์โหลด แบบทีตรงกับระบบของตัวเองมาติดตั้งตามวิดีโอนะครับ

5.2 รายละเอียดการตั้งค่า PATH ให้กับ Android SDK

จากวิดีโอ เราต้องการที่อยู่ของโฟลเดอร์ 2 ตัว เพื่อใส่เข้าไปใน System Path ของเรา

โดยปกติหลังจากเราติดตั้ง Android Studio เสร็จแล้วโฟลเดอร์ที่เราต้องการคือ

C\:Users\(username)\AppData\Local\Android\sdk\platform-tools

และ

C:\Users\(username)\AppData\Local\Android\sdk\tools

ข้อความที่เน้นตัวหนา (username) ปกติจะเป็นชื่อ user ของเราบนเครื่องครับ

เช่นถ้าชื่อผู้ใช้ที่ผม login เข้า Windows คือ Teerasej ที่อยู่ของโฟลเดอร์ทั้งสองก็คือ:

C:\Users\Teerasej\AppData\Local\Android\sdk\platform-tools

และ

C:\Users\Teerasej\AppData\Local\Android\sdk\tools
Android SDK path platform-tools

เพื่อความแน่ใจก็ลองเข้าไปยังที่อยู่ดังกล่าว ว่ามีโฟลเดอร์ platform-tools และ tools อยู่ที่นั่นหรือไม่ จากนั้นค่อยคัดลอกมาใส่ใน System path ตามวิธีในวิดีโอนะครับ

6. ติดตั้ง Android SDK และ Platform Tools

ให้เราเปิดโปรแกรม Android Studio ขึ้นมา > จากหน้า Start up > เลือก Configure > > SDK Manager

จากนั้นเราจะเปิดมาที่ส่วนของ SDK Platform (หมายเลข 1)

ให้เราเช็ครายการในส่วนหมายเลข 2 โดยให้สังเกตในช่อง API Level โดยเราจำเป็นต้องมีการติดตั้ง ตามรายการด้านล่าง (ตัวที่ติดตั้งในเครื่องแล้ว จากขึ้น Status: Installed สังเกตจากช่องด้านขวาสุด)

ถ้าอันไหนยังไม่มี ก็ให้ติ๊กเครื่องหมายถูกในช่องด้านซ้ายสุดนะครับ

API ที่ต้องติดตั้งคือ: 23, 24 และ 26, 27, 28, 29

เสร็จแล้วก็กดปุ่ม Apply (หมายเลข 3) จะเป็นการดำเนินการติดตั้ง

Android SDK Manager - SDK Platform

เสร็จแล้วให้กด tab ชื่อ SDK Tools ตามภาพด้านล่าง (หมายเลข 1)

จากนั้นให้เช็คในรายการ (หมายเลข 2) ถ้าตัวไหนมีบอก Status ว่าอัพเดต ให้เลือก และกดปุ่ม Apply (หมายเลข 3) ให้เรียบร้อย

Android SDK Manager - SDK Tools

เสร็จขั้นตอนในส่วนนี้ครับ

7. เปิดโหมดตัวเลือกนักพัฒนา (Developer Option) ในอุปกรณ์ Android ของเรา

อุปกรณ์ Android ตั้งแต่เวอร์ชั่น 4.2 เป็นต้นไป จะมีการซ่อนโหมดนักพัฒนาเอาไว้ครับ

ซึ่งเราต้องเปิดโหมดนักพัฒนานี้ก่อน ถึงจะสามารถเชื่อมต่อโปรเจคเข้ากับอุปกรณ์ได้

ดูวิธีการเปิดโหมดตัวเลือกนักพัฒนา (Developer Option) ที่นี่เลย

8. ลง USB Driver ที่ตรงกับรุ่น/ยี่ห้อของอุปกรณ์ Android

สำหรับการทดสอบ Android Application ที่เราสร้างขึ้นบน Windows กับอุปกรณ์จริงนั้นจะมีขั้นตอนพิเศษกว่าบนเครื่อง Mac OS X หน่อยครับ

คือเราต้องลง USB Driver ที่ตรงกับรุ่น/ยี่ห้อ ของอุปกรณ์นั้นๆ เพื่อให้ Windows รู้จักกับอุปกรณ์เรา และสามารถใช้คำสั่งของ PhoneGap/Cordova ในการทดสอบแอพ Android ในเครื่องจริงของเราได้

คลิกดูรายชื่อ website ของผู้ผลิตอุปกรณ์ เพื่อ download usb driver มาติดตั้งได้ที่นี่

** แอนดรอยด์เครื่องจีน ส่วนใหญ่หา USB Driver ไม่ได้ ทำให้ workshop กันลำบาก แนะนำให้หลีกเลี่ยงการทำ Android จีนมา workshop นะ

แต่พอได้แอพแล้ว เอาไปลงเครื่องจีนไม่มีปัญหาครับ

9. ติดตั้ง Visual Studio Code และส่วนเสริม

  1. ดาวน์โหลด และติดตั้งโปรแกรม Visual Studio Code
  2. เสร็จแล้วกดติดตั้งส่วนเสริมช่วยเขียนโค้ดของ Nextflow จากที่นี่ได้เลย

เรียนรู้ React Native เข้าใจได้ง่าย ใช้ได้จริงๆ ระดับองค์กร Enterprise

ดูรายละเอียดรอบเรียนสดที่นี่ หรือโทรติดต่อ 083-071-3373 เพื่อติดต่อจัดอบรม in-house/on-site ได้ครับ

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

Photo by JD Hancock