Final delivery

Excellent User Experience

We have two solutions ready for use, PWA for public use (https://infoninjas-xt6rm.ondigitalocean.app/) and a powerapps portals for internal use (https://infoninjas.powerappsportals.com/dashboard/). Both are responsive and works well on all devices.

PWA in use:

PowerApps portal in use:

Most Extreme Business Value

A small but very useful application stack that can have a multitude of business related implementations.

ACDC 2022 us:

InfoNinjas and Teenage Mutant Ninja Turtles works together solving crimes around New York and Oslo. A PWA app that allows public to report crimes with camera and GPS input together with text. , and a PowerApps Portal that the team uses to gather these reports and dispatch the ninjas and turtles out to help.

Public service:

For real life applications you can use these for example as a public reporting tool towards public services. F.eks. infrastructure like roads that need to be fixed, power outage, water supply and other problems and feedback that needs to be handled.

Law enforcement:

Or it could be used for law enforcement to be gathering intel from citizens that are aware, and by that collecting intel that can help in their public services.

As long as something need to be reported, and someone need to know and should act on it, use InfoNinjas Covert Ops Center application stack!

Rock Solid Geeknes

We are using PowerApps, Azure DevOps and GitHub for full deployment pipeline towards Azure hosted applications. We are using digital ocean for hosting the web app (PWA). PWA integrates with local hardware (GPS tracking and camera).

Also started on our IoT-project, but didn’t have time to complete:

Killer App

Take up your phone and navigate to https://infoninjas-xt6rm.ondigitalocean.app/, you can also store it as “HomePage” and your set – that’s a killer app for you:

Integration with team can really be simple

So we used the tool App Studio to implement the “report incidents” React app with teams!
Now you can install the app in Teams and report incidents straight from the teams app. Now the audience can easily report incidents without having to navigate to the website (or install it as a pwa, by all means). Would be awesome to actually have the possibility to officially release it, but given that MS uses about a month to approve the app, this was the best option to move forward!

Cant fight crime without darkmode and custom elements

Ever used light mode? If so, we do not envy you! We did a complete overhaul of the Power App implementing a new color base and custom components. The color scheme is based on dark mode, as to protect our crime fighting turtles and rat’s fragile eyes. As custom components go, we have a beautiful logo on our page and a majestic landing page cover photo!

color scheme, with turtle green as accent
color scheme
custom cover photo
logo

Dash it out

Splinter har behov for å ha oversikt over hva som skjer i TNMT gjengen til enhver tid, derfor har vi lagt opp en oversikt hvor mange pågående saker, hvor mange Ninjaer og hvor mange Villians som er rapportert til enhver tid. Værdata er også viktig for å ikke sende ut Ninjaer i tyfoner og annet skummelt vær som kan dukke opp.

Code – commit – MAGIC – live

We are using best practicing development and deployment for out Web Api solution hosted on Azure.

We code it with .NET 6 in Visual Studio 2022:

We do sensible commits using Git towards GitHub:

In Azure our app is wired up to listen to this repository and do build, log and deployment to our resource in Azure:

And it’s all accessible here:

We claim:

Kapaow! Real time data in Power Apps Portals!

In order to be sure all data in the Covert Operation Center is up to date, we have to make sure caching is disabled. This is not possible by design in portals. But no worries. We have a dirty hack in our sleeves.

In order to reset the cache, we must navigate to /_services/about within the solution and click the “Tøm hurtibuffer” for the page.

Then we can monitor the network when clicking the button and save the request as a fetch request. Then we create a setTimout function with location.location() at the end.

And kapow! We have real-time data as long as the page is open within and browser.

Lets summerize what we have done so far from day 2

Things starting to look good here. Here is what we have done so far:

1. Excellent User Experience

The citizens can report incidents using the PWA(React App), Teams app and by e-mail, making it easy for the citizens to report using their preferred way. Splinter which is the head of TMNT has access to the Covert Operation Center where he easily can monitor new incidents and assign them to one or the whole team of TMNT.

For Citizens
– So the users can submit cases from email address and it will go to the React PWA. This process is automated (Power Automate)

Quality Management Portal where TMNT can improve and monitor performance. It would be possible to start the quality process right from this solution.

image

2. Most Extreme Business Value

This is how the solution is built, It supports many cases and different inputs that the TNMT can manage all the incidents happening around town. As you see the technologies are connected together to provide awesomeness!

3. Rock Solid Geeknes

With the use of image recognition, we automate the process of setting the severity of each case. This way Splinter can prioritize easily which incidents that need focus.

TMNT have placed a set of IOT devices that report anger levels around town. This may also give a pulsating light that soothes the angry people and make them sing.

Logic app that post data to Image Analytics.

4. Killer App

The awesome Covert Operation Portal is also a PWA, Splinter can easily assign incidents on the go and get notifications when new incidents are reported.

Security is of uttermost importance therefore incidents submitted using the React PWA is ,submitted to an API Management endpoint. This limits any exposed API’s and gives good control over what data we are exposing.

It’s cool, it’s hip, it’s open source!

We have used several open source and hip packages in our React app. Node.js with cors and express for api requests, reactstrap (the React GUI underdog) for page layout and root design and the react-webcam package for accessing the users camera. All open source, all hip, baby!

react-strap
node, cors, express
webcam component