{
    "componentChunkName": "component---src-templates-blog-post-tsx",
    "path": "/blog/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot/",
    "result": {"data":{"blogPost":{"title":"Building a Continuous Integration & Deployment Solution for the IoT.","slug":"/blog/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot/","authorNodes":[{"name":"Elrick Ryan","slug":"/people/elrick-ryan/"}],"markdown":{"html":"<p>Great, Scott! Even Doc may say we are in the future. Embedded devices and systems are everywhere and today almost every one of them is connected to the internet. Currently, there are over an estimated 8 billion connected devices transferring data and communicating via the internet and that number will continue to grow exponentially to an estimated over 27 billion by 2020. To put that number in perspective the population is estimated at 321 million in the United States and 7 billion in the world. Is anyone else thinking Skynet here? Now that you have that mental picture you now have to build, maintain, and deploy software to these devices that could be located anywhere and in anything. Wondering how to do that? Do not worry The Frontside has your back!</p>\n<p>We are always pushing our limits and looking for new and better ways to build software combining over a decade of experience with new hot tech and cool intuitive user interfaces. Connected devices and The Internet of Things are part of the future and this is the first part of our setup for giving users the ability to control devices, anywhere and anytime within the Internet of Things (IoT). However, before we get there let's talk devices.</p>\n<p>##Embedded Devices and Systems</p>\n<p>An embedded device is an object that contains a special-purpose computing system. It can be part of an embedded system and that system could house multiple embedded devices controlling different parts in the system. Popular today are embedded devices that take the form of microcontrollers like the Arduino, Tessel 2 or single board computers like the Raspberry Pi3 that have input and output pins that allow you to connect other devices. When these devices are connected to the internet they are deemed \"smart\" and without a Graphical User Interface they are called \"headless\" devices or systems.</p>\n<p>There are tons of examples of embedded devices and systems but here are a few.</p>\n<ul>\n<li>Appliances</li>\n<li>ATM Machines</li>\n<li>Lights</li>\n<li>Televisions</li>\n<li>Watches</li>\n<li>Cell Phones</li>\n<li>Point of Sales Systems</li>\n<li>Interactive Kiosks</li>\n<li>Routers</li>\n<li>Vehicles <em>( ie. Tesla p90D, or Faraday FF91  those cars are so nice. )</em></li>\n<li>Microcontrollers: <em>(ie. Arduino, Tessel 2)</em></li>\n<li>Single board computer: <em>(ie. Raspberry Pi3)</em></li>\n<li>Drones</li>\n<li>Oceanographic Multisensor Buoy</li>\n<li>Automated Industrial Systems</li>\n</ul>\n<p>And the list can really go on and on. When putting this together i thought, hmm, all this surrounding embedded device and systems talk sounds very similar to my working definition of IoT.</p>\n<h2 id=\"what-the-heck-is-iot\" style=\"position:relative;\"><a href=\"#what-the-heck-is-iot\" aria-label=\"what the heck is iot permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What the heck is IoT</h2>\n<p>IoT is the inter-networking of physical devices. Physical devices included but are not limited to software, buildings, sensors, electronics, vehicles, and people. The IoT allows these physical devices ( embedded devices and system included ) to send data that will be sensed or controlled remotely across the internet, allowing for more direct integration of the physical world into computer-based systems. These connected devices are what make up the internet of things (IoT). Now that we have all these definitions we can continue our setup.</p>\n<h2 id=\"setup-iot-deployment\" style=\"position:relative;\"><a href=\"#setup-iot-deployment\" aria-label=\"setup iot deployment permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Setup IoT Deployment</h2>\n<p>All good software has a solid foundation comprised of various things supporting it and deployment is one of those things. With IoT we have both hardware and software. That hardware needs to have software deployed, maintained and updated on it. To get that accomplished: Enter Resin.io. Resin.io is described as a \"software deployment and configuration Platform for embedded devices\". It is an extremely powerful platform and is comprised of a client, server, and device software components.</p>\n<p>Excellent, this sounds like it will solve our problem so let's set it up.</p>\n<h3 id=\"setting-up-resinio\" style=\"position:relative;\"><a href=\"#setting-up-resinio\" aria-label=\"setting up resinio permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Setting up Resin.io</h3>\n<p>Let's get rolling.</p>\n<p>First you need to create an account at <a href=\"http://www.resin.io\" target=\"_blank\">Resin.io</a></p>\n<p>In the Resin.io dashboard add your GitHub SSH public key that you use to push code to GitHub into Resin.io.</p>\n<figure class=\"figure\" alt=\"add public key from github to resin.io dashboard\">\n  <img class=\"figure-img img-fluid\" src=\"/img/2017/06/21/building-a-ci-cd-deployment-solution-for-the-iot/resin/1-add-public-key-to-resin.png\"/>\n  <figcaption class=\"figure-caption\"> <em><strong>Figure 1: </strong>Add public key from GitHub to Resin.io</em></figcaption>\n</figure>\n<p>Next create your application, give it a name and pick your device type from the list.</p>\n<figure class=\"figure\" alt=\"create application in resin.io dashboard\">\n  <img class=\"figure-img img-fluid\" src=\"/img/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot_resin_2-create-app-in-resin.png\"/>\n  <figcaption class=\"figure-caption\"> <em><strong>Figure 2: </strong>Create Application in Resin.io dashboard and pick device type</em></figcaption>\n</figure>\n<p>Download the resinOS. Which will give you the Device OS specific for your device. When we created the application Resin.io gave us a remote url to point to the resin server. The url looks likes:</p>\n<p><code class=\"language-text\">git remote add resin yourusername@git.resin.io:yourusername/mycoolapp</code>.</p>\n<p>We will need that later.</p>\n<figure class=\"figure\" alt=\"download resinOS image\">\n  <img class=\"figure-img img-fluid\" src=\"/img/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot_resin_3-download-resinOS.png\"/>\n  <figcaption class=\"figure-caption\"> <em><strong>Figure 3: </strong>Download the resinOS image for your device</em></figcaption>\n</figure>\n<p>Choose the configuration you would like.</p>\n<figure class=\"figure\" alt=\"select resinOS build and config image\">\n  <img class=\"figure-img img-fluid\" src=\"/img/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot_resin_4-pick-resinOS-and-config.png\"/>\n  <figcaption class=\"figure-caption\"> <em><strong>Figure 4: </strong>Select resinOS build and config</em></figcaption>\n</figure>\n<p>After downloading the resinOS image. You need to burn that image onto a SD card for each device you want to connect under you myCoolApp. You <a href=\"http://www.etcher.io/\" target=\"_blank\">download Etcher</a> which will make the process simple.</p>\n<figure class=\"figure\" alt=\"burn resinos image using etcher\">\n  <img class=\"figure-img img-fluid\" src=\"/img/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot_resin_5-burn-resinOS-img-using-etcher.png\">\n  <figcaption class=\"figure-caption\"> <em><strong>Figure 5: </strong>Burn image using etcher</em></figcaption>\n</figure>\n<p>After the resinOS img has completed burning onto an SD card you can place that SD card into whatever device you want to connect to Resin.io. The Resin.io platform will start the provisioning of your device to their server.</p>\n<p>Remember, if you burn this resinOS image associated with the application that you created onto multiple SD cards and place each one into a device then all of those devices will show up under that application in the Resin.io dashboard.</p>\n<figure class=\"figure\" alt=\"device is connected to resin.io\">\n  <img class=\"figure-img img-fluid\" src=\"/img/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot_resin_6-device-is-connected.png\">\n  <figcaption class=\"figure-caption\"> <em><strong>Figure 6: </strong>Device is now connected to Resin.io</em></figcaption>\n</figure>\n<p>When you click into your application on the Resin.io dashboard you will see a list of all the devices that are connected under your myCoolApp.</p>\n<p>How ever many devices you have will show up in this list.</p>\n<figure class=\"figure\" alt=\"list of all devices connected in application\">\n  <img class=\"figure-img img-fluid\" src=\"/img/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot_resin_7-devices-in-list-within-each-app.png\">\n  <figcaption class=\"figure-caption\"> <em><strong>Figure 7: </strong>All devices that are connected under this application</em></figcaption>\n</figure>\n<h4 id=\"congratulations\" style=\"position:relative;\"><a href=\"#congratulations\" aria-label=\"congratulations permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Congratulations!</h4>\n<p>Your devices are now connected to Resin.io.</p>\n<hr>\n<h3 id=\"lets-get-some-code-on-our-device\" style=\"position:relative;\"><a href=\"#lets-get-some-code-on-our-device\" aria-label=\"lets get some code on our device permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Let's get some code on our device</h3>\n<p>To begin if you do not have a repo let's make one.</p>\n<ul>\n<li>Setup a repo on GitHub</li>\n<li>Clone that repo on your computer</li>\n</ul>\n<p>Remember when we create our myCoolApp in Resin.io we were giving an url to enable us to point at the Resin.io server. We now need to add that remote address.</p>\n<p>At the terminal within the GitHub repo folder you just cloned. Copy and paste that Resin.io remote address</p>\n<p><code class=\"language-text\">$ git remote add resin yourusername@git.resin.io:yourusername/mycoolapp</code></p>\n<p>In terminal run <code class=\"language-text\">$ git remote show</code> you should see this get returned.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">origin\nresin</code></pre></div>\n<p>Go ahead and write some application code of your choice.</p>\n<p>Now you are ready to push your code to Resin.io and ultimately to your devices. Commit your code and then in the terminal run:</p>\n<p><code class=\"language-text\">git push resin master</code></p>\n<p>Resin.io will start the process of building and containerizing your code and then push it onto the devices. Resin.io will use either your package.json (node) or a Dockerfile if present to build docker container. The Dockerfile will always win if both are present and provide fine-grain installation commands for building your docker container. While that is building let's expand on what containerizing means.</p>\n<p>Resin.io builds <a href=\"http://www.docker.com/what-docker\" target=\"_blank\">Docker</a> containers and uses those containers to house all the application code, libraries and dependencies needed for your code to run on the device. Containers are isolated entities that you can send anywhere that will run as expected because they encapsulate everything needed to run. As mentioned you can create a Dockerfile to get control over the building of your container. When creating your Dockerfile remember to include one of the base images provided by Resin.io specific to your device.</p>\n<p>Hey look, our build is complete! You should see a lovely unicorn in the terminal.</p>\n<figure class=\"figure\" alt=\"resin deploys code to device\">\n  <img class=\"figure-img img-fluid\" src=\"/img/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot_resin_8-resin-complete-containerizing-code.png\">\n  <figcaption class=\"figure-caption\"> <em><strong>Figure 8: </strong>Code is successfully build and deployed to your device</em></figcaption>\n</figure>\n<p>Nice! It is all working. We have software that is being deployed to a physical device but it is not as automated and continuous as we would like it. So let's go a step further.</p>\n<h1 id=\"always-be-shipping\" style=\"position:relative;\"><a href=\"#always-be-shipping\" aria-label=\"always be shipping permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Always. Be. Shipping.</h1>\n<p>That is a motto in software development. After you write your application code and have it in the hands of users, you will be maintaining, adding new features, updating, and fixing bugs in that code. So hopefully you will be shipping code all the time.</p>\n<h2 id=\"setting-up-circleci\" style=\"position:relative;\"><a href=\"#setting-up-circleci\" aria-label=\"setting up circleci permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Setting up circleCI</h2>\n<p>While it is true that we have deployment with Resin, we want to setup Continuous Integration and Deployment as part of that solid foundation of building software we spoke of earlier. We want developers to be able work iteratively and safely. And what else?</p>\n<p>Always Be Shipping.</p>\n<p>Enter circleCI.</p>\n<p>Having Continuous Integration and Deployment in place will allow developers to leverage the power of GitHub and collaborate. CircleCI will run the tests and validate all of our code against those tests before being merged into production and updated on the devices.</p>\n<p>Let's setup circle.</p>\n<p>First setup an account at <a href=\"http://www.circleci.com\" target=\"_blank\">circleCI</a></p>\n<p>Now we need to get circleCI and Resin.io to play nice and communicate securely with each other to do this we need to generate a public / private ssh-key pair without a paraphrase.</p>\n<p>At the terminal run:</p>\n<p><code class=\"language-text\">ssh-keygen -f resinCircle.rsa -t rsa -N ''</code></p>\n<p>You can replace <code class=\"language-text\">resinCircle.rsa</code> with whatever name you want to call this ssh-key.</p>\n<p>This will generate the public/private ssh-key pair that we will need later.</p>\n<p>Now go to the circleCI dashboard and find the IoT project that you created in GitHub in the project list. When you find it click on the settings icon.</p>\n<figure class=\"figure\" alt=\"project in circleci dashboard\">\n  <img class=\"figure-img img-fluid\" src=\"/img/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot_circle_1-circleci-project-list.png\">\n  <figcaption class=\"figure-caption\"> <em><strong>Figure 9: </strong>Find project in circleci dashboard</em></figcaption>\n</figure>\n<p>When the settings options appear find ssh-permissions in the list and click it.</p>\n<figure class=\"figure\" alt=\"ssh permissions for project in circleci\">\n  <img class=\"figure-img img-fluid\" src=\"/img/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot_circle_2-select-ssh-permissions.png\">\n  <figcaption class=\"figure-caption\"> <em><strong>Figure 10: </strong>SSH Permissions in circleci project settings</em></figcaption>\n</figure>\n<p>Then click add-key and add your private ssh-key that you generated.</p>\n<figure class=\"figure\" alt=\"add private ssh-key to circleci\">\n  <img class=\"figure-img img-fluid\" src=\"/img/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot_circle_3-add-ssh-private-key.png\">\n  <figcaption class=\"figure-caption\"> <em><strong>Figure 11: </strong>Add ssh private key to circleci</em></figcaption>\n</figure>\n<p>Now we need to go back to our Resin dashboard. Go to \"preferences\" and then \"ssh-keys\". From there, click ssh-keys and add the public ssh-key from the pair we generated into Resin.io.</p>\n<figure class=\"figure\" alt=\"add private ssh-key to circleci\">\n  <img class=\"figure-img img-fluid\" src=\"/img/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot_circle_4-add-public-key.png\">\n  <figcaption class=\"figure-caption\"> <em><strong>Figure 12: </strong>Add public key to Resin.io dashboard</em></figcaption>\n</figure>\n<h2 id=\"congratulations-1\" style=\"position:relative;\"><a href=\"#congratulations-1\" aria-label=\"congratulations 1 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Congratulations</h2>\n<p>You now have Continuous Integration and Deployment setup for IoT.</p>\n<p>This is what an image map of our setup would look like.</p>\n<figure class=\"figure\" alt=\"Image map of deployment solution\">\n  <img class=\"figure-img img-fluid\" src=\"/img/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot_resin-circleci-github.png\">\n  <figcaption class=\"figure-caption\"> <em><strong>Figure 13: </strong>Image map of deployment solution</em></figcaption>\n</figure>\n<p>Thanks for reading! I’m Elrick Ryan (<a href=\"https://twitter.com/elrickvm\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">@elrickvm</a> on twitter), and I love building UI.</p>\n<p>If you're like us and always pushing the limits of awesome. We're the Frontside <a href=\"http://frontside.com/contact/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">drop us a line</a> and let's build it and ship it.</p>","frontmatter":{"date":null,"description":"Smart homes, smart devices, smart vehicles. The Internet of Things is here! You want to be able to build software for IoT and deploy, maintain, and update it on your devices that may be located anywhere and within anything. This is the first part of our IoT setup connecting users to the Internet of Things.","tags":["iot","resin.io","javascript","circleci"],"img":{"childImageSharp":{"fixed":{"src":"/static/9f5a632758b3cb3ce95ab74e84c5c4c4/40ffe/2017-06-21-building-a-ci-cd-deployment-solution-for-the-iot_main-image-iot-blog.png"}}}}}}},"pageContext":{"id":"99a9ec7e-1881-5df7-981e-e9b3f9c6d09c"}},
    "staticQueryHashes": ["1241260443"]}