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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.