AIでWebプログラミング(30分でやれんのか検証)計画、販売計画を添えて

fast_fast_fast_coding_1.txt

AIでWebプログラミング(30分でやれんのか検証)計画Ver4.0

セールスについてはこのリンクに集約する
https://gist.github.com/taroyanaka/12341726df1119b4adea09623bfb9259

create.xyzが2週間で$99で価格の青天井感が満載だったからchatgptで代用する(chatgptにclient/server両方のコードを読み込ませて開発する)
app10をテンプレとして他プロジェクトで行う
https://github.com/taroyanaka/app10
https://chatgpt.com/share/677e253c-ac24-8012-90e1-f5a733a0a579
server側のglitch.comに今後は課金する(create.xyzのサポートに「お前らのサービス値段高すぎるんじゃ」って捨て台詞を吐いてもいい)

思いついた中でいちばんベタベタで堅い方法
ローカル会計事務所のシステム化的な何かを手伝う(取引先を紹介してもらう)
https://xn--pckua2a7gp15o89zb.com/jb/lf8a3b96b004292dba53ca104600aad35

その辺散策してローカルの駅前で沢山見かけた店舗一覧
歯科,整骨院/接骨院,鍼灸院,整体,美容院,不動産屋,駐車場,塾
ひと　もの　かね　それぞれで足りない箇所を探す
他案
民泊アプリ　を作って自分で物件を抱える 民泊の情報AIでポータル化する

価格の相場調べるぜ
例:
https://www.lancers.jp/menu/detail/1275443 => ¥200,000 / 30日
https://www.lancers.jp/menu/detail/1253334 => ¥500,000 / 30日
https://www.lancers.jp/menu/detail/1226743 ¥40,000 / 1時間
yanaka.dev/demo の作成最低限完了。プレゼン(アプリ紹介と売り方とセールス)の話の組み立て考える。
備忘録
アプリストアにどれかシンプルなやつ1個目置く

30個載せたデモページ
https://yanaka.dev/demo
number :=> URL HH:MM
0 :=> https://createxyzdatabasesample.created.app 00:30
1 :=> https://twilikedemo.created.app 00:30
2 :=> https://orderfoordemo.created.app 00:10
3 :=> https://instagramdemo.created.app 00:10
4 :=> https://tiktoklikedemo.created.app 00:30
5 :=> https://companydemo.created.app 00:30
6 :=> https://discorddemo.created.app 00:01
7 :=> https://threaddemo.created.app 00:10
8 :=> https://landingpagedemo.created.app 00:10
9 :=> https://kanbanboarddemo.created.app 00:30
10 :=> https://tinderdemo.created.app 00:10
11 :=> https://chatbotdemo.created.app 01:00
12 :=> https://craigslistdemo.created.app 00:30
13 :=> https://jumpplusdemo.created.app 00:30
14 :=> https://skyscannerdemo.created.app 00:30
15 :=> https://rentaldemo.created.app 00:30
16 :=> https://netflixdemo.created.app 00:30
17 :=> https://costcodemo.created.app 00:10
18 :=> https://metacriticdemo.created.app 00:30
19 :=> https://newspaperdemo.created.app 00:30
20 :=> https://workflowdemo.created.app 01:00
21 :=> https://admindashboarddemo.created.app 00:30
22 :=> https://ordertextdemo.created.app 00:10
23 :=> https://orderselectdemo.created.app 00:10
24 :=> https://votedemo.created.app 01:00
25 :=> https://4chandemo.created.app 00:30
26 :=> https://propertymanagementdemo.created.app 00:30
27 :=> https://roommanagementdemo.created.app 00:30
28 :=> https://linkedindemo.created.app 00:10
29 :=> https://linkmanagementdemo.created.app 00:30
30 :=> https://betdemo.created.app 01:30
31 :=> https://clickcounterdemo.created.app 00:10
32 :=> https://survey3options1.created.app 02:00
33 :=> https://givewant1.created.app 03:00
34 :=> https://accesscontrolsystem1.created.app 02:00
35 :=> https://surveymaker.created.app 03:00
36 :=> https://taroyanaka.github.io/app16/ 02:00
37 :=> https://taroyanaka.github.io/q_a/b_p.html 07:00



https://taroyanaka.github.io/app5/
から
https://survey3options1.created.app/
にリプレイス可能っぽい。ログイン機能がcreate.xyzでも実装可能ならUIは機能は多少見劣りするが実現できそう。(app5から派生させる実装の計画は本格的に第二選択肢になる可能性(出番が無くはないが大規模開発か他社に引き渡すために仕様と実装を引き渡すための手段になりそう))


誰でもボタンを押して数字を増やせるだけのサイト
tapsdemoは失敗
 => 新規にプロジェクトを開始して作成成功。createのプロンプトクリアが機能していないので、今後は行き詰まったらプロジェクトを新規作成。
  https://clickcounterdemo.created.app
   => DB読み込みが遅い気がしたけどDB無しアプリと大差なかった。どちらにしろ海の向こうにサーバーがあるっぽい。
 => create.xyzのdatabase機能を利用したサンプルアプリの制作に成功した
  https://createxyzdatabasesample.created.app/
   => 実装のプロンプト例(特にコメント欄参照)
    https://gist.github.com/taroyanaka/af257b4a3087debb3dac98dae29b4cbb

賭けをするシステムだが通常想定する動作をしていないため修正必要
https://betdemo.created.app



-実際に売りに行ったり意見聞いてパラメーター(S-D)を変える
マネタイズ:進捗可能性:必要時間:備考
得多(容易) S A B C D 得少(困難)
app8派生(app8実装完了。以下のようにフォークしてセールス試す)
 job_board
  マネタイズB:進捗可能性B:必要時間C:備考(他にバンドル可能、人員多め、継続必須)
 サービス告知
  マネタイズB:進捗可能性A:必要時間B:備考(バンドルのためのメイン商材可能、他にバンドル可能、時間多め、継続必須)
createでデモアプリ作成
 マネタイズA:進捗可能性A:必要時間A:備考(バンドルのためのメイン商材可能、人力セールス多め、スケール性無し)
survey
 マネタイズC:進捗可能性B:必要時間C:備考(他にバンドル可能、セールス多め、時間かなり多め、スケール性高い)
simple_match
 マネタイズB:進捗可能性A:必要時間B:備考(他にバンドル可能、時間少なめ、スケール性高い)

※特記事項:
これらプロジェクトの進捗時、プログラマ、経営者、人力要員、等(要するに各種ヒューマンリソース)の不足は必至。
足りなければ瓦解する。
セールス兼ねて顔を広げるのが明文化されていない前提条件。
toBからtoCへの転換を(する|しない)の判断を常に行う、今後もアプリ制作のリソースが下がり続けるのであればtoCへの転換や投資は確度が高まる。
 ※個人的な感情の利得の観点で、toBは退屈、toCは面白い(感情を別とすると、確率が極端に低く期待値高めのため、序盤の安定の稼ぎとしては不適当)
  =>もし序盤からtoCで冒険したいならプログラマの人数を集めて賭け金を分担する戦略が必要(もしくは資本の庇護を得る)

例外:
pdca
 マネタイズD:進捗可能性-:必要時間-:備考(自分のためだけの実質社内向けアプリ)

=>デモアプリ前提なのでclientをcreate.xyzで作って手と頭動かすのをserver側制作に絞るプランを検証する(必要になった段階でcreateからsvelte実装にAIで変換して移植)

=>10時間くらいやった感想 1アプリDBのテーブル3枚までの上限で作る方針に転換する
 =>必要になったタイミングで必要な機能(DBスキーマ)を追加すべき
  =>テーブル3枚と6枚のデータ構造の違いは開発時間は倍の時間じゃなくて10倍の時間がかかる。知見はある。試験開発する動機も実際無い
  =>テーブル3枚でも手間がかかるものも存在する(app5 survey)
https://github.com/taroyanaka/vue1/blob/main/make_endpoint.txt

便利クエリ一覧
・以下のdb構造を矢印でリレーションを表示して

setup
1.
githubリポ作成
svelte生成+α
 https://github.com/taroyanaka/svelte/blob/main/README.md
2.
以下を変更
server.js
 app4 => app5
 app5.db作成
App.svelte
 app4 => app5
main.jsとindex.html
 app4をapp5に
dbをinitするスクリプト1回



https://github.com/taroyanaka/count_app/
first time, google play release


https://taroyanaka.github.io/app2/
day1: 10:30〜12:00
day2: 8:30〜9:30
2h30m
反省点: svelteのセットアップ+glitchのdb作成+Web API CRUD+svelteでCRUDをfetch、4点セットのテンプレを事前準備しておく。それからAI生成に任す。事前準備は時間に算入しない(複数用意して大量に作れる準備をする段階をしておく(規模の経済!!))。サーバー側のエラーのレスを豊富に用意する、デバッグを容易に。
※uidのハッシュ化必須、最低限のセキュア。

original

https://taroyanaka.github.io/app3/
day0: 21:30〜22:30(setup)
day1: 20:15-2045(setup)
day2: 18:30-1900(client)(become svelte)
day3: 0845-0915(client server)
day3: 0715-0800(server)

ez_draw

https://taroyanaka.github.io/app4/
day0: 1800-1845(setup) 2000-2030(setup)

未svelte化
link_opener

https://taroyanaka.github.io/app5/
day0: 1000-1015(setup)
day1: 0800-0900(server)
day2: 1600-1700(server)
day3: 0900-1100(server client)
day4: 0600-1100 1500-1800(server client)
day5: 0700-1000(server client)
day6: 1100-1300(client)
day7: 1400-1600(client)

survey

https://taroyanaka.github.io/app6/
day0: 0730-0745(setup)
!!! コピペ用にテンプレとして残しておく

https://taroyanaka.github.io/app7/
day0: 0730-0745(setup)
day1: 1930-2030(server)
day2: 1500-2000(client server)
day3: 1600-2000(client server)
day4: 1600-1900(client server)
day5: 1100-1300(client server)
day6: 1600-1900(client server)
day7: 1630-2000(client server) prerelease!!
day8: 1900-1930(client)

pdca
=>プレリリース完了。使おうが使うまいがアプリストアに置く。もし不都合があればアプリストアから削除。前へ

https://taroyanaka.github.io/app8/
day1: 1100-1630(client server)
day2: 1200-1300(client)
day3: 1100-1200(client server)
day4: 1900-1930(client)
day5: 1100-1400(client)
day6: 1400-1600(client)
day7: 1700-1800(client server)
day8: 0700-0900(client server)
day9: 0900-1200(client server)
day10: 1500-1600(client server)
day11: 1100-1200(client)
day12: 1600-1700(client server) prerelease!!
day13: 1100-1300(client)
day14: 1700-1800(client)
day15: 1100-1300(client)
day16: 1400-1500(client)
day17: 1100-1300(client)
day18: 1100-1200(client)
day19: 1600-1700(client)
day20: 1700-1800(client)

反省点
=>ググってライブラリに頼ればよかった事柄(今回はアイコン)について悩みすぎた。選択肢の最初にライブラリや外側の何かを使うことを入れる。
=>(ストレスが原因で)本当に頭のキレが悪い時の実感が多い(プロジェクト枠外の原因だが本質的な問題で解決が必須のため特筆した)
 =>もしくは頭を使わなくてもできるようにプロジェクトの前提を変質させる必要がある
=>頭の中で完成系のUIが出来てないのが理由の手戻りが多い。絵に描いて説明できるくらいまず頭の中で作る(実際に描いた方がいい)。

tag_and_description
=>2つのclient/serverのテーブル多めプロジェクトを経てスクラップ後にゼロスタート
=>最初からdb設計をする方が早と予測し、予測通りだった(client<=>serverの手戻り少ない)
 =>CREATEを作り、e2eのサンプルデータ投入、web_data全表示までの時間は予想通り4時間程度で完成した
  =>とりあえず動くCRUDのテーブル3枚(中間テーブルあり)を7時間でできることを確認
 
https://taroyanaka.github.io/app9/
day0: 0730-0745(setup)

未svelte化
matrix

https://taroyanaka.github.io/app10/
day0: 0730-0745(setup)
day1: 0845-0930(setup)

=>radar単体で作るアプリを思いつかなかったので、pdcaに移植。
　app10にradarではない別プロジェクトを割り当てる
=>https://taroyanaka.github.io/svelte/への移植は有用に思える

未svelte化
radar

https://taroyanaka.github.io/app11/
day0: 0730-0745(setup)
day1: 0830-0845(setup)

word_counter

https://taroyanaka.github.io/app12/
day0: 0730-0745(setup)
day1: 0930-1030(setup)
反省点:元々のvueのコードにuserの概念がなかった。次回からuserの使用を前提とする。
day2: 1030-1045(server)
 https://github.com/taroyanaka/app12/blob/main/my-svelte-project/src/app12_server.js

=>gantt単体で作るアプリを思いつかなかったので、pdcaに移植。
　app12にganttではない別プロジェクトを割り当てる

gantt

https://taroyanaka.github.io/app13/
day0: 0730-0745(setup)

未svelte化
count_app/entertainment_list.html

https://taroyanaka.github.io/app14/
day0: 1000-1030(setup)
day1: 1030-1330(client)

slot_machine

base
https://gist.github.com/taroyanaka/43bc4ff587cd744c142e21aa44fd6941
https://gist.github.com/taroyanaka/73ebee3e6264cb72a0790c1f3ba0395b


https://taroyanaka.github.io/app15/
day0: 1700-1715(setup)
day1: 1730-1800(client server)

!!!!!!!!
 =>元となるapp8のコードの欠陥が多すぎる
  =>app8をブラッシュアップしてからapp15のday1をやり直し
  server_app15.jsも忘れずに

job_board
画面収録してデモアプリ屋の資料にする
=>動画のクオリティを絶対に気にしないで完成とupまでやる
yanaka.dev/demo


https://taroyanaka.github.io/q_a/b_p.html
day0: 1000-1430(setup)
day1: 1400-1800(client server)

q_aの完成版をリリースする
機能はほぼ揃ってるのであとは最後のログイン機能と最後のテストするだけ


remaining
https://taroyanaka.github.io/peerjs_webrtc/simple_match.html
https://taroyanaka.github.io/svelte => as a comic link app
https://taroyanaka.github.io/count_app/text_checker.html
https://taroyanaka.github.io/count_app/text_cleaner.html
https://taroyanaka.github.io/count_app/mapper_online_with_googlelogin.html


事前準備(前提): 作業開始前にsvelteとそれをhello worldされたgithub pagesをセットアップ済みにしておく
絵の仕様: インプット(タグ) アウトプット Webデータストア(リスト(各CRUDボタン位置)) それぞれの位置
　=> 未ログイン、ログイン状態2枚
仕様: バリデーション(クラ,サバ)、Web API、各エンドポイントの権限(未ログイン、ログイン、他ユーザー))
前実装(仕様詰め): サーバー側Web API(テーブル,バリデーション,テーブル毎の権限(未ログイン、ログイン、他ユーザー))
テスト仕様: 後で考える
実装準備: chatgptへのクエリの文章を書く(箇条書き)
 =>例: 以下のコードを参考にWeb APIを実装。テーブル名は****。カラムの*は削除。カラムの*は*に変更。*カラムのバリデーションは*文字以上*文字以下。全てのWeb APIのエンドポイントは*/createの*/deleteのように*で始まる。全てPOST。createとupdateとdeleteはuid必須。readはuidでwhereされたresとuidでwhereされていない全ての実行結果の両方のresをjsonで返す。
 =>例2: 以下のWeb APIをfetchする関数をvue3で実装。Web API全てを実行する。UIを備える。
 =>例3: 以下のUIのコードにCSSを付与。配置位置下記の通り。上部左にサービス名。上部右上にログイン/ログアウトボタン(ログイン状態で飲みログアウトボタン表示)。上部以下に2カラム。右カラムにクライアントのUIを配置。textarea1と実行ボタン1とdeleteボタン。カラムaにweb_data全てをリスト(それぞれのliタグがtextarea1への代入ボタンを付与)。mount時にreadをfetchする。
実装: 実装(別ブラウザで立ち上げたchatgptで2枚(サーバーとクライアント)で出力)

テスト: 上記概要をブラッシュアップ。目標時間30分(流用を積極的に活用)。github copilotも活かせる場所があるはず

make endpoint