Remotely Testing Prototypes on ProtoPie Connect in External Networks
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.
01. Getting Set Up — Install ngrok
- Register for a ngrok account by visiting ngrok.com and signing up for a free account.
- Download the ngrok binary for your operating system from the downloads page.
- Unzip the downloaded file into a directory of your choice.
- Confirm whether ngrok has been installed successfully.
02. Getting Set Up — Add Authtoken
- Navigate to ngrok dashboard. In Your Authtoken tab, copy your Command line.
- Paste your command line into Terminal.
03. Test Prototypes on a Web Page in an External Network Environment
- 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 .
- Go back to Terminal and type . The following screen should appear.
- Copy the forwarding address and open it in your browser. The address should be the link comes before the “->”.
- Now, you can open ProtoPie Connect on an external network.
- 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.
- Copy the content that comes after the . In this example we get
- Add this right after to your current ngrok forwarding address.
- 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.
04. Test Prototypes on a Mobile Device in an External Network Environment
- Open the downloaded Bridge app in Terminal.
- Type to install the bridge app.
- Type to run the bridge app.
- 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.
- Paste the copied part after the address of ngrok.
- Then you will be able to open the Pie file on your mobile device.
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.