"heydude", my app

アプリを作り始めた。

後で見返して成長を感じられるように困った点と達成した点を時系列で逐一時系列で書いていこうと思う。

アプリの内容:

目標1:狭い範囲のトピックで最適な選択肢を提示する

目標2:動的(編集、アカウント認証、レコメンド、)

最終:CRUD可能な情報最適化アプリ、最適な選択肢を提示するウィキペディア

 

使用ツール:{

エディタ:vscode

サーバー:XSRVER(サーバーサイドでnodejsを動かせるのを確認できたため。OS: Linux, middle : apache )→GCP Compute Engine に変更

フレームワーク:NEXTJS(フロントエンド兼バックエンド)

ライブラリ:d3,

2022年10月23日

初期ページ表示

 

2022年10月24日

ページ遷移の作成

画面キャプチャ

next/link でページ遷移

2022年10月27日

d3を使用してアプリ上で以下のsvgを表示・指示内容に従って変化させたい。

d3 page on observablehq.com

cf) d3 APIリファレンス

課題:observablehqを参考に自分のコードに落とし込もうとしているが、表示がうまく行かない。observablehqのjsを自分のアプリのnextjs(react)&typescriptに適用させたい。

解決方法:

1. nextjs内で、d3を使った簡単な図形の描写。済

>|js|import React, { useEffect, RefObject } from 'react'
import * as d3 from "d3";

const Rectangle = () => {

  const ref: RefObject<HTMLDivElement> = React.createRef()

  useEffect(() => {
    draw();
  })

  console.log("ref.current:" + ref.current)

  const draw = () => {

    const circles = [
      { type: 'small', r: 50, x: 100, y: 150 },
      { type: 'medium', r: 100, x: 200, y: 150 },
      { type: 'large', r: 150, x: 300, y: 150 }
    ]

    const svg = d3.select('#circles')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500)

    svg.selectAll('circles')
      .data(circles)
      .enter()
      .append('circle')
      .attr('r', d => d.r)
      .attr('cx', d => d.x)
      .attr('cy', d => d.y)
      .attr('class', d => d.type)
  }

  return (
    <div id='circles' className='w-[100%] h-[50vw] border-4 border-rose-700'>
    </div>
  )
}
export default Rectangle||<

 

2. サンプル対象を変更。observablehq.comのコードを適用する。

 

2022年11月1日

Next js APIのテスト実装

vscode

form test



 

Prisma*mysqlの接続テスト

www.prisma.io

 

prisma_nextjs_code

2022年11月2日 GCP Compute Engineに移行する。理由はインフラから制御することでサードパーティライブラリでの柔軟なサービス設計が可能だと知ったから。(訳:「Iaasかっこいい」)

方法は全て公式ドキュメントに記載されていると信じている。(グーグルのドキュメントのシンプルさや構成が好きなのは僕だけでしょうか。)

SSH接続(vscode) {

GCPドキュメント(メタマネージドSSH接続のサードパーティ欄参照。サードパーティなので手動で設定)

→ローカルのターミナルでRSA 鍵ペアを作成。

→作成済みのVMに公開鍵を追加。Google Cloud Consoleで、先ほど作成したキーの公開鍵を追加。

サードパーティツールのSSH接続方法(今回はVSCode)に従い、ssh接続。

→接続確認。

 

connect linux & linux(Ubuntu)

nextjs 公式ドキュメントより

System Requirements
  Node.js 14.6.0 or newer
  MacOS, Windows (including WSL), and Linux are supported

-> nodejs のインストール cf) nodejsドキュメント 

-> ubuntu で、パッケージマネージャを使いnodejs (lts)をインストールしたい。

-> 脳筋状態で以下コマンド(Github/nodesource)をコピーアンドペースト

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

 

-> インストール完了 (node -v コマンドでチェック可)

-> npm npx の使用可能。