Blockchain code Metaverse VR

Crypto×VR×SmartContract(500)

スポンサーリンク

//tips

//smart contract

ノートに書いて、ページの設計を考えていたが、最終段階では、表示用と編集用のページを分ける必要がありそう。編集ページの方には、id,passなどでログインし、表示するものを選択・決定できるようにする。

編集の際には+ボタンや引数テキストの入力ポップアップが行えるように考える。

いずれにしてもコンポーネントとして、ページに表示する内容なので、そちらでのテストは行っておく。

以前作成したtwitter apiの導入から入る。

設定するときだけを認証させれば良いので認証周りは見直す。

なので、_app.jsへのimport { SessionProvider } from "next-auth/react”などは保留にして進めていく。

Pagesフォルダにapiフォルダを作成し、stream.js機能を組み込む。

さらに、npm install twitter-liteを実行。

Idenx.jsページでボタンを押されたら、タイムラインが流れるようにする。

そのタイムライン発生のベースに下記があるが、ここで認証が関わっているので一工夫する必要がありそう。

const results = await client.get("statuses/home_timeline”);

const client = new Twitter({
subdomain: 'api',
consumer_key: process.env.TWITTER_CONSUMER_KEY,
consumer_secret: process.env.TWITTER_CONSUMER_SECRET,
access_token_key: token.twitter.accessToken,
access_token_secret: token.twitter.refreshToken
});

というのも、認証で自分が取得したものを、別の人が見れることを想定しているので、index.jsは保存されているものを吐き出すことになる。

stream.jsでのサーバーへの保存の流れは一旦編集ページ作成タイミングで考えることにする。

Indexでの表示をここでは優先。

npm install --save react-twitter-embed

Index.jsに下記の内容を変形して記載してみる。

<>
{ statuses.map((item,index) => {
return (
<li key={index}>
<TwitterTweetEmbed
tweetId={item.id_str}
/>
</li>
);
})}
</>

まずはシンプルに数字を入れて確認。

<TwitterTweetEmbed
// tweetId={item.id_str}
tweetId={'1501574706423808004'}
/>

悪くない感じ。

Debank,mediumの取り込みも試す。

const [mymedium, setMedium] = useState();

//medium

async function handleOnMediumSubmit(e) {
e.preventDefault();

const endpoint = "https://api.rss2json.com/v1/api.json";
const feed_url = "https://medium.com/feed/@Nakithemagic";

// rss feed を取得
var res = await fetch(`https://api.rss2json.com/v1/api.json?rss_url=${feed_url}`);
// text を json 化
var results = await res.json();
//console.log("medium");
console.log(results.items);

setMedium(results.items);
}

//debank

async function handleOnDebankSubmit(e) {
e.preventDefault();

const res = await fetch('https://openapi.debank.com/v1/user/total_balance?id=0xa242fcb2acbb118ea1b6829efe8b7e2087b43986', {
headers: {
'accept': 'application/json'
}
});

var results = await res.json();
console.log(results);

//setStatuses(results.data);
}

ページへのボタン表示を組み込み。

<form onSubmit={handleOnMediumSubmit}>
<h2>Medium</h2>
<button>Medium feed</button>
</form>

<form onSubmit={handleOnDebankSubmit}>
<h2>Debank</h2>
<button>Debank get</button>
</form>

コンソールにてデータの取得は確認できた。

ページへの表示は下記で対応。debankの方はkeyに対して値が一つしかなかったのでmapではなくそのまま出力した。

{mymedium && (
<ul>
{ mymedium.map((item,index) => {
return (
<li key={index}>
<p>{ item.author }</p>
<p>{ item.title } </p>
</li>
);
})}
</ul>
)}

<form onSubmit={handleOnDebankSubmit}>
<h2>Debank</h2>
<button>Debank get</button>
</form>
{mydebank}

Chromemをアップデートしたら変なエラーがではじめた。どうするか。

include.preload.js:1564 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'inline')
at ContentFiltering.apply (include.preload.js:1564:18)

部品のコンポーネント化と表示再現。そこから編集用ページ作成と連動を行っていく。

人気の記事

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.