การตั้งค่าให้ Sublime Text 3 ให้ใช้ Dart ให้ทำการ install Dart ไปยัง Tools > Command plette เลือก Dart ตั้งค่าของ preference
|
1 2 3 4 5 |
Put this in User/Preferences.sublime-settings: { "dart_sdk_path": "/path/to/dart-sdk" } |
ในการพัฒนา mobile ด้วย react native จะต้องมีการเตรียม virtual devices สำหรับ android มีขั้นตอนดังต่อไปนี้ สร้าง virtual device เลือก พัฒนา บน Android 6 เพิ่ม path ในระบบ เลือกให้ถูกต้องกับระบบที่ใช้งานอยู่
|
1 2 3 |
//mac os เพิ่มเติมใน ~/.bash_profile export ANDROID_HOME=/Users/mee/Library/Android/sdk export PATH=$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools/bin:$PATH |
เริ่มต้น พัฒนา mobile project ด้วย react native ให้ติดตั้ง node ในเครื่องให้เรียบร้อย ใช้ npm เพื่อติดตั้ง
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
$ npm install -g create-react-native-app $ mkdir ~/ReactProject $ cd ~/ReactProject $ create-react-native-app Firstproject Success! Created Firstproject at /Users/mee/ReactProject/Firstproject Inside that directory, you can run several commands: yarn start Starts the development server so you can open your app in the Expo app on your phone. yarn run ios (Mac only, requires Xcode) Starts the development server and loads your app in an iOS simulator. yarn run android (Requires Android build tools) Starts the development server and loads your app on a connected Android device or emulator. yarn test Starts the test runner. yarn run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd Firstproject yarn start Happy hacking! // ทดสอบ $ cd Firstproject $ yarn start Your app is now running at URL: exp://192.168.1.35:19000 |
ต่อมาให้ติดตั้ง app ชื่อ expo และ กด Scan QR Code ไปยัง bar code เพื่อทำการเชื่อมต่อระหว่าง app.js และเครื่อง มือถือเรา
|
1 2 3 4 5 |
› Press a to open Android device or emulator, or i to open iOS emulator. › Press s to send the app URL to your phone number or email address › Press q to display QR code. › Press r to restart packager, or R to restart packager and clear cache. › Press d to toggle development mode. (current mode: development) |
หากเราต้องการ…
Flutter คือ Google Mobile ui framework ที่ถูกพัฒนาขึ้นมาใหม่ เพื่อให้สามารถพัฒนา application ให้มีความสวยงามและมีประสิทธิภาพมากขึ้น รองรับการพัฒนา Native App ทั้ง IOS และ Android การใช้งานสามารถใช้ร่วมกับ IDE เช่น Android Studio, Visual Code , Intellij เป็นต้น การติตตั้งร่วมกับ Android Studio ด้วยการคิดตั้ง plugin ดังนี้ ติดตั้ง flutter command การติดตั้งจะติดตั้ง จาก github ดังนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// Clone $ git clone -b beta https://github.com/flutter/flutter.git //set ตัวแปร PATH ให้เรียบร้อย สำหรับ linux ตั้งเพิ่มใน ~/.bash_profile ด้วย // ส่วน window ก็ต้องเพ่ิมใน system environment $ export PATH=`pwd`/flutter/bin:$PATH $ flutter Checking Dart SDK version... Downloading Dart SDK from Flutter engine e61bb9ac3a3fd789754e2e54220bcfc27076a857... Unzipping Dart SDK... Updating flutter tool... Manage your Flutter app development. ╔════════════════════════════════════════════════════════════════════════════╗ ║ Welcome to Flutter! - https://flutter.io ║ ║ ║ ║ The Flutter tool anonymously reports feature usage statistics and crash ║ ║ reports to Google in order to help Google contribute improvements to ║ ║ Flutter over time. ║ ║ ║ ║ Read about data we send with crash reports: ║ ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting ║ ║ ║ ║ See Google's privacy policy: ║ ║ https://www.google.com/intl/en/policies/privacy/ ║ ║ ║ ║ Use "flutter config --no-analytics" to disable analytics and crash ║ ║ reporting. ║ ╚════════════════════════════════════════════════════════════════════════════╝ //ติดตั้ง Dependency $ flutter doctor Downloading Material fonts... 2.2s Downloading package sky_engine... 1.5s Downloading common tools... 5.1s Downloading windows-x64 tools... 29.9s Downloading android-arm-profile/windows-x64 tools... 6.1s Downloading android-arm-release/windows-x64 tools... 6.6s Downloading android-arm64-profile/windows-x64 tools... 15.0s Downloading android-arm64-release/windows-x64 tools... 8.3s Downloading android-x86 tools... 30.5s Downloading android-x64 tools... 11.8s Downloading android-arm tools... 10.2s |
อ้างอิงจาก https://flutter.io/get-started/editor/ การใช้งานร่วมกับ Visual Code สามารถทำได้ดังนี้
|
1 2 3 4 |
1) เปิด VS code 2) กด View > Command Palette 3) เลือก Extensions: Install Extension’ 4) ใส่ค่า 'dart code' เพื่อค้นหา และทำการติดตั้ง |
Validate Setup
|
1 2 3 |
1) เปิด VS code 2) กด View > Command Palette 3) พิมพ์ 'Flutter: Run Flutter Doctor' |
การ start ios…