What are you building with Ionic? We want to know!

hello vmaliko, nice app and I give it a try!
i was seeing the pictures and i’m interested in a photo browser like you have implemented. Is it was done using a component? Or it was done from scratch?

Thanks for you help and good luck with your app!

I agree with everyone else; ViceVersa is a perfect showcase for what Ionic is capable of. I am currently nearing the tail-end of development on an app called Nobly and would love to pick your brain on how you accomplished some of the smooth scrolling and transitions that you did on ViceVersa. They’re the best I’ve seen yet on the platform. I’d be happy to pay you for a 2-3 hour consultation if that’s something you’d be available for. If so, please feel free to reach out to me directly.

And congrats either way on the launch of a great app in ViceVersa!

Wow, just wow!

Thanks a lot for this, what a great way to start our day!
We’re based in Paris, so it might be a bit difficult to reach out, but you can email me at jonathan@viceversa.io if you need help, and we’ll figure a way out!
We’re currently in the showcase in the “new apps” section (even tho the formatting of our image is off, I’ll talk about it with the great @katiegv) and are in touch with the ionic team for a blog post so stay tuned!

Again, I would like to thank all of you for your interest in Viceversa, it means the world to us and we will start releasing blog posts on how to optimize your app as soon as our app is stable and officially released.

Have an awesome day everyone!

Nice job guys! Good to see someone else from Paris

1 Like

Hi everyone!

Our company is building its app in Ionic. OpenLine is an app that any employee can use in their workplace to have honest discussions without needing to reveal their identity.

  • We’ve released an iPhone app, and Android app, and a web app, all using the same codebase thanks to Ionic!
  • The app syncs in realtime to the Scala backend using websockets.
  • We use Amazon SNS for push notifications.
  • We use HTML5 appcache to deploy updates over the air without needing to wait for app store review turnaround.

3 Likes

Hi mikemintz,

Openline looks like a great app. Just tried the webapp version and try the ios app soon.

Can you give us any thoughts on how to convert the ionic app into webapp (any lessons learned) and also how to use HTML5appcache to do deploy over air…

thanks
.iqlas

Thanks @iqlas!

For the webapp, we pretty much just have the webserver serve the www folder. We created a separate cordova hook to add <script src="cordova.js"></script> so that it won’t attempt to load in the webapp.

Anytime we use a cordova plugin, we have graceful degradation. E.g. for toast messages, if window.cordova exists, call $cordovaToast.showShortBottom; otherwise, use jqlite to create an absolute position div and $timeout to destroy it after a few seconds.

For the appcache, we did the following:

Update config.xml with the following

<content src="native-loader.html"/>
<platform name="android">
  <preference name="ErrorUrl" value="file:///android_asset/www/cordova-error-page.html"/>
</platform>
<platform name="ios">
  <preference name="ErrorUrl" value="cordova-error-page.html"/>
</platform>

The native-loader.html is a short HTML file that just uses javascript to redirect to index.html hosted on our server. We use a cordova hook to set the URL in native-loader.html by platform. Our webserver serves the latest copy of platforms/android/assets/www for android, and platforms/ios/www for ios.

The cordova-error-page.html is a friendly error page with a reload button, which is displayed if the user does not have internet when they first open the app (irrelevant once they have first downloaded the appcache).

Our index.html starts with <html manifest="cache.manifest">. We have a scala script that regenerates www/cache.manifest each time we deploy an upgrade, which includes a recursive list of files that need to be downloaded by the browser (including cordova/plugins).

The services.js file defines a constant with the latest version number. When it connects via websocket to the server, the browser sends the version number, and the server sends a response telling it whether or not it has to upgrade. If it has to upgrade, we display an $ionicPopup to ask the user to upgrade. When they tap the upgrade button, we run the following code:

$ionicLoading.show({template: 'Downloading update'});
var applyUpdate = function() {
  $ionicLoading.show({template: 'Installing update'});
  window.location.reload();
};
var appCache = window.applicationCache;
if (appCache.status === appCache.UNCACHED || appCache.status === appCache.OBSOLETE) {
  applyUpdate();
} else {
  appCache.addEventListener('error', function() {
    $ionicLoading.hide();
    var popupOpts = {
      title: 'Could not download update',
      template: 'There was a problem downloading the latest version of OpenLine. Please check that internet service is working on your device.',
      okText: 'Try again'
    }
    if (!mustUpgrade) popupOpts.cancelText = 'Later';
    var popupFn = mustUpgrade ? $ionicPopup.alert : $ionicPopup.confirm;
    popupFn(popupOpts).then(doUpgrade);
  });
  appCache.addEventListener('updateready', applyUpdate);
  appCache.addEventListener('noupdate', applyUpdate);
  appCache.update();
}

When a new user installs the app, the latest version will be downloaded automatically. When they reopen the app after a new version has been released, they’ll be prompted to update. When they have the app open during the upgrade process, the server will close all existing websockets, and when the browser reconnects they will resend their old version number and be prompted to upgrade.

3 Likes

First I would like to thank Ionic and @mhartington for solving many of my issues.

This is my first App with Ionic and as a matter of fact with AngularJS.

Today we uploaded our app and all of the users liked it. The app is for sharing Indian Saree Blouse designs among users.

https://play.google.com/store/apps/details?id=com.iyaffle.blouse


and

Manual for proper waste collection…

https://play.google.com/store/apps/details?id=com.vacanzelandia.amici

and

https://itunes.apple.com/us/app/vacanzelandia/id954779400?ls=1&mt=8

Your holidays will not never been so affordable

How did you get the images on the device?

Let me know when this is done :), is it secure?

Been working on a skin for generic social ionic apps. It’s called gemionic… Its the by product of a work in progress that’s fleshed out.

I really want to go into template developement for ionic for most app cases. Is this a major need for developers to fastrack having to start from scratch?

Product Url: http://audacitus.com/gemionic

Images attached
http://audacitus.com/gemionic/images/screenshots/6.jpg

http://audacitus.com/gemionic/images/screenshots/8.jpg

http://audacitus.com/gemionic/images/screenshots/9.jpg

http://audacitus.com/gemionic/images/screenshots/1.jpg

http://audacitus.com/gemionic/images/screenshots/2.jpg

2 Likes

Really nice template, but I strongly suggest that you say up front on your site etc. that it is a ‘charge for’ template. All indications are that it is a free download until you get to the last step, and even then the price is not that easy to spot.

No problems at all with you actually charging for all your hard work, but I think it gives a better impression if you state the cost right up front to prevent potential customers from feeling they have been ‘lead on’ a bit.

But like I said - great template, and I will likely look at purchasing it for a project that is currently in the planning stage. Will it work with Beta 14 ?

1 Like

Thanks for the feedback. Didn’t mean to mislead anyone. Will reflect your suggestions.

I worked on this before beta14 came out, so i decided to finish this first before moving to that. Once i’ve familiarized myself with it all new templates will be in beta14. I did enjoy working on this, and I’m open to suggestions.

Thanks again.

I’ve been having a lot of fun developing my app PaintMyDay making use of the awesome Ionic Framework!

PaintMyDay delivers you a piece of fine art every day together with a detailed description about the work and its artist. If you want to discover more paintings you can browse and search through the archive.

I used the ion-slide-box in my project and I must say that i really like it a lot! Heard some rumors that it will get a refactor but oh well it’s performing quite nicely with some considerations.

Also I incorporated some very cool (ng)Cordova plugins which also really speeds up development of specific functionalities:

  • social sharing
  • dialogs
  • in app browser
  • splash screen
  • status bar
  • app rate

PaintMyDay is available for tablets and smartphones on iTunes and Android so go check it out! :smile:

Some screenshots:


1 Like

I wish I was far enough along to show things. We’ll, I’m almost done with with the UI but that’s the easy bit.

I’m building a health tracker with the basics in it. There isn’t an app that is as focused as this and I’m building it because it’s something I wanted and couldn’t find. It gives advice that is backed up with evidence and is the kind of thing that would be really useful with something like Sworkit. I’ll post when it’s ready.

Hi - The app I’ve been working on has just been officially released:

Papa John’s Pizza UK - Exclusive deals, order tracking and the Papa John’s Quality Guarantee which allows you to make a complaint if the pizza isn’t up to Papa John’s standards. This is specifically for the UK only, so no use to anyone not in the UK I’m afraid.

IOS: https://itunes.apple.com/gb/app/papa-johns-exclusive-deals/id966491188?mt=8
Android: https://play.google.com/store/apps/details?id=uk.co.papajohns.ppjqg

(edit to include screenshot)

2 Likes

Congrats! How did you get the texture affects in the header that looks fresh!

@gmustudent
Photoshop and a special brush :smile:
and add the image as background image