Strutturare un’app structure-an-app

Un progetto AEM Mobile coinvolge un diverso set di tipi di contenuto, tra cui pagine, librerie client JavaScript e CSS, componenti AEM riutilizzabili, configurazioni di sincronizzazione dei contenuti e contenuti shell dell’app PhoneGap. Basare la nuova app AEM Mobile su Kit di avvio è un buon modo per inserire tutti i diversi tipi di contenuti nella struttura consigliata, per facilitarne sia la portabilità che la manutenzione nel lungo periodo.

Contenuto pagina page-content

Affinché possano essere riconosciute dalla console AEM Mobile, le pagine dell’applicazione devono trovarsi tutte sotto /content/mobileapps.

Per convenzione AEM, la prima pagina dell’app deve essere reindirizzata a uno dei suoi elementi secondari che fungono da lingua predefinita dell’app ("en" in entrambi i casi Geometrixx e Starter Kit). La pagina internazionale di primo livello in genere eredita dal componente di base "splash-page" (https://experienceleague.adobe.com/libs/mobileapps/components/splash-page?lang=it) che si occupa dell’inizializzazione necessaria per supportare l’installazione degli aggiornamenti over-the-air di Content Sync (il codice contentInit è disponibile all’indirizzo /etc/clientlibs/mobile/content-sync/js/contentInit.js).

Modelli e componenti templates-and-components

Il codice modello e componente per l'app deve essere in /apps/<brand name="">/<app name="">. In conformità alla convenzione, inserisci il modello e il codice del componente in /apps/<brand name="">/<app name="">. Questo modello deve essere familiare agli sviluppatori che hanno già lavorato con Site in AEM. Per impostazione predefinita, questa opzione è seguita dal blocco di /apps/ per l’accesso anonimo nelle istanze di pubblicazione. Quindi, il tuo codice JSP non elaborato è nascosto da potenziali aggressori.

I modelli specifici dell’app possono essere configurati per essere presentati solo utilizzando allowedPaths sul modello stesso e impostandone il valore su '/content/mobileapps(https://experienceleague.adobe.com/.*?lang=it)?' - o anche qualcosa di più specifico se il modello dovrebbe essere utilizzabile solo per una singola app. Il allowedParents e allowedChildren Le proprietà possono essere utilizzate anche per un controllo granulare dei modelli disponibili per un autore in base alla posizione in cui viene creata la nuova pagina.

Quando crei un componente pagina di app da zero, si consiglia di impostarne il valore sling:resourceSuperType su "mobileapps/components/angular/ng-page". In questo modo la pagina viene impostata per l’authoring e per il rendering come app a pagina singola e puoi sovrapporre tutti i file .jsp che il componente potrebbe dover modificare. Poiché ng-page non include alcun framework dell’interfaccia utente, uno sviluppatore di solito finisce per sovrapporsi (almeno) a "template.jsp" (sovrapposto da /libs/mobileapps/components/angular/ng-page/template.jsp).

I componenti di pagina modificabili che desiderano utilizzare AngularJS hanno un equivalente sling:resourceSuperType componente in /libs/mobileapps/components/angular/ng-component che può essere sovrapposto e personalizzato nello stesso modo.

Clientlibs JavaScript e CSS javascript-and-css-clientlibs

Nelle librerie client, sono disponibili alcune opzioni per lo sviluppatore di dove inserirle nell’archivio. Il seguente modello è offerto a titolo indicativo, ma non è un requisito difficile.

Se il codice lato client può essere mantenuto da solo e non è correlato a un componente specifico dell'applicazione, ovvero può essere riutilizzato in altre applicazioni, l'Adobe consiglia di memorizzarlo in /etc/clientlibs/<brand name="">/<lib name="">. D’altra parte, se la libreria client è specifica per una singola app, puoi nidificarla come elemento secondario del nodo di progettazione dell’app; /etc/designs/phonegap/<brand name="">/<app name="">/clientlibs. Non utilizzare la categoria di clientlib con altre librerie, ma incorpora altre librerie in base alle esigenze. Seguendo questo modello, lo sviluppatore evita di dover aggiungere nuove configurazioni di sincronizzazione dei contenuti ogni volta che una libreria client viene aggiunta all’app, semplicemente aggiornando la proprietà "embeds" della libreria client di progettazione dell’app. Ad esempio, osserva il nodo di configurazione Geometrixx clientlibs-all Content Sync in /content/phonegap/geometrixx-outdoors/en/jcr:content/pge-app/app-config/clientlibs-all.

Se il codice lato client è strettamente associato a un componente specifico, inseriscilo in una libreria client nidificata sotto la posizione del componente in /apps/ e incorporane la categoria nella libreria client "progettazione" dell’app.

Configurazione PhoneGap phonegap-configuration

Ogni app AEM Mobile contiene una directory che ospita i file di configurazione utilizzati da PhoneGap interfaccia della riga di comando e PhoneGap Build su https://build.phonegap.com/ per trasformare il contenuto web in un’applicazione eseguibile. Nell’esempio di Geometrixx, ad esempio, questa directory (https://experienceleague.adobe.com/content/phonegap/geometrixx-outdoors/shell/jcr:content/page-app/app-content?lang=it) si trova come parte della shell; una decisione di progettazione è stata presa perché contiene solo contenuti che non possono essere aggiornati over-the-air, come i plug-in che si occupano delle API dei dispositivi e la configurazione dell’app stessa.

In questa directory, trovi anche alcuni Hook Cordova che possono essere utilizzate per installare i plug-in, inserire i file di risorse nelle posizioni specifiche della piattaforma e altre azioni che devono essere eseguite come parte della build. Nota: in alternativa al download di ciascun plug-in come parte della build, puoi seguire il pattern dell’app Kitchen Sink e includere il codice sorgente del plug-in con il resto del progetto dell'app.

Passaggi successivi the-next-steps

Dopo aver appreso la struttura dell’app, consulta Creazione e modifica delle app tramite la console delle app.