CSC510-2015-Axitron / maze

Main repo for maze game
0 stars 2 forks source link

Set up API Client #48

Closed meneal closed 9 years ago

meneal commented 9 years ago

Created a new branch to set up a reasonable API client and then run some tests in mocha. First shot using this to try to avoid reinventing the wheel on building the client. We'll see how it works out.

meneal commented 9 years ago

So I've finally made some headway after a bunch of nonsense. I tried this using three different options and finally got it working using restjs. IT looks like I haven't done much, but believe me it took me a long time to get there. The main issue was just in figuring out how to deal with the headers and the body of the actual request. Probably aren't being the most secure with this at this point, but I think we can do better later when necessary. It's not like we're storing credit card numbers anyway, it's just mazes.

I'll get all of Wills commands working in here and then figure out how to get them in the browser. Good thing about restjs is that it was made to do both. For now I'm doing this in node.

duh102 commented 9 years ago

The only real way to secure things would be to use https instead of http, there's not a lot more you can do. Have to send a username and password over to the server SOMETIME, and after that we just use the token, so that removes at least some of the risk.

meneal commented 9 years ago

So I've got all of the commands working except for POSTS on /maze, and /maze/:mazeno. What would commands look like for those in curl? You can take a look at what I've done so far if you want. It's still really simple at this point. Should I get this going in the browser first or get the tests working?

I wasn't completely sure what we would want output to look like on this at this point. For now I'm returning objects in a callback, or returning a boolean value if appropriate. Seems like it should be pretty easy to use from there.

duh102 commented 9 years ago

Oh, just realized I answered this question in #49 instead of here. Check near the bottom of the messages for syntax.

duh102 commented 9 years ago

Just checked in with my friend who did some cross-origin stuff with javascript and turns out all I had to do was import a module serverside. Now you should be able to do anything you like using ajax calls like the following (no extra libs necessary!):

$.ajax({
    url: 'http://axemaze-db.herokuapp.com/login',
    method: 'POST', //can also be GET
    beforeSend: function(xhrObj){
        xhrObj.setRequestHeader("Content-Type","application/json");
        xhrObj.setRequestHeader("Accept","application/json");
    },
    data: JSON.stringify({"email":"dummy10@dum.my", "password":"test"}), //for POST data, unnecessary for GET
    //headers: { 'authorization':"tokentokentoken" }, //for authorization
    success: function(data) { console.log(data); },
    error: function(req, status, e) { console.log(req.status); console.log(req.responseText); console.log(status); console.log(e); }
});

req.status has the status code, req.responseText has a stringified JSON response in it (use JSON.parse() to grab a JSON object out), data in the success function actually is a parsed JSON object, no need for JSON.parse().

macluo commented 9 years ago

If async becomes an issue, an alternative command is XMLHttpRequest(). Found this command when doing some research earlier today.

meneal commented 9 years ago

I'll probably use this: https://github.com/jpillora/jquery.rest, just because it has a pretty nice wrapper for all of that functionality and may end up be quicker to use. Thanks for the heads up on the AJAX stuff though, if jquery-rest doesn't work in the first 15 minutes I'll just go to either of these directions.

On Wed, Mar 18, 2015 at 12:39 AM, Mark Luo notifications@github.com wrote:

If async becomes an issue, an alternative command is XMLHttpRequest(). Found this command when doing some research earlier today.

— Reply to this email directly or view it on GitHub https://github.com/CSC510-2015-Axitron/maze/issues/48#issuecomment-82736380 .

meneal commented 9 years ago

The node version of the api client is complete. I figured out how to use it in the browser too so hopefully I can show everyone how to do that and we can just use what I've done in node rather than have duplication of effort. I'll post a tutorial later.

meneal commented 9 years ago

So this is done. There are a few things to keep in mind with the calls, but you can see some example calls in a file in the apiClient branch called apiuser.js as well as the tests in test-nodeAPI.js. Let me know if there are any questions. Also if there is anything that should be changed to facilitate something one of you is doing I'm happy to get it knocked out.

Browserify stuff

You'll notice if you go into apiuser.js that there are a set of functions that aren't commented out. These are the ones we'll run in our little test app. You'll want to run:

npm install -g browserify

That'll give you browserify globally. If you want to just run it straight out of the npm modules that's fine too. I have it in there as a dev dependency, feels easier to just install globally though. Then you'll just run:

browserify apiuser.js -o webApi.js

I've also pushed a really simple index.html that just has webApi.js in it. Open up index.html, and you'll just see the background, but if you open the browser console you'll find the output from those functions.

So the basic idea is if someone wants to try to make calls in the actual game javascript files using this api you'll want to just run browserify on that file and then you'll be able to make those calls. Note that anything you want to use apiClient in will require the node style:

var apiClient = require('./apiClient.js');

At the start of the file. Let me know if any of that doesn't make sense and I'll be happy to clarify. I think we can close this as complete once someone gets a change to try using this in the browser to pull maze files for the actual game. After that we can change stuff with bug reports.

duh102 commented 9 years ago

Should we then merge in apiclient into master to get at that apiclient?

meneal commented 9 years ago

Definitely can do that at this point. I probably won't get back to this until late this afternoon. If you're comfortable doing the merge I think that would be awesome.

On Friday, March 20, 2015, Will Morrow notifications@github.com wrote:

Should we then merge in apiclient into master to get at that apiclient?

— Reply to this email directly or view it on GitHub https://github.com/CSC510-2015-Axitron/maze/issues/48#issuecomment-84003526 .

duh102 commented 9 years ago

I'll be traveling all day and tomorrow so I won't be able to get to it or anything else until Sunday most likely.

meneal commented 9 years ago

The merge is complete. Check it out and let me know what you think.

macluo commented 9 years ago

This is awesome! I followed your instructions and saw the console messages. It works like a charm!

meneal commented 9 years ago

What's not so awesome is that the db build is broken, so is the main build. I'm trying to figure it out now.

On Fri, Mar 20, 2015 at 12:36 PM, Mark Luo notifications@github.com wrote:

This is awesome! I followed your instructions and saw the console messages. It works like a charm!

— Reply to this email directly or view it on GitHub https://github.com/CSC510-2015-Axitron/maze/issues/48#issuecomment-84063496 .

meneal commented 9 years ago

So this does work for sure in the browser. It's a bit different than I anticipated. I actually avoided doing any requires in any files that are loaded in the browser. Browserify has a global module function basically what it can do is take my apiClient and turn it into a module for use in the browser. The only problem is the db. So right now there are some weird behaviors that I'll post elsewhere. Additionally the mazes that are in the browser are pretty much useless. I'll also post that as another issue. I'm going to mark this as closed and then work it through other issues.

macluo commented 9 years ago

Got a bunch of failures in APIclient test from the latest push, saying maze is missing. I guess this has something to with DB being updated.

meneal commented 9 years ago

Yep. Everything in the test setup is associated with the earlier test mazes. Shouldn't be a big deal to reassociate with the new data that is in the DB.

On Fri, Mar 20, 2015 at 11:39 PM, Mark Luo notifications@github.com wrote:

Got a bunch of failures in APIclient test from the latest push, saying maze is missing, I guess this has something to with DB being updated.

— Reply to this email directly or view it on GitHub https://github.com/CSC510-2015-Axitron/maze/issues/48#issuecomment-84236286 .

meneal commented 9 years ago

I just fixed the test in master. Should build fine now.

On Fri, Mar 20, 2015 at 11:53 PM, Matthew Neal meneal@gmail.com wrote:

Yep. Everything in the test setup is associated with the earlier test mazes. Shouldn't be a big deal to reassociate with the new data that is in the DB.

On Fri, Mar 20, 2015 at 11:39 PM, Mark Luo notifications@github.com wrote:

Got a bunch of failures in APIclient test from the latest push, saying maze is missing, I guess this has something to with DB being updated.

— Reply to this email directly or view it on GitHub https://github.com/CSC510-2015-Axitron/maze/issues/48#issuecomment-84236286 .

macluo commented 9 years ago

I actually have a question. On apiClient, is there a function to return the mazeJSON object?

meneal commented 9 years ago

Yep. getMaze() returns this object:

{ mazeno: , * displayName: , \ userForMaze:

, \* height: , \* width: , \* mazeJSON: '{"width":2,"height":3,"start":[0,1],"end":[1,2],"board":[[6,5,6],[12,1,8]]}', - category: } On Sun, Mar 22, 2015 at 3:48 PM, Mark Luo notifications@github.com wrote: > I actually have a question. On apiClient, is there a function to return > the mazeJSON object? > > — > Reply to this email directly or view it on GitHub > https://github.com/CSC510-2015-Axitron/maze/issues/48#issuecomment-84686388 > .
macluo commented 9 years ago

Got it. Thanks. mazeJSON itself is a string so it needs to be parsed again, right?

meneal commented 9 years ago

Sorry about that earlier ugly formatting. It is a string. So if you run:

apiClient.getMaze(19, function(resp){ console.log(resp.mazeJSON); });

You'll get back:

{"width":2,"height":3,"start":[0,1],"end":[1,2],"board":[[6,5,6],[12,1,8]]}

Which you can parse with this:

JSON.parse(resp.mazeJSON);

macluo commented 9 years ago

Thanks. Maze id 19 is being rendered incorrectly. So I need to figure out figure out where it could go wrong with the code.

meneal commented 9 years ago

I noticed that too. The other mazes were rendering fine, it was just 19.

On Sun, Mar 22, 2015 at 4:01 PM, Mark Luo notifications@github.com wrote:

Thanks. Maze id 19 is being rendered incorrectly. So I need to figure out figure out where it could go wrong with the code.

— Reply to this email directly or view it on GitHub https://github.com/CSC510-2015-Axitron/maze/issues/48#issuecomment-84689460 .