Tag Archives: Client Side Salsa

🤖 Automatically Priming our SPA cannons with React and .NET ⛵️

Posted on by

Sailing is though, so you need to rigg your ship to your advantage, preferably automating your sales and having people walk the plank for making bad code. We chose to created a project with ASP.NET Core application running with React.js. The application is running on .NET version 7 and uses several technologies, both hip and retro.

Screen capture of the .net SPA application setup

Mapbox for Charting the Seven Seas

Our application uses Mapbox – a provider of custom online maps for websites and applications. The company provides APIs and SDKs to create custom maps, add markers and other map controls, and to handle user interaction with maps. This ease of use and their clean and well-structured documentation (docs.mapbox.com) made Mapbox our top dog for create, edit and manipulate maps in our service.

Map created using Mapbox’s API

Protecting your Shared Booty form the Crew

Any pirate needs a secure lair, a pirate code and ability to help other pirates in need. For this reason we created a repository in GitHub and implemented best practices for collaborating as developers, like proper branching, build pipelines, linting and pre-deploy checks. Like blocking ourselves from bloat because we can’t have unused code in the repository.

Snipet showing lint error for unused variable

Branching Strategy for Division and Conquering

The master branch contains the production code. All development code is merged from develop into master. Cutting corners in true hacker style we opted to not use feature branches, since, to be frank, the entire thing is a feature at this point.

What we all said when discussing feature branches

All branches are protected with protection rules. Due to the limited size of the project we can automatically merge features and bug branches directly to develop, but we can’t push directly to develop. Even that is too risky for this group of mad lags and girl. If you want to merge code from develop into master you need approval from at leaste one other developer and no changes requested to your merge, if all flags are green Github forcefully collides the code together and see what sticks (it’s actually more sophisticated than this, but you Judges know a lot more about this than we ever will, so we humbly just call it “magic” – just like magnets).

Parchment showing the Law of Protection for our Master Branch

Feel free to have a gander at our code repository to appreciate all the shiny details: github.com/TommyBakkenMydland/CaptaIN-Hack-Sparrow

Smooth Rigging with CI/CD and Github Actions

Github Actions is a now a CI/CD platform that allows developers to automate their software development workflows. This, for us, is a huge win because we want to do as little configuration as possible!

CI/CD github actions

The actions reduce the time and effort required for manual processes and enables us to release new features and bug fixes quickly and confidently – Harr harr, got you matey, you thought we will fix bugs! … But … for the sake of argument … if we were to fix bugs, this powerful tool for streamlining development workflows, enables us to deliver high-quality software more efficiently and effectively at lower cost – Better use of time, reduce waste of time (WoT) and better business value for the client. We used yaml to tell what GitHub actions should create:

Yaml file describing what GitHub actions should create

Creating Overly Complex Gadgets to Avoid Simple Tasks
(aka How we used ChatGTP to give us documentation on Pulumi)

Nobody likes to know stuff. Everyone loves AI. What about AI that knows stuff?! Sold!! We used the AI service to provide us with documentation on how to deploy infrastructure in Azure with code.

Asking the oracle about stuff we probably already should know

From this we were able to write code that could be executed in our CI/CD

Pulumi snippet for creating our environment: Infrastructure as code #retro

Resulting in a beautiful environment and ample time for coffee ☕️

Screen grab showing the employed resources in Azure
Screen grab showing ChatGTP making a meme about making memes about using ChatGTP. Very meta.
Mame created from ChatGPD’s instructions

Posted on by

We have implemented a new Teams Tab app that monitors in real time where the turtles (smartphone in our case) are located.
One of our member are currently at the airport to travel back home to Stavanger. The video show that the Teams Tab App accurately shows her location at the airport and our location at the hotel.

The video also shows geolocation data stored in Azure Cosmos DB. We are using React, TypeScript and Hooks to implement the Teams Tab App (Client Side Salsa) .

In our teams group we have also create apps to easily look at the IoT Central, Webflow website and TODO list. All the communication happens inside the Microsoft teams.

IoT Central:

Webflow website:

TODO list:

Middle-Aged Mutable Ninja Tuples REACT!

Posted on by

We made a React app that we consume within our .NET MUI app. The MAUI app uses the native browser 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.

If you want custom placement of tags you can format your url like this:
https://sosmap.vercel.app/?&userLat=59.94910991681978&userLng=11.060075171654933&turtleLat=59.952150495318335&turtleLng=11.07015018459058

You have to pass in userLat, userLng, turtleLat, turtleLng. They should be the gps coordinates in a number format.

Hope you like it!

HTML5

Posted on by

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.


Happy coding!

PCF + React + Pizza = Great user experience

Posted on by

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.

Setting up the projects backbone

Posted on by

Azure Cosmos DB

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.

Glossy pixels – Bombshells rebranding

Posted on by

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 Logo

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!

SharePoint is still fun!

Posted on by

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.

PowerPoint for design sketches is needed