[Vue Native] คือ อะไร ทำความรู้จัก และเริ่มต้นสร้าง Project

Vue Native คือ Mobile Framework ที่สามารถ build mobile app ได้ ซึ่ง Vue Native ถูกออกแบบมาเพื่อให้ทำงานร่วมกับ React Native มันคือ Wrapper ที่ห่อหุ้ม React Native APIs ทำให้ผู้พัฒนาสามารถใช้ Vue.js ในการพัฒนาได้

เรียกได้ว่าสิ้นสุดการรอคอยของชาว Vue.js ที่ต้องการ build mobile app แต่ไม่ชอบ Syntax ของเจ้าตัว React ล่าสุดเมื่อเร็ว ๆ นี้ก็ปล่อยออกมาเรียบร้อยกับ Vue Native (vue-native-core) โดยเจ้าตัวนี้เนี่ย ได้ Fork มาจาก react-vue ครับ

ในบทความนี้ทางผู้เขียนจะทำการติดตั้งและลองสร้าง Project ดูครับ

สำหรับท่านผู้อ่านที่สงสัยว่า React Native คืออะไร สามารถดูได้ที่ลิงค์ด้านล่าง

[React Native] คืออะไร ทำความรู้จัก และเริ่มต้นสร้าง Project

Vue.js คือ อะไร ?

ก่อนจะเข้าเรื่อง Vue Native มาดูกันก่อนว่า Vue.js นั้นคืออะไร

Vue.js คือ JavaScript Framework ตัวหนึ่งที่สามารถสร้าง Web application เป็นแบบ SPA (Single Page Application) เป็นตัวที่กำเนิดมาหลังจาก React และ Angular โดย Concept ของการเขียน มีนักพัฒนาหลาย ๆ คน กล่าวว่ามันคือ Framework ที่รวมข้อดีของ React และ Angular มาไว้ด้วยกัน ทั้งนี้ทำให้ Vue.js มีความนิยมค่อนข้างสูงในปัจจุบัน

หากท่านผู้อ่านท่านใด้อยากทราบรายละเอียดข้อดี ข้อเสียมากกว่านี้ ขอแนะนำให้อ่านบทความจาก babelcoder จากลิงค์ด้านล่างครับ

[Vue2#1] รู้จัก Vue.js และคุณสมบัติใหม่ใน Vue 2

หรืออยากจะลองสร้างโปรเจคด้วย Vue.js แนะนำบทความของพี่อ๊อฟ {DevAOF} ครับที่ลิงค์ด้านล่าง

มาทำความรู้จักกับ Javascript Front-end framework ที่ชื่อว่า Vue.js

การติดตั้ง Tools สำหรับการ Build Mobile App ด้วย Vue Native

ก่อนอื่นก็คือจะต้องมี Node.js อยู่ในเครื่อง หากท่านผู้อ่านยังไม่มีให้ทำการติดตั้งให้เรียบร้อยครับ และเมื่อมี Node.js แล้วให้เปิด Terminal หรือ Cmd และ Run คำสั่งติดตั้ง React Native Cli ด้วยคำสั่งนี้ครับ

npm install -g react-native-cli

การ Config หรือการติดตั้ง Tools ที่ต้องใช้ จะอ้างอิงตาม React Native เลยครับ โดยตาม Documents ของ Vue Native ได้แบ่งออกเป็น 2 หัวข้อดังนี้

• Setup with Vue Native Cli คือ วิธีที่ใช้ Vue Native Cli ซึ่งจะติดตั้งง่าย สะดวกและรวดเร็ว โดย Expo.js เข้ามาช่วยในการ Build ในส่วนนี้จะเหมาะกับงานเล็กครับ ไม่ต้องยุ่งกับส่วนที่เป็น Native Code แต่มีข้อดีคือ เข้าถึง iOS device ได้ แม้จะไม่มี Mac device
• Setup with React Native คือ วิธีที่ใช้การติดตั้งเหมือน React native และเพิ่ม Config สำหรับการใช้งาน Vue.js ซึ่งเหมาะสำหรับงานจิ๋ว ๆ ไปจนถึงงานช้าง

Setup with Vue Native Cli

โดยขอแบ่งเป็น 2 Step ตาม Documents ของ Vue Native ดังนี้

Step 1 Install

ให้ทำการเปิด Terminal หรือ Cmd และ Run command ดังนี้ (ทางผู้เขียนใช้ชื่อ Project ว่า myVueNative)

npm install -g create-react-native-app
npm install -g vue-native-cli
vue-native init myVueNative

หากขั้นตอนที่ Run npm install -g vue-native-cli ท่านผู้อ่านเจอ Error ดังภาพ

ให้ทำการ Install lodash โดยใช้คำสั่ง

npm install -g lodash

และกลับไป Run คำสั่ง Install อีกครั้งตามขั้นตอนข้างต้น

Step 2 Running The App

เมื่อ Install เสร็จแล้ว ต่อไปคือคำสั่ง Start ซึ่งจะมีด้วยกัน 3 คำสั่งดังนี้

• npm start คือ สั่ง Start ในรูปแบบของ Expo.js ซึ่งจะมีคำสั่งอื่น ๆ และ QR Code สำหรับการทดสอบการใช้งานผ่าน Expo Client App (Android, iOS)
• npm run ios คือ คำสั่งสำหรับท่านผู้อ่านที่ใช้ Mac เท่านั้น มันจะทำการเปิด iOS Emulator และ Build App ทันที
• npm run android คือ คำสั่งที่จะ Build App สำหรับ Android ครับ แต่ว่าต้องเปิด Emulator เอง

โดยทางผู้เขียนเลือก npm start (ก็มันสะดวกสุดนี่เนอะ) ดังนี้

cd myVueNative
npm start

จะได้ผลลัพธ์ดังภาพ

ซึ่งท่านผู้อ่าน สามารถ Scan QR Code เพื่อเปิด App ได้เลย หรือว่าเลือก Option อื่น ๆ ที่มีให้ก็ได้ครับ ซึ่งทางผู้เขียนทดสอบโดยกดปุ่ม i มันก็จะเปิด iOS emulator ดังภาพด้านล่าง

ถือว่าการติดตั้งด้วยวิธี Setup with Vue Native Cli เป็นอันสำเร็จ

Setup with React Native

โดยขอแบ่งเป็น 5 Step ตาม Documents ของ Vue Native ดังนี้

Step 1 Create React Native Project

เปิด Terminal หรือ Cmd มา Run command นี้เพื่อสร้าง Project (ทางผู้เขียนใช้ชื่อว่า myVueNativeRN)

react-native init myVueNativeRN
cd myVueNativeRN

Step 2 Install Vue Native

เมื่อ cd มาที่ Project ของเราแล้วให้ทำการ Install Vue Native โดย Run command ดังนี้

npm install vue-native-core vue-native-helper --save
npm install vue-native-scripts --save-dev

Step 3 Configure the React Native Packager

สร้างไฟล์ vueTransformerPlugin.js ในระดับ root ของ Project และ copy code เหล่านี้ไปใส่ (ดู React Native version ให้ถูกกับ Project เราด้วยนะครับ)

// For React Native version 0.52 or later
var upstreamTransformer = require("metro/src/transformer");

// For React Native version 0.47-0.51
// var upstreamTransformer = require("metro-bundler/src/transformer");

// For React Native version 0.46
// var upstreamTransformer = require("metro-bundler/build/transformer");

var vueNaiveScripts = require("vue-native-scripts");
var vueExtensions = ["vue"];

module.exports.transform = function({ src, filename, options }) {
  if (vueExtensions.some(ext => filename.endsWith("." + ext))) {
    return vueNaiveScripts.transform({ src, filename, options });
  }
  return upstreamTransformer.transform({ src, filename, options });
};

จะได้ผลลัพธ์ดังภาพด้านล่าง

ต่อไปที่ root ดูว่ามีไฟล์ rn-cli.config.js หรือไม่ ถ้าไม่มีให้สร้างขึ้นมา และ Copy code เหล่านี้ไปใส่

module.exports = {
  getTransformModulePath() {
    return require.resolve("./vueTransformerPlugin.js");
  },
  getSourceExts() {
    return ["vue"];
  }
};

จะได้ผลลัพธ์ดังภาพด้านล่าง

Step 4 Create A Vue File

ต่อไปให้ลบไฟล์ App.js ที่อยู่ในระดับ root และสร้างไฟล์ App.vue ขึ้นมา และ Copy code เหล่านี้ไปใส่

<template>
  <view class="container">
    <text class="text-color-primary">My Vue Native App</text>
    </view>
</template>

<style>
.container {
  background-color: white;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.text-color-primary {
  color: blue;
}
</style>

จะได้ผลลัพธ์ดังภาพด้านล่าง

Step 5 Running The App

Run App ซึ่งจะใช้ คำสั่งของ React Native ในการ Run มี 2 คำสั่งคือ

• react-native run-ios
• react-native run-android

แต่ก่อนอื่นจะต้องติดตั้ง dependencies ที่จำเป็นที่ต้องใช้เสียก่อน โดยท่านผู้อ่านสามารถดูได้ที่บทความด้านล่างนี้ ในหัวข้อ Build Projects with Native Code

[React Native] คืออะไร ทำความรู้จัก และเริ่มต้นสร้าง Project

เมื่อทำการติดตั้งเสร็จแล้ว ผู้เขียนจะขอ Run iOS เพื่อทดสอบให้ดูอย่างเดียว (ส่วน Android จะต้องสร้างและเปิด Android Emulator ให้เรียบร้อยเสียก่อน ซึ่งสามารถทำได้ตามลิงค์ด้านบนครับ ในหัวข้อย่อย Run Android) และเมื่อ react-native run-ios จะได้ผลลัพธ์ดังภาพ

ถือว่าการติดตั้งด้วยวิธี Setup with React Native เป็นอันสำเร็จ

ทดสอบการใช้งาน

เปิดไฟล์ App.vue ขึ้นมาครับ และลองเปลี่ยน Code ดูครับ โดยผู้เขียนเปลี่ยนเป็นตามนี้ครับ

<template>
   <view class="container">
      <text class="text-color-primary">I'm JED.</text>
   </view>
</template>
<style>
   .container {
      background-color: white;
      align-items: center;
      justify-content: center;
      flex: 1;
   }
   .text-color-primary {
      color: green;
      font-size: 30;
   }
</style>

ก็จะได้ผลลัพธ์ดังนี้ครับ

ถือว่าทดสอบสำเร็จ

การใช้งานกับ Lib ต่าง ๆ และตัวอย่าง App

มีตัวอย่างที่ใช้ Nativebase(UI Framework) ให้ดูด้วยครับ

GeekyAnts/KitchenSink-Vue-Native

แล้วก็มีตัวอย่างการสร้าง App อีกด้วย

Introducing Vue Native

สรุป

เทคโนโลยีที่ใช้ส่วนใหญ่ก็คือ React Native แต่จะสามารถเขียน Code ได้ด้วย Syntax ของ Vue.js เท่าที่เห็น Component ที่มีให้ใน Vue Native ก็น่าจะเพียงพอแล้วสำหรับการสร้าง App ซัก 1 ตัว ใน version ปัจจุบันตอนนี้คือ 0.0.1-alpha. 1 ถ้าจะให้ดีแนะนำว่ารอดูอีกซักพักดีกว่าครับ อาจจะมีบัคที่ทำให้ปวดหัวก็เป็นได้

สุดท้ายนี้ขอบคุณทุกท่านครับที่เข้ามาอ่าน แล้วพบกันใหม่ในบทความหน้าครับ

หากท่านผู้อ่านมีคำถามหรือข้อสงสัย หรือมีคำแนะนำ อยากติชม สามารถติดต่อผู้เขียนได้เลยครับ

Reference

• https://vuejs.org/v2/api/#Directives
• https://vue-native.io/docs/basic-components.html
• https://vue-native.io/docs/installation.html
• https://github.com/GeekyAnts/vue-native-core
• https://github.com/GeekyAnts/KitchenSink-Vue-Native
• https://medium.com/@geekyants/introducing-vue-native-b66f71d50438