On A Saturday afternoon after responding to a friend’s comment on Facebook I decide to hack together something in a few hours.

I made the Ionic App public and you can look at the source code in our public repo.

D8ii Limited we pride ourselves in helping startups through to Series A and further stages in technology as well as experts in JS, javascript, Node.JS, Java.  (We really focus on JS).

Please note this is a very basic example of an ionic project. We did in 2015 push Ionic (which is a hybrid platform for releasing apps) to the extreme and launched Rabadaba (Social Network – Facebook/IG/Twitter) in a few months.

There wasn’t any reason to this but really just an experiment because I have lapsed in doing any serious coding this year.

For startups – Ionic is great for validating an idea or just testing and validating some assumptions.

If you look in 2016 you can see my github contributions:

screen-shot-2016-11-13-at-16-03-41

This is somewhat a lot less than the year before:

screen-shot-2016-11-13-at-16-03-30

So I haven’t really coded in anything for a long while.  However last week I did build the backend for microservices and jumped into a bit of Ionic dev after a long hiatus.

The app is built from the ionic starter template

$ ionic start myapp [template]

I used the tabs default.  Some warnings though the starter templates are not structured for complex apps.  You can build something really simple with the starer template but I strongly recommend not to use them for larger complex apps.  You can read a bit more about directory structure here.

With larger Ionic apps we also use scripts like gulp to do things like minify the css and js when building.  Also we use requirejs to keep things modular.  You will need to start splitting out your files in a nice folder structure and have a decent loader for this on your pages if you don’t want to create a big mess later so that’s my warning.

With Trump News.  What I did was first looked at what they gave me.  So I realised okay the chat template has static json which doesn’t work so great.  We had to change that at first and actually fetch something from a real api:

So I added the $http service and fetched some data from my celeb news services.

Okay now we had the json data it was just only a matter of a few lines to display this data.

<ion-item class=”item-remove-animate item-avatar item-icon-right” ng-repeat=”item in items” type=”item-text-wrap” ng-click=”gotoNews(item.id)”>
<img ng-src=”{{item.image}}”>
<h4>{{item.title}}</h4>
<p>{{item.score | currency:”USD$ “}} </p>
<i class=”icon ion-chevron-right icon-accessory”></i>
</ion-item>

The insert of code is here.

Really there wasn’t that much code which I did to make this app maybe about 20-30 lines max.  Some things to note is I used the template currency formatting and ng-src.

The reason for the ng-click function is because to allow you to nagivate to external links you will need to add a cordova plugin in-app-browser to your app.  It won’t work out the box.

Some other quick hacks in a list for ease:

  1. I built the app icons using the icon splash screen and icon generation.  I grabbed a few stock images created the correct sizes and built them easily.
  2. To generate an android release apk you need to create a keystore. This tutorial is a little out of date but you can generate the keystore and just add the required details to the build.json
  3. ASO and deciding what to rank on.  The title or name of your App plays the most importance in ASO so I decided to aim for ranking of “Trump News”. Hence the title of my app.  Also they rank you on combinations of your keywords so you should aim for a title which can make a lot of combinations in long term.
  4. You will need to pay $25 for a developer license to release.  This process is 5 minutes.
  5. You will also need to generate a featured image and larger icon image for the App store as well as details of the app and some screen shots.  This process should take no less than 30 minutes.
  6. With a release APK you can either live load it onto your android phone if you have it or download install it on your device to test.  I recommend doing this before you release since building and running code in the browser in Ionic isn’t always how it will work on a real device.  There was issues with links/mailto etc which I decide to remove after.

trump news google play

Anyway if you have any further questions you can contact me on facebook or via my website.