//tips
//smart contract
code mentorとつながったので打ち合わせ時間の確定を急ぐ。
Codecampの打ち合わせも完了。お打ち合わせさせていただいた方が実直な方でよかった。オーダーメイドでも日本には私が必要とする内容のサービスを提供できるところはないとのこと。
スクールは本当に初心者レベルなので、このレベルになると現役エンジニアと直接つながる以外に方法はないとアドバイスいただいた。
実務レベルのコーディングを行うにはIT企業で鍛えられるしかないのが日本の現状のよう。
外注したいが既に失敗経験あり。日本でハイレベルな人は内製化企業に勤めているか、少数精鋭のブラックジャック化しているのが現状かもしれない。pythonのラーニング機能を組み込んだアプリが少なくとも2000万円すると言われたのを思い出した。
googleエンジニアの年収を考えると、それでも安い方なのかもしれないが。
みんな時間が足りないのは同じだから、コツコツ取り組むしかない。Curve warは微塵も手を出せていない。
twitterのtimeline埋め込みapiの模索。
Index.jsを下記の形にして、ターミナル上でtwitterのタイムラインを流すことに成功。
const needle=require('needle');
const config=require('dotenv').config();
//.envに保存したBEARER_TOKEN参照
const TOKEN=process.env.TWITTER_BEARER_TOKEN;
//twitterのendpoint
const rulesURL='https://api.twitter.com/2/tweets/search/stream/rules';///2/tweets/search/stream/rules
const streamURL='https://api.twitter.com/2/tweets/search/stream?tweet.fields=public_metrics&expansions=author_id';//docから確認
//giveawayはなぜ必要か
//data: [ { id: '1481845800997388289', value: 'giveaway' } ]
//idとの関係はどうつくられる?
const rules=[{value:'giveaway'}];
//get stream rules
async function getRules(){
const response=await needle('get',rulesURL,{
headers:{
Authorization:`Bearer ${TOKEN}`
}
});
//console.log(response.body);
//meta: { sent: '2022-01-15T04:32:21.661Z', result_count: 1 }
//outputされるmetaとは何か?
return response.body;
}
/*
(async()=>{
let currentRules;
try{
currentRules= await getRules();
}catch(error){
console.error(error);
process.exit(1);
}
})();
*/
//Set stream rules
async function setRules(){
//dataのaddを追加する理由は?
const data={
add:rules
}
const response=await needle('post',rulesURL,data,{
headers:{
//json形式で渡されるヘッダーのリスポンス内容に追加
'content-type':'application/json',
Authorization:`Bearer ${TOKEN}`
}
});
return response.body;
}
//Delete stream rules
async function deleteRules(rules){
if(!Array.isArray(rules.data)){
return null;
}
const ids=rules.data.map((rule)=>rule.id);
const data={
delete:{
ids:ids
}
}
const response=await needle('post',rulesURL,data,{
headers:{
'content-type':'application/json',
Authorization:`Bearer ${TOKEN}`
}
});
return response.body;
}
function streamTweets(){
const stream=needle.get(streamURL,{
headers:{
Authorization:`Bearer ${TOKEN}`
}
})
stream.on('data',(data)=>{
//streamURLから取得した文字列をjsonとして解析
try{
const json=JSON.parse(data);
console.log(json);
}catch(error){
}
})
}
;(async()=>{
let currentRules;
try{
//get all stream rule
currentRules= await getRules();
//delete
await deleteRules(currentRules);
//set
await setRules();
}catch(error){
console.error(error);
process.exit(1);
}
streamTweets();
})();
実際にタイムラインに流れるのは下記のような形式となる。
{
data: {
author_id: '1458442999047008256',
id: '1482177103072497664',
public_metrics: { retweet_count: 0, reply_count: 0, like_count: 0, quote_count: 0 },
text: '@NFTvert To the moon'
},
includes: { users: [ [Object], [Object] ] },
matching_rules: [ { id: '1482177072240148480', tag: '' } ]
}
ここからタイムラインをページに表示させるようにする。nodemonがうまく実行できなかったので、package.jsonを見直し記述変更。.jsを加えた。nodemonは開発時にスクリプト変更を感知したら自動的に再起動してくれるもの。手間が省ける。
"scripts": {
"start": "node server/index",
"dev": "nodemon server/index.js"
},
https://www.digitalocean.com/community/tutorials/workflow-nodemon-ja
npm run devによりlocalhost3000でのhello表示が確認できた。
これは下記のindex.jsへの記載とclientへのindex,htmlの追加でなされた。
io.on('connection',()=>{
console.log('Client connected...');
})
//ポート接続
server.listen(PORT,()=>console.log(`Listening on port ${PORT}`));
さらに下記ページからリンクをコピーして、htmlに貼り付け。
https://cdnjs.com/libraries/socket.io
bootstrapからcssリンクをhtmlに貼り付け。
https://getbootstrap.com/docs/5.1/getting-started/introduction/
下記のようにindex.htmlを作成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Real-Time Tweet Stream</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container">
<a href="#" class="navbar-brand">Real Time Tweet Stream</a>
</div>
</nav>
<div class="container">
<div id="tweetStream"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js" integrity="sha512-MgkNs0gNdrnOM7k+0L+wgiRc5aLgl74sJQKbIWegVIMvVGPc1+gc1L2oK9Wf/D9pq58eqIJAxOonYPVE5UwUFA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const tweetStream=document.getElementById('tweetStream');
const socket=io();
const tweets=[]
socket.on('connect',()=>{
console.log("Connected to server...");
})
socket.on('tweet',(tweet)=>{
//console.log(tweet);
const tweetData={
id:tweet.data.id,
text:tweet.data.text,
username:`@${tweet.includes.users[0].username}`
}
const tweetEl=document.createElement('div');
tweetEl.className='card my-4';
tweetEl.innerHTML=`
<div class="card-body">
<h5 class= "card title">${tweetData.text}</h5>
<h6 class="card-subtitle mb-2 text-muted">${tweetData.username}</h6>
<a class"btn btn-primary mt-3" href="https://twitter.com/${tweetData.username}/status/${tweetData.id}">
<i class ="fab fa-twitter"></i>Go To Tweet
</a>
</div>
`
tweetStream.appendChild(tweetEl);
})
</script>
</body>
</html>
最終的にwebpageにtwitterのタイムラインを表示することができた。表示内容は精査する必要がある。
全体的にnode.jsについての知識の充実が必要そうなので本を一冊購入してインプットする。
