Quickstart

16 นาที

บทนำ คู่มือนี้จะช่วยให้คุณตั้งค่าและใช้งาน back4app กับโครงการใหม่หรือที่มีอยู่โดยใช้ react native cli คุณจะติดตั้ง parse sdk , เริ่มต้นด้วยคีย์แอปของคุณ และสร้างการเรียก api แรกของคุณเพื่อบันทึกและเรียกข้อมูลจาก back4app ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป ที่สร้างขึ้น https //www back4app com/docs/get started/new parse app บน 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 หรือไม่ สำหรับข้อมูลเพิ่มเติม โปรดตรวจสอบเอกสารทางการ ที่นี่ https //reactnative dev/docs/environment setup expo ติดตั้ง expo cli ทั่วโลก npm install g expo cli สร้างโปรเจกต์ react native ใหม่ expo init b4aproject cd b4aproject expo start 2 ติดตั้ง dependencies ในโปรเจกต์ react native ของคุณ ติดตั้ง parse javascript sdk และ asyncstorage โดยการรัน npm install parse @react native async storage/async storage save parse javascript sdk เพื่อรวมแอปของคุณกับเซิร์ฟเวอร์ back4app react native async storage เพื่อใช้ parse sdk จำเป็นต้องมีตัวจัดการ asyncstorage สำหรับ ios ให้เพิ่มการสนับสนุน asyncstorage แบบเนทีฟด้วย cd ios & pod install 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 ios\ เพื่อเปิดแอปพลิเคชันบนแพลตฟอร์มที่คุณต้องการ expo รัน \expo start\ , และทำตามคำแนะนำเพื่อดูแอปในเบราว์เซอร์หรืออุปกรณ์ของคุณ การแก้ไขปัญหา ปัญหาทั่วไปและวิธีแก้ไข metro พบข้อผิดพลาด ขณะพยายามแก้ไขโมดูล “idb keyval’ จากไฟล์ วิธีแก้ไข ไปที่ \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\ และเปลี่ยนแถวนี้ var eventemitter = require(' / / /react native/libraries/vendor/emitter/eventemitter'); เป็น นำเข้า eventemitter จาก 'react native/libraries/vendor/emitter/eventemitter'; ในไฟล์เดียวกัน \eventemitter js\ , เปลี่ยนแถวต่อไปนี้ module exports = eventemitter; เป็น export default eventemitter; ปัญหากับ babel ในกรณีที่คุณพบปัญหาใด ๆ กับ babel ให้พิจารณาอัปเดต babel config js เป็นดังนี้ module exports = function (api) { api cache(true); return { presets \['babel preset expo'], plugins \[ '@babel/plugin proposal export namespace from', 'react native reanimated/plugin', ], }; }; ขั้นตอนถัดไป คู่มือนี้ครอบคลุมการตั้งค่าเบื้องต้นและการจัดเก็บข้อมูลด้วย back4app สำรวจฟีเจอร์ parse รวมถึงการจัดเก็บข้อมูล ความสามารถแบบเรียลไทม์ การจัดเก็บข้อมูลในท้องถิ่น ฟังก์ชันคลาวด์ การตรวจสอบสิทธิ์ และการจัดเก็บไฟล์