Quickstart

บทนำ คู่มือนี้จะช่วยให้คุณตั้งค่าและใช้งาน back4app กับโครงการใหม่หรือที่มีอยู่โดยใช้ react native cli คุณจะติดตั้ง parse sdk , เริ่มต้นด้วยคีย์แอปของคุณ และสร้างการเรียก api แรกของคุณเพื่อบันทึกและเรียกข้อมูลจาก back4app ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป ที่สร้างขึ้น บน back4app npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm หรือ yarn ติดตั้งแล้ว npx https //www npmjs com/package/npx ตัวรันแพ็คเกจติดตั้งแล้ว 1 สร้างโครงการ react native ของคุณ มีสองวิธีหลักในการสร้างโครงการ react native react native cli และ expo เลือกตามสภาพแวดล้อมการพัฒนาและแพลตฟอร์มเป้าหมาย (ios หรือ android) react native cli คำแนะนำขึ้นอยู่กับระบบปฏิบัติการที่คุณพัฒนา และว่าคุณต้องการเริ่มพัฒนาสำหรับ ios หรือ android หรือไม่ สำหรับข้อมูลเพิ่มเติม โปรดตรวจสอบเอกสารทางการ ที่นี่ expo ติดตั้ง expo cli ทั่วโลก สร้างโปรเจกต์ react native ใหม่ 2 ติดตั้ง dependencies ในโปรเจกต์ react native ของคุณ ติดตั้ง parse javascript sdk และ asyncstorage โดยการรัน parse javascript sdk เพื่อรวมแอปของคุณกับเซิร์ฟเวอร์ back4app react native async storage เพื่อใช้ parse sdk จำเป็นต้องมีตัวจัดการ asyncstorage สำหรับ ios ให้เพิ่มการสนับสนุน asyncstorage แบบเนทีฟด้วย 3 รับ app keys ของคุณ หลังจากสร้างแอปของคุณบน back4app ให้ค้นหา app keys ของคุณที่ app settings > security & keys คุณจะต้องใช้ทั้ง application id และ javascript key เพื่อเชื่อมต่อ 4 เริ่มต้น parse และเชื่อมต่อกับ back4app เปิด index tsx และเริ่มต้น parse ด้วย application id และ javascript key index tsx import parse from 'parse/react native'; import asyncstorage from '@react native async storage/async storage'; // initialize parse only once parse setasyncstorage(asyncstorage); parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com/'; 5 บันทึกและเรียกคืนข้อมูล เมื่อ parse ถูกเริ่มต้นแล้ว ให้สร้างฟังก์ชันสองฟังก์ชันใน index tsx เพื่อบันทึกและดึงข้อมูลจาก back4app // 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); } } 6 ทดสอบแอปของคุณ เปิดเทอร์มินัลของโปรเจกต์ของคุณ รันโปรเจกต์ react native cli รัน npx react native run android npx react native run android หรือ npx react native run ios npx react native run ios เพื่อเปิดแอปพลิเคชันบนแพลตฟอร์มที่คุณต้องการ expo รัน expo start expo start , และทำตามคำแนะนำเพื่อดูแอปในเบราว์เซอร์หรืออุปกรณ์ของคุณ การแก้ไขปัญหา ปัญหาทั่วไปและวิธีแก้ไข metro พบข้อผิดพลาด ขณะพยายามแก้ไขโมดูล “idb keyval’ จากไฟล์ วิธีแก้ไข ไปที่ metro conf js metro conf js และเปลี่ยนเป็นไฟล์นี้ 1 const { getdefaultconfig } = require("@expo/metro config"); 2 const defaultconfig = getdefaultconfig( dirname); 3 defaultconfig resolver assetexts push("cjs"); 4 module exports = defaultconfig; ไม่สามารถแก้ไขโมดูล ‘eventemitter’ วิธีแก้ไข ไปที่ไฟล์ node modules\parse\lib\react native\eventemitter js node modules\parse\lib\react native\eventemitter js และเปลี่ยนแถวนี้ เป็น ในไฟล์เดียวกัน eventemitter js eventemitter js , เปลี่ยนแถวต่อไปนี้ เป็น ปัญหากับ babel ในกรณีที่คุณพบปัญหาใด ๆ กับ babel ให้พิจารณาอัปเดต babel config js เป็นดังนี้ ขั้นตอนถัดไป คู่มือนี้ครอบคลุมการตั้งค่าเบื้องต้นและการจัดเก็บข้อมูลด้วย back4app สำรวจฟีเจอร์ parse รวมถึงการจัดเก็บข้อมูล ความสามารถแบบเรียลไทม์ การจัดเก็บข้อมูลในท้องถิ่น ฟังก์ชันคลาวด์ การตรวจสอบสิทธิ์ และการจัดเก็บไฟล์