بناء تطبيقك الأول باستخدام Expo: دليل شامل
ماهو expo react native
Expo هي منصة قوية لتطوير تطبيقات الهواتف الذكية باستخدام تقنية React Native.
تسمح لك Expo ببناء تطبيقات تعمل على كل من نظامي التشغيل Android و
iOS باستخدام لغة JavaScript و framework React Native.
ما هي مميزات Expo؟
- سهولة الاستخدام: توفر Expo واجهة مستخدم بسيطة وأدوات سهلة الاستخدام،
مما يجعلها مثالية للمطورين المبتدئين والمحترفين على حد سواء.
- سرعة التطوير: تتيح لك Expo تحديث تطبيقك والاطلاع على التغييرات بشكل فوري دون
الحاجة إلى إعادة بناء التطبيق بالكامل.
- مجموعة واسعة من المكونات الجاهزة: توفر Expo مجموعة كبيرة من المكونات الجاهزة التي
يمكنك استخدامها في تطبيقاتك، مثل الكاميرا والخرائط والبلوتوث.
- نشر سريع: تسهل Expo عملية نشر تطبيقاتك على متاجر التطبيقات.
- مجتمع كبير: تتمتع Expo ب مجتمع كبير من المطورين، مما يوفر لك الكثير من الدعم والموارد.
ما هي أهمية Expo في تطوير تطبيقات React Native؟
- تقلل من تعقيد الإعداد: تتولى Expo الكثير من مهام الإعداد المعقدة التي تتطلبها
React Native، مما يسمح لك بالتركيز على كتابة منطق التطبيق الخاص بك.
- تدعم مجموعة واسعة من الأجهزة: تتيح لك Expo بناء تطبيقات تعمل على مجموعة
واسعة من الأجهزة، بما في ذلك الهواتف الذكية والأجهزة اللوحية.
- توفر أدوات تطوير قوية: تقدم Expo مجموعة من الأدوات التي تساعدك
على تصحيح الأخطاء وتحسين أداء تطبيقك.
- تسهل عملية النشر: تتيح لك Expo نشر تطبيقاتك على متاجر التطبيقات بسهولة وسرعة.
ما الفرق بين Expo و React Native؟
- React Native: هي إطار عمل مفتوح المصدر يسمح لك ببناء تطبيقات أصلية
للهواتف الذكية باستخدام JavaScript و React.
- Expo: هي منصة مبنية على React Native، وتوفر مجموعة من الأدوات
والخدمات التي تسهل عملية تطوير تطبيقات React Native.
ببساطة، يمكن القول أن Expo هي طبقة إضافية فوق React Native تجعل عملية تطوير التطبيقات أسهل وأسرع.
تستطيع استخدام Expo إذا كنت مبتدئًا في تطوير تطبيقات React Native وتريد البدء بسرعة ،
إذا كنت تريد بناء تطبيق بسيط أو متوسط التعقيد ،
إذا كنت تريد التركيز على تطوير واجهة المستخدم بدلاً من التعامل مع الإعدادات المعقدة .
متى يجب عدم استخدام Expo؟
- إذا كنت بحاجة إلى التحكم الكامل في كل جزء من التطبيق.
- إذا كنت بحاجة إلى استخدام مكتبات أو وحدات خاصة لا تدعمها Expo.
- إذا كنت تعمل على مشروع كبير ومعقد يتطلب أداءً عالياً.
- في الختام، Expo هي أداة قوية ومفيدة للمطورين الذين يرغبون في بناء
تطبيقات React Native بسرعة وسهولة. إذا كنت تبحث عن طريقة سريعة وفعالة
لإنشاء تطبيقات متعددة المنصات، فإن Expo هو الخيار الأمثل لك.
لماذا Expo هي الخيار الأمثل للمبتدئين؟
- واجهة سهلة الاستخدام: تقدم Expo واجهة مستخدم بديهية وسهلة التعلم،
مما يجعل عملية إنشاء التطبيقات ممتعة وسلسة.
- لا تحتاج إلى إعداد بيئة معقدة: تتولى Expo معظم مهام الإعداد، مما يسمح لك بالتركيز
على كتابة منطق التطبيق الخاص بك.
- مجموعة واسعة من المكونات الجاهزة: توفر Expo مكتبة ضخمة من المكونات
الجاهزة التي يمكنك استخدامها في تطبيقاتك، مما يوفر عليك الكثير من الوقت والجهد.
- دعم قوي للمجتمع: يتمتع مجتمع مطوري Expo بنشاط كبير، مما يعني أنك ستجد
الكثير من الدعم والمساعدة عند الحاجة.
- تحديثات مستمرة: يتم تحديث Expo بشكل مستمر لإضافة ميزات جديدة وتحسين الأداء.
ما الذي تحتاجه للبدء؟
حاسوب: يحتاج إلى متصفح وبرنامج لتحرير النصوص (مثل Visual Studio Code).
معرفة أساسية بـ JavaScript: هذا هو أساس تطوير التطبيقات باستخدام React Native و Expo.
حماس للتعلم: مع القليل من الصبر والاجتهاد، يمكنك بناء تطبيقات مذهلة.
كيف تبدأ؟
- تثبيت Node.js و npm: هاتان الأداتان ضروريتان لتشغيل Expo.
- إنشاء مشروع جديد: استخدم سطر الأوامر لإنشاء مشروع Expo جديد.
- بدء التطوير: استخدم محرر النصوص المفضل لديك لكتابة كود JavaScript الخاص بك.
- اختبار التطبيق: يمكنك تشغيل تطبيقك على محاكي أو جهاز حقيقي.
- نشر التطبيق: عندما تكون مستعدًا، يمكنك نشر تطبيقك على متاجر التطبيقات.
بناء تطبيق قائمة مهام بسيط باستخدام Expo: دليل شامل للمبتدئين
هل ترغب في دخول عالم تطوير التطبيقات؟ مع Expo، أصبح من السهل للغاية
بناء تطبيقات جذابة للهواتف الذكية، حتى بالنسبة للمبتدئين.
في هذا الدليل الشامل، سنرشدك خطوة بخطوة لبناء أول تطبيق لك باستخدام Expo.
الخطوات الأولى لبناء تطبيق بسيط:
*التثبيت:
- قم بتثبيت Node.js و npm على جهاز الكمبيوتر الخاص بك.
- قم بتثبيت Expo CLI باستخدام الأمر التالي في سطر الأوامر: npm install -g expo-cli
*إنشاء مشروع جديد:
- افتح سطر الأوامر واكتب الأمر التالي: expo init my-app (استبدل my-app باسم مشروعك).
- اختر قالب المشروع الذي تفضله (الأساسي، الويب، أو التابلت).
*تشغيل التطبيق:
- انتقل إلى مجلد مشروعك باستخدام سطر الأوامر.
-اكتب الأمر npm start لتشغيل الخادم المحلي.
- استخدم تطبيق Expo Go على هاتفك الذكي لمسح رمز الاستجابة السريعة (QR code) لمعاينة التطبيق.
* تعديل الكود:
افتح ملف App.js باستخدام محرر نصوص.
ابدأ في تعديل الكود لإنشاء واجهة المستخدم والوظائف التي تريدها.
إضافة شاشة بدء (Splash Screen) لتطبيق المهام في Expo
الشاشة البدء هي تلك الشاشة التي تظهر لحظات قبل تحميل التطبيق بالكامل،
وهي تعطي انطباعًا أوليًا جيدًا للمستخدم.
إليك كيفية إضافة شاشة بدء إلى تطبيق المهام الذي قمنا بإنشائه سابقًا:
1. تثبيت المكتبة:
نحتاج إلى مكتبة خارجية لإدارة شاشة البدء. سنستخدم المكتبة react native splash screen
2. إعداد ملفات الصور:
- Android: أنشئ مجلدًا باسم android/app/src/main/res/drawable وقم
بوضع صورة الشعار الخاصة بك بأسماء مختلفة لتناسب كثافات الشاشات المختلفة
(مثل splash.png, splash2.png, ...).
- iOS: أنشئ ملف LaunchScreen.storyboard في مجلد
ios/[اسم مشروعك]/ وقم بتصميم الشاشة البدء فيه.
3. تعديل ملف App.js:
import React, { useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';
export default function App() {
useEffect(() => {
async function prepare() {
// Preload fonts, images, etc.
await SplashScreen.preventAutoHideAsync(); // Prevents auto hide
}
const setup = async () => {
await prepare();
await SplashScreen.hideAsync(); // Hide the splash screen
};
setup();
}, []);
// ... بقية كود التطبيق
return (
// ...
);
}
شرح الكود:
- useEffect: نستخدم useEffect لتنفيذ بعض الأكواد عند تحميل التطبيق.
SplashScreen.preventAutoHideAsync(): يمنع إخفاء شاشة البدء تلقائيًا.
- ()prepare: هنا يمكنك تنفيذ أي مهمة أخرى تريدها قبل إخفاء شاشة البدء، م
ثل تحميل البيانات أو التحقق من التحديثات.
- ()SplashScreen.hideAsync: يخفي شاشة البدء بعد الانتهاء من التحضيرات.
تخصيص شاشة البدء:
- Android: قم بتعديل ملف AndroidManifest.xml لتحديد ملف الصورة الذي تريد استخدامه كشاشة بدء.
- iOS: قم بتعديل ملف LaunchScreen.storyboard لتصميم شاشة البدء كما تريد.
ملاحظات هامة:
- الأداء: تأكد من أن شاشة البدء بسيطة ولا تحتوي على الكثير من العناصر، حتى لا تؤثر على أداء التطبيق.
- التخصيص: يمكنك تخصيص شاشة البدء أكثر باستخدام مكتبات أخرى أو لغات برمجة أصلية.
- أجهزة مختلفة: تأكد من اختبار التطبيق على أجهزة مختلفة لضمان ظهور شاشة البدء بشكل صحيح.
استخدم ألوانًا متناسقة: يجب أن تتناسب ألوان شاشة البدء مع ألوان تطبيقك الرئيسية.
أضف شعارًا: يمكنك إضافة شعار تطبيقك إلى شاشة البدء لتعزيز الهوية البصرية.
استخدم رسوم متحركة بسيطة: يمكن إضافة بعض الرسوم المتحركة البسيطة لجعل شاشة البدء أكثر جاذبية.
بهذه الطريقة، ستتمكن من إضافة شاشة بدء جذابة إلى تطبيق قائمة المهام
الخاص بك، مما يعطي انطباعًا أوليًا جيدًا للمستخدمين.
برمجة تطبيق مهام ( todo list app ) على Expo
بناء تطبيق قائمة مهام كامل باستخدام Expo: دليل شامل مع الكود
بناء تطبيق قائمة المهام البسيط باستخدام Expo هو طريقة رائعة لبدء
رحلتك في عالم تطوير التطبيقات.
في هذا الدليل، سنقوم ببناء تطبيق قائمة مهام أساسي باستخدام React Native و Expo،
وسنشرح كل جزء من الكود.
سأقدم لك الآن شفرة كاملة لتطبيق قائمة مهام بسيط باستخدام Expo و React Native.
هذا التطبيق سيسمح لك بإضافة مهام جديدة، وعلامتها كـ "مكتملة"، وحذفها.
*الخطوات:
*إعداد بيئة العمل:
- تأكد من تثبيت Node.js و npm على جهازك.
- قم بتثبيت Expo CLI عالميًا باستخدام الأمر التالي في سطر الأوامر: npm install -g expo-cli
- أنشئ مشروعًا جديدًا باستخدام الأمر: expo init todo-app
*هيكل المشروع:
- ستجد الملف الرئيسي للتطبيق هو App.js.
هذا هو الملف الذي سنقوم بتعديله لإنشاء تطبيق قائمة المهام.
*إنشاء مكونات التطبيق:
سنقوم بإنشاء مكونات أساسية للتطبيق وهي:
- Input: لحفظ المهام الجديدة.
- Item: لعرض كل مهمة بشكل فردي.
- TodoList: لعرض قائمة المهام الكاملة.
*الوظائف الأساسية:
- إضافة مهمة: عند الضغط على زر إضافة، يتم إضافة مهمة جديدة إلى القائمة.
- حذف مهمة: يتم حذف المهمة المحددة من القائمة.
- تحديث حالة المهام: يتم تحديث حالة المهام (مكتملة أم لا) عند الضغط عليها.
الكود الكامل: JavaScript
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button, FlatList } from 'react-native';
export default function App() {
const [tasks, setTasks] = useState([]);
const [text, setText] = useState('');
const addTask = () => {
setTasks([...tasks, { id: Date.now(), text, completed: false }]);
setText('');
};
const toggleComplete = (id) => {
setTasks(
tasks.map((task) =>
task.id === id ? { ...task, completed: !task.completed } : task
)
);
};
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="أضف مهمة جديدة"
value={text}
onChangeText={(text) => setText(text)}
/>
<Button title="أضف" onPress={addTask} />
<FlatList
data={tasks}
renderItem={({ item }) => (
<View style={styles.item}>
<Text style={[styles.itemText, item.completed && styles.completed]}>
{item.text}
</Text>
<Button title="تم" onPress={() => toggleComplete(item.id)} />
</View>
)}
/>
</View>
);
}
:شرح الكود
- useState: تستخدم لحفظ حالة التطبيق (قائمة المهام والنص المدخل).
- TextInput: مكون لإنشاء حقل نصي لإدخال المهام.
- Button: مكون لإنشاء أزرار.
- FlatList: مكون لعرض قائمة المهام.
- toggleComplete: وظيفة لتغيير حالة المهمة (مكتملة أو غير مكتملة).
إليك بعض التحسينات المقترحة لتطوير التطبيق:
1. إدارة الحالة:
- Redux أو Context API: إذا كان التطبيق سيكبر، يمكن استخدام
Redux أو Context API لإدارة الحالة بشكل أكثر تنظيماً ومرونة.
- Persistent Storage: لحفظ المهام عند إغلاق التطبيق، يمكن استخدام مكتبات مثل
AsyncStorage أو Redux Persist.
2. تصميم واجهة المستخدم:
- مكتبات تصميم: استخدم مكتبات مثل React Native Elements أو NativeBase
لتسريع عملية تصميم واجهة المستخدم وتوفير مكونات جاهزة.
- أنماط التصميم: التزم بأحد أنماط التصميم مثل Material Design أو
Human Interface Guidelines لتحسين تجربة المستخدم.
3. تحسين الأداء:
Virtualization: استخدم FlatList أو SectionList لتحسين أداء عرض القوائم الطويلة.
Optimization: تجنب إعادة حساب القيم غير الضرورية باستخدام useMemo و useCallback.
4. إضافة ميزات:
- تحرير المهام: أضف ميزة لتحرير نص المهام.
- حذف جميع المهام: أضف زرًا لحذف جميع المهام دفعة واحدة.
- فرز المهام: أضف خيارات لفرز المهام حسب التاريخ أو الأهمية.
- إشعارات: استخدم مكتبة مثل expo-notifications لإرسال إشعارات لتذكير المستخدم بالمهام.
- موضوعات: أضف خيارًا لتغيير مظهر التطبيق (موضوعات داكنة، فاتحة، إلخ).
5. الوصول إلى ميزات الجهاز:
- الكاميرا: أضف ميزة لالتقاط صور وإضافتها إلى المهام.
- الموقع: استخدم الموقع لتحديد المهام المرتبطة بمكان معين.
مثال مع إضافة ميزة الحذف الكلي:
// ... باقي الكود
const clearTasks = () => {
setTasks([]);
};
return (
// ...
<Button title="حذف الكل" onPress={clearTasks} />
// ...
);
تخصيص التطبيق
يمكنك تخصيص هذا التطبيق بسهولة عن طريق:
- تغيير الأنماط: تعديل stylesheet لتغيير ألوان الخطوط والخلفية.
- إضافة ميزات إضافية: يمكنك إضافة ميزات مثل تحرير المهام، حذف جميع المهام، أو فرز المهام.
- استخدام مكونات أخرى: استكشف مكتبة React Native للعثور على
مكونات أخرى مثل التقويم، الخرائط، وغيرها.
ملاحظات هامة:
- تثبيت Expo: تأكد من تثبيت Expo على جهازك وتشغيل الخادم المحلي.
- تشغيل التطبيق: استخدم تطبيق Expo Go على هاتفك الذكي لمسح رمز
الاستجابة السريعة (QR code) لمعاينة التطبيق.
- التخصيص: هذا الكود هو نقطة بداية، يمكنك تخصيصه وإضافته إليه لإنشاء تطبيق قائمة مهام أكثر تعقيدًا.
