새로운 Twitter API를 사용하여 원격 개발자 직위를 발표하는 것에 대해 알 수 있는 다섯 가지
78525 단어 reactcareertutorialtwitterapi
이 문서에서는 원격 개발자의 작업 목록을 포함하는 트윗을 트위터 API로 실시간으로 가져오는 법을 배웠습니다.
이 후속 강좌에서는 지난 7일 동안 트위터에 게시된 원격 개발자 일자리의 공백에 대한 다섯 가지 필수 지식을 대답하기 위해 프로그램을 구축하는 방법을 배울 것입니다.
설치 프로그램
다음과 같이 시작해야 합니다.
터미널 창을 열고 create React app by usingnpx을 사용하여 React 응용 프로그램을 부트합니다.
npx create-react-app remote-dev-jobs-analytics
cd remote-dev-jobs-analytics
"scripts": {
"start": "npm run development",
"development": "NODE_ENV=development concurrently --kill-others \"npm run client\" \"npm run server\"",
"client": "react-scripts start",
"server": "nodemon server/server.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
다음에 src/하위 디렉터리의 모든 파일을 삭제합니다.
rm src/*
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.querySelector("#root"));
가장 가까운 검색 노드에 연결하려면 프로그램의 불러오는 영패를 사용하여 인증해야 합니다.승재 영패를 사용하려면 다음과 같은 환경 변수를 설정해야 한다.만약 bash를 셸으로 사용한다면 터미널 창에서 다음 명령을 내릴 수 있습니다.왼쪽 괄호와 오른쪽 괄호를 포함하여 수표 소유자의 지폐로 바꾸십시오.
export TWITTER_BEARER_TOKEN=<YOUR BEARER TOKEN HERE>
먼저 Twitter API에 실제 요청을 보내는 노드 서버를 시작해야 합니다.이 노드 서버는 브라우저 기반 React 클라이언트와 Twitter API 사이의 에이전트로 사용됩니다.노드 서버에서 가장 가까운 검색 엔드포인트에 연결된 API 엔드포인트를 생성해야 합니다.반대로 React 클라이언트의 요청은 로컬 노드 서버로 프록시됩니다.
더 나아가기 전에 cd를 프로젝트 루트 디렉터리로 이동하고 다음 의존항을 설치하십시오
npm install concurrently express body-parser util request http path http-proxy-middleware axios react-router-dom react-twitter-embed react-chartjs-2
mkdir server
touch server/server.js
서버.js
const axios = require("axios");
const express = require("express");
const bodyParser = require("body-parser");
const moment = require("moment");
const app = express();
let port = process.env.PORT || 3000;
const BEARER_TOKEN = process.env.TWITTER_BEARER_TOKEN;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const searchURL = "https://api.twitter.com/2/tweets/search/recent";
const query =
'(developer OR software) remote (context:66.961961812492148736 OR context:66.850073441055133696) -is:retweet -"business developer"';
const maxResults = 100;
const requestConfig = {
headers: {
Authorization: `Bearer ${BEARER_TOKEN}`,
},
params: {
max_results: maxResults,
query: query,
"tweet.fields": "context_annotations,created_at,public_metrics",
},
};
const authMessage = {
title: "Could not authenticate",
detail: `Please make sure your bearer token is correct.
If using Glitch, remix this app and add it to the .env file`,
type: "https://developer.twitter.com/en/docs/authentication",
};
app.get("/api/search/recent", async (req, res) => {
if (!BEARER_TOKEN) {
res.status(401).send(authMessage);
}
try {
const response = await getSearchResults();
res.send(response);
} catch (e) {
console.log(e);
}
});
const getSearchResults = async (config = requestConfig) => {
try {
const response = await axios.get(searchURL, config);
return response.data;
} catch (e) {
console.log(e);
}
};
const getAllTweets = async () => {
let response = await getSearchResults();
let tweets = [];
while (response.meta.next_token) {
let config = {
...requestConfig,
params: {
...requestConfig.params,
next_token: response.meta.next_token,
},
};
response = await getSearchResults(config);
tweets = tweets.concat(response.data);
}
return tweets;
};
const getCount = async () => {
let response = await getSearchResults();
let resultCount = response.meta.result_count;
while (response.meta.next_token) {
let config = {
...requestConfig,
params: {
...requestConfig.params,
next_token: response.meta.next_token,
},
};
response = await getSearchResults(config);
resultCount = resultCount + response.meta.result_count;
}
return resultCount;
};
const countsByDay = async () => {
let tweets = await getAllTweets();
return tweets.reduce(
(counts, tweet) => ({
...counts,
[moment(tweet.created_at).format("ddd - MM/DD")]:
(counts[moment(tweet.created_at).format("ddd - MM/DD")] || 0) + 1,
}),
{}
);
};
const countsByLanguage = async () => {
let counts = {};
const languages = [
"javascript",
"JavaScript",
"android",
"frontend",
"ios",
"backend",
"node",
"nodejs",
"python",
"react",
"scala",
"c#",
"rails",
"ruby",
"php",
"java",
"blockchain",
".net",
"sql",
"java",
"php",
"golang",
"go",
"wordpress",
];
const tweets = await getAllTweets();
for (tweet of tweets) {
for (language of languages) {
if (
tweet.text.includes(language) ||
tweet.text.includes(language.toUpperCase())
) {
counts[language] = (counts[language] || 0) + 1;
}
}
}
if (counts["JavaScript"]) {
counts["javascript"] += counts["JavaScript"];
delete counts.JavaScript;
}
if (counts["node"]) {
counts["nodejs"] += counts["node"];
delete counts.node;
}
if (counts["golang"]) {
counts["go"] += counts["golang"];
delete counts.node;
}
return counts;
};
const sortCounts = (counts, keyName = "name") => {
let sortedCounts = Object.keys(counts).map((language) => ({
[keyName]: language,
total: counts[language],
}));
sortedCounts.sort((a, b) => {
return b.total - a.total;
});
return sortedCounts;
};
app.get("/api/search/recent/top", async (req, res) => {
if (!BEARER_TOKEN) {
res.status(401).send(authMessage);
}
const tweets = await getAllTweets();
let tweetsByEngagement = {};
for (tweet of tweets) {
const total_engagement = Object.values(tweet.public_metrics).reduce(
(total_engagement, public_metric) => total_engagement + public_metric
);
tweetsByEngagement[tweet.id] = total_engagement;
}
res.send({ result: sortCounts(tweetsByEngagement, "id")[0] });
});
app.get("/api/search/recent/count", async (req, res) => {
if (!BEARER_TOKEN) {
res.status(401).send(authMessage);
}
const results =
req.query.group === "day" ? await countsByDay() : await getCount();
res.send({ count: results });
});
app.get("/api/search/recent/language", async (req, res) => {
if (!BEARER_TOKEN) {
res.status(401).send(authMessage);
}
try {
let results = await countsByLanguage();
results = sortCounts(results);
res.send({ count: results.slice(0, 10) });
} catch (e) {
console.log(e);
}
});
if (process.env.NODE_ENV === "production") {
app.use(express.static(path.join(__dirname, "../build")));
app.get("*", (request, res) => {
res.sendFile(path.join(__dirname, ".../build", "index.html"));
});
} else {
port = 3001;
}
app.listen(port, () => console.log(`Listening on port ${port}`));
group=day 지난 7일 동안 일별 작업 수group=language는 지난 7일(developer OR software) remote (context:66.961961812492148736 OR context:66.850073441055133696) -is:retweet -"business developer”
"context_annotations": [
{
"domain": {
"id": "65",
"name": "Interests and Hobbies Vertical",
"description": "Top level interests and hobbies groupings, like Food or Travel"
},
"entity": {
"id": "847544972781826048",
"name": "Careers",
"description": "Careers"
}
},
{
"domain": {
"id": "66",
"name": "Interests and Hobbies Category",
"description": "A grouping of interests and hobbies entities, like Novelty Food or Destinations"
},
"entity": {
"id": "961961812492148736",
"name": "Recruitment",
"description": "Recruitment"
}
}
마지막으로 운영자'-is:retweet'과'-비즈니스 개발자'는 검색 결과에서 전송을 배제하고'비즈니스 개발자'를 포함하는 모든 트윗을 배제하는 데 사용된다.리트윗은 검색 결과에서 중복되지 않도록 제외됐고,'비즈니스 개발자'가 포함된 트윗은 이와 무관하기 때문에 제외됐다.
클라이언트 코드
다음 단계에서는 다음 React 어셈블리를 사용하여 이러한 정보를 표시합니다.
응용 프로그램.js - 부모 구성 요소, 모든 다른 구성 요소를 순서대로 보여 줍니다.
트위터js- 모집 정보를 포함하는 트윗 보이기
하루.js- 지난 7일 동안 매일 발표된 트윗 수량을 표시하는 스트라이프 맵
꼭대기js-지난 7일 동안 참여도가 가장 높은 트윗
트위터js-자리 표시자 구성 요소, 발표된 10가지 프로그래밍 언어, 10가지 언어를 표시합니다.js 구성 요소, 이날.js 구성 요소입니다. 여러 개의 추문을 보여 줍니다.js 구성 요소
회전기.js - 마운트된 API 호출에 대한 로드 표시기 보이기
이제 React 구성 요소 생성을 시작해야 합니다./src 하위 디렉터리에 "components"라는 디렉터리를 만듭니다.위의 원본 코드 파일은 이 새 디렉터리에 저장될 것입니다.우선, 응용 프로그램의 부모most 구성 요소를 만듭니다.이 구성 요소는 모든 다른 구성 요소를 보여 줍니다.
응용 프로그램.js
import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Tweets from "./Tweets";
const App = () => {
return (
<div className="ui container">
<div className="introduction"></div>
<h1 className="ui header">
<img
className="ui image"
src="/Twitter_Logo_Blue.png"
alt="Twitter Logo"
/>
<div className="content">
Remote Developer Job Analytics
<div className="sub header">Powered by Twitter data</div>
</div>
</h1>
<div className="ui grid">
<BrowserRouter>
<Route exact path="/" component={Tweets} />
</BrowserRouter>
</div>
</div>
);
};
export default App;
트위터js
import React, { useEffect, useState } from "react";
import axios from "axios";
import Tweet from "./Tweet";
import Top from "./Top";
import Day from "./Day";
import Spinner from "./Spinner";
const initialState = {
tweets: [],
};
const Tweets = () => {
const [tweets, setTweets] = useState([]);
const [tweetCount, setTweetCount] = useState(0);
const [topTweetId, setTopTweetId] = useState(null);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
getTweets();
getTweetCount();
getTopTweetId();
}, []);
const getTweets = async () => {
try {
setIsLoading(true);
const response = await axios.get("/api/search/recent");
setTweets(response.data.data);
setIsLoading(false);
} catch (e) {
setError(e.response.data);
setIsLoading(false);
}
};
const getTweetCount = async () => {
try {
const response = await axios.get("/api/search/recent/count");
console.log(response);
setTweetCount(response.data.count);
} catch (e) {
setError(e.response.data);
setIsLoading(false);
}
};
const getTopTweetId = async () => {
const response = await axios.get("/api/search/recent/top");
setTopTweetId(response.data.result.id);
};
const errors = () => {
if (error) {
return (
<div className="sixteen wide column">
<div className="ui message negative">
<div className="header">{error.title}</div>
<p key={error.detail}>{error.detail}</p>
<em>
See
<a href={error.type} target="_blank" rel="noopener noreferrer">
{" "}
Twitter documentation{" "}
</a>
for further details.
</em>
</div>
</div>
);
}
};
const dashboard = () => {
if (!isLoading) {
if (!error) {
return (
<React.Fragment>
<div className="sixteen wide column">
<div className="ui segment">
<div className="ui header center aligned ">
Total number of Tweets
</div>
<div className="ui header center aligned ">{tweetCount}</div>
</div>
</div>
<div className="eight wide column">
<div className="ui segment">
<Top />
</div>
</div>
<div className="eight wide column">
<div className="ui segment">
<Day />
</div>
</div>
<div className="eight wide column">
<div className="ui header">Top Tweet</div>
<Tweet key={topTweetId} id={topTweetId} />
</div>
<div className="eight wide column">
<div className="ui basic segment">
<div className="ui header">Recent Tweets</div>
{tweets.map((tweet) => (
<Tweet key={tweet.id} id={tweet.id} />
))}
</div>
</div>
</React.Fragment>
);
}
} else {
return <Spinner />;
}
};
return (
<React.Fragment>
{errors()}
{dashboard()}
</React.Fragment>
);
};
export default Tweets;
꼭대기js
import React, { useEffect, useState } from "react";
import axios from "axios";
import Spinner from "./Spinner";
const Top = () => {
const [countByLanguage, setCountByLanguage] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const style = {
fontSize: "17px",
};
useEffect(() => {
getTopLanguages();
}, []);
const getTopLanguages = async () => {
setIsLoading(true);
const response = await axios.get("/api/search/recent/language");
setCountByLanguage(response.data.count);
setIsLoading(false);
};
const capitalize = (word) => {
const first_letter = word.slice(0, 1).toUpperCase();
return first_letter + word.slice(1);
};
const displayTopLanuguages = () => {
{
if (!isLoading) {
return countByLanguage.map((count, i) => (
<div style={style} className="item">
{i + 1}. {capitalize(count.name)}
</div>
));
} else {
return <Spinner />;
}
}
};
return (
<React.Fragment>
<div className="ui header">Top Programming Languages</div>
<ul className="ui relaxed list"> {displayTopLanuguages()}</ul>
</React.Fragment>
);
};
export default Top;
트위터js
import React from "react";
import { TwitterTweetEmbed } from "react-twitter-embed";
const Tweet = ({ id }) => {
const options = {
cards: "hidden",
align: "left",
width: "550",
conversation: "none",
};
return <TwitterTweetEmbed options={options} tweetId={id} />;
};
export default Tweet;
import React from "react";
const Spinner = () => {
return (
<div>
<div className="ui active centered large inline loader">
<img
className="ui image"
src="/Twitter_Logo_Blue.png"
alt="Twitter Logo"
/>
</div>
</div>
);
};
export default Spinner;
마지막 단계는 클라이언트의 요청 에이전트를 백엔드 서버에 연결하는 것입니다.이를 위해 src/디렉터리에 'setupProxy.js' 라는 새 파일을 만들고 다음 코드를 추가합니다.
에이전트를 설정합니다.js
const { createProxyMiddleware } = require("http-proxy-middleware");
// This proxy redirects requests to /api endpoints to
// the Express server running on port 3001.
module.exports = function (app) {
app.use(
["/api"],
createProxyMiddleware({
target: "http://localhost:3001",
})
);
};
npm start
결론
최근 검색 노드를 사용하여 지난 7일 동안 원격 개발자 직위 공고에 대한 질문에 대답할 프로그램을 만들었습니다.이러한 질문에 대한 답은 포부를 가진 개발자나 이미 일자리가 있고 다음 일자리를 어떻게 찾는지에 대해 더욱 전략적인 개발자에게 매우 유용하다.
너는 이 앱을 확장할 재미있는 방법을 찾았니?트위터로 알려줘.이 자습서는 Twitter API 이외의 몇 개의 라이브러리를 사용해서 만들었지만, 서로 다른 수요와 요구가 있을 수 있습니다. 이 도구들이 당신에게 적합한지 평가해야 합니다.
Reference
이 문제에 관하여(새로운 Twitter API를 사용하여 원격 개발자 직위를 발표하는 것에 대해 알 수 있는 다섯 가지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/twitterdev/top-5-things-you-can-learn-about-remote-developer-job-postings-with-the-new-twitter-api-8p5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
