Blockchain code Metaverse VR

Crypto×VR×SmartContract(446)

スポンサーリンク

//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についての知識の充実が必要そうなので本を一冊購入してインプットする。

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.