How to make Http request and handle errors in Ionic Framework

In most of the cases in our mobile application we’ve to fetch data from a server. If you are using Ionic Framework, it’s not a big deal. Http plugin made it easy for us. Let’s see how to make http request in Ionic Framework using Http plugin to get data from server.

Install the plugin: Run the following command in command line in your project:

Shell

$ ionic cordova plugin add cordova-plugin-advanced-http $ npm install --save @ionic-native/http

1
2

$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install --save @ionic-native/http

Add this module in providers array of your app.module.ts file:

JavaScript

providers: [ ... HTTP ... ]

1
2
3
4
5

providers: [
    ...
    HTTP
    ...
  ]

Import the Http plugin:

Suppose we are going to use this plugin in HomePage.ts file. First we have to import the plugin and add it in constructor as argument:

import { HTTP } from '@ionic-native/http';

constructor(private http: HTTP) { }

import { HTTP } from '@ionic-native/http';

constructor(private http: HTTP) { }

GET request:

It is comparatively easy to make a GET request. So let’s do it first. Just write the following code in the method of your home page:

    this.http.get('http://www.example.com/api/weather').map(res => res.json()).subscribe(server_response => {
      this.data = server_response;
    });

this.http.get('http://www.example.com/api/weather').map(res => res.json()).subscribe(server_response => {

this.data = server_response;

});

Here you have to change the example url to your server’s url. After receiving the data from server, you can get it in server_data variable.

POST Request:

var headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json' );
    let options = new RequestOptions({ headers: headers });

    let postParams = this.myData;

    this.http.post(url, postParams, options).map(res => res.json()).subscribe(data => {
      this.result = data;
    });
  }

var headers = new Headers();

headers.append("Accept", 'application/json');

headers.append('Content-Type', 'application/json' );

let options = new RequestOptions({ headers: headers });

let postParams = this.myData;

this.http.post(url, postParams, options).map(res => res.json()).subscribe(data => {

this.result = data;

});

}

Everything is same as GET request. Here you have to add header values and post parameters before performing the request. In most of the cases, header values are same as above. Just change postParams as per your data.

Error Handling:

I was working on an ionic project for a while that sends request to server to fetch data. I faced a problem while working on it. If there is no internet connection my busy dialog keeps loading and no error message occurs. Because, the Http GET or POST methods didn’t have any handler to control the errors. After searching for a while I didn’t find any solution on internet. Finally I found it myself. Let me share it with you.

    this.http.get(url).map(res => res.json()).subscribe(data => {
      // posts = data.data.children;
      this.data = data;
      this.loader.dismiss();
    }, error => {
      console.log(error);
      this.loader.dismiss();
      this.toast.presentToast("Check internet connection");
    });

this.http.get(url).map(res => res.json()).subscribe(data => {

// posts = data.data.children;

this.data = data;

this.loader.dismiss();

}, error => {

console.log(error);

this.loader.dismiss();

this.toast.presentToast("Check internet connection");

});

Here I’ve added error handler in subscribe section. Whenever a problem occurs, you can get the error message inside error section.

How Ionic Framework works

Ionic Framework is a mobile app development framework. The apps developed using this framework runs on android, ios and windows. Now you may ask how it works.

The answer is very simple. It’s just an application with a web view or browser. Everything that you write in html and css are displayed in this browser from the very begining. So the user doesn’t notice the browser.

That’s the answer with a little bit more.

Now you may ask, what if I want to use native function in my app?

That’s also possible. Javascript will call the native function or method for you.

So, in short the system works as follows:

WEBBROWSER <<>> JAVASCRIPT <<>> ANDROID

WEBBROWSER <<>> JAVASCRIPT <<>> IOS

Important commands of Ionic Framework

If you have decided to learn and work with Ionic Framework, then it’s good to have important commands of it.

So we have listed those handy commands here.

Installing ionic:

npm install -g ionic@latest

1	npm install -g ionic@latest

Start a new project:

ionic start my_project_name template_name

1	ionic start my_project_name template_name

You can use any template name listed below as template_name :

tabs ............... ionic-angular A starting project with a simple tabbed interface
blank .............. ionic-angular A blank starter project
sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area
super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic development.
conference ......... ionic-angular A project that demonstrates a realworld application
tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation
aws ................ ionic-angular AWS Mobile Hub Starter
tabs ............... ionic1 A starting project for Ionic using a simple tabbed interface
blank .............. ionic1 A blank starter project for Ionic
sidemenu ........... ionic1 A starting project for Ionic using a side menu with navigation in the content area
maps ............... ionic1 An Ionic starter project using Google Maps and a side menu

tabs ............... ionic-angular A starting project with a simple tabbed interface

blank .............. ionic-angular A blank starter project

sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area

super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic development.

conference ......... ionic-angular A project that demonstrates a realworld application

tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation

aws ................ ionic-angular AWS Mobile Hub Starter

tabs ............... ionic1 A starting project for Ionic using a simple tabbed interface

blank .............. ionic1 A blank starter project for Ionic

sidemenu ........... ionic1 A starting project for Ionic using a side menu with navigation in the content area

maps ............... ionic1 An Ionic starter project using Google Maps and a side menu

Add android platform:

ionic cordova platform add android

1	ionic cordova platform add android

Add iOS platform:

ionic cordova platform add ios

1	ionic cordova platform add ios

Create a new page:

ionic generate page page-name

1	ionic generate page page-name

Note: Remember to add page-name in declarations and entryComponents arrays in app.module.ts file

Create a new provider:

ionic g provider provider-name

1	ionic g provider provider-name

Run in browser:

ionic serve

1	ionic serve

Run on android device:

ionic cordova run android

1	ionic cordova run android

Run on iOS device:

ionic cordova run iOS

1	ionic cordova run iOS

Add a cordova plugin:

$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

1 2	$ ionic cordova plugin add cordova-plugin-camera $ npm install --save @ionic-native/camera

Note: Here we’ve used cordova-plugin-camera as example plugin. You can use any other plugin name. Remember to add plugin-name in providers array in app.module.ts file

Remove a cordova plugin:

ionic cordova plugin rm cordova-plugin-camera

1	ionic cordova plugin rm cordova-plugin-camera

Advantages and disadvantages of Ionic Framework

I’m a fan of native app development. I’ve been developing both Android and iOS app for more than 5 years and still continuing.

However, I always search for new technologies. If I get anything better, I try to adopt that.

From my this habit, I’ve found angularJS. It’s a very powerful javascript framework that is used in frontend development.

After finding this framework, a question came out of my head. Can we use it in our mobile app development. While searching for the answer of it I found this ionic framework.

Ionic framework is a multi-platform app development framework powered by cordova. After playing with it for a while the following advantages and disadvantages are found:

Pros or advantages of Ionic Framework:

1. Easy to learn: If you have familiarity with html, css and javascript you can learn it very fast

2. Easy documentation: Ionic has very good and well documentation. Most of the things are covered in their official site. So you don’t have to move around different sites to learn.

3. Rapid development: By running some command line commands, you can create pages (e.g. ionic g page your_page_name), providers etc. When you run a command it generates all files with template codes. So you don’t have to write everything from scratch.

4. Ionic apps run on different platforms. e.g. Android, iOS, windows etc. As a result you don’t have to write codes for each platform. It reduces development time a lot.

Cons or disadvantages of Ionic Framework:

1. Performance: Native mobile application’s performance is better than ionic app. However, in most of the cases, performance gap is not noticeable.

2. Security: If you are developing financial app e.g. app for bank, ionic framework is not recommended. It may not provide as much security as native application.

3. Limited native functionality: There may be some native functions that may be not available in ionic framework. In that case you have to develop the plugin yourself. However, there are many plugins available to cover native functionalities.

Freelance : Chose your area and prepare yourself

There are many type of freelance works. From accounting to copyrighting. Data entry to server based api development. Php to java. So first decide in which field you want to dive in. Check which skills do you have. Which skills you are lacking.

You may decide in which field you will work based on two things :

1. Your previous experience and study

2. Statistics on current market

If you’ve studied accounting then you may search for freelance jobs related to accounting. LLB degree holders can look for jobs related to legal support. Additionally, Those who are studying or just finished software engineering can search for programming job. Furthermore, if you have some computer literacy and good English communication skills, you can get data entry related jobs. Other areas may include translation, admin and logistic support, copy writing etc. In addition you can think about photography, customer support, training etc.

Prepare yourself

If you think that your skill is not enough to do freelancing, don’t worry. Sit back and relax.

There are many online courses that help you to improve your skills. Some courses are free and for others you have to pay.

Three online learning sites are: coursera.com, edx, lynda.com.

My career started to dramatically improve after learning from lynda.com. And now I’m learning from coursera.com. One good thing about coursera is that you can access most of the courses for free. Just enroll for a course. when they ask for payment or purchase, select “Audit Only” option.

They will charge you only when you need certificates from them.

Photo Credit: Flickr

Getting Freelance job

In this post we’ll discuss about getting freelance job.

After chosing your desired field or area, your first task is to create your profile. Here you showcase your previous works. Previous works may include the works that you have done for your client or sample project.

Prepare your profile in a Word document or any other word processing software.

For each project add one attractive title, short description and a beautiful image. One thing you must remember when you prepare your profile or write a project proposal make sure that your text do not contain any grammatical or spelling error.
Maybe there is no relation between your work and your spelling errors. However employers are always aware about them. So be very careful about you spelling mistakes.

It’s time to open accounts in different freelance sites. For example upwork.com, freelancer.com and Guru.com.

Three secrets of getting freelance job

Now I’ll tell you 3 secrets of getting freelance job from my experience.

1. Bid on small or low budget project – for first few projects. First 3 projects should be for advertisement only. Don’t expect money. But, don’t do it for free.

2. Bid on projects as early as possible

3. If any client or employer contacts you, reply instantly.

Let me tell you one thing before I finish. It may take many days or even months to get your first job. But don’t give up. Keep trying. Once you get your first project and complete it with good feedback from client, you don’t have to look back. 🙂

Happy freelancing.

Freelance : How will you start

When I started freelance job back in 2006, number of Freelancers were very few. So it was easy to find freelance jobs. However now it has become very hard. Because there are many freelancers out there to compete.

But don’t worry. I have some secrets for you. There are some clients who want their job to be done at cheaper price. They know only new Freelancers will do this without asking any question. They are your potential customers. So target them.

I like to finish my works step by step. Let’s do the same here.

1. Decide what will you do

There are variety of works you can find in freelance sites. They range from accounting to online advertisement, data entry to server api development, administration support, legal advice etc. So first choose what will you do.

2. Prepare yourself with skills

After selecting your area of freelancing, think yourself whether you have enough skills to perform tasks related to your area of concern. If not then take online courses to improve your skills.

Read my other article Freelance : Chose your area and prepare yourself

3. Prepare your portfolio

If you are new to freelance, you will not have any previous working record, feedback or rating in your freelance account. In such situation only thing that you can show is your profile. So createll your profile wisely with sample works or prejects.

4. Write sample project proposal

Write some sample proposals or create some basic structures. But when you submit your project proposal, don’t use same template text. Write some more detail related to the project. For example overview of how will you finish the job, ask questions related to project.

5. Open accounts on different freelance sites.

There are many websites that offer freelance jobs. Open accounts on some of them. Currently, good platforms include guru.com, upwork.com, freelancer.com etc

6. Bid on small projects which requirement you understand and have confidence that you can finish.

You may follow this rule for first few projects only

7. Response to client carefully

If any client contacts you, response with attention, try to understand what he or she asked, answer precisely.

8. Be patient

It may take 1 week to 1 month to even 1 year to get first freelance job. So be patient. As soon as you receive one probject and finish it successfully, you do not have to look back.

9. Finish awarded project in time
Details

Once you receive a project, try to finish it with full effort. Finish it in time and maintain quality.

Give good feedback to client and request for feedback.

How to Load MKMapKitView & add Pin or Marker using swift

Loading map on your iOS application’s MKMapKitView is very easy. Just drug and drop. To add a pin or marker, write some simple codes in swift. Let’s begin:

Create a new “Single View” project in Xcode. Select swift as language.

Open Main.stroyboard from Project explorer. You will see the ViewController.
Focus on Object library. It is at bottom right corner of Utility panel. Find out Map Kit View. If you can’t find out it, take help of filter box. Filter box is located at the bottom of the Object library. Check the screenshot.
Drag and drop the Map Kit View in View Controller. Resize Map Kit View so that it fills the full ViewController. Add appropriate auto layouts.
Now we have to import MapKitView framework in our project. So, select project (1) > Target app (2). Open Build Phases tab (3).
Expand Link Binary with Libraries (5). Click + button (5)
Search for MapKit.framework. Once you find the framework, select it. Then click Add button.
Now run the app.

You application will be loaded. You will see a nice map on your simulator.

How to add Marker or Pin on MKMapKitView

We’ll add a marker or pin on MKMapKitView. Suppose we want to show the pin on Lanai island of Hawaii. Latitude and longitude of the location are 20.836864 and -156.874269. It will require only 3 steps.

Make an IBOutlet of MKMapKitView in ViewController.swift file. I used mapView as outlet name.

Import MapKit in ViewController:

import UIKit
import MapKit

class ViewController: UIViewController {
...
...
}

import UIKit

import MapKit

class ViewController: UIViewController {

...

}

2. Now write a method to load the pin / Marker:

func addPin() {
    let annotation = MKPointAnnotation()
    let centerCoordinate = CLLocationCoordinate2D(latitude: 20.836864, longitude:-156.874269)
    annotation.coordinate = centerCoordinate
    annotation.title = "Lanai, Hawaii"
    mapView.addAnnotation(annotation)
}

func addPin() {

let annotation = MKPointAnnotation()

let centerCoordinate = CLLocationCoordinate2D(latitude: 20.836864, longitude:-156.874269)

annotation.coordinate = centerCoordinate

annotation.title = "Lanai, Hawaii"

mapView.addAnnotation(annotation)

}

3. Initially, the map focuses user’s current location. However, we’ve to move the focus to the point where our pin is located. To do that, add another method:

func focusMapView() {
    let mapCenter = CLLocationCoordinate2DMake(20.836864, -156.874269)
    let span = MKCoordinateSpanMake(0.1, 0.1)
    let region = MKCoordinateRegionMake(mapCenter, span)
    mapView.region = region
}

func focusMapView() {

let mapCenter = CLLocationCoordinate2DMake(20.836864, -156.874269)

let span = MKCoordinateSpanMake(0.1, 0.1)

let region = MKCoordinateRegionMake(mapCenter, span)

mapView.region = region

}

Finally call above 2 methods in ViewDidLoad.

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    addPin()
    focusMapView()
}

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view, typically from a nib.

addPin()

focusMapView()

}

Run the app.

You will see the pin in on lanai Island of Hawaii. You may be wondering, where do I get latitude longitude. Take help of google map to find latitude and longitude of any location on earth.

Happy Coding!!!

Freelance : How did I start

From 2006 to 2014, I worked as freelancer. I think, 8 years is enough time to gather experience to advise others about freelance. Moreover, many people around me are very eager to know how to start freelancing. Where to go, how to start, how to get jobs etc.

I’m here to tell you everything about my experience. If one person is able to get a freelance job and success by reading my blog, I’d be very happy. I don’t do freelanceverything job now. So I’ve nothing to hide.

If you don’t want to read my own history, jump to next article – Freelance : How will you start.

Start of my freelance career

In 2006, I got admission to pursue my Undergraduate degree. One of the senior students of my university told me about guru.com; He said I can get freelance works from there. For the first time, I heard about it. I visited the site and signed up. At that moment, I didn’t know what is freelancing, what to do and how to get paid. In fact, I was doubtful and curious. Started to look for job and bid on the jobs that I could accomplish. Fortunately, within few days, one client knocked me and awarded a simple project. I first project was to find out articles online about time management. I was very excited and completed the job with care. She was very happy with my job and paid me full amount. She gave a very good positive review with 5 start rating.

Then she offered me another task which required php skills. However, I didn’t have any experience to do the job.

After getting the payment, I bought paid membership from guru.com; I was still doubtful about getting the payment in my country. I opened a bank account and added my account information to guru.com. Then requested for wire transfer.

After about one month, money was not deposited to my account. I contacted guru.com. They suggested me to contact my bank. I went to Bank and told my issue to a Bank Manager. After investigating for a while he told me that, the money arrived. However, he needs document to prove that this money didn’t come illegally.

Again I contacted guru.com. Someone from guru.com responded me stating the reason of the payment. I printed out the body of the email and went to Bank right away. After a few days, I received money to my account.

That’s how my freelance journey bagan.

What about your story?

How to load HTML code or file in UIWebView using swift?

Let me tell you my one secret about iOS designing. Sometime, in our design, we have to use table views / grids for example bank statement. If you are familiar with iOS designing and auto layout, you already know how difficult it is to design complex tables or grids. In such situations, I use UIWebView. In background I prepare an html source code, then display the code in web view. Today I’ll tell you how to load source codes in web view using swift. After that, I’ll show how to load local html file in web view.

1. Create an iOS application in Xcode.

2. Add a web view in the View controller of the storyboard

3. Drag and drop web view’s IBOutlet to our ViewController.swift

4. Write a method to load string in UIWebView

func loadHtmlCode() {
    let htmlCode = "<html><head><title>Wonderful web</title></head> <body><p>wonderful web. loading html code in <strong>UIWebView</strong></></body>"
    webView.loadHTMLString(htmlCode, baseURL: nil)
}

func loadHtmlCode() {

let htmlCode = "<html><head><title>Wonderful web</title></head> <body><p>wonderful web. loading html code in <strong>UIWebView</strong></></body>"

webView.loadHTMLString(htmlCode, baseURL: nil)

}

In the above code, we created a constant (variable) htmlCode and wrote some html codes there. In the second line we loaded the htmlCode in our web view.

5. Call the method in ViewDidLoad:

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    loadHtmlCode()
}

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view, typically from a nib.

loadHtmlCode()

}

Run the code and see what have you done.

Load local HTML file in UIWebView

Writing source codes in ViewController is painful and time wasting. Better approach is to create html file in Dreamweaver or Sublimetext or any other html editor. We’ll save that file in iOS project and load in web view. So, let’s begin our work.

Create an iOS application in Xcode.
Add a web view in the View controller of the storyboard
Drag and drop web view’s IBOutlet to our ViewController.swift
Create an html file using Sublime text or Dreamweaver or any other html editor. Save the file in a folder and open that folder.
Drag the file from folder to our Xcode’s Project Navigator. After you drag and drop, a dialog box will appear. In the dialog box check the “Copy items if needed” checkbox.

Write a method to load local html in UIWebView

func loadHtmlFile() {
    let url = NSBundle.mainBundle().URLForResource("contactus", withExtension:"html")
    let request = NSURLRequest(URL: url!)
    webView.loadRequest(request)
}

func loadHtmlFile() {

let url = NSBundle.mainBundle().URLForResource("contactus", withExtension:"html")

let request = NSURLRequest(URL: url!)

webView.loadRequest(request)

}

Call loadHtmlFile() method in viewDidLoad method:

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    // loadHtmlCode()
    loadHtmlFile()
}

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view, typically from a nib.

// loadHtmlCode()

loadHtmlFile()

}

You can download the whole project from github