Creazione e modifica di app tramite la console App

Il processo di sviluppo delle applicazioni mobili AEM riconosce che gli utenti con competenze diverse contribuiscono allo sviluppo delle applicazioni mobili. La seguente mappa del processo illustra l’ordine generale in cui autori di contenuti e sviluppatori di applicazioni eseguono le attività.

In questa pagina vengono visualizzate informazioni su come eseguire le attività di marketing. Per informazioni sulle attività per sviluppatori, vedere Creazione di applicazioni PhoneGap.

La struttura delle applicazioni mobili

AEM Mobile fornisce la blueprint dell’app Phonegap per la creazione di applicazioni mobili. La blueprint definisce la struttura delle applicazioni create. Le domande sono costituite dai seguenti elementi:

• La pagina principale.
• Variazioni linguistiche della domanda.
• Pagina principale della variante della lingua.

La radice di un’app PhoneGap

La pagina principale delle applicazioni mobili create in AEM viene visualizzata nella console App.

La pagina principale viene memorizzata sotto la proprietà Percorso di Destinazione dell'applicazione specificata al momento della creazione dell'applicazione (il percorso predefinito è /content/phonegap/apps). Il nome della 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.

Variazione di lingua di un’app PhoneGap

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: La blueprint predefinita di PhoneGap crea solo un'applicazione inglese. Lo sviluppatore può modificare la blueprint in modo da creare più varianti di lingua.

La pagina relativa alla lingua ha due finalità:

• Il contenuto della pagina è la pagina spash per la variante di lingua dell'applicazione.
• Le proprietà della pagina controllano diversi aspetti di progettazione dell’applicazione, ad esempio l’URL da utilizzare per la richiesta di aggiornamenti di contenuto, e informazioni sulla connessione alla build cloud e all’integrazione con Adobe Analytics Services.

Home page

All'apertura dell'applicazione viene visualizzata la home page o index.html di una variante di lingua di un'applicazione.La home page fornisce agli utenti un menu di collegamenti a varie pagine dell'applicazione. Il sistema paragrafo consente di aggiungere componenti alla pagina per la creazione di contenuti.

Creazione di un'applicazione mobile

Le applicazioni mobili si basano su un modello che definisce una struttura e proprietà della pagina. Puoi configurare le seguenti proprietà dell'applicazione:

• Titolo: Titolo dell'applicazione.
• Percorso di destinazione: La posizione nel repository in cui è memorizzata l'applicazione. Lascia l’impostazione predefinita per creare un percorso basato sul nome dell’app.
• Nome: Il valore predefinito è il valore della proprietà Titolo a cui sono stati rimossi gli spazi. Il nome viene utilizzato in CQ per fare riferimento all'applicazione, ad esempio per il nodo del repository che rappresenta l'applicazione.
• Descrizione: Descrizione della domanda.
• URL server: L’URL che fornisce contenuti OTA (Over-the-Air) viene aggiornato all’applicazione. Il valore predefinito è l'URL del server di pubblicazione dell'istanza utilizzata per creare un'applicazione (prelevata dal servizio esternalizer). Nota: questa deve essere un'istanza del server di pubblicazione anziché un autore, che richiede l'autenticazione.

Puoi anche fornire un file immagine da utilizzare come miniatura dell’applicazione, selezionare la configurazione della PhoneGap Build da utilizzare e selezionare la configurazione di analisi dell’app mobile da utilizzare. Questa immagine viene utilizzata solo come miniatura per rappresentare la tua app mobile all’interno della console app mobili di Experience Manager.

Sono presenti schede aggiuntive (e facoltative) per creare il servizio cloud e integrare il plug-in Adobe Mobile Services SDK nella tua app.

• Build: Fai clic su gestisci configurazioni e configura il servizio build build build build build.phonegap.com qui. Dal menu a discesa potrai quindi selezionare il servizio cloud di build PhoneGap appena creato.
• Analytics: Fai clic su gestisci configurazioni e configura il tuo Adobe Mobile Services SDK servizio cloud. Quindi, dal menu a discesa potrai selezionare il nuovo Mobile Service da integrare nell’app mobile.

La procedura seguente utilizza l’interfaccia utente touch per creare un’app mobile.

1. Nella barra, fai clic su App.

2. Tocca o fai clic sull’icona Crea .

   

3. (Facoltativo) Nella scheda Avanzate , fornisci una descrizione dell’applicazione e, se necessario, modifica l’URL del server.

4. (Facoltativo) Se si utilizza PhoneGap Build per compilare l'applicazione, nella scheda Build selezionare la configurazione da utilizzare.

   Per creare una configurazione di build PhoneGap, fai clic su Gestisci configurazioni.

5. (Facoltativo) Se utilizzi SiteCatalyst per monitorare l’attività dell’applicazione, seleziona la configurazione da utilizzare nella scheda Analytics.

   Per creare una configurazione di app mobile, fai clic su Gestione configurazioni.

6. (Facoltativo) Per fornire un'icona dell'applicazione, fare clic sul pulsante Sfoglia, selezionare il file immagine dal file system e fare clic su Apri.

7. Fai clic su Crea.

Modifica delle proprietà di un'applicazione mobile

Dopo aver creato un’app mobile, puoi modificare le proprietà.

Modificare il titolo, la descrizione e l’icona

1. Nella barra, tocca o fai clic su App.

2. Seleziona l’applicazione da configurare e fai clic sull’icona Visualizza proprietà pagina .

   

3. Per modificare i valori delle proprietà, tocca o fai clic sull’icona Modifica .

   

4. Configura le proprietà Base e Avanzate , quindi tocca o fai clic sull’icona Fine .

   

Configurare una variante della lingua dell’applicazione

1. Nella barra, tocca o fai clic su App.

2. Fai clic su per approfondire l'app mobile da modificare nella console di amministrazione delle app. Selezionare la versione della lingua dell'applicazione da configurare e fare clic sull'icona Visualizza proprietà applicazione.

   

3. Per modificare i valori delle proprietà, tocca o fai clic sull’icona Modifica .

   

4. Configura le proprietà nelle schede Base, Avanzate, Genera e Analytics , quindi tocca o fai clic sull’icona Fine .

   

Creazione del contenuto di un’applicazione mobile

Dopo aver creato l’app mobile, aggiungi il contenuto utilizzato come interfaccia utente dell’applicazione.

1. Nella barra, tocca o fai clic su App.
2. Tocca o fai clic sull’applicazione, quindi tocca o fai clic su Inglese.
3. Modificare la home page o aggiungere pagine figlie come necessario.

Spostamento dei contenuti nelle applicazioni mobili

La cache di sincronizzazione dei contenuti nell’istanza di pubblicazione AEM viene utilizzata come archivio di contenuti per le applicazioni mobili:

• Il contenuto nella cache Content Sync viene incluso nell’applicazione quando gli sviluppatori compilano l’applicazione.
• Il contenuto nella cache è disponibile per le applicazioni mobili installate per l’aggiornamento del contenuto dell’applicazione.

Le applicazioni mobili includono un comando Aggiornamenti che scarica e installa il contenuto aggiornato dell'applicazione. Quando un'istanza di un'applicazione invia una richiesta di aggiornamento, Content Sync determina quale contenuto è stato modificato dall'ultima volta che l'applicazione è stata aggiornata o installata e fornisce il nuovo contenuto.

Per rendere disponibile contenuto aggiornato alle applicazioni, devi aggiornare la cache di sincronizzazione dei contenuti. Al primo aggiornamento della cache, viene aggiunto tutto il contenuto pubblicato. Gli aggiornamenti successivi aggiungono solo il contenuto pubblicato che è cambiato dall’aggiornamento precedente.

La sincronizzazione dei contenuti tiene traccia anche di quando si verificano gli aggiornamenti. Con queste informazioni, Content Sync può determinare quale aggiornamento della cache inviare a un’app mobile.

Esegui la seguente procedura sull’istanza in cui desideri aggiornare la cache. Ad esempio, se l’applicazione richiede aggiornamenti dall’istanza di pubblicazione, esegui la procedura sull’istanza di pubblicazione.

1. Nella barra, tocca o fai clic su App, quindi tocca o fai clic sull’applicazione.

2. Seleziona la pagina iniziale, quindi tocca o fai clic sull’icona Aggiorna cache .

   

Utilizzo dei modelli di app

Si tratta di una 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 in AEM.

Che cos'è un modello di app? Consideralo 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, devi disporre di un modello di app mobile esistente (o di un’app installata con un modello di app).

L'ultimo pacchetto di esempi AEM Apps 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:

1. Assicurati di avere installato il pacchetto di funzioni e i pacchetti di riferimento più recenti AEM Apps 6.1 .
2. Fai clic su App dalla barra a sinistra.

1. Fai clic sul pulsante + Crea in alto e seleziona Crea app.
2. Una volta visualizzato l’elenco dei modelli di app, selezionane uno:

1. Fai clic su Avanti.

2. Immetti un ID app e un titolo, tuttavia potresti voler includere anche un Nome e una Descrizione.

   1. Inoltre, puoi fornire un PNG (formato icona PhoneGap supportato) come icona sfogliando AEM risorse.
   2. Ricorda che puoi modificare tutti questi campi dopo la creazione dell’app nel riquadro Gestione app . Ad eccezione dell’ID app, una volta impostato l’ID app non puoi modificarlo.

1. Fai clic sul pulsante crea , ti verranno presentate 2 opzioni, Fine (torna alla vista del catalogo App) o Gestione app (apre il dashboard dell’app).
2. Una volta creata, la nuova app dovrebbe essere elencata nel catalogo delle app:

1. Fai clic sull’app per aprirla. La nuova app è stata creata correttamente in base al modello di un’app esistente.

Esplorazione dell’app Geometrixx Outdoors di esempio

L’app Geometrixx Outdoors è un’applicazione PhoneGap di esempio che illustra le funzioni del progetto predefinito dell’applicazione PhoneGap e dei componenti mobili di esempio.

Per aprire l'applicazione, dalla barra laterale fai clic su Applicazioni mobili e quindi seleziona Geometrixx Outdoors app .

Funzionalità comuni della pagina - App mobile Geometrixx

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 espandibile che offre un menu di comandi e collegamenti:

  • Apri la pagina Posizioni .
  • Apri il Carrello.
  • Accedi.
  • Aggiorna l'applicazione.

• Il sistema paragrafo, per aggiungere componenti e creare contenuti.

Home Page - Geometrixx Mobile App

Il contenuto della home page è costituito dai seguenti strumenti di navigazione:

• Componente Elenco menu che fornisce collegamenti alle pagine figlie Ingranaggio, Recensioni, Notizie e Informazioni su di noi.
• Un componente Carosello rapido che mostra le pagine figlie.

Pagina degli ingranaggi - App mobile Geometrixx

La pagina Gear consente agli utenti di accedere alle pagine dei prodotti. Un componente Elenco menu consente di accedere alle pagine figlie della pagina corrispondente. Le pagine figlie sono categorie di prodotti disponibili nel sito web.

• Stagione
• Abbigliamento
• Genere
• Attività

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 forniscono collegamenti alle pagine di prodotto.

Pagina Prodotti - App mobile Geometrixx

La pagina Prodotti e la sua gerarchia di pagine figlie implementano un sistema di classificazione per le pagine dei prodotti. Le pagine più basse di ogni ramo dell’gerarchia sono una pagina di prodotto contenente un componente Product .

La pagina Prodotti non è disponibile per gli utenti dell’applicazione. La pagina Gear consente di accedere a ogni pagina di prodotto.

Pagina delle recensioni - Geometrixx Mobile App

Contiene un pulsante Indietro. Il sistema paragrafo consente di aggiungere componenti.

Quando utilizzi l’applicazione, la pagina Recensioni è disponibile dal carosello nella pagina inglese.

Pagina News - App mobile Geometrixx

Contiene un pulsante Indietro. Il sistema paragrafo consente di aggiungere componenti.

Quando si utilizza l'applicazione, la pagina News è disponibile dal carosello nella pagina inglese.

Pagina Informazioni su di noi - Geometrixx Mobile App

La pagina Informazioni su di noi contiene diversi componenti per riga a due colonne . Ogni colonna contiene un componente Immagine o Testo . I componenti sono modificabili e il sistema paragrafo consente di aggiungere componenti.

Quando utilizzi l’applicazione, la pagina Informazioni su di noi è disponibile dal carosello nella pagina Inglese.

Pagina Posizioni - Geometrixx App mobile

La pagina Posizioni contiene un componente Posizioni .

Quando si utilizza l’applicazione, la pagina Posizioni è disponibile dall’elenco dei menu nella pagina Inglese.

Componenti mobili di esempio

Nella barra laterale sono immediatamente disponibili diversi componenti per la creazione delle pagine di un’app mobile. I componenti appartengono al gruppo di componenti PhoneGap.

Carosello scorrevole

Il componente Carosello rapido è uno strumento per visualizzare e navigare nelle pagine del sito. Il componente include un carosello che scorre le immagini per le pagine elencate sopra un elenco di collegamenti di pagina. Modifica 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 delle proprietà del carosello

Configura il comportamento del carosello:

• Velocità di riproduzione: Tempo in millisecondi impiegato per la visualizzazione di ogni immagine prima della visualizzazione dell'immagine successiva.
• Tempo di transizione: Durata in millisecondi dell'animazione per le transizioni di immagini.
• Stile comandi: Il tipo di controlli che vengono forniti per lo spostamento tra le immagini.

Scheda Proprietà elenco

Specifica come viene generato l’elenco di pagine:

• Crea elenco utilizzando: Metodo da utilizzare per specificare le pagine da includere nel carosello. Vedere Creazione dell’elenco di pagine .
• Ordina per: Selezionare una proprietà di pagina da utilizzare per ordinare l’elenco di pagine. Ad esempio, seleziona jcr:title per ordinare le pagine in ordine alfabetico per titolo.
• Limite: Il numero massimo di pagine da includere. Questa proprietà è appropriata per i metodi basati su ricerca per creare l'elenco di pagine.

Creazione dell’elenco di pagine

Il componente Carosello rapido fornisce i seguenti valori per la proprietà Elenco build utilizzando . 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 specificare un valore per non elencare le pagine figlie della pagina corrente.

Elenco fisso

Specifica un elenco di pagine di inclusione. Dopo aver selezionato questo valore, configurare l'elenco nella scheda Elenco fisso visualizzata quando si seleziona Elenco fisso:

• Per aggiungere una pagina, fare clic su Aggiungi elemento, quindi cercare la pagina.
• Utilizza le icone a forma di freccia su e freccia giù per spostare la pagina all’interno dell’elenco.
• Fare clic sul pulsante di rimozione per rimuovere una pagina dall’elenco.

La proprietà Order By non influisce sull'ordine degli elenchi fissi.

Ricerca

Compilare l’elenco utilizzando i risultati di una ricerca per parola chiave. La ricerca viene eseguita negli elementi secondari di una pagina specificata:

1. Per specificare la pagina principale della ricerca, utilizzare la proprietà Start In per selezionare il percorso della pagina. Non specificare alcun percorso da cercare sotto la pagina corrente.
2. Nella proprietà Query di ricerca, immetti le parole chiave di ricerca.

Ricerca avanzata

Compilare l’elenco utilizzando un’ Querybuilder query.

Immagine

Aggiungi un'immagine al contenuto dell'applicazione.

Testo

Aggiungi testo RTF al contenuto dell'applicazione.

Località negozio

Il componente Store Locations (Posizioni store) fornisce agli utenti gli strumenti per trovare punti vendita:

• Ricerca
• Elenca le posizioni vicine o distanti dalle coordinate GPS del dispositivo.

Il componente richiede che l’archivio contenga informazioni sulla posizione per ogni archivio. Le posizioni di esempio sono installate nel nodo /etc/commerce/locations/adobe .

Riga a due colonne

Consente di aggiungere componenti affiancati a una pagina.

Risorse Business.Adobe.com

Ecommerce Integrations Targeted Content Responsive Forms Content As A Service Content Management Digital Rights Management