====== Découvrez comment développer une première application ======


===== Connexion au site =====
Accédez au site Web http://www.makemedroid.com/ 

Il faut **s'inscrire** au préalable avant de pouvoir créer des applications.
{{ :dev:mobile:makemedroid:mmd00.png |}}

Puis **se connecter** :

{{ :dev:mobile:makemedroid:mmd01.png |}}

  * Se rendre dans la partie **Mes applications** :

{{ :dev:mobile:makemedroid:mmd_02.png |}}

===== Création d'une application =====
  * Choisissez de créez une nouvelle application.

{{ :dev:mobile:makemedroid:mmd_03.png |}}

    * vous pouvez :
      * utiliser des **modèles prédéfinis** et un **assistant** vous guide alors dans la création de votre app ;
      * choisir d'utiliser l'**éditeur avancé** pour avoir plus de possibilité de **personnalisation**. C'est ce que vous allez choisir.

  * au bas de l'écran choisissez **Plus grande personnalisation**
{{ :dev:mobile:makemedroid:mmd_03_1.png |}}
  * puis cliquez sur **Passer en mode avancé**
{{ :dev:mobile:makemedroid:mmd_03_2.png |}}

  * Choisissez le style de base **Application vide**.

{{ :dev:mobile:makemedroid:mmd_05.png |}}

  * et donner le nom **DCG** à votre application et cliquer sur le bouton **Créer** : 
{{ :dev:mobile:makemedroid:mmd_05_1.png |}}

<WRAP center round info>
Lors de la création de votre application, vous avez un écran d'aide puis une vidéo qui vous présentent les possiblités de base du site. Prenez le temps de les consulter.
</WRAP>


  * Changez **l'icône** de l'application en choisissant le fichier image ci-dessous ou en créant le votre au format **png** avec une taille de **80x60 pixels**.
{{ :dev:mobile:makemedroid:dcg.png |}} 
    * au bas de l'écran, cliquez sur l'**icône par défaut** de l'application (icône d'un CD-ROM)
{{ :dev:mobile:makemedroid:mmd_06.png |}}

    * cliquez ensuite sur la même icône pour pouvoir choisissez le nouveau fichier image
{{ :dev:mobile:makemedroid:mmd_07.png |}}

    * vous devriez obtenir ceci : 
{{ :dev:mobile:makemedroid:mmd_07_1.png |}}


===== Le menu principal =====

Par défaut, l'**écran principal** est l'**écran initial** de l'application.
{{ :dev:mobile:makemedroid:mmd_08.png |}}
Vous allez personnaliser cet écran 
  * en changeant son **titre** ;
  * en créant un lien vers une autre écran permettant d'afficher un **flux RSS** d'un blog.
  * en créant un deuxième lien pour accéder à une page **messagerie**.

==== Modification du titre : ====
  * cliquez sur le titre pour le modifier afin d'afficher **DCG 2016**
{{ :dev:mobile:makemedroid:mmd_09.png |}}

==== lien vers l'écran flux RSS ====
  * cliquer le bloc du bas 
{{ :dev:mobile:makemedroid:mmd_10.png |}}

  * cliquez sur la zone texte pour faire apparaître une **fenêtre pop-up** qui vous propose les **propriétés** de l'objet sélectionné :
{{ :dev:mobile:makemedroid:mmd_10_1.png |}}
  * cliquez sur l'image pour accéder à ses paramètres : 
{{ :dev:mobile:makemedroid:mmd_10_2.png |}}
  * cliquez ensuite sur l'icône **Loupe** pour la changer
  * Modifiez les icônes en utilisant vos propres images ou celles de la **bibliothèque d'images** en cliquant sur l'icône par défaut :
{{ :dev:mobile:makemedroid:mmd_10_3.png |}}


{{ :dev:mobile:makemedroid:mmd_13.png |}}

Pour obtenir : 

{{ :dev:mobile:makemedroid:mmd_14.png |}}


<WRAP center round important>
**Sauvegardez** ce que vous avez fait en cliquant sur le bouton **Enregistrer sauvegarde privée** :
{{ :dev:mobile:makemedroid:mmd_14_1.png |}}
</WRAP>


===== Lire un flux RSS =====
Le **flux RSS** qui permet de récupérer le contenu des articles du CMS Wordpress est par défaut accessible à la page **?feed=rss2**.

Pour le site Wordpress situé à l'adresse IP **ip_wordpress_dcg**, la **source de données** à renseigner pour la **liste dynamique** est **http://ip_wordpress_dcg/wordpress/?feed=rss2**.

  * Créez un nouvel écran via le bouton **Ajouter un écran**.
{{ :dev:mobile:makemedroid:mmd_15_1.png |}}
  * Sélectionnez **Lecteur de news personnalisé** dans la rubrique **Fonctionnalités prêtes à l'emploi**.
  * Nommez l'écran **Evénement** puis clique sur **Ajouter**.

{{:dev:mobile:makemedroid:mmd_15.png|}}


  * Modifiez les propriétés de l'écran pour indiquer la source du Flux RSS. Cliquez sur le bouton **Paramètres** :
{{:dev:mobile:makemedroid:mmd_16.png|}}
    * puis sur **Source de données** :
{{:dev:mobile:makemedroid:mmd_17.png|}}


  * Indiquez l'adresse du blog Wordpres en précisant la page qui génère le Flux RSS (**?feed=rss2**).

{{:dev:mobile:makemedroid:mmd_18.png|}}

  * En ajoutant la **fonctionnalité Flux RSS**, il y 2 écrans qui ont été ajoutés. Le 2e écran, suffixé par **_2**, permettra de visualiser l'intégralité de l'article sélectionné.

{{:dev:mobile:makemedroid:mmd_28.png|}} 


===== Lier l'écran Evénements à l'écran Menu principal =====
  * Revenez sur l'écran principal du début, écran qui est par défaut l'**écran initial**.
{{ :dev:mobile:makemedroid:mmd_16_2.png |}}
  * Cliquez sur le bloc **Wordpress** pour faire apparaître les propriétés et l'icône associée à **Action "clic"** :
{{ :dev:mobile:makemedroid:mmd_10_1.png |}}
  * L'éditeur d'actions s'ouvre. 
  * Sélectionnez l'action **Afficher un écran**, puis choisissez l'écran **Evenements**
  * Validez via **Appliquer cette action**.

{{:dev:mobile:makemedroid:mmd_21.png|}}

===== Ajout d'une messagerie =====
Ajout de la fonctionnalité **messagerie** dans l'application, pour que les utilisateurs puissent partager des informations entre eux.

  * Créez un nouvel écran de type **Messagerie**, avec comme nom **Messagerie**.

Il n'y a rien d'autre à faire comme configuration pour utiliser la messagerie.

{{:dev:mobile:makemedroid:mmd_29.png|}}


===== Lier l'écran Messagerie à l'écran Menu principal =====
  * Revenez sur l'écran liste du début, écran qui est par défaut l'**écran initial**.
  * Cliquez sur le bloc **Messagerie** pour faire apparaître les propriétés et l'icône associée à Action “clic”.
  * L'éditeur d'actions s'ouvre. 
  * Sélectionnez l'action **Afficher un écran**, puis choisissez l'écran **Messagerie**
  * Validez via **Appliquer cette action**.

{{:dev:mobile:makemedroid:mmd_30.png|}}


===== La barre de raccourcis =====
La barre de raccourcis située en bas des écrans est identique sur tous les écrans de l'application.
Placement de 4 raccourcis: **Accueil**, **Les événements**, **Messagerie** et **Site web du Blog**.

{{:dev:mobile:makemedroid:mmd_31.png|}}

Il est possible de rajouter ou d'enlever des raccourcis.

  * Pour chaque raccourci, choisissez une image et donnez-lui un titre très court.
{{:dev:mobile:makemedroid:mmd_32.png|}}

  * associez chaque raccourci à l'action permettant de les lier à l'écran correspondant. Pour le raccourci **Site Web**, rattachez-le à une action de type **Ouvrir une page web** pour indiquer le site http://37.187.66.61 en utilisant également l'icône {{:dev:mobile:makemedroid:mmd_19.png|}}.

{{:dev:mobile:makemedroid:mmd_33.png|}} 


===== Enregistrement  =====
L'application terminée, enregistrez-la avec le bouton **Enregistrer**



<WRAP center round info>
Je continue l'activité [[dev:mobile:makemedroid:accueil|Développer des applications pour mobile avec MakeMeDroid]]
</WRAP>