كيفية إنشاء تطبيق قائمة المهام باستخدام React Native و Expo و Back4App

React Native هو أحد أشهر الأطر المستخدمة في تطوير الأجهزة المحمولة. تم إنشاؤه بواسطة Facebook استنادًا إلى Javascript. يمكن استخدامه لإنشاء تطبيقات لنظام iOS أو Android مع إمكانات منصة أصلية.

Expo هو أداة تساعدك على تسريع وقت التطوير والاختبار.

تشرح هذه المقالة كيف يمكنك دمج تطبيق React Native مع Back4App. بعد الانتهاء من هذا البرنامج التعليمي خطوة بخطوة، ستكون قد أنشأت مشروعًا لمعالجة قائمة المهام.

هل هذه هي المرة الأولى التي تستخدم فيها Back4App؟ إذا كان الأمر كذلك، فأنت بحاجة إلى القيام بالتسجيل.

الإحماء

تكوين Expo

وفقًا لتعليمات React Native، تحتاج إلى تثبيت Node 10+ و Expo CLI باستخدام الأمر التالي:

npm install -g expo-cli

لمزيد من التفاصيل: https://facebook.github.io/react-native/docs/getting-started.html

تنزيل مشروع البداية

لتحميل مشروع قالب ToDoListApp، قم بتشغيل الأوامر التالية في جهازك الطرفي

wget "https://github.com/templates-back4app/react-native-todoapp/archive/template.zip" -O template.zip؛ فك ضغط قالب.zip؛ rm template.zip & & cd react-native-todo-todoapp && npm install

ملاحظة: تذكر أنك بحاجة إلى استبدال مفاتيح تطبيق Back4App الخاص بك. افتح ملف ملف constans/Keys.js والصق المفاتيح التالية.

رسم تخطيطي لتطبيقك

إذا اتبعت التعليمات المرتبطة أعلاه، يجب أن ترى مخطط التدفق هذا:

diagramreactnative

 

ابدأ تشغيل تطبيق قائمة المهام

الخطوة 1 – إنشاء صفحة تسجيل الدخول

لتسجيل دخول المستخدمين إلى تطبيقنا، استخدم طريقتنا لمنحهم إمكانية الوصول إلى حساباتهم:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
onLogin = غير متزامن() =>{
  دع  
     اسم المستخدم =(this.state.username).trim(),
     كلمة المرور =(this.state.password).trim()، كلمة المرور =(this.state.password).trim();

  إذا (اسم المستخدم === "" || كلمة المرور === "" ) { {
    هذا.setState(()) => ({ nameError: ``ملءالحقول بشكل صحيح.`` )));
   } آخر { {
    محاولة {
       انتظر Parse.User.logIn(username.toString()، password.toString()));
      // هذا.submitAndClear();
      هذا.props.navigation.navigate.navigate('HomeStack');       
     } التقاط (خطأ) { 
      هذا.setState(()) => ({ nameError: error.message }));
      إرجاع (خطأ)
     }
   }
 }

تحقق من الكود الكامل هنا: https://github.com/templates-back4app/react-native-todoapp/blob/login-page/screens/LogInScreen.js

الخطوة 2 – صفحة التسجيل

بعد الانتهاء من الخطوة السابقة، يجب أن تطلب من المستخدمين التسجيل في تطبيقنا. توضح الشيفرة التالية عملية تسجيل نموذجية:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
onSignUp = غير متزامن() => {

  دع  
     اسم المستخدم = this.state.username,
     البريد الإلكتروني = هذا.state.email,
     كلمة المرور = this.state.password;

  إذا (إذا كان (username.trim() === "" ||اسم المستخدم === غير محدد ||البريد الإلكتروني.trim() === "" | | البريد الإلكتروني === غير محدد || كلمة المرور.trim() === "" || كلمة المرور === غير محدد ) { {
    هذا.setState(()) => ({ nameError: ``ملءالحقول بشكل صحيح.`}));  
   } آخر { {
    محاولة {
       Parse.User.logOut();
      دع المستخدم = مستخدم جديد Parse.User();
       user.set("اسم المستخدم"، اسم المستخدم);
       user.set("البريد الإلكتروني"، البريد الإلكتروني);
       user.set("كلمة المرور"، كلمة المرور);
      تشكل النتيجة = انتظر user.signUp();
      
       AsyncStorage.setItem('SessionToken', result.getSessionToken()));
       AsyncStorage.setItem('username', result.getUsername())؛

      هذا.submitAndClear();

      هذا.navigateToPage('HomeStack');           
     } التقاط (خطأ) {
       وحدة التحكم.log(خطأ)
        هذا.setState(()) => ({ nameError: error.message }));
     }
   }
 }

راجع الشيفرة الكاملة هنا: https://github.com/templates-back4app/react-native-todoapp/blob/signup-page/screens/SignUpScreen.js

الخطوة 3 – إعداد صفحة إعادة تعيين كلمة المرور

تخيل أنه طالما لدينا تدفق مصادقة، قد ينسى المستخدمون كلمة المرور الخاصة بهم. يتيح Parse Server إعادة تعيين كلمات مرور المستخدم بشكل آمن. قم بتكوين وظيفة تطلب من المستخدم عنوان بريده الإلكتروني:

1
2
3
4
5
6
7
8
9
إعادة تعيين كلمة المرور = () => { {
   Parse.User.User.requestPasswordReset(this.state.email)
   .then(()) => { {
    هذا._التنبيه('نجاح'، 'تم إرسال بريد إلكتروني إلى عنوانك.'، 'تسجيل الدخول'، 'تسجيل الدخول','LogInStack');
    هذا.submitAndClear();
   })).cat((خطأ) => {
    هذا._التنبيه('خطأ'، error.message, 'تسجيل الدخول'، 'تسجيل  الدخول', 'LogInStack');
   });
 }

تحقق من الكود الكامل هنا: https://github.com/templates-back4app/react-native-todoapp/blob/resetpassword-page/screens/RestorePasswordScreen.js

الخطوة 4 – صفحة قائمة المهام

قم بتكوين التخطيط والوظائف لإنشاء عنصر وقراءته وتحديثه وحذفه من القائمة.

الخطوة 4.1 – إنشاء عنصر

استخدم دالة الحفظ لتخزين عنصر في Parse Cloud. هذا يجعل من الممكن إنشاء عنصر جديد في تطبيقك. انظر إلى متصفح البيانات في تطبيقك على Parse:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
إنشاء عنصر = () => {
  دع العنصر = this.state.item;

  إذا كان (العنصر === "" || | | عنصر === غير محدد)؛ {
    هذا.setState(()) => ({ nameError: ``ملءالحقول بشكل صحيح.``} ));
   } آخر {
    const Todo = Parse.Object.extend("Todo");
    يشكل تودو = تودو جديد ();

     تعيين("مهمة", this.state.item);
     todo.set("userId", );
    
     todo.save().then(كائن => { {
      هذا.readAllAtems();
      هذا.setState({العنصر:'}))
     })).catch(خطأ=> {تنبيه (خطأ)})
   }
 }

الخطوة 4.2 – قراءة جميع الكائنات

تُستدعى هذه الدالة عدة مرات لأنها تُستخدم لبدء شاشة أو تحديث أو حذف كائن. يمكن استرجاع البيانات باستخدام الشيفرة التالية:

1
2
3
4
5
6
7
8
readAllItems = مزامن() => { {
  const idUser = انتظر Parse.User.currentAsync();
  const query = جديد Parse.Query("Todo");
   الاستعلام.موجود("مهمة");
   الاستعلام.equTo('userId'، idUser);
  const resultQuery = انتظر query.find();
  هذا.setState({النتائج:resultQuery});
 }

الخطوة 4.3 – تحديث عنصر

بعد إنشاء عنصر، يجب أن تكون هناك طريقة لتحديثه في المستقبل. الأمر بسيط، ما عليك سوى استرداد ذلك العنصر واستدعاء طريقة الحفظ باستخدام هذه الشيفرة:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
تحديثالعنصر = () => {
 const query = استعلام جديد Parse.Query("Todo");
   query.get(this.state.idObject).then(object => { {
     object.set("مهمة", this.state.updateValueDialog);
     كائن.save().then(objUpdate => {
      this.setStateState({updateValueDialog:'، dialogVisible: false}))
      هذا.readAllItems();
     });
   });
}

الخطوة 4.4 – حذف عنصر

العمل مع قائمة من العناصر يستلزم السماح للمستخدمين بحذف عناصرهم بأنفسهم.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
حذفإذن = غير متزامن()() => {
  const query = استعلام جديد Parse.Query("Todo");
  const object = await query.get(this.state.idObject);
  محاولة{
     object.destroy();
    هذا.getAllData();
   } التقاط (ه)؛ {
     تنبيه (ه)
   }
 }

تحقق من الكود الكامل هنا: https://github.com/templates-back4app/react-native-todoapp/blob/home-page/screens/HomeScreen.js

الكلمات الأخيرة

هذا كل شيء لتطبيق قائمة المهام! ملاحظة، قد ترغب في تنسيق شاشاتك. لهذا السبب، يوصى بالتحقق من الريبو الكامل باتباع الرابط أدناه:

https://github.com/templates-back4app/react-native-todoapp

إذا كنت بحاجة إلى أي مساعدة أو إذا كانت إحدى الوظائف لا تعمل، يرجى الاتصال بفريقنا عبر الدردشة!

ما هو React Native؟

عندما يتعلق الأمر بأطر عمل تطوير الأجهزة المحمولة، يُعد React Native من أفضل أطر عمل تطوير الأجهزة المحمولة. طوّرته Facebook، ويساعد في بناء تطبيقات لأجهزة iOS وأندرويد بنفس إمكانيات المنصات الأصلية.

ما هو Expo؟

قد يكون تطوير تطبيقات الجوال صعبًا في بعض الأحيان. كمطور، قد تواجه مشكلة بسبب خطأ برمجي بسيط، مما قد يُضيع وقتك. عليك أيضًا اختبار تطبيقك بعد بنائه وقبل إطلاقه. يوفر لك Expo تسهيلات لزيادة سرعة التطوير والاختبار.

ما هي الخطوة الأولى لدمج تطبيق React Native مع Back4App؟

الخطوة الأولى هي تهيئة Expo. وفقًا لتعليمات React Native، يجب تثبيت البرنامجين التاليين.
-Node 10+
-EXPO CLI

الأمر لاستخدام EXPO CLI هو “npm install -g expo-cli”.


Leave a reply

Your email address will not be published.