與 AI 一起開發(fā)HelloTravel小程序項(xiàng)目復(fù)盤

0 評論 1322 瀏覽 2 收藏 7 分鐘

Gemini3助力小程序開發(fā)的全新突破!從核心功能框架到技術(shù)攻堅(jiān),AI不僅大幅提升了工作效率,更在智能行程規(guī)劃、地圖數(shù)據(jù)驗(yàn)證與云函數(shù)優(yōu)化上展現(xiàn)出驚人潛力。本文將深度拆解RAG架構(gòu)重構(gòu)、數(shù)據(jù)一致性管理等關(guān)鍵挑戰(zhàn)的解決方案,揭示AI與小程序開發(fā)的無限可能。

真的很久很久沒有這么興奮了?。?!

首先是在 Gemini3 的加持下完成了首款小程序,其次我切實(shí)感受到了深度與 AI 一起工作效率的大幅提升,以及對未來無限可能的期待!

總結(jié)一下這次小程序開發(fā),功能、設(shè)計(jì)、前后端開發(fā)整體 AI 都干了什么。

一、小程序的核心功能框架

二、技術(shù)架構(gòu)概覽

三、項(xiàng)目開發(fā)步驟和難點(diǎn)

1. 主要開發(fā)步驟 (Development Roadmap)

我們將開發(fā)過程分為了五個階段,遵循了從“靜態(tài)骨架”到“智能核心”再到“閉環(huán)生態(tài)”的路徑:

1)頂層設(shè)計(jì)與基礎(chǔ)設(shè)施搭建

  • 架構(gòu)選型:確定了微信小程序原生 + 云開發(fā) (Cloud Base)的無服務(wù)器架構(gòu)。前端負(fù)責(zé)交互,云函數(shù)處理 AI 和地圖邏輯,云數(shù)據(jù)庫存儲用戶資產(chǎn)。
  • 視覺規(guī)范:建立了Zoo Style視覺體系(米白背景、森林綠主色、鵝卵石圓角卡片),并在app.wxss中定義了全局 CSS 變量。
  • 導(dǎo)航框架:配置了app.json,確立了“旅行規(guī)劃”和“我的旅行”雙 Tab 結(jié)構(gòu)。

2)核心功能模塊開發(fā) (Plan & Overview)

首頁 (Index):實(shí)現(xiàn)了自定義區(qū)間日歷(支持跨月選擇)和城市選擇器(國內(nèi)/國外分組、拼音搜索),解決了原生組件交互單一的問題。

目的地概覽 (Overview):實(shí)現(xiàn)了“圖文解耦”的內(nèi)容展示。

3)核心技術(shù)攻堅(jiān) (Result – 智能行程頁)

RAG 架構(gòu)重構(gòu):為了解決 AI 瞎編地點(diǎn)導(dǎo)致地圖無坐標(biāo)的問題,我們將邏輯重構(gòu)為AI 提名 -> 地圖 API 驗(yàn)證 -> AI 最終規(guī)劃的 RAG(檢索增強(qiáng)生成)模式,但這里由于加載太慢容易失敗而影響體驗(yàn),最終還是選擇和地圖逆地址解析再回填。

高級交互:實(shí)現(xiàn)了長按拖拽排序功能,且拖拽后自動重新計(jì)算路線和距離。

4)用戶系統(tǒng)與資產(chǎn)閉環(huán) (My Trips)

云數(shù)據(jù)庫:創(chuàng)建了trips和users集合,實(shí)現(xiàn)了行程的云端存儲。

權(quán)限管理:實(shí)現(xiàn)了完整的“微信一鍵登錄”流程,增加了隱私協(xié)議和用戶協(xié)議的勾選校驗(yàn)。

社交裂變:實(shí)現(xiàn)了將特定行程分享給微信好友,好友點(diǎn)擊后可查看并轉(zhuǎn)存行程的邏輯。

5)發(fā)布與合規(guī)優(yōu)化

過審策略:移除了高風(fēng)險(xiǎn)的wx.getLocation強(qiáng)制授權(quán),改為默認(rèn)北京定位+手動選城。

性能優(yōu)化:開啟了“按需注入”,并調(diào)整了云函數(shù)超時配置(60s)以適應(yīng)大模型生成耗時。

2. 項(xiàng)目核心難點(diǎn)與解決方案 (Core Challenges)

在開發(fā)過程中,我們解決的幾個最棘手的問題,其實(shí)也是目前 AI 應(yīng)用開發(fā)最通用的痛點(diǎn):

AI 的“幻覺”與地圖數(shù)據(jù)的“嚴(yán)謹(jǐn)”之間的沖突

難點(diǎn):DeepSeek/Kimi 生成的地點(diǎn)名(如“成都好吃街”)在地圖 API 里搜不到,導(dǎo)致返回坐標(biāo) (0,0),地圖連線飛到非洲,或者報(bào)錯。

解決方案:

  • RAG 模式:先讓 AI 提名,后端去地圖 API 驗(yàn)證存在性并拿到標(biāo)準(zhǔn)名(Official Title),再把標(biāo)準(zhǔn)名喂回給 AI 做規(guī)劃。
  • 臟數(shù)據(jù)清洗:前端嚴(yán)格過濾 lat=0 或 abs(lat)<0.1 的坐標(biāo)。
  • 范圍鎖定:地圖搜索時加上 boundary: region(city, 0),強(qiáng)制限制在當(dāng)前城市,防止飛線到異地同名點(diǎn)。

云函數(shù)超時與并發(fā)限制

難點(diǎn):大模型生成文本需要 15s+,搜圖 12 張并發(fā)請求會導(dǎo)致 QPS 超限(騰訊地圖個人版限制 5QPS)或 IP 被封,導(dǎo)致云函數(shù) 3s 默認(rèn)超時報(bào)錯。

解決方案:

  • 配置調(diào)整:將云函數(shù)超時硬性上調(diào)至 60s。
  • 后端節(jié)流:引入 sleep(250ms) 函數(shù),手動控制 API 調(diào)用頻率。
  • 圖源策略:采用混合策略(Pexels 免費(fèi)庫分流 + SerpApi 精準(zhǔn)搜索),并實(shí)現(xiàn)串行/并行控制。

復(fù)雜的數(shù)據(jù)一致性與狀態(tài)管理

難點(diǎn):用戶在列表拖拽修改順序后,地圖上的連線、點(diǎn)與點(diǎn)之間的距離時間都需要實(shí)時重算;“查看模式”與“新建模式”的數(shù)據(jù)流混淆。

解決方案:

  • 緩存接力:利用 wx.setStorageSync 在頁面間傳遞龐大的 JSON 數(shù)據(jù)。
  • 模式分離:在 Result 頁 onLoad 中嚴(yán)格區(qū)分 mode=view(讀庫)和 mode=new(調(diào) AI),避免重復(fù)生成消耗額度。
  • 原子化更新:拖拽后直接修改本地 data.plan 并觸發(fā) resolveLocationsAndRoutes,實(shí)現(xiàn)無感刷新。

微信小程序生態(tài)的限制

難點(diǎn):無法直接保存長圖(Canvas 繪圖太復(fù)雜)、隱私接口(定位、用戶信息)審核收緊。

解決方案:降級策略,定位權(quán)限改用默認(rèn)城市;酒店比價(jià)改用wx.navigateToMiniProgram跳轉(zhuǎn)成熟的騰訊地圖小程序。

未來無限可能……

本文由人人都是產(chǎn)品經(jīng)理作者【小王子和小企鵝】,微信公眾號:【小王子和小企鵝】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!