كيفية إنشاء تطبيق أخبار باستخدام React Native

بالنسبة إلى أول منشور لي على Medium ، وأردت أن أشارككم كيف أنشأت تطبيقًا إخباريًا باستخدام React Native.

نشرت أصلا على مدونتي.

متطلبات بناء التطبيق:

• فهم أساسي لـ JavaScriptاللغة .
• التثبيت: Node.js ، تفاعل مع npm.
• المكتبات المستخدمة: لحظة ، تفاعل أصلي ، عناصر تفاعل أصلية.

إذا لم تكن معتادًا على هذه الموارد ، فلا داعي للقلق - فهي سهلة الاستخدام للغاية.

الموضوعات التي سنغطيها في المنشور هي:

• واجهة برمجة تطبيقات الأخبار
• جلب API
• قائمة مسطحة
• للتحديث اسحب للأسفل
• ربط

والمزيد ... لذلك لنبدأ!

يمكنك العثور على مشروع إعادة الشراء هنا

واجهة برمجة تطبيقات الأخبار

واجهة برمجة تطبيقات بسيطة وسهلة الاستخدام تقوم بإرجاع بيانات تعريف JSON للعناوين الرئيسية والمقالات مباشرة عبر الويب في الوقت الحالي. - NewsAPI.org

أولاً ، يجب عليك المضي قدمًا والاشتراك في News Api للحصول على apiKey( مفتاح المصادقة الخاص بك ) مجانًا.

قم بإنشاء مشروع React Native جديد ، وقم بتسميته news_app(أو ما تريد). في دليل المشروع ، أنشئ مجلدًا جديدًا واتصل به src. في src الدليل ، قم بإنشاء مجلد باسمه components. لذلك يجب أن يبدو دليل مشروعك كما يلي:

في src المجلد ، قم بإنشاء ملف جديد يسمى news.js. سنقوم في هذا الملف بإحضار JSON الذي يحتوي على العناوين الرئيسية من News API.

news.js

تأكد من استبدال YOUR_API_KEY_HERE بمفتاح API الخاص بك. لمزيد من المعلومات حول News API ، انتقل إلىمستندات newsapi .

نعلن الآن عن getNews الوظيفة ، التي ستجلب لنا المقالات. قم بتصدير الوظيفة حتى نتمكن من استخدامها في App.jsملفنا.

App.js

في الباني ، نحدد الحالة الأولية. articles سيخزن مقالاتنا بعد جلبها ، refreshingوسوف يساعدنا في تحديث الرسوم المتحركة.لاحظ أنني قمت بضبط refreshing منطقي على صحيح ، لأننا عندما نبدأ التطبيق ، نريد أن تبدأ الرسوم المتحركة أثناء تحميل المقالات (عناوين الأخبار).

componentDidMountيتم استدعاؤه فورًا بعد تركيب أحد المكونات. بداخلها نسمي fetchNewsالطريقة.

componentDidMount() { this.fetchNews();}

في fetchNewsنسميه getNews()الذي يعود الوعد. لذلك نستخدم .then()الطريقة التي تأخذ وظيفة رد الاتصال ، وتأخذ وظيفة رد الاتصال وسيطة ( المقالات ).

الآن قم بتعيين المقالات الموجودة في الولاية إلى وسيطة المقالات. لقد كتبت فقط articlesلأنها بناء جملة ES6 جديد مما يعني { articles: articles }، وضبطنا refreshing على خطأ لإيقاف الرسوم المتحركة الدوار.

fetchNews() { getNews().then( articles => this.setState({ articles, refreshing: false }) ).catch(() => this.setState({ refreshing: false }));}

.catch()يسمى في الحالات المرفوضة.

handleRefreshستبدأ الطريقة في تحريك الرسوم المتحركة واستدعاء fetchNews()الطريقة. نجتاز () => this.fetchNews () ، لذلك يتم استدعاؤها فورًا بعد تعيين الحالة.

handleRefresh() { this.setState({ refreshing: true },() => this.fetchNews());}

داخل عملية التصيير ، نعيد FlatListمكونًا. ثم نمرر بعض الدعائم. dataهي مجموعة مقالات من this.state. و renderItemيأخذ وظيفة لتقديم كل عنصر في مجموعة، ولكن في حالتنا فإنها ترجع مجرد Articleعنصر استوردنا سابقا (أننا سنصل إلى ذلك). ونقوم بتمرير عنصر المقالة كخاصية لاستخدامها لاحقًا في هذا المكون.

المادة. js

في src / المكونات ، قم بإنشاء ملف JavaScript جديد واسمه article.js

لنبدأ بتثبيت مكتبتين بسيطتين باستخدام npm:تفاعل العناصر الأصلية ، مما يعطينا بعض العناصر المسبقةالمكونات التي يمكننا استخدامها ، واللحظة التي ستتعامل مع وقتنا.

قم بتثبيتها باستخدام npm:

npm install --save react-native-elements moment

في article.js:

هناك الكثير مما يجري هنا. أولاً ، نبدأ بإتلاف article التابع styles والكائن المحدد أسفل الفئة .

داخل عملية العرض ، نحدد ثابت الوقت لتخزين الوقت الذي تم فيه نشر المقالة. نحن نستخدم مكتبة حظة لتحويل التاريخ إلى الوقت مرت منذ ذلك الحين ، ونحن نمر publishedAtأو وقت من الآن إذا publishedAtهو null.

defaultImg is assigned an image URL in case the URL of the article image is null.

The render method returns TouchableNativeFeedback to handle when the user presses the card. We pass it some props: useForground , which tells the element to use the foreground when displaying the ripple effect on the card, and onPress , which takes a function and executes it when the user presses the card. We passed () => Linking.openUrl(url) , which will simply open the URL to the full article when we press the card.

The card takes three props: featuredTitle , which is a title placed over the image, featuredTitleStyle to style it, and image which is the article image from the article prop. Otherwise, if its null , it’s going to be the defaultImg .

.. featuredTitle={title} featuredTitleStyle={featuredTitleStyle} image={ defaultImg }..

As for the text element, it will hold the description for the article.

{description}

We added a divider to separate the description fromالوقت واسم المصدر .

أدناه Divider، لدينا Viewاسم يحتوي على اسم المصدر ووقت نشر المقالة.

.. {source.name.toUpperCase()} {time}..

بعد ذلك class، حددنا أنماط هذه المكونات.

الآن إذا قمنا بتشغيل التطبيق:

ها أنت ذا! الكود المصدري للتطبيق متاح على GitHub: هنا ، لا تتردد في تفرعها.

أتمنى أن تكون قد استمتعت بمقالتي! إذا كان لديك أي أسئلة على الإطلاق ، فلا تتردد في التعليق أو التواصل معي على تويتر وسأساعدك بالتأكيد :)

اشتري لي قهوة؟

القصة التالية كيفية إنشاء تطبيقات سطح المكتب الأصلية باستخدام JavaScript