Building a cross-platform IoT mobile app just got a lot easier


#1

Originally published at: https://blog.particle.io/2018/09/13/building-a-cross-platform-iot-mobile-app-just-got-a-lot-easier/

When you set out to build a connect product, it’s easy to put all your focus on choosing the right development board, great sensors, and cost-effective PCB design. These are big choices and contribute to your product success or failure, but none impact how your customers will interact with your product directly. At least, not as much as your product’s mobile app will.

Your mobile app is how people will use your product and interface with all of the low-level technical decisions you’ve made. Don’t let it be an after-thought in your design. Here’s an example of how you can use NativeScript, a popular open source framework for building truly native apps using JavaScript.


The NativeScript Particle Plugin

NativeScript is a framework for building 100% native, cross-platform mobile apps that allows you to leverage JavaScript, TypeScript, Angular, and Vue.js. It lets you build a single cross-platform app for both iOS and Android using the languages and frameworks that you and your developers are already comfortable with.

NativeScript also has a vibrant plugin ecosystem, and I figured that a Particle plugin would be a welcome addition to the marketplace. So I called up my friends Rob Lauer and Eddy Verbruggen, and asked if they’d be willing to create a NativeScript plugin for Particle, in exchange for a few Photons. They readily agreed, and Eddy unveiled the NativeScript Particle plugin just a few weeks later. It’s now possible to use the Particle iOS and Android SDKs in NativeScript apps, meaning that cross-platform IoT mobile apps are now far easier to build than ever before!


How the Plugin works

One of the things I love most about Particle’s iOS and Android Device Cloud SDKs is the fluent programming style they enable. Rather than hand-rolling HTTP requests and callbacks on my own, I can use these SDKs to facilitate user login, fetch devices, call cloud functions, and more, all with just a few lines of code.

The NativeScript plugin embraces this fluent-style and gives me the ability to create a single JavaScript codebase that talks to the Particle iOS and Android SDKs. I can import dependencies and login to the Device Cloud.

import { Particle, TNSParticleDevice } from "nativescript-particle";
const particle = new Particle();

particle.login(
  {
    username: "me@domain.com",
    password: "super-secure-pw"
  })
  .then(() => console.log("Login successful"))
  .catch(error => console.log(`Login error: ${error}`));

I can also fetch devices and call functions.

particle.listDevices()
  .then(devices => {
    devices[0].callFunction("digitalWrite", "D7", "HIGH")
      .then(result => console.log(`Result: ${result}`))
      .catch(error => console.log(`Error calling function: ${error}`));
  })
  .catch(error => console.log(`Error fetching devices: ${error}`));

And more. If our SDKs support it, the plugin can do it. In JavaScript. What a time to be alive.

After the plugin was published, I cloned the GitHub repo for the plugin and was quickly able to get the demo app running. I logged in with my Particle account, found one of my devices running the PartiBadge firmware and called a few cloud functions. It ran smoothly in both an emulator and on my phone, a testament NativeScript’s power as a JavaScript-powered framework for building truly native apps!

[caption id="" align="aligncenter" width="640"] The NativeScript Particle Plugin controlling a PartiBadge[/caption]

Where to go to learn more

If you’re building IoT Mobile apps, I highly recommend taking NativeScript for a spin. To get started, visit the website, where you can explore the tool using an online interactive playground, or install the CLI tools, locally. Once you have NativeScript up and running, you can explore its integrations with Angular, Vue, and TypeScript using the online documentation. And if you’re looking to leverage NativeScript to control your Particle devices, make sure you check out the official plugin docs in the NativeScript marketplace.