Se ti piace sviluppare applicazioni web, oppure lo fai di mestiere, sai benissimo quanto sia importante che siano ottimizzate per essere utilizzate anche sui dispositivi mobile.

In questo articolo scoprirai alcune funzionalità che devi assolutamente conoscere per creare una applicazione mobile in Oracle APEX bella e professionale.

Sei pronto?

In primo luogo voglio fare un po’ di chiarezza, ascoltami attentamente.

Non importa quale sia lo scopo della tua app: se vuoi che venga apprezzata da chi dovrà utilizzarla dovrai seguire alcune regole precise.

In questi anni si sente tanto parlare di mobile e, anche qui appin5minuti.it, non faccio altro che ripetere quanto sia importante tenere a mente che una qualsiasi applicazione o sito web deve necessariamente essere fruibile da mobile, anche quando è destinata ad un uso aziendale.

Le piattaforme Low-Code come Oracle APEX, non solo hanno danno la possibilità a tutti, anche a chi di informatica ci capisce poco, di poter creare le proprie soluzioni velocemente e senza dover fare chissà quale investimento, ma hanno anche il vantaggio di poter essere utilizzate su qualsiasi dispositivo, purché si tengano a mente alcuni semplici accorgimenti.

Ricorda che anche se APEX ti permette di trasformare un file Excel in una applicazione web in 5 minuti, difficilmente quella applicazione creata automaticamente potrà essere utilizzata anche su un telefonino senza essere aggiustata un po’.

Non ti spaventare!

Non è nulla di complicato. Ti basterà seguire passo dopo passo questa guida per imparare alcuni concetti semplici ma fondamentali.

Per farlo utilizzeremo un esempio concreto e alla portata di tutti: una applicazione social!

Come? Dici di non essere in grado di creare una APP simile a Twitter usando Oracle APEX?

Ti sbagli e tra poco vedrai. Iniziamo!

Easy Post: una APP Mobile in Oracle APEX

Quello che faremo è creare una applicazione social molto semplice, composta da tre sezioni principali:

• una home page che mostra l’elenco di post pubblicati dagli utenti
• una sezione dove visualizzare le notifiche
• una pagina di ricerca dei contenuti

Questo è un esempio di quello che realizzeremo insieme.

Parte 1: definisci il Modello Dati

La prima cosa da fare è creare le tabelle che la nostra app utilizzerà per funzionare. Gli oggetti che dovremo gestire sono gli utenti, i post e le notifiche. Pertanto creeremo 3 tabelle:

• USER: tabella degli utenti registrati all’app
• POST: tabella degli gli articoli e dei contenuti che vengono pubblicati dagli utenti.
• NOTIFICATION: notifiche e messaggi

Per creare le tabelle usiamo la funzione Quick SQL di Oracle APEX.

• Accedi ad Oracle APEX
• Clicca su SQL Workshop > Utilities > Quick SQL

Quick SQL è una funzionalità molto interessante di Oracle APEX perché ti permette di creare gli oggetti del database in modo dichiarativo. Significa che non devi preoccuparti di scrivere gli script SQL per creare tabelle o viste ma sarà direttamente il sistema a farlo.

Lo ritengo davvero molto utile soprattutto perché mi consente di creare le tabelle e le viste del database molto più velocemente.

• Ad esempio, per creare la nostra applicazione puoi usare questo script Quick SQL:

• Quando hai fatto, premi il bottone Generate SQL per vedere lo script SQL da usare per creare gli oggetti del database (tabelle, viste constraints, ecc. ).

• Clicca sul bottone Settings

• Definisci un prefisso per tutti gli oggetti DB che verranno utilizzati dall’applicazione

• Seleziona l’opzione Include Audit Columns

• Clicca su Save SQL per salvare lo script

• Clicca Review & Run

• Clicca Run per eseguire lo script
• Se lo script viene eseguito senza errori, possiamo procedere alla creazione della nostra applicazione.
• Per comodità, puoi creare la tua app direttamente dalla finestra di esecuzione dello Script SQL cliccando sul bottone Create App

Parte 2: crea l’Applicazione

Per creare l’applicazione utilizzeremo la procedura guidata di Oracle APEX. Se hai avviato la procedura guidata dalla pagina di esecuzione dello script SQL dovresti essere già a buon punto.

• Prima di tutto dai un nome alla tua applicazione e scegli un logo

• Crea 3 pagine
  • Latest Post: di tipo Classic Report with Forms, sarà l’home page dell’APP e mostrerà gli ultimi post pubblicati dagli utenti
  • Notifications: anch’essa di tipo Classic Report with Forms
  • Users: dashboard di amministrazione degli utenti, che sarà utilizzata solo dagli amministratori di sistema

• Per impostare l’home page dell’app clicca sul bottone Edit della pagina che vuoi impostare e clicca l’opzione Set as Home Page.

• Per completare la configurazione iniziale dell’applicazione, aggiungi una pagina Search, per il momento di tipo Blank.

• Premi il bottone Create Application
• Esegui la preview dell’applicazione.

Parte 3: configura l’Home Page

Forse non ci hai mai fatto caso ma se apri una qualunque app installata nel tuo smartphone noterai che nella maggior parte dei casi la struttura di ogni schermata è divisa in tre sezioni principali.

• Header: una intestazione, tipicamente sempre visibile (sticky header)
• Body: la sezione in cui viene proposto il contenuto dell’app.
• Footer: un contenitore con i link alle altre pagine (o screen) dell’app, anch’esso sempre visibile

Questa struttura è generalmente abbastanza comune. Prendiamo ad esempio l’home page di Twitter dove ho evidenziato le tre sezioni:

Cerchiamo di realizzare una APP Mobile che abbia una struttura simile

Navigation Menu

Il menù di navigazione laterale creato automaticamente non è indicato per applicazioni mobile perché quando è attivo occupa una parte importante dello schermo: è sufficiente aprirlo per rendersene immediatamente conto.

Pertanto la primissima cosa da fare è impostare un menù di navigazione orizzontale, simile a quello usato da Twitter.

• Vai in Shared Components > User Interface Attributes

• Vai alla sezione Navigation Menu ed imposta le seguenti opzioni:
  • Position: Top
  • List Template: Top Navigation Tabs
  • Template Option > Desktop: Display labels inline
  • Template Option > Mobile: Do not display labels
• Clicca su Apply Change

• Se esegui la preview mobile dell’app dovresti vedere il menù di navigazione nella parte inferiore dello schermo, esattamente come una qualsiasi app mobile. Decisamente molto meglio, non credi?

Application Body

La parte centrale dell’home page dovrebbe mostrare un elenco di post pubblicati dagli utenti della nostra applicazione social.

In questo momento i dati sono rappresentati con un Classic Report standard, alquanto difficile da leggere su un dispositivo mobile.

Per migliorare la lettura sui dispositivi mobile utilizzeremo il template Comments che però, ti anticipo, andremo a personalizzare per implementare alcuni bottoni classici di una qualsiasi applicazione social (Mi Piace, Condividi, ecc.)

Ecco un esempio del risultato finale che vogliamo ottenere:

• Apri la definizione della pagina e clicca sul Classic Report

• Vai in Attributes > Templates e seleziona il template Comments

• Clicca su Region > Source e seleziona il tipo Source SQL Query

• Nel campo SQL Query inserisci la seguente query
  • EASY_EP_POSTS_V è la vista che abbiamo creato prima

select
   apex_string.get_initials(email) user_icon,
   post_created comment_date,
   first_name || ' ' || last_name user_name,
   post comment_text,
   ' ' comment_modifiers,
   'u-color-' || ora_hash(email, 45) icon_modifier,
   'edit' actions,
   '<button type="button" post-id ="' || post_id || '" title="Commenta" aria-label="Commenta" class="x-commment t-Button t-Button--noLabel t-Button--icon t-Button--link"><span aria-hidden="true" class="t-Icon fa fa-comment-o">&nbsp' || nvl(comments_num, 0) || '</span></button>' action_1,
   '<button type="button" post-id ="' || post_id || '" title="Retweet" aria-label="Retweet" class="x-retweet t-Button t-Button--noLabel t-Button--icon t-Button--link"><span aria-hidden="true" class="t-Icon fa fa-retweet">&nbsp' || nvl(repost_num, 0) || '</span></button>' action_2,
   '<button type="button" post-id ="' || post_id || '" title="Mi Piace" aria-label="Mi Piace" class="x-like t-Button t-Button--noLabel t-Button--icon t-Button--link"><span aria-hidden="true" class="t-Icon fa fa-heart-o">&nbsp' || nvl(likes_num, 0) || '</span></button>' action_3,
   '<button type="button" post-id ="' || post_id || '" title="Condividi" aria-label="Condividi" class="x-share t-Button t-Button--noLabel t-Button--icon t-Button--link"><span aria-hidden="true" class="t-Icon fa fa-share2">&nbsp' || nvl(shares_num, 0) || '</span></button>' action_4,
   ' ' attribute_1,
   ' ' attribute_2,
   ' ' attribute_3,
   ' ' attribute_4
  from
   easy_ep_posts_v
 order by
   post_created desc

• Esegui la preview dell’applicazione: ci siamo quasi…

• Vai in Page Shared Components > Templates > Classic Report > Comments

• Crea un nuovo template come copia e chiamalo Posts List
• Vai alla definizione del template nella sezione Row Templates

• Inserisci il seguente codice HTML

<li class="t-Comments-item #COMMENT_MODIFIERS#">
    <div class="t-Comments-icon">
        <div class="t-Comments-userIcon #ICON_MODIFIER#" aria-hidden="true">#USER_ICON#</div>
    </div>
    <div class="t-Comments-body">
        <div class="t-Comments-info">
            #USER_NAME# <span class="t-Comments-date">#COMMENT_DATE#</span> <span class="t-Comments-actions">#ACTIONS#</span>
        </div>
		<div class="t-Comments-info">
		  <span class="t-Comments-actions">#ACTION_1#</span> <span class="t-Comments-actions">#ACTION_2#</span> <span class="t-Comments-actions">#ACTION_3#</span> <span class="t-Comments-actions">#ACTION_4#</span>
		 </div>
        <div class="t-Comments-comment">
            #COMMENT_TEXT##ATTRIBUTE_1##ATTRIBUTE_2##ATTRIBUTE_3##ATTRIBUTE_4#
        </div>
    </div>
</li>

• Torna alle proprietà del Classic Report ed imposta il nuovo template

• Seleziona le colonne ACTION_1, ACTION_2, ACTION_3, ACTION_4

• Imposta per ciascuna di esse imposta la proprietà Escape special characters a False

• Esegui la preview dell’applicazione

Social Actions

Per implementare i bottoni social che abbiamo inserito possiamo usare delle Dynamic Actions di tipo JQuery molto simili a quelle che abbiamo usato per implementare l’app To-Do List.

• Vai Dynamic Actions e crea quattro azioni dinamiche di tipo Click

• Ciascuna Dynamic Action implementerà una logica specifica (es: inserire un commento, mettere mi piace,…).
• Le diverse azioni sono identificato da un selettore JQuery specifico che ho inserito nell’attributo class del relativo pulsante

• Infatti, se controlli la query che abbiamo usato per inizializzare il Classic Report, troverai il seguente pezzo di codice

<button type="button" post-id ="' || post_id || '" title="Commenta" aria-label="Commenta" class="x-commment t-Button t-Button--noLabel t-Button--icon t-Button--link"><span aria-hidden="true" class="t-Icon fa fa-comment-o">&nbsp' || nvl(comments_num, 0) || '</span></button>

• post-id è l’attributo che dovrai usare per recuperare l’id del record sul quale è stata scatenata una specifica azione. Puoi usare il seguente codice Javascript

this.triggeringElement.getAttribute('post-id')

Screen Header

L’ultima sezione che vediamo è l’intestazione che normalmente è sempre visibile.

• Dall’App Builder crea una nuova regione di tipo Static Content e posizionala sotto la sezione Breadcrumb Bar

• Seleziona la region Easy Post ed imposta queste proprietà nella sezione Appearance

• Sposta il bottone Create nella sezione Region Buttons nella posizione Next

• Seleziona il bottone CREATE e imposta il template Icon e la relativa icona da visualizzare.

• Sempre il bottone CREATE: imposta l’opzione Style: Display as a Link

• Seleziona la Page Root della pagina Latest Post

• Vai alle proprietà di configurazione del template

• Seleziona l’opzione Sticky Header on Mobile

• Questo è il risultato finale

Bene, direi che è un ottimo risultato. Puoi attivare la Sticky Header in tutte le pagine della tua APP.

Parte 4: costruisci lo pagina Notifications

Quasi tutte le applicazioni mobile hanno una sezione notifiche che serve ad avvisare l’utente quando avviene un particolare evento.

Ad esempio, Facebook ti invia una notifica tutte le volte che un tuo amico mette Mi Piace ad un tuo post, oppure quando viene pubblicato un nuovo contenuto da parte di qualcuno che segui.

Per avvisare l’utente che è arrivata una notifica, generalmente l’icona delle notifiche è accesa, magari mostrando il numero di notifiche ricevute che non sono ancora state lette.

Ecco un esempio di Notification Page che ho creato per l’APP Easy Post

Tenendo premuto con il dito sulla riga di notifica appare un menù che ti permette si segnare il messaggio come “già letto” (icona con la busta aperta) oppure “da leggere” (icona con la busta chiusa).

Lo stesso menù viene aperto cliccando sulla seguente icona

Vediamo come implementare tutte queste funzionalità, partendo dalla prima, ovvero l’icona con il numero di notifiche nuove da leggere.

Menù Badge

Prima di tutto creiamo un Application Item che useremo per mostrare il numero di notifiche da leggere.

• Apri l’App Builder e seleziona Shared Components
• Seleziona Application Logic > Application Items

• Clicca su Create per creare un nuovo Application Item
  • Name: P_NEW_NOTIFICATION
  • Scope: Application

• Torna nella schermata Shared Components e seleziona Application Logic > Application Computations

• Crea un nuovo processo di elaborazione per l’item P_NEW_NOTIFICATION
  • Computation Item: P_NEW_NOTIFICATION
  • Computation Point: On New Instance
  • Computation Type: SQL Query
  • Computation: select count(1) from EASY_EP_NOTIFICATIONS_V where is_new = ‘Y’

• Vai in Shared Components > Navigation Menu
• Clicca su Desktop Navigation Menu

• Seleziona l’entry Notifications

• Nella sezione User Defined Attributes ed inserisci le seguenti proprietà:
  • Badge Value: &P_NEW_NOTIFICATION.
  • Badge Class: u-color-8

• Esegui la preview dell’applicazione e verifica che sia visualizzato il numero di notifiche aperte

Notification Report

Per configurare la pagina delle notifiche utilizzeremo un Classic Report che andremo a configurare con un template personalizzato che ho creato come copia template standard Media List.

• Dall’App Builder apri la definizione della pagina Notifications.
• Seleziona il report Notifications

• Imposta il report di tipo Classic Report
• Cambia il tipo di origine dati a SQL Query ed inserisci la query seguente:

select NOTIFICATION_ID,
       NOTIFICATION LIST_TEXT, 
       decode(IS_NEW,'Y','fa fa-envelope','fa fa-envelope-open')ICON_CLASS,
       RECEIVED_DATE LIST_TITLE
  from EASY_EP_NOTIFICATIONS_V
  order by RECEIVED_DATE desc

• Vai in Attributes e seleziona il template Media List

Questo è il risultato, dove ogni riga ha una icona diversa se il messaggio è stato già letto o no.

Quello che manca è una finestra di dialogo che ci permetta di cancellare il messaggio oppure di archiviarlo.

Dialog Menu Page

• Dall’App Builder apri la definizione della pagina Notifications e crea una nuova regione di tipo List chiamata Menu

• Notification Menu è un lista APEX che ho creato specificatamente per questa APP (…tra un attimo vedremo come)
• La regione Menu deve essere di tipo Inline Dialog.
• Assegna un ID statico che ci tornerà utile più avanti: notification_actions

• Vai nella seziona Attributes della regione Menu e scegli come List Template l’opzione Media List

Per quanti riguarda la lista Notification Menu

• Vai in Shared Components e crea una nuova lista chiamata Notification Menu con 3 valori:
  • Elimina
  • Segna da leggere
  • Segna letto

• Ciascuna Entry di questa lista deve avere queste proprietà:
  • Target Type: URL
  • URL Target: #
  • List Template: Media List
  • User Defined Attributes > List Item CSS Classes (questa opzione si abilita solo dopo che avete selezionato come template della lista l’opzione Media List)
    • set-unread (Messaggio da Leggere)
    • set-read (Messaggio Letto)
    • delete (Elimina Messaggio)

Per aprire la finestra di dialogo che abbiamo creato implementeremo due soluzione differenti.

La prima prevede un pulsante a livello di record. Per implementare questa soluzione puoi leggere questo articolo in cui spiego come creare un template personalizzato con dei pulsanti che eseguono delle azioni dinamiche

La seconda soluzione, invece, si basa sull’evento Press: per far scattare l’azione l’utente deve tenere premuto il dito sulla riga della notifica.

Oracle Apex supporta tutti gli eventi tipici di un APP Mobile. Per maggiori dettagli leggi qui.

Dialog Menu

• Vai in Dynamic Actions e crea una nuova azione dinamica collegata all’evento Press

• Vai alla sezione When dell’azione dinamica ed imposta le seguenti proprietà
  • Selection Type: jQuery Selector
  • jQuery Selector: .t-MediaList-item

• Inserisci una Action di tipo Javascript

• Nella definizione della Action inserisci il codice JS per far aprire la finestra di dialogo

Una volta che la finestra dialogo è aperta l’utente potrà selezionare una delle opzioni previste. Per intercettare la selezione delle voci di menù useremo le azioni dinamiche.

• Crea 3 Dynamic Actions, una per ciascuna azione che abbiamo inserito nella lista Notification Menu
  • set-unread
  • set-read
  • delete

• Ciascuna Dynamic Action deve essere di tipo JQuery Selector ed intercetterà la selezione di una specifica Entry tra quelle inserire nella lista Notification Menu (ad esempio set-unread)

• L’esecuzione della Dynamic Action scatenerà 3 Actions:
  • aggiornamento dello stato della notifica (campo IS_NEW del database)
  • chiusura della finestra di dialogo da eseguire con il seguente codice Javascript: $(“#notification_actions”).dialog(“close”);
  • submit della pagina

Conclusioni

Come abbiamo visto, creare una applicazione mobile in Oracle APEX è possibile ed non è difficile come potevi immaginare, vero?

Certo, abbiamo dovuto utilizzare alcuni trucchi del mestiere ma con un po’ di pratica è possibile ottenere dei risultati davvero notevoli.

Ovviamente questo tutorial non ha assolutamente la pretesa di essere esaustivo, piuttosto vuole aiutarti a fare il primo passo per riuscire a creare APP Desktop e Mobile in APEX sempre più belle e professionali.

Fammi sapere cosa ne pensi e se c’è qualche argomento che vuoi approfondire: per me sarà un piacere aiutarti.

Un abbraccio

Daniele