Remote Spark Web App

Social Project Share
1

Over the last couple days I’ve been working on a web app for my buddy’s remote starter project. I tried to make everything easily customize-able all in one file and one place in the user editable data of the index.html file.

If you’re looking for a simple way to interface some controls and feedback in your project, this might be right up your alley.

Try out this ready to go example, and then start hacking on it to suit your needs:
https://github.com/technobly/Remote-Spark
(A Remote Starter example that’s a customize-able simple Spark Core web app controller with feedback through Variables.)

Designed to work well on the iPhone 5s. Let me know how it works on your smartphone as well.

Thanks to jflasher for his really great Spark Helper web app that was the starting point for this project!

12 Likes
2

Hi,

I see you use integers to return the states Spark.variable("startstate", &startState, INT);.
I like to return a value from an analog port, do you know if it is possible to return other data types (e.g.Floats or Strings)?

Thanks,
Henk

3

Please see my post here how you might return Floats and Strings :smile:

1 Like
4

Thanks for this @BDub. I’ve just cusomised it to show the readings from my weather station:

I have a question, for you or anyone to answer. If I publish this to web, it would be easy for anyone to view the source and find my core id and access token. I assume that’s why you said “upload to a secret URL”. But if I want to make the data available to anyone, how can I protect my core?

Thanks,

Paul

1 Like
5

Very nice @PaulRB!

The first way I can think of is to create a small REST API interface between your Server and Client…

Server could have something like an index.php script that does not expose your details, but does all of the requests to the spark API, and then returns the data to your client app.

The client app would be very similar to what you have there, but just sending requests to the index.php script.

See this example:

This would also work with any server technology really… like a node.js server. Anything you can create a robust API with that won’t expose or compromise your server.

6

Sorry @BDub, I read through that thread but could not see or at least understand anything that answers my question. Did @Coffee change the way his project works before the end of the thread?

7

If you look at the way he did his communication from client Spark to index.php you can do something similar from your client app to an index.php. But instead of communicating to the bus website, you will be communicating to the spark API.

This probably needs a nice example done for it if you are not too familiar with web development. Let me know if you want to take a stab at it or still need help.

1 Like
8

Sorry @BDub, maybe I’m being a bit thick! I can’t see an index.php on @Coffee’s github repository. If I follow one of the links there to an older Arduino repository, there is an index.php there, but I don’t think its Spark Core related

9

Here is a http example:

https://github.com/synox/spark-core-examples/blob/master/http_timeapi.cpp

10

Thanks for posting that, @Coffee. Seems to be some firmware code to get the current time from an internet time service. That will be useful to me.

But I am still not understanding how it helps me hide my core id and token on web pages I publish that need to display Spark variables?

11

@PaulRB Sorry I missunderstood your problem.
What you need to do:

  • Upload this html to a webserver
  • Create a PHP-Script that forwards the request to the Spark-Cloud
  • Access the PHP Script from the html file. The Admin-Token would be added with in the php script.

What @BDub was refering to was to following file, which I deleted already: https://github.com/synox/Spark-Busstop-Light/blob/2df182763ca91c566d166e2aa04d17594a2dcc57/php_webservice/index.php#L16

1 Like
12

I though that must have been what happened. Your link is the file I mentioned in my post earlier. Its an Arduino application and doesn't show any example calls to spark cloud, so its only so much use to me as an example, unfortunately.

So... PHP... another new language to get to grips with!

Question: This PHP script will be hosted on my web server, correct? And the Javascript in my HTML page will query that instead of querying the spark cloud directly. If the PHP script has the core ID and token in it, what's to stop anyone taking it from there?

Thanks for your patience with this web-dev-noob!

Paul

13

Paul, it’s ok, thats’s how we all started. :wink:

The script is executed on the server, so everything somebody else can see is the response of the request, not the source code.

I would do something like this. It takes all the parameters, adds the access token, and sends it to the api.

<?php
$device = $_REQUEST["device"];
$method = $_REQUEST["method"];
if(!$device||!$method) die("device or method param missing\n");


// add access token
$_REQUEST["access_token"] = "12399....123123";

// create params
$params = http_build_query($_REQUEST);

// make request
$url = "https://api.spark.io/v1/devices/" . $device . "/" . $method . "?" . $params;
$response = file_get_contents($url);
echo $response; 
?>

PS: I didn’t test it :wink:

1 Like
14

Awexome! Glad I got you two hooked up on this! Please be sure to share your final code @PaulRB as it would be a great example :wink:

15

Hi PaulRB, can you share yours, or did I miss somethinh? :smile:

16

Thanks @Coffee. Despite not knowing any PHP, I think I follow what it is doing. I could hide the core id too, by changing it to not expect that as a parameter, and adding it to the forwarded request, just like the access token.

OK, great. Now, what do I do with the above code? Just drop it onto my web server, any particular file name? Which folder (presumably not public_html)?And how do I change my web page’s javascript/JQuery to refer to it?

Happy to share all files once that’s working!

Thanks,

Paul

17

I seem to have got it to work:

I took @Coffee’s PHP script, put my access token in it and uploaded it to my web server as “weather.php” into the public_html folder.

Then I changed my html (the one based on @BDub’s original remote control app) as follows:

Removed my access token;

Change the line

var baseURL = "https://api.spark.io/v1/devices/";

to

var baseURL = "weather.php";

and the line

  var url = baseURL + coreID + "/" + variable + "?access_token=" + accessToken;

to

  var url = baseURL + "?method=" + variable + "&device=" + coreID;

I am not using any spark functions, only variables, so I did not fix the parts of the javascript code that deal with functions.

Have I done this correctly?

I am still concerned that someone could download my weather.php file and get the access token from that, although I can’t seem to be able to do it myself.

Thanks again @Coffee and @BDub, the web-dev-fog is starting to clear a little for me!

18

Hi @PaulRB,

Last time I used PHP, my goto method for securing config data was to make a “config.php” file somewhere out of the web root (depends on how you’re hosting it), and readable by the web-server uid, and include a reference to that in your page. In theory your web server should be sensible enough to not serve php source, but in the event that fails somehow at least your config file is not visible without some other more extensive hack.

19

Technically it depends how your web server is configured, but generally when a server is set up to run a program like a PHP script it won’t respond with the source of the program itself, but rather run the program and send the result to the client. So, the privacy of your token depends on the resistance of your web server to hacking or other malicious activity.

Edit: yup, what @Dave said… lol

1 Like
20

Thanks @amanfredi, yes, that's what seem to happen when I try to view the .php file using my browser. I'm no hacker though, so I don't know how securely my web server is set up. I pay for it anually, I certainly didn't set it up myself!

1 Like