Trine Widgets

Bakgrund

Trine är ett företag som gör det enkelt att investera i sol-energi i utvecklingsländer. Deras mål är att ge världen trippel avkastning på din investering - ränta på lånet, social och klimat-mässig påverkan. Trine har stora mängder data om företagen i sitt stall, vilket låter investerarna på plattformen följa sina pengar i real-tid, och se vilken påverkan den har och var. Vi tänkte att vi kunde kombinera detta i kombination med med deras utmaning att nå ut till nya investerare.

Idea

Idén var att skapa ett widget-bibliotek, som en Trine-investerare enkelt kan nå från sin profil-sida. Widgeten visualiserar hur en investerare påverkar världen, och kan skräddarsy utseende, och vilka impact-mätvärden med några enkla klick. En kod-snutt genereras baserat på dessa val, och kan sen enkelt kopieras och klistra på en investerarföretags hemsida, eller blogg. På så sätt kan dom med realtidsdata visa upp hur deras investeringar gör världen till en bättre plats, och förhoppningsvis inspirera andra att göra samma sak.

Dom grundläggande anpassnings-alternativen var att visa saker som koldioxid-utsläpp, antal människor försedda med förnybar elektricitet, ackumulerad ränta och antal projekt som fått stöd.

Teknikval

Vi valde att använda oss av Web Components för widgetens faktiska kod-output, då det har bra browser-stöd med polyfills och är ett enkelt sätt att lägga till en anpassningsbar komponent med isolerad styling. Vi använde frameworket Stencil för att enkelt generera dessa. Front-enden i vår widget-skapare byggdes i Aurelia, och javascriptet för webb-komponenten självt, publicerades som ett NPM-paket. Vi skapade ett litet, node mock-API hostat på Heroku för att testa och hantera eventuella CORS-problem.

Utmaningar

Moderna websiter är väldigt olika varandra, och webben har alltid varit en snabbrörlig plats, med nya front-end-ramverk och bibliotek som poppar up som svampar i tid och otid. Detta betyder att det är lurigt att skriva en enskild bit kod som passar och fungerar på alla siter, oavsett front-end-tekniker. Detta gör att widget-output-koden är känslig, då den både måste kunna passa in på en site med modernt SPA-front-end t.ex. React, men även på en gammal dammig Wordpress-blog med bara vanilj-javascript och HTML.

För att facilitera överlämningen till Trine, gör vi som vi alltid gör på Prototyp - väljer ramverk och tekniker efter kund och problem - och byggde widget-skapar-applikationen i Aurelia. Ingen av oss hade någon tidigare erfarenhet av ramverket, och som alltid är det en viss start-sträcka innan man kommer igång och är varm i kläderna med en ny teknik.

Resultat

https://prototypsthlm.gitlab.io/trine-widget-app/

Resultaten var ovanligt nära det vi föreställde oss i ideerings-fasen. Vi slutade på totalt 7 anpassningsbara alternativ för widgeten, och även möjligheten att ändra titel. Dessa kombinationer genererar totalt 16 olika utseenden för samma widget.

Output-kod-snutten kräver mer testning på olika webbsidor innan den är helt sjöduglig, då man måste kunna vara säker på att inga märkliga js-blockande features eller css-regler stör ut eller förvanskligar komponenten. Men överlag känns slutresultatet hyfsat välpolerat och fristående

Vi lyckades också med att bygga en liten Gmail-plugin som lägger till en slimmad version av widgeten till användarens email-signatur.

Team

Villiam Poignant Björn Helgeson