Common Ionic 3 Development Mistakes

WRITTEN BY GARETH DUNNE @JSDIARIES

As I have got to terms with many of Ionic’s development ways I have encountered a whole host of different errors that has slowed my development down.

In many ways, this is key to learning the framework, however I thought I’d share some of the more frustrating moments that I encountered so that a developer may be able to be more aware in his/her app building process.

I decided to create this post after seeing a simliar post from Toptals most common ionic development mistakes.

Again, if your looking to expand your Ionic knowledge I highly recommend this Ionic 2 cookbook.

These mistakes stem from an app that I made called CoffeeTrail.

Android Coffee Finder Application CoffeeTrail
CoffeeTrail

It’ll be on the iOS store very soon but be sure to check it out on Android here.

Cordova Documentation

The Ionic framework is built on top of Apache Cordova.
Cordova is responsible for packaging your HTML5 app as a native app that can run in Android, iOS, and other platforms. They have documentation that is both informative and verbose and should be read frequently when experiencing bugs and errors.

This seems to be relatively simple idea but one I was consistently ignoring at the start of my development. Whenever I would search for specific Ionic errors I would limit my search to all things Ionic, including the Ionic forums, stack overflow etc.

A lot of the time I would actually find a solution by looking at the Cordova documentation.

As Cordova is really the bread and butter of an Ionic application it can really help to examine information about specific plugins that power your application.

There is a significant amount of useful documentation here, especially for platform specific information for Android and iOS:


Ionic View

One of the handiest ways to produce an .ipa file without owning a Mac is to use Ionic Package. Ionic Package builds your application in its own cloud so that you can download it from their server.

However, you still have to run around many configuration steps to produce an .ipa file.

My advice here is to meticulously follow the Ionic Documentation to do this.

And any time you want to generate a Apple keychain file or p12 from a Windows machine have a look at this guide here.

Once finished you can view your application via the Ionic View app here.

This is very useful for testing your application across a wide range of device since you are testing it on a server just download the Ionic View app onto your desired device and test it out.

Configuration

Just because we are developing hybrid applications does not mean we don’t have to still specifically cater to each platform in some shape or form. I quickly found this out when using the Google Maps SDK.

When building with Android I had no problems and the map, locations and assets would be retrieved from the Google servers without an issue.

However when building for iOS the map would never display like so.

Ionic Google Maps Error
Ionic Google Maps Error
.

And after checking the network requests in the Safari there seemed to be no problems. With no errors logged after debugging and confirming that the map element is actually loaded I initially I thought this must be a style issue with the div map element but after some deliberation I found out in the Cordova documentation some extra information was needed in my config.xml file. specifically for iOS.

According to the docs , applications without any tags only have file requests from urls that are allowed.

Resources

When you are ready to build your application to production you will need to generate your image resources for your project.

We can do this using the command :

A lot of the time my original splash image wasn’t at the correct resolution to be transformed into various other dimensions for mobile tablet etc. Ensure that you can correct this as the resources step is required for building to iOS or Android.

For more information check out the resources in the Ionic Docs.

Serving your application

Whenever you use the command:

Your application is wrapped in a display for each platform. This is also the case if you use Google’s developer tools mobile responsive view, your application will render the components relevant to Android or iOS and even Windows.

While this is undoubtedly useful to preview platform specific components do not assume that the behavior here is representative of what will actually happen on an emulator or a real device.

This may seem obvious; however, I was initially confused by this as the -labs display resembles an authentic emulator. For actual emulators you can use Xcode for iOS or Android SDK Tools for Android applications.

So these are just a few of obstacles I encountered throughout my development time with Ionic. If you are looking for some valuable tutorials and resources, feel free to check out my previous post regarding excellent learning tutorials for Ionic.

Top Ionic Resources to Learn Hybrid App Development

WRITTEN BY GARETH DUNNE @JSDIARIES

Hybrid app development is an extremely fast growing niche. In particular, Ionic 3 is a platform that allows you to produce and distribute your app ideas to the market without having to specialise in iOS or Android development.

We can use the latest and greatest from frontend web technologies such as Angular 4 to power these apps. If you have previously read any of the Ionic content here, such as Creating a Google Map Place or Ionic 3 whats new? then none of this will be news to you. However, I wanted to list what I think is the highest quality learning content available now in relation to Ionic 3.

While there currently isn’t a proper Ionic 3 book to use as a learning resource. This Ionic 2 cookbook covers a wide range of Ionic developing basics and more.

Toptal also covers some common Ionic development mistakes here.

Content that is more practical than theoretical will always be a stronger learning asset so hopefully some of these will help to continue or start your Ionic development path.

Coursetro

Starting off with the Ionic related content on Coursetro.

I cant emphasis enough how much knowledge is gained from following any of Gary Simon’s Ionic related courses.

Starting all the way from designing a prototype in Adobe XD to implementing and developing your designed app using Ionic 3, no other content practically nails down the broader scope of full stack development by creating hybrid apps.

In particular, the course focusing on creating a gaming related app could not be more practical for creating a high quality application with solid functionality and purpose.

Just note that this tutorial in particular is behind a monthly subscription model, for one of the non premium app courses you can see the Wife Alert app which is not updated to Ionic 3 but the core fundamentals of Ionic are still there to learn.

Paul Halliday

Paul is one of the most prolific publishers when its comes to Ionic 3 content at the moment. He covers a plethora of useful Ionic 3 tutorial on his Youtube channel as well as some Udemy courses which I have no experiences with but if they are anything like his free content they are up to a very high standard of teaching.

I’m constantly learning new technologies that I can use in combination with the Ionic stack that would not know otherwise. On those terms, he is unmatched in the Ionic tutorial world.

Here are some of my favourites of his free content.

Joshua Morony

One of first Ionic tutorial publishers, Joshua provides frequent, useful and clear cut tutorials on his website and Youtube channel. There is an abundance of content that you can explore and he is up to date on the Ionic 3 front.

Joshua provides very good elements of clarity as he explains his content and has an impressive amount and experience publishing Ionic content.

Some great material here:

Raja Yogan

Raja has produced some very nice, lengthy and free content on Youtube. He provides very useful and fully fledged practical Ionic examples, usually in combination with Firebase.

I really enjoyed his latest chat application and encourage you to check it out, as its a fantastic series for building your own application using Firebase and Ionic. He is also a publisher who speaks clearly and teaches by example with no unnecessary theoretical fluff.

Exploring any of those publishers content is a great way to really get to grips with Ionic and Hybrid Web Development in general. All with their own different teaching styles, even spending a few hours will be more than beneficial to understanding various concepts for hybrid development.