This post is a second part in the Ionic series of posts. In the previous post, we learned about getting started with ionic and how to quickly create an ionic application, build and run the same. In this post, we will take a look at some of the promising features of ionic CLI. As I write this post, these features are still in beta in ionic CLI version 1.3.10
One of the most painstaking aspect (to me at least as I am more of a service side programmer) in the mobile application is creating resources for the application. Resources include app icons and app splash screens. These need to be carefully created for different screen size and pixel density. Before Ionic, for not so proficient UI guys like me this would be a very daunting task. But with Ionic’s resource generator command, this has become much simpler and easier at the stroke of a single command.
Once your ionic project is created, navigate to the project directory and add the platform of your choice. With Android platform added, if you look at the “resources/android/icon” or “resources/android/splash” the folders would look empty. Running the below command confirms the same.
E:\Sambu\Project\IonicSamples\mySampleIonicSideMenu>ionic resources Ionic icon and splash screen resources generator ? icon source file not found in any of these directories: resources, resources/android ? valid icon source files: icon.psd, icon.ai, icon.png ? splash source file not found in any of these directories: resources, resources/android ? valid splash source files: splash.psd, splash.ai, splash.png
To create new icons/splash screens for different sizes & pixels, all we need to do is, add two files with the maximum resolution and name them as icon.png/icon.psd/icon.ai and splash.png/splash.psd/splash.ai under the resources directory and run below command again. Ionic does the scaling and generates icons and splash for all the supported screens.
E:\Sambu\Project\IonicSamples\mySampleIonicSideMenu>ionic resources Ionic icon and splash screen resources generator √ icon android drawable-ldpi-icon.png (36x36) from cache √ icon android drawable-mdpi-icon.png (48x48) from cache √ icon android drawable-hdpi-icon.png (72x72) from cache √ icon android drawable-xhdpi-icon.png (96x96) from cache √ icon android drawable-xxhdpi-icon.png (144x144) from cache √ icon android drawable-xxxhdpi-icon.png (192x192) from cache ? splash android drawable-land-xhdpi-screen.png (1280x720) skipped, source image splash.png (1024x1218) too small ? splash android drawable-land-xxhdpi-screen.png (1600x960) skipped, source image splash.png (1024x1218) too small ? splash android drawable-land-xxxhdpi-screen.png (1920x1280) skipped, source image splash.png (1024x1218) too small ? splash android drawable-port-xhdpi-screen.png (720x1280) skipped, source image splash.png (1024x1218) too small ? splash android drawable-port-xxhdpi-screen.png (960x1600) skipped, source image splash.png (1024x1218) too small ? splash android drawable-port-xxxhdpi-screen.png (1280x1920) skipped, source image splash.png (1024x1218) too small uploading splash.png... √ splash.png (1024x1218) upload complete generating splash android drawable-port-hdpi-screen.png (480x800)... generating splash android drawable-port-mdpi-screen.png (320x480)... generating splash android drawable-port-ldpi-screen.png (200x320)... √ splash android drawable-port-mdpi-screen.png (320x480) generated generating splash android drawable-land-hdpi-screen.png (800x480)... √ splash android drawable-port-ldpi-screen.png (200x320) generated generating splash android drawable-land-mdpi-screen.png (480x320)... √ splash android drawable-port-hdpi-screen.png (480x800) generated generating splash android drawable-land-ldpi-screen.png (320x200)... √ splash android drawable-land-mdpi-screen.png (480x320) generated √ splash android drawable-land-ldpi-screen.png (320x200) generated √ splash android drawable-land-hdpi-screen.png (800x480) generated
I was completely impressed by this CLI addition as this saves a lot of time and energy for the designers/developers.
Distributing the application is much easier by uploading the app to your ionic account by running the below command
E:\Sambu\Project\IonicSamples\mySampleTab>ionic upload Uploading app... Successfully uploaded (69012cb8)
Packaging the mobile application for release/debug mode is again easy by running the below command
E:\Sambu\Project\IonicSamples\mySampleIonicSideMenu>ionic package release android Loading mySampleIonicSideMenu... Android Keystore File (.keystore): my-release-key.keystore my-release-key.keystore Keystore Alias: sampleKey Keystore Password: Key Password (optional): Uploading app... Successfully uploaded (490020ee)
To run this command successfully, we need to
- First sign up for FREE account with ionic
- Then, the keystore/certificate details for signing android/ios application should be created and be readily available. This command would create the package and upload it to your ionic account. This is definitely simplifying the developers’ lives, as with a single Ionic command line interface, we could start a new project and go on till distributing the app.
Though the following one is not really a CLI feature, I found this very easy and intuitive to distribute the ionic applications to QA team/ business users to seek early feedback. With the previous two commands ‘ionic upload’ and ‘ionic package’, we are already half done in this process. Ionic’s latest release is the Ionic view app– to be downloaded from iTunes Store. Currently this is made available only for iOS platform and android would be out soon anytime. Once you upload your ionic/cordova application to your ionic account, the same would be available under Ionic View App (after you login with the same account in the Ionic view app). This app brings up Cordova “InAppBrowser” and launches the uploaded app within it, Ionic view also provides access to the plugins that are being used in the application. We also get the option of sharing the app from within ionic view to others.
Ionic’s CLI and the various powerful features that it offers are growing and growing day by day. With more and more exciting stuffs like this, hybrid mobile app development would definitely become a lot easier and merrier than before 🙂
Swaminathan Vetri 