不写代码,让 AI 生成手机 APP!保姆级教程
你現(xiàn)在看到的 APP,是我完全用 AI 生成的,一行代碼都沒寫!怎么做到的呢?
大家好,我是程序員魚皮。AI 發(fā)展很快,現(xiàn)在隨隨便便就能生成一個(gè)網(wǎng)站,但是怎么純用 AI 開發(fā)能在手機(jī)上運(yùn)行的 APP 呢?網(wǎng)上基本上沒有完整的教程。所以,我出手了,下面只用幾分鐘的時(shí)間,我會教大家如何利用 AI 生成 APP,依然是 保姆級教程。
? 本文對應(yīng)視頻,推薦觀看:https://bilibili.com/video/BV17HMcziEye
下面有請我們的主角 Cordova!
一、什么是 Cordova?
Apache Cordova 是一個(gè)開源的移動應(yīng)用開發(fā)框架,允許開發(fā)者使用 HTML、CSS 和 JavaScript 等 Web 技術(shù)開發(fā) 跨平臺 的移動應(yīng)用。它通過將 Web 技術(shù)封裝在本地容器中,使得開發(fā)者可以編寫一次代碼,然后在 Android、iOS、Windows 等多個(gè)平臺上運(yùn)行。
Cordova 主要基于以下幾個(gè)核心組件實(shí)現(xiàn),感興趣的同學(xué)可以了解一下:
也就是說,想要開發(fā) APP,我們只需要把網(wǎng)站文件交給 Cordova,根據(jù)需要裝一裝插件、改一改配置,然后直接使用它提供的構(gòu)建工具就能將 Web 應(yīng)用打包成原生 APP 應(yīng)用了(比如 APK 文件)!幾乎不涉及任何代碼編寫和開發(fā)。
聽起來很簡單,有手就行?但是想使用 Cordova 開發(fā) APP,必須要在電腦上安裝對應(yīng)的環(huán)境,比如 Android 和 IOS,而安裝環(huán)境的難度可以說是 非常炸裂 了!
如果你自己折騰,可能至少要花個(gè)幾天的時(shí)間,會踩很多坑,到網(wǎng)上搜各種方案還不一定能搞定。所以我才做了這個(gè)教程,該踩的坑我都幫大家踩完了,會 用最短的時(shí)間帶你搞定環(huán)境,并且教你如何使用 AI + Cordova 生成 APP。開始之前記得 點(diǎn)贊收藏三連 哦,拜托,我的頭發(fā)真的不多啦!
二、環(huán)境準(zhǔn)備
安裝 Cordova
首先我們要安裝 Cordova。Cordova 的運(yùn)行依賴 Node.js 和 NPM 前端工具,到 Node.js 官網(wǎng) 下載即可,會自動安裝 NPM。
可以把 NPM 理解為快速安裝各種軟件的小工具,安裝完成后打開終端,執(zhí)行下列命令安裝 Cordova:
npm install -g cordova
Cordova 支持將網(wǎng)站打包為 Android 和 IOS 移動端、Electron 桌面端應(yīng)用。下面魚皮帶大家安裝我個(gè)人認(rèn)為難度最大的 Android 環(huán)境。注意,接下來的每一步,操作其實(shí)都不難,但是一定要仔細(xì)看!一個(gè)細(xì)節(jié)不注意可能就報(bào)錯(cuò)了!
安裝 Android 環(huán)境
首先,我們要根據(jù) Cordova 的版本來確定所需環(huán)境和工具的版本,由于我們安裝的 Cordova 是最新版本的,因此直接閱讀 最新的官方文檔 即可,比如我這里需要的依賴如下:
其中,最重要的是:
Java 17
Gradle 8.13
Android API 級別 >= 24
下面我們分別安裝這些依賴。
1、安裝 Java
Java 版本必須是 17,最好找個(gè)現(xiàn)成的 Windows 系統(tǒng)的 Java 安裝包:
安裝 Java 時(shí)建議選擇 自動配置環(huán)境變量(包括 Path 和 JAVA_HOME),就不用自己手動配置環(huán)境變量了。
安裝完成后,打開終端執(zhí)行 java -version 命令查看版本號,看到下列輸出表示成功:
如果無法執(zhí)行命令,大概率是沒有配置 Path 環(huán)境變量。
2、安裝 Gradle
根據(jù)上面的版本號,Gradle 必須是 8.13,直接到 官網(wǎng) 下載二進(jìn)制壓縮包即可。
解壓下載完成的壓縮包,移動到 不包含中文的路徑 中,然后配置環(huán)境變量,包括 Path 和 GRADLE_HOME:
打開終端執(zhí)行 gradle -v 命令,查看版本號:
如果命令無法執(zhí)行,大概率是 Path 環(huán)境變量配置錯(cuò)誤。
3、安裝 Android
建議直接安裝 Android 開發(fā)工具 Android Studio,會自動安裝 Android 的開發(fā) SDK 和運(yùn)行環(huán)境。
到官網(wǎng)下載 Android studio,運(yùn)行安裝包,按照步驟安裝即可:
安裝完成后,第一次打開 Android Studio 時(shí),會提醒你安裝 Android SDK 環(huán)境:
注意不要把 SDK 組件安裝到包含中文的目錄下,好在安裝包也給了限制,不然又得栽倒一片人。。。
接下來無腦安裝即可,會自動安裝各種 Android 開發(fā)常用的工具、還有安卓設(shè)備模擬器:
這一步可能會有點(diǎn)煎熬,有些地區(qū)的朋友可能需要一些特殊的網(wǎng)絡(luò)支持,你懂的。
經(jīng)過了漫長的等待,Android SDK 終于安裝完成,然后需要配置 Android 的環(huán)境變量 ANDROID_HOME:
還要配置 platform-tools 到 Path 中,里面有一些命令行工具:
配置完成后,我們打開 Android Studio,右上角進(jìn)入 SDK Manager 的設(shè)置,根據(jù) Cordova 的版本號要求,安裝對應(yīng) API Level 的 SDK,比如我這里安裝了 34 和 35 版本。
這一步可能也會比較慢,耐心等待安裝吧~
安裝完 SDK 后,再進(jìn)入 SDK 工具選項(xiàng),安裝 Command-line Tools 命令行工具,之后在電腦上運(yùn)行安卓 apk 包時(shí)可能會用到:
同樣,把 Command-line Tools 添加到環(huán)境變量 Path 中,路徑為 %ANDROID_HOME%\cmdline-tools\latest\bin,這樣一來,很多工具可以直接在終端中使用了,比如 apkanalyzer。
4、安裝 Android 設(shè)備模擬器
下面我們要嘗試在自己的電腦上運(yùn)行 Android 手機(jī)模擬器,這樣調(diào)試程序更方便。
打開 Android Studio 的設(shè)備管理器,添加一個(gè)新設(shè)備:
選擇指定機(jī)型,建議選擇 API 版本高一點(diǎn)的,我這里選擇 Pixel 7:
安裝推薦的系統(tǒng)鏡像:
耐心等待后手機(jī)就創(chuàng)建成功了,直接運(yùn)行:
結(jié)果,報(bào)錯(cuò)啦!
如果你也遇到這種情況,可以在終端 進(jìn)入 Android 模擬器目錄 手動運(yùn)行虛擬設(shè)備,這樣能夠看到詳細(xì)的錯(cuò)誤信息,有利于排查問題。
比如我這里顯然是由于路徑包含了中文!可惡啊,當(dāng)時(shí)年少輕狂不自卑一個(gè)沒注意用了中文路徑。。。
解決方法很簡單,手動創(chuàng)建一個(gè)不包含中文路徑的 avd 虛擬設(shè)備目錄,然后設(shè)置環(huán)境變量 ANDROID_SDK_HOME:
然后再利用 Android Studio 創(chuàng)建一個(gè)設(shè)備并運(yùn)行,這次成功運(yùn)行了,恭喜你多了一個(gè)手機(jī)!
至此,環(huán)境終于搞定了,下面來實(shí)戰(zhàn) AI + Cordova 開發(fā) APP。
三、AI + Cordova 實(shí)戰(zhàn)
創(chuàng)建項(xiàng)目
打開終端,進(jìn)入你想要?jiǎng)?chuàng)建項(xiàng)目的目錄,先執(zhí)行 cordova create 命令來創(chuàng)建項(xiàng)目:
cordova create <你的項(xiàng)目英文名稱>
首次創(chuàng)建項(xiàng)目可能會有提示:
生成代碼
此處有 2 種生成模式:
先創(chuàng)建 Cordova 項(xiàng)目,然后在該項(xiàng)目內(nèi)進(jìn)行 AI 代碼生成。告訴 AI 你要?jiǎng)?chuàng)建一個(gè)兼容 Cordova APP 的網(wǎng)站,直接讓 AI 生成兼容 APP 的代碼。這樣做的好處是生成的代碼 可以使用 Cordova 插件調(diào)用系統(tǒng)原生的能力,比如調(diào)用相機(jī)進(jìn)行拍照。
在 Cordova 項(xiàng)目外單獨(dú)用 AI 生成網(wǎng)站項(xiàng)目,AI 不會關(guān)心你是否要把項(xiàng)目轉(zhuǎn)為 Cordova APP,然后再把生成好的網(wǎng)站移動到 Cordova 項(xiàng)目中。這樣做的好處是生成的網(wǎng)站代碼更容易運(yùn)行,同樣 適合你已經(jīng)有現(xiàn)成網(wǎng)站項(xiàng)目 的場景。
下面兩種方式我都會給大家演示,先講第一種模式,直接讓 AI 生成一個(gè)【表情包生成器】的 Cordova APP。
用 Cursor 打開剛剛創(chuàng)建的 Cordova 項(xiàng)目目錄,給 AI 輸入下列提示詞,提示詞中需要包含 Cordova,并且提到 兼容性:
請幫我開發(fā)一個(gè)【移動端表情包生成器】Web APP,使用純前端技術(shù) + Cordova 實(shí)現(xiàn)。
如果需要,你可以通過 Cordova 調(diào)用系統(tǒng)原生功能。
?
請生成完整的項(xiàng)目代碼,確保功能完整可用,而且所有功能都需要同時(shí)兼容網(wǎng)頁端和移動設(shè)備。
?
## 功能需求
### 1. 圖片獲取
- 支持?jǐn)z像頭拍照
- 支持從本地選擇圖片文件
- 自動縮放圖片到合適尺寸
?
### 2. 表情包模板
- 提供8-10個(gè)常用表情包模板(驚呆了、無語、贊、點(diǎn)贊、emo了等)
- 網(wǎng)格布局展示模板,點(diǎn)擊選擇應(yīng)用
?
### 3. 文字編輯
- 輸入自定義文字內(nèi)容
- 調(diào)整字體大小(20px-50px)
- 選擇文字顏色(白色、黑色、紅色等基礎(chǔ)色彩)
- 添加文字描邊效果
- 拖拽移動文字位置
?
### 4. 貼紙功能
- 提供常用emoji表情貼紙(等5-10個(gè))
- 提供簡單裝飾貼紙(星星、愛心、箭頭等)
- 支持拖拽移動和簡單縮放
?
### 5. 保存功能
- 將編輯后的表情包導(dǎo)出為圖片
- 支持下載保存到本地
?
## 界面要求
- 移動端優(yōu)先:適配手機(jī)屏幕,大按鈕設(shè)計(jì)
- 頁面布局:
- 主頁:拍照按鈕、選擇圖片按鈕
- 編輯頁:頂部工具欄 + 中央畫布 + 底部功能區(qū)
- 操作簡單:實(shí)時(shí)預(yù)覽效果,一鍵保存
?
## 操作流程
1. 拍照或選擇圖片
2. 選擇表情包模板
3. 編輯文字內(nèi)容和樣式
4. 添加emoji或裝飾貼紙
5. 預(yù)覽效果并保存圖片
AI 生成的網(wǎng)站文件會放到 www 目錄下。生成代碼完成后,AI 可能會自動提醒你打包 APP 并且運(yùn)行的命令,要依次添加安卓平臺、安裝插件、打包、運(yùn)行。
這些命令我們等會兒就會用到,現(xiàn)在先不要自動執(zhí)行,因?yàn)樯傻拇a不一定直接可用,我們需要先利用網(wǎng)頁端進(jìn)行調(diào)試。
網(wǎng)頁瀏覽
可以直接雙擊生成的 HTML 文件 www/index.html 查看效果;當(dāng)然,更推薦的是通過 cordova 命令添加平臺并運(yùn)行。
先添加瀏覽器平臺:
cordova platform add browser
如果你在執(zhí)行命令時(shí)遇到了報(bào)錯(cuò),可以直接問 AI,比如魚皮遇到了缺少命令執(zhí)行權(quán)限的錯(cuò)誤:
解決方案是,執(zhí)行下列命令來修改 PowerShell 的執(zhí)行策略:
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
添加平臺成功后,可以輸入 cordova run 命令運(yùn)行平臺:
cordova run browser
然后就能夠查看到網(wǎng)站的運(yùn)行效果了。需要注意的是,因?yàn)?Cordova Browser 平臺的特殊性,通過這個(gè)命令運(yùn)行的網(wǎng)頁效果可能和直接雙擊、或者啟動本地服務(wù)器運(yùn)行有區(qū)別。
除了上面的命令外,如果你想快速調(diào)試多個(gè)不同的平臺,可以運(yùn)行下列命令,統(tǒng)一查看各個(gè)平臺:
cordova serve --port 8000
添加安卓平臺
接下來執(zhí)行類似的命令來添加安卓平臺:
cordova platform add android
如圖,添加安卓平臺成功,注意要 確保輸出的 Target SDK 和 Compile SDK 版本一致:
如果不一致,可能會影響 APP 的運(yùn)行。可以修改 config.xml 的 targetSdkVersion 來修改版本號:
添加插件
由于我的項(xiàng)目需要調(diào)用攝像頭,所以要添加對應(yīng)的插件,執(zhí)行下列命令:
cordova plugin add cordova-plugin-camera
添加插件成功:
打包運(yùn)行安卓 APP
打包
安裝完插件后,執(zhí)行 cordova build 命令可以打包 Android apk:
cordova build android
看到下列信息表示打包成功:
得到 apk 包后,有 2 種運(yùn)行方式:
手機(jī)運(yùn)行
可以直接將 apk 包發(fā)送到手機(jī)安裝運(yùn)行:
運(yùn)行效果如圖:
電腦運(yùn)行
先打開 Android Studio 并啟動安卓虛擬設(shè)備,然后執(zhí)行 cordova run 命令:
cordova run android
就可以將 apk 安裝到虛擬設(shè)備中,并且運(yùn)行 APP 了,效果如圖:
常見報(bào)錯(cuò)
打包運(yùn)行是最容易遇到報(bào)錯(cuò)的地方,可能會遇到很多種報(bào)錯(cuò),比如缺少插件、缺少文件、無法安裝依賴、無法運(yùn)行等等,建議直接把報(bào)錯(cuò)信息發(fā)給 AI,讓它幫你解決。
下面魚皮分享一些自己遇到的坑點(diǎn)。
1、項(xiàng)目缺少文件
比如魚皮的項(xiàng)目缺少了圖標(biāo)文件:
AI 嘗試幫我創(chuàng)建圖標(biāo):
或者簡單粗暴,移除配置文件中對圖標(biāo)的引用:
2、缺少環(huán)境變量
如果環(huán)境搭建不順利,可能會遇到下列報(bào)錯(cuò),根據(jù)報(bào)錯(cuò)信息去進(jìn)行對應(yīng)的配置即可:
3、命令執(zhí)行失敗
執(zhí)行 cordova run 報(bào)錯(cuò)命令執(zhí)行失敗,可能是因?yàn)闆]有配置 cmdline-tools 到環(huán)境變量 Path 中。
4、Gradle 無法安裝
明明已經(jīng)安裝了 Gradle,但是 Cordova 仍然會安裝 Gradle,而且可能因?yàn)榫W(wǎng)絡(luò)原因下載失敗:
這時(shí),我們可以配置環(huán)境變量 CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL,指定從本地下載 Gradle。環(huán)境變量的值設(shè)置為我們自己下載的 Gradle 壓縮包的路徑。
如果修改配置后再次執(zhí)行打包命令還是報(bào)錯(cuò),建議刪除項(xiàng)目內(nèi)的 platforms/android/.gradle 緩存,然后重試。
四、已有項(xiàng)目打包為 APP
剛剛實(shí)戰(zhàn)了直接用 AI 生成 Cordova APP 項(xiàng)目的方式,如果我們已經(jīng)有現(xiàn)成的網(wǎng)站項(xiàng)目,也能夠很方便地打包為 APP。
比如現(xiàn)在魚皮有一個(gè)消消樂網(wǎng)頁游戲項(xiàng)目,讓我們來包裝為 APP:
1)先創(chuàng)建 cordova 項(xiàng)目:
cordova create yu-game-web-app
2)把已有的網(wǎng)頁文件復(fù)制到 www 目錄下:
3)執(zhí)行 cordova 命令添加 Android 平臺:
cordova platform add android
4)最后,打包或者直接運(yùn)行:
cordova run android
運(yùn)行成功的效果如圖,還是很 nice 的~
最后
OK,教程到這里就結(jié)束了,由于缺少設(shè)備等原因,IOS 就先不給大家演示了。
最后給大家一些建議,Cordova 比較適合中小型網(wǎng)站項(xiàng)目,尤其適合已經(jīng)有網(wǎng)站項(xiàng)目想快速轉(zhuǎn)為 APP 的場景;但如果你需要搞一個(gè)復(fù)雜的大項(xiàng)目,依賴很多移動設(shè)備的原生能力,使用 Cordova 就不是很合適了,不如 Flutter。尤其是沒有編程能力的同學(xué)來說,建議不要直接用 AI 生成復(fù)雜的 Cordova APP,很可能出現(xiàn)你搞不定的代碼問題,但是做些小游戲、小工具還是很不錯(cuò)的。也希望我的分享對大家有幫助吧,想獲取更多編程和 AI 干貨的朋友記得關(guān)注魚皮哦,拜拜~
更多編程學(xué)習(xí)資源
Java前端程序員必做項(xiàng)目實(shí)戰(zhàn)教程+畢設(shè)網(wǎng)站
程序員免費(fèi)編程學(xué)習(xí)交流社區(qū)(自學(xué)必備)
程序員保姆級求職寫簡歷指南(找工作必備)
程序員免費(fèi)面試刷題網(wǎng)站工具(找工作必備)
最新Java零基礎(chǔ)入門學(xué)習(xí)路線 + Java教程
最新Python零基礎(chǔ)入門學(xué)習(xí)路線 + Python教程
最新前端零基礎(chǔ)入門學(xué)習(xí)路線 + 前端教程
最新數(shù)據(jù)結(jié)構(gòu)和算法零基礎(chǔ)入門學(xué)習(xí)路線 + 算法教程
最新C++零基礎(chǔ)入門學(xué)習(xí)路線、C++教程
最新數(shù)據(jù)庫零基礎(chǔ)入門學(xué)習(xí)路線 + 數(shù)據(jù)庫教程
最新Redis零基礎(chǔ)入門學(xué)習(xí)路線 + Redis教程
最新計(jì)算機(jī)基礎(chǔ)入門學(xué)習(xí)路線 + 計(jì)算機(jī)基礎(chǔ)教程
最新小程序入門學(xué)習(xí)路線 + 小程序開發(fā)教程
最新SQL零基礎(chǔ)入門學(xué)習(xí)路線 + SQL教程
最新Linux零基礎(chǔ)入門學(xué)習(xí)路線 + Linux教程
最新Git/GitHub零基礎(chǔ)入門學(xué)習(xí)路線 + Git教程
最新操作系統(tǒng)零基礎(chǔ)入門學(xué)習(xí)路線 + 操作系統(tǒng)教程
最新計(jì)算機(jī)網(wǎng)絡(luò)零基礎(chǔ)入門學(xué)習(xí)路線 + 計(jì)算機(jī)網(wǎng)絡(luò)教程
最新設(shè)計(jì)模式零基礎(chǔ)入門學(xué)習(xí)路線 + 設(shè)計(jì)模式教程
最新軟件工程零基礎(chǔ)入門學(xué)習(xí)路線 + 軟件工程教程
總結(jié)
以上是生活随笔為你收集整理的不写代码,让 AI 生成手机 APP!保姆级教程的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 实测提速 60%!Maven Daemo
- 下一篇: 完美关系中DL在争取飞扬集团小力士奶粉中