Remotely Testing Prototypes on ProtoPie Connect in External Networks
Sanju Lokuhitige, Tech Lead & Senior Engineer
May 2, 2023
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
- 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.
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”.
- 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
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.
iii. You should now be able to use ngrok on your Mac.
- Confirm whether ngrok has been installed successfully.
a. Type ngrok in Terminal. If the following screen appears, it means that the installation was successful.
b. If this screen does not appear, you can try installing ngrok through Homebrew as an alternative method.
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.
iii. Use the following command to install ngrok via Homebrew.
brew install ngrok/ngrok/ngrok
iv. Type ngrok again to check whether the installation was successful.
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 9981.
- Go back to Terminal and type ngrok http 9981. 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 losthost:port. In this example we get /pie?pieid=1&name=simpletest
- 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
- Download the robotjs bridge app. To run Bridge apps, you should first install Node.js (we recommend installing version 16 or higher.)
- Open the downloaded Bridge app in Terminal.
- Type npm install to install the bridge app.
- Type npm start 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.
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.
© 2023 Studio XID. All rights reserved.