Wednesday, May 23, 2018

React Native + Redux ตอนที่ 13 (จบ): จัดการข้อมูลด้วย Firebase

Firebase Database Firebase JSON schema Firebase database จะเก็บข้อมูลในรูปแบบของ JSON ซึ่งมันก็คือ javascript object นั่นแหละ ไม่ได้มีอะไรซับซ้อน คราวนี้มาดูหน้าตาของ database ของ schema ของระบบภายใน manager กันดูบ้าง หนึ่ง user จะมีความสัมพันธ์กับ employee แบบ 1-to-many หรือ...

React Native + Redux course ตอนที่ 12: Navigation

Navigation router in React Native ใน React Dom นั้น ใช้ react router ในการ navigate ไปยังหน้าต่างๆ ภายในระบบ แต่สำหรับ React Native นั้น หลักการแบบ router นั้นใช้ไม่ได้ ดังนั้น เราจึงต้องใช้ module...

React Native + Redux ตอนที่ 11: Redux ขั้นกลาง

 Next App เราจะเริ่มต้นสร้าง app ใหม่กันชื่อว่า manager ดังนั้น ก่อนอื่นเลย ให้เข้าไปที่ terminal แล้วพิมพ์คำสั่งต่อไปนี้ที folder ที่เราใช้เพื่อสร้างโปรเจ็กท์ จากนั้นให้สร้างไฟล์ manager/.eslintrc แล้วเพิ่ม code เข้าไปดังนี้ Manager App mockup Mockup ของ Manager App เป็นดังนี้ ระบบนี้เป็นระบบสำหรับการจัดการพนักงาน รวมไปถึงการไล่ออก ประกอบด้วยหน้าจอหลัก...

React Native + Redux ตอนที่ 10: ListView

React Native ListView รอบนี้เราจะเอา ListView ของ React Native ซึ่งเป็น component ที่ใช้สำหรับการแสดง list มาใช้งาน ให้เปิดไฟล์ tech_stack/src/components/LibraryList.js ขึ้นมา แล้วปรับแก้ไฟล์ดังนี้ พอเอาไปเปิด emulator ขึ้นมาจะได้หน้าตาดังรูป หน้าตาของ code ภายใน componentWilMount อาจจะดูแปลกๆ หน่อย แต่ไม่ต้องสนใจ เพราะมันเป็น...

React Native + Redux ตอนที่ 9: First Redux App.

List App with Redux เรามาเริ่มลงภาคปฏิบัติ Redux กันเลยดีกว่า เริ่มต้นเรามาดูกันก่อนว่า หน้าตาของ app ที่เราจะสร้างตัวต่อไปเป็นยังไง เราจะทำ app ที่มี list ของ technology stack ของระบบ React โดยมีคำบรรยายแทรกเพื่ออธิบายว่าแต่ละเทคโนโลยีภายใน stack ของ React นั้น มีคุณสมบัติ และทำหน้าที่อะไรบ้าง App....

React Native + Redux Course ตอนที่ 8: Redux 101

Redux 101 หมายเหตุ ข้อมูลส่วนใหญ่ภายใน tutorial ฉบับนี้อ้างอิงมาจากจาก https://medium.com/@rajaraodv/step-by-step-guide-to-building-react-redux-apps-using-mocks-48ca0f47f9a#.38tqsub93 Redux คือเฟรมเวิร์คระดับมาเฟียที่ React Apps แทบทุกตัวต้องเลือกใช้ แถมยังมีคนทำ ตัวอย่าง เอาไว้ให้เราได้ศึกษาอีกมากมาย ปัญหาของเฟรมเวิร์คตัวนี้ก็คือ มันมีองค์ประกอบมากมายเหลือเกิน ไม่ว่าจะเป็น "reducer", "action' 'action creator", "middleware" ฯลฯ ซึ่งน่าจะทำให้มือใหม่กระอักเลือดได้ไม่ยาก ดังนั้น ใน tutorial บทนี้ จะแสดงขั้นตอนการสร้าง Redux...

React Native + Redux course ตอนที่ 7: Authentication process

Firebase Authentication เราจะมาเริ่มเข้าสู่กระบวนการ Authentication ของจริงกันเลย โดยเราจะเริ่มต้นจาก Log In process ก่อนอื่น เราเริ่มต้นกันด้วย flow ของการ log in ก่อนเลย flow นี้ จะเริ่มต้นด้วยการ log-in หาก log in fail ระบบจะให้ register account ใหม่...

React Native + Redux course ตอนที่ 6: Firebase Authentication

Auth project เนื้อหาในตอนนี้เราจะเริ่มด้วยการสร้าง project ใหม่ขึ้นมาชื่อว่า auth ดังนั้น ให้เราเปิด terminal แล้วเข้าไปที่ folder ที่ใช้สำหรับสร้างโปรเจ็กท์ในเครื่องของคุณผู้อ่าน จากนั้น run คำสั่งต่อไปนี้ ติดตั้ง ESLint เนื่องจากหากเราต้องการใช้ ESLint เราจะต้องทำการติดตั้งให้กับโปรเจ็กท์นั้นๆ โดยให้เปิด terminal แล้วรันคำสั่งต่อไปนี้ใน root project จากนั้นสร้างไฟล์ชื่อว่า .eslintrc ไว้ที่...

React Native + Redux Course ตอนที่ 5: ปิดงานโปรเจ็กท์แรก

จัดการแหล่งข้อมูล เนื่องจากเนื้อหาในบทความตอนนี้มีขนาดยาวมาก ดังนั้น ผมจึงได้แนบ github code มาให้ เพื่อใช้สำหรับประกอบการทำความเข้าใจ ในกรณีที่ไม่อยากจะเขียน code ตามทีละบรรทัด https://github.com/himaeng/albums.git จากภาพ mockup ในส่วนของ Card มีสองงานที่เราต้องทำให้เสร็จ นั่นคือ จัดการเรื่องการดึงข้อมูลจาก remote source สร้าง list ของ album ทั้งหมด ซึ่งเราจะมาแก้กันทีละข้อ ดังนี้ 1. ดึงข้อมูลจาก...

React Native Course ตอนที่ 4: เจาะภาพรวมโปรเจ็กท์

ภาพรวมโปรเจ็กท์ Project Walkthrough โปรเจ็กท์ที่เรากำลังจะสร้างภายในคอร์สนี้ชื่อว่า albums (เราได้สร้างเอาไว้ในตอนที่แล้ว) โดยภายในโปรเจ็กท์ดังกล่าวนี้ จะมีโครงสร้างของ folder และ file ดังนี้ folder __tests__ เป็นโฟลเดอร์สำหรับเก็บ test code ต่างๆ ของโปรเจ็กท์เอาไว้ ซึ่งหากต้องการจะรัน test ของโปรเจ็กท์ เราสามารถรันคำสั่งดังต่อไปนี้ได้ใน root path ของ project เมื่อรันแล้วผลออกมาจะเป็นดังนี้ ซึ่งถือเป็นการรัน...