UNIVERSAL APP IN TUTTE LE SALSE: PHONE, TABLET, PC, XBOX E IOT
Cert04 70-484 - essentials of developing windows store apps
1. Template designed by
cert-path
70-484 – Essentials of developing
Windows Store apps
Matteo Pagani
info@qmatteoq.com - @qmatteoq
http://www.qmatteoq.com
Template designed by
2. Software Engineer @ Funambol
Microsoft MVP – Windows Phone Development
Nokia Developer Champion
Autore dei libri «Sviluppare applicazioni per Windows Phone
8» e «Windows Phone 8 Development Succinctly»
Membro della community DotNetLombardia e fondatore di
WPDev Fusion
chi sono
4. • Percorso di certificazione per lo sviluppo di Windows
Store app
• E’ suddiviso in tre differenti certificazioni
• Gli esami sono stati recentemente aggiornati a Visual
Studio 2013 e Windows 8.1
• Esistono due varianti:
• Sviluppo con HTML e Javascript
• Sviluppo con XAML e C#
MSCD: Windows Store app
5. • Esame 480: Programming in HTML5 with JavaScript and
CSS3
• Esame 481: Essentials of Developing Windows Store
Apps Using HTML5 and JavaScript
• Esame 482: Advanced Windows Store App Development
Using HTML5 and JavaScript
MCSD: Windows Store Apps Using HTML5
6. • Esame 483: Programming in C#
• Esame 484: Essentials of Developing Windows Store
Apps Using C#
• Questo è l’esame che tratteremo oggi :)
• Esame 485: Advanced Windows Store App Development
Using C#
MCSD: Windows Store Apps Using C#
7. • Design Windows Store apps (20-25%)
• Develop Windows Store apps (15-20%)
• Create the user interface (20-25%)
• Program the user interaction (20-25%)
• Manage security and data (20-25%)
http://www.microsoft.com/learning/en-us/exam-70-484.aspx
agenda
9. • Una Windows Store app deve sfruttare il più possibile le
caratteristiche della piattaforma:
• Contratti
• Interazione tramite touch screen
• Uso di tile e notifiche
• Uso delle caratteristiche hardware dei device (sensori di movimento, geo
localizzazione, ecc.)
• Attenzione all’accessibilità: screen reading, temi ad alto
contrasto, tool UI Accessibility Checker per la validazione
Design the UI layout and the structure
10. Le caratteristiche chiave della UI nelle Windows Store app:
• Il contenuto deve essere al centro
• Interazione diretta con il contenuto
• Fast and fluid: touch first, feedback visuali, animazioni non
invasive
• Supporto a diverse risoluzioni e form factor
• Sfruttare le tile per rendere l’app interattiva
Design the UI layout and the structure
11. Riutilizzare gli elementi visuali:
• Template
• Stili
• Risorse
• UserControl
Design the UI layout and the structure
12. • Separare la logica dall’interfaccia grafica:
• Presentation layer: è la UI, implementata con XAML e controlli visivi
• Business layer: è la logica che elabora i dati
• Data layer: sono i repository che contengono i dati base
dell’applicazione (database, servizio REST, ecc.)
• Sfruttare i componenti WinMD: concettualmente simili alle
librerie DLL, ma utilizzabili anche da Windows Store app
sviluppate in C++ o HTML / JS.
Design for separation of concerns
13. • MVVM è il pattern più diffuso per definire l’architettura di
applicazioni XAML / C#
• View: l’interfaccia grafica
• ViewModel: logica di presentazione dei dati
• Model: business logic e dati
• Concetti chiave: binding, data context,
INotifyPropertyChanged e ObservableCollection<T>
• Sono i meccanismi con i quali il ViewModel interagisce
con la View
Apply the MVVM pattern to your app design
14. • PLM = Process Lifetime Management
Design and implement PLM
15. E’ importante imparare a gestire:
• OnSuspending: l’utente passa ad un’altra applicazione o
attività
• OnResuming: l’applicazione viene riaperta e i dati
devono essere aggiornati
• OnLaunching: l’applicazione viene aperta dalla tile
• OnActivating: l’applicazione viene aperta da un contratto
Design and implement PLM
16. • La pubblicazione richiede il superamento di un processo
di certificazione che verifica la presenza di errori, il
rispetto dei requisiti di sicurezza e le performance dell’app
• Le applicazioni vengono firmate digitalmente con un
certificato di test, che viene poi sostituito in automatico
durante la certificazione con uno reale
• L’applicazione viene descritta dal file di manifest, presente
nella root di tutti i progetti
Plan for an app deployment
18. You have been asked to implement the UI of a Windows Store app. The
application requirements make it essential for the app to be fast and fluid, and
provide visual feedback to users for their actions at the same time. The
designer of the user interface has recommended using animations. How
should you implement animations while ensuring app requirements are met?
A. Convince the designer that animations will make the UI complex and
unintuitive.
B. Use animations in the controls provided by the platform and in the
animation library.
C. Implement your own animations and add them to the UI.
D. Build custom controls and add animations in them. Use these custom
controls to build the UI.
Domanda
20. • La classe ContactPicker consente di accedere ai contatti
memorizzati nel dispositivo
• Non è una API per accesso programmatico: l’utente deve
manualmente scegliere i contatti da importare
• Due metodi:
• PickSingleContactAsync() per recuperare un singolo contatto
• PickMultipleContactsAsync() per recuperare più contatti
• Viene restituito un oggetto di tipo ContactInformation
• Le applicazioni possono implementare il contratto Contract Picker,
per registrarsi come provider di contatti aggiuntivi all’hub People
Access and display contacts
21. • La charm bar consente agli utenti di interagire con
l’applicazione in maniera standard:
• Search per attivare il contratto di ricerca
• Share per attivare il contratto di condivisione
• Devices per attivare il contratto di stampa e di riproduzione wireless di
contenuti (PlayTo)
• Settings per accedere alle impostazioni dell’applicazione
Design for charms and contracts
22. • Si dichiara l’apposito contratto nel file di manifest
• L’applicazione viene aperta tramite il metodo
OnSearchActivated presente nella classe App
• Si riceve in ingresso il termine cercato
• Si porta l’utente alla pagina dedicata, con i risultati già
filtrati per la parola chiave
• E’ possibile lanciare altre applicazioni tramite i metodi
LaunchFileAsync() e LaunchUriAsync()
Implement search
23. • La classe DataTransferManager espone l’evento
DataRequested, che viene scatenato nel momento in cui
l’utente vuole condividere qualcosa
• E’ possibile condividere: testi, link, immagini, file, html,
ecc.
• L’applicazione target viene attivata tramite il metodo
OnShareTargetActivated.
• Deve predisporre una UI ad hoc per la condivisione dei
dati ricevuti
Implement share
24. • Si registrano una serie di SettingsCommand, che
corrispondono alle varie opzioni che compaiono nella
charm bar
• Si crea un controllo di tipo SettingsFlyout, che
fondamentalmente è una pagina larga 346 px
• Si mostra il flyout alla selezione, da parte dell’utente, di
uno dei SettingsCommand
Manage app settings and preferences
25. • Il Windows Runtime espone diverse classi per
memorizzare, in maniera semplice e veloce, i settings
• LocalSettings: settings locali, accessibili solamente dall’app
• RoamingSettings: settings salvati sul cloud, sincronizzati tra tutti i
dispositivi dell’utente
• La best practise prevede che i setting vengano sempre
salvati sfruttando i RoamingSettings
Manage app settings and preferences
27. You are developing a Windows Store game and want to save
user settings when the app is suspended. Which data storage
strategy should you use?
A. Save the settings in local storage and retrieve when needed.
B. Save in the local registry and read from it when needed.
C. Save in the roaming app data store and read from it when
needed.
D. Save in the local directory and read from the file when
needed.
Domanda
29. • Windows 8.1 ha introdotto il concetto di layout fluido: non
più tre dimensioni fisse (full, fill e snapped), ma un layout
variabile
• La larghezza minima dell’applicazione è 500px (320px se
si fa opt in per la modalità snapped)
• Il VisualStateManager vi permette di gestire agevolmente
i cambiamenti del layout, specificando una serie di stati
che contengono solamente le differenze rispetto al layout
standard
Create layout aware apps to handle view states
30. • Il controllo Grid permette di realizzare layout di tipo tabellare
e consente di definire righe e colonne, all’interno delle quali
posizionare gli altri controlli
• Il suo punto di forza è il supporto a righe e colonne con
dimensioni dinamiche per realizzare layout fluidi
• Il controllo ScrollViewer permette di inserire contenuti che
occupano più spazio della dimensione dello schermo
• Per la visualizzazione di testi abbiamo a disposizione i
controlli TextBlock e RichTextBlock
Implement layout controls
31. • L’app bar rappresenta un punto di accesso veloce alle
funzioni dell’applicazione
• Due posizioni possibili:
• Superiore: usata per la navigazione all’interno delle sezioni dell’app
• Inferiore: offre i comandi per interagire con il contenuto corrente
• Due tipi di controlli:
• AppBar: per mostrare controlli XAML a piacimento
• CommandBar: per mostrare comandi sotto forma di pulsanti
Design and implement the app bar
32. • Il controllo GridView consente di mostrati dati tramite una
rappresentazione a griglia con scrolling orizzontale
• Il controllo ListView consente di mostrare dati tramite una
rappresentazione a lista con scrolling verticale
• Il controllo FlipView consente all’utente di navigare
attraverso una collezione di dati, dando particolare
visibilità a quello corrente
Design and implement data presentation
33. • Tutti questi controlli sono basati sulle proprietà
ItemsSource (la collezione di dati da mostrare) e
ItemTemplate (la rappresentazione visuale del singolo
elemento)
• Supportano il concetto di DataTemplateSelector: gli
elementi di una collezione possono essere rappresentati
con un template differente, in base ad una determinata
proprietà
Design and implement data presentation
34. • E’ possibile riutilizzare lo stesso aspetto visuale per più
controlli grazie agli stili
• Gli stili consento inoltre di ridefinire la proprietà Template
di un controllo, che ne definisce l’aspetto
• Lo XAML offre i brush, che consentono di definire il
riempimento di un controllo, anche in maniera creativa (ad
esempio, gradienti)
Create and manage XAML styles and templates
35. • Stili, template e risorse possono essere dichiarati:
• Inline: applicati solo al controllo stesso e ai figli
• A livello di pagina
• A livello di applicazione
• Possono essere memorizzati in un file di risorse esterno,
chiamato ResourceDictionary
Create and manage XAML styles and templates
37. You are developing a Windows Store text editor app. You have implemented a
number of commands using buttons; however, during a usability review, you
have been asked to remove some of the commands from the surface and
move them into the app bar. Which functionality should you move to the app
bar? (Choose all that apply.)
A. Searching within text
B. Cutting, copying, and pasting
C. Increasing and decreasing the font size
D. Creating, editing, and deleting a new file
E. Sending a file as an email attachment
Domanda
39. • Le tile consentono di mostrare informazioni all’utente
senza costringerlo ad aprire l’applicazione ogni volta
• Le tile possono essere aggiornate:
• A runtime dall’applicazione
• Schedulate ad una determinata data e ora
• Periodicamente tramite un servizio web
• Con una notifica push inviata tramite il WNS (Windows Notification Service)
• Le tile sono definite tramite XML, con la possibilità di
scegliere tra un vasto catalogo di template
Create and manage tiles
40. • L’aggiornamento delle tile viene gestito dalla classe
TileUpdateManager
• Le Windows Store app supportano la possibilità di creare
e aggiornare tile secondarie
• Le tile supportano i badge, per mostrare all’utente un
numero o un simbolo
Create and manage tiles
41. • Le notifiche toast servono per avvisare l’utente del
verificarsi di un evento legato all’applicazione
• Anche le notifiche toast possono essere create a runtime,
schedulate o inviate tramite una notifica push.
• Anche le notifiche toast sono rappresentate in XML, ma il
catalogo dei template disponibili è più ridotto
• Vengono inviate tramite la classe ToastUpdateManager
Notify users by using toast
42. • Le Windows Store app possono essere controllate con
diversi sistemi di input: tastiera e mouse, touch screen,
penna
• La classe Pointer consente di gestire le interazioni a
basso livello dell’utente con l’interfaccia
• Tramite i manipulation event, siamo in grado di
intercettare le interazioni avanzate dell’utente (drag, hold,
ecc.)
Manage input devices
43. • Le Windows Store app usano una navigazione di tipo
gerarchico, dalla pagina più esterna a quella più interna
• La navigazione è possibile tramite la classe Frame, che
espone i metodi più comuni (come Navigate e GoBack)
• E’ possibile gestire il ciclo di vita della pagina tramite i
metodi di navigazione, come OnNavigatedTo e
OnNavigatedFrom
Design and implement navigation in an app
44. • Il Semantic Zoom consente all’utente di vedere, a colpo
d’occhio, le categorie in cui sono raggruppati i nostri dati
• E’ supportato in maniera nativa da controlli come
ListView e GridView.
• Si gestiscono gli stati ZoomedInView (visualizzazione
normale) e ZoomedOutView (visualizzazione
raggruppata)
Design and implement navigation in an app
46. You have developed a weather app for the Windows Store. You are working on an enhancement
that will allow users to create shortcuts into your app for specific cities. What are the benefits of
using secondary tiles in your app? (Choose all that apply.)
A. Secondary tiles can be updated with the latest information for the city the user is interested in.
B. Secondary tiles make it easier for the user to launch your app and browse to the page they are
interested in.
C. After you have created a secondary tile, you can delete the application’s tile, thereby freeing
up space on the Start screen.
D. For the same Microsoft account, if your app is installed on a new device, the secondary tiles
will be available on it. This helps the user to start using your app without re-creating the
secondary tiles.
E. Secondary tiles can be resized to any size the user prefers thereby saving screen area
48. Diverse opportunità per memorizzare i dati della propria
applicazione:
• Storage locale, isolato e riservato per l’applicazione
• Storage roaming, limitato ma sincronizzato tra diversi
device
• Storage temporaneo, per dati di caching
• Servizi esterni (esempio, OneDrive, Azure)
Choose an appropriate data access strategy
49. • Accesso in sola lettura alla cartella dove è installata l’app
• Accesso alle librerie di sistema:
• Documents
• Pictures
• Music
• Videos
• Removable devices
• FileOpenPicker: le applicazioni possono importare file
presenti all’interno del sistema o esposti da altre applicazioni
Choose an appropriate data access strategy
50. • La classe HttpClient permette di effettuare operazioni di
rete e interagire con servizi web
• Espone un metodo per ogni comando del protocollo
HTTP: è adatta per interagire con i servizi REST
• Supporti ai servizi SOAP / WCF tramite la generazione di
una classe proxy
• WebSocket per la comunicazione bidirezionale
Retrieve data remotely
51. • Il binding è il meccanismo base dello XAML che consente
di creare un canale bidirezionale tra una sorgente (i dati) e
una destinazione (un controllo)
• Grazie alle DependencyProperty, la modifica della
sorgente provoca un aggiornamento della destinazione
per visualizzare il cambiamento
• Il binding può essere monodirezionale o bidirezionale
Implement data binding
52. • Tutti i controlli per gestire collezioni derivano da
ItemsControls, che consente di definire l’aspetto visuale
e di collegare i dati tramite il binding
• Tramite i converter (classi che implementano
IValueConverter) è possibile modificare, a runtime, il
valore restituito da un’espressione di binding
Implement data binding
53. • La classe PasswordVault consente di memorizzare, in
maniera sicura, le credenziali e di sincronizzare attraverso
i dispositivi dell’utente
• La classe CredentialPicker consente di offrire
un’interfaccia omogena tra le app per la richiesta di
credenziali
Manage Windows Authentication
54. • WebAuthenticationBroker è una classe che vi permette
di gestire con semplicità l’autenticazione tramite oAuth
richiesta da molti servizi (Facebook, Twitter, Google, ecc.)
• La classe PasswordVault vista in precedenza può essere
utilizzata anche per memorizzare credenziali di servizi
remoti in maniera sicura e sincronizzarle tra più dispositivi
Manage web authentication
56. You are developing a Windows Store app that enables users to download their photos
from social networking sites; manipulate them; and share them with friends through
email, Twitter, and Facebook. Your app shows a list of photos that the user viewed
recently as well as their modified versions. Which file storage options should you use?
(Choose all that apply.)
A. Use the roaming application data store to save the processed files so that they are
available on all devices.
B. Use the temporary application data store to save a copy of the original and processed
files.
C. Use Windows Azure to store processed files and access these files on other devices
owned by the user.
D. Use the roaming application data store to store the list of files accessed recently.
E. Use your application’s install location to store all the files.
Domanda
57. Grazie a tutti per la partecipazione
Riceverete il link per il download a slide e demo via email nei
prossimi giorni
Per contattarmi
info@qmatteoq.com
@qmatteoq
Grazie