Generating Icons and Splash Screens with Ionic

One of the issues I’ve always had with mobile development is needing to scale images to support the multiple icon sizes and splash screen sizes. While customized icons and splash screens for each device is a valuable asset for any application, I’ve always viewed it as this tiring and monotonous task that needs to get done for mobile development.

Enter the  ionic resources  command. Now that I’ve been doing more mobile development with the Ionic framework and Cordova, I realized that they’ve got a plethora of tools to make mobile development easier.

In an Ionic project there is a “resources” folder that contains icon.png  and splash.png along with android and ios folders. If you run  ionic resources  from the command line within the Ionic project, it will automatically take the icon.png and splash.png and scale them or crop them to fit the appropriate sizes.

If you just want to regenerate the icons or splash pages only, use these commands:

ionic resources --icon

ionic resources --splash

For more info check out the Ionic Blog post: http://blog.ionic.io/automating-icons-and-splash-screens/

 

Developing Mobile Apps with HTML/CSS/JS

I’ve always been interested in mobile application development and I learned Objective-C for iOS app development. However, as my web application development experience increased, I started to question the scalability of code for different mobile platforms (iOS, Android, and Windows). Developing separate applications for each platform with similar functionality but utilizing each platform’s separate SDKs and languages didn’t seem like the best method.

Because of this, I began to lose interest in native mobile development (Especially with the regular updates to the OS and slight changes that meant that I would have to keep updating the code for each new version) and I put off mobile development for web app development which could be scaled to work for mobile browsers using a blend of frameworks like BootstrapFoundation, AngularJS, and Node.js. Of course, making a mobile web app had some drawbacks. It loaded slower and would always need a connection to the internet in order to fetch the pages.

ionicview

That changed recently when I was re-introduced to Cordova and PhoneGap as well as the Ionic Framework. I had heard about Cordova when I was working with Objective-C but after a quick initial investigation, decided that it wasn’t for me due to the limited functionality in the earlier days. After a deeper dive this time, I’ve begun to see it as a platform that I can develop for.

It still uses HTML, CSS, and Javascript, but it’s a specialized project developed solely for mobile applications which allows for native app deployment rather than mobile website creation and can call the actual mobile platform’s SDK. It’s different than a webapp port, but it allows the web developer to use the same language (re-use big portions of code) and create hybrid applications for each platform that look like native applications and render through cached files.

Here is a great article about the history of Cordova & PhoneGap and the UI framework for them known as Ionic and here is an article about what the Ionic Framework is.

The biggest issue I reached early on was the need to talk to APIs and the CORS (Cross-Origin Resource Sharing) issue. Because some APIs don’t expect to be called client-side (which is what you code for in a Hybrid app), this causes some development pains. Rendering in the browser allows for fast iterative development and better debugging without having to rebuild each time, but will regularly throw the CORS issue in your face, while deploying to the phone will work perfectly fine but limit your debugging capabilities. To circumvent this, you need to open a new browser window with web security turned off (which is dangerous, so only use it for your application). More info on how to do this can be found here: http://superuser.com/questions/593726/is-it-possible-to-run-chrome-with-and-without-web-security-at-the-same-time

After that, I was in the free and clear and I’m starting more mobile development again.