分享元服務(wù)「心情盲盒」開發(fā)經(jīng)歷
前言
這次的端云一體化活動同樣是開發(fā)鴻蒙應(yīng)用或者元服務(wù)，上次的端云一體化活動，我也參加了，當(dāng)時簡單入手，在原有模板的基礎(chǔ)上開發(fā)了一個元服務(wù)，那個完全不算一個正常的項目，充其量只能稱呼為一個測試DEMO。通過那個DEMO，我熟悉了端云一體化開發(fā)的步驟，工具的用法，服務(wù)卡片的開發(fā)和交互也都熟悉了。但當(dāng)時受限于個人的技術(shù)水平，沒能開發(fā)一個像樣的元服務(wù)提交發(fā)布，但當(dāng)時有了一個簡單的構(gòu)思，暢想了一下自己會做一個什么樣的元服務(wù)，當(dāng)時構(gòu)思的項目是“快遞盲盒”，這個快遞裝載著陌生朋友的心情，所以叫它盲盒。礙于當(dāng)時個人對端云一體化的云端還不夠熟悉，手邊也沒有支持API9的真機可以調(diào)試，所以當(dāng)時研究了幾天，感覺無望，毅然放棄了。時隔了小半年的時間，通過不斷的學(xué)習(xí)官網(wǎng)的文檔和別人的帖子，發(fā)現(xiàn)在自己項目中集成serverless云服務(wù)真是并不復(fù)雜，一旦搞懂，就所向披靡了，感覺開發(fā)的道路豁然開朗，有任何想法都可以去試試手了。這次，為了圓夢，我就把上次那個想法開發(fā)出來了，做成了一個元服務(wù)，并成功上架了。這個元服務(wù)就是“心情盲盒”，使用的人不多，可能使用價值和受歡迎程度都還不夠，不要緊，這次的經(jīng)歷，堅定了我克服困難勇往直前的信念，也大大提高了自己遇到問題時分析問題和解決問題的能力。
簡介
“心情盲盒”這款元服務(wù)，主要包含兩個模塊，服務(wù)卡片和應(yīng)用主頁面。
服務(wù)卡片查看隨機抽取的陌生人的心情寄語，用戶點擊卡片盒子邊緣空白處，可以改變盒子的顏色，點擊盒子會觸發(fā)盒子旋轉(zhuǎn)，同時獲取別人的心情，心情分為喜怒哀樂四種，分別以不同的表情圖像顯示，圖像下會顯示對方的手機號末尾4位數(shù)字，卡片中間顯示心情詳情，下方是功能操作按鈕，可以繼續(xù)獲取，或者發(fā)布一個心情。
應(yīng)用主頁面中，用戶可以輸入自己的心里話，并選擇此刻的心情，然后發(fā)布。
因為這個元服務(wù)的業(yè)務(wù)功能定義為盲盒，所以查看者和發(fā)布者都是匿名的。盲盒信息是每日自動更新的，因為每個人每天都會有新的心情，所以服務(wù)端只保存了當(dāng)天的心情數(shù)據(jù)，昨天和之前的會被服務(wù)器自動刪除，到了明天今天的心情數(shù)據(jù)也會消失。
本篇文檔簡單介紹一下心情盲盒的功能和實現(xiàn)過程。
預(yù)覽
功能介紹
盒子顏色可以隨機改變，點擊服務(wù)卡片中盒子外的部分，盒子顏色和背景底色都會跟隨改變。
點擊盒子，觸發(fā)盒子旋轉(zhuǎn)動畫，同時跳轉(zhuǎn)到新的界面。
獲取到心情數(shù)據(jù)后，會直接顯示心情信息。
上方的人臉表情是代表喜怒哀樂心情的，看上面這樣子好像是有些不高興，下方的小數(shù)字代表發(fā)布者手機號尾部4位，說明這句心里話是尾號6236的朋友發(fā)布的。中間的黑色文字就是對方說的話。點擊“再換個人”，會重新返回盲盒界面，同時顏色隨機改變，再點擊盲盒，又會繼續(xù)獲取新的心情信息。不論你登錄與否，都可以查看別人的心情，但要想發(fā)表自己的心情，就需要通過手機號進行注冊一下了。
有時，也可能你是當(dāng)天第一個查看盲盒的人，沒有新數(shù)據(jù)就會顯示如下界面，此時，你可以發(fā)表一個心情，作為首發(fā)哦?；蛘咚⑿乱幌拢纯词遣皇且驗榫W(wǎng)絡(luò)不太好的原因沒獲取到數(shù)據(jù)。
點擊發(fā)表之后，會出現(xiàn)如下的發(fā)表界面。
在我想說中，輸入自己想說的心里話，在心情一欄，選擇自己此刻的比較接近的心情，然后點擊“發(fā)布盲盒”就可以了。
發(fā)布成功后，會提示發(fā)布成功，用戶可以選擇“再發(fā)一個”繼續(xù)發(fā)表心情，或者“以后再說”關(guān)閉發(fā)表界面。
如果用戶首次使用，沒有登錄，會提示如下界面，讓用戶進行登錄。
勾選底部的“閱讀并同意”的方框，就可以進行登錄操作了。
其他玩法
基于鴻蒙系統(tǒng)對卡片支持的多功能性，我們可以添加多個心情盲盒服務(wù)卡片，構(gòu)成一個卡片墻，或者把多個心情盲盒堆疊在一起。
盲盒墻效果：
盲盒堆疊效果：
代碼實現(xiàn)
服務(wù)卡片通過message類型的action通知EntryFormAbility獲取新數(shù)據(jù)。
async getMood() {
postCardAction(this, {
'action': 'message',
'params': {
}
});
}EntryFormAbility在onFormEvent中處理message類型消息，并讀取云數(shù)據(jù)庫。
async onFormEvent(formId, message) {
// Called when a specified message event defined by the form provider is triggered.
initialize(this.context, json);
try {
const context = this.context
const value = await context.resourceManager.getRawFileContent('schema.json');
let json: string = buffer.from(value).toString("utf8");
let objectTypeInfo: ObjectTypeInfo = JSON.parse(json);
...
let agcDataBase = cloud.database({ objectTypeInfo: objectTypeInfo, zoneName: "MessageDB" })
const resultArray = await (agcDataBase as Database)
.collection(Message)
.query()
.equalTo('insertDate', curDate)
.orderByDesc("id")
.limit(100, 0)
.get();
...
} catch (err) {
}
}然后將結(jié)果反饋給服務(wù)卡片。
// updateform
let formData = {
'user': msg.getUser(),
'content': msg.getContent(),
'mood': moodIdx,
};
let formInfo = formBindingData.createFormBindingData(formData)
formProvider.updateForm(formId, formInfo).then((data) => {
console.info('FormAbility updateForm success.' + JSON.stringify(data));
}).catch((error) => {
console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
})用戶發(fā)布心情數(shù)據(jù)，直接更新云數(shù)據(jù)庫。
const value = await context.resourceManager.getRawFileContent('schema.json');
let json: string = buffer.from(value).toString("utf8");
let schema: ObjectTypeInfo = JSON.parse(json);
const record = await cloud.database({ objectTypeInfo: schema, zoneName: "MessageDB" })
.collection(Message)
.upsert({
"user": phone,
"content": content,
"mood": mood,
"insertDate": curDate
});用戶登錄的實現(xiàn)。
Login({
modes: [AuthMode.PHONE_VERIFY_CODE],
onSuccess: async (user: AuthUser) => {
// this.shownPartIndex = 2;
this.isShowButton = false
AppStorage.Set<AuthUser>('user', user);
this.currentUser = AppStorage.Get<AuthUser>('user');
if (this.currentUser != null && this.currentUser != undefined) {
let agcUserExtra = await this.currentUser.getUserExtra();
this.creatTime = agcUserExtra.getCreateTime()
this.lastLogin = agcUserExtra.getLastSignInTime()
router.replaceUrl({
url: 'pages/Home'
})
}
}
}) {
if (this.isShowButton && this.isAccept) {
Button({ type: ButtonType.Normal }) {
Text($r('app.string.auth_service_login_button_text'))
.fontColor($r('app.color.white'))
}
}
}用戶登出的實現(xiàn)。
async logout() {
cloud.auth().signOut().then(() => {
this.isShowButton = true
this.currentUser = null
}).catch((error: Object) => {
});
}用戶注銷的實現(xiàn)。
deleteUser() {
cloud.auth().deleteUser().then(() => {
this.isShowButton = true
this.currentUser = null
}).catch((err: Object) => {
})
}總結(jié)
通過這次實踐，熟悉了端云一體化新模板的功能，也熟悉了云數(shù)據(jù)庫、云函數(shù)和用戶認(rèn)證的用法，為以后開發(fā)其他項目打了一個基礎(chǔ)。
