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:

Big Data for Banking Sector

In the field of nanotechnology, scientists of different fields such as physics, chemistry and biology work under the same roof. By the same way, in the field of Big Data, not only programmers, also statisticians, decision makers, system admins all work together. Big data is taking our modern computer based society to a new height. Still it’s the beginning of the journey and has started to reveal it’s possibility to different fields, such as social network, marketing, health care, law enforcement as well as banking and insurance Sector. Today we’ll explore the possibilities of big data in banking and financial sector.

Why Big Data in Banking Sector?

Big data deals with…
1. large amount of data (Volume),
2. coming from different sources and in different formats such as transaction data, customer photo, CCTV images (Variety)
3. that needs to be processed very fast (velocity).

Banking data has all these 3 properties. That’s why big data fits in banking sector.

There are 5 major areas of implementing Big Data in Banking sector:
1. Fraud Detection
2. Analyze customer sentiment and feedback
3. Analyze transaction history to discover trends around the year
4. Analyze customer’s spending history and behavior to offer personalized product
5. Customer Recognition

1. Fraud detection:
Currently banks detect frauds depending on ip address, unusual login time and “using wrong pin multiple time” etc. Big data changed the process of fraud detection. By analyzing large amount of data, applying algorithm and fraud pattern, it has become possible to detect and prevent frauds or unusual activity instantly.

2. Analyze customer sentiment and feedback:
It is easy to get new customers. But retaining them for long time is challenging. So it is important to analyze customer’s complain, suggestion, satisfaction and make decision based on analysis result. For example improving a service that is performing poor and dissatisfying customer, relocating ATM booth etc.

3. Analyze transaction history to discover trends
Banks have large amount of transaction history. By analyzing those data, we can discover trends of spending and savings of customers. We can find when and where users spend more amount of money. For example, before festivals customers spend more in shopping malls. By discovering these trends banks can offer better services for it’s all customers.

4. Analyze customer’s spending history and behavior
In this case, banks analyze single customer’s transaction history and behavior. This analysis helps management of banks to offer personalized products. For example, banks can offer dual currency products with benefits to the customers who travel frequently abroad. Banks can also offer special discounts to customers who make online transactions more often.

5. Customer Recognition: It is time consuming to recognize a customer when he or she goes to bank to withdraw money or perform other transaction operation. By using realtime analysis power of Big data, banks can analyze photo, signature, voice and behavior to recognize customer. This can save time and let bank stuffs server more customers.

Useful links:

Deriving Business Insight from Big Data in Banking

Big Data in Financial Services and Banking

Benefits of Cloud Server Hosting

Cloud Server Hosting

Cloud computing is expanding and becoming popular day by day. In the near future, most of the websites – if not all – will be hosted on cloud servers. Because, cloud server hosting has benefits over traditional single servers. It has some disadvantages too.

  1. Cloud server hosting  is Cost effective: In cloud server hosting, pricing is calculated based on CPU, RAM, storage any other resource you’ve used. In current scenario, we buy 10 GB space, use less than 1GB. For example,  my one client runs a local newspaper. He uploads news with images everyday. He unlimited space. After one year, we found that, it took only 1 GB space. So in cloud server you just pay for what you’ve used.
  2. Cloud server hosting is scalable: Suppose you have a online training website where you upload training videos and let subscribed members watch those videos. After 6 months, you found that the business is growing, number of members doubled and they are requesting for more videos. If you have bought a traditional hosting server with limited space, then you’d have to change the hosting package to upload new videos. In cloud server hosting, we don’t have to worry about it. If your business grows, needs more space and bandwidth cloud server will not stop you. You can use as much resources as you need.
  3. Security of cloud server hosting: Most of the cloud server hosting providers implement standard security features. However, responsibility for security doesn’t only depend on cloud hosting provider but also end users or customers. So, both parties should be concerned about it.
  4. Location of server: Some cloud hosting providers give you the opportunity to choose the location of your server. e.g, If your website’s most visitors are in Asia, you can select Singapore or Japan region. It helps to reduce server pinging time as well as increase performance slightly.

Disadvantages:

  1. Cloud servers have downtime, which is also true for shared hosting
  2. Cloud server’s performance may be slower than highly configured dedicated servers.

 

Photo Credit : Icon Archive

How to setup your website in Amazon Web Services (Part 3)

This is the third part of “Setting up website in Amazon Web Services”. In this part of the tutorial, I’ll show you how to upload files on EC2 instance using FileZilla.

It has 2 steps:

Step 1. Add public key to FileZilla

Step 2. Configure the site

 

Screen Shot 2015-07-11 at 8.57.12 AM

Step 1. Add public key to FileZilla

Open FileZilla

1. FileZilla > Settings (In windows it may be in Window menu)

2. From left panel, select SFTP

3. In right panel, click on Add keyfile.

4. Select your public key. (FileZilla may warn about converting the file into FileZilla format. Click yes.

5. Save the new FileZilla format file in the same place where you kept your public key.

6. Click OK to finish “adding public key” process.

 

Screen Shot 2015-07-11 at 8.58.03 AM

Step 2. Configure the site

1. Open FileZilla. Go to File > Site Manager.

2. From left side of the Site Manager select “New Site”. You can give it a name. I used “MyAWS”.

3. In right panel put the following setup:

Host: EC2’s Public IP

Port: 22 (or you can leave it blank)

Protocol: SFTP – SSH File Transfer Protocol

Logon Type: Normal

User: ec2-user / root ( see the note below)

Now click connect. FileZilla may warn you about Unknown host key. Just click okay.

If you are running apache on the EC2 instance, then your files are located in /var/www/html/

Now redirect to /var/www/html/ and upload your file on server.

 

How to setup your website in Amazon Web Services (Part 2)

In this tutorial, we’ll see how to access EC2 instance or vm from local computer using command line interface (CLI). If you are using windows, then I recommend you to install ssh in your command line. This video might be useful for you.

Access EC2 instance:

If you are using Linux or OS X, most likely you already have ssh. Open your terminal or CLI and run the following command:

If you don’t see the version number, then install it.

In previous video, you’ve downloaded public key from Amazon Web Services. Keep it in a place (I prefer Desktop) where you can easily access for a now.

Open command line interface or terminal and go to the folder where you have saved the public key.

Run the following command to protect your private key file:

To access the vm or EC2, run the following command:

Here ec2-user  is the username. It can vary depending on the AMI or system that you selected in previous tutorial. 52.2.23.186 is the “Public IP” that we got from our previous tutorial.

 

According to Amazon Web Services documentation:

For Amazon Linux, the user name is ec2-user. For RHEL5, the user name is either root or ec2-user. For Ubuntu, the user name is ubuntu. For Fedora, the user name is either fedora or ec2-user. For SUSE Linux, the user name is root. Otherwise, if ec2-user and root don’t work, check with your AMI provider.

After running the above command, if there is no error on the screen, then you are logged into the vm (EC2) successfully.

 

Install Apache PHP MySQL on EC2 server: 

After logging into the EC2 console successfully, run the following command to ensure that all software packages are upto date:

Above command will take some time to complete.

Now it’s time to install apache, php, mysql. Run

Start apache server:

If you want to start apache server when the EC2 or vm server starts, run:

The above command doesn’t show you any status, but it works.

Allow HTTP to access your web server: 

At this moment Amazon Web Services will not allow anybody to access our newly installed apache server that is HTTP server. To enable HTTP for all, we’ve to make some changes to our security group. Let’s do that now

Go back to your Amazon Web Services console (AWS) in your browser. Go to EC2 > Running instances.

img7

If you scroll horizontally to the right of the table, you can see a “Security Groups” column at the end. Click on it ( red circle marked on the screenshot).

 

Screen Shot 2015-07-10 at 9.59.21 PM

In the next screen, click  Action > Edit inbound rules.

 

Screen Shot 2015-07-10 at 10.04.44 PM

A popup box will appear. Click on Add Rule button and then select HTTP from type dropdown box. You don’t have to change any other value. Keep them as they are suggested.  Click Save button.

Again Actions > Edit outbound rules and add new rule of HTTP the same way that you did for inbound rule.

Now, open your browser and type “Public IP”. You can see the following result, if everything goes okay.

Screen Shot 2015-07-10 at 10.06.17 PM

 

Wow, now your server is accessible from anywhere in the world. In next tutorial, I’ll show you how to upload files using FileZilla.

How to setup your website in Amazon Web Services (Part 1)

Setup Account at AWS: 

Go to http://aws.amazon.com/console/ and click on Sign in to the AWS console. Here you can get information about signing up. Amazon Web Services provides free tier for 1 year. The free tier includes 21 products and services. Such as Amazon EC2, Amazon S3, Amazon DynamoDB etc. Click here for details. You have to provide your credit card information to open account.

After creating account login to your Amazon Web Services (AWS) console by visiting https://console.aws.amazon.com/console/home

You will be redirected to dashboard, after you successfully login. The dashboard contains all the services that amazon offers. Some of them are free for 1 year (e.g. EC2, S3), others will charge.

Create new EC2 instance: 

Now, we’ll setup EC2 instance in our Amazon Web Services. It’s a very easy process and requires only a few steps.

 

img1

1. Click on EC2 which is located at the top left of the dashboard.

 

img2

2. Click on Launch instance.

 

img3

3. In the next screen you will see a list of AMI (Amazon Machine Image) or system images. In short it’s the operating system that you are going to use in your virtual machine (vm) or EC2 instance. Some AMI are free.  You can select any one operating system such as Amazon Linux AMI, Red Hat Enterprise Linux, Ubuntu Server or even Microsoft Windows Server. We are going to select Amazon Linux AMI as free tier covers it.

 

img4

4. In previous step you selected software. Now, it’s time to select hardware configuration. The page lists different Instances based on different numbers of CPU, memory and storage. If the left column you can see which instance is suitable for which purpose. For example, general purpose, compute optimized, memory optimized or storage optimized. I’m selecting t2.micro instance as it’s free. You can select any one that best suits your needs.

After selecting instance, click on “Review & Launch” button. We could select “Next: Configure Instance Details”. But for simplicity, we are not going there.

 

img55. In the next screen, click on Launch button which you can find at the bottom right corner. A popup box will appear. It lets you create or select existing key pair. The key pair contains

  • One private key that will be stored in AWS
  • One public key that you will download and store in your local computer. Keep it in a safe place. Because, you need this public key each time you login to your ec2 instance or vm.

After you download the public key and select on the acknowledge check box, launch instances button will be enabled and you can click on it.

 

img6

6. Congratulations! Your first EC2 instance or vm is being setup. You can see the vm by clicking on View Instances button which is located at the bottom right corner.

When you click on View “Instances button”, you can se a list of instances (now it’s only one vm) in rows. If the setup process is complete, you can see a green circle in Instance column. Otherwise,  you will see yellow circle.

Notice, “Public DNS” and “Public IP” column. You need “Public IP” column’s IP address  for accessing the vm or EC2 instance from your computer. We’ll see that in next tutorial.

 

 

How to setup your website in Amazon Web Services (Intro)

Recently, I’ve moved my website (webindream.com) to Amazon Web Services. To me it was easy and fun. It was also adventurous as I was doing it for the first time. Now, I’m going to share with you, how did I do it.

Prerequisites:

  • You should be familiar and comfortable to work with CLI (Command line interface).
  • You should be able to run ssh command from your command line (cmd for windows / terminal for linux or mac OS X.)

I’ve divided the tutorial into 4 parts.

Part 1: 

Setup Amazon Web Services (AWS) Account

Setup amazon EC2 instance.

Part 2: 

Access EC2 Service from terminal or command line prompt.

Install Apache PHP MySQL on EC2 server

Part 3: 

Access EC2 File system using FileZilla and upload files

Part 4: 

Add your domain name in Route 53

Change DNS of your domain name.

Check your website on server.

 

CSS Selectors

I’m not going to explain everything of CSS. Just focusing on the things that are required most of the time while you are dealing with CSS.

The most important thing of CSS is CSS selectors. Let’s begin with an example. Suppose you have 2 paragraphs:

a. My name is X

b. I’m a web developer

HTML code of above paragraphs:

We want to color first paragraph with red and second paragraph with blue. How do you do this?

If you write the following style, it will color (red) all paragraphs.

In above code, p is a selector. Here p means that, all paragraph tags i.e. everything inside <p></p>

So, now you know what is selector. If not yet, let me know. There are 3 main types of selector:

1. Tag selector

2. ID selector

3. Class selector

Tag Selector (body, p, div, strong):

Tag selector means, all the html tags that we use in our html document. e.g. body, p, div, strong, etc can be used as CSS selector.

  • When you write html tag as CSS selector, you don’t put any # or . or < or any other character at the beginning or end of the tag. Just the tag itself.

Some examples of Tag selector are:

 ID selector (#first, #second): 

Suppose you are in a class room. You have a student id or roll number or any other unique id. It is unique, because, nobody has the same student id as yours. The same way, ID selector is unique to only one element of the html file. You can’t use same ID in more than one html element. If you do, then it will conflict.

We’ll use this selector to identify 2 paragraphs and give them 2 different colors. So, first we’ve to change our html code:

Now, let’s write CSS style so that texts of 2 paragraphs will have 2 different colors:

  •  To define a ID selector in HTML, use id=”your ID name”
  • To use that ID in CSS style, use # followed by your ID name. That is, #first, #second etc

Class Selector

Class selector of CSS is similar to real world class. If you are now in a room of class VII (7), then in the same  room, all other students belong to same class VII, except your teacher. If your teacher’s name is MR Y, then all other student’s teacher is MR Y. In other words, class means group. Same group.

Let’s take another example of 5 paragraphs:

1. I’m MR X

2. My Age is 25

3. I’m a web developer

4.  My hobby is watching movies

5. I’ve many friends.

If you want to use red color to paragraphs: 1, 4 and 5; Paragraphs 2, 3 with blue – how would you do this?

Of course, you can use ID selector, but if there were hundreds or may be thousands paragraphs – then?

Here the class selector of css comes to work.

define 2 CLASS selectors .red and .blue in your CSS style:

Now, where ever you use red class to your html element, it’s text color will be red.

  • To define a class selector in your HTML element use: class=red or class=blue
  • To define a class in your CSS style use . followed by your class name. e.g. .red, .blue etc.

Finally let’s use red color to paragraphs: 1, 4 and 5; And paragraphs 2 and 3 with blue:

Short note:

Remember 3 selectors: Tag, ID, Class

Tag: html, body, p, div etc without any # or .

ID: #first, #sidebar etc

Class: .main-color, .sub-color, .title-color