cordova

Is Angular better than React?

Angular and React are both great front-end frameworks used for building dynamic web applications. While both have their own set of benefits, Angular has a slight edge over React in certain areas.

Here are a few reasons why Angular is a little better than React:

Comprehensive framework: Angular is a full-featured framework that provides many features out of the box, such as built-in routing, form validation, and dependency injection. React, on the other hand, is a lightweight library that only provides the essential tools needed to build a web application.

Two-way data binding: Angular’s two-way data binding allows for efficient data synchronization between the model and the view, making it easier to manage complex applications. React, on the other hand, uses a one-way data flow, which can sometimes lead to more complex code and a steeper learning curve.

Strongly-typed language: Angular uses TypeScript, a strongly-typed language that allows for better code organization, catch errors early on, and provide better tooling support. React, on the other hand, uses JavaScript, which is a dynamically-typed language that can sometimes lead to errors that are difficult to catch.

Consistent coding standards: Angular has a set of coding standards and best practices that help ensure that code is consistent and maintainable, making it easier for developers to work on large codebases. React, on the other hand, is more flexible, which can sometimes lead to inconsistencies in code style and structure.

While React is still a great option for building web applications, Angular’s comprehensive framework, two-way data binding, strongly-typed language, and consistent coding standards give it a slight edge over React in terms of ease of use, maintainability, and scalability.

Ionic 7 framework is here!

Ionic 7 is the latest and greatest version of the popular mobile app development framework. It’s so good, it’ll make you want to put on your favorite coding socks and dance around your computer like nobody’s watching.

But in all seriousness, Ionic 7 offers some fantastic benefits over its older versions. Its improved performance will have your app running like a well-oiled machine, or at least like a machine that’s had a few cups of coffee in the morning. And with the updated design system, your app will look so good it’ll make your users wonder why they ever bothered with other apps in the first place.

And let’s not forget Capacitor 3, the native runtime that allows developers to build cross-platform mobile apps using web technologies. It’s like having a magical wand that can turn your web app into a mobile app with just a few flicks of your wrist.

But upgrading to Ionic 7 isn’t just a walk in the park, it’s more like a marathon. You’ll need to update your dependencies, configuration files, and code. It’s enough to make a developer break out in a cold sweat, or at least reach for the coffee (or energy drink) to power through.

But fear not, intrepid developer! Once you’ve upgraded and tested your app, you can sit back and relax knowing that you’ve done your part to keep up with the latest and greatest in mobile app development. And who knows, maybe your app will become the next big thing and you’ll be able to retire to a tropical island with nothing but your laptop and a good book (or maybe just a good IDE).

So what are you waiting for? Upgrade to Ionic 7 and start building mobile apps that will make your users say “Wow, this app is so great I want to give the developers a hug… or at least a virtual high-five.”

Benefits of Upgrading to Ionic 7

Upgrading your Ionic app to version 7 offers several benefits:

  • Improved Performance: Ionic 7 comes with a faster rendering engine and improved performance optimizations that can significantly improve the speed of your app.
  • Updated Design System: The new version of Ionic features an updated design system that provides a more modern and polished look for your app. It also comes with new UI components that can enhance the user experience of your app.
  • Support for Modern Web Platform Features: Ionic 7 is built on top of the latest web technologies, which means that it comes with support for modern web platform features such as CSS grid, CSS variables, and more.
  • Bug Fixes and Security Improvements: Upgrading to Ionic 7 ensures that your app benefits from the latest bug fixes and security improvements.

To upgrade your Ionic app to version 7, follow these simple steps:

  1. Check Compatibility: Before upgrading, check the Ionic documentation to ensure that your existing app is compatible with version 7.
  2. Update Dependencies: Use the npm-check-updates tool to update your project’s dependencies to the latest version of Ionic.
  3. Update Configuration Files: Update your project’s configuration files, such as package.json and angular.json, to reflect the changes in version 7.
  4. Update Code: Update your app’s code to use the new APIs and components introduced in Ionic 7.
  5. Test Your App: After updating your code, test your app thoroughly to ensure that it works as expected.
  6. Deploy Your App: Once you have updated and tested your app, deploy it to your production environment.

By upgrading your Ionic app to version 7, you can take advantage of these benefits and build high-quality mobile apps using web technologies.

  • Ionic Academy – A comprehensive collection of Ionic tutorials ranging from beginner to advanced levels.
  • Official Ionic Docs – The official documentation for Ionic 6, covering everything from installation to advanced topics.
  • Simon Grimm’s Tutorials – A series of Ionic 6 tutorials by Simon Grimm, covering a range of topics from beginner to advanced.
  • Josh Morony’s Tutorials – A collection of Ionic 6 tutorials by Josh Morony, with a focus on practical examples and real-world use cases.
  • Angular Firebase’s Tutorials – A set of tutorials on building Ionic 6 apps with Firebase integration by Angular Firebase.
  • Javabrains’ Tutorials – A series of video tutorials covering the basics of Ionic 6 by Javabrains.

How to Open PDF/File in Ionic on Android

How to Open PDF/File in Ionic on Android?

If you recently tried to open a file in Ionic from the application dir using `fileOpener2` plugin you may have encountered an error `File Not Found` which could indicate permission error.

It turns out you can’t open a file from `applicationDirectory` directly, you have to copy it into another directory:

if (this.platform.is('android')) {
  const self = this;
  const targetFile = self.file.dataDirectory + '/' + yourFileName;
		
  self.file.copyFile(self.file.applicationDirectory + 'www/assets/', yourFileName, 
                     self.file.dataDirectory, yourFileName).
           then(function (res) {
	     self.fileOpener.open(targetFile, 'application/pdf');
	});
}

Install the Cordova Plugin here:

https://github.com/pwlin/cordova-plugin-file-opener2
https://ionicframework.com/docs/native/file-opener

Google Android Play Store Target API Requirement Change

From Google:

Hello Google Play Developer,

This is a reminder that starting November 1, 2019, updates to apps and games on Google Play will be required to target Android 9 (API level 28) or higher. After this date, the Play Console will prevent you from submitting new APKs with a targetSdkVersion less than 28.

Configuring your app to target a recent API level ensures that users benefit from significant security and performance improvements, while still allowing your app to run on older Android versions (down to the minSdkVersion).

Android 9 (API level 28) introduces a number of changes to the Android system. The following behavior changes apply exclusively to apps that are targeting API level 28 or higher. Apps that set targetSdkVersion to API level 28 or higher must modify their apps to support these behaviors properly, where applicable to the app.

To target the api in your Cordova app set these min and target version in config.xml

    <preference name="android-minSdkVersion" value="23" />
    <preference name="android-targetSdkVersion" value="28" />

iOS Deprecated API Usage Warning Ionic using UIWebView

Apple will no longer support web apps that use UIWebView. The apps and libraries need to be migrated to use WkWebView.

The latest Ionic already uses WkWebView, but several Cordova plugins still rely on UIWebView which is a problem.

https://ionicframework.com/docs/v3/wkwebview/

If you’re using Ionic you need to upgrade to iOS Cordova 5

cordova platform remove ios
cordova platform add ios@5.0.0

Also you might need to remove additional plugins that use UIWebView such as inappbrowser. 

cordova plugin rm cordova-plugin-inappbrowser

More information about the breaking changes can be found here:

https://cordova.apache.org/news/2018/08/01/future-cordova-ios-webview.html

How To Build Production and Release Version of Ionic App

To make the production and release version of Android app using Ionic run:

ionic cordova build ios --prod --release

This should run the same as the expanded version:

ionic cordova build ios --minifycss --optimizejs --minifyjs --release

You may need to run with sudo in front of the command if you have permission issues.

For iOS builds the –release flag does not seem to do anything in my testing. I could not find any official documentation explaining what this flag does to iOS builds.

For more detail visit the ionic documentation on building
https://ionicframework.com/docs/cli/commands/cordova-build

Ionic HTTP posts don’t work on iOS

I ran into this strange problem today where HTTP requests stopped working on iOS alone. Even though I have the latest Ionic CLI, my project was running Ionic 1 still.

To solve this http error I removed this plugin:

ionic cordova plugin remove cordova-plugin-ionic-webview

And added this to config.xml:

<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />

Probably a bit unsafe to allow everything but had to get it working again.
If this doesn’t work for you try to also remove the iOS platform and re-add it.

good luck~

How to Hide Specific Ionic Tabs in Angular

How to Hide Specific Ionic Tabs in Angular? It turns out ionic does not support this functionality by default although I think it should, but luckily it’s not that complicated.

Here are the 3 simple steps:

1. In your tabs.html add this ng-class

<ion-tabs ng-class="{'tabs-item-hide': hideTabs}">

</ion-tabs>

2. Add ‘hide-tabs’ in your views where you want to hide the tabs

<ion-view hide-tabs> 

</ion-view>

3. In your app.js add the directive to hide tabs

.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            $rootScope.hideTabs = true;
            $scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
})

The hide-tabs directive will hide the tab on whichever ion-view you set it to.

How to Format Post Dates to show Time since Post

Ever wonder how to format your post times to show up like Twitter or Facebook time since post in minutes, hours, etc? Here is an example of a facebook post 5 hrs ago:

hours ago

I recently had to do this for one of my Ionic mobile apps. Here is the function in JavaScript:

function formatTimeSincePost(time) { // SHOW TIME SINCE POST

    var now = new Date();
    var postTime = new Date(Date.parse(time));
    postTime = now.getTime() – postTime.getTime();

    var timeAgo = Math.ceil(postTime/1000/60);
    var displayTime = "" ;

    if ( timeAgo > 1440 ){ // SHOW DAYS
        displayTime = "" + Math.ceil(timeAgo/60/24) + " days" ;
    }
    else if (timeAgo > 59){ // SHOW HOURS
        displayTime = "" + Math.ceil(timeAgo/60) + " hrs" ;
    }
    else { // SHOW MINUTES
        displayTime = timeAgo + " min" ;
    } 

  return displayTime;
}

You can also add months and years easily if you wish. There you go, happy coding.