Archives de catégorie : Tutoriels

[App-Inventor] Comment créer son serveur local à jour et en 1080p

Publié le par

Introduction :

Voici un tutoriel de fin d’année sur app inventor. Ce tutoriel est le résultat de nombreuses heures de recherches sur la mise en place et la modification d’un serveur app inventor et j’aimerais le partager avec vous pour qu’il ne vous prenne pas autant de temps qu’a moi pour le mettre en place.

Sommaire :

    • Prérequis
    • Compilation du serveur
    • Accès à AppInventor local
    • Modification de la fenêtre viewer

Prérequis :

Sommaire :

      • Code Source d’app-inventor
      • ANT
      • App engine SDK
      • Java SDK (version 7)
      • Python (Version 2.7)
      • Git
      • Verification de l’installation des programmes

Code Source d’App-Inventor :

Avec GitHub :

      • Créez vous un compte GitHub dur leur site https://github.com/.
      • Cherchez App inventor sources dans la barre de recherche ou allez sur https://github.com/mit-cml/appinventor-sources.
      • Cliquez sur le bouton Clone PC si vous disposez de l’application github sur votre pc
      • Vous pouvez aussi cliquez sur download zip si vous ne disposez pas de l’application

Sans GitHub (La version n’est peut-être pas à jour !):

ANT :

      • Allez sur http://ant.apache.org/bindownload.cgi
      • Téléchargez la version .zip
      • Décompressez-la dans un endroit ou le path n’a pas d’espace (Comme C:/ant)
      • Ajouter une nouvelle variable d’environnement ANT_HOME
        • Allez dans Panneau de configuration>Système et sécurité>Système
        • Cliquez dans le menu à gauche sur Paramètres système avancé
        • Cliquez sur Variable d'environnement
        • Dans Variable système cliquez sur nouvelle
        • Mettez ANT_HOME en nom et le chemin de ant (dans notre exemple C:/ant)
        • Puis chercher la variable Path dans Variable système et cliquez sur modifier
        • allez au bout de la ligne ajouter %ANT_HOME%/bin

App Engine sdk :

Java SDK 7 :

Python 2.7 :

Git :

      • Allez sur http://git-scm.com/
      • Téléchargez la dernière version
      • Installez la
      • Ajoutez à Path le dossier bin qui se trouve dans le dossier installation (C:\Program Files (x86)\Git\bin dans mon cas)

Verification de l’installation des programmes :

      • Ouvrez un terminal (Bouton windows>tappez cmd dans la barre de recherche)
      • Tappez ant puis Entrée. Vous devez Obtenir :
        BuildFile: build.xml does not exist!
        Build failed
      • Tappez git puis Entrée. Vous devez obtenir : usage: git puis plein de paramètres
      • Tappez java puis Entrée. Vous devez obtenir : Syntaxe: Java [-Option] class [args...] puis plein de paramètres.
      • Tappez python puis Entrée. Vous devez obtenir : Python 2.7.6 puis plein de paramètres. Pour quitter Tapper quit().
      • Si un des programmes ne fonctionne pas vérifiez bien le Path dans les variables d’environnement (laissez un commentaire si cela ne marche toujours pas…).

Compilation du serveur :

    • Allez dans votre dossier source d’AppInventor.
    • Naviger dans le dossier appinventor
    • Cliquez-droit sur le fichier build.xml et cliquez sur git bash
    • Un terminal devrai s’ouvrir (sinon git est mal installé)
    • Tappez ant pour compilez le serveur (4 minute ~)
    • Si une erreur se produit (le terminal indique BUILD FAILED) :
      • Vérifiez que le dossier appinventor n’a pas d’espace dans le path (comme C:/Users/PATATE SUPREME/Documents/GitHub/appinventor-sources est faux puisqu’il y a un espace entre PATATE et SUPREME).
      • Si une autre erreur se produit les logiciel installées ne le sont pas correctement (Vérifiez aussi les variables d’environnement).

Accès à AppInventor local:

  • Téléchargez ces 2 fichiers (Fichiers_demarrage_appinventor_server)
  • AppEngine Server.cmd
  • Build Serveur.cmd
  • Mettez-les dans le dossier appinventor-sources à coté du dossier appinventor
  • Ouvrez le fichier AppEngine Server.cmd en cliquant droit dessus et en choissisant Modifier
  • Verifiez que C:/appengine-sdk/bin/dev_appserver.cmd correspond avec le dossier d’installation d’appengine-sdk
  • Enregistrez le fichier
  • Double-cliquez sur les 2 (2 terminaux vont s’ouvrir)
  • Allez sur localhost:8888 sur votre navigateur préféré
  • Entrez un nom dans la fenêtre qui s’ouvre (comme x1QG1x par ex) puis sur log in
  • Vérifiez bien que entrez ce nom à chaque fois que vous allumez votre serveur

Modification de la taille de la fenêtre viewer :

  • Allez dans appinventor\appengine\src\com\google\appinventor\client\editor\simple\components.
  • Ouvrez le fichiez MockForm.java (avec notepad++ par exemple)
  • A la ligne 113 changez PORTRAIT_WIDTH en 753,PORTRAIT_HEIGHT en 1282,LANDSCAPE_WIDTH en 1282 et LANDSCAPE_HEIGHT en 753
  • Retournez dans le dossier appengine
  • Clic droit sur build.xml puis git bash
  • Tappez ant clean
  • Puis tappez ant une fois que ant clean est affiché BUILD SUCCESSFULL
  • Lancez les 2 cmd (Build Server.cmd et AppEngine Server.cmd) et allez sur localhost:8888
  • Vous avez maintenant le viewer en 1080p (pour les tablettes acer A700).

[Tuto] Mettre une appli AppInventor en 1080p

Publié le par

Votre appli AppInventor est en base résolution ?
Convertissez là dans la résolution de votre tablette !

0:08 (1) Les prérequis (AppToMarket & AppInventor)
https://code.google.com/p/apptomarket/downloads/list
http://ai2.appinventor.mit.edu/

1:01 (2) La création sous AppInventor avec des images HD

2:15 (3) Utiliser AppToMarket

3:38 (4) Test sur tablette HD

[Tutoriel WordPress] Comment faire un article

Publié le par

Voici un tutoriel pour réaliser un tutoriel !
(ce qui est proposé est un guide s’il ne vous conviens pas n’hésitez pas à m’envoyer des retours)

Déroulement du tutoriel

  • La base d’un article, chose à faire avant de commencer

  • Les images, ce qu’on a le droit et le devoir de faire

  • L’article

    • le titre
    • la présentation
    • le déroulement
    • la conclusion

Les images :

J’ai une image prise sur internet :
Je ne la copie surtout pas sur l’espace media de wordpress !! elle est déjà sur internet laissons la sur internet !
Allez dans ajouter une média et insérer une image depuis le web copier le lien de l’image (Clic droit dessus copier l’URL de l’image)…

J’ai une image que j’ai prise moi même :
Je la copie dans la bibliothèque de WordPress et je change le titre et la légende avec dans celle-ci Source : Votre_Nom ou encore Image LP2I

L’article

Le titre

Précisez au début du titre avec des [] le sujet de votre article ex : [TUTORIEL]
Indiquez clairement le sujet de votre article il faut qu’il soit simple mais qu’il résume votre article ex : Comment faire…

La présentation

Faites un bref résumé du sujet de l’article (1 ou 2 lignes) qui donne envie de lire votre article puis essayer si vous en avez un de former un plan (avec des points ou des tirets pour structurer votre article.

Le déroulement

Essayez de garder un style de titre et de sous-titres cohérent dans tout votre article
comme :

Titre 1

Sous titre 1

Paragraphe

Mettre plus de photo que de texte !!

Beaucoup de texte c’est long a lire et le lecteur ne lira que 2 lignes alors coupez et mettez des images.
Un paragraphe vaut une photo et en général c’est plus clair.

Ne pas oublier les liens vers d’autres site et/ou d’autres articles

Conclusion :

Bouton de téléchargement pour une application avec la syntaxe <a href=”lien_de_votre_fichier”>Nom de votre lien</a>

[TUTORIEL XML-2] Le Bouton-Image

Publié le par

– Pour faire une image qui interagit lorsque l’on clique dessus, il y a plusieurs façons de s’y prendre.

– La première est de créer un “ImageButton” de la taille voulu et avec les caractéristiques souhaitées, puis de mettre une image sur ce bouton grâce à la ligne suivante : “android:src=”@drawable/…”” après avoir rempli au préalable les dossiers “drawable” avec les images en question. Cette méthode est simple mais présente un inconvénient majeur qui est que les bords de l’image restent ceux du bouton de base d’androïd.

Voici la zone en question pour cette première méthode

Voici la zone en question pour cette première méthode

voici un aperçu du résultat

voici un aperçu du résultat

– La seconde (et celle que je préfère personnellement) est de poser tout simplement l’image sur l’écran avec toutes les caractéristiques voulues, puis d’ajouter cette ligne : “android:clickable=”true””, ce qui permet de rendre l’image clickable et donc de mettre une interaction lors d’un click sur l’image. Il n’y a pas de bords de boutons et de changements de couleur lors du click mais cela peut être ajouté à partir du code java et d’une autre image superposée.

Voici la zone en question pour cette seconde méthode

Voici la zone en question pour cette seconde méthode

voici un aperçu d résutat

voici un aperçu du résultat

PS : si vous avez des questions sur ce sujet n’hésitez pas à laisser un commentaire !

[TUTORIEL XML-1] Fond d’écran

Publié le par

– La modification à faire se trouve dans votre fichier .xml de la page où vous voulez poser le fond d’écran. Dans le bloc “LinearLayout” du code (situé tout en haut dès les premières lignes) il faut que vous ajoutiez cette ligne : android:background=””

La zone encadrée est la zone à modifier pour le fond d'écran

La zone encadrée est la zone à modifier pour le fond d’écran

– Dans les guillemets, il est possible d’entrer une couleur en hexadécimal sous la forme : #112233 par exemple. Il est aussi possible de mettre une image que vous aurez déposer au préalable dans les dossiers “drawable” de votre application vous devez alors écrire dans les guillemets : @drawable/… Avec le nom de votre fichier image (en png ou jpg).

PS : si vous avez des questions sur ce sujet je vous invite à laisser un commentaire !

App2Market – App Inventor sans TitleBar (barre grise)

Publié le par

Bonjour tout le monde,
Voici un petit tutoriel pour enlever la barre grise qui mangeait de l’espace sur l’écran des applications développées avec AI.

App2Market

Voici l'onglet ou l'on modifie son apk avec AppToMarket Source : Image LP2I

Voici l’onglet ou l’on modifie son apk avec AppToMarket
Source : Image LP2I

Pour pouvoir enlever cette barre grise vous aurez besoin d’un petit logiciel appelé App2Market.
Ce programme a été conçu à la base pour poster plus rapidement des application android sur le market (ancienne version de Play Store).
Pour enlever la barre grise nous n’allons utiliser que la partie du logiciel qui modifie le “AndroidManifest.xml” ou plus familièrement le manifest de notre application.
Le manifest d’une application regroupe plusieurs choses importantes pour l’applications :
– les différentes autorisations a demander à l’utilisateur pour que l’applications y ait accès (accès internet, à l’appareil photo, etc…)
– Le titre de l’applications
– les différents composants pour chaque écran
– autres paramètres pour le stockage, etc…
Ce qui nous intéresse ici c’est la déclaration des différents composants puisque la barre grise est un des composants d’une application AppInventor.
On va donc décompresser notre apk compressé par App Inventor pour editer le manifest.
Puis on va re-compresser l’apk avec le nouveau manifest.
Tout cela est fait par App2Market donc pas de souci si vous n’avez rien compris à ce que j’ai dit plus haut suivez bien ce qui arrive ensuite…

  1. On va tout d’abord télécharger App2Market.
  2. Décompresser l’archive, puis lancez AppToMarket_v32.jar ou runMeWindows_v32.bat (si cela ne fonctionne pas installez Java)
  3. Une fois App2Market lancé allez dans l’onglet “1> Certificate Details” et cliquez sur generate (cette partie doit normalement être remplie avec des vraies données fournies par le Play Store pour créer un certificat de sécurité nous en créons un faux ( puisque c’est les valeurs par défaut) puisque ce n’est pas ce qui nous intéresse ici mais nous en aurons besoin plus tard)
  4. Puis dans l’onglet “2>De/Re complie and warp-up” allez chercher votre application avec “browse”
  5. Ensuite décompilez l’application en appuyant sur le bouton “1> Decompile”
  6. Vous pouvez ensuite éditer le Manifest avec les différents menus en dessous du bouton Decompile (Version, Nom de l’application, résolution, etc…)
  7. pour enlever la barre grise vous devez sélectionner “NoTilteBar” dans le menu deroulant screen.
  8. Une fois tout les paramètres rentrés cliquez sur “2> Update Manifest”, puis sur “3>Create new .apk”
  9. Ce n’est pas fini ! l’application créer ne voudra pas s’installer puisqu’elle n’a pas de signature on va donc lui donner le faux certificat que nous avons créer en cliquant sur “4> Sign”
  10. Puis on va compiler l’apk finale avec le bouton “6>Zip Align the apk”
  11. Vous n’avez plus qu’a récupérer votre apk qui se nomme par default “lenomdevotreapk_new_zipAlign.apk”

Bienvenue sur App Inventor 2 !

Publié le par

Bonjour tout le monde,
Une petite update concernant App Inventor…
En cherchant mieux sur le site du MIT j’ai vu qu’une version Alpha pour App Inventor était sortie : App Inventor 2 !

AI2 – Quoi de neuf ?

Bonnes nouvelles :

– Une interface complète sur navigateur (designer, Block editor)

Voici le nouveau App Inventor ! Ici le designer qui ressemble beaucoup à celui de la beta. Source : Image LP2I

Voici le nouveau App Inventor ! Ici le designer qui ressemble beaucoup à celui de la beta.
Source : Image LP2I

Voici le block editor entierement intégré au navigeur plus besoin de le télécharger !
Source : Image LP2I

-Possibilité de développer son application sans la barre grise avec le companionApp que j’ai transformé (à télécharger sur la page de téléchargement)

Mauvaises nouvelles :

– La résolution est toujours médiocre.
– L’application qui interagie avec App Inventor doit recharger tout les composants de l’application en développement à chaque modification (elle plante si on le fait trop rapidement).
– le code source n’est pas encore disponible donc pas de serveur en local pour l’instant…