Download as PDF, PPTX
Uploaded by富士通クラウドテクノロジーズ株式会社
弊社サービスを使って ノーコード開発してみた.pdf
第63回ニフクラエンジニアミートアップ「エンジニアの仕事を変えるノーコード・ローコード活用入門」における、富士通クラウドテクノロジーズ株式会社の佐々木大樹によるセッション(LT)「ChatGPTを使ってノーコード開発してみた」のスライド
弊社サービスを使って ノーコード開発してみた.pdf
- 1.
- 2.
- 3.
- 4.
- 5. mobile backendと 簡単連携！ iOS /Android向けのアプリを 同時に開発可能 Web技術(HTML等)を用いた開発 Monaca クロスプラットフォーム 開発環境 パートナーサービス
- 6. 構成 ChatGPT上でMonacaとニフクラ mobile backendを連携させるコードを生成します。 これで、プログラミング作業なしでアプリが作れる！ →実質ノーコードでは？？？？ ChatGPT コード生成クラウド連携 Monaca ニフクラ mobile backend
- 7. ChatGPTによるコード生成 以下ルールに従い、プログラミングを行ってください。 ==成果物== ・Monaca上で動作するタスク管理アプリ ・ファイル構成は以下です。 ・index.html ・app.js ・style.css ==使用言語== ・HTML ・JavaScript ・CSS ==前提== ・ニフクラ mobile backendJavaScript SDKは導入済みとする ・単一のファイルで動作し、JavaScriptでdisplayプロパティを制御し、画面遷移を擬 似的に再現するものとする
- 8. 生成されたコード(HTML) <!DOCTYPE html> <html lang="ja"> <head> <metacharset="UTF-8"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <title>タスク管理アプリ</title> <link rel="stylesheet" href="style.css"> <script src="https://js-sdk.appknobs.io/v3/ncmb.min.js"></script> </head> ～以下略～
- 9. 生成されたコード(CSS) body { font-family: 'Arial',sans-serif; } button { margin: 10px; } ul { list-style-type: none; } ～以下略～
- 10. 生成されたコード(JavaScript) // タスク一覧とタスク追加画面の要素を取得 const taskListView= document.getElementById('taskListView'); const addTaskView = document.getElementById('addTaskView'); // ニフクラ mobile backendの設定 const applicationKey = "YOUR_APPLICATION_KEY"; const clientKey = "YOUR_CLIENT_KEY"; const ncmb = new NCMB(applicationKey, clientKey); const Task = ncmb.DataStore('Task'); // タスク一覧を表示する関数 async function loadTasks() { ～以下略～
- 11. 実行(パート1) エラー：Uncaught ReferenceError: NCMBis not defined
- 12. 修正 index.htmlの9行目 <script src="https://js-sdk.appknobs.io/v3/ncmb.min.js"></script> ↑↑がnot foundになっている。 プロジェクト内のncmb.min.jsにつなぎこむ。 <scriptsrc="./components/ncmb/ncmb.min.js"></script> に修正。
- 13.
- 14.
- 15.