Ännu en app skall byggas [Arkiv] - Kolozzeum Forum - Sveriges största träningsforum

Visa fullständig version : Ännu en app skall byggas

KarlAnka

2013-06-20, 11:51

Hej, jag har lurkat här ett tag och tänkte posta en utvecklingstråd för min app som jag skissar på. Syftet är varken vinst eller att bli störst å bäst (med tanke på hur mättad marknaden är), utan att få ett användbart verktyg för mig själv (och kanske andra) men troligtvis värdefullast: utvecklingen i sig då jag kommer behöva lära mig en del koncept och system som jag inte jobbat mycket med tidigare och så kan jag säkert snappa upp kunskap om "fitness" på vägen. Jag har egentligen inte för avsikt att bli klar utan det är mest ett långtgående sidoprojekt jag tänkte pyssla med när lusten faller på.

Funktionalitet
I stora drag: planering och loggning av kost träning och det som hör därtill. I den grad man önskar. Tidigare har jag använt följande appar: fitocracy för loggning av styrketränin (sets reps etc) och vissa sociala aspekter, runkeeper för logg av löpning (tid distans position etc), myfitnesspal för loggning av kost (kalorier, macros, min vikt). Är även ytligt bekant med gym-appen Jefit, kost-appen Shape-me-up och Jawbone up.

Det jag önskar nu är allt på samma plats, plus planering/schemaläggning av allt med långsiktiga mål, inkluive alla beräkningar. Centralt i den dagliga användningen är en kalender m dagens aktiviteter där man sedan loggar vad som blivit gjort och hur detta påverkar dina mål, om man har några.

Exempel användning:
Planering exempel: jan, feb: deff 8 veckor, ca 1kg ned i veckan. Träningsschema under perioden: fokus på styrka 3x veckan Ex SL5x5 eller SS (ink paus-tider, deloads, progressiv ökning etc). Kost under perioden: kcalunderskott, protein ca 2gr/kroppsvikt/dag, IF (16/8h) två måltider om dagen fördelat 30% och 70% av daglig energi, mycket carbs måltiden efter träning. Lägre kcalmål på icke tränings dagar. Invägning och progress-pic måndagar och justera kcalintag. Kosttilskott A B C på morgonen, shake D före gympass. Löpning 3x veckan 1mil. Bulk följande 12 veckor: någon hypertrophy-split 5x veckan (PHAT, madcow, Texas method etc), ingen cardio. Kaloriöverskott +500/dag, extra carbs på träningsdsgar. Mål kan vara ex att bänka X, en %kroppsfett, en vilopuls eller varför inte biceps-omkrets. Dagligt användande: När sedan planeringen är klar så kan man glömma allt detta och bara köra på enligt dagliga schemat man har i mobilen. Ät X, lyft Y, cykla Z och logga detta. Sen mäter man mål vid tidpunkter, och får justeringsförslag.

Allt skall kunna göras i så mycket eller lite detalj man önskar, Liselott kanske bara vill gå på yoga 3x veckan och tappa vikt. Medans Lasse äter på grammet med macros och mikros i 22-dagars cykler och måste kunna marklyfta sin flickvän innan bröllopsdagen och därför gör 300 sqats per cykel, sen vilar han en dag och då äter han bara papaya.

När sedan allt är på plata ser jag inga problem med att få till sosiala aspekter som delning av scheman, kost, rutiner med andra användare, grupper etc.

Den tekniska lösningen
Det hela kommer ha ett server/klient upplägg. Servern sköter hela "systemet" med logik och databas medan klienten mest frågar om info, skickar info och visar fram den. Server blir PHP plus MySQL databas med koppling via PDO (det sista är nytt för mig). Detta kommer kommunicera via JSON med klienter, på "service" mannér. Något som även gör att jag enkelt kan exponera ett API så att andra kan bygga grejer och kommunicera med systemet.

Min första klient (som är den mobila appen) kommer vara en så kallad webapp. Detta till skillnad från en "native" app som du hittar i ex appstore, gör att allt med en webbläsare kan använda den och jag behöver inte utveckla separata appar för ex iphone/android/ditt kylskåp/framtida enheter. Vidare kan jag publicera uppdateringar när jag vill och man har alltid sista versionen. Nackdelen är att jag inte får tillgång till enhetens fulla potential med hårdvara etc. Men det verkar vara ok, med HTML5 har jag tillgång till GPS:en exempelvis och lokal lagring. iOS6 verkar även ha bilduppladdning. CSS3 verkar ha lite hårdvaruaccelererade visuella effekter också så saker ser smooth ut.

Jag kommer använda mig av JavaScript "biblioteket" jQery mobile, som förutom jquery innehåller massa användargränssnitts saker. jQery har jag bara använt litegrann tidigare så detta kommer bli bra övning. Utseende/controllers: http://jquerymobile.com/wp-content/uploads/2010/08/jquery-mobile-smartphone-11aug20102.png

Vidare känns det som jag kommer behöva en "desktop" klient som skiljer sig eftersom just planeringsfasen är väldigt informationsrik och kanske inte lämpar sig på en liten mobil. (Men kanske en tablet?)

Visuellt går jag för en stil som liknar googles produkt "google now". En lätt och stilren form till skillnad från att imitera en specifik enhets gränssnitts-utseende. Exempel1: http://searchengineland.com/figz/wp-content/seloads/2013/04/google-now-cards.png
Exempel2:
http://osify.com/files/2012/07/heres-what-google-now-looks-like-information-pops-up-in-separate-cards-you-can-tap-the-microphone-to-do-a-voice-search-303x540.jpg

FRÅGOR: Vilken funktion i vilket program tycker du om/använder du, eller saknar du? Normalt är ju att man använder endast vissa funktioner i vissa appar. Tankar i övrigt?

Allt detta började jag med för ett tag sedan och jag brukar skriva loggar för att hålla koll på vad jag gjort, eftersom det hänt lite mer än vad som står här just nu så kommer jag posta dessa grejer om ett tag också

KarlAnka

2013-06-26, 10:00

Börjat testa lite användargränssnitt. Bl.a implementerat en "cardflip" effekt (css3 3d-transformation, hårdvaruaccelererad), vilket gör att man kan vända på kort och visa mer information. Tanken är att exempelvis kunna visa väder innan en löprunda eller annan extrainfo där. Eventuellt kan loggningen skeså på vissa typer av aktiviteter där logg-sidan är av samma storlek (ex checklista, vägning)

Stylat CSS
...för att få de looks jag önskar (google now stilen) och det har varit jävligt krångligt för att vara uppriktig. Visst, jquerymobile har en bra theme-funktion men den funkar inte bra för mig, alldeles för mycket bloat, för lite valmöjligheter, och ett system som passar min tillämpning dåligt - men nu blev det gjort iaf. Ett övergripande visuellt koncept är att genomgående styla alla typer av aktiviter i sin egen färg, ex alla träningspass är gröna, all mat är orange, och subsidor av detta (log, planering) har också inslag av denna färg. Samtidigt kan man representera dessa aktiviteter på större vyer (diagram, planering) med bara exempelvis en ruta utav denna färgen. På bilden nedan är kortet med väder ett "cardio" kort som är flippat (och alltså har väderutsikt på baksidan, tänkte visa några timmar framåt så man ev kan flytta på det)

FÖRSTA BILDEN :hbang:
https://dl.dropboxusercontent.com/u/15125678/app/today2.png

Bootstrap 3
In other news funderar jag på att gå över på det som kallas Bootstrap som verkar komma ut i en ny version (3) alldeles strax, då blir det till att styla om mycket =P Samtidigt lämnar jag då jquerymobile och kör "vanlig" jqery + bootstrap. Detta hjälper mig även vid utveckling av desktop-klienten. Jag blir av med vissa controllers ex auto-filter-sök-listor, men detta klarar jag koda nya själv.

Jag blir även av med auto-sid-byte via ajax som är inbyggt i jquerymobile men jag tror jag skriver något eget där också, custom för detta. Tanken är att ha kanske en html-sida per "avdelning" i appen som laddar det som behövs för den, och rycker data från min json-service i bakgrunden via ajax och DOM-manipulerar för att visa det som skall. Och alltså inte köra nya sidor för enskilda skärmbilder, som genererats med ex PHP.

ikoner
Har även byggt in font-awesome som är en uppsättning vektor-ikoner som jag kan använda ist för jquerymobiles begränsade png-ikoner. Ser ut som bootstrap kör med glyphicons som är något liknande. Det gäller bara att de ikoner finns som jag behöver! http://fortawesome.github.io/Font-Awesome/icons/

Idé
Google har location-services, vilket gör att jag kan hämta exempelvis alla matvarubutiker och restauranger i närheten av dig (om du tillåter, i samband med ex mat-loggning). Även gym. Vet inte hur bra det fungerar i praktiken, dvs vilka platser som finns och om dom ligger i kategorier

Problem
Mobilen går i sleep mode när man inte grejar med den, och jag har inte kontroll över browsern längre (timers etc. stannar) vilket gör att man inte kommer kunna logga löprundor kontinueligt om inte skärmen är på :( Mitt första problem med att inte köra en native-app.

KarlAnka

2013-06-26, 10:05

Måltidsutseende
Snyggat till "måltidskortet" med lite stapeldiagram och o dyl. Förslag på vilken data som kan vara intressant och visningssätt? Nu är det delen av dagens helhetliga planerade intag som visas (i procent och gram/cal). Här är frågan hur man skall hantera planerat / loggat intag rent visuellt. Överväger nån sorts sammanfattning längst ner på dagen.

https://dl.dropboxusercontent.com/u/15125678/app/today_meal.png

Diagram
Vidare har jag tittat lite på diagram-plugins, något som det kommer förekomma en del utav i denna app. Det är ju behagligt att använda något färdigt som innehåller allt man kan tänkas använda. Här är en som inkluderar drag-å-släpp utav datapunkter, något som kommer behövas i planerings-läget. http://www.jqplot.com/deploy/dist/examples/customHighlighterCursorTrendline.html Däremot finns det ingen "moving average" vilket är intressant vid vikt-loggning, men det går ju att implementera själv

PrimalAeon

2013-06-26, 10:15

Intressant!
För att lämna lite förslag, kolla in Withings API så att man kan nyttja invägningen där.

KarlAnka

2013-06-26, 12:50

Intressant!
För att lämna lite förslag, kolla in Withings API så att man kan nyttja invägningen där.

Detta var första kommentaren jag fick av en vän, och deras API ser ut att vara väldigt aktuellt - tack för inspelet! De pushar ut data så fort man gör en vägning. Så får jag lära mig hur OAuth funkar också. Från deras dokumentation (http://www.withings.com/en/api):

The WBS API offers a notification system that sends Push notifications in near-real time whenever new data is recorded for a user who linked their account with your service. We strongly encourage all partners to make the most of this notification system in order to create the best user experience and spread out server charge.

Mental

2013-06-26, 12:58

daloatf

2013-06-26, 13:07

Bra val att gå över till bootstrap. Blir mer cleant överlag. Har själv lämnar jquery mobile när jag gör hemsidor för mobila enheter. Enklare att göra ändringar.

Andy.da.wohoo

2013-06-26, 15:07

När är det dags för betatesta? Jag kan nog ställa mig som villig att försöka nyttja appen :)

Holmeros

2013-06-26, 15:08

När är det dags för betatesta? Jag kan nog ställa mig som villig att försöka nyttja appen :)

Jag med! :D

Jishuku

2013-06-26, 15:19

Jag med! :D

Me three.

Angående funktionalitet så är det enda jag saknar med myfitnesspal, förutom träningsbiten då, att man ska kunna kan se "average calorie intake" över en längre period - i siffror. Sist jag kollade visade de bara grafer vilket inte säger ett dugg om exakt hur mycket man ätit på en vecka eller månad.. går inte tyda.

PrimalAeon

2013-06-26, 21:58

Me three.

Angående funktionalitet så är det enda jag saknar med myfitnesspal, förutom träningsbiten då, att man ska kunna kan se "average calorie intake" över en längre period - i siffror. Sist jag kollade visade de bara grafer vilket inte säger ett dugg om exakt hur mycket man ätit på en vecka eller månad.. går inte tyda.

Den visar dock snittet på en vecka.

Jishuku

2013-06-26, 22:46

Den visar dock snittet på en vecka.

Den visar så vitt jag kan se staplar, och på veckovyn har varje stapel iofs antalet kalorier i sig så att man kan räkna ut snittet manuellt.. men på månadsvyn och längre så är det inga exakta siffror som går att få ut via "reports" eftersom staplarna är tomma.

Sen vore det ju bra om man även i veckovyn slapp räkna ut snittet själv, för om jag inte missat något så står det inget sådant någonstans.

Edit: Ser nu att man kan hålla muspekaren över staplarna för att få den enskilda dagens siffror. Men fortfarande ingen total sammanställning / snitt.

Edit 2: Märker nu att hemsidan och appen inte är exakt samma. I appen kan man se hur långt under ens kalorimål man ligger veckovis. Alltid något.. men ändå inte riktigt vad jag ville ha.

KarlAnka

2013-06-28, 09:51

Är bilden en "dummy?" Annars tycker jag inte graferna stämmer så bra med värdena?
Ja det är bara hittepå än så länge, fifflar med utseendet bara, det finns inget på "baksidan" så att säga :)

Angående funktionalitet så är det enda jag saknar med myfitnesspal, förutom träningsbiten då, att man ska kunna kan se "average calorie intake" över en längre period - i siffror. Sist jag kollade visade de bara grafer vilket inte säger ett dugg om exakt hur mycket man ätit på en vecka eller månad.. går inte tyda.
Noterat! Siffor och beränkningar ser jag inga problem med att slänga på hur mycket som helst av i slutändan.

Hur allt fungerar (baksidan)
Sedan sist har jag gått igenom heeeela databasstrukturen med tabeller och ungefärliga relationer vilket har tvingat fram ett jävla massa tänkande om hur hela systemet skall fungera rent konceptuellt (Ett schema skall innehålla templates från dag X till dag Y. En template skall innehålla dagar som skall innehålla activites som kan vara av typen MAT, TRÄNING, CHECKLIST etc. Aktiviteten TRÄNING skall kunna innehålla övningar, som i sin tur skall höra till muskelgrupper, vara av typer, loggas med sets/reps yada yada). Funderade på att kanske köra något schysst MVC framework (som förenklat är en konceptuell modell för att separera utseende och data), men efter att ha provkört CakePHP inser jag att detta blir alldeles för mycket abstraktioner och alldeles för mycket att sätta mig in i. Skall det bli något av detta får det vara något jag kan få ut hyffsat fort.

Framsidan
Eftersom Bootstrap 3 inte kommit med officiell release än och jag inte lyckats "bygga" den själv från work-in-progress versionen, har jag lyckats pussla ihop en fungerande version från olika andra källor så att jag kan börja bygga på utseende därifrån, och hålla tummarna för att den slutgiltiga versionen inte "förstör" något när den kommer.

1 repetition max
... är nu implementerat på serversidan. 1Rm beräkningen är enligt Brzycki formulan, den beräknar lägre 1RM vid lägre reps och jag antar att det är bättre att använda en formula som underskattar vikten man lyfter och inte överskattar (http://en.wikipedia.org/wiki/One-repetition_maximum). Exempelvis ger 55kg x 5reps, 1RM = 62kg
Första kodsnutten publicerad :hbang://calculate 1RM, Brzycki Formula
$oneRM = round(($lift * 36) / (37 - $reps));

Standards of strength
...är också på plats och var intressantare (källdata:http://startingstrength.com/files/standards.pdf), jag har vritt och vänt lite på datan för att försöka få fram exempelvis linjära förhållanden som kan implementeras med funktioner ist för "lookup" tabeller som populärt används, men utan att lyckas hitta dessa samband. Lösningen i slutändan blev att använda tabellerna som källdata och sedan "interpolera" nya rader mellan de befintliga för att upskatta gränsvärden för just din vikt. Exempelvis ger 84kg vikt gränsvärdena 37kg, 51kg, 63kg, 75kg, 101kg för de olika "klasserna" på over head press (Untrained, Novice, Intermediate, Advanced, Elite). Dessa data kommer visas exempelvis när man gör de övningar som har denna data, tänker mig liggande staplar med gränserna markerade och ditt 1RM markerat.

PureWhey

2013-06-28, 12:03

Ser grymt ut! :)

KarlAnka

2013-07-02, 15:19

"Framgång" serverside
Då har jag sedan sist skrapat fram en server och har en testmiljö uppe och går (PHP/MySQL) och så har jag skrivit en grundläggande klass för att hantera databasfrågorna på serversidan (PDO). Inte så kul men det skall ju göras det också. Vidare har jag en grundläggande styling i Bootstrap 3 nu istället och fixat lite pyssel kring det, saker som jag blev av med när jag lämnade jQuerymobile. Har ödslat alldeles för mycket tid på att få ordning på hårdvaruaccelererae "slide in" och "slide ut" animationer mellan sidorna, så som det normalt ser ut i appar. Men utan lycka :( Släpper det för tillfället och håller mig till fades. Vidare funderar jag på hur mycket av all HTML jag skalla generera "on the fly" (använda en templating engine som KnockoutJS kanske?), eller om jag skall förkoda mycket. Det tididgare är säkert lärorikast men tar väl lite tid att sätta sig in i. Mycket jobb med lite framgång än så länge,

Och kanske lite intressantare: Matvaror etc
Jag har även *host* "fixat" en extern källa på matvaror (med info om kalorier och macros), tanken är att rycka info därifrån när man söker som sedan lagsras i min egen databas, så att när nästa person söker så finns det "snabbt". Moral kring detta? Lärt mig lite proxyande och cross-site problem. Även hanterat struktureringen av detta så att det blir mer enhetligt av måttenheter. Jag konverterar allt till gram och ml, och macros lagras i per 100gram (ml), vilket jag blev nöjd med (oz, lbs, cups, pounds, fluid ounces, grms, grams, dl och så vidare!) Fan va dom är krångliga amerikanerna med sina enheter och fraktioner (2/3cup). Saker som inte går att konvertera slänger jag bort (1 banana, 1 plate, 1 tbsp) Har INTE gått på micronutients, skippar det i första omgången.

Skulle behöva barcode-scanning men inte hittat en lösning (inga databaser tillgängliga enligt min research, inte heller hittat någon annan källa att "haka mig på") Praktiskt skulle det fungera att ladda upp foto genom browsern och analysera på serversidan, men jag har inget att matcha nummer emot :(

kommer lite mer info relaterat till träning om ett tag! Som säkert är roligare än teknik-uppdateringarna... *flex*

mikaelj

2013-07-02, 15:26

Hur dynamiskt är det? Kan jag stoppa in valfria träningspass där som inte följer någon tidigare struktur?

KarlAnka

2013-07-02, 19:56

Ja tanken är att du skall kunna "bygga" vilka pass som helst. "Som inte följer någon tidigare struktur" kan jag inte svara på, någon struktur måste passet ju ha annars går det ju inte att definiera vad det är, en slumpmässig övning varje dag? Men om du menar att du får bygga strukturen själv så JA :)

Detta gör du, eller väljer någon annans redan klara:
En "mall" innehåller en grupp dagar, en dag innehåller träningspass och kost (mm). Denna mall läggs till ditt schema från exempelvis dag X och 10 veckor framåt, sen kan du schemalägga mall B nästkommande 5veckor, där dagarna i mallen "loopar" (inte helt ovanligt är ju att man bygge scheman på 7 dagar). Ett träningspass på en dag specas sedan med övningar (jag jobbar på alla för-definierade just nu, ex "bänkpress") men även fylla i egna. Övningen specas sedan med sets och reps (och ev paustid, som senare blir en timer), konditions relaterade aktiviteter specas m ex distans/hastighet (inte alla detaljer klara). Skulle du kunna planera din träning med detta? Om inte så vad saknar du? Jag skulle vilja täcka så mycket som möjligt inom rimliga gränser.

Andy.da.wohoo

2013-07-03, 11:10

Ungefär som appen Jefit, när det kommer till träningspassen? I så fall vill jag påpeka att den stora bristen i den appen är när man svävar utanför sitt fasta schema. T ex så kör jag bänkpress och hantelpress vid varje bröstpass, men brukar lägga till andra övningar som skiftar från pass till pass beroende på vad jag känner för. Då saknas funktionen att lägga till en extraövning enbart i dagens pass, utan jag måste ha förinställt exakt alla övningar jag ska köra under passet. Lägg till en knapp i stil med "Jag vill köra fler/andra övningar" där man får välja övning direkt under träningspasset. Så blir det mer dynamiskt/flexibelt.

KarlAnka

2013-07-03, 12:54

Ungefär som appen Jefit, när det kommer till träningspassen?
Korrekt! (Jefit nämnt i första inlägget) schemat man bygger enligt ovan beskrivning blir bara "grunden" för din dag (förutfyllt), för varje aktivitet loggar man sedan vad man faktiskt gjort eller inte gjort, inklusive extra saker såsom mat, övningar, vägningar etc.

Update: Igår fick jag ordning på så kallad hash-navigation mellan sidor/länkar internt

KarlAnka

2013-07-03, 19:25

Och såhär ser det ut på mobil i skrivande stund, hash-navigation mellan färdiga undersidor är skrotat till fördel för sidor som genereras "on the fly" med jQuery Templates (blev alltså inte KnockoutJS, inte att förväxlas med templates som koncept i appen :smash:)
https://dl.dropboxusercontent.com/u/15125678/app/Photo%202013-07-03%2020%2017%2057.png