mise en place de l'environnement du travail
Post on 24-Jun-2015
194 Views
Preview:
DESCRIPTION
TRANSCRIPT
INSAT ANDROIDCLUB
Atelier WebMobile
Tutoriel N°1Mise en place
de l’environnement du travail
Préparé par : Med Tahar ZwawaLe 11 Octobre 2011
Sommaire
I- Installation des outils……1II- Configuration.…….……3
INSAT ANDROIDCLUB
Atelier WebMobile
Tutoriel N°1Mise en place
de l’environnement du travail
Préparé par : Med Tahar ZwawaLe 11 Octobre 2011
Sommaire
I- Installation des outils……1II- Configuration.…….……3
INSAT ANDROIDCLUB
Atelier WebMobile
Tutoriel N°1Mise en place
de l’environnement du travail
Préparé par : Med Tahar ZwawaLe 11 Octobre 2011
Sommaire
I- Installation des outils……1II- Configuration.…….……3
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èmed’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 nousavons 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:\xampp\htdocs- 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
INSAT ANDROID CLUB >> ATELIER WEBMOBILE >> TUTO N°1
2
Maintenant, dans chrome ou safari, vous pouvez naviguer vers votre projet nom_projet (que vousavez mis sous C:\xampp\htdocs).
c. IDE :
Pour faciliter la tâche du développement, on conseille d’utiliser un IDEcomme 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 vousavez mis sous C:\xampp\htdocs).
c. IDE :
Pour faciliter la tâche du développement, on conseille d’utiliser un IDEcomme 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 vousavez mis sous C:\xampp\htdocs).
c. IDE :
Pour faciliter la tâche du développement, on conseille d’utiliser un IDEcomme 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
3
II. Configuration :Réellement, on n’a pas beaucoup de configuration à faire sauf dans le cas où nous voulons testerune 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.24- 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:\xampp\apache\conf\extra, au bas de cefichier, vous trouvez :
http://192.168.1.2/nom_projet/
<LocationMatch"^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
Order deny,allowDeny from allAllow from 127.0.0.0/8ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var
</LocationMatch>
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 pagesur 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,allowDeny from allAllow from allErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var
</LocationMatch>
http://10.0.2.2/nom_projet
top related