Skip to main content

Sneak Peek at Ionic Framework Tools and Patterns

Easily Send Text Messages from a Mobile App with Ionic Framework


Note: This is a brief sample of my Pluralsight Course, Ionic Framework Tools and Patterns. The text below is a rough transcript of the video shown here.

http://ionicframework.com/docs/v2/native/sms/

Every mobile phone knows how to send a text message. We can leverage that ability in our Ionic app by using the sms plugin. In the last section, we created a menu item to send a message to a student’s parent, but all it did was show a popup saying the message was sent. We can complete that functionality by wiring that up to the plugin now.

First, let’s not forget to install the plugin:
gulp --cordova "plugin add cordova-sms-plugin --save"

Next we’ll update the Roster controller to let the user enter the message to be sent. We’ll repurpose the $ionicpopup, and just change the show function to prompt, like so...

    function sendMessageToParent(student) {
      $ionicPopup.prompt({
        title: 'Message Parent',
        template: 'Enter your message:',
        inputType: 'text',
        inputPlaceholder: 'Your message'
      }).then(function (message) {
        $cordovaSMS.send(student.phone, message)
          .then(function () {
            $log.log('Message sent.');
          });
      });
    }

We’ll also need to inject the ionic-native service into the controller…

.controller('RosterCtrl', function ($cordovaActionSheet, $cordovaSMS, $ionicPopup, $log, $stateParams,

Now let’s build and run it in the iOS Simulator. One thing you’ll notice right away. The iOS Simulator cannot send texts, and informs of that fact when you try. Unfortunately, Ionic View can’t send texts either. To test this function, we need to do something we’ve managed to avoid until now. We have to install the app on a real device.

This has always been a pretty simple task on Android, but until very recently, nearly impossible on an iPhone. Starting with Xcode 7, Apple made it possible to install an iOS app directly onto a connected device.

See https://blog.ionic.io/deploying-to-a-device-without-an-apple-developer-account/

There are still some hoops you need to jump through, and they are beyond the scope of this course. Fortunately, the Ionic team has published a blog entry describing everything you need to do. Once you’ve done this, you can continue with the rest of this video.

To see this plugin work on Android, the command you’ll want to use is
cordova run android

We can pass the run android command to our gulp build using
gulp --cordova "run android" --env=ios-sim

To run it on an iPhone, we’ll need to do something slightly different. The command is
gulp --cordova "prepare ios" --env=ios-sim


When that command completes, there will be an Xcode project in platforms/ios. To launch the app on a connected iPhone, you need to open that project and click the run button.

To send a text, we’ll need to make sure that at least one of our students has a valid phone number, and not the default test data we started with. I’ll do that now with one of my students while you do the same for one of yours.

We’re going to see a little quirk in the way iOS apps behave compared to Android apps. Apple won’t allow an app to send a text message without displaying the native SMS composer. This ensures that a rogue app can’t send texts without the user’s knowledge and consent.

Let’s send a hello message to the parent, and see what happens. In my case, I decided to send the message to myself, so that we would see the result almost immediately.

And that’s how easy it is to send a text.

Comments

Popular posts from this blog

How to copy your Frozen Free Fall progress to a new phone

It's happened to all of us. You are about to get a branch new smartphone, when it hits you. You're on level 250 of Frozen Free Fall. If you get a new phone, you'll lose all of that progress! Ok, admittedly this isn't the most pressing problem of our time, but it's annoying. So today I decided to do something about it.

I have a Samsung Galaxy S4 (Android), and just received an iPhone 5c. Before you bash me on my phone choice, let me explain that the iPhone is provided by my employer at no cost to me. Now you may proceed to bash me for putting games on my work phone. 
First step: Frozen Free Fall had already been installed on both devices. Next, using the Astro File Manager on my Galaxy, I searched and found the Frozen game save stored in /storage/sdcard0/Android/data/com.disney.frozensaga_goo/files/user.dat. I imagine it will be in the same location on any Android phone. If not, just look for user.dat in a folder with a similar name. So, using a USB cable and the A…

Ionic vs. Bootstrap - for a Web App

Ionic 1.x vs Bootstrap 3.x for a Web AppI was recently asked at work to come up with a comparison between Ionic Framework and a more traditional Angular/Bootstrap combination to create a web app. The application will primarily be used in a desktop web browser (probably Chrome or IE). There are also some use cases where it will be accessed from Safari on an iPad. However, this is purely a web; there are no plans to install the app onto the iPad as a hybrid app. Thus, recommending Ionic to build the UI hadn't occurred to me until the request was made.

This is even more surprising in that I recently published a Pluralsight course on Ionic Framework 1. It should have been the first thing that crossed my mind.
One constraint is that currently only Angular 1.x and Bootstrap 3 are authorized web technologies. Ionic 1.3 was recently approved, but not Ionic 2, Angular 2, or TypeScript yet.
Given those constraints, herein is my attempt at coming up with reasons to use (or not to use) Ionic…

How I Finally Got AdMob and Ionic Framework to Play Nice Together

Note: Some of the plugins referenced in this article have had their names, and possibly their APIs, changed. The information contained herein may no longer work. Please don't rely on it until I have had a chance to review and update it. -Mike Callaghan
TLDRThis is a summary of how to display ads in my MDCL (1650) mobile application, which was written using the Ionic Framework. If you want to see the sample project that displays both banner and interstitial ads, you can look at my AdMob Demo app on GitHub.

AdMob
The first thing that's necessary is to get an AdMob account, which you can create at https://www.google.com/admob/ Ionic Starter App
If you don't already have an ionic app, you can create one with the following command, which will create a folder named myApp in your current folder, and initialize it with an empty application.
ionic start myApp blank



ngCordova
Next, you'll need to install the ngCordova bower package and include that in your project. This script does m…