廣發證券攜手HarmonyOS打造智慧金融服務｜HDC2021技術分論壇

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}},{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"以下文章來源於廣發證券科技金融 ，作者GFS","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}},{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"本期我們給大家帶來的是廣發證券前端開發工程師黃欽佳的分享，希望能給你的HarmonyOS開發之旅帶來啓發~","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"10月22日，華爲開發者大會2021（Together）在東莞松山湖開幕。廣發證券受邀作爲技術論壇嘉賓參與大會，在HarmonyOS應用與服務開發的論壇上，信息技術部前端開發工程師黃欽佳分享了廣發證券原子化服務的應用開發案例。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/0a/0addc6e864808f89cc5a609be6466d47.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"圖1 黃欽佳HDC大會分享","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"一、廣發證券接入鴻蒙生態","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"隨着數字時代的發展，泛終端場景下的智能化信息服務將成爲大衆日益迫切的需求，在一些特定場景中如跑步、健身等，客戶不便使用手機，無法即時享受投資服務。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"針對此類場景，廣發證券基於HarmonyOS原子化服務輕量化的特點，推出“行情服務”、“開戶服務”、“秒答服務”三個原子化服務，其中“行情服務”覆蓋智能手機、智能手錶，“開戶服務”和“秒答服務”僅限於手機端使用。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"投資者只需在搭載HarmonyOS 的手機服務中心搜索“廣發”，將原子化服務卡片添加至“我的服務”或手機桌面，點擊相應卡片便可享受到各類投資服務，包括一鍵查看全球實時行情、免安裝完成快速開戶、學習投資理財課程、連接投顧秒答等。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用戶點擊“同步自選”，選擇設備，可將自選行情一鍵流轉至手錶中，實現廣發行情服務的無縫流轉，給用戶流暢完整的沉浸式體驗。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"1. 豐富的服務卡片","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"服務卡片是將原子化服務/應用的重要信息以卡片的形式展示在桌面，用戶可在不同終端通過快捷手勢使用卡片，通過輕量交互行爲實現服務直達。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對此，廣發證券開發了4類服務卡片，涵蓋證券開戶、廣發秒答、股票行情和投資課程等多種規格，適用於手錶、手機等不同場景，爲客戶提供多樣化個性服務。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d0/d0d03b5da5fa1cb90aa92ef4e3bc7d83.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"圖2 服務卡片","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"2. 跨終端流轉及自適應","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"HarmonyOS 採用服務流轉的分佈式操作方式，通過流轉能力打破設備界限，實現多設備聯動，使原子化服務可流轉，實現如郵件跨設備編輯、多設備協同健身、多屏遊戲等分佈式業務。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過嵌入流轉功能，可以便捷地將服務流轉到不同的 HarmonyOS 設備，包括但不限於手錶等設備，也可靈活地切換和管理流轉任務，實現多設備的協同聯動，爲客戶提供全場景多終端的服務體驗。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"針對不同終端的特點，廣發證券提供了不同的展示佈局。如圖3所示，手機屏大，可展示信息的全貌，手錶小屏，則展示精煉行情信息。未來拓展智慧屏等大屏幕，則可利用橫屏同時展示更多內容。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/29/29f59b9bb0efb6516fb2581a958fe80b.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"圖3 跨終端UX自適應","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同時，用戶也可以通過手機終端授權進行登錄，同步用戶的自選股列表，實現多終端服務流轉，隨時隨地查看股票行情。如圖4所示，在手錶端點擊同步自選股的時候，手機端可以直接彈出授權提示框，點擊確認後，即可將手機中自選股票同步流轉至手錶，整體流程便捷流暢。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/94/94ccc96d4630ff8a15668bb8b325838c.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"圖4 跨端協同","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"豐富的服務卡片和跨終端的互聯互通，組成一個虛擬的超級終端，將人、設備、場景有機地關聯在一起，讓客戶能在全場景生活中接觸的多種智能終端實現極簡連接、極簡交互、硬件互助等體驗，用最合適的設備提供最佳的金融服務體驗。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"二、HarmonyOS應用與服務開發技術分享","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以下是從架構設計到具體代碼交付過程中的一些思考及實踐。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"1. Java or JS ？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先介紹一下技術選型。“HarmonyOS的Java UI提供了細粒度的UI編程接口，使應用開發更加靈活；JS UI提供了相對高層的UI描述，使應用開發更加簡單。”","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在前期調研的時候，廣發證券發現HarmonyOS應用支持JS UI，並且提供了不少的組件和能力，看起來挺像小程序的開發過程；且支持CSS的使用，在前端開發的過程中，CSS佈局是非常靈活和高效的，也直接支持npm的海量資源，所以廣發證券決定優先用JS。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2c/2c30cd9e9a03234bee81b4a27981319a.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"圖5 Java和JS對比","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"2. 模塊設計","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關於模塊設計的心路歷程，如圖6所示，廣發證券最初的構想是將多終端類型共用一個entry，但隨着開發過程的逐漸深入發現有些配置必須按照模塊進行，比如說圖標和橫豎屏模式的設置。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/0f/0fa0323c34af19ed6fa5655ca94020ec.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"圖6 模塊設計","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"於是他們將模塊關係更改爲：一個公共模塊（common）+多個Entry（對應不同終端）+多個FA（如圖7所示）。絕大部分的業務邏輯代碼甚至圖片資源，都集中在common中。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f0/f031584662d77932a8c20b97df7c808b.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"圖7 common模塊","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在common中，他們通過Java 和 JS 常量共享、圖片同步、npm本地依賴等這幾項設計，實現了JS組件在開發體驗中比較完整的閉環。對此，他們還編寫了gradle腳本，實現JS組件圖片從common到引用模塊的自動同步，構建的也會自動運行npm install，保證JS組件在目標模塊的更新。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"3. 一次開發，多端部署","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在前面效果展示時，手機、平板裏的服務卡片都有相同的功能，其實它們是同一套代碼（如圖8所示），只是在不同終端部署時，根據設備類型和屏幕狀態將CSS做出調整，如手錶應用只使用了自選股部分的功能。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c3/c37def3aa2ea9fd69a4745b75492f542.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"圖8 一次開發，多端部署","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"4. 鴻蒙操作系統的能力在實踐中的應用","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來看看下開發過程中，廣發證券是如何使用鴻蒙操作系統的一些能力的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（1）組件","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"廣發證券進行JS開發時，主要依靠SDK提供的UI組件。除了常用的div, text, image 組件，還有list、swiper、chart、tabs這些交互較爲複雜的組件（如圖9所示）。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f3/f3d938fed94857209f70f459c3266d7f.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"圖9 UI組件","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在這些組件中，list組件，用來展示自選股列表；swiper 和 tabs 提供了常見的滑動切換效果，用起來很方便，其中swiper用在了自選tab和直播tab的切換，tabs則用於課程內容的切換。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"與tabs關聯的tab-bar容納了他們的課程類別列表，tab-content用來展示每個類別下的視頻列表；chart組件展示簡單的行情分時曲線也是沒問題的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（2）JS 調用PA","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其次，JS UI需要配套的JS API提供一些底層系統能力，如果當前SDK還不支持，就會選擇PA的方式，自行實現並提供給JS。比如說以下幾個場景：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"●掃碼功能用的是Java實現，掃碼結果如何傳遞給JS UI？這就需要一個數據中轉（代碼如圖10所示）；","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"● 獲取設備名字和APP安裝狀態等能力需要通過Java代碼實現來實現；","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c6/c6d625eaaea7bb61f1e8935b57daf70e.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"圖10 JS調用PA","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此外，前面提到的Java 和 JS 代碼共享功能在圖11也得到應用：左邊是JS調用PA，通過ShareConst的使用，從編碼上實現請求碼（code）的統一，避免可能的人爲錯誤導致與Java功能對應不一致。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/13/132d7791d79813ac0b741ff664ab219f.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"圖11 Java和JS代碼共享","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（3）跨端協同","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後分享一下鴻蒙操作系統值得一提的特性——跨端協同。跨端協同通過分佈式軟總線，把不同類型的設備連接起來，並通過簡單的API進行靈活的相互調用。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"需要先注意它的使用條件：相同華爲賬號，動態申請權限，指定設備ID，指定跨端Flags。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"三、展望","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"鴻蒙操作系統的超級終端及輕量化原子服務理念將給整個金融生態帶來巨大的變革。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因此，廣發證券將堅持開放融合的理念，圍繞1+8+N全場景智慧生態拓展智能服務新觸點，深入探索研究鴻蒙操作系統帶來的全新技術與服務方式，進一步加快金融產品與鴻蒙操作系統間的融合；從產品、技術、場景聯合發力打造萬物智聯服務新體驗，構建更加開放融合的金融科技新生態，爲每一位客戶提供更便利、更具價值的財富管理服務。","attrs":{}}]}]}