Team HackReddy
Tags: mulesofthackathon, mulesoft, twilio, solace
Published: 2020-10-27 18:27:43



Mulesoft Haikuthon
Every day, API day
Get Reddy, Set Go

I remember the days when I was a child and I used to take paper numbers and watch a red LED light uptick while waiting for my number to come up.  I'd secretly hope that my fellow patrons would succumb to their thoughts and abandon their paper ticket spot in line.  There were no cell phones back then; you could only people watch or go over the various things in your sight cyclically until you are finally able to do what you came to do.

I know, you're wondering if the semicolon is right in that last sentence… me too.

The next thing I can remember was someone greeting me with a tablet, asking me what I was there for and then seeing my name pop up on a screen in a table of many.  This was a game changer because waiting in a line that snakes around or worse many lines in parallel, where you wonder if you chose the right one as Sally in front of you does that one thing that takes forever.

Fast forward to something to the App Economy where every single store has an App and Push notifications and Deals on Guac and French Fries… your hair is long from the shutdown, but now you can get a virtual place in line and show up to get a mediocre haircut without waiting.  You can go to the mall and sample Bath and Body Works smells until you get notified that your time to look into the mirror and question your decision to be at the mall for a hair cut and further whether or not that snip was the right one to get you to look like that virtual persona in your head.

Now, let's talk about this year called 2()2().  I write it leetly because it's mere mention speaks to bad JuJu and Team Hack Reddy wants a Dub.  (This is slang for saying that I replaced the zeroes with parentheses because writing it out would be bad luck and the team wants to win) In this year, the notion of a line has been magnified 6X, or 3X if we're counting the guy that was behind me, smoking a cigarette, not wearing a max at the DMV.

If you've been to a bank or credit union this year, you've seen what would appear to be opening night at The Apple Store after Tim Cook gave a presentation in a black t-shirt 2 months ago unveiling a mini rounded corner device that you MUST HAVE.  It's November now and the temperatures have fallen and in the Bay Area there is this funny thing called rain falling from the sky that hasn't shown it's beautiful grace in 7 months.  

These poor people!  I mean we need the rain but standing in line in the cold rain in November is not my cup of tea.  However, it is completely necessary for Muledred who doesn’t like taking images of checks and then not trusting that she'll get the $8.55 from the book club breakfast check split.  

Team HackReddy was called to the scene to solve this most difficult problem:  Keep Muledred dry and happy, and make sure she doesn't miss her place in line while she plays scrabble on her phone. 

Now we are wondering about the colon, right? 

The Team brainstorms and comes up with User Experience Flows and User Stories.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ux2tj6q0zgpot8dn7y0c.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/je1ugic62n6nfsk9bwy8.png)

Then, they came up with the design.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4wf7u2j8mzhmvmyfbiel.png)

The Member could send a text to Twilio which would then send a message to a Mulesoft Webhook that create a Solace Topic that would put the Member into a Solace Queue.  A Mulesoft Twilio API subscribed to the Solace Topic would send a text back to the Member letting them know where they are in line and that they could play Jeopareddy while waiting via text.

The Member could also go to a website to check in and get  number that way.  They can then monitor the queue with the app or get alerts by text as to when they can brave the cold rain and check in.

We would also need a check-in and remove from queue microapp for members that neither texted or went to the website.  This same app would check people in when their number was up and they were served.

React opening / onboarding screen:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pebuf488mj5v1z4y6xd2.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o05azrrhruenptg7oh3c.png)	
	
React waiting list page, polls every 10 seconds:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/822tslungp2ej6bks1l7.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kugunvh08j2dt6ld4ddr.png)
	
React Game Page:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2hb3nrizxu96xq508adk.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/54eoa3hbitx4b3gblut4.png)

Mulesoft Trivia Game Flow: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/77vxgdy3i1dauyxq338o.png)

External Messaging Flow: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jel810qas12r5lm6j31y.png)

Incoming SMS Flow:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hh8gwjco6p1de08wb5pq.png)

Messaging Callback Flow:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k97r88tha8yqy3fs70dw.png)

Solace System Checkin Service:<image will go here/>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p628ivsojvds3i3mjslx.jpg)

React Check-in App (Tablet): 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sau8sh3teyc6u0iic3ms.png)

Solace Event Queue:
Taxonomy: redwood/{desc}/{method}/{branch-id}/{action}
Examples: redwood/check-in/text/21/enable
	     redwood/check-in/web/23/enable
{desc} will always be ‘check-in’ as this is how we distinguish our app from other Solace events.

Queue: redwood/check-in queue listens on the topic redwood/check-in/> to get all events related to check-in. 

Mulesoft service is the only method to pull out of the queue, and can be the only listener on the queue, so other apps interested in changes to the queue will need to listen on the topics below. Look to the description to get the result desired.

Topics:
Subscription	Description
redwood/check-in/>	Gets all events 
redwood/check-in/*/*/enable 	Wildcards: Gets all enable or disable events from all branches
redwood/check-in/*/*/disable
redwood/check-in/text/*/enable	Method: Gets all text or web or 1mv initiated additions to the queue from all branches.
redwood/check-in/web/*/enable
redwood/check-in/*/21/enable	Branch: Gets all new additions to the queue for a specific branch (21 in this case) regardless of entry method

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/to8vv28ej35dqtsbrwkk.jpg)

Reference

Mule application source code: 
https://github.com/kenkondo/VirtualTicketQueue
*Note: we did not include the Twilio External Messaging flow as that was an existing service.  All others are new.

Team HackReddy
Astro Ken
Cloudy Jeff
Einstein Sean
Codey Adrian
Bot Jake
Appy Tanner
Hootie Rio
Blaze Dean
Trailhead John
	
This Hack is dedicated to Alex Trebek, may he rest in peace…