Cowders React Native App – Teknisk

Cowders mobil app er utviklet på React Native for å kunne lage en app som kan distribueres gjennom App Store for iPhone/IPad og Google Play for Android telefoner. Vi bruker også Expo som gir oss en rekke vanlige funksjoner og tjenester en bruker i en App. Videre kan også Expo brukes til å deploye apper til App Store/Play Store. Vi sikter på å kunne gi dommerne tilgang til appen slik at de skal kunne installere den på sin egen telefon. Expo er også tatt i bruk for å nå kamera og til pålogging gjennom Vipps.

Link til bruk av Kamera gjennom React Native og Expo: https://github.com/Cowders2021/cowzor-native/blob/master/pages/Camera.tsx

Appens hovedmeny, midlertidig sådan

Videre bruker vi React sit context API for State Management i appen, dette gjelder for en rekke av de ulike løsningene i appen, hittil værdata, notifikasjoner, men her vil sensordata og ikke minst den viktige Cownter funksjonen.

Link til vår bruk av React Context API: https://github.com/Cowders2021/cowzor-native/tree/master/contexts

Til denne posten claimer vi:

Go Native siden det er en Native app for Android og iPhone
Hipster for å bruke expo, react context api, delvis også for å bruke Blazor i desktop app (Vil bli bedre beskrevet i egen post)
moderne rammeverk, react native, context api, expo

Badge – Chameleon

One platform that just doesn’t get enough love is the Model Driven Apps. You automatically know who is writing this because of this statement, but it is really the one true Low Code Platform.

Not only is it low code, but it is actually highly responsive as well.

Take this Contact as example

The view is showing everything on contact with a 3 column view. The columns are responsive, and the subgrids are responsive.

2 column. Using the length.

1 column using more of the length.

Even the BPF will automatically scale to the screen:

Even opening it on my Android in chrome

We personally feel that this app is rather quite amazing, and highly responsive. I could even open the app in Outlook and in native app, and it would function the same.

An app that truly deserves the Chameleon

Badge – Power User Love

Claiming the Power User Love for the app created for the technician to follow up on his tasks post disaster. A combination of PCF component in a Model Driven app to help the tech do his jobb faster, and while he is on the move!

This of course coupled together with a few Power Automates behind the scenes to move data through the DataVerse for better user flow.

Point Taken – Vipps technical approach

It was easy enough to connect to the Vipps API, but could we do it within technology that we use everyday in the Power Platform? We chose to have a look at Power Automate to see how this could be done.

When the Work Order reaches a certain stage we create a sales order. During this process we create a payment in Vipps. First thing we do is find the Contact from the Work Order.

After that we send an HTTP call to the Vipps service to receive an Access Token. This token is extracted via the Parse Json.

After parsing, we can now send the actual request to the Vipps API

We now have an active payment within Vipps that will send to a given user, and the user can continue to pay the sales order.

Point Taken – Vipps

A terrible disaster recently destroyed several houses in Lego City, leaving several citizens with destroyed houses 😥 The mountain of doom had a terrible outbreak and lava rocks flew many hundred meters onto the houses nearby.

Citizen self service

After the smoke has settled the citizens can return to the houses to see the damage. They take pictures and send these pictures to the portal provided from the City of Lego.

Repair

In Lego City they are lucky, because they have repairmen that have trained for this exact scenario

He will work on service cases from his mobile phone

Before fix

After fix

Payment

Once the Work Order is complete, we have to receive payment for the parts that have been mended. Luckily this system has an integration with Vipps, so the payment can be done over the phone instantly.

Simply open the work order and click on the button to invoice the customer

This generates a payment confirmation box

And then eventually a payment request for the end user.. It’s as simple as that!

Badge – Hipster

React app that runs on node.js server to serve conductors the possibility to drive trains from home office.

The app consumes 2 apps running on a raspberry PI, 1 app for live feed from train webcam and 1 app for controlling the trains through bluetooth.

The conductor portal in vs code to show that we are running it on node.

BTW we are also using react router for our menu handling.

The 2 apps that is serving the video feed and the remote control on the raspberry pi for the train is using sockets.io for communicating with frontend.

The resulting portal with live feed and further integration to PYTON controlled Rasberry PI