Results 1 to 1 of 1

Thread: Local Server Mobile Prototype Viewing: Part 1 - WAMP on Windows

  1. #1
    Sifu
    Join Date
    Dec 2011
    Location
    Chicago, IL
    Posts
    650
    Thanks
    91
    Thanked 129 Times in 109 Posts


    My Twitter My LinkedIn

    Lightbulb Local Server Mobile Prototype Viewing: Part 1 - WAMP on Windows

    Hello All,

    Lately I have been experimenting with delivering prototypes to mobile devices via local-to-computer installations of web servers, and I wanted to share with you my findings so far.

    DISCLAIMER:
    There may be additional steps you need to take depending on your network setup, local computer security setup, and existing corporate user policies if any. Firewalls, router rules, and others may prevent you from using this approach. Do your research and obtain the appropriate IT permissions!

    Part 1 - WAMP for Windows (WampServer, the web development platform on Windows - Apache, MySQL, PHP)

    What It Can Do:
    Allows you to load mobile prototypes from a Windows machine to a mobile device

    Price:
    Free to use under GPL License

    Platform:
    receiving mobile devices (ideally any), serving devices (Windows-based computers and laptops)

    Potential Benefits:
    1. Saves time by not having to reload the prototype to a 3rd party service such as AxShare or Dropbox every time a change is made to the prototype.
    2. The user has control of proprietary prototype information.
    3. Great for demoing to clients in internal meetings.

    Limitations:
    1. See some sources of technical limitations as outlined in the DISCLAIMER above
    2. Have not yet tested if this works for an Ad-Hoc WiFi setup.

    Setup Instructions:
    1. Download and install WAMP: WampServer, the web development platform on Windows - Apache, MySQL, PHP. Make sure you grab the appropriate package for your system, 32-bit or 64-bit.
    2. In C:/wamp/www, the publically viewable folder for WAMP, create separate folders for each prototype project e.g., project1, project2, etc.
    3. When generating the mobile prototype (with the correct viewport settings), in the left-hand sitemap pane point to the appropriate path e.g., C:/wamp/www/project1/.
    4. Start WAMP.
    5. Left click WAMP icon, go to Apache -> http.conf and verify if 'Listen 80' line in text file reflects port 80. 6. Press Win Logo + R and type cmd
    6. Type ipconfig and search for the IP address of your WiFi connection, let's say 10.0.0.10.
    7. Verify that both mobile device and computer are on same WiFi network.
    8. On the mobile device, type 10.0.0.10:80/project1/index.html to view the prototype (substitute your data in).

    Tips:
    1. Green icon in the task bar means that the server is "online". You can test the connection locally by using "localhost:80/project1/index.html" or "127.0.0.1:80/project1/index.html" (replace with your data). If the icon is anything but green, left click and choose Put Online or Start/Stop All Services.
    2. You can consult the Apache error and access logs for troubleshooting purposes. It helps identify if inbound connections even make it to the machine.
    3. Verify if no other service is running on the same port as the Apache Web Server. Using the same command, cmd, type netstat -o -n -a | findstr 0.0:80. This will show you a list of services and their PIDs using port 80. Then use CTRL + SHIFT + ESC to start the Windows Task Manager and go to Processes to cross reference which applications the PIDs refer to.

    I hope you find this first part of the 2-part series informative. Feel free to contribute your own tips and tricks if you have used this approach in the past.

    Feel free to check out Part 2 - MAMP on Mac: http://www.axure.com/forum/mobile-pr...html#post24721

    light_forger
    Last edited by light_forger; 07-16-2013 at 07:18 AM.
    Svetlin Denkov
    User Experience Professional
    Twitter: @svetlindenkov LinkedIn: http://linkd.in/JbZDre
    Meetup: http://bit.ly/1qITjzK

  2. The Following User Says Thank You to light_forger For This Useful Post:

    Paul (07-15-2013)

Similar Threads

  1. Replies: 20
    Last Post: 03-21-2014, 06:21 AM
  2. Prototype to Mobile Device Using WAMP
    By light_forger in forum Mobile Prototyping
    Replies: 5
    Last Post: 07-11-2013, 10:13 AM
  3. Replies: 5
    Last Post: 10-16-2012, 01:03 PM
  4. Viewing a mobile prototype in a desktop browser
    By jimunwin in forum 6.x Newbie Questions
    Replies: 2
    Last Post: 08-03-2012, 10:28 AM

Search Engine Optimization by vBSEO 3.6.0 PL2