We made a React app that we consume within our .NET MUI app. The MAUI app uses the nativebrowser to display the web page that host our React app. It’s what we use to show the position of our Ninja Turtle and the person using our app, as described in our previous blog post.
Since it’s supposed to be used inside another app it’s quite minimal and just one component that shows the map and the relevant pins and locations.
You can try it out yourself in a development version here: http://sosmap.vercel.app. We use CI/CD to upload a new version on every push/merge to master.
We are using HTML5 responsive website templates from webflow (https://webflow.com/templates). Take a look at the website we are currently working on –> https://smartzooapp.webflow.io/
We are developing a interactive website were customers can subscribe, sponsor and follow their favorite Zoos. They can also subscribe to specific animals they want to follow. It is like a social platform for animals.
When ordering pizza, you want to know how long it’ll take before a turtle is at your door with that delicious pizza pie! This PCF plugin lets the customer input their delivery address, and uses Google Map APIs to show a map with a marker showing the turtle pizza HQ (sewers below Empire State Building) and another marker showing the delivery address. It also calculates the distance and delivery time based on the address and shows it to the user. The PCF is written using TypeScript and uses React to achieve instant updates of the map and calculated time/distance as the customer is interacting with the app.
The solution is using CosmosDB to store Users and Telemetry coming from the different devices/assets
CosmosDB is fast and easy to maintain for noncomplex solutions. The main use here is for very simple data structure and for mass data allocation. Since we are getting data from this DB in real time, so we need to send a lot of requests in very short time ranges. Since CosmodDB is DocumentDB based so it handles these kinds of situations smoothly.
Azure WebApplication
We have created a web application as the user interface to keep track on the assets. The web applications is based on .Net Core 6 with React/TypeScript. We have implemented some of the main .net core features as:
– Entity Framework: To connect in a simple way to CosmosDB
– Controllers: As API endpoints
– Azure KeyVault Provider: As a provider, the same as an appsettings file. This protects all of the secret variables like codes, keys, connection strings and so on.
– Session: To create an encrypted cookie (Https, SameSite) to keep the session alive
– Cors: to prevent other origins to send requests to the BackEnd
– Dependency Injection: To inject all different services to the solution, including custom services and custom repositories.
– Hub: To connect to the SignarlR applcation
Azure Maps
Azure maps is used to track the geo location for all different assets. It will show the position of all assets in real time with the help of Signal R.
We have given a little bit of extra styling to the pointers and added some of the out of the box controls.
Azure Signal R
We have implemented Signal R to open a websocket for real time communication. The main idea was to avoid so many common http requests to the backend which is not so good when it comes to performance and security.
The front end sends requests to the Hub and it immediately gets a response so the data is always fresh and new. This is the way we keep track on the assets by getting all the telemetry/data needed from the Cosmos DB.
Bombshells har satt Donatello til å utforme deres nye grafisk identitet. Selv om profilen sikkert kommer til å være offer for en del diskusjon i tiden som kommer, har de i alle fall klart å bli enige om hvilke elementer logoen bør inneholde.
Navn
Navnet Bombshells stående alene skal gi inntrykk at hva Bombshells gjør og derfor har man landet på Bombshells Data. For å ta vare på nerde-identiteten som har inntatt gjengen, har man valgt å legge bokstaven “A” på siden for å holde på linken mot programmering og informasjonsbehandling hvor < og > representerer størrelsesforhold.
Font
Fonten som er brukt i logoen er av font Family “Arial Narrow”.
Grafisk identitet
Den fulle grafiske opplevelsen skal gi et bilde av virksomheten. Bombshells dekker hele kjeden fra innhenting av informasjon, behandling av informasjon i skyen, til analyse og fremstilling av data i rapporter og dashbord.
Farger
Fargene skal gi mulighet for å utforme identiteten til Bombshells og gi en frisk og gjenkjennelig profil både i branding av presentasjoner i Powerpoint og på nett.
Red: #c31414 RGB : 195.20.20
Grey: #818181 RGB: 129.129.129
Blue: #a2b9ec RGB: 162.185.236
White: #f9f9f9 RGB: 249.249.249
Re-branding for å fremme Bombshells sin visjon!
Skilpaddene har tatt til seg tilbakemeldinger og bestemt seg for at re-brandingen skal nå ut til så mange som mulig så må en nettside komme på plass. Derfor har skilpaddene stupt uti det store åpne hav av frontend rammeverk for å kickstarte produksjonen av nettsiden.
Det overrasker nok ingen at valget falt på selveste;
React!
React er nemmelig et rammeverk som lar deg bygge modulære komponenter som kan brukes og gjenbrukes enten i prosjektet eller andre prosjekter. Samtidig så lar React deg håndtere ‘states’ ved bruk av React Hooks. Dette er funksjonalitet som lar deg oppdatere ønskede elementer ved en nettside uten at du må re-rendere hele nettsiden.
Som resultat av re-brandingen så har en nettside blitt satt opp for å presentere Skill Bombshells sin visjon og understreke business casen og hvilken verdi som ligger i prosjektet.
Denne siden består av ulike funksjoner som fulger med HTML5 bl.a taggene egne tagger for header og footer samt mulighet for en egen <video> tag! I tillegg til dedikerte <nav> tagger for navigasjon. Nettsiden innholder dermed en introduksjonsvideo til skilpaddene, samt et bildegalleri for å presentere vår visjon med prosjektet. Etterfulgt av nyttige lenker til nyhetssaker rundt klimaet i og rundt Oslofjorden.
Disse nyhetssakene blir oppdatert gjennom React ved bruke av hooks for å re-rendere states. Dette er funksjonalitet som kan bygges på videre for å presentere data fra ulike kilder for å presentere live-data fra våre IoT devices.
Med dette så vil vi gjerne claime; High 5 for bruk av funksjoner som ble introdusert med HTML5, samt Client Side Salsa for bruk av React hooks for å håndtere states og til slutt selveste Glossy Pixels, ettersom vi har et responsivt design!
Mobile first! We make sure that our SharePoint site remains responsive, and that our own SPFx web part follows responsiveness.
SPFx on the way
We have started our SPFx project to enable more than modern has out-of-the-box. We build this by using React/NodeJS with TypeScript. Repository for the SPFx can be seen here: https://github.com/Infoworker-ACDC/InfoNinjasSPFx
Plan for the SPFx web part
It’s using underlaying data for crimes reported (cases), with crime fighting ninjas (employees) taking on the villains (problems). It’s plan to make good overview of each of these resources and map these to geolocation on maps (plan to integrate google maps to the SPFx view – that should be fun).
And this should all be wrapped into a nice design and be responsive. Then build some Power Apps and Power BI around this again.
PT Brixters have made a conductor portal in react.js that is fully responsive and user friendly !
The Portal is made in React therefore we are claiming the “Client Side Salsa” badge for this.
The Portal also uses 2 module apps to show the train live video feed and a train controller where the train controller uses socket.io to communicate from the frontend to the backend, therefore we are claiming the “Right Now Badge” for this.
We are also claiming the “Glossy Pixels Badge”
for the conductor portal because the portal looks shiny, is easy to read (big text, big buttons). And its responsive, works on mobile devices also, therefore we are also claiming the “Chameleon Badge”
And we wanted to show of our old Dashboard that is now upgraded to the new one 😀
Some pictures of socket.io with flask in action for the “Right now badge”:
Picture of VS Code as proof that we are using React to build our app.
What is HTML5 WEB-COMPONENTS aka custom components.
Custom components is a combination of several standards from the HTML standards.
Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.
Shadow DOM: A set of JavaScript APIs for attaching an encapsulated “shadow” DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element’s features private, so they can be scripted and styled without the fear of collision with other parts of the document.
HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element’s structure.
The thing with web-components is that they can be reused across, sites and installations by referencing the js script.
One way of using them is thinking of each component as a autonomous part/app that will not mess up anything else on the page.
You can can style things inside the a custom-element by using --css-variable
Communication between custom-elements can be done using events, setting attrubutes or calling functions on the element.
This component can be used together with anything else as long as it runs in a browser.
I have created a “super simple” demo component that counts up a number in random time and increment.
Creating a global-pushup-counter custom component using lit-element and lit-html.
Super simple, but functionalBuildt and bundled using esbuild.
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.
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.
Go Native siden det er en Native app for Android og iPhoneHipster 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
