appstudioromagny13.com/wp-content/uploads/2015/05/appstudio.pdfii. applications windows 10 1....
TRANSCRIPT
AppStudio J. ROMAGNY
Table des matières
I. APPLICATIONS WINDOWS 8.1 ............................................................................. 2
1. CREER UN NOUVEAU PROJET « APP STUDIO » .................................................................................. 2 a. Changer le titre et le Logo....................................................................................................... 4
b. Choix des vignettes (« Tiles ») ................................................................................................. 5 c. Choix et personnalisation du Thème ....................................................................................... 5
2. AJOUT DE SECTIONS (« CONTENT ») .................................................................................................. 6
a. HTML ............................................................................................................................................ 6 b. Edition de section ........................................................................................................................ 7
c. Collection ................................................................................................................................ 8 d. Facebook ................................................................................................................................12
e. Twitter .....................................................................................................................................16
f. Youtube...................................................................................................................................20 g. Instagram ................................................................................................................................24
h. XBOX Music ............................................................................................................................28 i. Flickr .......................................................................................................................................29
j. Bing .........................................................................................................................................30
k. RSS ..........................................................................................................................................31 l. Menu .......................................................................................................................................32
3. GENERATION ........................................................................................................................... 34
II. APPLICATIONS WINDOWS 10 ............................................................................. 40
1. ORGANISATION DES APPLICATIONS WINDOWS 10 AVEC APPSTUDIO ................................................ 40
2. SECTIONS ................................................................................................................................ 41 3. APPARENCE ............................................................................................................................. 44
a. Thème .....................................................................................................................................44 b. Logo ........................................................................................................................................44
c. Tiles (vignettes affichées en écran d’accueil ou menu démarrer Windows 10) ....................45
4. PLUS ....................................................................................................................................... 46
App Studio permet de créer des projets Windows / Windows Phone 8.1 et 10
simplement sans taper une seule ligne de code. L’outil est en en ligne et accessible
gratuitement. Il suffit d’avoir un compte Microsoft.
On choisit son Template de projet de départ puis définit le thème, les vignettes et le
contenu (on ajoute des « sections ») pour enfin générer le package et les sources
(Visual Studio).
Assez bluffant cela mérite un coup d’œil.
Site App Studio
Procédures (« how to »)
I. Applications Windows 8.1
1. Créer un nouveau projet « App Studio » 2. Se rendre sur le site d’App Studio et se connecter avec son compte Microsoft.
3. Cliquer sur : « Démarrer maintenant », « Démarrer un nouveau projet » ou « Mes
projets ».. « Start New Project »
4. Choix du Template départ
Projet « vide » ou
Templates proposés
En cliquant sur les
Templates on a un
aperçu
5. Tableau de bord de l’application
Aperçu de la page principale (pas de
navigation entre pages) avec
Windows Phone.
Pour l’aperçu Windows App cliquer
sur le bouton
Permet d’ajouter
une section
Les sections créées
s’ajoutent ici
Onglets « Content » (ajout de
« sections »), Thèmes (choix du
thème et personnalisation),
Tiles (vignettes de
l’application), settings
Boutons « Save » pour
sauver les changements
apportés et « Finish »
pour générer le
package et les sources
Logo et titre
de
l’applicatio
n
a. Changer le titre et le Logo
En cliquant sur le Logo on est redirigé vers une page pour définir le Logo de son
application
Permet de Changer
la couleur
d’arrière-plan
Choix de
l’image
Exemple après avoir
changé le Logo et
l’arrière-plan
Utiliser une
couleur d’arrière-
plan transparente ?
Logo et titre
b. Choix des vignettes (« Tiles ») Edition, choix du Template et images des vignettes
c. Choix et personnalisation du Thème Différents thèmes sont proposés. Chaque thème est personnalisable.
Image pour le titre
Image d’arrière-plan
2. Ajout de sections (« Content »)
a. HTML
Permet d’éditer le HTML
généré
Il est possible de copier-
coller une image trouvée
sur internet dans l’éditeur
b. Edition de section Il est possible d’éditer une section une fois celle-ci créée. On a même accès à des options
non disponibles à la création.
Edition pour
page liste et
détail
Layout (liste avec images, etc.)
« Binding » des informations à
afficher
Titre et logo de la
section
Onglet data permet un aperçu
des données récupérées
Actions
Page
« Détail »
c. Collection
1. « Schéma »
Edition du « Schéma » et Layout des
pages « Liste »/ « Detail »
Ajout des données
2. Données
Import et export de
données au format CSV
possible (avec Excel par
exemple)
Ajout d’un élément à
la collection
Edition,
suppression de
chaque élément
Supprimer
tous les
éléments
3. Layout
Page « Liste »
Page « Détail »
On peut ajouter des « actions »
disponibles selon le type de
données de la colonne.
Exemple pour une colonne de
type « Email » cela permet
d’écrire un courrier.
« Binding » des
informations Layout
L’onglet Data permet d’éditer le « Schéma » mais n’est possible que si aucune donnée
n’est présente.
d. Facebook
Redirige vers le compte
« Facebook Developers »
Facebook developers
Sélectionner ou créer une nouvelle application… Menu « My Apps » … « Create a news
app »
… Passer l’application en « public »
… Et Récupérer les identifiants (« App Id » et « App Secret »)
Retour dans « App Studio »
Entrer l’App Id et l’App
Secret et valider
En relançant la création d’une section « Facebook » la clé est utilisée
On arrive à une page avec
toutes les clés déjà entrées
et utilisables avec App
Studio
Sélection de la page
« Facebook » à afficher
Exemple on cherche la
page de « dhany official »
Sélectionner …puis
confirmer… la section
« Facebook » est créée
e. Twitter
La démarche est quasiment la même qu’avec Facebook
Twitter Apps
Redirige vers « Twitter
Apps »
Sélection ou création d’une application
Générer un Token et noter « Access
Token » et « Access Token Secret »
Noter les identifiants de
l’application « Consumer key » et
« Consumer Secret »
Retour dans « App Studio »
En relançant la création d’une section « Twitter » la clé est utilisée
Sélection des
informations à afficher
Entrer les
identifiants de
l’application et le
Token
f. Youtube
Redirige vers le compte
« Google Developer »
Compte Google developers
Sélectionner ou créer un projet
Créer une clé « publique »
puis récupérer la « clé de
l’API »
Activer L’API
YouTube
Retour dans « App Studio »
En relançant la création d’une section « YouTube » la clé est utilisée
Entrer la clé
Exemple on cherche
« dhany »
La clé utilisée
Il est possible ensuite d’éditer la section
g. Instagram
Instagram Developers
Redirige vers le compte
« Instagram Developers »
Retour dans « App Studio »
En relançant la création d’une section « Instagram » la clé est utilisée
Entrer le « Client Id »
Il est possible ensuite d’éditer la section
Entrer le nom d’utilisateur, etc.
désiré
h. XBOX Music
Exemple on cherche l’artiste
« Dhany »
i. Flickr
Il est possible d’éditer la section
Utilisateur ou tag
j. Bing
Entrer le terme de la
recherche Bing
k. RSS
Il est possible d’éditer le Layout
l. Menu
Permet d’ajouter des actions
et sections au menu
Permet d’éditer
l’apparence du
menu
Nom/ Titre de la
section
Ajout d’actions /
Sections au menu
Apparence du
menu
3. Génération
L’onglet « Settings » permet de régler différentes options avant la publication.
Titre de l’application,
langage, description
Store
Ajout d’une page
« A propos
(« About ») ?
Activer les
publicités dans
l’application ?
« Store »
Une fois les différentes sections, le thème, les vignettes, les paramètres réglés …
Appuyer sur le bouton « Finish » … puis « Generate »
… Une boite de dialogue s’ouvre pour la génération
… Il est possible ensuite de télécharger le package
Générer un projet
Windows 8.1 ou Windows
10 ?
... Et les sources (projet Visual Studio)
Le code généré n’est pas très compliqué pour peu qu’on ait des bonnes bases MVVM. Il
est donc possible de modifier le projet à la base créé avec « App Studio » avec Visual
Studio.
Exemple d’application générée
II. Applications Windows 10
1. Organisation des applications Windows 10 avec AppStudio L’application est divisée en sections.
On a une page d’accueil avec la liste des différentes sections et les premiers
éléments affichés. Un lien « View All » permet de naviguer vers la page « liste »
affichant tous les éléments de la section.
En cliquant sur un élément depuis la page d’accueil ou la page « liste » on est dirigé vers
la page détail.
Une section avec « Carrousel
Big ». Chaque section a un titre, un
lien « View All » et les premiers
éléments affichés
Une autre section avec une image
hero affichée en page d’accueil
Page d’accueil avec sections
Page « Liste » Page « Détail »
2. Sections
Création de sections
On peut ajouter des sections depuis l’onglet « Content »
Section 1
Section 2
Section 3
…
Image hero
Titre de la section View All
On peut définir le layout des
éléments de la section en
page d’accueil
Lien vers la
page « liste »
Pour chaque section Sections de page d’accueil
Pour chaque section on peut définir :
Couleur d’arrière-
plan, image « hero »
Afficher la section au
menu de navigation
(SplitView) ?
Afficher l’image hero
de la section en page
d’accueil ?
Afficher la section en
page d’accueil ?
Afficher l’image hero
des pages « liste » et
« detail » de la
section ?
Layout utilisé en page d’accueil :
- « Big Vertical cards » : Responsive GridView
- « Carrousel Big » utilisé comme Slider en
haut de la paged’accueil par exemple
- « Carrousel Medium »
Pour la page liste et détail on peut définir le layout, l’icône de la section (SplitView)
Choix de l’icône de la
section (SplitView)
Choix du Layout pour la
page « Liste » et la page
« Detail »
3. Apparence
a. Thème On peut choisir le thème :
Blue Snow
California
Dark violet
Deep blue
Green swamp
Sepia
Dark (par défaut)
Light
Et éditer les propriétés de chaque thème
Arrière-plan : changer la couleur ou définir une image (avec effet parallaxe)
Contenu : choix de couleur de la font et du font style (Bold,Regular, etc.) pour le
titre, sous-titre, description
Couleur d’arrière-plan et du texte du Navigation Pane (SplitView)
AppBar (barre de titre en haut des pages) : choix de la couleur d’arrière-plan et
du texte
b. Logo Cliquer sur le logo à gauche du titre du projet pour accéder à la page de Logo.
Choix de l’image du logo, de la couleur d’arrière-plan (pour le SplashScreen) et définir si
la couleur transparente est utilisée pour les vignettes (en fait ce sera l’accent Windows 10
qui sera utilisé
45
c. Tiles (vignettes affichées en écran d’accueil ou menu démarrer Windows 10) On peut définir si elles sont « statiques » ou « dynamiques »
Choix de la section servant de source
Choix du Template des vignettes
Afficher le nom et logo de
l’application sur la vignette ?
Nom à afficher
Preview du
Template
46
4. Plus Exemples d’applications, il est possible également de choisir des projets de démarrage