Your SlideShare is downloading. ×
  • Like
Mise en place de l'environnement du travail
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mise en place de l'environnement du travail

  • 147 views
Published

Premier tutoriel web mobile pour la Mise en place de l'environnement du travail. Ce travail a été fait par Mohamed Taher Zwawa, chef atelier web mobile de l'insat android club pendant l'année …

Premier tutoriel web mobile pour la Mise en place de l'environnement du travail. Ce travail a été fait par Mohamed Taher Zwawa, chef atelier web mobile de l'insat android club pendant l'année 2011-2012

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
147
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. INSAT ANDROID CLUB Atelier WebMobile Tutoriel N°1 Mise en place de l’environnement du travail Préparé par : Med Tahar Zwawa Le 11 Octobre 2011 Sommaire I- Installation des outils……1 II- Configuration.…….……3 INSAT ANDROID CLUB Atelier WebMobile Tutoriel N°1 Mise en place de l’environnement du travail Préparé par : Med Tahar Zwawa Le 11 Octobre 2011 Sommaire I- Installation des outils……1 II- Configuration.…….……3 INSAT ANDROID CLUB Atelier WebMobile Tutoriel N°1 Mise en place de l’environnement du travail Préparé par : Med Tahar Zwawa Le 11 Octobre 2011 Sommaire I- Installation des outils……1 II- Configuration.…….……3
  • 2. INSAT ANDROID CLUB >> ATELIER WEBMOBILE >> TUTO N°1 1 I.Installation des outils : Ci-dessous vous trouverez les outils nécessaires pour notre travail. Concernant le système d’exploitation, nous utiliserons Windows. a.Navigateur : Dans le cadre de notre atelier, nous avons besoin d’un navigateur basé sur WebKit pour tester nos applications web mobile sur le pc, donc nous avons le choix d’installer soit Chrome ou Safari. b.Serveur web : Comme serveur web, nous choisissons XAMPP. Une fois téléchargé, exécutez le programme d’installation en utilisant les valeurs par défaut. Après l’installation, vous pouvez : - Créer vos projets sous le répertoire C:xampphtdocs - ouvrir le panneau de contrôle XAMPP pour démarrer Apache. Mise en place de l’environnement du travail Salut, bienvenue parmi nous dans IAC, c’est le premier tutoriel de l’atelier WebMobile où nous allons détailler les étapes à suivre pour mettre en place l’environnement du travail. Télécharger Chrome Télécharger Safari Télécharger XAMPP
  • 3. INSAT ANDROID CLUB >> ATELIER WEBMOBILE >> TUTO N°1 2 Maintenant, dans chrome ou safari, vous pouvez naviguer vers votre projet nom_projet (que vous avez mis sous C:xampphtdocs). c. IDE : Pour faciliter la tâche du développement, on conseille d’utiliser un IDE comme NetBeans ou Eclipse. http://localhost/nom_projet/ Télécharger NetBeans PHP Télécharger Eclipse PDT INSAT ANDROID CLUB >> ATELIER WEBMOBILE >> TUTO N°1 2 Maintenant, dans chrome ou safari, vous pouvez naviguer vers votre projet nom_projet (que vous avez mis sous C:xampphtdocs). c. IDE : Pour faciliter la tâche du développement, on conseille d’utiliser un IDE comme NetBeans ou Eclipse. http://localhost/nom_projet/ Télécharger NetBeans PHP Télécharger Eclipse PDT INSAT ANDROID CLUB >> ATELIER WEBMOBILE >> TUTO N°1 2 Maintenant, dans chrome ou safari, vous pouvez naviguer vers votre projet nom_projet (que vous avez mis sous C:xampphtdocs). c. IDE : Pour faciliter la tâche du développement, on conseille d’utiliser un IDE comme NetBeans ou Eclipse. http://localhost/nom_projet/ Télécharger NetBeans PHP Télécharger Eclipse PDT
  • 4. INSAT ANDROID CLUB >> ATELIER WEBMOBILE >> TUTO N°1 3 II. Configuration : Réellement, on n’a pas beaucoup de configuration à faire sauf dans le cas où nous voulons tester une application web sur un vrai Smartphone. Pour cela, vous êtes invités à suivre ces étapes : 1- Rejoindre le même réseau wifi que votre pc avec le Smartphone, 2- Désactiver le pare-feu (en cas d’activation) pour ne pas bloquer l’accès à votre serveur web, 3- Lancer la commande ipconfig sur votre pc pour obtenir l’IP, exemple : 192.168.1.2 4- Accéder au serveur depuis le Smartphone à travers cette adresse : Vous pouvez voir une erreur de sécurité comme ceci : 5- Ouvrir le fichier httpd-xampp.conf située dans C:xamppapacheconfextra, au bas de ce fichier, vous trouvez : http://192.168.1.2/nom_projet/ <LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server- status|server-info))"> Order deny,allow Deny from all Allow from 127.0.0.0/8 ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var </LocationMatch>
  • 5. INSAT ANDROID CLUB >> ATELIER WEBMOBILE >> TUTO N°1 4 6- éditer le code précédent 7- Redémarrer Apache à l’aide du panneau du contrôle XAMPP et en rafraîchissant la page sur le navigateur du Smartphone, vous retrouverez votre projet  NB : Pour tester votre projet nom_projet sur un émulateur Android, il suffit de remplacer localhost (dans un pc) ou l’ip du pc (dans un Smartphone) par l’adresse 10.0.2.2 et naviguer vers ce lien : Espérons que vous avez apprécié ce travail. Dans le prochain tutoriel, nous allons entamer le développement web mobile avec un peux plus de détails et d’astuces. <LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server- status|server-info))"> Order deny,allow Deny from all Allow from all ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var </LocationMatch> http://10.0.2.2/nom_projet