您的混合應用程式是否已準備好使用AEM Mobile?

注意

Adobe建議針對需要單頁應用程式架構用戶端轉換的專案使用SPA編輯器(例如React)。 了解更多.

所以您已將Hybrid PhoneGap或Cordova應用程式匯入AEM,現在該怎麼辦? 您可能會想要新增可授權的內容至您的應用程式。 若要完成這項工作,您必須對AEM應用程式的結構有大致的瞭解。 AEM中的應用程式通常分為兩個部分。 'shell'和'content'。 「shell」包含應用程式的靜態部分;例如PhoneGap設定檔案、應用程式架構和導覽控制項。 您導入的歸檔檔案的內容將作為殼的一部分進行儲存。 在本檔案中,shell是應用程式開發人員建立之Hybrid PhoneGap應用程式中,所有非AEM製作的內容。

內容是指在AEM開發人員建立的AEM中編寫的元件、範本和編寫的頁面。 內容可歸類為開發人員內容或撰寫內容。 元件、設計和頁面範本被視為開發內容,因為這些範本是由開發人員建立。 作者內容是使用元件和範本建立的頁面。 這些作業通常由設計人員或行銷人員完成。

將編寫的AEM頁面新增至您的Hybrid應用程式時,應用程式開發人員與AEM開發人員必須進行協調。 在您想要新增創作內容的應用程式中,應用程式開發人員必須以可在AEM中覆蓋的結構來組織這些頁面。 應用程式開發人員必須能夠提供AEM開發人員AEM製作內容的新增路徑,然後在Hybrid應用程式中提供預留位置頁面,在AEM開發人員製作頁面內容後,該預留位置頁面將會被取代。

為了讓說明更容易遵循,我們將使用AEM Marketing Cloud:AEM Mobile Hybrid Reference,以說明概念。 混合參考應用程式包含附加選單的歡迎頁面。

chlimage_1-76

在此範例中,我們將製作應用程式的歡迎頁面。 查看源https://github.com/Adobe-Marketing-Cloud-Apps/aem-mobile-hybrid-reference/blob/master/hybrid-app/www/js/app.js#L75。 我們看到應用程式開發人員已定義歡迎頁面,並提供應用程式轉譯之頁面的範本。 這是應用程式開發人員和AEM開發人員需要協調的地方。 混合參考應用程式中歡迎頁面範本的路徑定義為「content/mobileapps/hybrid-reference-app/en/welcome.template.html」。 此路徑非常重要,因為AEM開發人員會使用相同的路徑,在AEM儲存庫中編寫其歡迎頁面。

chlimage_1-77

混合應用程式和AEM製作的內容使用相同路徑很重要,因為我們依賴使用「內容同步」來覆蓋內容的能力,將新頁面新增至混合應用程式。 當「混合應用程式」匯入AEM做為匯入程式的一部分時,就會設定「內容同步」設定。

chlimage_1-78

當您從應用程式儀表板「下載來源」時,會執行這些ContentSync指令碼來組合混合應用程式的封存。

chlimage_1-79

ContentSync會先提取應用程式的'shell',然後提取應用程式的'content'。 現在,如果'shell'中有與'content'路徑相同的頁面,'shell'下的頁面將(取代)'content'下的頁面。 換言之,如果我們在AEM中建立與「content/mobileapps/hybrid-reference-app/en/welcome.template.html」路徑相同的頁面(當ContentSync執行時),在「混合參考應用程式」範例中,該頁面將覆蓋屬於Hybrid Reference應用程式一部分的頁面,以及位於該位置的AEM中的任何頁面。 覆蓋由ContentSync負責處理,因此對於使用應用程式的人,使用AEM製作內容的應用程式更新看起來會很順暢,而且不需要重建應用程式。 因此,當您執行應用程式時,歡迎頁面會顯示如下:

chlimage_1-80

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now