Show Menu
ARGOMENTI×

Creazione e modifica di app tramite la console App

Adobe consiglia di utilizzare SPA Editor 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 delle applicazioni AEM Mobile 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 dei contenuti e gli sviluppatori di applicazioni eseguono le attività.
In questa pagina vengono visualizzate informazioni su come eseguire le attività di marketing. Per informazioni sulle attività degli sviluppatori, vedere Creazione di applicazioni PhoneGap.

La struttura delle applicazioni mobili

AEM Mobile fornisce il modello 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.
  • Le varianti di lingua dell'applicazione.
  • Pagina principale della variante della lingua.

Radice di un'app PhoneGap

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 .

La variante della 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: Il modello predefinito di PhoneGap crea solo un'applicazione inglese. Lo sviluppatore può modificare il progetto in modo da creare più varianti di lingua.
La pagina relativa alla lingua ha due scopi:
  • Il contenuto della pagina è la pagina spash per la variante della lingua dell'applicazione.
  • Le proprietà della pagina controllano diversi aspetti di progettazione dell'applicazione, ad esempio l'URL da utilizzare per richiedere aggiornamenti di contenuto, e informazioni sulla connessione alla build cloud e l'integrazione con Adobe Analytics Services.

Home page

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.

Creazione di un'applicazione mobile

Le applicazioni mobili si basano su un modello che definisce una struttura e proprietà di pagina. Potete configurare le seguenti proprietà dell’applicazione:
  • Titolo: Titolo dell’applicazione.
  • Percorso di destinazione: Posizione nella directory archivio in cui è memorizzata l’applicazione. Lasciate l'impostazione predefinita per creare un percorso basato sul nome dell'app.
  • Nome: Il valore predefinito è il valore della proprietà Title con la rimozione di 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 dell'applicazione.
  • URL server: L'URL che fornisce contenuto Over-the-Air (OTA) si aggiorna all'applicazione. Il valore predefinito è l’URL del server di pubblicazione dell’istanza utilizzata per creare un’applicazione (proveniente dal servizio esternalizzatore). Nota: questa deve essere un'istanza del server di pubblicazione anziché un autore, che richiede l'autenticazione.
Potete anche fornire un file immagine da usare come miniatura dell'applicazione, selezionare la configurazione 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 nella console delle app mobili in Experience Manager.
Sono presenti schede aggiuntive (e facoltative) per creare il servizio cloud e integrare il plug-in SDK di Adobe Mobile Services nell'app.
  • Build: Fai clic su Gestione configurazioni e configura il servizio build build build build build build build build.phonegap.com qui. Dal menu a discesa potrete selezionare il nuovo servizio cloud PhoneGap build.
  • Analisi: Fai clic su Gestione configurazioni e configura il servizio cloud Adobe Mobile Services SDK . Dal menu a discesa potrete selezionare il nuovo Mobile Service da integrare nell'app mobile.
Gli sviluppatori possono utilizzare AEM PhoneGap Starter Kit per creare app e aggiungerle alla console.
La procedura seguente utilizza l’interfaccia utente touch per creare un’applicazione mobile.
  1. Nella barra laterale, fate clic su App.
  2. Tocca o fai clic sull’icona Crea.
  3. (Facoltativo) Nella scheda Avanzate, fornite una descrizione per l'applicazione e modificate l'URL del server, se necessario.
  4. (Facoltativo) Se utilizzate PhoneGap Build per compilare l'applicazione, nella scheda Build selezionate la Configurazione da utilizzare.
    Per creare una configurazione di build PhoneGap, fate clic su Gestisci configurazioni.
  5. (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.
  6. (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.
  7. Fate clic su Crea.

Modifica delle proprietà di un'applicazione mobile

Dopo aver creato un’applicazione mobile, potete modificare le proprietà.

Modificare il titolo, la descrizione e l’icona

  1. Nella barra laterale, fate clic o toccate App.
  2. Selezionate l’applicazione da configurare e fate clic sull’icona Visualizza proprietà pagina.
  3. Per modificare i valori delle proprietà, fare clic o toccare l'icona Modifica.
  4. Configurate le proprietà Base e Avanzate, quindi toccate o fate clic sull'icona Fine.

Configurare una variante della lingua dell'applicazione

  1. Nella barra laterale, fate clic o toccate App.
  2. 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.
  3. Per modificare i valori delle proprietà, fare clic o toccare l'icona Modifica.
  4. Configura le proprietà nelle schede Base, Avanzate, Genera e Analytics, quindi tocca o fai clic sull'icona Fine.

Creazione e modifica del contenuto di un’applicazione mobile

Dopo aver creato l’applicazione mobile, aggiungete il contenuto utilizzato come interfaccia utente dell’applicazione.
  1. Nella barra laterale, fate clic o toccate App.
  2. Tocca o fai clic sull’applicazione, quindi tocca o fai clic su Inglese.
  3. Modificate la home page o aggiungete le pagine figlie come necessario.

Spostamento del contenuto nelle applicazioni mobili

La cache di sincronizzazione dei contenuti nell’istanza di pubblicazione di AEM viene utilizzata come archivio del contenuto per le applicazioni mobili:
  • Il contenuto nella cache Content Sync è incluso nell'applicazione quando gli sviluppatori compilano l'applicazione.
  • Il contenuto della cache è disponibile per le applicazioni mobili installate per aggiornare il contenuto dell'applicazione.
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.
  1. Nella barra laterale, tocca o fai clic su App, quindi tocca o fai clic sull’applicazione.
  2. Selezionate la pagina iniziale, quindi toccate o fate clic sull'icona Aggiorna cache.

Utilizzo dei modelli di app

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 in AEM.
Che cos'è un modello di app? Può essere considerata 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 esempi di 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. Accertati che siano installati i pacchetti di feature e di esempi di riferimento AEM Apps 6.1 più recenti
  2. Fate clic su App nella parte sinistra.
  1. Fate clic sul pulsante + Crea nella parte superiore e selezionate Crea app.
  2. Dopo aver visualizzato l'elenco Modelli app, selezionane uno:
  1. Fai clic su Avanti.
  2. Immetti un ID app e un titolo, ma potresti voler includere anche un nome e una descrizione.
    1. Inoltre, è possibile fornire un file PNG (formato icona PhoneGap supportato) come icona sfogliando le risorse AEM.
    2. Ricorda che puoi modificare tutti questi campi dopo che l'app è stata creata nel riquadro Gestisci app. Ad eccezione dell'ID app, una volta impostato l'ID app non potrai modificarlo.
  1. Fate clic sul pulsante Crea, vi verranno presentate due opzioni: Fine (tornate alla vista del catalogo App) oppure Gestisci 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.
Se disinstalli il pacchetto dell’app di riferimento Geometrixx Outdoors da AEM e hai creato 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.

Esplorazione dell’app Geometrixx Outdoors di esempio

Geometrixx Outdoors App è un’applicazione PhoneGap di esempio che illustra le caratteristiche del modello di applicazione PhoneGap predefinito e dei componenti mobili di esempio.
Per aprire l’applicazione, dalla barra laterale fate clic su Applicazioni mobili e selezionate Geometrixx Outdoors App.

Caratteristiche comuni delle pagine - 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 laterale che offre un menu di comandi e collegamenti:
    • Aprite la pagina Posizioni.
    • Apri il Carrello.
    • Effettuate l'accesso.
    • Aggiornare l'applicazione.
  • Il sistema paragrafo, per aggiungere componenti e creare contenuti.

Home Page - App mobile Geometrixx

Il contenuto della home page è costituito dai seguenti strumenti di navigazione:
  • Componente Elenco menu che fornisce collegamenti alle pagine figlie Ingranaggio, Recensioni, Novità e Informazioni su di noi.
  • Un componente Carosello con scorrimento che mostra le pagine figlie.

Pagina ingranaggio - 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 Ingranaggio. 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 contengono collegamenti alle pagine di prodotto.

Pagina Prodotti - App mobile Geometrixx

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.

Pagina recensioni - App mobile Geometrixx

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.

Pagina delle notizie - 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 sulla pagina inglese.

La pagina Informazioni su noi - App mobile Geometrixx

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.

Pagina Locations - Geometrixx Mobile App

La pagina Posizioni contiene un componente Posizioni.
Quando si utilizza l'applicazione, la pagina Locations (Posizioni) è disponibile dall'elenco dei menu nella pagina in lingua inglese.

Esempi di componenti mobili

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.

Immagine

Aggiungete un'immagine al contenuto dell'applicazione.

Testo

Aggiungere testo RTF al contenuto dell'applicazione.

Località negozio

Il componente Store Locations (Posizioni nello store) offre agli utenti gli strumenti per trovare punti vendita:
  • Ricerca
  • Elenca le posizioni vicine o distanti dalle coordinate GPS del dispositivo.
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.

Riga a due colonne

Consente di aggiungere componenti affiancati a una pagina.