SlideShare a Scribd company logo
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
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
brought to you by
• 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
• 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
• 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#
• 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
Let’sgo
Design Window Store
apps
• 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
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
Riutilizzare gli elementi visuali:
• Template
• Stili
• Risorse
• UserControl
Design the UI layout and the structure
• 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
• 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
• PLM = Process Lifetime Management
Design and implement PLM
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
• 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
domanda
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
Let’sgo
Develop Windows Store
apps
• 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
• 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
• 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
• 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
• 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
• 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
domanda
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
Let’sgo
Create the user interface
• 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
• 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
• 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
• 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
• 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
• 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
• 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
domanda
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
Let’sgo
Program the user
interaction
• 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
• 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
• 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
• 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
• 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
• 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
domanda
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
Let’sgo
Manage security and
data
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
• 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
• 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
• 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
• 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
• 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
• 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
domanda
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
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

More Related Content

Viewers also liked (20)

PDF
Bases Fondo Financiamiento Compartido
Sec Proyectos
 
PDF
PSA-Peugot e Citroen
Riccardo Iannarella
 
PPSX
Joa 9 6
joa1096
 
PPTX
Sys05 uso consapevole di git - beyond the basic
DotNetCampus
 
PPT
Presentación bullying
alonsocr23
 
PPTX
5 atracciones poco turisticas que visitar en Londres
Destinolondres.es
 
ODP
Contaminación
nachito98xD
 
PPTX
Tipografía y sus familias
Luis Rivera
 
PDF
Định Hướng SEO 2014
Nguyễn Văn Mạnh
 
DOC
LA RESISTENCIA DE LOS CAJAMARQUINOS POR UN NUEVO MODELO DE DESARROLLO HUMA…
Daniel Vega UNMSM
 
PPTX
Modelo pedagogico del fcecep
urielmejia
 
PPTX
Tema 2 obesidad
Nicky Miranda
 
PPTX
Fe04 angular js-101
DotNetCampus
 
DOCX
Trabajar en londres guía de supervivencia
Destinolondres.es
 
DOC
Ley orgánica de educación
alonsocr23
 
PPSX
Grupo 6
alonsocr23
 
DOCX
Dadlagin hicheel 3
erdmon
 
PPTX
Mob01 mobile services e webapi
DotNetCampus
 
PPTX
Win02 bing e windows store apps
DotNetCampus
 
DOC
Cañaris no esta sola, DEFENDIENDO SU DERECHO A LA VIDA y PAZ SOCIAL
Daniel Vega UNMSM
 
Bases Fondo Financiamiento Compartido
Sec Proyectos
 
PSA-Peugot e Citroen
Riccardo Iannarella
 
Joa 9 6
joa1096
 
Sys05 uso consapevole di git - beyond the basic
DotNetCampus
 
Presentación bullying
alonsocr23
 
5 atracciones poco turisticas que visitar en Londres
Destinolondres.es
 
Contaminación
nachito98xD
 
Tipografía y sus familias
Luis Rivera
 
Định Hướng SEO 2014
Nguyễn Văn Mạnh
 
LA RESISTENCIA DE LOS CAJAMARQUINOS POR UN NUEVO MODELO DE DESARROLLO HUMA…
Daniel Vega UNMSM
 
Modelo pedagogico del fcecep
urielmejia
 
Tema 2 obesidad
Nicky Miranda
 
Fe04 angular js-101
DotNetCampus
 
Trabajar en londres guía de supervivencia
Destinolondres.es
 
Ley orgánica de educación
alonsocr23
 
Grupo 6
alonsocr23
 
Dadlagin hicheel 3
erdmon
 
Mob01 mobile services e webapi
DotNetCampus
 
Win02 bing e windows store apps
DotNetCampus
 
Cañaris no esta sola, DEFENDIENDO SU DERECHO A LA VIDA y PAZ SOCIAL
Daniel Vega UNMSM
 

Similar to Cert04 70-484 - essentials of developing windows store apps (20)

PPTX
Cert03 70-486 developing asp.net mvc 4 web applications
DotNetCampus
 
PDF
App Mobile Powerapps
Giuneco S.r.l
 
PPTX
Meetup ASP.NET Core Angular
dotnetcode
 
PPTX
Introduzione a DotNetNuke
Massimo Bonanni
 
PPTX
Impara React sfruttando le tecnologie più recenti (Eduard Capanu).pptx
EduardCapanu
 
PPT
SUE AGILE Framework (Italiano)
Sabino Labarile
 
PPTX
Writing apps for android with .net
Leonardo Alario
 
PPTX
Tesi8
tryyrt
 
PPT
Web dynpro for abap 02
Piergiorgio Bossù
 
PDF
Framework di sviluppo web: introduzione a bootstrap e boostack
Stefano Spagnolo
 
PDF
Blazor ha vinto? Storie di casi reali
Andrea Dottor
 
PPTX
Meetup Fluent Design e Progressive Web App
dotnetcode
 
PDF
Meetup Progressive Web App
dotnetcode
 
PPTX
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platform
Gabriele Gaggi
 
PPTX
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
DotNetCampus
 
PPTX
Slide typescript - net campus
DotNetCampus
 
PPTX
Slide typescript - xe dotnet - Codemotion Rome 2015
Codemotion
 
PDF
Aruba Cloud: 5 minuti sul VisualCloud #Arubait5
Aruba S.p.A.
 
PPTX
OpenDevSecOps 2019 - Open devsecops un caso di studio
Emerasoft, solutions to collaborate
 
PPTX
ASP.NET MVC: Andare oltre il 100% (Web@work)
Giorgio Di Nardo
 
Cert03 70-486 developing asp.net mvc 4 web applications
DotNetCampus
 
App Mobile Powerapps
Giuneco S.r.l
 
Meetup ASP.NET Core Angular
dotnetcode
 
Introduzione a DotNetNuke
Massimo Bonanni
 
Impara React sfruttando le tecnologie più recenti (Eduard Capanu).pptx
EduardCapanu
 
SUE AGILE Framework (Italiano)
Sabino Labarile
 
Writing apps for android with .net
Leonardo Alario
 
Tesi8
tryyrt
 
Web dynpro for abap 02
Piergiorgio Bossù
 
Framework di sviluppo web: introduzione a bootstrap e boostack
Stefano Spagnolo
 
Blazor ha vinto? Storie di casi reali
Andrea Dottor
 
Meetup Fluent Design e Progressive Web App
dotnetcode
 
Meetup Progressive Web App
dotnetcode
 
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platform
Gabriele Gaggi
 
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
DotNetCampus
 
Slide typescript - net campus
DotNetCampus
 
Slide typescript - xe dotnet - Codemotion Rome 2015
Codemotion
 
Aruba Cloud: 5 minuti sul VisualCloud #Arubait5
Aruba S.p.A.
 
OpenDevSecOps 2019 - Open devsecops un caso di studio
Emerasoft, solutions to collaborate
 
ASP.NET MVC: Andare oltre il 100% (Web@work)
Giorgio Di Nardo
 
Ad

More from DotNetCampus (20)

PDF
ARCHITETTURA DI UN'APPLICAZIONE SCALABILE
DotNetCampus
 
PPTX
MICROSOFT E IL MONDO IOT
DotNetCampus
 
PPTX
70-485: ADVANCED OF DEVELOPING WINDOWS STORE APPS USING C#
DotNetCampus
 
PDF
70-534: ARCHITECTING MICROSOFT AZURE SOLUTIONS
DotNetCampus
 
PDF
70-483: PROGRAMMING IN C#
DotNetCampus
 
PPTX
DSTORIE DALLA TRINCEA: TEAM FOUNDATION SERVER IN CASI LIMITE E NON SOLO...
DotNetCampus
 
PPTX
TUTTO SU VISUAL STUDIO ALM 2015
DotNetCampus
 
PPTX
CONTINUOUS INTEGRATION CON SQL SERVER
DotNetCampus
 
PPTX
PREDICT THE FUTURE , MACHINE LEARNING & BIG DATA
DotNetCampus
 
PPTX
DESKTOP AND CLIENT VIRTUALIZATION: NEW WORKSTYLES WITH MICROSOFT VDI
DotNetCampus
 
PPTX
FROM ON-PREMISE TO THE HYBRID CLOUD WITH MICROSOFT AZURE
DotNetCampus
 
PPTX
SHAREPOINT 2016 - WHAT'S NEW
DotNetCampus
 
PPTX
COSTRUISCI IL TUO DEVICE
DotNetCampus
 
PPTX
SVILUPPARE PER MICROSOFT BAND
DotNetCampus
 
PPTX
INTERFACCE GRAFICHE CON UNITY3D 4.6: IL GIOCO NON BASTA!
DotNetCampus
 
PPTX
WINDOWS PHONE APPS IN C++
DotNetCampus
 
PPTX
AZURE NOTIFICATION HUB
DotNetCampus
 
PPTX
SFRUTTARE I MICROSOFT AZURE MOBILE SERVICES CON XAMARIN.FORMS
DotNetCampus
 
PPTX
INTRO TO XAMARIN
DotNetCampus
 
PPTX
UNIVERSAL APP IN TUTTE LE SALSE: PHONE, TABLET, PC, XBOX E IOT
DotNetCampus
 
ARCHITETTURA DI UN'APPLICAZIONE SCALABILE
DotNetCampus
 
MICROSOFT E IL MONDO IOT
DotNetCampus
 
70-485: ADVANCED OF DEVELOPING WINDOWS STORE APPS USING C#
DotNetCampus
 
70-534: ARCHITECTING MICROSOFT AZURE SOLUTIONS
DotNetCampus
 
70-483: PROGRAMMING IN C#
DotNetCampus
 
DSTORIE DALLA TRINCEA: TEAM FOUNDATION SERVER IN CASI LIMITE E NON SOLO...
DotNetCampus
 
TUTTO SU VISUAL STUDIO ALM 2015
DotNetCampus
 
CONTINUOUS INTEGRATION CON SQL SERVER
DotNetCampus
 
PREDICT THE FUTURE , MACHINE LEARNING & BIG DATA
DotNetCampus
 
DESKTOP AND CLIENT VIRTUALIZATION: NEW WORKSTYLES WITH MICROSOFT VDI
DotNetCampus
 
FROM ON-PREMISE TO THE HYBRID CLOUD WITH MICROSOFT AZURE
DotNetCampus
 
SHAREPOINT 2016 - WHAT'S NEW
DotNetCampus
 
COSTRUISCI IL TUO DEVICE
DotNetCampus
 
SVILUPPARE PER MICROSOFT BAND
DotNetCampus
 
INTERFACCE GRAFICHE CON UNITY3D 4.6: IL GIOCO NON BASTA!
DotNetCampus
 
WINDOWS PHONE APPS IN C++
DotNetCampus
 
AZURE NOTIFICATION HUB
DotNetCampus
 
SFRUTTARE I MICROSOFT AZURE MOBILE SERVICES CON XAMARIN.FORMS
DotNetCampus
 
INTRO TO XAMARIN
DotNetCampus
 
UNIVERSAL APP IN TUTTE LE SALSE: PHONE, TABLET, PC, XBOX E IOT
DotNetCampus
 
Ad

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 [email protected] - @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 [email protected] @qmatteoq Grazie