{"id":1455,"date":"2016-04-18T06:47:22","date_gmt":"2016-04-18T06:47:22","guid":{"rendered":"http:\/\/www.richa1.com\/RichardAlbritton\/?p=1455"},"modified":"2017-06-01T17:35:35","modified_gmt":"2017-06-01T17:35:35","slug":"app-inventor-and-particle","status":"publish","type":"post","link":"https:\/\/www.richa1.com\/RichardAlbritton\/app-inventor-and-particle\/","title":{"rendered":"App Inventor and Particle"},"content":{"rendered":"

\"AppInvent09\"This is set up to work with the WEB-Connected LED<\/strong> example app for the Particle Spark<\/strong>, Photon<\/strong>, or Electron<\/strong>.<\/p>\n

App Inventor<\/strong> is an easy way to make Apps<\/strong> for the Android<\/strong> platform. We will go through how to use App Inventor<\/strong> for communicating with any Particle<\/strong> device.<\/p>\n

 <\/p>\n

The Designer
\n\"AppInvent01\"<\/h3>\n

You will want to make two buttons. The button names do not matter, but we will just call them ButtonOn<\/strong> and ButtonOff.<\/strong><\/p>\n

\"AppInvent02\"Next we will add the Web<\/strong> component with the following attributes.<\/p>\n

    \n
  1. Check AllowCookies<\/strong>.<\/li>\n
  2. Enter\u00a0https:\/\/api.particle.io\/v1\/devices\/<\/strong> in the Url<\/strong> field.<\/li>\n<\/ol>\n

    Code Blocks<\/h3>\n

    Now we get into the codding. The thing to keep in mind is that a Particle function can only be called with an HTTP POST request. App Inventor makes it easy to send GET data so we will have to jump through a few hoops to get there.<\/p>\n

    Set Global Variables<\/h4>\n

    First, lets set up some global variables. These can be found under Variables and initialize global. To this we will add a Text value to start with.\"AppInvent04\"<\/p>\n

      \n
    1. Make sure the serverURL<\/strong> is set to “https:\/\/api.particle.io\/v1\/devices\/<\/strong>“.<\/li>\n
    2. Copy the\u00a0Device ID<\/strong> and use that for the deviceID<\/strong> variable.<\/li>\n
    3. Locate the\u00a0Access Token<\/strong> from your Particle account and use that for the accessToken<\/strong>.<\/li>\n

    4. \nFun<\/strong> should be set to the function name from the Particle code. For this instance, we are calling “led”.<\/li>\n
    5. Var<\/strong> is a placeholder for the value we will be sending to the function. It is blank.<\/li>\n
    6. HTTP_Reply<\/strong> can be used to get a conformation message from the Particle device.<\/li>\n
    7. PINstate<\/strong> can be used later to toggle the On\/Off button.<\/li>\n<\/ol>\n

      The Send Procedure<\/h4>\n

      In App Inventor, a Procedure is a block of code that\u00a0can be called on to run at any time. This saves time and space when you need to run the same code over and over again.<\/p>\n

        \n
      1. \"AppInvent07\"From the Procedures<\/strong> blocks, add the Do<\/strong> block.<\/li>\n
      2. Name this procedure “SendToParticle<\/strong>“.<\/li>\n
      3. Add the Set Web1<\/strong> block from the Web1<\/strong> section to the new procedure.<\/li>\n
      4. Now we will assemble a string for the\u00a0set Web1.Url<\/strong> by using the Join<\/strong> block from Text.<\/li>\n
      5. All together we will be joining the serverURL<\/span>, deviceID<\/span>,<\/strong> “\/<\/strong><\/span>“, Fun<\/span>,<\/strong> “?access_token=<\/strong><\/span>“, and accessToken<\/strong><\/span>.<\/li>\n
      6. Under the Set.Url<\/strong> block, we will add a Call.PostText<\/strong> block from the Web1<\/strong> section.<\/li>\n
      7. To this we will add a Join<\/strong> block for\u00a0sending to our Particle function via POST<\/strong> request.<\/li>\n
      8. We will join “params=<\/strong>” and the Var<\/strong> value.<\/li>\n<\/ol>\n

        \"AppInvent06\"When ever this\u00a0procedure is called Val will be sent via POST to:<\/p>\n

        https:\/\/api.particle.io\/v1\/devices\/<\/span>your-device-id<\/span>\/<\/span>led<\/span>?access_token=<\/span>your-access-token<\/span><\/strong><\/p>\n

        The Button Click<\/h4>\n

        For now we will just use one button for ON and one for OFF. So we want to grab the when.click<\/strong> from the ButtonOn<\/strong> and ButtonOff<\/strong> blocks.<\/p>\n

          \n
        1. \"AppInvent05\"To that we will add a Set<\/strong> block for the Var<\/strong> variable. Also add the value of “on”<\/strong> to this.<\/li>\n
        2. Next we will be calling on the SendToParticle<\/strong> Procedure.<\/li>\n<\/ol>\n

           <\/p>\n

           <\/p>\n

          That is it!<\/p>\n

          Once this App is loaded onto your phone it will turn the built-in LED, attached to Pin 7 on the Particle device, on or off.<\/p>\n

          What Next?<\/h4>\n

          Well this is a good place to get you started. From here you can try to make the button toggle the LED on or off.<\/p>\n

          \"AppInvent08\"<\/p>\n

          Change the button into an image to make things look a little nicer.<\/p>\n

          Add a Relay to Pin 7 on the Particle device and you can turn an actual light on or off.<\/p>\n

          The possibilities are nearly endless and this will help get you well on the road to making it easy to use the next big IOT… thing.<\/p>\n

          Share this:<\/h3>