เริ่มโปรเจกต์ React Native Expo ของคุณโดยใช้เทมเพลตที่สร้างไว้ล่วงหน้า

บทนำ ในส่วนนี้ คุณจะได้เรียนรู้วิธีเริ่มต้นกับ react native โดยใช้ expo เทมเพลตและวิธีเชื่อมต่อกับ back4app ใน 4 ขั้นตอนง่ายๆ ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป backend back4app หมายเหตุ ติดตาม บทเรียนการสร้างแอป parse ใหม่ เพื่อเรียนรู้วิธีสร้างแอป parse บน back4app npm หรือ yarn ติดตั้งในระบบของคุณ ติดตั้ง expo cli ตาม คู่มือนี้ 1 รับเทมเพลต ในการรับโปรเจกต์เทมเพลต ดาวน์โหลดและแตกไฟล์ซอร์สโค้ดที่ ที่เก็บ github ของเรา ลงในเครื่องของคุณหรือโคลนโปรเจกต์ด้วยคำสั่ง git รันคำสั่งต่อไปนี้เพื่อดาวน์โหลดและแตกไฟล์เทมเพลตโดยใช้ curl หรือ เรียกใช้คำสั่งต่อไปนี้เพื่อโคลนเทมเพลตโดยใช้ git 2 ดาวน์โหลดการพึ่งพาของแอป ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง npm npm หรือ yarn yarn ในระบบของคุณ ดูที่ get npm หรือ get yarn คู่มือสำหรับข้อมูลเพิ่มเติม 2\ ในเทอร์มินัลของคุณ ให้เรียกใช้ cd react native template master cd react native template master และเปิดไดเรกทอรีรากของโปรเจกต์ 3\ เรียกใช้ npm install npm install เพื่อติดตั้งการพึ่งพา ในบทแนะนำนี้ เรากำลังใช้ npm เพื่อจัดการการพึ่งพา แต่คุณสามารถใช้ yarn แทนได้ 3 ตั้งค่าข้อมูลรับรองของแอป เพื่อให้แอปเชื่อมต่อกับเซิร์ฟเวอร์ back4app ได้อย่างปลอดภัย คุณต้องให้ parse javascript sdk ข้อมูลรับรองของแอป ค้นหาข้อมูลรับรอง app id app id และ javascript key javascript key โดยไปที่ dashboard dashboard > การตั้งค่าแอป การตั้งค่าแอป > ความปลอดภัย & คีย์ ความปลอดภัย & คีย์ ในไดเรกทอรีรากของโปรเจกต์ ให้เปิดไฟล์ที่ app/(tabs)/index tsx app/(tabs)/index tsx ไฟล์ควรมีลักษณะดังนี้ index tsx parse initialize( 'your application id here', // replace with your parse application id 'your javascript key here' // replace with your parse javascript key ); parse serverurl = 'https //parseapi back4app com/'; คัดลอกและวาง app id app id และ javascript key javascript key ของคุณลงในนั้น 4 ทดสอบการเชื่อมต่อของคุณ ภายใน app js app js ของโปรเจกต์เทมเพลตของคุณ มีฟังก์ชันที่สร้างวัตถุ person และอีกฟังก์ชันสำหรับดึง people ของแอปของคุณไปยังฐานข้อมูล back4app ของคุณ index tsx // function to create a new person async function createperson() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const personobject = new personobject(); personobject set("name", "back4app user"); const result = await personobject save(); setresult(`object created with id ${result id}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } async function fetchpeople() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const query = new parse query(personobject); const results = await query find(); const names = results map(result => ({ objectid result id, name result get("name"), })); setresult(`fetched names ${json stringify(names, null, 2)}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } เพื่อรันและทดสอบการเชื่อมต่อแอปของคุณ เปิดเทอร์มินัลของโปรเจกต์ของคุณ รัน npm run android npm run android หรือ npm run ios npm run ios หรือ npm run start npm run start เพื่อเปิดแอปพลิเคชันบนแพลตฟอร์มที่คุณต้องการ เสร็จสิ้น! ในจุดนี้ คุณได้เรียนรู้วิธีการเริ่มต้นและรันแอปพลิเคชัน react native ที่เชื่อมต่อกับ back4app