Quick start

Premiers pas

Créer une nouvelle appli

Cliquez sur "Commencer"...
Ca y est, vous êtes en train de créer votre application!

Créez des onglets, des listes, des pages, intégrez des contenus externes, voyez le résultat en direct dans le volet de visualisation...

Aucun enregistrement n'est nécessaire pour tester les fonctionnalités d'AppMobile.
Nous vous conseillons cependant de créer un compte -gratuit !- qui vous permettra:

d'enregistrer votre travail et de retrouver votre projet plus tard pour le compléter, le modifier, le finaliser
de vous connecter à l'application "AppMobile" sur votre smartphone Android ou iPhone, pour tester votre application en temps réel.

Enregistrer mon appli

Toutes les modifications effectuées en ligne sont prises en compte dès leur validation pour l'affichage dans le simulateur sur www.mvsappmobile.com.

Pour retrouver votre application lors de votre prochaine connexion, ou pour la tester sur votre téléphone avec l'appli "AppMobile", vous devez d'abord l'enregistrer

Si vous vous êtes êtes déjà identifié, cliquez sur le bouton "Enregistrer".
Sinon, cliquez sur le bouton "S'identifier" pour vous connecter à votre compte ou pour en créer un. Vous pourrez enregistrer votre application dès que vous serez connecté.

Créer un compte / S'identifier

Cliquez sur le bouton "S'identifier".

Si vous avez un compte, saisissez simplement votre identifiant et votre mot de passe dans la section "Connexion". Sinon, saisissez les informations nécessaires pour la création de votre compte dans la section "Inscription".

Créer votre compte est gratuit et sans engagement, de même que créer son application ou la tester sur votre téléphone avec l'appli AppMobile. Vous ne payez rien jusqu'à la validation définitive pour mise en ligne de votre application sur les stores.

Ma première appli : structure et contenu

Maintenant que vous êtes prêt (et identifié si vous souhaitez enregistrer votre travail), vous allez pouvoir définir la structure et le contenu.

Ajouter un onglet

Lorsque vous commencez la création d'une appli, un premier onglet est créé par défaut.
Vous pourrez par la suite en ajouter d'autres en cliquant sur un symbole "+" de la liste des onglets .

Définissez les caractéristiques de votre nouvel onglet:

Nom de l'onglet : c'est celui qui apparaît dans la barre de titre de l'appli lorsque l'onglet est actif.
Icône : elle permettra de sélectionner l'onglet dans la barre inférieure de l'application. Vous pouvez la choisir dans le panel proposé (menu déroulant).
Type de contenu : ce que contiendra le nouvel onglet.
Pour notre exemple, le premier onglet sera constitué d'une simple page.

Créer une page

Sélectionner le type "Page" lors de la création de l'onglet (ou de l'item de liste, cf ci-dessous).

Paramètres de la page

A la création de la page, un volet supplémentaire s'ouvre automatiquement dans la zone de paramétrage des contenus .

Pour y revenir ultérieurement, cliquez sur l'icône "paramètres":

Les options disponibles dans le volet des paramètres d'une page sont:

Page personnalisée : Vous définissez directement le contenu de votre page à travers le portail AppMobile. Vous pouvez compléter, modifier, mettre à jour votre page à tout moment sur le portail; la page modifiée sera en ligne immédiatement pour les utilisateurs de votre application.
Page HTML distante : l'URL d'une page hébergée séparément.

Une fois paramétré le type de page désiré, cliquez sur le bouton "crayon" pour passer en mode édition.

Edition de votre page personnalisée

Lorsque la zone d'édition des contenus est active , vous pouvez saisir un titre et ajouter des texte, des sous-titres et des images. La mise en forme des titres, textes et sous-titres pourra être configurée par la suite.

Vous pouvez également ajouter des champs de code HTML. Notez que ces champs seront interprétés, vous pouvez donc y intégrer des styles CSS et des scripts en Javascript.

De nombreux services web vous proposent d'embarquer des plugins sous forme d'un petit morceau de code HTML à intégrer sur votre site web: video Youtube, lecteur de musique Deezer, widgets Facebook (bouton "j'aime"), Twitter, Pinterest, Google+, etc.
Vous pouvez intégrer l'extrait de code directement dans une zone "code HTML" d'une page de votre application.

URL de votre page distante

Si vous avez choisi une page de type "Page HTML distante", la zone d'édition vous demande de saisir l'URL de votre page.

Votre page peut être statique (HTML) ou dynamique (créée à la volée en php par exemple). Dans le deuxième cas, profitez des paramètres passés par AppMobile à l'URL appelée(*) pour fournir un contenu personnalisé à vos utilisateurs. Les paramètres passés varient selon les options et modules que vous avez activés; vous trouverez plus d'informations ici sur les paramètres passés par AppMobile.
(*) par exemple: données de géolocalisation, id de session, ...

Créer une liste

Sélectionner le type "Liste" dans les paramètres de l'onglet (ou de l'item d'une liste pour créer une sous-liste).

Paramètres de la liste

Les options disponibles dans le volet des paramètres d'une liste sont:

Liste personnalisée : Vous définissez directement le contenu de votre liste (items, noms, icônes, contenus) à travers le portail AppMobile. Vous pouvez compléter, modifier, mettre à jour votre liste à tout moment sur le portail; les mises à jour seront en ligne immédiatement pour les utilisateurs de votre application.
Flux externe : l'URL d'une liste hébergée séparément. Vous pouvez consulter les explications relatives au format des listes XML.
Les listes XML sont un moyen simple et puissant pour créer des applications dynamiques, en générant le XML avec un script côté serveur (php, .net, etc). Un script qui interroge votre base de données pour créer des listes XML dynamiques est la clé de nombreuses fonctionnalités: système de messagerie , catalogue , panier d'achats, etc.
Consultez le tutoriel consacré aux listes dynamiques pour plus d'explications.

Une fois paramétré le type de liste, cliquez sur le bouton "crayon" pour passer en mode édition.

Edition de votre liste personnalisée

Dans la zone d'édition de votre liste, vous pouvez

sélectionner (1), ajouter (2), supprimer (3) ou encore classer (4) les items
éditer l'item sélectionné. Pour cela :
- cliquez sur l'icône (5) pour activer la zone d'édition du contenu (6).
- ou cliquez sur l'icône (7) pour modifier ses propriétés (nom, icône, type de contenu...)
  Nota: un item peut lui-même être de type "liste", son contenu sera alors une sous-liste, et ce jusqu'à cinq niveaux.
naviguer dans la liste et ses sous-listes le cas échéant (8).
Pour remonter à l'item parent, cliquez sur la flèche à gauche de l'aide à la navigation (9).

URL de votre liste XML externe

Si vous avez choisi une liste de type "liste externe", la zone d'édition vous demande d'en saisir l'URL.

Votre liste peut être statique (fichier XML conforme au format AppMobile) ou dynamique (créée à la volée en php par exemple). Dans le deuxième cas, profitez des paramètres passés par AppMobile à l'URL appelée(*) pour fournir un contenu personnalisé à vos utilisateurs.
(*) par exemple: données de géolocalisation, id de session, ...

Testez votre fichier XML: notre outil de validation vous permettra d'identifier les principales erreurs dans votre XML.

Intégrer des contenus existants

Un des objets principaux d'une application mobile est de communiquer des informations, des contenus ou plus généralement des données à jour aux utilisateurs. Mais l'application mobile est rarement le seul vecteur de communication avec vos clients, vos adhérents, votre communauté. Les informations à communiquer sont souvent disponibles en ligne sur votre site internet, votre facebook,ou à travers un flux RSS, etc.

Pour vous éviter des mises à jour redondantes, AppMobile est conçu pour diffuser directement des informations que vous tenez déjà à jour par ailleurs.

intégrez votre page facebook en quelques clics: chaque nouvelle publication sur cette page sera immédiatement disponible dans votre application
vous avez développé un flux RSS pour permettre à votre communauté de suivre vos news? Affichez le directement dans votre application, sans saisie supplémentaire
les photos des matchs de votre club, ou des dernières réalisations de votre entreprise sont dans une galerie Flickr ou Picasa? Intégrez ce flux d'images dans votre application. Idem pour vos vidéos Youtube ou Dailymotion.

Intégrer un flux RSS

Dans la zone de paramétrage d'un onglet, ou d'un item de liste, choisissez le type de contenu "RSS".

Puis dans la zone d'édition du contenu, saisissez l'URL du flux RSS à afficher.
L'application affiche les titres des articles du flux RSS sous la forme d'une liste.

Quand l'utilisateur sélectionne un item de la liste, un écran affiche le contenu de l'article.
Selon l'option sélectionnée, c'est soit le contenu de l'élément <description> du flux RSS qui est affiché, soit la page pointée par l'élément <link>. Si vous ne savez pas quelle option choisir pour votre flux, essayez d'abord l'un, puis l'autre et testez le résultat.

Intégrer un flux d'images

Le flux d'image représente un moyen très simple d'illustrer un sujet (le match du club de ce week-end, les réalisations de l'entreprise, le portfolio de l'artiste, les affiches de votre dernière campagne publicitaire...). Vous n'avez qu'à tenir à jour votre galerie Picasa ou Flickr pour que les photos soient immédiatement visibles par vos utilisateurs.

Dans la zone de paramétrage d'un onglet, ou d'un item de liste, choisissez le type de contenu "Images".
Précisez s'il s'agit d'une galerie Picasa ou Flickr.

Galerie Flickr

Dans la zone d'édition du contenu, saisissez l'URL du flux à afficher.

commencez par rechercher votre identifiant Flickr: il apparaît dans la barre d'adresse de votre navigateur lorsque vous êtes connecté et que vous consultez votre galerie. Dans l'exemple suivant, l'identifiant est "124568599@N02" :
si vous ne voulez afficher que certaines photos, attribuez leur un tag dans Flickr (dans notre exemple, nous leur avons affecté le tag "g1")
l'URL du flux qui rassemble les photos de l'utilisateur Flickr "124568599@N02" qui portent le tag "g1" est la suivante:
https://api.flickr.com/services/feeds/photos_public.gne?id=124568599@N02&tags=g1&format=rss_200
Attention, seules les photos publiques seront affichées.

Pour plus de détails, merci de vous référer à la documentation publiée sur le site Flickr, et notamment:
https://www.flickr.com/services/feeds/docs/photos_public/.
Vous y trouverez toutes les informations utiles sur l'URL, les paramètres disponibles, etc.

Galerie Picasa

Dans la zone d'édition du contenu, saisissez l'URL du flux à afficher.

Pour trouvez cette URL, connectez-vous à Picasaweb, ouvrez la galerie voulue, faites un clic droit sur l'icône "RSS" (1) et choisissez "copier l'adresse du lien" dans le menu déroulant.
Cette galerie doit être publique (2).

Vous n'avez plus qu'à coller l'URL dans le champ "URL du flux d'images" sur le portail AppMobile.

Intégrer un flux de vidéos

Quoi de plus efficace qu'un set de vidéos pour présenter votre activité et votre équipe, présenter vos derniers équipements, diffuser vos tutoriels vidéos, donner un aperçu des excursions proposées par votre agence touristique...
Il vous suffit de déposer ces vidéos sur un compte Dailymotion, Vimeo ou Youtube pour les rendre disponibles dans votre application AppMobile.

Dans la zone de paramétrage d'un onglet, ou d'un item de liste, choisissez le type de contenu "Vidéos" et précisez s'il s'agit d'un flux Dailymotion, Vimeo ou Youtube.

Il ne vous reste plus qu'à saisir l'identifiant de votre compte dans la zone d'édition du contenu. Toutes les vidéos de ce compte apparaîtront dans l'application sous forme de liste.

Nota: cette section présente l'intégration de tout un flux de vidéos; mais vous pouvez aussi ajouter une vidéo seule dans une page HTML, au sein d'un bloc de type code HTML.

Flux Dailymotion

Saisissez votre nom d'utilisateur comme il apparaît dans la barre d'adresse lorsque vous êtes connecté à Dailymotion: .

Flux Vimeo

Vous pouvez utiliser le nom de l'utilisateur (1).
Vous pouvez aussi regrouper certaines vidéos au sein d'une chaîne (2), et utiliser le nom de la chaîne pour ne diffuser que cette sélection de vidéos dans votre application.

Flux Youtube

Le nom de l'utilisateur est celui qui apparaît dans la barre d'adresse quand vous êtes connecté à Youtube.

Intégrez vos réseaux sociaux

Partagez vos dernières publications Facebook ou Twittter avec les utilisateurs de votre appli.
Créez un onglet ou un item de liste, choisissez le type "Réseaux sociaux", et sélectionnez un réseau dans la zone de configuration, puis entrez le nom de la page dans la zone d'édition du contenu.

Votre page Facebook

Il vous suffit de saisir le nom de votre page.

Attention, c'est bien une page Facebook (1) qui peut être affichée, pas un compte ni un mur.
Pour en créer une, connectez vous à Facebook et cliquez sur "Créer une page" (2).

Votre compte Twitter

Saisissez simplement le login de votre compte Twitter.

Ma première appli : mise en forme

Cliquez sur le bouton Suivant pour passer à l'étape Style.

Vous pourrez ici définir les couleurs, tailles et polices de caractères, couleurs de fond, etc.