Tour Of Heroes As A NativeScript With Angular Android And iOS Application

When it comes to learning Angular, the go-to example is the Tour of Heroes tutorial that is found in the official Angular documentation.  This is a great tutorial because it covers a lot of topics, however, it is a web application tutorial.  What if we wanted to build a mobile application from it, or more specifically, a native mobile application with Android and iOS support?

We’re going to see how to build a Tour of Heroes inspired iOS and Android mobile application using Angular and NativeScript.


Build An Image Manager With NativeScript, Node.js, And The Minio Object Storage Cloud

When building a mobile application, there are often scenarios where you need to storage files remotely and when I say files, I don't mean database data.  For example, maybe you want to develop an image manager or photo storage solution like what Facebook and Instagram offer?  There are many solutions, for example you could store the files in your database as binary data, or you could store the files on the same server as your web application.  However, there are better options, for example, you could use an object storage solution to store files uploaded from your mobile application.  Popular object storage solutions include AWS S3 as well as the open source alternative Minio.

We're going to see how to leverage Minio to store images that have been uploaded from an Android and iOS mobile application built with NativeScript and Angular.

Authenticate With JWT In A NativeScript Angular Mobile Application

Any mobile application that accesses remote data will need authentication at some point in time.  There are many different authentication strategies out there, one of which is with Json Web Tokens (JWT) that we explored in one of my previous Node.js articles.  With JWT, users can authenticate via username and password, receive a signed token back, and use that token for any future API request rather than continuing to distribute the username and password.

In this tutorial we're going to explore how to build an Android and iOS mobile application using NativeScript and Angular that authenticates with an API and then uses a Json Web Token for future requests to that same API.

JavaScript Libraries In A TypeScript Application, Revisited

If you haven’t already gotten involved with it, you’ll probably know that TypeScript is becoming increasingly popular.  Being able to use a superset of JavaScript in a typed language that compiles down to JavaScript is a great thing.  However, if you’ve ever played around with TypeScript and tried to use JavaScript libraries, you’ll probably know that sometimes it can be a real pain.  Often JavaScript libraries do not ship with type definitions which are critical when it comes to playing nice with TypeScript.

If you’ve been keeping up with The Polyglot Developer you’ll probably remember two posts that were created.  Previously I had written about including external JavaScript libraries in an Angular application as well as adding type definitions to external JavaScript libraries in TypeScript.

We’re going to revisit these two articles and explore all the ways to include JavaScript libraries in TypeScript applications.  These include applications built with NativeScript, Ionic, and Angular.


Track The Device Geolocation In A NativeScript Angular Mobile Application

I get a particular set of questions quite a bit on my blog and other social media outlets.  One of these questions includes how to use geolocation features such as GPS tracking within a NativeScript mobile application for iOS and Android.  Many people want to be able to gather location information and in many cases use this information for mapping.

So what does it take to make use of the device GPS hardware for location tracking?

We’re going to see how to create a mobile application for Android and iOS using NativeScript and Angular that makes use of geolocation in a few different ways.


Use A Side Drawer And Feature Rich List View In A NativeScript Angular App

I release a lot of content and build a lot of mobile applications using the NativeScript mobile framework, most of which includes Angular. Lately I’ve been getting many requests for information on using a side drawer within the application. These side drawer components can improve the user experience significantly so I figured I would explore the topic.

We’re going to see how to include a side drawer in our NativeScript Android and iOS application, built with Angular. To take things to the next level, we’re also going to include a feature rich list view as our core content.


Nested Routing In A NativeScript Angular Application For Android And iOS

When building mobile applications you’ll often find yourself needing to create child components.  What do I mean by child components?  Take for example a mobile application with two different screen groupings, one where the user is not signed in and the other where the user is signed in.  In each of these groupings you could have multiple screens where the user is signed in and multiple screens where the user is not signed in.  Each screen under the parent grouping can be considered a child component and they could possibly share a template from the parent.  These child components often require nested routing to occur for a successful navigation.

We’re going to see how to create nested routes in a NativeScript mobile application built with Angular.  You’ll see that things aren’t much different from creating standard routes in an Angular application.


Use Social Media Sharing Prompts In A NativeScript Angular Application

Social media can be huge towards building your brand and promoting your mobile application.  It can also make a difference in the user experience of your application.  Allowing users to share text and media on their own social media profiles could be huge, no matter how you look at it.  A while back I had demonstrated social media sharing in a vanilla NativeScript application for iOS and Android.  While vanilla NativeScript is still a very valid option, I’ve been going the route of Angular lately, so I figured this topic could be revisited.

We’re going to see how to implement social media sharing features in a NativeScript mobile application build with Angular.


Solar Flare for Cloudflare

Solar Flare For Cloudflare Released On Android And iOS

I am pleased to announce that Solar Flare for Cloudflare, my first mobile development project in a long time, has been published to the iTunes App Store and Google Play!

So what is Solar Flare and who is it designed for?  This is a free application for managing data stored in Cloudflare on iOS and Android.  If you’re unfamiliar, Cloudflare is an amazing service that acts as a content delivery network (CDN), among other things related to web performance and security.


Use The Native Device Clipboard In A NativeScript Angular Application

Back when I had just started to learn NativeScript I had created a tutorial for using the native device clipboard for copying and pasting.  The previous tutorial demonstrated this functionality in a vanilla JavaScript application.  In an effort to clean up any loose ends, I figured it would be a good idea to convert this tutorial into an Angular equivalent.  While nothing has really changed in the clipboard functionality, Angular is a very different animal.

We’re going to see how to copy and paste directly within an application built with Angular, TypeScript, and NativeScript.