HarmonyOS從基礎到實戰-高效能華為線上答題元服務

說明：本文首發於CSDN
https://shangjinzhu.blog.csdn.net/article/details/134467049

最近看到美團、新浪、去哪兒多家網際網路企業啟動鴻蒙原生應用開發，這個HarmonyOS NEXT越來越引人關注。奈何當前不面向個人開發者開放，但是我們可以嘗試下鴻蒙新的應用形態——元服務的開發。
元服務是基於HarmonyOS提供的一種面向未來的服務提供方式，有獨立入口、免安裝，以萬能卡片等多種呈現形態，可提供一個或多個便捷、輕量化服務。在本文中，我將詳細介紹元服務、ArkTS 語言開發以及 DevEco Studio 開發工具的端雲一體化開發和低程式碼開發等方面，並且帶大家親自實戰元服務開發-線上答題專案深度體驗學習！

線上答題元服務主要功能：

1. 接入AGC認證服務，以實現使用者登入，展示個人賬戶資訊，線上答題以及積分排行等功能。
2. 使用者可以在應用中進行知識練習，上傳自定義題目以豐富題庫內容。
3. 利用華為雲服務，實現使用者答題展示成績和排名，增加使用者對學習的興趣。
4. 使用雲資料庫儲存題目，實現卡片的重新整理和頁面跳轉等功能。

專案執行演示影片

XXX

一．元服務核心內容

本文著重介紹元服務元服務輕量化、資訊外顯的特性，由基礎知識學習到專案實戰，逐步深入的帶大家學習，最後使用元服務技術開發一套高效能，高可用性的線上答題元服務。

1.1 元服務

HarmonyOS是一款面向萬物互聯時代的、全新的分散式作業系統。執行在HarmonyOS的應用分為兩種形態：

• 傳統方式的需要安裝的應用（即傳統概念中的HarmonyOS應用，可簡稱應用）。
• 提供特定功能、免安裝的應用（即元服務，原名為原子化服務）。

本文則主要使用元服務形態進行介紹及其開發實戰。

1.1.1元服務的呈現形態

鴻蒙萬能卡片是元服務的主要展現形式之一（其他形式包括語音和圖示等）。每個萬能卡片都是一種始終可見的元服務或應用，將重要資訊以卡片的形式展示在桌面上，透過輕量互動實現服務的便捷訪問。

1.1.2 元服務的特點

①　免安裝，更輕量化地將服務帶給使用者
②　一鍵服務直達，將使用者感興趣的內容前置、外顯
③　跨端轉移，多終端裝置間無縫流轉
④　情景智慧卡片推薦，隨心定製、更懂使用者

1.2 ArkTS語言

ArkTS是鴻蒙生態的應用開發語言。它在保持TypeScript（簡稱TS）基本語法風格的基礎上，對TS的動態型別特性施加更嚴格的約束，引入靜態型別。同時，提供了宣告式UI、狀態管理等相應的能力，讓開發者可以以更簡潔、更自然的方式開發高效能應用。

1.2.1 ArkTS語言特點

ArkTS語言透過不斷的迭代升級有了許多更新和改進，一年前我第一次接觸這個技術，發現很多地方都不完善，相比其他語言（TS，JS）相比有很多不足。但是經過一年的迭代更新，其功能現在已經十分完善且強大。讓開發者能夠更高效地編寫和開發應用程式。

ArkTS提供了簡潔自然的宣告式語法、元件化機制、資料-UI自動關聯等能力，實現了貼近自然語言，書寫效率更高的程式設計方式，為開發者帶來易學、易懂、極簡開發的優質體驗。
在使用ArkTS語言開發應用時，狀態管理是一個重要的概念。狀態管理是指管理應用中的各種狀態，包括元件狀態、全域性狀態等。狀態管理可以幫助開發者更好地組織和管理應用中的資料，使得應用更加穩定和高效。ArkTS提供了多維度的狀態管理機制，可以在ArkUI開發框架中使用。和UI相關聯的資料，不僅可以在元件內使用，還可以在不同元件層級間傳遞，比如父子元件之間、爺孫元件之間，也可以是應用全域性範圍內的傳遞。

1.2.2 能力擴充套件

ArkTS在TS的基礎上主要擴充套件瞭如下能力：

• 基本語法：ArkTS定義了宣告式UI描述、自定義元件和動態擴充套件UI元素的能力，再配合ArkUI開發框架中的系統元件及其相關的事件方法、屬性方法等共同構成了UI開發的主體。
• 狀態管理：ArkTS提供了多維度的狀態管理機制。在UI開發框架中，與UI相關聯的資料可以在元件內使用，也可以在不同元件層級間傳遞，比如父子元件之間、爺孫元件之間，還可以在應用全域性範圍內傳遞或跨裝置傳遞。另外，從資料的傳遞形式來看，可分為只讀的單向傳遞和可變更的雙向傳遞。開發者可以靈活的利用這些能力來實現資料和UI的聯動。

• 渲染控制：ArkTS提供了渲染控制的能力。條件渲染可根據應用的不同狀態，渲染對應狀態下的UI內容。迴圈渲染可從資料來源中迭代獲取資料，並在每次迭代過程中建立相應的元件。資料懶載入從資料來源中按需迭代資料，並在每次迭代過程中建立相應的元件。

  1.3 DevEco Studio開發工具

  DevEco Studio 3.1配套支援HarmonyOS 3.1版本及以上的應用及服務開發，提供了程式碼智慧編輯、低程式碼開發、雙向預覽等功能，以及輕量構建工具DevEco Hvigor 、本地模擬器，持續提升應用及服務開發效率。
  官方下載地址：HUAWEI DevEco Studio和SDK下載和升級 | HarmonyOS開發者

  1.3.1低程式碼開發

  HarmonyOS低程式碼，有豐富的UI介面編輯功能，例如基於圖形化的自由拖拽、資料的引數化配置等，透過視覺化介面開發方式快速構建佈局，可有效降低使用者的時間成本和提升使用者構建UI介面的效率。我們來一起體驗一下：
  只需在建立新專案時開啟低程式碼按鈕（Enable Super Visual）即可:
  
  建立專案之後，我們只需拖動元件到視覺化區域即可，我們需要了解下面的工作區功能如下：

• UI Control：UI控制元件欄，可以將相應的元件選中並拖動到畫布（Canvas）中，實現控制元件的新增。
• Component Tree：元件樹，在低程式碼開發介面中，開發者可以直觀地看到元件的層級結構、摘要資訊以及錯誤提示。開發者可以透過選中元件樹中的元件（畫布中對應的元件被同步選中），實現畫布內元件的快速定位；單擊元件後的或圖示，可以隱藏/顯示相應的元件。
• Panel：功能皮膚，包括常用的畫布縮小放大、撤銷、顯示/隱藏元件虛擬邊框、裝置切換、明暗模式切換、Media query切換、視覺化佈局介面一鍵轉換為hml和css檔案等。
• Canvas：畫布，開發者可在此區域對元件進行拖拽、拉伸等視覺化操作，構建UI介面佈局效果。

• Attributes & Styles：屬性樣式欄，選中畫布中的相應元件後，在右側屬性樣式欄可以對該元件的屬性樣式進行配置。
  我們可以利用視覺化來做各種各樣的前端頁面，這大大的降低了我們的工作量，下面則是一個視覺化拖動的效果頁面，具體的內容我們則可以到低程式碼開發文件中進行深度學習。
  

  1.3.2端雲一體化開發

  端雲一體化開發是DevEco Studio的一個新特性，它允許開發者在本地和雲端之間無縫地開發和除錯應用程式。透過端雲一體化開發，開發者可以更加高效地使用雲端計算資源，同時也可以在本地快速測試和除錯程式碼。讓我們一起體驗一下端雲一體化開發的魅力。
  
  端雲一體化開發基本流程如下：
  建立雲函式->除錯雲函式->雲函式與應用程式的通訊
  1.建立雲函式：在DevEco Studio中，開發者可以輕鬆地建立和管理雲函式。雲函式是一段執行在雲端的程式碼，它可以與應用程式進行通訊，執行一些需要在雲端完成的任務。透過建立雲函式，開發者可以利用雲端計算的強大能力，同時也可以在本地快速測試和除錯程式碼。
  2.除錯雲函式：在DevEco Studio中，開發者可以使用偵錯程式來除錯雲函式。偵錯程式允許開發者在本地模擬雲函式的執行環境，並在程式碼中加入斷點來進行除錯。這使得開發者可以更加輕鬆地發現和解決問題，提高了開發效率。
  3.雲函式與應用程式的通訊：在端雲一體化開發中，雲函式與應用程式之間的通訊是非常重要的。DevEco Studio提供了一些工具來幫助開發者實現這種通訊。例如，開發者可以使用HTTP或WebSocket協議來與雲函式進行通訊，也可以使用華為提供的雲服務SDK來進行更高階的通訊操作。這些工具使得開發者可以更加輕鬆地實現雲函式與應用程式之間的互動，提高了開發效率。
  端雲一體化開發相比大家在學習生涯中都有聽說，下面就是 HarmonyOS端雲一體化開發相比傳統開發的優勢，大家對比觀看就可以發現其優勢巨大。整合端雲一體化元件後，進行簡單配置即可向應用使用者提供登入、支付等多種功能。
  

  二．專案雲端配置

  2.1 AppGallery Connect服務建立

  AppGallery Connect（以下簡稱AGC）是華為應用市場推出的應用一站式服務平臺，致力於為開發者提供應用創意、開發、分發、運營、分析全生命週期服務，構建全場景智慧化的應用生態。
  
  1.我們需要進入AppGallery Connect服務中心，建立新的專案，並且填入專案名稱。
  
  2.進入如下頁面，並在Serverless裡，找到手機號碼，將其設定為啟用狀態。
  
  
  3.關於SDK配置，因為我們是雲端一體化專案，不需要我們額外配置SDK，在建立專案時會自動配置。
  4.到我的應用，建立對應的應用，如下：
  
  需要注意：軟體包型別選擇HarmonyOS應用，是否元服務選擇是。
  5.到Serverless裡開通建立雲函式和雲資料庫，如下圖。這樣提前開通的好處是後續無需更新開通後的配置檔案，對新手極為友好。
  

  三．專案環境本地搭建

  提前做完雲端配置後，對於專案環境本地搭建較為容易。

  3.1 建立端雲一體化元服務專案

  1.只需按下面選擇對應的專案模板進行建立。
  
  2.建立專案名稱為：arkTSDemo（這是我的案例名稱，按照華為包命名規範自行起名即可）。
  注意：需要和上文中的雲端建立包名相同，否則會出現下面檢測不到的情況，只需要檢查包名是否匹配即可解決。
  
  填寫對應的引數要求，並且新增到剛剛建立的專案中去。
  
  3.完成上面該有的配置之後，我們再返回到 DevEco Studio，就可以看到我們剛剛建立的。
  
  點選finsh之後我們建立專案，耐心等待配置和自動下載所需資源包即可。
  4.我們的設定SDK也是無需手動配置的，我們的雲端一體化建立會幫我們自動的建立好所需的檔案和配置，為我們節省了大量的步驟。
  5.建立專案，等待依賴配置完成即可開始我們本次的專案實戰了。
  

  四．元服務實戰-線上答題

  4.1 專案結構

  我們專案結構如下圖所示：
  1.entryability：主應用的Ability
  2.Entnyformability：卡片的Ability
  3.Models：從雲資料庫匯出的資料型別
  4.Pages：頁面程式碼資料夾
  5.Widget->Pages:卡片頁面資料夾
  6.rawfile下的倆個檔案：
  ①agconnect-services.json：用於連線severless的配置資訊
  ②schema.json：雲端配置資訊
  

  4.2 專案開發計劃

  專案接入AGC認證服務用於登入，包含展示個人賬號資訊的頁面、線上答題頁面、積分排行頁面，使用者可以在應用上進行知識練習，隨時隨地的鞏固已學的知識，支援使用者自己上傳題目，不斷完善題庫豐富度，構建多元化題庫。利用華為雲服務提供的高效能，高可用性雲服務，可以輕鬆實現，使用者答題展示成績和進度，根據使用者最高成績進行排行，顯示使用者的排名，增加使用者對學習的興趣，可以使用元服務卡片展示使用者的成績排名或者成績和進度均可。
  1.構建優美頁面
  2.使用雲資料庫儲存題目，透過雲資料庫介面進行查詢。
  3.桌面卡片的重新整理事件依賴於postCardAction介面的message事件。
  4.點選跳轉應用使用postCardAction介面的router事件。
  5.FormAbility和應用頁面點選後重新整理卡片的功能使用formProvider.updateForm介面。

  4.3 登入頁面構建

  1.引用部分依賴如下：

  import router from '@ohos.router'
  import prompt from '@ohos.prompt'
  import promptAction from '@ohos.promptAction'
  import {Login, AuthMode} from "@ohos/agconnect-auth-component";

  2.核心程式碼（已去特定專案連結塊程式碼，展示供大家直接使用的本頁通用核心程式碼）

  Login({
  modes: [AuthMode.PHONE_VERIFY_CODE, AuthMode.MAIL_VERIFY_CODE],
  onSuccess: (user) => {
    console.log('使用者資訊:', user.getPhone());
    this.phone=String(user.getPhone());
    router.replaceUrl({
      url: "page/homepage",
      params: {
        name: this.phone
      }
    })
  
  }
  
  }){
  Row() {
    Button('第三方登陸')
      .width("140vp")
      .height("80vp")
      .fontSize(20)
      .margin({
        bottom: 40,
        top: 60,
        right: 20
      })
    Button('立即註冊')
      .width("140vp")
      .height("80vp")
      .fontSize(20)
      .margin({
        bottom: 40,
        top: 60,
      })
  }
  Image($r("app.media.logo")).width(80)

  頁面程式碼功能解釋：

• 匯入所需的模組和元件，包括路由 (router)、提示 (prompt)、提示操作 (promptAction) 以及身份驗證相關的元件 (Login, AuthMode)。
• 定義一個名為 LoginPage 的頁面元件，用於使用者登入。
• 在 LoginPage 中定義了一些狀態 (@State)，包括密碼 (password)、使用者名稱 (username) 以及電話號碼 (phone)，用於儲存使用者輸入的資訊。
• 在 build 方法中，建立了頁面的佈局，包括標題、使用者名稱輸入框、密碼輸入框、忘記密碼連結和登入按鈕。
• 當點選登入按鈕時，檢查使用者名稱和密碼是否為空。如果為空，使用路由將使用者重定向到 "page/hello" 頁面，並傳遞使用者名稱引數。否則，顯示錯誤提示。
• 使用身份驗證元件 (Login) 提供了第三方登入的選項，當使用者成功登入後，將使用者的手機號碼獲取並重定向到 "page/homepage" 頁面，同時傳遞手機號碼引數。

• 頁面佈局中還包含了第三方登入按鈕和立即註冊按鈕，以及應用的標誌圖示。
  頁面預覽效果：
  

  4.4 首頁功能構建

  首頁是一個包含多個選項卡的頁面，詳細功能內容如下：

• 匯入所需的模組和元件，包括路由 (router)、提示操作 (promptAction)、Web檢視 (web_webview) 和網路請求 (http)。
• 在 Index 元件中，定義了一些狀態 (@State)，包括從路由獲取的引數 (paramsFromIndex)、播放器資料 (playerData)、當前頁數 (mCurrentPage)，以及一些其他控制器和資源。
• 在 build 方法中，建立了一個包含多個選項卡的頁面，每個選項卡代表不同的內容。
• 頁面的第一個選項卡包含了一些圖片、文字和按鈕，以及一個用於觀看影片的 Video 元件。還有一個按鈕，當點選時會觸發 HTTP 請求，獲取排行榜資料，並在獲取資料後跳轉到另一個頁面顯示排行榜。
• 頁面的第二個選項卡包含了一個影片播放器，使用者可以點選按鈕來開始播放影片或切換到下一個影片。
• 頁面的第三個選項卡包含了一些個人資訊和操作，包括退出登入、題目上傳、通知和排行榜。使用者可以點選這些操作來執行相應的功能。

• 使用 Tabs 元件建立了包含選項卡的佈局，並在每個選項卡中定義了不同的內容。
  
  核心程式碼1：

  Tabs({ barPosition: BarPosition.End, controller: this.mTabController }) {
  TabContent() {
    // ... 選項卡1的內容
  }
  .tabBar(this.TabBuilder(0));
  // TabContent2 和 TabContent3 同樣方式建立
  }

  連結雲端資料庫關鍵程式碼

  mport formInfo from '@ohos.app.form.formInfo';
  import formBindingData from '@ohos.app.form.formBindingData';
  import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
  import formProvider from '@ohos.app.form.formProvider';
  import agconnect from '@hw-agconnect/api-ohos';
  import { AGConnectCloudDB, CloudDBZone, CloudDBZoneConfig, CloudDBZoneQuery } from '@hw-agconnect/database-ohos';

4.5 答題頁面構建

答題頁面是許多應用程式中的關鍵組成部分，尤其是在教育、娛樂和培訓應用中。構建一個功能強大的答題頁面，以提供使用者友好的答題體驗。
頁面設計需滿足以下要求：

• 動態內容展示：頁面可以動態顯示多個問題和答案選項，根據使用者的選擇和進度更新內容。
• 狀態管理：使用@State裝飾器宣告瞭多個狀態屬性，用於儲存題目、答案、使用者選擇的答案、解析等資訊。這有助於管理和更新頁面的狀態。
• 使用者互動：使用者可以點選答案選項按鈕來選擇答案，並根據答案的正確與否進行相應的互動反饋。
• 頁面導航：提供了頁面導航功能，使用者可以在答題完成後返回到主頁。
• 動態解析顯示：可以顯示答案的解析，使用者可以點選按鈕來檢視問題的解釋。
• 靈活的頁面佈局：透過Column、Row、Button等元件來構建頁面佈局，提供了靈活性和可定製性。
• 按鈕樣式和互動設計：根據使用者的選擇狀態，按鈕的顏色會改變，以提供視覺反饋。

• 清晰的程式碼結構：程式碼結構清晰，使用了註釋來解釋各個部分的功能，便於理解和維護。
  核心程式碼：

  @State paramsFromIndex: object = router.getParams()
  @State currentQuestionIndex: number = 0;
  // @State any_go: Resource = $r('app.profile.timu')
  // @State questions: string[] = dati
  @State questions: string[] = this.paramsFromIndex?.['questions']
  @State answers: string[][] =  this.paramsFromIndex?.['answers']
  @State correctAnswers: string[] = this.paramsFromIndex?.['correctAnswers']
  @State explanations: string[] = this.paramsFromIndex?.['explanations'] // 每個問題的解析
  @State selectedAnswer: string = '';
  @State selectedAnswerList: string[] = [];   //用於記錄選過的答案
  @State selectedscore: number = 0;
  @State showExplanation: boolean = false; // 用於控制是否顯示解析
  @State ende: boolean = false; // 用於控制是否結束
  onNextQuestion() {
    const nextIndex = this.currentQuestionIndex + 1;
    if (nextIndex < this.questions.length) {
      this.currentQuestionIndex = nextIndex;
      this.selectedAnswer = '';
      this.showExplanation = false; // 清空顯示解析狀態
      this.ende=false;
    } else {
      this.ende=true;
      console.info("------點選了網路請求")
                extraData: {
            'prapoints': this.selectedscore,
            'userid':3,
            'Numberquestions':this.questions.length
          },
          connectTimeout: 60000, // 可選，預設為60s
          readTimeout: 60000, // 可選，預設為60s
        }, (err, data) => {
  
        if (!err) {
          // data.result為http響應內容，可根據業務需要進行解析
          // @ts-ignore
          const response = JSON.parse(data.result);
          console.info('Result:' + response);
  
        } else {
          console.info('error:' + JSON.stringify(err));
          // 該請求不再使用，呼叫destroy方法主動銷燬。
          httpRequest.destroy();
        }
      }
      );
      AlertDialog.show({
        title: '答題完成',
        message: '恭喜您完成答題！本次成績：' + this.selectedscore,
      });
    }
  }

  效果展示
  

  4.5.6 答題卡片頁面

  核心程式碼：

  onNextQuestion() {
  const nextIndex = this.currentQuestionIndex + 1;
  if (nextIndex < this.questions.length) {
    this.currentQuestionIndex = nextIndex;
    this.selectedAnswer = '';
    this.showExplanation = false; // 清空顯示解析狀態
    this.ende=false;
  } else {
    this.ende=true;
  }
  }
  
  .onClick(() => {
  postCardAction(this, {
    "action": this.ACTION_TYPE,
    "abilityName": this.ABILITY_NAME,
    "params": {
      "message": this.MESSAGE
    }
  });
  })
  
  .onClick(() => {
  this.selectedAnswer = answer;
  this.showExplanation = true; // 顯示解析
  this.selectedAnswerList[this.currentQuestionIndex] = answer;
  if (String(index + 1) == this.correctAnswers[this.currentQuestionIndex]) {
    this.selectedscore = this.selectedscore + 1;
  }
  }
  

  效果展示
  

  4.6 排行榜頁面構建

  排行榜頁面在應用中起著至關重要的作用，它可以展示使用者之間的比賽成績、競爭和表現。無論是遊戲、學習應用還是社交媒體平臺，排行榜頁面都具有廣泛的應用。
  
  核心程式碼：

  import router from '@ohos.router';
  @Entry
  @Component
  struct LeaderboardPage {
  // 玩家資料陣列，每個元素包含玩家姓名和分數
  
  @State paramsFromIndex: object = router.getParams()
  @State playerData: string[][] = this.paramsFromIndex?.['playerData']
  
  build() {
  
    Column() {
      Row() {
        Button("<")
          .width("68.78vp")
          .height("46.26vp")
          // .margin({ left: -60 })
          .fontColor("#fffff")
          .type(ButtonType.Circle)
          .fontSize("27fp")
          .onClick(() => {
            router.replaceUrl({
              url: "page/homepage",
              params: {
                name: this.paramsFromIndex?.['name']
              }
            })
          });
  
        Text("排行榜")
          .width("80%")
          .height("60vp")
          .fontColor("#0654ef")
          .textAlign(TextAlign.Center)
          .fontSize("30fp");
      }
  
      Column() {
        Image($r('app.media.pai'))
          .width("350.42vp")
          .height("189.02vp")
          .margin({
            top:10,
            bottom:20
          })
      }
      Row() {
  
        Text("   姓名")
          .width("45%")
          .fontSize("20fp")
          .fontColor(Color.Blue); // 可以調整表頭的樣式
  
        Text("成績")
          .width("35%")
          .fontSize("20fp")
          .fontColor(Color.Blue);
  
        Text("操作")
          .width("35%")
          .fontSize("20fp")
          .fontColor(Color.Blue);
      }
      // .width("50%")
      // 遍歷玩家資料陣列，建立玩家條目
      ForEach(this.playerData, (player, index) => {
        Row() {
          Text(`${index + 1}.`)
            .width("10%")
            .fontSize("18fp");
  
          Text(player[0]) // 玩家姓名
            .width("30%")
            .fontSize("18fp");
  
          Text(`得分: ${player[1]}`) // 玩家得分
            .width("40%")
            .fontSize("18fp");
  
          Text("檢視")
            .width("20%")
            .fontColor(Color.Red)
            .fontSize("18fp")
            .onClick(() => {
              // this.onCreate();
              // this.onCreate()
              // 在此處理檢視詳情的邏輯
              AlertDialog.show({
                title: "檢視",
                message: `姓名: ${player[0]}\n得分: ${player[1]}`,
              });
              // console.error('JSON解析錯誤:', this.playerData2);
            });
  
        }
        .width("95%")
        .margin({ top: '10vp' })
        .margin(10)
      });
    }
    .width('100%')
  }
  }

  程式碼總結：
  1.建立 LeaderboardPage 元件，用於顯示排行榜資料
  2.定義了一個頁面元件，用於顯示排行榜資料，並提供了返回按鈕和檢視按鈕等互動功能。排行榜資料來自路由引數，並以表格的形式呈現在頁面上。使用者可以點選檢視按鈕來檢視玩家的詳細資訊。

  4.7 題庫上傳頁面構建

  題庫上傳頁面在教育、培訓和娛樂應用中扮演著關鍵角色，它允許使用者上傳自定義題庫，為學習和娛樂提供更多選擇。
  
  題庫上傳頁面的核心是題庫資料的結構，我們需要設計和儲存這些資料，包括問題、答案和其他相關資訊。通常，這些資料可以儲存在資料庫中，以便後續使用。
  

• 使用OHOS框架：該頁面明顯是使用OHOS框架構建的，這是一種適用於HarmonyOS作業系統的應用開發框架。透過匯入@ohos.router模組，你可以實現頁面之間的導航。
• 頁面佈局：頁面採用巢狀的Column和Row佈局，以建立頁面的各個元素。這包括按鈕、文字、文字輸入框、圖片等。
• 路由導航：透過按鈕的onClick事件，頁面實現了路由導航功能，允許使用者返回到主頁（"page/homepage"）。
• 狀態屬性：頁面使用@State裝飾器宣告瞭多個狀態屬性，如message、paramsFromIndex、questions、answers、correctAnswers、explanations、answersflag，這些狀態屬性用於儲存和管理頁面的資料。
• 資料處理：頁面包括多個文字輸入框，用於輸入題目、選項A、選項B、選項C、選項D、答案和解析。每當使用者輸入文字時，相應的狀態屬性會更新以儲存使用者輸入的內容。
• 提交功能：頁面的最後部分包括一個"提交"按鈕，當使用者點選該按鈕時，頁面使將使用者輸入的題目、答案、正確答案和解析等資料傳遞到資料庫。
• 影像元素：頁面包括一個影像元素，透過使用Image元件來顯示上傳圖示。影像的大小和位置都有指定的值。
• 文字元素：頁面使用多個文字元素，如"題目上傳"、"選項A："、"選項B："等，用於標識和指導使用者在輸入框中輸入什麼資訊。
• 樣式和排版：頁面設定了文字的顏色、字型大小、文字對齊等樣式屬性，以增強頁面的可讀性和吸引力。

• 使用者互動：透過文字輸入框和按鈕的互動，使用者可以輸入題目和答案，以及提交這些資料。
  資料更新：使用者輸入的資料透過onChange事件處理函式更新到相應的狀態屬性，這將允許後續的資料處理和提交。
  核心程式碼：

  @State message: string = 'Hello World'
  @State paramsFromIndex: object = router.getParams()
  @State questions: string[] = this.paramsFromIndex?.['questions']
  @State answers: string[][] =  this.paramsFromIndex?.['answers']
  @State correctAnswers: string[] = this.paramsFromIndex?.['correctAnswers']
  @State explanations: string[] = this.paramsFromIndex?.['explanations'] // 每個問題的解析
  @State answersflag: string[] =  []

  連結雲端資料庫關鍵程式碼

  mport formInfo from '@ohos.app.form.formInfo';
  import formBindingData from '@ohos.app.form.formBindingData';
  import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
  import formProvider from '@ohos.app.form.formProvider';
  import agconnect from '@hw-agconnect/api-ohos';
  import { AGConnectCloudDB, CloudDBZone, CloudDBZoneConfig, CloudDBZoneQuery } from '@hw-agconnect/database-ohos';

  要點：

• 確保資料的準確性和格式，以避免上傳無效的題庫資料。

• 最佳化頁面效能，特別是在處理大量資料時，以確保頁面響應迅速。

  4.8 真機執行

  真機執行必須先繼續簽名，只需到專案結構中配置即可。
  注意步驟如下：
  1.用資料線連線HarmonyOS4.0版本系統的手機。
  2.開啟開發者模式和USB除錯
  3.選擇檔案傳輸。
  4.繼續簽名
  5.執行專案到真機
  
  真機執行效果如下：
  

  五、總結

  5.1專案總結

  在本文中，我們介紹了一個關於線上答題應用的專案，其中包括專案結構和開發計劃。以下是本文的主要要點：
  專案結構：

• 專案主要分為主應用的Ability（entryability）、卡片的Ability（Entnyformability）、從雲資料庫匯出的資料型別（Models）以及頁面程式碼資料夾（Pages）等模組。
• 使用了兩個重要的配置檔案，分別是agconnect-services.json和schema.json，用於連線serverless服務和雲端配置資訊。
  專案開發計劃：
• 專案旨在接入AGC認證服務，以實現使用者登入，展示個人賬戶資訊，線上答題以及積分排行等功能。
• 使用者可以在應用中進行知識練習，上傳自定義題目以豐富題庫內容。
  利用華為雲服務，實現使用者答題展示成績和排名，增加使用者對學習的興趣。
• 頁面構建重點在於建立優美的頁面佈局，使用雲資料庫儲存題目，實現卡片的重新整理和頁面跳轉等功能。

1.登入頁面構建：

• 登入頁面使用OHOS框架構建，包括路由導航，文字輸入框，按鈕等元素。
• 使用身份驗證元件（Login）提供了多種登入方式，成功登入後將使用者資訊傳遞並跳轉到主頁。
  頁面佈局包含第三方登入按鈕和立即註冊按鈕，以及應用的標誌圖示。

2.首頁功能構建：

• 首頁包含多個選項卡，分別展示不同內容，如圖片、影片播放器、個人資訊、退出登入、題目上傳和排行榜等功能。
• 頁面使用Tabs元件建立選項卡，資料來自雲端資料庫，並實現了排行榜的功能。

3.答題頁面構建：

• 答題頁面用於使用者進行知識練習，包括動態內容展示、狀態管理、使用者互動、頁面導航等功能。
• 使用者可以選擇答案，檢視解析，根據答案是否正確進行得分計算，最後提交答題結果。

4.排行榜頁面構建：

• 排行榜頁面用於展示使用者之間的比賽成績和競爭，使用者可以檢視其他玩家的成績。
• 頁面使用路由導航，建立排行榜表格，包括玩家姓名、得分和檢視按鈕。

5.題庫上傳頁面構建：
題庫上傳頁面允許使用者上傳自定義題庫，包括問題、答案、正確答案和解析等資料。。

6.真機執行：
最後，文章提到了如何在真機上執行應用，包括繼續簽名和執行專案的步驟。

總之，本文介紹了一個線上答題應用的專案結構和開發計劃，涵蓋了各個頁面的功能和核心程式碼，為開發者提供了建立類似應用的指導。

5.2 元服務總結

1. 元服務的概念:
   元服務作為HarmonyOS的一個重要概念，具有獨立入口、免安裝的特點，為使用者提供了更輕量化的服務訪問方式。透過萬能卡片等形態，使用者可以更方便地訪問重要資訊和功能。這種形式使應用更具便捷性，尤其適用於未來的智慧裝置。
2. ArkTS語言的優勢:
   ArkTS語言是HarmonyOS的應用開發語言，它強調靜態型別和宣告式UI，這有助於提高程式碼質量和可維護性。同時，它提供了豐富的狀態管理機制，允許在不同元件層級之間傳遞資料，這是構建複雜應用所必需的。ArkTS的不斷迭代和完善，使其成為一種強大的開發語言。
3. DevEco Studio開發工具的便捷性: DevEco
   Studio是一個功能強大的開發工具，支援HarmonyOS應用和服務的開發。其中，低程式碼開發功能為開發者提供了視覺化介面，使UI開發更加高效。而端雲一體化開發則允許開發者在本地和雲端之間靈活開發和測試應用。這樣的工具可以大大提高開發效率。
4. 端雲一體化開發的優勢:
   端雲一體化開發為開發者提供了強大的雲端計算能力，並允許在本地進行程式碼除錯。這使開發者能夠更高效地利用雲資源，並更輕鬆地發現和解決問題。此外，與應用程式之間的通訊也得到了很好的支援，使得開發更加便捷。

總的來說，HarmonyOS的元服務、ArkTS語言和DevEco Studio開發工具以及端雲一體化開發，為開發者提供了構建現代化、輕量化、高效能應用的便捷方式。這些技術和工具將幫助開發者更好地適應未來的智慧裝置和服務提供方式。

六.附錄

元服務介紹
https://developer.huawei.com/consumer/cn/harmonyos/fa
ArkTS語言介紹
https://developer.harmonyos.com/cn/develop/arkts/
端雲一體化開發介紹
https://developer.harmonyos.com/cn/docs/documentation/doc-gui...
低程式碼開發介紹
https://developer.harmonyos.com/cn/docs/documentation/doc-gui...