Tutorial - Att göra en applikation som använder api i Meteor/React för Mac

Detta är en guide som du kan följa för att göra en enklare applikation i Meteor. Applikationen använder du som en att göra-lista där du kan lägga till sysslor, ta bort dem och markera som gjorda. Du loggar in som en användare, efter att du skapat ett konto och kan då se alla dina egna sysslor som du lagt till. Efter steg 2 följer en vidare tutorial på hur du kan logga in med din github-användare och även hämta information därifrån. Det görs med autentiseringen OAuth2. I detta fall kommer vi att hämta användarens email som finns dold, men som genom en accesstoken (nyckel) kan nås. Tutorialen kräver att du har ett GitHub-konto och att du skrivit in en emailadress på inställningarna där.

1. Installera Meteor på din dator via terminalen genom att skriva detta som du får genom att besöka Meteors hemsida:

För Mac: “curl https://install.meteor.com/ | sh“
2. Följ tutorialen steg 1-8 som du hittar på den här hemsidan:

“https://www.meteor.com/tutorials/react/creating-an-app”

Med en liten skillnad. Tutorialen ger oss facebook-login men senaste månaden ändrade Facebook detta och det krävs nu mycket mer för att logga in där.

När tutorialen säger att du ska skriva in :
“meteor add accounts-ui accounts-password” eller ev.
“meteor add accounts-facebook accounts-password”
Skriv då istället detta för att koppla till GitHub:
“meteor add accounts-github accounts-password” XXX kolla upp

3. Som jag skrev i introduktionen är det från och med detta steg som du kopplar upp användaren mot något sorts socialt login, här github, och hämtar information från API:et. Jag kommer utgå ifrån Figur 1 för att förklara hur det går till och jag refererar till den med stegnummer och namnet på händelsen som står. Därefter visas det i kod vad som ska göras. Det som också behöver göras är att installera

session och http-paket genom terminalen. Det gör du genom att skriva dessa kommandon, en i taget i terminalen:

“meteor add session” och “meteor add http”

Session installeras så att emailen kan sparas i slutet till en sessionvariabel och nås av hela applikationen. Meteor/React fungerar så att det är olika grenar i ett träd nedåt som vi arbetar i och variabler som appen behöver sätts som en session så att den kan nås överallt. Http-paketen behövs för att kunna göra en http-request och hämta emailen.

 

 

Figur 1.

 

 

Vi kan beskriva Client som den to-do-applikationen som vi byggde med tutorialen. Resource owner är en användare som autentiserar en applikation för att få tillgång till ett konto. Här är det vi som godkänner från GitHub att få använda information. Resource server är den server doär informationen finns lagrad, här GitHub. Authorization server är en server som verifierar användarens identitet och ger en accesstoken till vår applikation. Den används sedan för att göra en förfrågan om information till ett visst api. OAuth2 är ett protokoll för sociala login. Det är ett autenticeringsramverk som gör det möjligt för tredje partens appar att få begränsad åtkomst till en HTTP-service. BIlden ovan visar flödet för OAuth2 och nedan kommer även en beskrivning på hur det fungerr.

3.1. Authorization request: När du skrivit in och valt GitHub istället för Facebook klickar du på logga in och då kommer en ruta visas där det är möjligt att logga in. Client skickar tillbaka ett response med bl.a. id och ett URI som sedan Authorization server kommer skicka tillbaka till client när access blivit godkänt eller nekat.

Denna förfrågan med loginrutan kommer när du försöker logga in på applikationen och en ruta visas där du ska logga in

Men före det, det första du måste göra är att logga in på GitHub, sen trycker du på profilbilden -> settings -> developer settings -> och väljer att registrera en ny OAuth-applikation. Eftersom webbapplikationen inte är registrerad kör vi på vår egen dator, därför anger du “https://localhost:3000” i fältet Home page och sedan som callbackfunktion “https://localhost:3000/callback”. Här är det viktigt att använda HTTPS och inte HTTP, med s kommer mer säkerhet.

 

3.2.

Authorization response: När du skapat en applikation på GitHub så ser du då något som heter Client ID och Client secret, se Figur 2, dessa är de två saker du skriver in i rutan på din applikation för att autenticera användningen av den och trycker på ok. 

 

 

Figur 2.

 

 

3.2 Authorization Grant: Detta steg ger oss samtidigt godkännandet av att använda applikationen och i detta fall, mitt login och applikationen som vi skapat och godkänd användningen av en del av användarens information.

 

 

3.3 Access Token: Där finns även en accesstoken som kommer tillbaka från det förra stegets förfrågan, det kommer som ett JSONobjekt. Det är som en nyckel för att få tag på ytterligare information om användaren som är hemlig.

 

3.4 Access Token: Med hjälp av denna nyckel kan vi då genom att göra en http- förfrågan till resourceservern (GitHub) hämta till exempel användarens email.

 

 

3.5 Resource: Emailen skrivs ut i applikationen som en rubrik för att visa att den är hämtad.

 

 

Här följer det som precis beskrevs fast i kod

4. Skapa en ny fil i imports/api/ och som jag här kallar getstuff.js, koden hittar du nedan. För att kunna hämta paket med information om användaren används HTTP vilket måste importeras, även Session för att kunna spara ner informationen som hämtas så att App.js kan nå den. Här är getStuff-funktionen som du anropar i nästa steg med en inloggad användare som inparameter. Den har en hårdkodad api- adress, en url-adress, och hämtar också en accesstoken som vi fått tillbaka efter autentiseringen. Både url:en och accesstoken används som inparametrar för att anropa fetchEmail just under. Där används http för att göra en förfrågan till resource server. Här är det viktigt att du skriver parametern exakt “access_token” för att det är en sträng där du definierar vilken inparameter du skickar med. I http-förfrågan ska det också finnas (error, res) som antingen ger dig ett felmeddelande eller ett resultat. Resultatet skrivs ut i consoleloggen för att dubbelkolla vilket det är som du fått. Här skapas även en sessionvariabel för att kunna nå den senare. I resultatet som är en JSON nås din email genom att gå via data till email. 

Figur 3.

 

5. I figur 4 kan ni se en uppdaterad version av funktionen withTracker i App.js som uppdaterar information i applikationen som kan komma att ändras under användningen. Första if-satsen kollar hela tiden om en användare är inloggad. När den väl blir positiv anropas funtionen getStuff som skapades i föregående steg, den tar in den inloggade användaren. I förra steget när emailen sparades i en session, kan den nu nås i App.js och sparas ner som en variabel email. När du nu sparat den som en variabel finns den att nå genom “props”, applikationens properties, som visas i steg 7 när den ska skrivas ut.

Figur 4.

 

 

6. För att kunna anropa de nya funktionerna i App.js behöver du importera getstuff högst upp. Här är den uppdaterade importlistan. 

Figur 5.

 

 

7. Det här läggs till innanför header-taggarna i renderfunktionen för att kunna skriva ut resultatet av vår förfrågan. Är det din email har allt gått rätt till.

Figur 6.

 

 

8. Resultatet för när det gått rätt till för mig. 

Figur 7.

 

Mer om OAuth 2 för de intresserade

Mycket är redan beskrivet ovan men för att reda ut några fler eventuella frågetecken. I grund och botten är OAuth 2 ett autentiseringsramverk för att möjliggöra för applikationer att kunna få tag på begränsad användarinformation på en http-service så som facebook, GitHub eller Google. OAuth 2 ger användarautentisering till servicen som finns på applikationen och godkänner en tredje parts tillgång till användarkontot. Så i denna tutorial som vi precis gjort är det med hjälp av OAuth 2 som vår egenbyggda applikation kan få tag på användarinformation såsom email hos GitHub.

 

Toronto del 2

>> Cia <<
 
Hej!
Dagen då vi åkte hem till Sverige, fredag 22a december. Hyresvärden hade fixat fram en våg till oss, väldigt snällt. Vi packade på och de nästan knökfulla väskorna som vi hade skulle till slut vägas. Jag fick ta med mig 23 kg och Tonje 20, hon nailade sin på prick 20kg men jag fick 26kg. Då var det redan kört så gick och köpte lite kanadensisk lönnsirap att ta med hem haha. Jag hade ändå inte så mycket plats kvar i väskan då vi shoppat redan också men finns det hjärterum så. Efter vi ställt väskorna i hallen tog vi en uber till Casa Loma, som betyder Hill House. Det är ett stort hus, nästan som ett kungahus, som byggdes i början av 1900-talet till finansiären Sir Henry Mill Pellatt. Nu är det ett museum och landmärke och det var verkligen ett dåtida lyxhus. Där gick vi omkring och kollade lite, upp i båda tornen, kollade på en oklar is-show och våningen om krig. När vi kände att vi sett det, som de turister vi är, så tog vi en uber hem igen. Tonje tipsade om en app som heter Foursquare där man kan recensera turistattraktioner, lunchställen, nattklubbar, barer, restauranger och sånt för att sen lättare kunna bestämma vart man ska gå och äta. Där syns det hur dyr en restaurang är, betyget och kommentarer. Med hjälp av den appen gick vi in på ett mexikanskt ställe där jag åt en quesadille, älska ost, och Tonje tog en burrito. Det var ganska mycket mat så vi hade båda ett mellanmål till senare.
 
Efter 15 tog vi en uber till tågstationen, därifrån går det ett direkttåg till flygplatsen som tog kanske 20 min, det gick rätt snabbt. Tonjes tåg gick vid 18 och mitt vid 20 men jag tänkte att jag häckar hellre på flygplatsen och får sällskap dit än någon annanstans. Vid incheckningsdisken tyckte han som jobbade där att min carry on var för stor, den var kanske liiiite bombat full, men jag sa att jag alltid haft den med på planet och det har inte varit något problem förr. Han frågade om jag kunde flytta om lite grejer i väskorna och få den stora, som nu var runt 28 kg hehe, ner till 23 så fick jag checka in båda gratis. Jag sa bara nej direkt, fanns ingen chans. När jag sen sa att om den lilla ska checkas in måste jag flytta runt lite till ryggsäcken men då blev han tyst och bara knappade. Jag sa också att jag vet att jag måste betala övervikt. Fick då mitt boardingpass och han sa att jag var klar. Det visade sig att han skrev aldrig in vikten på min väska och satte inte ens på ett Heavy-papper så att de som bär vet om att den var tung. Det var väldigt oklart.
 
När jag sen skulle kolla på sittplatsnumret stod det bara "SBY" och jag gick fram till någon och frågade vad det betydde. De visste inte och jag kunde inte få en plats förrän högst en timme innan boarding. Där satt jag, rätt orolig över att inte komma hem i tid till jul, och visste inte om jag skulle få en plats på planet. Till slut så hade de fixat en plats och det var inte bara min det var strul med, de ropade upp ganska många i högtalaren som fick nya boardingpasses. Till Island, 5 h, satt jag mellan två personer där ena skulle ha hela armstöder nästan hela resan, det var otroligt drygt. Hon fattade inte ens när jag som typiskt svensk försöker visa lite att jag kan inte dra ihop mig mer och puttar lite på hennes arm. Näe, den ligger kvar! Nuförtiden har de också börjat ta betalt för mat på flygen, det trodde jag att man skulle få men jag köpte den billigaste mackan istället, med bara ost och skinka. Det fick duga! En timme var jag på Island innan jag klev på nästa plan som tog 3 h, då sov jag nog en del då det gick rätt snabbt. Väl framme på Arlanda skulle jag ta min väska men kände att den släpade lite väl mycket och såg sen att ett helt hjul var borta. Jag fick en liten spricka på väg till busstationen i London som kanske hjälpte till men hur kan ett helt hjul bara ramla bort..? Anmälde det på flygplatsen och de frågade om jag ville ha en ny väska där men jag har en likadan blå hemma redan så nu har jag skickat in och frågat om ersättning istället. Brorsan och hans tjej kom och hämtade mig på flygplatsen, väldigt snällt, och sen körde vi hem till Norrsundet. 
 
Det har varit så mysigt att hänga hemma lite, även fast antibiotikakuren som jag fick i Kanada inte hjälpte för mina halsmandlar så nu lider jag vidare och låter det gå över av sig själv. Jag ser också fram emot att träffa alla i Umeå igen, ett halvår borta var perfekt. Jag åker upp nästa vecka med pappa, vi ska ta med ALLA grejer jag har här hemma, sjukt mycket, och vi ska även hämta det jag har i förrådet i Umeå. 
 
Kanada har varit kung och jag skulle rekommendera University of Western Ontario, alla vet vilken skola "Western" är, till att och även att åka på utlandsstudier. Tack för mig! Här kommer de sista bilderna.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Torn 1.
 
 
 
 
 
 
Torn 2 och ett kort på torn 1.
 
 
 
 
 
 
 
 
 
Redo för hemfärd med sin nya mössa!

Toronto

>> Cia <<
 
Hej!
 
Tänkte slänga upp ett sista inlägg från Kanada som blir uppdelat i två, nu är jag hemma igen men har inte bloggat om min och Tonjes weekend till Toronto än så det måste ju ske. De två resterande tentorna skrev jag på måndagen och på tisdagmorgon stack vi till Toronto. Mediatentan gick helt okej men Webtech ska bli spännande att se, jag har verkligen ingen aning om hur det gick. Det är ganska sjukt att International Office räknar kurserna i Kanada som 6 hp bara för att terminen är kortare, men i själva verket har vi nästan dubbelt så många föreläsningar i varje kurs. Vilket betyder en hel del mer innehåll och tentorna blir rätt stora. Jaja, skolan är över och jag njuter av ett pluggfritt jullov. Det första på några år och ingen tenta som väntar i januari. 
 
När vi kom till Toronto ubrade vi till vårt Air BnB och vi trodde ju att vi kommit fel när vi först såg var ingången, men som tur var det ändå rätt mysigt innanför. Kolla bilderna nedan så får ni se vad jag pratar om. Vi lämnade av väskorna och gick direkt för att äta lite lunch och för att se NHL-MATCH!! En av de häftigaste upplevelserna i mitt liv, Tonje sa redan innan matchen börjat när vi väntade i arenan att det var värt pengarna. Det är väldigt dyra biljetter så inget man gör jätteofta, de som vi köpte var nästan högst upp och kostade 800kr. Det var så häftigt att uppleva stämningen i hallen och vi lyckades även pricka in matchen som var samma dag som deras hundraårsdag. För 100 år sedan hette de Toronto Arenas och de hade till och med tröjor med den gamla designen. Vi var lite sugna på att köpa en varsin matchtröja men i shopen kostar den 1500kr så vi skippade det. Det var också häftigt att Toronto vann med 8-1 så många mål och väldigt glada människor. Just eftersom att det var 100-årsjubileum så var det mycket extragrejer att man ibland glömde av matchen. De kastade bland annat tröjor till publiken, intervjuade gamla spelare och lite annat. Det var alltid små barn som fick matchtröjorna dock, storlek XL.... 
 
På kvällen åkte vi till Cheesecake Factory som jag sett att de öppnat upp i ett köpcenter en bit från centrum. Jag var tvungen att dra med Tonje dit, maten är gudomligt god! Där måste man ställa sig på kö när man kommer dit så det gjorde vi direkt, vi fick vänta två timmar så då passade vi på att julhandla lite. Vi båda åt en varsin steak som var rätt god faktiskt. Efteråt köpte vi med en varsin cheesecake hem men den orkade vi inte förrän dagen efter. På onsdagen körde vi en turistdag, man kunde köpa ett turisthäfte med entrebiljett till fem grejer för priset av 2.5 så vi tjänade på det när vi skulle besöka tre st. Vi började med Ripley's aquarium, lite mysigt att gå omkring och kolla på fiskar där. Efter det åt vi lunch och spontanade oss in på bryggeriet bredvid akvariumet. Vi tänkte gå till CN tower i skymningen för att få både ljusa och mörka bilder så då kunde vi lika gärna gå in och smaka en varsin Steam Whistle-öl. Den var inget särskilt måste jag säga. När vi var klar där så åkte vi upp i CN tower, bara för att det var jul så fick vi åka upp extra högt till 133:e våningen, annars "bara" 100:e. Det blev alltså 447m upp i luften, också väldigt häftigt. På kvällen åkte vi faktiskt till China Town för att äta lite god mat, Tonje hade sett förr att de hade mycket massage på olika ställen där för rätt billig penning så vi spontanade lite in på en sån. Det blev fotmassage 30 min och rygg/nackmassage 30 min. Jag fick en man och Tonje en kvinna, vi frågade efter fotmassagen om vi kunde byta då jag inte gillar hård massage och Tonje älskar det men de fattade knappt vad vi sa och sa sen "no switch". Så man fick väl stå ut då haha. Sen promenerade vi hem till våra cheesecakes och kollade på en film i sängen, en liten myskväll. Stan tuned för nästa inlägg!
 
Bilder från akvariumet:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Bilder från CN Tower:
 
 
 
 
 
 
 
 
 
 
Lite filmsnuttar från hockeyn: