Testing out Ionic

I spent the last few hours looking at Ionic as an alternative to using jQuery. I have used a good few prototyping tools so I thought using Ionic would be similar enough to those. It is, but it is a little bit confusing to use too. I also feel it’s a little more constricted to use as a free user – for example, any HTML coding is for Pro users only.

Anyway, I went ahead and tried to recreate the home screen of my app. Immediately, I ran into an issue – they don’t have a circle shape in their Components section, so I couldn’t place the huge circle that takes up most of my home screen.

no-circle.PNG

Another thing I noticed is that the header can’t be the same name, it has to be the name of the page. In my mockups, each screen’s header has “Unwind” instead of the page’s name- and I couldn’t align the text to the center. Also with the home and settings icon, I wasn’t able to link them to the home and settings pages.

header.PNG

I wasn’t able to change the opacity or the height of the list items either. As well as that, the chevron’s had to be the same colour as the text, without the ability to change the opacity on those.

lists.PNG

Lastly – for some reason when I preview the app, the tab menu is at the top and not the bottom. It won’t let you move it either, so it was stuck at the top. Actually, all items you place (headings, paragraphs, lists, etc.) are pretty much stuck in one place and you don’t have the ability to move them freely. Also the icons in the tab menu are customizable, and you have to use the Ionic set, not your own.

preview.PNG

I think Ionic is a good platform for building apps, but only certain apps – I don’t think this is suitable enough for my app, and I feel more comfortable coding in jQuery where I have a lot more control and customization. It was important to try out Ionic just in case! Here are my finished three screens:

breathe.PNG relax.PNG

distract.PNG

You can preview here: https://creator.ionic.io/share/23c0cebe99fc

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s