appstudioromagny13.com/wp-content/uploads/2015/05/appstudio.pdfii. applications windows 10 1....

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