{"action":"created","comment":{"url":"https://api.github.com/repos/tessel/t2-start/pulls/comments/47189733","id":47189733,"diff_hunk":"@@ -0,0 +1,228 @@\n+{::options parse_block_html=\"true\" /}\n+\n+<div class=\"row\">\n+<div class=\"large-8 columns\">\n+# Build Your Own Internet\n+\n+Along with connecting to an existing Wifi network, Tessel 2 can also act as a portable router and emit a custom Wifi network. We can use this functionality to connect directly with our Tessel through a web browser. By the end of this article, we'll be able to control the Tessel LEDs through a web app served by the Tessel.  \n+\n+In your command line, make a folder for your Tessel code, then initialize a Tessel project in that folder by running each of the following commands in the terminal:\n+\n+`mkdir tessel-router`\n+\n+`cd tessel-router`\n+\n+`t2 init`\n+\n+Great! Now you're set up to run code on Tessel. Your \"tessel-router\" folder now contains a \"package.json\" with some metadata Node uses for your project, and a file called \"index.js\".\n+</div>\n+</div>\n+\n+<div class=\"row\">\n+<div class=\"large-12 columns\">\n+\n+<hr>\n+\n+\"index.js\" contains code to make the blue and green LEDs blink. We're going to replace that with our initial server setup. Let's take a look:\n+\n+{% highlight javascript %}\n+// Import the interface to Tessel hardware\n+var tessel = require('tessel');\n+// Load the http module to create an http server.\n+var http = require('http');\n+\n+// Configure our HTTP server to respond with \"Hello from Tessel!\" to all requests.\n+var server = http.createServer(function (request, response) {\n+  response.writeHead(200, {\"Content-Type\": \"text/plain\"});\n+  response.end(\"Hello from Tessel!\\n\");\n+});\n+\n+// Listen on port 8080, IP defaults to 192.168.1.101\n+server.listen(8080);\n+\n+// Put a friendly message on the terminal\n+console.log(\"Server running at http://192.168.1.101:8080/\");\n+\n+{% endhighlight %}\n+\n+Now that our server is in place, let's get our access point set up. In the terminal, run the following command:\n+\n+`t2 ap -n TesselRouter`\n+\n+This will make an open wifi network called TesselRouter. If you open the wifi setting of your computer or a separate device like a smartphone or tablet, and scan for new devices, you should be able to see and connect to this new network. After connecting to TesselRouter, run the following command in your terminal:\n+\n+`t2 run index.js`\n+\n+Once you see \"Server running at http://192.168.1.101:8080/\" in the terminal, go to http://192.168.1.101:8080/ in the web browser of the device connected to the TesselRouter network. You should \"Hello from Tessel!\" appear on the screen. You can press \"Control+C\" while in your terminal to stop this server. \n+\n+Now let's take it up a notch by adding some interactivity between the web page and the Tessel!\n+\n+<hr>\n+\n+Let's start this next part by building out the web page we want Tessel to send to your web browser. Create a file called `index.html` in your project directory and open it up in your preferred text editor to add the initial html for our web page:\n+\n+{% highlight html %}\n+<!DOCTYPE html>\n+<html lang=\"en\">\n+<head>\n+  <meta charset=\"UTF-8\">\n+  <title>Tessel Web App</title>\n+</head>\n+<body>\n+  <h1>Hello from Tessel!</h1>\n+  <p>Press a button to toggle an LED.</p>\n+  <ul>\n+    <li>\n+      <button class=\"led-button\" data-led=\"2\">Green</button>\n+      Status: <span class=\"led-status\"></span>\n+    </li>\n+    <li>\n+      <button class=\"led-button\" data-led=\"3\">Blue</button>\n+      Status: <span class=\"led-status\"></span>\n+    </li>\n+  </ul>\n+</body>\n+</html>\n+{% endhighlight %}\n+\n+In that html, we have a heading, a line of instructions for the user, and a list of buttons for controlling a corresponding LED on the Tessel. Below that list of buttons we'll add some JavaScript for communicating with the Tessel:\n+\n+{% highlight html %}\n+<script type=\"text/javascript\">\n+  // Get a NodeList of elements with the class 'led-button'\n+  var buttons = document.querySelectorAll('.led-button');\n+\n+  // Iterate through that Nodelist and add a 'click' EventListener\n+  Array.prototype.forEach.call(buttons, function (button) {\n+    button.addEventListener('click', toggleLed);\n+  });\n+\n+  // Our event handler function for 'click' events on the LED buttons\n+  function toggleLed (event) {\n+    var button = event.target;\n+    var ledIndex = button.getAttribute('data-led'); // The index of the led in the Tessel.led array\n+    var statusNode = button.parentNode.querySelector('.led-status'); // The sibling status span to update\n+\n+    // create a new XHR for communicating requests to our Tessel server\n+    var req = new XMLHttpRequest();\n+\n+    // Open a GET request to '/leds/:index'\n+    req.open('GET', '/leds/' + ledIndex);\n+\n+    // Once the request gets a successful response, update that statusNode with the status of the LED.\n+    req.onload = function(e) {\n+      if (req.readyState == 4 && req.status == 200) {\n+        if (req.status == 200) {\n+          var response = JSON.parse(req.responseText);\n+          statusNode.textContent = response.on ? 'ON' : 'OFF';\n+        } else { \n+          console.log('Error'); \n+        }\n+      }\n+    }\n+    req.send(); // send our request to the server\n+  }\n+</script>\n+{% endhighlight %}\n+\n+While there are some comments in the previous code snippet, the summary is when a button with the class \"led-button\" is clicked, we grab the info from its \"data-led\" attribute and make a request to our Tessel server with that info in the url. After we get a successful response from the server, we update the \"Status\" field next to the button with the state of the corresponding LED. \n+\n+Now let's check out `index.js` again to finish up the project. First, we're going to make a few changes to our server set up:","path":"ap.md","position":130,"original_position":130,"commit_id":"286c2d503f048afd65106720f7ef28e7b1a58ec0","original_commit_id":"286c2d503f048afd65106720f7ef28e7b1a58ec0","user":{"login":"Frijol","id":454690,"avatar_url":"https://avatars.githubusercontent.com/u/454690?v=3","gravatar_id":"","url":"https://api.github.com/users/Frijol","html_url":"https://github.com/Frijol","followers_url":"https://api.github.com/users/Frijol/followers","following_url":"https://api.github.com/users/Frijol/following{/other_user}","gists_url":"https://api.github.com/users/Frijol/gists{/gist_id}","starred_url":"https://api.github.com/users/Frijol/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Frijol/subscriptions","organizations_url":"https://api.github.com/users/Frijol/orgs","repos_url":"https://api.github.com/users/Frijol/repos","events_url":"https://api.github.com/users/Frijol/events{/privacy}","received_events_url":"https://api.github.com/users/Frijol/received_events","type":"User","site_admin":false},"body":"set up  > setup","created_at":"2015-12-10T05:14:14Z","updated_at":"2015-12-10T05:14:14Z","html_url":"https://github.com/tessel/t2-start/pull/77#discussion_r47189733","pull_request_url":"https://api.github.com/repos/tessel/t2-start/pulls/77","_links":{"self":{"href":"https://api.github.com/repos/tessel/t2-start/pulls/comments/47189733"},"html":{"href":"https://github.com/tessel/t2-start/pull/77#discussion_r47189733"},"pull_request":{"href":"https://api.github.com/repos/tessel/t2-start/pulls/77"}}},"pull_request":{"url":"https://api.github.com/repos/tessel/t2-start/pulls/77","id":53180082,"html_url":"https://github.com/tessel/t2-start/pull/77","diff_url":"https://github.com/tessel/t2-start/pull/77.diff","patch_url":"https://github.com/tessel/t2-start/pull/77.patch","issue_url":"https://api.github.com/repos/tessel/t2-start/issues/77","number":77,"state":"open","locked":false,"title":"[WIP] Access Point tutorial","user":{"login":"HipsterBrown","id":3051193,"avatar_url":"https://avatars.githubusercontent.com/u/3051193?v=3","gravatar_id":"","url":"https://api.github.com/users/HipsterBrown","html_url":"https://github.com/HipsterBrown","followers_url":"https://api.github.com/users/HipsterBrown/followers","following_url":"https://api.github.com/users/HipsterBrown/following{/other_user}","gists_url":"https://api.github.com/users/HipsterBrown/gists{/gist_id}","starred_url":"https://api.github.com/users/HipsterBrown/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HipsterBrown/subscriptions","organizations_url":"https://api.github.com/users/HipsterBrown/orgs","repos_url":"https://api.github.com/users/HipsterBrown/repos","events_url":"https://api.github.com/users/HipsterBrown/events{/privacy}","received_events_url":"https://api.github.com/users/HipsterBrown/received_events","type":"User","site_admin":false},"body":"Fixes #73 \r\n\r\nThe entire, completed project: https://github.com/hipsterbrown/tessel-router\r\n\r\nNeeds:\r\n\r\n- [ ] some images/screenshots during stages of development to help break up all the text\r\n- [ ] a working demo video\r\n\r\nFeedback topics:\r\n\r\n- is it too much for one project?\r\n- is it easy to follow?\r\n- should there be more info about access points and how they work?","created_at":"2015-12-09T21:24:58Z","updated_at":"2015-12-10T05:14:14Z","closed_at":null,"merged_at":null,"merge_commit_sha":"0054364e008633869bbaf065f7a7c579f82239c4","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/tessel/t2-start/pulls/77/commits","review_comments_url":"https://api.github.com/repos/tessel/t2-start/pulls/77/comments","review_comment_url":"https://api.github.com/repos/tessel/t2-start/pulls/comments{/number}","comments_url":"https://api.github.com/repos/tessel/t2-start/issues/77/comments","statuses_url":"https://api.github.com/repos/tessel/t2-start/statuses/286c2d503f048afd65106720f7ef28e7b1a58ec0","head":{"label":"HipsterBrown:ap-tut","ref":"ap-tut","sha":"286c2d503f048afd65106720f7ef28e7b1a58ec0","user":{"login":"HipsterBrown","id":3051193,"avatar_url":"https://avatars.githubusercontent.com/u/3051193?v=3","gravatar_id":"","url":"https://api.github.com/users/HipsterBrown","html_url":"https://github.com/HipsterBrown","followers_url":"https://api.github.com/users/HipsterBrown/followers","following_url":"https://api.github.com/users/HipsterBrown/following{/other_user}","gists_url":"https://api.github.com/users/HipsterBrown/gists{/gist_id}","starred_url":"https://api.github.com/users/HipsterBrown/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HipsterBrown/subscriptions","organizations_url":"https://api.github.com/users/HipsterBrown/orgs","repos_url":"https://api.github.com/users/HipsterBrown/repos","events_url":"https://api.github.com/users/HipsterBrown/events{/privacy}","received_events_url":"https://api.github.com/users/HipsterBrown/received_events","type":"User","site_admin":false},"repo":{"id":47510341,"name":"t2-start","full_name":"HipsterBrown/t2-start","owner":{"login":"HipsterBrown","id":3051193,"avatar_url":"https://avatars.githubusercontent.com/u/3051193?v=3","gravatar_id":"","url":"https://api.github.com/users/HipsterBrown","html_url":"https://github.com/HipsterBrown","followers_url":"https://api.github.com/users/HipsterBrown/followers","following_url":"https://api.github.com/users/HipsterBrown/following{/other_user}","gists_url":"https://api.github.com/users/HipsterBrown/gists{/gist_id}","starred_url":"https://api.github.com/users/HipsterBrown/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HipsterBrown/subscriptions","organizations_url":"https://api.github.com/users/HipsterBrown/orgs","repos_url":"https://api.github.com/users/HipsterBrown/repos","events_url":"https://api.github.com/users/HipsterBrown/events{/privacy}","received_events_url":"https://api.github.com/users/HipsterBrown/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/HipsterBrown/t2-start","description":"Tessel 2 start docs! Work in progress, open for contributions.","fork":true,"url":"https://api.github.com/repos/HipsterBrown/t2-start","forks_url":"https://api.github.com/repos/HipsterBrown/t2-start/forks","keys_url":"https://api.github.com/repos/HipsterBrown/t2-start/keys{/key_id}","collaborators_url":"https://api.github.com/repos/HipsterBrown/t2-start/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/HipsterBrown/t2-start/teams","hooks_url":"https://api.github.com/repos/HipsterBrown/t2-start/hooks","issue_events_url":"https://api.github.com/repos/HipsterBrown/t2-start/issues/events{/number}","events_url":"https://api.github.com/repos/HipsterBrown/t2-start/events","assignees_url":"https://api.github.com/repos/HipsterBrown/t2-start/assignees{/user}","branches_url":"https://api.github.com/repos/HipsterBrown/t2-start/branches{/branch}","tags_url":"https://api.github.com/repos/HipsterBrown/t2-start/tags","blobs_url":"https://api.github.com/repos/HipsterBrown/t2-start/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/HipsterBrown/t2-start/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/HipsterBrown/t2-start/git/refs{/sha}","trees_url":"https://api.github.com/repos/HipsterBrown/t2-start/git/trees{/sha}","statuses_url":"https://api.github.com/repos/HipsterBrown/t2-start/statuses/{sha}","languages_url":"https://api.github.com/repos/HipsterBrown/t2-start/languages","stargazers_url":"https://api.github.com/repos/HipsterBrown/t2-start/stargazers","contributors_url":"https://api.github.com/repos/HipsterBrown/t2-start/contributors","subscribers_url":"https://api.github.com/repos/HipsterBrown/t2-start/subscribers","subscription_url":"https://api.github.com/repos/HipsterBrown/t2-start/subscription","commits_url":"https://api.github.com/repos/HipsterBrown/t2-start/commits{/sha}","git_commits_url":"https://api.github.com/repos/HipsterBrown/t2-start/git/commits{/sha}","comments_url":"https://api.github.com/repos/HipsterBrown/t2-start/comments{/number}","issue_comment_url":"https://api.github.com/repos/HipsterBrown/t2-start/issues/comments{/number}","contents_url":"https://api.github.com/repos/HipsterBrown/t2-start/contents/{+path}","compare_url":"https://api.github.com/repos/HipsterBrown/t2-start/compare/{base}...{head}","merges_url":"https://api.github.com/repos/HipsterBrown/t2-start/merges","archive_url":"https://api.github.com/repos/HipsterBrown/t2-start/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/HipsterBrown/t2-start/downloads","issues_url":"https://api.github.com/repos/HipsterBrown/t2-start/issues{/number}","pulls_url":"https://api.github.com/repos/HipsterBrown/t2-start/pulls{/number}","milestones_url":"https://api.github.com/repos/HipsterBrown/t2-start/milestones{/number}","notifications_url":"https://api.github.com/repos/HipsterBrown/t2-start/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/HipsterBrown/t2-start/labels{/name}","releases_url":"https://api.github.com/repos/HipsterBrown/t2-start/releases{/id}","created_at":"2015-12-06T19:26:58Z","updated_at":"2015-12-06T19:26:58Z","pushed_at":"2015-12-09T21:13:37Z","git_url":"git://github.com/HipsterBrown/t2-start.git","ssh_url":"git@github.com:HipsterBrown/t2-start.git","clone_url":"https://github.com/HipsterBrown/t2-start.git","svn_url":"https://github.com/HipsterBrown/t2-start","homepage":"http://tessel.github.io/t2-start","size":779,"stargazers_count":0,"watchers_count":0,"language":"CSS","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"gh-pages"}},"base":{"label":"tessel:gh-pages","ref":"gh-pages","sha":"cab78ab336ecb093dad4c501f5554fbea8cfdf48","user":{"login":"tessel","id":5573563,"avatar_url":"https://avatars.githubusercontent.com/u/5573563?v=3","gravatar_id":"","url":"https://api.github.com/users/tessel","html_url":"https://github.com/tessel","followers_url":"https://api.github.com/users/tessel/followers","following_url":"https://api.github.com/users/tessel/following{/other_user}","gists_url":"https://api.github.com/users/tessel/gists{/gist_id}","starred_url":"https://api.github.com/users/tessel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tessel/subscriptions","organizations_url":"https://api.github.com/users/tessel/orgs","repos_url":"https://api.github.com/users/tessel/repos","events_url":"https://api.github.com/users/tessel/events{/privacy}","received_events_url":"https://api.github.com/users/tessel/received_events","type":"Organization","site_admin":false},"repo":{"id":37142770,"name":"t2-start","full_name":"tessel/t2-start","owner":{"login":"tessel","id":5573563,"avatar_url":"https://avatars.githubusercontent.com/u/5573563?v=3","gravatar_id":"","url":"https://api.github.com/users/tessel","html_url":"https://github.com/tessel","followers_url":"https://api.github.com/users/tessel/followers","following_url":"https://api.github.com/users/tessel/following{/other_user}","gists_url":"https://api.github.com/users/tessel/gists{/gist_id}","starred_url":"https://api.github.com/users/tessel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tessel/subscriptions","organizations_url":"https://api.github.com/users/tessel/orgs","repos_url":"https://api.github.com/users/tessel/repos","events_url":"https://api.github.com/users/tessel/events{/privacy}","received_events_url":"https://api.github.com/users/tessel/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/tessel/t2-start","description":"Tessel 2 start docs! Work in progress, open for contributions.","fork":false,"url":"https://api.github.com/repos/tessel/t2-start","forks_url":"https://api.github.com/repos/tessel/t2-start/forks","keys_url":"https://api.github.com/repos/tessel/t2-start/keys{/key_id}","collaborators_url":"https://api.github.com/repos/tessel/t2-start/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/tessel/t2-start/teams","hooks_url":"https://api.github.com/repos/tessel/t2-start/hooks","issue_events_url":"https://api.github.com/repos/tessel/t2-start/issues/events{/number}","events_url":"https://api.github.com/repos/tessel/t2-start/events","assignees_url":"https://api.github.com/repos/tessel/t2-start/assignees{/user}","branches_url":"https://api.github.com/repos/tessel/t2-start/branches{/branch}","tags_url":"https://api.github.com/repos/tessel/t2-start/tags","blobs_url":"https://api.github.com/repos/tessel/t2-start/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/tessel/t2-start/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/tessel/t2-start/git/refs{/sha}","trees_url":"https://api.github.com/repos/tessel/t2-start/git/trees{/sha}","statuses_url":"https://api.github.com/repos/tessel/t2-start/statuses/{sha}","languages_url":"https://api.github.com/repos/tessel/t2-start/languages","stargazers_url":"https://api.github.com/repos/tessel/t2-start/stargazers","contributors_url":"https://api.github.com/repos/tessel/t2-start/contributors","subscribers_url":"https://api.github.com/repos/tessel/t2-start/subscribers","subscription_url":"https://api.github.com/repos/tessel/t2-start/subscription","commits_url":"https://api.github.com/repos/tessel/t2-start/commits{/sha}","git_commits_url":"https://api.github.com/repos/tessel/t2-start/git/commits{/sha}","comments_url":"https://api.github.com/repos/tessel/t2-start/comments{/number}","issue_comment_url":"https://api.github.com/repos/tessel/t2-start/issues/comments{/number}","contents_url":"https://api.github.com/repos/tessel/t2-start/contents/{+path}","compare_url":"https://api.github.com/repos/tessel/t2-start/compare/{base}...{head}","merges_url":"https://api.github.com/repos/tessel/t2-start/merges","archive_url":"https://api.github.com/repos/tessel/t2-start/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/tessel/t2-start/downloads","issues_url":"https://api.github.com/repos/tessel/t2-start/issues{/number}","pulls_url":"https://api.github.com/repos/tessel/t2-start/pulls{/number}","milestones_url":"https://api.github.com/repos/tessel/t2-start/milestones{/number}","notifications_url":"https://api.github.com/repos/tessel/t2-start/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/tessel/t2-start/labels{/name}","releases_url":"https://api.github.com/repos/tessel/t2-start/releases{/id}","created_at":"2015-06-09T16:03:42Z","updated_at":"2015-11-26T02:41:18Z","pushed_at":"2015-12-09T21:24:58Z","git_url":"git://github.com/tessel/t2-start.git","ssh_url":"git@github.com:tessel/t2-start.git","clone_url":"https://github.com/tessel/t2-start.git","svn_url":"https://github.com/tessel/t2-start","homepage":"http://tessel.github.io/t2-start","size":1333,"stargazers_count":4,"watchers_count":4,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":11,"mirror_url":null,"open_issues_count":19,"forks":11,"open_issues":19,"watchers":4,"default_branch":"gh-pages"}},"_links":{"self":{"href":"https://api.github.com/repos/tessel/t2-start/pulls/77"},"html":{"href":"https://github.com/tessel/t2-start/pull/77"},"issue":{"href":"https://api.github.com/repos/tessel/t2-start/issues/77"},"comments":{"href":"https://api.github.com/repos/tessel/t2-start/issues/77/comments"},"review_comments":{"href":"https://api.github.com/repos/tessel/t2-start/pulls/77/comments"},"review_comment":{"href":"https://api.github.com/repos/tessel/t2-start/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/tessel/t2-start/pulls/77/commits"},"statuses":{"href":"https://api.github.com/repos/tessel/t2-start/statuses/286c2d503f048afd65106720f7ef28e7b1a58ec0"}}}}