What are /r/ionic's favorite Products & Services?

From 3.5 billion Reddit comments

I've said it countless times before and I will say it again - I love Ionic... It's a great framework to work with - with an even mo-greater community and backing team... Having mucked around with Cordova-vanilla (no robust frameworks with their even-mo-awesome awesome CLIs) in the past, Ionic was a breath of fresh air into an approach I'd began dismissing as "native is better, despite the additional investment cost"... Hybrid app dev is complicated - that's just a fact.. Ionic simplifies those complexities just about as much as they can be, without watering down your app... If you've not spun up an app using Ionic before, do yourself a favor: http://ionicframework.com/getting-started/

Hey... you might catch some flack for using something like OneDrive to sync a project... but folks need to remember that we all make mistakes.

The lesson is, it's not a good idea to use Something like OneDrive or GoogleDrive to sync your projects to different machines. Although it might seem tempting at first.

Another thing I think you're missing here (And I think this is the most important point)...

...you need to run "npm install" if you want to run or build a project on another machine.

This will take the settings inside your "package.json" and install all the dependancies in your node_modules folder. (Remember stuff inside your node_modules folder does not get shared across machines - it needs to be installed on each machine)

Like the other comment here, I recommend BitBucket rather than GitHub as you can have unlimited private repos on BitBucket whilst GitHub charge a fee for private repos.

There is also a handy GUI app for managing your repos called SourceTree. Especially helpful for less experienced devs.

So TL:dr...

1) Use source control (Git is fine for Ionic) 2) make sure you run 'npm instal' when you use a new machine 3) Get BitBucket and SourceTree to help with code management across machines

Links:

https://bitbucket.org/ https://www.sourcetreeapp.com/

Steights

• iOS: https://itunes.apple.com/de/app/steights/id1161734392?mt=8
• Android: https://play.google.com/store/apps/details?id=com.tmdev.steights
• Steights is an app which lets you compare your height with the height of popular people around the world. Just enter your height and gender and browse through thousands of entries.
• Users: Fresh App released a couple of days ago so there are about 20 Users :-)
• Ionic: V1

You start with an ionic app instead of creating an angular app and then adding ionic parts to make it mobile. You could do that in theory but you'd waste alot of time reinventing the wheel by integrating Cordova etc

Use the tutorial. http://ionicframework.com/getting-started/

I launched my time tracking app last Aug which syncs up all the data with the website.

Ionic v1.3 Around 10-20 people using it daily. (I haven't really been promoting it outside of the website). I think Ill push a lot harder when I upgrade it all to Ionic 2.

GPS location recording, 3D touch, receipt capturing, reporting can email you a PDF, everything in sync with the website.

iPhone Link

Android Link

I just released a side project I've been working on earlier this week. It's pretty barebones right now but I'll be adding more features. I'm also planning on releasing it as a responsive progressive web app using the same codebase.

• TV For Reddit. It's a video player using the Reddit API.
• Very, very few at the moment.
• Ionic 2 RC0
• Autoplaying videos - next video starts when the previous video finishes. It defaults to the frontpage of Reddit, but you can switch to a specific subreddit like videos, television, etc.

>With a federated firebase login (google/facebook/twitter), am I going to end up doing most of the UX, positioning various buttons in my own panels?

So with Firebase you do not need more than a button for each provider since you call the same method while passing the provider (Google for instance) which then launches a native (if the app is installed) or web widget which has the UI pre-packaged.

​

>Is it possible to get silent login, ie. already have a unique id, without having to prompt at all?

So Firebase has a thing called an anonymous login, which allows you to create a session that you can then link to an account if the user wishes to sign up at a later time.

​

I hope you do end up using Firestore! It's been my bread and butter for the last 5 years and I've been super happy with it.

PhoneGap Build is going to be shut down, just fyi: https://dev.to/ionic/saying-goodbye-to-phonegap-1gp4

If by free you mean having a free plan, yes we are working on expanding our free plan to make it easier to get started using the build features. However, keep in mind that Appflow has a ton of features that PhoneGap Build does not, such as remote app updates and deploy to app store.

At the end of the day, we can't give everything away for free. We need to be able to invest in building out Ionic/Capacitor/etc. and so providing this service is one way to do that. Whenever we charge for anything people complain, but we give so much away for free that we literally could not work on this open source platform without generating revenue on services like Appflow. We think (and know, based on our customers!) that Appflow provides a ton of value, and it cost a lot of money to run the service, so we charge for it.

We don't have the luxury of being a cost center for a company like Google or Facebook. But I prefer it that way. This way we're in business to help teams be successful and dedicated to helping them do that, rather than just serving a bigger company's needs.

Definitely worth it! React creates pretty large bundles out of the box if you're not careful. This is why most devs building fast PWAs use Preact if they are in the React ecosystem. You can and should also look into the dynamic import technique for lazy loading react components. https://reactjs.org/docs/code-splitting.html

The bulk of the javascript portion is actually handled by Rollbar’s Javascript integration, here: https://rollbar.com/docs/notifier/rollbar.js. ng-rollbar isn’t compatible with Angular 2, but it should be fairly straightforward to create a simple wrapper for it. There’s an even simpler Angular 1 integration that could be a good source of inspiration: https://github.com/anotherpit/angular-rollbar/blob/master/angular-rollbar.js

I am using for Android Buddy.Works and for iOS Bitrise

Buddy has amazing customer service and the UI is super slick.

Bitrise is slower on chat since I think they are dealing with people moving from buddybuild who got bought by Apple (no relation to Buddy.Works!)

Apparently Buddy.Works have iOS deployment in the pipeline.

Bitrise support are lovely but much slower and not very Ionic focused. But it gets the job done.

I prefer real build and deploy to an actual app, rather than Ionic View.

(Code saved on bitbucket or github and built on every commit)

The auth0-lock package is a JS-based module that can be installed via NPM, regardless of version. You should be able to use either v10 or v11 in either Ionic1 or Ionic2/3. I have looked at https://auth0.com/docs/libraries/lock/v10 and v11 and it looks fine for all Ionic versions.

If you are unsure enough to ask this question here, it may be wise to follow a path that has more readily available resources, such as anything with a tutorial.

Rewriting apps can vary in difficulty and while I personally advocate for eliminating technical debt by upgrading frameworks it is not always within time/money/ability budget.

That sort of question has an answer too long for a reddit commit. It's a pretty standard extension for the http://socket.io/get-started/chat/ tutorial case that you'll find nice guides for. All a "room" is, is just a subset of users. A simple map structure would work.

The final solution, in case anyone finds this later:

https://stackblitz.com/edit/angular-ukcfkk?file=src%2Fapp%2Fservice%2Ffetcher.service.ts

By all means you could set the PN sound to be a long annoying sound, though I'm not sure if there's a limit to the length of the sound clip. I don't think there is a way to override silent mode using this method, though.

You'd probably have to run the App in the background to achieve the other requirements. You could trigger a function on receipt of a notification and play your own sounds using the Cordova media plugin, which IIRC overrides silent mode, however it does not override volume. You can define a vibration pattern on Android and Windows only.

This all relies on the App running in the background, though. If someone hard-quits the App, the on-notification event won't run.

In my experience working with background mode is an absolute nightmare, especially since Android 8.

I personally really enjoy Firebase analytics. If you use Firebase for other things it all ties together too, also Google builds in their sweet AI super powers to help with predictions, projections, estimated usage and even potential feature impact once you have enough collected data: https://firebase.google.com/products/analytics

I had a similar problem when trying to get Ionic running. The mistake I made was installing NodeJS 9.3.0 Current instead of the LTS 8.9.3. https://nodejs.org/en/

Once I uninstalled 9.3.0 and installed 8.9.3, problem solved, Ionic ran first try.

Here's a sneak peek of how you can display code in DeckDeckGo our upcoming open source editor for presentations

​

It's build with Ionic (core) and StencilJS (the PWA toolkit and some custom components)

Android: https://play.google.com/store/apps/details?id=com.issam.servio

IOS: Soon

Description:

Do you wanna check if the servers are down but you don't wanna use your pc?

Well with this app you can check everything at once !

Features:

- Easy To Understand !
- Check Everything In Detail !
- Auto Refresh !
- NO ADS !

Temperature Converter

• Number of users: Just me lol. It has been a complete failure.
• ionic version: 1
• any cool features to showcase: It just converts between different temperature units. I did it to learn both angular and ionic. I'm happy with the result, although I realized I have no taste for the UI and zero idea of marketing

I think the killer feature is pushing updates between full updates. I'm not sure of any other service that does that at a better price. Firebase Remote Config might do that but I've never worked with it before:

https://firebase.google.com/docs/remote-config

for cloud builds, I'm sure there are other services to do that. AWS has one, I think.

if you use, useEffect to load the data, you can set the parameters and dependencies and the data will reload when the page is rendered.

If you provide a code sample, I might be able to explain it better. You do not need to use the lifecycle hook.

​

https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

Yes you sure can. I use Drupal on the backend for a hybrid approach. My project is music related. I have two ways that I use my data, so my Drupal solution has two parts. The dynamic part is a Drupal 8 module that takes input and returns json (it's a search). It also produces a playlist of random tracks of configurable size, produces statistics about the dataset, etc. The static part is also a Drupal module, but it generates a boatload of static json files on disk, refreshed occasionally by cron. There are lots of times when all I want is a given recording , so it's faster to just load up a static record like /foo/data/recordings/by/id/12345.json than to load it from Drupal dynamically. This approach wouldn't work very well for a "large" dataset, but mine is less than 20k records so it works fine. You might want to look into the Drupal 8 REST api. It's probably plenty for what you want to do. https://www.drupal.org/docs/8/api/restful-web-services-api/restful-web-services-api-overview Good luck!

Hey guys, the creator here 👋

Today, I launched a useful developer tool that helps you to optimize and preview your app's copy and screenshots on the App Store without the need for publishing it live or any other design tool.

It is now live on Product Hunt 🚀: producthunt.com/posts/storepreviewer

I would love to hear your feedback!

🤔The Problem

Whenever I want to try out or publish a new app I encounter this one repeating and very annoying problem: There is no way for me to see how my app’s copy and screenshots will actually look like. On the App Store. In real life. On the device.

Playing around with various Sketch/Figma templates is nice for perhaps that one logo preview but iterating over multiple screenshot ideas is quite cumbersome and takes a lot of time. Not even thinking about doing it for multiple devices, dark and light mode as well as the list and detail view.

💭Thoughts

Optimizing your app’s copy and screenshots should be a creative, productive and most important fun process. You should be able to iterate fast and be efficient while finding the assets that fit you best.

🛠The Solution

A web app based on this premise. StorePreviewer is a useful developer tool that helps you preview your app on the App Store in the way it should be. Switch between different views and devices, try out various designs and find out what fits you best.

▶️Link to the site: storepreviewer.com

Great! If you're new to Angular, I recommend their Tour of Heroes tutorial. Ionic apps are just Angular apps after all, so learning Angular fundamentals first will really help.

Exactly. OP should be using data binding, assuming they are using Angular version of Ionic

https://angular.io/guide/binding-syntax

Anything returned from a server should be a primitive. Like a Boolean or String. The <ion> parts of your code should only be in the source code of your app, not sent down from a server.

Angular is the base of all, you just need to understand the basic at first, and you could do it by going through the tour of heroes tutorial. And the rest is in the ionic documentation, very easy to understand mate. If you have any questions, just ask or talk to me directly. :)

The whole list is re-rendering each time which is causing the weird look. You can fix it by adding a trackby function to your ngFor loop so that Angular knows how to keep track of individual items and render the loop properly.

In your template:

<ul *ngFor="let post of posts$ | async; trackBy: trackByFn"> ... </ul>

and in your component:

trackByFn(index, post) { return post.id; }

This tells Angular to use your post ID as a unique identifier for each item. You can verify this behaviour by opening your Chrome devtools and enabling Rendering > Paint flashing which will allow you to see what parts of the page are being redrawn as you make changes.

https://angular.io/api/common/NgForOf

Path in your routing needs to have the parameter name in there.

export const routes: Routes = [ { path: 'tabs', component: TabsPage, children: [ { path: 'posts/:id', children: [ { path: '', loadChildren: '../posts/posts.module#PostsModule' } ] }, { path: 'users/:id', children: [ { path: '', loadChildren: '../users/users.module#UsersModule' } ] } ] } ]

This'll let you get a param by using the ID "id".

See: https://angular.io/guide/router#heroes-list-optionally-selecting-a-hero

Hey, thanks for you message! Thanks for finding the bug for IG, I just changed the app name because of ASO. Yes, I did the teaser by myself, I‘m a graphic/motion designer and just started with app dev. If you want to check out my IG, it’s @la.benzzz Yes, I‘m using the “map loads for web” plan, because of ionic. If you’re building an app with the android or iOS sdk, I think you have a different billing plan like you said. https://www.mapbox.com/pricing/
Does this answer you question? Which kind of app are you planning? Are you not sure if the ionic route is the right think for your app?

Do you have the the detectRetina option enabled on the TileLayer? Google was probably doing that behind the scenes. Make sure that you are calling a tile server that supports the @2x.png retina tiles.

Not sure what I should try to log.

We have RayGun for logging/reporting on the client-side of the apps. They are showing nothing interesting from those devices. They seem to fail silently.

One of the clients has sent us one of the affected devices. Although, we're still not entirely sure what we're going to do with it once we get it...

The app is as native as v1 gets :). It's not a PWA but wrapped inside a native container, rendering the app in an Android System WebView. The app is distributed via the Play Store.

Haven't tried the Ionic forums. Good idea.

TestFlight is the way to go here. Haven't tried this yet, but planning on it soon - you can now send out public links to anyone. See here, Using Public Links to Invite Testers.

I managed to get Auth0 working using auth0-spa-js.

The way I configured it, it opens in the mobile browser and than redirects back to the app.

This was the primary guide I used.

https://auth0.com/docs/quickstart/spa/angular

Along with some other random sites to fix some specific issues I ran into.

Crossposted on Dev: https://dev.to/daviddalbusco/create-a-web-component-to-display-a-random-photo-from-unsplash-1enm

Crossposted on Dev if you rather like: https://dev.to/daviddalbusco/an-ionic-page-with-a-back-or-a-menu-button-and-my-swiss-recipe-to-cook-rosti-d4o

Crossposted on https://dev.to/daviddalbusco/create-a-web-component-to-lazy-load-images-using-intersection-observer-45gf if you rather like that platform

Crossposted on Dev if you rather like: https://dev.to/daviddalbusco/hide-environment-variables-in-your-stenciljs-project-56ge

I made a mistake writing a reply, I have your styles and for me, it doesn't work. Here is a simplified example: https://stackblitz.com/github/dzziwny/ionic-card-over-header. is this what you meant?

If you don't need mobile capabilities, don't want an "app", and want a PWA then you don't have to worry about a Mac. Totally different objective.

Paint feature - I'm not sure, it could be perfectly fine if you optimize. Here's an example: https://stackblitz.com/edit/drawing-on-canvas-angular.

what does your package.json look like? I just ran npm install -g ionic@latest && ionic start to create a new project and when I run that command both main.js and vendor.js are minified. This is the package.json

{ "name": "scratch-ionic", "version": "0.0.1", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/common": "4.1.3", "@angular/compiler": "4.1.3", "@angular/compiler-cli": "4.1.3", "@angular/core": "4.1.3", "@angular/forms": "4.1.3", "@angular/http": "4.1.3", "@angular/platform-browser": "4.1.3", "@angular/platform-browser-dynamic": "4.1.3", "@ionic-native/core": "3.12.1", "@ionic-native/splash-screen": "3.12.1", "@ionic-native/status-bar": "3.12.1", "@ionic/storage": "2.0.1", "ionic-angular": "3.6.0", "ionicons": "3.0.0", "rxjs": "5.4.0", "sw-toolbox": "3.6.0", "zone.js": "0.8.12", "@ionic-native/camera": "3.12.1", "@ionic-native/google-maps": "3.12.1", "@ngx-translate/core": "6.0.1", "@ngx-translate/http-loader": "0.0.3" }, "devDependencies": { "@ionic/app-scripts": "2.1.3", "@ionic/cli-plugin-cordova": "1.6.2", "@ionic/cli-plugin-ionic-angular": "1.4.1", "ionic": "3.7.0", "typescript": "2.3.4" }, "description": "An Ionic project" }

No, but we document that in our desktop support page. http://ionicframework.com/docs/developer-resources/desktop-support/

In future releases of cordova plugins, they will be migrating the API to match the current standards, so having cordova will not be a hard requirement.

I think that the html and css is not of great use. You'll have to replace pretty much everything with ionic components. That means that also css probably is not of any value anymore. So all his effort is basically lost.

So I'd say the designer either only hands over screen designs where he keeps an eye on the ionic components that are build in.

Or, and that's what we ended up doing, we created a components showroom app for our web designer. We could convince him that he throws in all the components that should go in the real app in the showroom app and style it there with scss just like how he's used to working anyway. Only thing he had to do is using the ionic components (http://ionicframework.com/docs/v2/components/) which actually makes his work faster anyway than beginning to build and style from scratch. We created some pages in the showroom app to split up the components (like navigation, buttons, form elements,...).

He ended up having fun actually and the workflow was as perfect as it gets!

SQL lite indeed makes the most sense and as of Ionic 2 it is also built in for storing data: http://ionicframework.com/docs/v2/api/platform/storage/SqlStorage/.

I've also used it for my enterprise grade app with Ionic 2 for enabling offline usage and I do use it heavily.

Overall it works great and is reliable. Though I think I'm periodically pooling some random data so the internal connection handlers won't get timed out but this is the only issue I can recall for SQLite. And maybe is already fixed. Also for Android you don't even have to install the SQLite plugin since it is built in already. If I remember correctly then iOS requires plugin install and Windows requires SQLite ext plugin which requires some manual modification before you can use it: https://github.com/driftyco/ionic/issues/5874. And if you use Ionic interfaces then it also works great in desktop too since then it falls back to WebSQL, but there is about ~50MB data restriction due to browser limitations.

I think that the error is caused by Cordova CLI: Not installed rather than error with npm.

Ionic installation documentation states that you need to install Apache Cordova to run Ionic and your setup seem's to be missing Cordova installation, so maybe npm install -g cordova could solve this.

Without using CSS...you might be able to use a modal. This allows a box to appear on the screen giving the user a choice of selections to choose from. Try looking at the documentation here: $ionicModal

$ionicModal

I'm having this exact same problem. I followed these steps exactly and my error was the same as /u/OogieFrenchieBoogie. ANDROID_HOME not set. I'm on windows using git. I never had to install any android SDK so that could be a problem? In that link there were never any steps to do that though. Also, why did you say
> Did you add the android platform first?

Are you not suppose to do that first? And can you do iOS apps on windows with ionic?

Check this page for info: https://cordova.apache.org/howto/2020/03/18/wkwebviewonly.html

Paste your plugin list cordova plugin list

This warning happens when one of your plugins use uiwebview. You need to contact the plugin author or install a fork.

Also, try to remove platform and add again.

For File URI : Use Native HTTP's upload file function to transfer files. I won't recommend File Transfer since it's deprecated for over 2 years.

For Base64: Use POST request. Make sure to convert the file properly on backend. The DATA _URL has data:image/png;base64, before the actual Base64 string. You will need to strip it either in app or back-end script.

If you're using the Cordova InAppBrowser, see here. Add an event listener for the "exit" event: "exit event fires when the InAppBrowser window is closed."

Good list.

The only thing I would say different is that Cordova has a way to save plugins and platforms all by itself, just not a lot of people know about it: https://cordova.apache.org/docs/en/dev/platform_plugin_versioning_ref/

You can definitely do this with FCM.

They document what happens here. Add some additional data to your push notification that you can read when it is opened. Then do something with that.

messaging.onMessage(function(payload) {
  console.log("Message received. ", payload);
  // ...
});

https://firebase.google.com/docs/cloud-messaging/js/receive

In my app it looks a bit like this.

this.firebase.onNotificationOpen().subscribe((data) => { console.log('notification opened' + data.body); if (data.deeplink && this.auth.user) { this.platform.ready().then( () => { this.goToLink(data.deeplink); }); } if (data.tap === false && data.body) { // Show message in app this.toastCtrl.create({ message: data.body, duration: 4000, position: 'top' }).present(); } }, (err) => { console.log('Error opening notification: ' + JSON.stringify(err)); });

Geometry: Diophant

• Android: https://play.google.com/store/apps/details?id=com.ionicframework.testmenu180545

• Learn geometry by interacting with coordinate system

• Users: 1-5, too early to advertise it :).

• Ionic: V2

• Just try it: more cool interactive problems are coming ;)

Here's a minimalist note-taking app that I just released for Android, will also be releasing for Windows 10 and iOS: Sublist. I'm doing all my syncing through firebase which is a super easy solution for cross-platform data storage/transfer - can't recommend firebase enough, seems they actually give a fig about developer experience.

Quiz for League of Legends

• iOS: https://itunes.apple.com/us/app/quiz-for-league-legends-ultimate/id1107274781
• Android: https://play.google.com/store/apps/details?id=com.puppybox.quizlol
• Quiz game for League of Legends players which can be used as a real break during matches. It brings online cross-platform leaderboard to compete at the country & platform level.
• Around 20k active users
• Ionic v2 rc.0