Hur det kan gå till att skapa en app

Upptäcker ett vardagsproblem, cyklar hem och kodar en app som kirrar biffen. En simpel konverterare, dollar/lb till kr/kilo, men oh så bra att ha här i de amerikanska butikerna.

Kort sammanfattning:

  • För att skapa appen använder jag PhoneGap.
  • Jag drar in hela www-mappen i Visual Studio Code där jag kodar
  • Med mobilappen för PhoneGap testkör jag min app
  • Jag använder denna hemsida för ett enkelt generera splashscreens och ikoner för olika skärmstorlekar
  • Sketchpad skapar jag illustrationer till appen
  • Slutligen bygger jag appen (skapar en apk-fil) genom att zippa hela projektmappen och ladda upp på PhoneGap Build

Låt mig gärna veta om en mer detaljerad beskrivning önskas. Här är klockan 00:12 så mer blir det inte ikväll åtminstone. Enjoy!

Teknisk revolution och inget slut på listan över saker att lära sig som utvecklare.

Jag är mitt i processen att spika kurser inför hösten och tankarna far omkring. Det slog mig att i den här branschen är det ju totalt omöjligt att kunna allt, och det känns som det ofta glöms litegrann. Det gäller såklart för de flesta sammanhang men alltså, det finns inget slut på listan över saker att lära sig som utvecklare.

Rubriker som kan kännas en aning stressande.

Med vetskapen om hur mycket en inte kan är det är ibland svårt att känna sig som en duktig programmerare. Hur många språk, ramverk och tekniska termer behöver vi behärska innan vi med stolthet i rösten kan säga att vi är grymma? Det finns inget konkret svar på den frågan såvitt jag vet, så det är alltså upp till oss själva.

Samtidigt är det något som gör yrkesvalet så otroligt roligt. Om vi så önskar så har vi förmodligen möjlighet att jobba inom olika områden och på olika sätt för varje år, månad eller varför inte dag.

Utmaningen kanske är hur vi ska förhålla oss till nyheterna om de nya häftiga teknikerna som aldrig tar slut. Blir vi entusiastiska när vi får höra om självkörande bilar, eller börjar vi stressat  leta kurser inom computer vision för att vara eftertraktade även på den marknaden?

 .. Nu är det väl verkligen på tiden att kolla in Machine Learning, AI och Data mining. Och lära mig grunderna om finans och företagsekonomi, för sånt kan också vara bra att kunna. Lära mig 3D-modellera och animera på riktigt. Ha koll på kryptering och nätverkssäkerhet. Och visst är det väl på tiden att testa koda CSS med Sass och LESS .. Eller så bara inser jag att det räcker fint med att tänka efter vad som faktiskt är roligast och köra på det.

Enkelt webbprojekt med React.js

Så många timmar som jag har spenderat på att försöka komma igång med olika kodprojekt alltså. Felmeddelanden efter felmeddelanden. Jahapp, detta kan inte köras tillsammans med detta och jaha nehe ”Uncaught TypeError: Cannot read property ’loaded’ of undefined”. Det är verkligen något som får min motivation att blåsa iväg som ett litet löv.

Som laborationsassistens, under pluggprojekt och nu i sommar har jag kodat webbsidor med React.js. Här hittar ni en snabb liten beskrivning på vad det är. Ett litet utdrag: ”React är ett bibliotek med JavaScript-kod, avsedd för programmering av dynamiska grafiska användargränssnitt. Med att de är dynamiska menas att de kan förändras medan de visas utan att man behöver läsa in sidan på nytt.”

Tycker själv att det är kul med React och jag har nu ordnat ett litet projekt för er att enkelt testa! Min förhoppning är att jag har gjort projektet så simpelt och oberoende av en massa konfiguration att ni slipper allt arbete just för att komma igång. Jag menar det är nyttigt att kunna men kanske tråkigt att börja med.

Det ska egentligen bara vara att hämta ner projektmappen från min GitHub, öppna kodeditorn och börja. För enkelhetens skull använder jag CDN-länkar för att hämta React och vad mer som behövs. Det går också att starta ett projekt med NPM men då får man mer med kommandotolken att göra och en hel del andra filer att bekanta sig med.

Kom igång

Har du Git installerat kan du öppna Git Bash och klona ner projektet. Annars går det bra att bara hämta ner som zipfil.

Om du inte har installerat en lokal server på din dator så verkar det som att webbläsaren Firefox är den enda som tillåter dig att köra projektet. Högerklicka på index.html och välj öppna med Firefox. (( OBS! ))

Om du har en lokal server och ändar apache root-folder till projektmappen borde det fungera även för Chrome exempelvis. Jag rekomenderar att ladda ner UniformServer. Kräver ingen installation och tar inte stor plats på datorn. Klicka sedan på Start Apache och projektets startsida bör dyka upp. Se till att addressen är localhost/index.html eller möjligen localhost/#/ om det är så att default är index.php.

Ytterligare några tips är:

Använd en shysst editor och dra in hela projektmappen, t ex: Visual Studio Code
Skapa grafiskt innehåll: Sketchpad
Generera favicon: favicon-generator

___
 
Hör gärna av er till mig eller kommentera om ni testar.
Kul att se era resultat + så jag vet om mer sådant här önskas. Lycka till!

Sommarjobb + programmering = <3

Hey! Jag sommarjobbar på ABB i år likt förra sommaren. Tänker att jag skriver fler inlägg om det senare för det finns en massa kul att berätta. Kortfattat: jag är SÅ glad över detta jobb. Får koda ca 40h/vecka, på ett projekt som jag skapat från scratch efter ett önskemål. Drömmen ju! Projektet handlar om att skapa ett flexibelt webbgränssnitt för ’product managers’ att fylla i data om ABB-produkter. Kodar i React.js för frontend och C# för backend-stuff.

Just idag har jag skapat en sida för ’Document history’, dvs en slags versionslogg för varje projekt. Eftersom flera olika personer kommer redigera data hit och dit så är det viktigt att de kan hålla koll på vad som hänt och vem som har gjort det. 

För att ordna detta skapade jag en ny tabell i SQL-databasen och ett par testrader ( direkt i Microsoft SQL Server Management Studio) samt en funktion i C# som hämtar data. Knåpade ihop en ny React-komponent som fick heta så fint som . Däri hämtade jag data från SQL-tabellen via ett ajax-anrop till funktionen i C#-koden. Detta anrop gjordes i funktionen componentDidMount, som är en del av en Reactkomponentens livscykel. I komponentens render-funktion byggde jag upp en tabell med hämtad data och lät sista raden innehålla inputkomponenter för att kunna lägga till en ny versionslogg.

Min lösning fungerade fint! Åtminstone i de fall som det redan fanns sparad data för det projekt man är inne i. Visar lite av resultatet och processen nedan.

Trodde att jag var klar med funktionaliteten för Document History. Insåg sen att om jag öppnar ett projekt där inga uppgifter om olika versioner finns sparade så går det inte heller att lägga till något. Oups! Måste fixas.

Min kära loggbok. Här skriver jag ned uppgifter för dagen, buggar som dyker upp (som denna) och prioriteringslistor av plocka ifrån. Mot slutet av dagen försöker jag sammanfatta vad jag har fått gjort och vilka problem jag stött på. Kul att kunna kolla tillbaka på!

Letar i min kod efter orsaken till att inget visades. Ahh Såklart! Renderade bara tabellen ”if(this.state.allHistory.length > 0)”. Flyttade därför in den koden i en ’element variable’ istället. Har lärt mig flera sätt att lösa villkorlig rendering i React nu beroende på olika förutsättningar. Puh!

Sådär ja, nu fungerar det! Då tar vi helg 🙂