Using the Capacitor v1.1 Browser API to open urls

In this tutorial, I want to show you how to integrate Capacitor Browser API into your Ionic project and how it will work in IOS app, Electron and in the Chrome browser.

Getting started

To follow this tutorial you should have the basic fundamentals of the command line, installed Node, Ionic, Capacitor, Live Server
All the following was done with the next requirements: Node v12.4, Ionic v4.4.0, Capacitor v1.1, Live Server v.1.2.0

New project

In this step, you need to follow everything described in this official Capacitor doc. We will use the capacitorBrowserExample as appName (also for Ionic project too) and com.roma.capacitorBrowserExample as appId. On the step of adding platforms, we will add IOS and Electron.

Setup

Let’s go to the project folder and open the src/app/tab1/tab1.page.ts file. We will include Capacitor Browser API to this component and create a simple method to open¬†the specified URL.

Modify src/app/tab1/tab1.page.ts to reflect the following:

Browser.open method (line 15) takes an object of BrowserOpenOptions interface. You can check more about in the official Capacitor doc.

Template

Our template will very simple. Just one input and button to call openURL method.

Modify src/app/tab1/tab1.page.html to reflect the following:

Results

Let’s build and run this project on specified platforms. We can do it using the running the next chain of commands in the terminal:

IOS

To check this project in Xcode we need to run the following:

Then we will run this project in the Xcode. You should see the next:

Project on IOS platform
Project on IOS platform

After clicking on the openURL button:

After clicking on the openURL button
After clicking on the openURL button

Electron

To open this app as the desktop application you need to run the following in the project folder:

First, you will see the default Capacitor loading message:

Capacitor Electron Loading message
Capacitor Electron Loading message

The desktop application:

After clicking on the openURL button:

After clicking button
After clicking button

PWA

To open the PWA build of this project you need to run the next in project folder:

After that, the window will open in your default browser (in my case – Chrome):

PWA build
PWA build

You can see the information about this app in the Application tab inside Chrome Developer tools

Conclusion

As you can see, it’s was not a big deal to integrate Capacitor Browser API into the Ionic application.
All code you can find here.

Network Detection with Capacitor v1.1 in Ionic project

There are a lot of situations when the internet connection is not stable in your app and for good user experience we need to show some messages like “Connection is not stable ” or “Connection restored”. In these cases, we need to handle network connection.
In this tutorial, I want to show you how to handle network connection in Ionic App using the Capacitor.

Getting started

To follow this tutorial you should have the basic fundamentals of the command line, installed Node, Ionic, Capacitor
All the following was done with the next requirements: Node v12.4, Ionic v4.4.0, Capacitor v1.1.

1. Setup a new Ionic project

Let’s create an Ionic example using the following command:

Then choose the¬†blank type of starter and when you will be asked for integrating Cordova into the app, you need to enter “No”, because we will use the Capacitor in this project.

You need to enter “No”

After installation of dependencies, you will be asked for using Ionic Pro SDK. You can read more about it and decide to include this SDK or not into your project.

Go to your newly created project:

2. Adding Capacitor to the Project

Just follow all steps described in the official Capacitor Documentation.

On the step of giving name for your project, you can type your appName and appId. Keep in mind that appId should look like this Рcom.example.app.
For this tutorial, I used capacitor-network-example as appName and com.roma.capacitorNetworkExample as appId.

After initialization, you will see the message about all is ready.

Capacitor is Ready

Now you can add platforms to your Ionic project. In this tutorial, I will show all on IOS platform. So, we need to use the next command in this project:

3. Adding Capacitor Network API to the Project

The integration of Capacitor Network API into the project is quite simple. We will make all our work in the default HomePage component. It should look like this:

4. Showing Network Status

Let’s add a new method to the HomePage component. You can call it simply –¬†getStatus¬†and this function will update the¬†status¬†variable with the data about the current state of the network. Also, for the¬†status variable, we should import the NetworkStatus¬†interface.

Then, you need to invoke the getStatus method inside the ionViewDidEnter lifecycle event to show actual network status when the view is entered.

Change the src/app/home/home.page.ts in this way:

Change the src/app/home/home.page.html in this way:

Now we need to make a new build of the project using the next command:

After this operation, we should copy all changes to the IOS native project. You need to run the next in terminal:

To open our IOS project in Xcode, we should use this way:

The XCode IDE will open and you should see the generated project:

XCode Project

You can run this project in the emulator or directly on your IOS-device. I attached the screenshot from the emulator:

Screenshot from emulator

As you can see, the status object contains two variables –¬†connected and connectionType. They are showing the boolean info about connection and the type of internet connection accordingly.

5. Subscribe to Network Changes

In this section, we will handle an internet connection. When something will going wrong with the connection, we can show a Toast message at the bottom of the page with the text about problems with the internet. It should look like this:

Your internet connection appears to be offline. Data integrity is not guaranteed.
Your internet connection appears to be offline. Data integrity is not guaranteed.

First of all, we need to integrate Network listener to our app and create two methods-wrappers to start and finish listening changes related to an internet connection. It should be startListenNetwork and stopListenNetwork methods.

We will start listening all changes to the connection at once ionViewDidEnter event will fire and similarly stop listening when ionViewWillLeave event will fire. We need to check the connected property of status object inside networkStatusChange listener .

If this value will be false, we will invoke the presentToast method with the next sentence: “Your internet connection appears to be offline. Data integrity is not guaranteed.”

The full code of HomePage will look like this:

P.s. don’t forget to run the following after all changes in the code:

Then you can open your project in the XCode:

Conclusion

We can simply handle a state of connection in Ionic project using Capacitor Network API. Don’t forget to make additional changes, if you create a build for Android.

The full code related to this tutorial you can find here.

How to create IOS build of Travelpayouts SDK without Fabric?

if you building a project using Travelpayouts SDK for IOS, you can encounter a problem with Fabric library, when you want to archive a project. It’s looking like this:

Travelpayouts SDK IOS Fabric issue
Travelpayouts SDK IOS Fabric issue

Fabric/Crashlytics – it’s using for track crashes of the app and to use it, you need to register an account on Fabric.io,¬†get¬†API Key¬†and¬†Build Secret¬†to successfully archive a project to .ipa.

To avoid this issue you need to add¬†API Key¬†and¬†Build Secret¬†to the configuration of your app. But, if you don’t want to¬†share any data of your app and just archive it and upload to App Store, you need the next solution. Just comment the lines on the picture or remove build phase for Fabric Script:

Quick Fix For Fabric
Quick Fix For Fabric

 

Hope, it will help you.

Polski Kodeks Pracy in TOP-10 Reference/Paid in Poland

2 days ago (30.09.2017) I found that my app Polski Kodeks Pracy¬†was in the TOP-10 apps in “Reference” in “Paid” category in Poland and on 178 place¬†of all Paid Apps in Poland.

Stats on 30.09.2017
Stats on 30.09.2017

 

Now the statistics vary in different directions:

Changes in statistics of Polski Kodeks Pracy
Changes in statistics of Polski Kodeks Pracy

 

In future I want to tell a bit more about statistics and sales because this is my first experience in this area.

[IOS] Great Arabic Quotes

For the sake of experiment, I want to try to build simple apps for IOS using the different tech stack. For this app, I chose Ionic 3.
After publishing this simple app, want to summarise + and – of Ionic for App development.

Advantages:
– the quick development process, if you have a JavaScript background
– many useful Ionic Native modules
– easy to create Android Build and publish it to Play market

Disadvantages:
– you can easily break a project, after updating dependencies
– to create IOS specific SplashScreen and Logo needs to register in Ionic Pro
Admob Free plugin did not work when I develop this app, so I had to chose Admob Pro, which is Paid

Try it, using the button below: