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

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

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!!!

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:

SWIFT cheat sheet

I’ve added some swift codes which can be helpful for beginners. You can bookmark this page, as it can be used for quick recall.

Declare variables in swift:

Concatenate strings  in swift

Declare arrays in swift

Find number of elements in array in swift

Tuples in swift

Declare Class in swift

Instantiate class in swift

Declare Struct (or structure) in swift

Inherit Class in swift

Declare  simple method / function without argument and return type:

Declare method / function with argument and return type

For loop

For loop in another form

For loop in array

While loop:

 

 

 

 

How to add UIImageView programmatically in swift

You can add UIImageView programmatically in your iOS application  at run time. You can get the image file from server. To avoid complexity, we will use local image file. First create a new project. Copy and paste any image from your local computer in the project. You can download image from here.

UPDATE: After downloading the image, copy it to your project folder. Best way to do this is open the Project navigator of Xcode (If it is not already opened). Then open the folder where your image is located. Drag and drop the image from Finder to you Project Navigator. When a dialog box appear,  Check “Copy items if needed” to project option.

Before I proceed, let me explain the difference between UIImage and UIImageView.

UIImage: It’s the image that we want to display.

UIImageView: It’s something like frame of the image or placeholder of the image where we’ll set our UIImage or image.

Now open your ViewController.swift file.

There are 2 things to add image to your application programmatically.

1. Add image to your “image view”.

2. Add “image view” in your view.

In viewDidLoad method write the following code to add image to your image view:

Now, let’s add the image view in our main view:

We can also set width and height of the image:

The whole code is:

 

How to add UITextField, UITextView and UILabel programmatically in swift 4.0

In iOS app development, sometime we need to add Textfields, textviews, labels etc programmatically. It gives you control over customizing styles, size and position of them. I’m going to place codes (swift Language) here so that you can get all of them from one place.
Following codes will work in any view controller
UITextField:
TextView:
Label:

 

How to add UIButton programmatically in SWIFT

In iOS app development sometime we’ve to create Buttons programmatically or dynamically. Today, I’ll show you how to do this using SWIFT programming language.

Let’s create a new Single View iOS application in Xcode. Name the project “DynamicButton”. Select swift as programming language.

Now go to ViewController.swift. In ViewDidLoad method we’ll write some codes that will add one button to the screen automatically at run time.

Let’s create a new method createButton and write some codes inside the method that will do the magic:

Explanation:

First we initialize a button object and keep it in button variable.

Then we set title and color of title of it.

In the following line of code, we add position and size of the button.

Add the button to view.

Finally let’s call the createButton in viewDidLoad method.

Now if you run the project (cmd + R) you can see a button created. If you tap on the button, nothing will happen at this moment. To call a method when button is pressed, we can write:

Do not forget to add ‘:’ after action method name (i.e. buttonPressed:). In action parameter of .addTarget, you set the method name that should be called. Now write buttonPressed method.

The buttonPressed: method simply displays an alert view. Now run the project and view result.

iOS Simulator Screen Shot Feb 18, 2015, 3.20.49 PM

The whole ViewController.swift will look like this:

 

Still feeling tired? Click here to download the project.

 

 

How to use Core-Data with SWIFT

Core data is a framework that is used to save data in iOS app development and OS X platform. Today we’ll develop an application using SWIFT programming language that will have a textfield, a button and a textview that will save and display data fetched from Core Data. To learn more about Core-Data please visit:

Introduction to Core Data Programming Guide

Summary:

Step 1: Create Project

Step 2: Design Core-Data database

Step 3: Write script to save and fetch data from core data.

 

Step 1:

1. Create a new project in Xcode. In first window of the wizard select Single view application. In next screen, select SWIFT from dropdown box and also check “Use Core Data” checkbox (bottom of the wizard). Please use “NotePad” as your project name.

Screen Shot 2015-02-12 at 11.56.09 PM

2. Open Main.storyboard and add a textfield, a button. Below the button add big textview. ( Note: textfield is for one line. For multiple lines use textview).

Screen Shot 2015-02-13 at 12.06.29 AM

 

Step 2:

1. Now, open NotePad.xcdatamodeld (YourProjectName.xcdatamodeld). This is the place where you design your database.

2. Here you add Entity (Entity is similar to Table of Oracle / MySql database, but not exactly). At the bottom of the page, you will see Add Entity button (1). Click on it. New entity (2) will be added. By double clicking on it, you can change it’s name. I changed it to “Note”

3. Now select the entity (if it’s not already selected). Add “Attribute” to it by clicking + button (3) below the Attributes section. Attribute is similar to column of a table. For each attribute we should select a type from dropdown box. I’m using only one attribute “paper” with type “String”.

4. At this point you have to do an important thing. In Utilities panel (Right side bar), you will see a box labeled: “Class” (4) in entity section. Write here : NotePad.Note; Actually, it should be ApplicationName.EntityName

5. Now we’ll generate Entity Classes. To do this, go to Editor > Create NSManagedObjectSubclass. Select the data model (It’s the file name that we have worked on). In next screen, select Entity name. We’ve only one Entity. Click next. Now, you will see a dialog box for saving entity file. Here, from language dropdown box select swift and finally click Create button.

coredata

Step 3:

1. Add outlets to textField and textview.

2. Add IBAction to button. You can also rename the button to “Add”

3. Open ViewController.swift.

We’ll edit this file. Before we proceed, let me give you an example. Suppose we have some food, one tray and a refrigerator. To save the food, we’ve to put it on the tray and keep the tray inside refrigerator. Saving method of Core data is similar. Here data is food, managedObject is tray and managedObject.save is equivalent to keeping tray contained food inside refrigerator.

Screen Shot 2015-02-16 at 9.45.25 PM

 

First import CoreData in your viewController

declare an array NSManagedObject below IBOutlet declaration. so the code will look like this:

 

To fetch data from CoreData we can use following method:

Above method fetches all data in Note entity. At the end of the method, we used for loop to get each text inside paper and add them in a local variable. finally show all texts in large text view.

To save data in Core data use following code. We are saving text in paper attribute (column) of Note entity (table)

 

Now implement saveNote in IBAction actionAddNote. Clear the text field so that you can add new note.

 

Full source code of ViewController.swift. You can also download the whole project from the link provided at the end this tutorial.

 

You can download the whole project by clicking here.