Hybrid CrossPlatform Development [Part 1-Preparation]
ก่อนอื่นเรามาดูเป้าหมายที่เราจะทำกันก่อนน่ะครับตามรูปข้างล่าง !!!
แต่ก่อนจะไปถึงเป้าหมายที่ตั้งไว้ ทุกท่านต้อง Check ความพร้อมของเครื่องที่ทุกคนใช้ พัฒนาก่อน คำถามแรกที่ถามตัวเองก่อนเลยคือ เครื่องของเราเป็น MAC ? Windows ? ผมเองใช้ MAC น่ะครับ แล้วถ้าอยากจะพัฒนาแบบ 3 Platforms จริงๆ ก็แน๊ะนำให้ใช้ MAC ด้วยครับ แต่ใช้ Windows ก็ได้น่ะครับ เพียงแต่จะ Test ได้แค่ Web Browser กับ Android เท่านั้น
ทำไมถึงแน๊ะนำให้ใช้ MAC ?
หลายท่านคงจะทราบคำตอบแล้ว … คือเพราะศาสดาของพวกเราผู้ล่วงลับไปแล้วได้สร้าง IOS Devices ขึ้นมาแล้วดันมีคนใช้เกินครึ่งโลก จึงมาพร้อมกับความซวยคือ การจะรัน APP บน IOS Devices มันบังคับให้ท่านต้องใช้ MAC ไปด้วย เพราะเวลา compile Source Code ไปเป็น .ipa ที่รันบน IOS Devices ท่านได้มันต้อง Compile ผ่าน Xcode เพราะฉะนั้นหากใครอยากเดินสายนี้ ไปถอย MAC มาซ่ะ (มือ 2 ถูกๆ ก็เยอะครับ หากใครใช้ Macbook Pro ผมแน๊ะนำปี 2011 เป็นต้นไปใช้ได้หมดเลยครับ ราคาก็ไม่แพง 1x,xxx บาท สามารถหาซื้อได้ครับ
ขั้นตอนมีทั้งหมด 4 Step น่ะครับดังนี้
STEP 1 — Welcome to React (ทั้ง MAC และ Windows)
STEP 2 — Welcome to React Native | Android (ทั้ง MAC และ Windows)
STEP 3 — Welcome to React Native | IOS (เฉพาะ MAC เท่านั้น)
STEP 4 — Choose your preferred EDITOR
STEP 1 — Welcome to React (ทั้ง MAC และ Windows)
มี Package มากมายที่ต้อง Install บนเครื่องของคุณนะครับขอไม่พูดถึงตรงนี้ ถือว่าเป็นโจทย์ที่ทุกท่านต้องทำน่ะครับ แน๊ะนำว่าให้เริ่มตามนี้เลยครับ
https://github.com/reactbkk/1.0.0/blob/gh-pages/slide-intro-reactJS.pdf
ที่มา จากงาน ReactJS Bangkok 1.0.0 Side ของ คุณ Wasit JingJit, Co-Founder & Developer @ Storylog ขอขอบคุณมา ณ.ที่นี้ด้วยครับ
ทำตาม Slide №102 — №110 ได้เลยครับ อธิบายดีมากครับทั้ง MAC | Windows เสร็จแล้วมันจะเปิด Default Web Browser ของเครื่องทุกคนขึ้นมาโดยอัตโนมัติเป็นอันเสร็จ STEP 1 ครับผม
STEP 2—Welcome to React Native | Android (ทั้ง MAC และ Windows)
ผมแน๊ะนำว่าให้ ลง Genymotion ก่อนน่ะครับ Download ได้ที่ Website https://www.genymotion.com/ แต่เค้าบังคับให้สมัคร Account ก่อน Link Download จึงจะปรากฎ ซึ่งจริงๆเหมือนว่าหากเราใช้ในทาง Commercial เราต้องเสียเงินน่ะ หรืออาจจะใช้ BlueStack ได้เหมือนกันน่ะครับ เพียงแต่ผมไม่เคยใช้ หรือหากใครขี้เกียจลง Emulator วุ่นวายจะใช้ Devices android จริงๆ เสียบ USB เข้าที่เครื่องที่ใช้พัฒนาเลยก็ได้ครับแล้วแต่ชอบ
ทำตาม Link นี้ได้เลยครับ
https://facebook.github.io/react-native/docs/getting-started.html
โดยเลือก Mobile OS เป็น Android และ Development เป็น OS ที่ท่านใช้
ขั้นตอนจะปรากฎมาให้ทำตามเมื่อเลือกตาม Option ดังภาพ ทำตามจนจบน่ะครับขั้นตอนนี้ต้องมีการลง Android SDK น่ะครับ ในวิธีทำเค้าแน๊ะนำให้ลง Android Studio แต่ถ้าใครไม่อยากใช้ก็ลงเฉพาะ SDK ก็ได้ครับเพียงแต่ขั้นตอนมันจะยากนิดนึง ระหว่างนี้เชื่อว่ามีปัญหาเกิดขึ้นเยอะแน่นอน เพราะถ้าไม่เคยทำ APP บน android มาเลยทุกท่านจะต้องปวดหัวเยอะมาก แต่ก็เป็นกำลังใจให้น่ะครับ ติดตรงไหนก็ถามมาแล้วกันครับแต่ก่อนถามแน๊ะนำว่าถาม Google ก่อนน่ะครับ มีทุกคำตอบบบ แค่ใช้เวลากับมันหน่อย
สุดท้ายจะได้หน้าตาประมาณนี้ครับ
แต่หากใครจิ้ม USB กับเครื่อง Android ของท่านมันก็จะรัน App นี้บนเครื่องท่านเลยได้แบบนี้เป็นอันเสร็จพิธีครับจบสิ้น STEP-2
STEP 3— Welcome to React Native | IOS (เฉพาะ MAC เท่านั้น)
ทำคล้ายๆ กับ STEP 2 เลยครับเพียงแต่เลือกขั้นตอนที่ Link ใน STEP — 2 เป็น Mobile OS : IOS , Development OS : MAC เสร็จแล้วก็ทำตามขั้นตอนครับ อันนี้ต้องมี Install XCODE สำหรับคนที่ไม่เคยลง ไม่จำเป็นต้องจ่ายเงินเพื่อได้มาซึ่ง Developer Account แล้วน่ะครับ ตอนนี้ Apple เค้าอนุญาติให้ถ้าแค่อยากจะ Test บนเครื่องตัวเองเฉยๆ สามารถเอา Apple ID ปกติไปผูกได้เลย ที่ต้องจ่ายเงินจริงๆ คือกรณีที่จะเอา App Publish ขึ้น App Store ครับ อันนี้จำเป็นต้องจ่ายปีล่ะ 3,990 บาท
ทำเสร็จแล้วจะได้หน้าตาประมาณนี้น่ะครับ ไม่ต้องเปิด XCODE เลย หรือ จริงๆ จะ Compile ผ่าน XCODE ก็ได้ แต่ไม่ขอพูดถึงน่ะครับ
STEP 4 — Choose your preferred EDITOR
เลือก EDITOR ที่จะใช้กับการพัฒนา React และ React Native ครับ จริงๆ ใช้อะไรก็ได้ครับ แต่เค้าแน๊ะนำตัวนี้มา (ไม่สามารถใช้ได้กับ Windows น่ะครับ T-T)
แต่ผมใช้ ATOM.io น่ะครับ ซึ่งจริงๆ มันเหมือนกันแหละครับ เพราะ Nuclide มันทำมาจาก ATOM แต่แตกออกมาเป็น Single App เพื่อใช้กับ React-Native โดยเฉพาะ จริงๆ ใช้ Nuclide ดีกว่าน่ะครับ ง่ายกว่าตัวช่วยเยอะ แต่ถ้าอยากดิบๆ เถื่อนๆ ก็ ATOM เอาอยู่ครับ
