Adobe consiglia di utilizzare l'editor SPA per i progetti che richiedono il rendering lato client basato sul framework dell'applicazione a pagina singola (ad es. React). Per saperne di più.
Il processo di sviluppo AEM applicazioni mobili riconosce che gli utenti con competenze diverse contribuiscono allo sviluppo di applicazioni mobili. La seguente mappa del processo illustra l’ordine generale in cui gli autori e gli sviluppatori di contenuti eseguono le attività.
In questa pagina vengono visualizzate informazioni su come eseguire le attività di marketing. Per informazioni sulle attività per gli sviluppatori, vedere Creazione di applicazioni PhoneGap.
AEM Mobile fornisce il progetto App PhoneGap per la creazione di applicazioni mobili. Il modello definisce la struttura delle applicazioni create. Le applicazioni sono composte dai seguenti elementi:
La pagina principale delle applicazioni mobili create in AEM viene visualizzata nella console App.
La pagina principale è memorizzata sotto la proprietà Percorso di destinazione dell’applicazione specificata al momento della creazione dell’applicazione (il percorso predefinito è /content/phonegap/apps). Il nome pagina è la proprietà Name dell'applicazione. Ad esempio, l'URL predefinito della pagina principale del sito denominato myphonegapapp
è http://localhost:4502/content/phonegap/apps/myphonegapapp.html
.
Le prime pagine figlie della pagina principale sono le varianti di lingua dell'applicazione. Il nome di ogni pagina è la lingua per la quale viene creata l’applicazione. Ad esempio, Inglese è il nome della variante inglese dell'applicazione.
Nota: il progetto predefinito PhoneGap crea solo un'applicazione in lingua inglese. Lo sviluppatore può modificare il progetto in modo da creare più varianti di lingua.
La pagina relativa alla lingua ha due scopi:
Quando l'applicazione viene aperta, viene visualizzata la pagina principale, o index.html di una variante della lingua di un'applicazione. La pagina principale fornisce agli utenti un menu di collegamenti alle varie pagine dell'applicazione. Il sistema paragrafo consente di aggiungere componenti alla pagina per la creazione di contenuti.
Le applicazioni mobili si basano su un modello che definisce una struttura e proprietà di pagina. Potete configurare le seguenti proprietà dell’applicazione:
Puoi anche fornire un file immagine da usare come miniatura dell’applicazione, selezionare la configurazione delle PhoneGap Build da utilizzare e selezionare la configurazione di analisi per app mobili da utilizzare. Questa immagine viene utilizzata solo come miniatura per rappresentare l’applicazione mobile all’interno della console delle app mobili Experience Manager.
Sono presenti schede aggiuntive (e facoltative) per creare il servizio cloud e integrare il plug-in SDK di Mobile Services Adobe nell'app.
Gli sviluppatori possono utilizzare il AEM PhoneGap Starter Kit per creare app e aggiungerle alla console.
La procedura seguente utilizza l’interfaccia utente touch per creare un’applicazione mobile.
Nella barra laterale, fate clic su App.
Tocca o fai clic sull’icona Crea.
(Facoltativo) Nella scheda Avanzate, fornite una descrizione per l'applicazione e modificate l'URL del server, se necessario.
(Facoltativo) Se per compilare l'applicazione utilizzate PhoneGap Build, nella scheda Build selezionate la Configurazione da utilizzare.
Per creare una configurazione di build PhoneGap, fate clic su Gestisci configurazioni.
(Facoltativo) Se utilizzate SiteCatalyst per monitorare l'attività dell'applicazione, nella scheda Analytics selezionate la configurazione da utilizzare.
Per creare una configurazione per app mobile, fai clic su Gestisci configurazioni.
(Facoltativo) Per fornire un'icona dell'applicazione, fare clic sul pulsante Sfoglia, selezionare il file immagine dal file system in uso e fare clic su Apri.
Fai clic su Crea.
Dopo aver creato un’applicazione mobile, potete modificare le proprietà.
Nella barra laterale, fate clic o toccate App.
Selezionate l’applicazione da configurare e fate clic sull’icona Visualizza proprietà pagina.
Per modificare i valori delle proprietà, fate clic o toccate l'icona Modifica.
Configurate le proprietà Base e Avanzate, quindi toccate o fate clic sull'icona Fine.
Nella barra laterale, fate clic o toccate App.
Fai clic per approfondire l'applicazione mobile che desideri modificare nella console di amministrazione delle app. Selezionate la versione della lingua dell’applicazione da configurare e fate clic sull’icona Visualizza proprietà applicazione.
Per modificare i valori delle proprietà, fate clic o toccate l'icona Modifica.
Configura le proprietà nelle schede Base, Avanzate, Genera e Analytics, quindi tocca o fai clic sull'icona Fine.
Dopo aver creato l’applicazione per dispositivi mobili, aggiungete il contenuto utilizzato come interfaccia utente dell’applicazione.
La cache di sincronizzazione dei contenuti nell’istanza di pubblicazione AEM viene utilizzata come archivio del contenuto per le applicazioni mobili:
Le applicazioni mobili includono un comando Aggiornamenti che scarica e installa il contenuto aggiornato dell'applicazione. Quando un'istanza di applicazione invia una richiesta di aggiornamento, Content Sync determina quale contenuto è cambiato dall'ultima volta che l'applicazione è stata aggiornata o installata e fornisce il nuovo contenuto.
Per rendere disponibile il contenuto aggiornato alle applicazioni, aggiornate la cache di sincronizzazione dei contenuti. La prima volta che aggiornate la cache, viene aggiunto tutto il contenuto pubblicato. Gli aggiornamenti successivi aggiungono solo il contenuto pubblicato che è cambiato dall'aggiornamento precedente.
Content Sync tiene traccia anche quando si verificano gli aggiornamenti. Con queste informazioni, Content Sync può determinare quale aggiornamento della cache inviare a un'applicazione mobile.
Effettuate la seguente procedura nell’istanza in cui desiderate aggiornare la cache. Ad esempio, se l’applicazione richiede aggiornamenti dall’istanza di pubblicazione, eseguite la procedura nell’istanza di pubblicazione.
Nella barra laterale, tocca o fai clic su App, quindi tocca o fai clic sull’applicazione.
Selezionate la pagina iniziale, quindi toccate o fate clic sull'icona Aggiorna cache.
Questa funzione è disponibile con App 6.1 Feature Pack 2 e fornisce un modo semplice per sfruttare i modelli di app esistenti per la creazione di nuove app all'interno di AEM.
Che cos'è un modello di app? Può essere considerato come una raccolta di modelli di pagina e componenti che rappresentano una linea di base o una base di un'app.
Quando crei una nuova app basata sul modello di un'altra app, riceverai un'app con un punto di partenza rappresentativo dell'app da cui è stata creata.
Per utilizzare questa funzione, è necessario disporre di un modello di app mobile esistente (o di un'app installata con un modello di app).
L'ultimo pacchetto di AEM App 6.1 include una versione aggiornata dell'app Geometrixx con un modello di app. In alternativa, è possibile installare StarterKit che fornisce anche un modello.
Passaggi per creare una nuova app basata su un modello di app:
Fai clic su Avanti.
Immetti un ID app e un titolo, ma potresti voler includere anche un nome e una descrizione.
Se disinstallate il pacchetto dell'app di riferimento Geometrixx Outdoors da AEM e create un'app basata sul suo modello, tale app non funzionerà più. L'app Geometrixx Outdoors può essere rimossa, ma il modello di app deve rimanere se utilizzato da altre applicazioni mobili.
L'app Geometrixx Outdoors è un'applicazione PhoneGap di esempio che illustra le funzioni del modello di applicazione PhoneGap predefinito e dei componenti mobili di esempio.
Per aprire l'applicazione, dalla barra laterale fate clic su Applicazioni mobili, quindi selezionate Geometrixx Outdoors App.
Ogni pagina dell'app mobile include le seguenti funzionalità:
Pulsante Indietro per tornare alla pagina padre. Il pulsante Indietro non viene visualizzato nella home page.
Una barra laterale che offre un menu di comandi e collegamenti:
Il sistema paragrafo, per aggiungere componenti e creare contenuti.
Il contenuto della home page è costituito dai seguenti strumenti di navigazione:
La pagina Gear consente agli utenti di accedere alle pagine dei prodotti. Un componente Elenco menu consente di accedere alle pagine figlie della pagina Ingranaggio. Le pagine figlie sono categorie di prodotti disponibili nel sito Web.
Ogni pagina di categoria utilizza la stessa struttura di contenuto della pagina Ingranaggio. Il carosello consente di accedere alle pagine figlie che sono sottocategorie di prodotti. Le pagine delle sottocategorie contengono elenchi di prodotti che contengono collegamenti alle pagine di prodotto.
La pagina Products (Prodotti) e la sua gerarchia di pagine figlie implementano un sistema di classificazione per le pagine di prodotto. Le pagine più basse di ciascun ramo dell’eredità sono una pagina di prodotto che contiene un componente Prodotto PNG.
La pagina Prodotti non è disponibile per gli utenti dell’applicazione. La pagina Gear consente di accedere a ogni pagina di prodotto.
Contiene un pulsante Indietro. Il sistema paragrafo consente di aggiungere componenti.
Quando si utilizza l'applicazione, la pagina Recensioni è disponibile dal carosello nella pagina inglese.
Contiene un pulsante Indietro. Il sistema paragrafo consente di aggiungere componenti.
Quando si utilizza l'applicazione, la pagina News è disponibile dal carosello sulla pagina inglese.
La pagina Informazioni su di noi contiene diversi componenti Riga a due colonne. Ogni colonna contiene un componente Immagine o Testo. I componenti sono modificabili e il sistema di paragrafi consente di aggiungere componenti.
Quando si utilizza l’applicazione, la pagina Informazioni su di noi è disponibile dal carosello nella pagina inglese.
La pagina Locations (Posizioni) contiene un componente Locations (Posizioni).
Quando si utilizza l'applicazione, la pagina Locations (Posizioni) è disponibile dall'elenco dei menu nella pagina in lingua inglese.
Diversi componenti sono immediatamente disponibili nella barra laterale quando si creano le pagine di un’applicazione mobile. I componenti appartengono al gruppo di componenti PhoneGap.
Il componente Scorrimento carosello è uno strumento per mostrare e navigare nelle pagine del sito. Il componente include un carosello che passa in rassegna le immagini delle pagine al di sopra di un elenco di collegamenti di pagina. Modificate il componente per specificare le pagine da esporre e il comportamento del carosello.
Le immagini vengono visualizzate nel carosello per le pagine associate a un’immagine in un modo specifico. Quando le pagine non sono associate alle immagini, viene visualizzato solo l’elenco dei collegamenti.
scheda Proprietà carosello
Configurare il comportamento del carosello:
scheda Proprietà elenco
Specificate la modalità di generazione dell’elenco di pagine:
Il componente Scorrimento del carosello contiene i seguenti valori per la proprietà Genera elenco tramite. La finestra di dialogo di modifica cambia in base al valore selezionato:
Pagine figlie
Il componente elenca tutte le pagine figlie di una pagina specifica. Dopo aver selezionato questo valore, selezionare la pagina nella scheda Pagine figlie o non specificare alcun valore per elencare gli elementi secondari della pagina corrente.
Elenco fisso
Specificate un elenco di pagine di inclusione. Dopo aver selezionato questo valore, configurare l'elenco nella scheda Elenco fisso che viene visualizzata quando si seleziona Elenco fisso:
La proprietà Order By non influisce sull'ordine degli elenchi fissi.
Ricerca
Compilare l’elenco utilizzando i risultati di una ricerca per parole chiave. La ricerca viene eseguita negli elementi secondari di una pagina specificata:
Ricerca avanzata
Compilare l'elenco utilizzando una query Querybuilder.
Aggiungete un'immagine al contenuto dell'applicazione.
Aggiungere testo RTF al contenuto dell'applicazione.
Il componente Store Locations (Posizioni nello store) offre agli utenti gli strumenti per trovare punti vendita:
Il componente richiede che il repository contenga informazioni sulla posizione per ogni store. Le posizioni di esempio sono installate nel nodo /etc/commerce/locations/adobe.
Consente di aggiungere componenti affiancati a una pagina.