بناء أداة تحليل الاتجاه باستخدام FeedRika API

لقد عثرت مؤخرًا على خدمة News API الرائعة هذه والتي تسمى FeedRika والتي تمنحك آخر الأخبار العالمية بالإضافة إلى درجة المشاعر والفئات ذات الصلة. يحتوي على طبقة استخدام مجانية لذلك فكرت في تجربته ورؤية ما يمكنني إنشاؤه به.

كانت إحدى أفكاري هي إنشاء أداة لمعرفة مدى نجاح شركة أو موضوع ما في الأخبار.

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

فيما يلي الخطوات العامة التي سنتخذها لإنشاء هذه الأداة:

1. جمع الموضوع للبحث عنه من المستخدم
2. جلب المقالات الإخبارية من Feedrika التي تطابق الموضوع
3. راجع المقالات التي تم إرجاعها واستخرج درجة المشاعر لكل مقالة
4. رسم هذه النتائج على مخطط لعرضها بصريًا
5. قم ببعض العمليات الحسابية لإنشاء إحصائيات إضافية للموضوع، مثل متوسط ​​المشاعر، وإجمالي الإيجابية/السلبية، وما إلى ذلك...
6. اعرض المقالات الإخبارية المصدرية للمستخدم حتى يتمكن من استكشاف الموضوع بمزيد من التفاصيل.

قبل أن نبدأ

لنحصل على مفتاح API من موقع Feedrika حتى نتمكن من جلب المقالات الإخبارية للعمل معها.
توجه إلى موقع Feedrika.com وقم بالتسجيل للحصول على حساب.

بمجرد التسجيل، ستجد مفتاح واجهة برمجة التطبيقات (API) الخاص بك على صفحة ملفك الشخصي Feedrika.com/profile بالإضافة إلى رصيدك الائتماني وسجل الطلبات الذي يوضح الطلبات التي قدمتها.

اختيار المنصة

يمكننا إنشاء هذه الأداة بلغة HTML وCSS وJavascript فقط، ولكنها تتضمن استخدام مفتاح واجهة برمجة تطبيقات خاص، وليس من الجيد نقل ذلك بشكل مفتوح عبر الإنترنت، لذلك دعونا نستخدم العقدة والتعبير لإخفاء مفتاح واجهة برمجة التطبيقات على الخادم Side كمتغير بيئة واحتفظ به خاصًا.

سأقوم بتخصيص هذا البرنامج التعليمي للمبتدئين تمامًا، لذا إذا كنت معتادًا على العقدة والتعبير فلا تتردد في الانتقال إلى الأجزاء الأكثر إثارة للاهتمام.

يثبت:

1. العقدة والتعبير

تأكد من تثبيت بيئة تشغيل Node. إذا لم يكن الأمر كذلك يمكنك الحصول عليه هنا.

قم بإنشاء دليل لهذا المشروع على جهازك المحلي والتنقل داخله.

تشغيل : npm init -y في المحطة لتهيئة مشروع العقدة بالإعدادات الافتراضية.

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

افتح المجلد في VSCode أو IDE المفضل لديك وانظر إلى الداخل.

يجب أن يكون لديك مجلد عقدة_وحدات، وملف package.json وملف package-lock.json.

2. إنشاء طريقنا الأول

لنقم بإنشاء صفحة فهرس ترحب بالمستخدمين في تطبيقنا
أنشئ ملفًا جديدًا "welcome.html" في جذر مشروعك. املأها بالمعلومات الأساسية فقط للبدء

    
    
    


    
This is my news trends app!

 

لنقم بإعداد المسار الأول ونعيد صفحة Welcome.html هذه عندما يفتح شخص ما التطبيق

قم بإنشاء ملف "index.js" في جذر تطبيقك وقم باستيراد إطار العمل السريع.

// Import the express framework
express = require("express");

// tell node that we are creating an express app
const app = express();

// define the port that the server will run on
const port = 3000;

// define the route for the index page
app.get("/", (req, res) => {
 res.sendFile(__dirname   "/welcome.html");
});

// Start the server and tell the app to listen for incoming connections on the port
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

دعونا نختبر تقدمنا.
من عقدة التشغيل الطرفية Index.js. من المفترض أن تظهر لك رسالة تأكيد تفيد بأن الخادم قيد التشغيل

انقر فوق الرابط الموجود في الجهاز أو قم بلصقه في المتصفح لتأكيد أنه يمكنك رؤية صفحة الترحيب

3. متغيرات البيئة

لنقم بإعداد متغير بيئة لحفظ مفتاح API الخاص بنا.
قم بإنشاء ملف جديد '.env' في جذر مشروعك.
انسخ والصق مفتاح API الخاص بك من صفحة الملف الشخصي لـ Feedrika هنا

دعونا أيضًا نضيف ملف ".gitignore" حتى لا نقوم بتحميل هذا المفتاح الخاص على الويب عن طريق الخطأ

الآن لبعض التدبير المنزلي

لا نريد تشغيل الخادم وإيقافه من الجهاز الطرفي في كل مرة نقوم فيها بتعديل التطبيق، لذا فلنقم بإعداد إعادة التحميل التلقائي.

افتح ملف package.json وأضف هذه السطور إلى كائن البرنامج النصي

"start": "node index.js",
"dev": "nodemon index.js -w"

نحن نستخدم Nodemon مع علامة "-w" لمراقبة التغييرات في المجلد الجذر وإعادة تشغيل الخادم.

الآن يمكننا بدء تشغيل الخادم الخاص بنا باستخدام الأمر npm run dev وسيقوم تلقائيًا بمراقبة التغييرات وإعادة تشغيل الخادم لنا.

إذا تلقيت خطأ بشأن عدم التعرف على Nodemon، قم بتشغيل هذا لتثبيته عالميًا وحاول مرة أخرى:
npm وNodemon -g

حسنًا، لقد اكتمل الإعداد، فلننتقل إلى إنشاء تطبيقنا!

دعونا نقوم بتحديث صفحة الترحيب وإضافة مربع بحث لطلب المواضيع

    
    
    
    



    

        
News trends
        
Search for a topic to get started
        

            
            Search
        
    

أوراق أنماط الإعداد

قم بإنشاء مجلد "عام" في جذر مشروعك الذي سيستضيف ملفات جافا سكريبت وCSS وملفات الصور من جانب العميل.
أضف ملف "styles.css" إلى المجلد العام وأضف بعض الأنماط الأساسية لصفحة الترحيب

styles.css:

/* Import the Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

#container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* SEARCH FORM */

.search-form input {
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.search-form button {
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #313131;
    cursor: pointer;
    color: #fff;
}

الآن نحتاج إلى توضيح كيفية خدمة هذه الملفات الثابتة، لذا افتح "index.js" وأضف هذا السطر:
app.use(express.static("public"));

يجب أن تكون قادرًا على رؤية التغييرات على الفور، وتحديث الصفحة في متصفحك والتأكيد

عظيم! دعنا الآن نخبرك بكيفية التعامل مع إرسال النموذج هذا

إذا لاحظت أن النموذج يتم إرساله إلى نقطة النهاية '/ بحث'، فلنقم بإعداد هذا المسار والتعامل مع إرسال النموذج

افتح ملف "index.js" الخاص بك وأضف هذه السطور

// define the route for the /search endpoint
app.get("/search", (req, res) => {
  // get the query string from the request
  let query = req.query.topic;
  // send the query string back as the response
  res.send(query);
});

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

أحسنت!

الآن بعد أن أصبح لدينا مسار بحث يعمل، فلنقم بتوصيل FeedRika API وجلب الأخبار الخاصة بالموضوع.

قريبًا الجزء الثاني - جلب البيانات