This post demonstrates how you can connect different hardware with logic to create good vibes🎵
We have a proximity sensor that speaks Zigbee. It is a “boolean” with the statuses of Open or Closed.
The proximity sensor is then connected to a Raspberry PI that is running software to interpret the signals sent from the proximity sensor.
The raspberry pi is then connected to the Sonos, and each proximity sensor distributed around the area will have its own songs playing when you trigger them.
Based on the excelent suggestions from the Judges, we have: Wierd Al Yankovic, Motorhead and Less than Jake👏🎵😂
The challenge was a to create pages with Power Pages that could display data from Dataverse, and work in offline mode. We won with the most unlikely “blast from the past”; jQuery.
The good: Power Pages. To start with, we set up some pages with Power pages, that would display information about pirates, captains, and ships.
If the user selects a captain, they would see information for the given captain, which is information stored in a table in Dataverse.
So far so good, the next step is to make it available in offline mode.
It gets worse: Progressive web application.
To make your Power pages available in offline mode, one must first set up your progressive web application. To do so, follow this helpful guide on the Microsoft learning portal: https://learn.microsoft.com/en-us/power-pages/configure/build-progressive-web-apps. You basically just enable it in the “Set up”-portal and define which pages you want to make available in offline mode.
The problem is; even though your Power pages are available offline, your data from Dataverse is not. So how do we solve that?
Oh Lord have mercy: jQuery to the rescue.
To capture the Retro badge, we went back in time to when jQuery ruled the web. And since we can append javascript to Power pages, we already had jQuery embedded on the pirate information page. So why not solve the head-to-head challenge in the worst possible tool for the job; jQuery and localstorage!
We embed the following snippet on the profile page:
We embed the following snippet on the offline page:
Then, we add the following HTML on the offline page:
For the next part we head into uncharted waters and lose our precious internet connection. But fear not, with the power of jQuery, we have made Dataverse data available in localstorage.
Pirates and singers are alike. They need a great stage name for people to remember who they are. When a new pirate arrives at the harbor master looking for work, the first thing they need to do is find a good name.
Just imagine what EMINEM would be if his artist name was Marshall Bruce Mathers III !!
The Harbor Master enters the new pirate to the system, and lets the AI tool decide what type of name suits the new pirate the best.
On the save, a Power Automate fires off a querry to OpenAI via a custom connector with the querry “Give me a pirate name for *Full Name*”. The return is then entered on the contact card.
10 years ago, the year is 2013. Barack Obama is president, Donald Trump is a reality TV star, no one has heard about Covid-19 or Microsoft 365, and jQuery 1.10.0 gets released to much fanfare! With so many improvements from the previous versions, this is clearly the future of web development and leaves heads spinning in excitement everywhere.
Speaking of spinning heads…
This little easter egg brings us back to a simpler time when we were allowed to enjoy the little things in web development.
We have used the oldest (and stable) jQuery version available from Microsoft’s Ajax CDN (jQuery 1.10.0), and embedded it to the Power Page HTMLpage.
A super simple function adds a class to div containing the profile picture on click, and CSS makes the image spin. Just like our heads.
During the last 24 hours, we have all learned to love the magic of Power Pages.
But with some custom CSS and a webpage instead of a modal window, we can change the dour and uninspiring look from the standard out of the box “I work in corporate accounting”-look.
Change from a modal window:
To a nice, classical scorecard for all our important pirate skills, just like the ones we got from school back in the 80s
The dread pirate Gaute is good at sailing but sucks at fighting.
As for displaying the form values as columns, if it is stupid but it works…
The harbor master is a social character needing to speak to as many pirates as possible and in general handle most day-to-day issues at the dock. This means that he is not always in front of his computer and is capable of receiving information on what is happening with the voyages.
Ship ready to leave
When the captain has received his crew from the harbor master and the voyage is ready to leave, the captain closes the voyage and the speakers in the harbor sound out a sweet farewell on the SONOS 🎵Reidar reiser snart🎵.
As part of our solution we are developing a Teams App for staffing raids, which uses an Azure Function App to get dataverse data. The toolchain setup for doing this consists of Visual Studio Code, Azure Devops Pipelines and Azure Services.
To speed up our delivery we have implemented a CI/CD pipeline that deploys the infrastructure and backend code to an Azure Function App. The process works like this
We develop a new feature with Visual Studio Code
We push the feature to the main branch
The Azure pipeline is triggered and executes two stages
Build stage
The .NET code is built as a deployable zip
Dev stage
Then infrastructure is deployed with Azure Bicep
The zip is deployed to the newly created Azure Function App
We have modularized the stage jobs in templates, so we only need 9 lines of code to add another environment to our application.
To deploy our infrastructure with Bicep we use a Devops Service Connection to authorize operations with the Azure CLI.
Take a look at line 49 – here we read the output variables from the Bicep deployment in order to retrieve the name of the function app. We later retrieve and use this Devops pipeline variable in the job that deploys the code to the Azure Function App.
The infrastructure is defined in the .bicep file above which also utilizes other Bicep modules. In order to avoid explicitly including secrets we feed it from a Azure Key Vault. A link to the Key Vault Secret is passed to the Azure az group create command in a json file.
We deploy a frontend-app as well. The build is made and artifacts are created for the spfx-app and for the teams-manifest. We then have a release pipelines that utilize npm and m365 cli for deploying the app to the sharepoint app catalog and to Teams. The scripts are written with powershell.
For now it only displays basic pirate data from Dataverse
UI is very important for end-user experience. It can give the users positive feedback when doing something good, and therefore give them a feeling of accomplishment. What about taking it to the next level, and providing audio elements as well when you complete a cool task/raid etc.
This is why we have teamed together with many of the ACDC pirates to bring happy vibes to the community. We have a Raspberry Pi that we have connected to the internet and our SONOS speaker. We are providing all of the teams a unique webhook that they can call whenever they want, and the song of their choice will play:)
We will be offering this service to all teams, so they can have some fun with sound when the do someting.
First, we downloaded a clip from youtube and extracted the .mp3 file
Edited the mp3 file to a short sequence
Uploaded the file to the Raspberry PI
Created a Webhook in Raspberry PI that is unique for AXData that plays Jack Sparrow
Since the beginning of the 17th century, pirates have been terrorizing the seas, pillaging their way around the world. Ships outlive the crew, and captains are forged through raids and adventures on the high seas.
Arrr matey! Ye heard it right, ye scallywags. The days of free-spirited pirating are over! No longer can ye just set sail and hope for the best, searching for a crew as ye go. Nay, now ye need a proper harbor master.
Why, ye may ask? Well, it turns out that finding a crew for a raid these days is harder than finding a needle in a haystack. Or a parrot in a pet shop. Or a pirate with a full set of teeth. Ye get the idea.
So, the pirate ships have come together and decided to appoint a harbor master. This lucky (or unlucky, depending on how ye look at it) soul will be in charge of finding the best of the best, the crème de la crème of pirate crew members. And let’s be honest, with the current job market, it’s not like there’s a shortage of unemployed sailors.
The harbor master will be the one responsible for vetting applicants, making sure they have all their limbs, and that they can swab the deck without falling overboard. A tough job, but someone’s gotta do it.
So, if ye be a pirate in need of a crew, or if ye know a pirate in need of a crew, head on down to the harbor. The harbor master will be waiting, with a bottle of rum in one hand and a list of requirements in the other.
The idea
Every ship has a captain
Every captain has first-hand information about a secret treasure hidden somewhere. The captain decides to schedule a raid/voyage for his ship with a great treasure awaiting💎
To find a crew, the captain has to speak to the local harbor master.
The harbor master begins the process of locating available crew to meet the criteria of the raid/voyage. As a harbor master, he has local information about the best of the best.
The crew gets selected based on skill/availability
The captain signs off on the crew, and the raid can begin!
Technology
We will be combining Dataverse, Power Pages, Teams Apps, PCF, SPFX, azure functions etc, etc to spread the technology stack. In a real-world scenario we might limit ourselves to fewer apps, but where is the fun in that?:)
