Saturday, March 15, 2014

Connect real device to localhost using Xampp

Hi friends,
This has been one big problem when I try to test an Android application in real device with connecting to localhost web service. I have try many instructions online and finally find some that work for me. So I hope you will success with at least one.

My environment:
- Windows 8.1.
- Xampp v3.
- A Motorola Android 2.3 Phone.

Our goal is to connect the Android phone to local web server created by Xampp through wifi. So the first step is trying to load a local website from PC (Personal Computer, Laptop, or any computer that have Wifi) to your Android phone.



Method 1: If you're lucky enough.

1. Connect both your PC and your phone to a same wifi hotspot.
2. On your PC:
- Open cmd (Command Line) of Windows and check your PC's IP by the command 'ipconfig'. For example your PC's IP is 192.168.11.134.
- By Xampp, start your Apache server. Then check from any web browser to make sure server running (http://localhost/xampp will have the default page of Xampp.)
3. On your phone:
- Open a browser (DONOT use Opera, because they have special technique that load all website from their server). Type the address is your PC's IP: http://192.168.11.134 then go.
- If you lucky enough, the default page of Xampp will appear. It means your Android Phone has successfully connected to your localhost and ready for any web service call.

A Java code in Android source code: ^^
url = "http://192.168.11.134:80/quest/getName";
JSONObject jsonObject = getJSONPost(url, nameValuePair);

But many time I cannot connect with this method, then I have

Method 2:  Use name-based virtual hosting.

It quite similar to method 1, but you will create a name-based virtual host by Xampp (very simple).
In step 2, on your PC:
- Open config file of Xampp: Yoursystempath\xampp\apache\conf\extra\httpd-vhosts.conf
Read the comments here help you understand some about VirtualHost.
- Now, let just create a virtual host direct to your web service by adding this to the file:

<VirtualHost *:80>
    DocumentRoot "E:\Web\xampp\htdocs\your-web-service-folder"
    ServerName my-ws.me    # just the name, you can name it any you like
    ServerAlias www.my-ws.me # like above ^^
</VirtualHost>

Now save it and restart your Apache in Xampp control panel.

- Check your PC's IP and try again on your phone. It's it connected, web page will show the page of your "your-web-service-folder". Cool, right? :)

But life is not dream. Some time it does not work. Then I have to try:

Method 3: Connectify Hotspot.

Basically, you don't use a wifi hotspot any more, but use Connectify to make your PC become the hotspot itself, so that your phone can connect directly to your PC.
- You can download and install (free) Connectify here.
- It's very easy to use. Let you turn it on, create a Connectify hotspot and connect your Android phone to that hotspot.
Connectify will set your PC an IP (usually is 192.168.202.1. You can check it by cmd -> ipconfig like above).
- Now, on your phone, try the IP address: http://192.168.202.1 and the web page should appear.

Some note that may help you when debug:
- Cannot use Opera mobile web browser.
- Try to Stop/Start again Xampp.
- Check the port of you Apache server. Usually is 80. But if it's different, eg 234. So your request should be http://192.168.202.1:234/
- Connect/Reconnect wifi.
- Or even restart you computer.
- Firewall not affect here, but if you cannot connect anyway, why not try turn off your firewall.
- If you connect to a common wifi hotspot, try to enable the sharing option (in Control Panel\All Control Panel Items\Network and Sharing Center\Advanced sharing settings). Or when PC connect to the hotspot, set it to "Private Network".
- Or at the end of day, try another way. :D

Hope you will make it.

If you meet any problem, let comment here so we can discuss more, I will try to help if possible.

3 comments:

  1. hey i can't be able to access it
    .
    .
    there is an android app named as xender (used to send file to another device through wi-fi hotspot) in this we can share xender by connecting 2 device with each other and by typing ip address with port no. and a webpage will open ........how it can be possible

    ReplyDelete
  2. Thanks a lot method 1 work for me...

    ReplyDelete