The release of ProtoPie version 7.6, their high-fidelity, highly realistic interactive prototyping tool, has brought a range of new features that include QR code scanning and new text functions, namely regexextract, regexreplace and parseJson.
If you want to see how I created a simple mock database and use the regextract and parseJson functions to create a simple yet dynamic login feature within ProtoPie then read on.
I have experimented previously with ProtoPie Studio to create a mock database using the text variables that were available to us and then used the functions indexOf, right, and left to get my data.
I created a variable dbUsers and gave it the following data structure:
{id:1,username:john,password:abc,role:2},{id:2….To see if there was a valid username within the variable, I used:
indexOf(dbUsers,",username:" + lowerCase(`UsernameInput`.text) + ",")Then using pretty long functions, one of which is below, shortened for my sanity and brevity, I wrestled with the data from within
left(right(right(dbUsers, length(dbUsers) - indexOf(dbUsers,",user:" + `UsernameInput`.text + ",")),length(right(dbUsers, length(dbUsers) - indexOf(dbUsers,",user:" + `UsernameInput`.text + ","))) -indexOf(right(dbUsers, length(dbUsers) - indexOf(dbUsers,",user:" + `UsernameInput`.text + ",")),`UsernameInput`.text + ",password:") - length(`UsernameInput`.text + ",password:")), ..... length(right(dbUsers, length(dbUsers) - indexOf(dbUsers,",user:" + `UsernameInput`.text + ","))) -indexOf(right(dbUsers, length(dbUsers) - indexOf(dbUsers,",user:" + `UsernameInput`.text + ",")),`UsernameInput`.text + ",password:") - length(`UsernameInput`.text + ",password:")),",role:"))))Of course, this certainly wasn’t a good, or easy way to get the data that I needed especially if I needed to add additional data inside each string, such as First name, Last name or Telephone number for example. I’m sure that I could have made things easier for myself if I persevered and added variables to make things easier to read, but this certainly wasn’t easy to extend. For most needs, it was just easier to add hard-coded user verification conditions directly in a tap trigger.
Having another go…
Step forward to the release of v7.6 and the introduction of regexextract and parseJson. A comment for something very vaguely similar was also made on the ProtoPioneers Community. I decided to give the mock database a try again and this is the result: https://cloud.protopie.io/p/9114358071e731dc74817697. You can download the prototype to see how it works.
I created a very similar database variable string (mockAdminDB) as before, that looks similar to a JSON array:
{"id":1,"username":"john@johnredhead.com","password":"password","firstname":"John","lastname":"Redhead","role":"Admin"},
{"id":2,"username":"paige","password":"password","firstname":"Paige","lastname":"Turner","role":"User"},
{"id":3…What is it that we want to achieve?
When the user types in the username and password and presses ‘Sign In’ I need to extract the portion of the JSON string that is relevant if they’ve entered a valid username, which also must be unique. To get to that point I use jsonextract using:
regexextract(mockAdminDB,"\{[^\}]*username[^\}]*" + `UsernameInput`.text + "[^\}]*\}")This regular expression gets each opening brace and then gets each character until it reaches the term ‘username’. It then continues until it finds the input text. At this point, if the usernames are unique then the first part of a JSON snippet will be recognised. The regular expression continues to get each character until it gets to the next closing brace and finally includes the closing brace.
We could still error!
I had incidentally tried to use *username\”:\” as part of the selection, but that seems to error for me in ProtoPie. So, realising that my actual implementation could still result in a selection for any string that has the value within any additional key, value pairs, it may be better to place your username at the end of the JSON snippet. In doing this, there are no other values that could validate within the snippet. A quick, dirty workaround, but this is a prototype after all.
For example, if I’d have had entered the name Ben in the input box and that was a valid username, it would also validate for the following snippet on bothe the username and lastname, which is not what we want.
{"id":2,"username":"mrben","password":"password","firstname":"Mr","lastname":"Benn","role":"Adventurer"},Checking for Login
When the JSON string snippet has been extracted it is put into a variable called jsonExtract. And we use a detect trigger to populate the variables username and password using:
username: lowerCase(parseJson(jsonExtract,"username"))password: lowerCase(parseJson(jsonExtract,"password"))A message (LOGINCHECK) is sent to the scene, which is then received in the same scene.
If the parsed password does not match the input password then we clear the variables ‘jsonExtract‘, ‘username‘ and ‘password‘. However, if the parsed password does match the input password then the variables ‘firstname’, ‘lastname’ and ‘role’ are populated, along with the variable ‘loggedIn’ being set to 1. Setting ‘loggedIn’ fires a detect trigger which determines the role of the user and sends them to the appropriate scene.
If you’re going to tackle a project like this then take a look at my 12 great pro tips for working smarter in ProtoPie to help you keep your pie organised.
I hope that this brief overview helps you to understand some of the fantastic possibilities that can be achieved using these new functions in ProtoPie.
