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

OR

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:

Start a new project:

You can use any template name listed below as template_name :

Add android platform:

Add iOS platform:

Create a new page:

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

Create a new provider:

Run in browser:

Run on android device:

Run on iOS device:

Add a cordova plugin:

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:

 

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.

Freelance

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.

  1. Open Main.stroyboard from Project explorer. You will see the ViewController.
    MKMapKitView
  2. 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.
    MKMapKitView
  3. 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.Add framework
  4. Now we have to import MapKitView framework in our project. So,  select project (1) > Target app (2). Open Build Phases tab (3).
  5. Expand Link Binary with Libraries (5). Click + button (5)Find MapKit framework
  6. Search for MapKit.framework. Once you find the framework, select it. Then click Add button.
  7. 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.

IBOutlet

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

Import MapKit in ViewController:

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

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:

Finally call above 2 methods in ViewDidLoad.

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

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

4. Write a method to load string in UIWebView

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:
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.
  1. Create an iOS application in Xcode.
  2. Add a web view in the View controller of the storyboard
    screen-shot-2016-09-13-at-10-45-27-am
  3. Drag and drop web view’s IBOutlet to our ViewController.swift
  4. Create an html file using Sublime text or Dreamweaver or any other html editor. Save the file in a folder and open that folder.screen-shot-2016-09-20-at-10-06-44-pm
  5. 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.
  6. Write a method to load local html in UIWebView
  7. Call loadHtmlFile() method in viewDidLoad method:

You can download the whole project from github

How to load HTML url in webview using swift

Well, it’s very easy to load HTML url in a web view using swift. Suppose we want to show https://www.google.com in a web view in our iOS application. We’ll do that in 4 easy steps. Let me tell you them step by step.

  1. First create an iOS application in Xcode.
    Add a WebView in the ViewController of the storyboard. Do not forget to add auto layout to WebView, otherwise you may can’t see the WebView.screen-shot-2016-09-13-at-10-45-27-am
  2. Drag and drop WebView’s IBOutlet to our ViewController.swift and name it: webView
  3. Now we’ll create a new method in ViewController.swift
  4. In ViewDidLoad method call loadUrl method:

Run the app. You will see google website is loaded.

If you use any non-secure url, Xcode will log an error in error console.

App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app’s Info.plist file.

The urls that start with http instead of https is called non-secured url. Due to security issue, iOS doesn’t load non https urls.
In such case we’ve to add some values in our Info.plist.  

Fix the issue of “App Transport Security has blocked a cleartext HTTP”

screen-shot-2016-09-15-at-2-08-54-pm

a. Open Info.plist file from left panel (File explorer).

b-webview

b. Click on plus button (+) of any top level row. I’ll click the plus button beside Bundle Identifier.

screen-shot-2016-09-15-at-2-12-21-pm

c. A new row will be created. Type “App Transport Security Settings”  (without double quotes) in the row (key column) box. Hit Enter. It’s type should be a dictionary.

d-webview

d.  Open the App Transport Security Settings row by clicking on Arrow head at the beginning of the row.

e-webview

e. Click Plus button next to the row of “App Transport Security Settings”

screen-shot-2016-09-15-at-2-13-51-pm

f. In new row type “Allow Arbitrary Loads” (without double quotes)

g. Make it’s value to Yes.

Run the app again with any non-https link e.g. http://webindream.com.

Full code is given below: