Give Your NativeScript Mobile App An Ionic Framework Theme

I’ve been developing and writing about NativeScript for a while now.  One of the things that everyone seems to bring up is that the UI NativeScript offers is unattractive in comparison to frameworks like Ionic.  Sure, it may be unattractive, but it is a native UI and had you been developing with Java or Objective-C things would be no different.  The UI is what you make of it.

I understand not everyone is a top notch UI designer so I thought I’d share a custom theme that will give you an attractive theme in your application.  If you’re familiar with Ionic Framework, it will probably look very similar since the designer, Rob Lauer, made this theme to match.

We’re going to see how to give our native application created with NativeScript a familiar Ionic Framework theme.

(more…)

Working With Shared Providers In An Ionic 2 Mobile App

When developing an Ionic 2 application there are often scenarios where it probably isn’t a good idea to include repetitive source code in multiple application pages.  A common example of this would be when it comes to database interaction in an Ionic 2 application.  Sure you could establish a connection to the database on every page and query it, but it would probably make more sense to use it like a shared provider.

We’re going to see how to create a SQLite shared provider, often referred to as a shared service or sometimes a singleton class, in an Ionic 2 Android and iOS application using Angular 2.

(more…)

Build An RSS Reader Mobile App With Ionic 2 And Angular

If you're a long time follower of my blog you'll remember I wrote an article about creating an RSS reader using Ionic Framework.  That tutorial not only used the first version of Ionic Framework, but it now also uses a deprecated Google service, once known as the Google Feed API.  Because of the deprecated API, it no longer works.

I still get a lot of people asking me about the creation of RSS readers, so I figured it was time to come up with a new solution.  With Ionic 2 being all the rage, it makes sense to explore feeds with this version of the framework.

Here we'll be building an RSS feed reader for Android and iOS using Ionic 2 and Angular with TypeScript.

Alter The Ionic 2 Gulp Script To Include Browser JavaScript Files

Recently I found myself needing to add a JavaScript library to an Ionic 2 TypeScript project.  Now you’ll probably recall that I’ve written two different articles regarding using JavaScript libraries in TypeScript project.  I wrote about including a JavaScript library in an Ionic 2 app in a guest post I did, but the scenario had the JavaScript library coming from the Node Package Manager (NPM).  I also wrote about including a JavaScript library in an Angular 2 app, but the project structure is a little more web friendly in that scenario.

My new scenario is including a JavaScript file, rather than NPM package.  The project structure in an Ionic 2 application is a bit different than others.  We can’t just include JavaScript files wherever we want because the build process could very well wipe them out.  Instead we have to change the Gulp build process for the Ionic 2 application.

We’re going to see how to alter the Ionic 2 Gulp script to allow us to include external JavaScript files in our project.

(more…)

Create A Simple Todo List App Using Ionic 2 For Android And iOS

I’ve created a few tutorials around Ionic 2 while it was in its early alpha stage up until now.  These tutorials explain how to use the bits and pieces that the framework or Angular 2 offers, but I never demonstrated how to make a functional application.  Seeing how to put the pieces together makes a huge difference when learning a new technology.

We’re going to see how to build a simple todo list type Android and iOS application using Ionic 2, Angular 2, and TypeScript.

(more…)

Converting Your Ionic 2 Mobile App To NativeScript

As many of you know, I had been using Apache Cordova based frameworks such as Ionic Framework for a long time.  They are convenient and easy to use when it comes to rapidly developing cross platform applications.  The problem with using Apache Cordova frameworks such as PhoneGap, Ionic Framework and Onsen UI is the performance limitations that come with them, particularly because of their use of the platform web view.

NativeScript is a mobile development platform that I recently switched to because it eliminates the performance issues that people experience with web view based frameworks.  This is because it doesn’t render your application in a web view.  Instead the application gets compiled to native code giving the same performance you’d see in an app that was developed with Objective-C or Java.

Being that I spent a long time with Ionic Framework and Ionic 2, which uses AngularJS and Angular 2, I figured it would make sense to show how easy it is to convert your application to NativeScript, which also uses Angular 2.  As an end result you’ll get a cross platform web application, built with a modern framework, that is native.

(more…)

Send Emails In An Ionic 2 App Via The Rackspace Mailgun API

Not too long ago I wrote about sending emails in an Ionic Framework app using the Rackspace Mailgun API.  To get you up to speed, I often get a lot of questions regarding how to send emails without opening the default mail application from within an Ionic Framework application.  There are a few things that could be done.  You can either spin up your own API server and send emails from your server via an HTTP request or you can make use of a service.

To compliment the previous post I wrote for Ionic Framework, I figured it would be a good idea to demonstrate how to use Mailgun in an Ionic 2 application.

(more…)

Send Emails In Ionic Framework Via The Rackspace Mailgun API

A few years ago a wrote a tutorial for sending emails in an Ionic Framework Android and iOS application.  The tutorial works great, but it requires that a mail application be used to finalize the send.  In other words, you can set default values for email fields, but you still need to select Gmail or similar to actually send the email.

A popular question I receive is how to send emails without launching an email application.  There are a few solutions to this.  You could either set up your own server that sends emails and access it via an API, or you can use a service like Rackspace’s Mailgun.

We’re going to see how to send emails using the Rackspace Mailgun API service.

(more…)

Use The Device Camera In An Ionic 2 Android And iOS App

As I continue to port my Ionic Framework tutorials to Ionic 2, I figured it was time to discuss how to make use of the device camera within an application.  There are often needs to obtain pictures within an application.  Maybe you’re creating an application like Imgur, or maybe you just want to be able to obtain a profile picture.  Like I mentioned, I had written a camera tutorial a few years back on how to use the camera in an Ionic Framework application.

This time around we’re going to see how to snap pictures within an Ionic 2 Android and iOS mobile application.

(more…)

Use Font Awesome Icons In Your Ionic 2 Android And iOS App

Creating your own in-app icons can be a real pain.  Having to worry about all the different Android and iOS icon sizes is not a pleasant task, specially when web developers have it easy with icon packs like Font Awesome.  Lucky for us, Ionic is a mobile web application, so we can enjoy the same benefits that web developers have.

Previously, I demonstrated how to include Font Awesome into an Ionic Framework 1 application, but that version of the framework is becoming old news because Ionic 2 is stealing the spotlight.

This time around we’re going to see how to use the 400+ icon fonts that Font Awesome offers in our Ionic 2 Android and iOS application.

(more…)