Remotely Testing Prototypes on ProtoPie Connect in External Networks

Sanju Lokuhitige Tech Lead & Senior Engineer
Sanju Lokuhitige, Tech Lead & Senior Engineer
May 2, 2023
Remotely Testing Prototypes on ProtoPie Connect in External Networks

Overview

ProtoPie is an incredibly powerful tool for designers and developers, allowing you to prototype real-world scenarios with ease. With ProtoPie Connect, you can seamlessly connect multiple devices, displays, hardware, and APIs, making it an essential tool in the ProtoPie ecosystem.

If you're looking to test your ProtoPie Connect prototypes remotely but are facing a challenge due to local server constraints, we understand your frustration. We want to help you overcome this hurdle!
Although ProtoPie Connect doesn't offer a direct solution for this, we have good news - there's a way to solve this limitation by using the capabilities of ngrok. By leveraging ngrok, you'll be able to test your prototypes remotely in an external network environment. We hope this solution helps you achieve your goals and makes your testing experience much smoother!
Write your awesome label here.

Step-by-Step Guide

01. Getting Set Up — Install ngrok

  1. Register for a ngrok account by visiting ngrok.com and signing up for a free account.
Register for a ngrok account
  1. Download the ngrok binary for your operating system from the downloads page.
Download the ngrok binary for your operating system
By default, the Safari browser on Mac will extract ZIP files you've downloaded — and even discard the original compressed ZIP files. In Safari's Settings → General, uncheck “Open "safe" files after downloading”.
Prevent Safari from Automatically Unzipping Downloaded Files
  1. Unzip the downloaded file into a directory of your choice.
a. For Windows users, you can directly double-click and unzip the .zip file.
b. For Mac users, please follow the steps below.
i. Open Terminal
Open Terminal on your mac
ii. Run the following command to unzip the file:
sudo unzip ~/Downloads/ngrok-v3-stable-darwin-amd64.zip -d /usr/local/bin
It's possible that the file location and name you're working with may differ from the example provided above. Therefore, you'll need to replace "Downloads/ngrok-v3-stable-darwin-amd64.zip" with the actual path to the downloaded ngrok .zip file in order to proceed.
Use the command to unzip the ngrok file
iii. You should now be able to use ngrok on your Mac.
  1. Confirm whether ngrok has been installed successfully.
a. Type ngrok in Terminal. If the following screen appears, it means that the installation was successful.
Confirm whether ngrok has been installed successfully.
b. If this screen does not appear, you can try installing ngrok through Homebrew as an alternative method.
Homebrew's official website
i. In Terminal, run the following command to install. It may take several minutes to complete the installation.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
ii. To confirm if Homebrew has been installed properly, you need to open a new terminal and type brew.
Type brew in Terminal
iii. Use the following command to install ngrok via Homebrew.
brew install ngrok/ngrok/ngrok
Install ngrok via Homebrew
iv. Type ngrok again to check whether the installation was successful.

02. Getting Set Up — Add Authtoken

  1. Navigate to ngrok dashboard. In Your Authtoken tab, copy your Command line.
Find your command line in the ngrok dashboard
  1. Paste your command line into Terminal.
Paste your command line into Terminal.

03. Test Prototypes on a Web Page in an External Network Environment

  1. Open ProtoPie Connect. At the bottom of the window (next to your username), find the port that Connect is running on. In below example, Connect is running on the port 9981.
Find the port that Connect is running on
  1. Go back to Terminal and type ngrok http 9981. The following screen should appear.
Type ngrok http 9981 in terminal
  1. Copy the forwarding address and open it in your browser. The address should be the link comes before the “->”.
Copy the forwarding address
  1. Now, you can open ProtoPie Connect on an external network.
Open ProtoPie Connect on an external network.
  1. Open any Pie file in Connect and click on "Preview" (in this example, we use "simpletest"). You will then obtain the address of the prototype in your browser.
Obtain the address of the prototype in your browser
  1. Copy the content that comes after the losthost:port. In this example we get /pie?pieid=1&name=simpletest
Copy the content that comes after the losthost
  1. Add this right after to your current ngrok forwarding address.
Add this to ngrok forwarding address.
  1. Share this link with stakeholders on an external network, and you will be able to see their clicks on the Connect window once they have accessed the link.
External stakeholders can visit your prototype

04. Test Prototypes on a Mobile Device in an External Network Environment

  1. Download the robotjs bridge app. To run Bridge apps, you should first install Node.js (we recommend installing version 16 or higher.)
  1. Open the downloaded Bridge app in Terminal.
Open the Bridge app in Terminal.
  1. Type npm install to install the bridge app.
Type npm install to install.
  1. Type npm start to run the bridge app.
Type npm run to run the bridge app.
  1. Open any file in Connect (in the video example, "Trackpad" is used) and once it is open on the web page, copy the part of the IP address that comes after it.
Copy the part of the IP address that comes after it
  1. Paste the copied part after the address of ngrok.
Paste the copied part after the address of ngrok.
  1. Then you will be able to open the Pie file on your mobile device.
Open the Pie file on your mobile device

Conclusion

In conclusion, if you're facing challenges with remote testing of your ProtoPie prototypes due to local server constraints, you don't have to worry. While ProtoPie Connect doesn't provide a direct solution, you can still leverage the power of ngrok to enable external stakeholders to access and test your prototypes remotely. By creating a secure tunnel to your local server, ngrok allows you to save time and resources while making the testing process more efficient and streamlined. So, if you're a ProtoPie user looking to streamline your remote testing process, give ngrok a try and see how it can help you overcome local server constraints and test your prototypes remotely with ease.

If you're interested in learning more about how to use ProtoPie Connect and ngrok to streamline your remote testing process, be sure to get in touch with our ProtoPie Connect specialists for further guidance and support.