Deep down in the pipes

ACDC Craftsman – Secure code and deployment

When connecting to as many services as we do (humblebrag), it’s extremely important to keep keys and access credentials secret. There are bots and such that continuously scan GitHub, picking up anything that resembles access keys or connection strings. Therefore, we have set up dependency injection in our Azure Function App, and we keep all our important keys in local.settings.json. These settings are loaded into program.cs and added to the function app via the Config class. This makes them easily accessible in all the files we need. We set the same settings in Azure, it just works!

Using Github Actions to deploy our React app to Azure with built-in es-lint and verification ensures us that only functional code is published to azure.

Git strategy

Using branches, commit messages, pull requests, static code analysis we are cruising through the waves with our git strategy. Keeping everyone on the team informed on our progress and the way forward.

HIP to the STER

Our dazzling frontend application is implemented with the coolest of the coolest technologies. React allows us to run our application seamlessly in the client’s browser. In addition to our static code analysis pipeline, these technologies make sure we are compliant and protects the privacy of the user.

We used:

  • React
  • Node.js
  • Typescript
  • SASS
  • Fluent UI for React

Not only are they hippety hip, they are third party libraries super useful for our application! Weehoo!

How to see without eyes?

Azure Custom Vision!

We had a problem. A huge problem. We needed to know where in our floor plan the different components are placed.

By training our own custom vision model based on training data of bathroom floor plans, we managed to obtain an AI model able to detect components such as:

  • Toilet
  • Shower
  • Bath tub
  • Sink
  • Main pipes
Bathroom components detection with our custom vision model
Model scores on the training data

The model was published and the API made available for our backend application in C# to consume.

Super easy!

Piping our way through the Azure Cloud

To make our amazing service Tubi work, a lot of cloud is needed. We aim to make the plumber’s job easier by recommending the best layout for where the pipes should go, and for that, we need AI. We have trained a model in Custom Vision to recognize all components in a bathroom that need water. So, when the plumber uploads a floor plan to our Static Web App, the image is sent to our Azure Function App backend in C# Asp.net through our own API. But both the image and the equipment list must be stored somewhere. Therefore, we have also connected to Azure Blob Storage. Then last but not at all least. The people working in the back office have instant interactive reports available to help them with filing and billing through Power BI and alerting the using an automated flow (Badges: Feature Bombing)

Sometimes it works, and that’s plenty

Databases are good, but sometimes it’s easier to just dump everything in one place until you need it again. Yes, it might not be very scalable or very normalized. SQL became too heavy, and we already needed a Blob storage to store the images, so we also dump the order data in the same blob storage as JSON files. It’s old fashioned way of serverstorage, and a bit dirty, but it works! (Badges: Nasty hacker, Retro badge)

Power the backoffice

As the final list of components are decided, they still have to be approved from the accounting team in the office. To make sure they have all the information they require, we have developed a Power BI dashboard to crawl through our registered data and make sure the orders are handled properly (Badges: Crawler, Dash it Out, Dataminer). And to make sure the orders are handled easy and fast, the dashboard is embedded into teams and an alert is automated by using a logic app to make sure the workers can receive and cooperate in realtime (Badges: Embedding Numbnuts, Go with the flow, Pug N’ Play, Power user love, Right Now, Stairway to heaven).

Free UI

Sharing is caring, to the teams without a designer, here are some free UI elements to help you get started!

We recommend using Figma: https://www.figma.com/downloads/ (free design software), and to help you get started we collected some main components for iOS, Android and Web (fluent), and of course the Super Mario colors!

If you need any additional help, ask Sofie!

Link to GitHub where the figmafile is

#OOTD

Image

Hei bloggen!

We want to show of our amazing outfits and Remarkable Teamspirit! Not only do we save time by wearing our dungarees everyday, we feel the Mario spirit and we look amazing. We bought them second hand and decorated them together.

sweip up for 20% on pipes

#spons #pipesforlife #dungarees

Replanning the plumber experience

Reducing the complexity

Super Mario isn’t always on adventures, and most of the time he is living a normal life while making a living as a plumber. A typical workday is full of tasks with different levels of complexity, and Mario would benefit from an application that can help reduce some of these tasks. Thereby allowing him to focus on the things he does best… Saving princesses and stomping turtles

Planning a plumbing system

Our solution will be an application developed to help plumbers in planning and estimate the cost of a plumbing system. The basic idea is to upload a houseplan and use AI to recognize obstacles, items that need to be connected and other elements that will affect the final layout. The user will then be able to “draw” the pipes on the plan while avoiding obstacles and connecting required elements, while the application generates a list of components needed for the system and a cost estimate.

Using Azure and Microsoft 365 for communication and management

The user will log in using their Azure AD user profile to an web app that synchronizes with a database in Azure to make sure speed and accessibility isn’t a problem. From this web app they can upload a houseplan that is immediately analyzed using an AI service to retrieve required data. This data is the saved to the database and synchronized back into the app.

As a new commissions are saved to the database they will be synchronized to Dataverse as both a backup and for easily connectivity to the Power platform. By using this platform there will possible to develop solutions that can be used for other activities like accounting, communication, statistics, etc. This also allows an easy implementation in Teams, allowing users to handle these tasks on the go.