Automatically Setting Your Profile Picture In A NativeScript Angular App

It doesn’t just take a good idea when it comes to making a great mobile application.  Sometimes it takes a little flair in the user interface department to make a good mobile application into a great mobile application.  For example, when you have a user login screen, you could just ask for username and password credentials, or you could include profile picture information as well.  Which do you think would be better?

Gravatar offers a global avatar registry based on user email address.  In other words, you upload your profile picture to Gravatar, associate it with your email address, and then that same avatar can be used in any application that uses Gravatar.  WordPress, the platform this blog is hosted on, uses Gravatar for my profile picture for example.

We’re going to see how to automatically set the user profile picture in a NativeScript Angular application using the Gravatar API.

(more…)

Communicate With Websockets In A NativeScript Angular Application

I’ve been playing around with sockets and websockets recently.  Not too long ago I wrote about creating a real-time chat application using Golang and Angular that made use of websockets.  In that example we created a chat server using the Go programming language and a client facing web application using Angular.  The communication between the two used websockets to keep things real-time.

What if we wanted to create a native mobile application for Android and iOS that communicated via websockets to our server or any other websocket server?  Using NativeScript, it is very possible to create a mobile client that works with the Golang with Angular example as seen previously.

(more…)

Internationalization In A NativeScript Mobile App With Angular

I’m an English only speaker, reader, and writer, so when I download an application from iTunes or Google Play, it is going to be in English.  There are many people like this, but possibly in a language other than English.  When I release my English-only application, how much of the world am I neglecting?  To get the most success for your application, it makes sense to add internationalization (i18n) support so users can access your application in their native language.

Back in my AngularJS days I was using an incredible library called ng-translate and lucky for me, and everyone else, there is a variation of that same library for later versions of Angular.  This new library, called ng2-translate, accomplishes the task of multiple language support in your application.

We’re going to see how to add internationalization support to our NativeScript Android and iOS application built with the Angular framework.

(more…)

Create A Real Time Chat App With Golang, Angular 2, And Websockets

I’ve been hearing a lot about websockets lately and how they can accomplish real time communication between applications and servers.  They act as a compliment and possible alternative to RESTful APIs that have been around for significantly longer.  With websockets you can do real time messaging for things like chat, communication with IoT, gaming, and a whole lot of other things that need instant communication between clients and the server.

A while back I had played around with websockets and Node.js using a library called Socket.io, but since I’ve been really getting into Golang I wanted to explore websockets using the Go programming language.

We’re going to check out how to create a chat application where the client is an Angular 2 application and the server is a Golang application.

(more…)

Why RxJS Is The Hottest Way To Handle Async

Observables. Native To The Web Platform?

One of the common misconceptions in the web world is that RxJS is an “Angular 2 thing”.

What most developers don’t realize is that Observables are on their way to becoming native to the web, and if you aren’t already using them to handle asynchrony, you are not adequately preparing yourself for the future.

The Best Way To Handle Asynchrony

RxJS allows you to solve hard problems with less code, promotes maintainability, readability, flexibility, and composability. These are just some of the reasons RxJS is the hottest way to handle async right now.

Learning how to handle asynchrony the reactive way instead of using promises and callbacks will also greatly reduce the probability that you are leaking resources. And because RxJS works with any framework (angular.js, react.js, ember.js, vue.js), node, and even without frameworks, it’s easy to future proof your applications and have confidence in using this technology.

(more…)

Changing A NativeScript CSS Skin At Runtime

CSS is usually a subject I avoid due to me being artistically illiterate, but recently a student of mine asked me an interesting question regarding theming an Angular 2 NativeScript application with dynamic CSS files loaded at runtime.  Given the nature of Angular 2, it becomes difficult to load files at runtime because of how Angular 2 compiles and builds projects.  NativeScript Angular 2 projects are no exception when it comes to switching a CSS skin.

So what if we want to apply a set of CSS styles on demand, but keep them separated in their own files?

We’re going to see how to switch between files to apply a CSS skin to a NativeScript Angular 2 application on demand at runtime.

(more…)

Using Google Admob In Your NativeScript Angular 2 Mobile App

I recently received a request from one of my followers for a tutorial on using Google Admob in a NativeScript Angular 2 application.  Not too long ago I had demonstrated Google Admob in a vanilla NativeScript project, but I hadn’t yet given it a shot with Angular 2.

In case you’re unfamiliar with Admob, it is an excellent way to monetize your mobile applications with advertisements.  You’ll earn revenue not only from people clicking your in-app advertisements, but also from the advertisements appearing on the screen.

We’re going to see how to use Admob in a NativeScript Android and iOS application that was built with Angular 2.

(more…)

NativeScript 101

NativeScript For The Angular 2 Developer

After months of receiving requests, I am finally pleased to announce that my course, NativeScript for the Angular 2 Developer, is now available on Udemy.  This Angular 2 and NativeScript course is similar to the previous course I released titled, NativeScript 101, with the exception that this time we’re using Angular 2 instead of vanilla JavaScript.  If you’re unfamiliar with NativeScript, it is a cross platform framework for developing native mobile applications.  There needs to be emphasis on the native part because you’re not building hybrid web applications, you’re building native mobile applications.

So what can you hope to accomplish in this particular course?

(more…)

Send Emails With Rackspace Mailgun Using NativeScript And Angular 2

Sending emails from your mobile application is often a critical aspect.  For example, what if you want to be able to collect user feedback, wouldn’t email be one of the better solutions?  Now let’s add to this scenario and say that the user doesn’t have email configured on their mobile device.  How does the user send emails to you from your application?  This is where the Rackspace Mailgun API comes into play.

The Rackspace Mailgun API is a service, which includes a free tier, for sending emails via a RESTful API.  No need for users to configure their email client and no need to maintain an email inbox.  It is great for getting the job done.

Not too long ago I wrote about using the Mailgun API in a vanilla NativeScript application.  One of my subscribers recently requested information on how to accomplish this task using Angular 2 in a NativeScript application and I thought it would make a perfect tutorial.

(more…)

Navigating A Web Application With The Angular 2 Router

I’ve been keeping up with Angular 2 since the beta releases and if you have too you’ll know that navigation has changed about one hundred times between then and the now stable release.  Navigation with the Angular 2 Router component is a tricky subject, but understanding it is necessary for pretty much every quality Angular 2 web application.

I wrote a now obsolete tutorial on how to navigate between Angular 2 routes back when Angular 2 was in beta.  Since Angular 2 is now stable, I thought it would be a good idea to share how to navigate between pages with the stable Angular 2 Router component.

(more…)