फीडरिका एपीआई के साथ एक रुझान विश्लेषण उपकरण का निर्माण

मुझे हाल ही में फीडरिका नामक यह शानदार समाचार एपीआई सेवा मिली, जो आपको सेंटीमेंट स्कोर और प्रासंगिक श्रेणियों के साथ नवीनतम विश्व समाचार देती है। इसका निःशुल्क उपयोग स्तर है इसलिए मैंने इसे आज़माने और यह देखने के बारे में सोचा कि मैं इसके साथ क्या बना सकता हूँ।

मेरा एक विचार यह देखने के लिए एक उपकरण बनाना था कि किसी कंपनी या विषय ने समाचार में कैसा प्रदर्शन किया है।

आप Google रुझानों से एक चार्ट देख सकते हैं जो आपको दिखाता है कि कोई शब्द सार्वजनिक स्थान पर कितना लोकप्रिय है लेकिन यह केवल खोज मात्रा को दर्शाता है। इससे आपको यह अंदाज़ा नहीं मिलता कि इसके आसपास की भावना सकारात्मक है या नकारात्मक। तो आइए एक ऐसा टूल बनाएं जो समाचारों की जांच करके यह देखे कि विषय के बारे में अनुकूल तरीके से लिखा जा रहा है या नहीं और एक समान ग्राफ प्रदर्शित करें।

इस उपकरण को बनाने के लिए हम जो व्यापक कदम उठाएंगे वे यहां दिए गए हैं:

1. खोजने के लिए उपयोगकर्ता से विषय एकत्र करें
2. फेडरिका से विषय से मेल खाने वाले समाचार लेख प्राप्त करें
3. लौटाए गए लेखों के माध्यम से लूप करें और प्रत्येक लेख के लिए भावना स्कोर निकालें
4. दृश्य रूप से प्रदर्शित करने के लिए इन अंकों को एक चार्ट पर प्लॉट करें
5. विषय के लिए अतिरिक्त आंकड़े तैयार करने के लिए कुछ गणित करें, जैसे औसत भावना, कुल सकारात्मक/नकारात्मक, आदि...
6. उपयोगकर्ता को स्रोत समाचार लेख दिखाएं ताकि वे विषय को और विस्तार से जान सकें।

हमारे शुरू करने से पहले

आइए फीडरिका वेबसाइट से एक एपीआई कुंजी प्राप्त करें ताकि हम काम करने के लिए समाचार लेख ला सकें।
फ़ीडरिका.कॉम पर जाएं और एक खाते के लिए साइन अप करें।

एक बार जब आप साइन अप कर लेते हैं तो आपको अपनी एपीआई कुंजी आपके प्रोफाइल पेज फीडिका.कॉम/प्रोफाइल पर आपके क्रेडिट बैलेंस और आपके द्वारा किए गए अनुरोधों को दिखाने वाले अनुरोध लॉग के साथ मिल जाएगी।

मंच का चयन

हम इस टूल को केवल HTML, CSS और जावास्क्रिप्ट में बना सकते हैं लेकिन इसमें एक निजी एपीआई कुंजी का उपयोग करना शामिल है और इसे इंटरनेट पर खुले तौर पर प्रसारित करना एक अच्छा विचार नहीं है, तो आइए सर्वर पर एपीआई कुंजी को छिपाने के लिए नोड और एक्सप्रेस का उपयोग करें एक पर्यावरण चर के रूप में पक्ष और इसे निजी रखें।

मैं इस ट्यूटोरियल को बिल्कुल शुरुआती लोगों के लिए तैयार करने जा रहा हूं, इसलिए यदि आप पहले से ही नोड और एक्सप्रेस से परिचित हैं तो बेझिझक अधिक दिलचस्प भागों पर आगे बढ़ें।

स्थापित करना:

1. नोड और एक्सप्रेस

सुनिश्चित करें कि आपके पास नोड रनटाइम वातावरण स्थापित है। यदि नहीं तो आप इसे यहां प्राप्त कर सकते हैं।

अपनी स्थानीय मशीन पर इस प्रोजेक्ट के लिए एक निर्देशिका बनाएं और उसके अंदर नेविगेट करें।

किसी नोड प्रोजेक्ट को डिफ़ॉल्ट के साथ प्रारंभ करने के लिए टर्मिनल में npm init -y चलाएँ।

रन: एक्सप्रेस फ्रेमवर्क स्थापित करने के लिए एनपीएम आई एक्सप्रेस।
एक्सप्रेस एक सरल वेबसर्वर है जो हमें अपने एप्लिकेशन के भीतर पृष्ठों और एपीआई मार्गों की सेवा करने की अनुमति देगा। इसे सेटअप करना आसान है और व्यापक रूप से उपयोग किया जाता है इसलिए ऑनलाइन सहायता प्राप्त करना और समस्या निवारण करना आसान है।

VSCode या अपने पसंदीदा IDE में फ़ोल्डर खोलें और अंदर देखें।

आपके पास एक नोड_मॉड्यूल फ़ोल्डर, एक पैकेज.जेसन फ़ाइल और एक पैकेज-लॉक.जेसन फ़ाइल होनी चाहिए।

2. हमारा पहला रूट बनाना

आइए एक इंडेक्स पेज बनाएं जो हमारे ऐप में उपयोगकर्ताओं का स्वागत करता है
अपने प्रोजेक्ट के रूट में एक नई फ़ाइल 'welcome.html' बनाएं। आरंभ करने के लिए इसे केवल बुनियादी जानकारी से भरें

    
This is my news trends app!

 

आइए अपना पहला रूट सेटअप करें और जब कोई ऐप खोले तो यह वेलकम.एचटीएमएल पेज वापस कर दें

अपने ऐप के रूट में एक '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}`);
});

आइए अपनी प्रगति का परीक्षण करें।
टर्मिनल से नोड इंडेक्स.जेएस चलाएं। आपको एक पुष्टिकरण संदेश देखना चाहिए जिसमें कहा गया हो कि सर्वर चल रहा है

यह पुष्टि करने के लिए कि आप स्वागत पृष्ठ देख सकते हैं, टर्मिनल में लिंक पर क्लिक करें या इसे ब्राउज़र में पेस्ट करें

3. पर्यावरण चर

आइए अपनी एपीआई कुंजी को सहेजने के लिए एक पर्यावरण चर सेटअप करें।
अपने प्रोजेक्ट के रूट में एक नई फ़ाइल '.env' बनाएं।
फ़ीडरिका प्रोफ़ाइल पृष्ठ से अपनी एपीआई कुंजी को यहां कॉपी और पेस्ट करें

आइए एक '.gitignore' फ़ाइल भी जोड़ें ताकि हम गलती से इस निजी कुंजी को वेब पर अपलोड न करें

अब कुछ हाउसकीपिंग के लिए

हम हर बार ऐप में बदलाव करते समय टर्मिनल से सर्वर को शुरू या बंद नहीं करना चाहते हैं, तो आइए ऑटो रीलोडिंग सेटअप करें।

अपनी package.json फ़ाइल खोलें और इन पंक्तियों को स्क्रिप्ट ऑब्जेक्ट में जोड़ें

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

हम अपने रूट फ़ोल्डर में परिवर्तनों को देखने और सर्वर को पुनरारंभ करने के लिए '-w' ध्वज के साथ नोडमॉन का उपयोग कर रहे हैं।

अब हम अपना सर्वर एनपीएम रन देव कमांड के साथ शुरू कर सकते हैं और यह स्वचालित रूप से परिवर्तनों पर नजर रखेगा और हमारे लिए सर्वर को पुनरारंभ करेगा।

यदि आपको नोडमॉन को न पहचानने के बारे में कोई त्रुटि मिलती है तो इसे विश्व स्तर पर स्थापित करने के लिए चलाएं और पुनः प्रयास करें:
एनपीएम आई नोडमॉन -जी

ठीक है, सेटअप पूरा हो गया है, आइए अपना ऐप बनाने के लिए आगे बढ़ें!

आइए स्वागत पृष्ठ को अपडेट करें और विषय पूछने के लिए एक खोज बॉक्स जोड़ें

    

        
News trends
        
Search for a topic to get started
        

            Search
        
    

स्टाइलशीट सेटअप करें

अपने प्रोजेक्ट के रूट में एक 'सार्वजनिक' फ़ोल्डर बनाएं जो हमारी क्लाइंट साइड जावास्क्रिप्ट, सीएसएस और छवि फ़ाइलों को होस्ट करेगा।
सार्वजनिक फ़ोल्डर में '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' खोलें और यह पंक्ति जोड़ें:
ऐप.यूज़(एक्सप्रेस.स्टैटिक("सार्वजनिक"));

आपको तुरंत प्रतिबिंबित परिवर्तन देखने में सक्षम होना चाहिए, अपने ब्राउज़र में पृष्ठ को ताज़ा करें और पुष्टि करें

महान! आइए अब एक्सप्रेस को बताएं कि इस फॉर्म सबमिशन को कैसे संभालना है

यदि आप ध्यान दें कि यह फॉर्म '/search' एंडपॉइंट पर सबमिट होता है तो आइए इस रूट को सेटअप करें और फॉर्म सबमिशन को संभालें

अपनी '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);
});

आइए इसका परीक्षण करें, अपने ब्राउज़र पर जाएं और बॉक्स में एक खोज शब्द दर्ज करें और सबमिट पर क्लिक करें
आपको सर्वर से एक प्रतिक्रिया दिखनी चाहिए जो आपका खोज शब्द दिखाती है, इस तरह

अच्छा काम!

अब जब हमारे पास एक खोज मार्ग काम कर रहा है तो आइए फीडरिका एपीआई को प्लग-इन करें और विषय के लिए समाचार प्राप्त करें।

जल्द आ रहा है भाग II - डेटा प्राप्त करना