Yacero blog

Poängräknar App

Poängräknarfunktion som Progressive Webb App 

Yacero har nu dragit igång ett internprojekt att skapa en app. Efter ett intensivt brainstormande och ett brinnande behov (inför vår årliga golfrunda) så blev det en progressiv web app som utvecklas “mobile first”. Den ska alltså utvecklas för en mobil i första hand då den är tänkt att användas ute på olika banor. 

Eftersom det är en enorm hype kring React just nu så valde jag att bygga i det. React är ett javascript ramverk för front-end/GUI (https://reactjs.org/). 

Kraven för en MVP (minimum viable product) av appen var: 

• Skapa ett ”spel” (i vårat fall en golfrunda) 
• Kunna lägga till spelare/lag i ett spel 
• För flera moment (läs: hål) kunna addera poäng på varje spelare/lag 
• Kunna låsa momentet då det är färdigt för att undvika misstag (läs: fusk) 

Framåt – mer funktionalitet, offline-mode och deployment 

  

Funktionalitet 

En rätt så viktig sak som är kvar är att skapa är någon form av inloggning så att det finns en eller flera redigerare men också observatörer som bara ser en sammanställning. Sammanställningen är även på vår roadmap. Det ska även läggas till en Websocket för att kunna pusha ut poäng i realtid så att observatörer får en uppdaterad sammanställning. 

  

Offline 

Appen ska självklart vara tillgänglig offline och vi behöver därmed lägga till en s.k. serviceworker. 

 

Deployment 

Tanken är att få upp denna app på webben så att andra kan utnyttja den under sina företagstävlingar då det behövs enklare poängräkning. Kanske få upp en portal (trello, github el. dylikt) där man kan önska funktionalitet och rapportera buggar. 

  

För att följa trender så är tanken att paketera appen som en docker container och hosta via AWS (Amazon web services). 

 

Att arbeta i react 

Till att börja med så vill jag säga att jag inte djupdykt i React än. Jag har använt routingen,  lite de flesta basic-användningarna samt några av de mer avancerade koncepten. Kommentarerna nedan är alltså min uppfattning efter ett begränsat antal timmar in i React som ramverk. 

  

Att koda en app med React är relativt lätt med den utförliga dokumentationen och stora användarbasen. Det tog ett tag att vänja sig vid skillnaden på state och props och hur data flödar inom react. Ska man sedan lägga till redux för global state-hantering så blir allting på ett sätt mer enhetligt men man måste samtidigt lära sig ett till verktyg. 

  

Med create-react-app CLI (command line interface) verktyget så går det väldigt snabbt att komma på banan och börja koda din app. Detta är jämförbart med andra biblioteks CLI verktyg det fungerar smidigt och gör vad det ska. 

  

Jag saknar ett sätt att få enkapsulerad CSS. T.ex. så är CSS scopad i en Angularkomponent då den emulerar ShadowDOM (https://angular.io/guide/component-styles#view-encapsulation). Man kan också specifisera en komponent i Angular att använda ShadowDOM, som jag själv är van att använda. Läs mer om ShadowDOM här:  

• https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM 
• https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/ 

  

Resultatet :

• Releasat och testat internt – Stor succé! Release externt kommer! 

Med vänlig hälsning,

Jimmy Lord.

  

Landningsskärm: 

Byta namn på spelet

Namnge spelare

 

Första hålet

Låsa första hålet

Gå vidare i spelet