Developing cross platform apps with Ionic Capacitor - part 3

March 26, 2018, 7:05 am Categories:

Categories

In part 1 of this tutorial we installed and explored the Capacitor software, familiarising ourselves with the available commands and created the initial foundation for our ionic-camera application.

In part 2 of this tutorial we implemented the required logic, templating and styling for the ionic-camera application.

In this third and final part of our tutorial series on working with Capacitor we're going to learn how to build and run the ionic-camera application on iOS, Android and within the Web browser.

We'll start with the Web browser as this is, by far, the simplest, quickest and easiest of all platforms to build for and deploy to.

Web

With the ionic-camera development completed we simply need to use either of the following commands to run the application within our system browser:

// Use the Ionic CLI development service
ionic serve


// OR you can use the following with Ionic (and outside of Ionic projects)
npx cap serve

As we're developing with Ionic we'll simply use the first of the commands listed above but honestly, it makes no difference which command you use - they'll both serve the application in the browser.

Always assuming there are no build errors the application should be launched to, and run within, the system desktop browser of choice - as demonstrated below:

Screen capture demonstrating an Ionic application being run inside the browser with a user selecting an image from their computer and displaying that within the application

It doesn't get much quicker, simpler and easier than that does it?

Ps. Extra brownie points for anyone who recognises the 2000AD character Slaine in the above screen demonstration! :)

iOS

Building/running your Capacitor/Ionic application with iOS currently requires that you have Xcode and a Mac available for development. As stated in the first part of this tutorial series the team at Ionic are working to enable iOS development directly through Ionic Pro but this is, as of March 2018, currently unavailable.

To develop the ionic-camera application for iOS begin by:

  • Running a build process to publish your project assets to the www directory
  • Copy the published web assets to the ios platform directory
  • Open Xcode

All of which is handled with the following CLI commands:

ionic build
npx cap copy ios
npx cap open ios

If you wanted to update native dependencies as well as copying published web assets to the ios directory simply use the following command:

npx cap sync

Instead of:

npx cap copy ios

Once your project has been opened with Xcode you'll need to update the Info.plist file to allow the ionic-camera application to request user access to the device camera and photolibrary (since iOS 10 applications require user permission to access hardware features such as the Camera or features such as the device media library).

The following Cocoa keys will need to be implemented within the Info.plist file to request user access to the device camera and photolibrary:

<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires access to the photo library.</string>
<key>NSCameraUsageDescription</key>
<string>This app requires access to the camera.</string>

These can simply be added to the top of the property list, above the existing keys, as highlighted in the following screen capture:

Editing Xcode property list keys

If you're not too sure on how to accomplish this simply read my previous blog article on Adding property list keys for iOS development with Ionic.

Once these property list keys have been added simply attach a handheld iOS device to your Mac and execute a build/run process: Xcode > Product > Run to publish to and launch/run the ionic-camera application on your iOS device.

All things being well (and, in my experience, using Capacitor to develop Ionic applications - instead of Ionic Native and the usual CLI build process - is fairly smooth and hassle-free) you should see the application running on your iOS device like so:

Ionic Capacitor application running on an iPhone demonstrating the splash screen graphic and home screen

Ionic Capacitor application demonstrating a selected image from the device photo library being rendered to the screen

You probably noticed the custom designed splash screen image in the first of the above screen captures?

This was added to the ionic-camera/ios/App/App/Assets.xcassets/Splash.imageset directory in the form of 3 individual files (replacing the pre-existing files for this directory):

  • splash-2732x2732-1.png
  • splash-2732x2732-2.png
  • splash-2732x2732-3.png

Similarly the application launch icons were added to the ionic-camera/ios/App/App/Assets.xcassets/AppIcon.appiconset directory in the form of the following individual files (replacing the pre-existing files for this directory):

  • AppIcon-20x20@1x.png
  • AppIcon-20x20@2x-1.png
  • AppIcon-20x20@2x.png
  • AppIcon-20x20@3x.png
  • AppIcon-29x29@1x.png
  • AppIcon-29x29@2x-1.png
  • AppIcon-29x29@2x.png
  • AppIcon-29x29@3x.png
  • AppIcon-40x40@1x.png
  • AppIcon-40x40@2x-1.png
  • AppIcon-40x40@2x.png
  • AppIcon-40x40@3x.png
  • AppIcon-60x60@2x.png
  • AppIcon-60x60@3x.png
  • AppIcon-76x76@1x.png
  • AppIcon-76x76@2x.png
  • AppIcon-83.5x83.5@2x.png
  • AppIcon-512@2x.png

Unfortunately I had to re-create/export each of the above launch icons individually (which is quite a tedious and time-consuming process) as I'm not aware of any Ionic/Capacitor CLI command for generating these assets en-masse (as is the case with the ionic cordova resources command for publishing said assets to the resources/ directory of a standard Ionic project).

If there is a command for Ionic/Capacitor launch icon/splash screen generation that I'm unaware of then someone please let me know and I'll update this tutorial accordingly!

Android

Last, but not least, we come to Android development with Capacitor - by far the most challenging and involved of all platforms.

Similar to the process we followed with iOS we perform the following process:

  • Run a build process to publish project assets to the www directory
  • Copy the published web assets to the android platform directory
  • Open Android Studio

Which is handled with the following commands:

ionic build
npx cap copy android
npx cap open android

Similar to what we covered in the iOS section if you want to update native dependencies as well as copying published web assets to the android directory simply use the following command:

npx cap sync

Instead of:

npx cap copy android

Once the project has been opened in Android studio you'll need to install the following Android SDK dependencies:

  • Android SDK Tools (26.0.1 or greater required)
  • Android SDK Platforms for API 21 or greater

These dependencies are able to be installed within Android Studio from the Tools -> Android -> SDK Manager menu option as displayed in the following screen captures:

Android Studio software dependencies being downloaded and installed

Android Studio SDK tools being updated

In order to run the ionic-camera application you can choose to deploy to a handheld Android device connected to your computer or test using an emulator.

Simply choose Run or Debug from the Android Studio Run menu and select the device/emulator you wish to use:

Selecting the deployment target (a Galaxy S6 handset) for testing in Android Studio

Important - There are some caveats that you need to be aware of with regards to Android development/testing:

  • Android emulators MUST use a system image of a minimum Android version 7.0 on API 24 (due to the System WebView version not able to be updated on emulators)
  • Handheld devices MUST use Android 5.1 or above

Believe me when I tell you that you'll more than likely run into Android errors and problems when running/testing your Ionic/Capacitor applications (I know I did and they are frustrating as hell to deal with let alone try and resolve) so you might want to take a look at the following resource from the online Capacitor documentation.

Good luck!

In summary

Cross-platform development with Capacitor is (with the possible exception of Android) fairly rapid, smooth and seamless. The team at Ionic have done an amazing job on creating a tool that is definitely, to borrow their own words here, a spiritual successor to Apache Cordova and Adobe PhoneGap.

The configuration process is fairly minimal and low impact while CLI commands are fairly quick and simple to accommodate into a development workflow. Furthermore Capacitor allowed me to generate an iOS build for a different project that was previously unable to be published when developing with Ionic Native - you want an endorsement for the software? There's one right there!

Expect to see more features and API's added to Capacitor over the coming months - especially with the release of Ionic 4.

If you've enjoyed what you've read and/or found this helpful please feel free to share your comments, thoughts and suggestions in the comments area below.

I explore different aspects of working with the Ionic framework in my e-book featured below and if you're interested in learning more about further articles and e-books that I'm writing please sign up to my FREE mailing list.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

Top