element14 Community
element14 Community
    Register Log In
  • Site
  • Search
  • Log In Register
  • About Us
  • Community Hub
    Community Hub
    • What's New on element14
    • Feedback and Support
    • Benefits of Membership
    • Personal Blogs
    • Members Area
    • Achievement Levels
  • Learn
    Learn
    • Ask an Expert
    • eBooks
    • element14 presents
    • Learning Center
    • Tech Spotlight
    • STEM Academy
    • Webinars, Training and Events
    • Learning Groups
  • Technologies
    Technologies
    • 3D Printing
    • FPGA
    • Industrial Automation
    • Internet of Things
    • Power & Energy
    • Sensors
    • Technology Groups
  • Challenges & Projects
    Challenges & Projects
    • Design Challenges
    • element14 presents Projects
    • Project14
    • Arduino Projects
    • Raspberry Pi Projects
    • Project Groups
  • Products
    Products
    • Arduino
    • Avnet Boards Community
    • Dev Tools
    • Manufacturers
    • Multicomp Pro
    • Product Groups
    • Raspberry Pi
    • RoadTests & Reviews
  • Store
    Store
    • Visit Your Store
    • Choose another store...
      • Europe
      •  Austria (German)
      •  Belgium (Dutch, French)
      •  Bulgaria (Bulgarian)
      •  Czech Republic (Czech)
      •  Denmark (Danish)
      •  Estonia (Estonian)
      •  Finland (Finnish)
      •  France (French)
      •  Germany (German)
      •  Hungary (Hungarian)
      •  Ireland
      •  Israel
      •  Italy (Italian)
      •  Latvia (Latvian)
      •  
      •  Lithuania (Lithuanian)
      •  Netherlands (Dutch)
      •  Norway (Norwegian)
      •  Poland (Polish)
      •  Portugal (Portuguese)
      •  Romania (Romanian)
      •  Russia (Russian)
      •  Slovakia (Slovak)
      •  Slovenia (Slovenian)
      •  Spain (Spanish)
      •  Sweden (Swedish)
      •  Switzerland(German, French)
      •  Turkey (Turkish)
      •  United Kingdom
      • Asia Pacific
      •  Australia
      •  China
      •  Hong Kong
      •  India
      •  Korea (Korean)
      •  Malaysia
      •  New Zealand
      •  Philippines
      •  Singapore
      •  Taiwan
      •  Thailand (Thai)
      • Americas
      •  Brazil (Portuguese)
      •  Canada
      •  Mexico (Spanish)
      •  United States
      Can't find the country/region you're looking for? Visit our export site or find a local distributor.
  • Translate
  • Profile
  • Settings
Particle
  • Products
  • Dev Tools
  • Single-Board Computers
  • Particle
  • More
  • Cancel
Particle
Blog How to Build a Cross-Platform IoT Mobile App with NativeScript and Particle
  • Blog
  • Forum
  • Documents
  • Files
  • Members
  • Mentions
  • Sub-Groups
  • Tags
  • More
  • Cancel
  • New
Join Particle to participate - click to join for free!
  • Share
  • More
  • Cancel
Group Actions
  • Group RSS
  • More
  • Cancel
Engagement
  • Author Author: brandonsatrom
  • Date Created: 14 May 2019 8:53 PM Date Created
  • Views 3784 views
  • Likes 2 likes
  • Comments 2 comments
  • particle
  • nativescript
  • mobile app
  • iot
Related
Recommended

How to Build a Cross-Platform IoT Mobile App with NativeScript and Particle

brandonsatrom
brandonsatrom
14 May 2019

image

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!

image
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.

  • Sign in to reply
  • EnDevSols
    EnDevSols over 1 year ago

    Welcome to EnDevSols – your partner for transformative digital solutions. We specialize in custom software development, harnessing the power of AI, Deep Learning, NLP, and Computer Vision to drive your business forward. Our commitment lies in crafting scalable, tech-driven solutions tailored to your unique needs. Embrace the future with EnDevSols, and unlock the full potential of next-gen business technology.

    text-generation-inference

    • Cancel
    • Vote Up 0 Vote Down
    • Sign in to reply
    • More
    • Cancel
  • sunnyjutt123
    sunnyjutt123 over 1 year ago

    The specifics of how plugins work can vary greatly depending on the host application and the programming language used. I'll provide a simplified example using a fictional web browser and a JavaScript-based plugin. Keep in mind that real-world implementations can be more complex.

    Let's consider a basic browser plugin that adds a "Hello, World!" message to every web page. We'll use JavaScript for the plugin.

    1. Plugin Manifest:

      • The plugin typically comes with a manifest file that describes its metadata, such as the name, version, and permissions. In a web browser, this could be a manifest.json file.
      jsonCopy code
      // manifest.json { "name": "HelloWorldPlugin", "version": "1.0", "permissions": ["webRequest", "webNavigation"], "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ] }
    2. Content Script:

      • The content script is the JavaScript code that runs in the context of the web pages. It can access and manipulate the DOM (Document Object Model) of the webpage.
      javascriptCopy code
      // content.js document.body.innerHTML += '<div style="position: fixed; top: 0; left: 0; background-color: yellow; padding: 10px;">Hello, World!</div>';
    3. Background Script (Optional):

      • Some plugins may have a background script that runs in the background, handling events and managing the plugin's lifecycle.
      javascriptCopy code
      // background.js // (This is just a placeholder and may not be needed for this example)
    4. Injecting the Content Script:

      • The browser, using the manifest file, injects the content script into every webpage that matches the specified URLs.
    5. Interaction with the Host Application:

      • The content script interacts with the host application (browser) through APIs provided by the browser. For example, it may listen for page load events and then modify the DOM accordingly.

    This is a very basic example, and real-world plugins can be much more complex. They may include options pages, background processes, user interface components, and more. Additionally, plugins for different host applications may have different APIs and requirements. Always refer to the documentation of the specific host application for detailed information. beingassistant

    • Cancel
    • Vote Up 0 Vote Down
    • Sign in to reply
    • More
    • Cancel
element14 Community

element14 is the first online community specifically for engineers. Connect with your peers and get expert answers to your questions.

  • Members
  • Learn
  • Technologies
  • Challenges & Projects
  • Products
  • Store
  • About Us
  • Feedback & Support
  • FAQs
  • Terms of Use
  • Privacy Policy
  • Legal and Copyright Notices
  • Sitemap
  • Cookies

An Avnet Company © 2025 Premier Farnell Limited. All Rights Reserved.

Premier Farnell Ltd, registered in England and Wales (no 00876412), registered office: Farnell House, Forge Lane, Leeds LS12 2NE.

ICP 备案号 10220084.

Follow element14

  • X
  • Facebook
  • linkedin
  • YouTube