Application's own spotlight

Have you ever searched for a menu in an application, i.e, you know the name of the menu and you know it's somewhere in the menu hierarchy, but you don't know where it is.

It's not that complicated, actually it's very easy to find a menu of an application.

You know about the spotlight of the Mac which is a great utility to search for all the files and stuffs in your machine. Fortunately, in Mac, most of the applications have their own spotlight. You can find it in the help menu of an application.

For e.g., I need to find a menu named "Create SuperClass" in the XCode, but I forgot the exact location of it in the menu bar. What I will do is, I simply open the XCode's spotlight (under the Help menu) and start to type "Create SuperClass". When I start to type, the XCode matches my search string and shows the matched menus in a list. When I hover the mouse over each item, I can see the exact location of the menu.

Using constraints in storyboard and also by code

Sample code is in Github.

Three years before, all the iPhones sizes (iPhone3, iPhone3GS, iPhone4, iPhone4S) are the same. So we didn't care about the compatibility issues like the android developers. When apple introduced iPhone5 and later iPhone5S, iPhone5C, it was not a big deal for us. All we did was, add a launch image for those new screen sizes and we had to adjust our views a little to use the newly added 0.5 inches screen. So the auto layout helped us to achieve this.

Now apple introduces even big screen sizes, and the old style auto layout cannot help us like in the past. Because old auto layout only works with the super view i.e, if the super view expands it expands, when the superview move the control also will move. But you cannot specify how much you want to move or how much you want to expand. There is nothing more than this.

With using the auto layout, you can place a control in a view in its top left corner, but it is merely impossible to place a control at 30% of left. Also you cannot make a text field expands its width, half the width of its superview. But the Constraints does this trick.

When trying to learn this technology, it'll like a hell at first. But once you get into it, you will find the constraints as one of the best tools apple introduced ever. 

If you use the constraints in your app, you don't have to worry about these screen sizes. Even you don't have to worry about the iPad screen sizes. You can have a universal storyboard for all your devices.

Here I am trying start this, taking the following sample screen. The final output should look like this in Portait and Landscape.

1) The screen has a header in the top of the main view with 60 pixels height.

2) The header has two buttons in each corner with 10 pixels of padding and a header label in the middle.

3) A textfield is added to the view, which is 75 pixels below from the headerview and center to the main view. The width of this text field is half the width of the main view.

4) There are two buttons 25 pixels below the textfield. One button is left aligned with the textfield and the other one is right aligned with the textfield.

This is easy if you identify which constraint is to be added for each control in storyboard. But, it is little difficult to do in code. To meet all the above requirements, we have to add the following constraints.

You can find a sample project in Github illustrating this example both in storyboard and code. The link is here.

Create all the controls like you do normally, add those to the viewcontroller's view. Don't care about their positions. The constraints will do that.

Before adding the constraints to a subview, make sure you give No to its "translatesAutoresizingMaskIntoConstraints" property. Otherwise you will get an exception.

Constraints for the subviews of the header view.

Constraints for the header view.

Constraints for the textfield and the two button below it. (Make sure you disable the translatesAutoresizingMaskIntoConstraints for these controls before adding constraints.)

The alignment of the code here is worse, but believe me, it works.

- (void)viewDidLoad {

BOOL addControlProgrammatically = YES;

if (addControlProgrammatically) {

[self.view.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];

[headerView setBackgroundColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5]];

[self.view addSubview:headerView];

UIButton *cancelBtn = [UIButton buttonWithType:UIButtonTypeSystem];

[cancelBtn setTitle:@"Cancel" forState:UIControlStateNormal];

[headerView addSubview:cancelBtn];

UIButton *saveBtn = [UIButton buttonWithType:UIButtonTypeSystem];

[saveBtn setTitle:@"Save" forState:UIControlStateNormal];

[headerView addSubview:saveBtn];

UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(0, 0, 100, 31)];

[textField setBorderStyle:UITextBorderStyleRoundedRect];

UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];

[button1 setTitle:@"Button1" forState:UIControlStateNormal];

UIButton *button2 = [UIButton buttonWithType:UIButtonTypeSystem];

[button2 setTitle:@"Button2" forState:UIControlStateNormal];

cancelBtn.translatesAutoresizingMaskIntoConstraints = NO;

saveBtn.translatesAutoresizingMaskIntoConstraints = NO;

[headerView addConstraints:@[[NSLayoutConstraint constraintWithItem:cancelBtn

attribute:NSLayoutAttributeLeading

relatedBy:NSLayoutRelationEqual

toItem:headerView

attribute:NSLayoutAttributeLeading

multiplier:1.0 constant:10],

[NSLayoutConstraint constraintWithItem:cancelBtn

attribute:NSLayoutAttributeCenterY

relatedBy:NSLayoutRelationEqual

toItem:headerView

attribute:NSLayoutAttributeCenterY

multiplier:1.0 constant:0]

]];

[headerView addConstraints:@[[NSLayoutConstraint constraintWithItem:saveBtn

attribute:NSLayoutAttributeTrailing

relatedBy:NSLayoutRelationEqual

toItem:headerView

attribute:NSLayoutAttributeTrailing

multiplier:1.0 constant:-10],

[NSLayoutConstraint constraintWithItem:saveBtn

attribute:NSLayoutAttributeCenterY

relatedBy:NSLayoutRelationEqual

toItem:headerView

attribute:NSLayoutAttributeCenterY

multiplier:1.0 constant:0]

]];

headerView.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addConstraints:@[[NSLayoutConstraint constraintWithItem:headerView

attribute:NSLayoutAttributeHeight

relatedBy:NSLayoutRelationEqual

toItem:nil

attribute:NSLayoutAttributeNotAnAttribute

multiplier:1.0 constant:60],

[NSLayoutConstraint constraintWithItem:headerView

attribute:NSLayoutAttributeLeading

relatedBy:NSLayoutRelationEqual

toItem:self.view

attribute:NSLayoutAttributeLeading

multiplier:1.0 constant:0],

[NSLayoutConstraint constraintWithItem:headerView

attribute:NSLayoutAttributeTrailing

relatedBy:NSLayoutRelationEqual

toItem:self.view

attribute:NSLayoutAttributeTrailing

multiplier:1.0 constant:0],

[NSLayoutConstraint constraintWithItem:headerView

attribute:NSLayoutAttributeTop

relatedBy:NSLayoutRelationEqual

toItem:self.view

attribute:NSLayoutAttributeTop

multiplier:1.0 constant:0]

]];

[self.view updateConstraintsIfNeeded];

textField.translatesAutoresizingMaskIntoConstraints = NO;

button1.translatesAutoresizingMaskIntoConstraints = NO;

button2.translatesAutoresizingMaskIntoConstraints = NO;

// [textField setText:@"Hello World"];

[textField setBackgroundColor:[UIColor redColor]];

[self.view addSubview:textField];

[self.view addSubview:button1];

[self.view addSubview:button2];

[self.view addConstraints:@[[NSLayoutConstraint constraintWithItem:textField

attribute:NSLayoutAttributeCenterX

relatedBy:NSLayoutRelationEqual

toItem:self.view

attribute:NSLayoutAttributeCenterX

multiplier:1.0 constant:0],

[NSLayoutConstraint constraintWithItem:textField

attribute:NSLayoutAttributeTop

relatedBy:NSLayoutRelationEqual

toItem:headerView

attribute:NSLayoutAttributeBottom

multiplier:1.0 constant:75],

[NSLayoutConstraint constraintWithItem:textField

attribute:NSLayoutAttributeWidth

relatedBy:NSLayoutRelationEqual

toItem:self.view

attribute:NSLayoutAttributeWidth

multiplier:0.5 constant:0]]];

[self.view addConstraints:@[[NSLayoutConstraint constraintWithItem:button1

attribute:NSLayoutAttributeLeft

relatedBy:NSLayoutRelationEqual

toItem:textField

attribute:NSLayoutAttributeLeft

multiplier:1.0 constant:0],

[NSLayoutConstraint constraintWithItem:button1

attribute:NSLayoutAttributeTop

relatedBy:NSLayoutRelationEqual

toItem:textField

attribute:NSLayoutAttributeBottom

multiplier:1.0 constant:25]]];

[self.view addConstraints:@[[NSLayoutConstraint constraintWithItem:button2

attribute:NSLayoutAttributeRight

relatedBy:NSLayoutRelationEqual

toItem:textField

attribute:NSLayoutAttributeRight

multiplier:1.0 constant:0],

[NSLayoutConstraint constraintWithItem:button2

attribute:NSLayoutAttributeTop

relatedBy:NSLayoutRelationEqual

toItem:textField

attribute:NSLayoutAttributeBottom

multiplier:1.0 constant:25]]];

}

[super viewDidLoad];

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

}

Google Easter Eggs

Google have some amusing Easter Eggs. Type the following words in the google search bar and see the magic. You will be amazed.

1) google Leet   "goto www.google.com enter 'google leet' and press I am feeling lucky"

2) recursion (shows "Did you mean: "recursion"->same word)

3) do a barrel roll (will rotate the results page a full 360 degrees)

4) tilt (makes the page 'lean' to the right a bit.)

5) let it snow (simulates snowfall and frost on the search results.)

6) binary (changes the number of found results to read out in binary)

7) zerg rush (returns a search page with 'O's eating the search results. Clicking each 'O' a few times kills it.)

8) conway's game of life (shows the the results along with a set of controls to play, pause, maximize/restore, and step.)

9) Search "timer" in the google. The google will initiate a timer for you.

10) Search any number in the google followed by "=english". You will find the typed number in words. For example if you search "123456=english", you will see the following output.

iOS8 - Easter eggs

With the latest update, the iOS began the best OS ever. With the iOS8, apple introduced many feature which you may not aware.

1. With iOS8, you can continue sharing your current location to someone (let's say your friend) forever or for a particular time.

2. iOS introduced extension with helps you do actions without opening the entire app. For example, you can send a quick reply to an incoming mail without leaving the current app. You can accept/reject an iCal invitation without opening the Calender app. Almost all the apps from the apple have this feature. In future, third party apps will make use of this feature and we will get some amazing extensions.

3. Battery status is available in iOS8, although the android have this feature already. The battery status option will list the apps based on their battery usage, you can kill an app which takes so much battery usage.

4. You can hide few photos/videos from your photo library, so that your friend/family members can't see them. You can see your hidden photos from the hidden photos folder.

5. You don't have to enter your credit card info everytime in your iPhone. You can just scan your card, the iPhone will scan the details from your card.

6. If you delete a photo by mistake you can easily recover them. You can recover the photos which are deleted in the past 30 days.

7. HandsOff: Apple introduced a new feature called HandsOff with iOS8 and OS X 10. You can start a work in any apple device and finish it in your another apple device. For example, you can start to compose a mail from your iPhone and finish and send it from your iPad/Mac when they are nearby. Apple also makes these API's public, so third party apps can make use of this.

8. You can send a mail with attachments upto 5GB in iOS8. In apple devices, the attachments are loaded with the mail itself, and in other devices the links of the attachments will be added with the body of the mail.

9. Interactive actions within the app. For e.g when you swipe a mail from right to left, in previous iOS, you will see only the delete menu. Now apps can have multiple menus when you do that swipe action. For e.g., the mail app have delete, reply, Flag...

10. Widgets are introduced like android. Although, they are only limited to the notification center (the UI appears when you swipe from top in the iPhone), not in the home screen like android.

11. Custom keyboards. Third party apps can supply their own keyboard which you can use in your device. These keyboards will appear throughout the iPhone, and you can control these from the settings app like the inbuild keyboards. Apple also updated their keyboard with swipe feature, predictive text...

12. Your recent contact list will appear when you use the app switcher (when you double click the home button). Although this feature is not available for the third party apps.

13. iCloud Keychain: The passwords stored in your all the apple devices are synchronised. But Google Chrome has this feature already.


Not only these, apple has introduced so many API's with iOS8 like HealthKit, Photo Editing, Extensions... Third party apps will use these features and give us some amazing apps in the future.

XCode Snapshots

When you are going to start a major milestone, it is very important to keep the backup of the current final source. Using source control is one of the best solution here. But I have seen people who take manual copies of the project when they start a major work. Basically, they copy the entire project's root folder and paste it somewhere else. At a point of time, these backups occupies over GB's of space, and it is also very difficult to restore to the backup.  But the XCode has a amazing feature which will take of this.

It is none other than "SnapShots". You should have already seen this. When you do some major editing processes such refactoring the project, whole find or replace and some other processes. We can also take manual snapshots when we start some major change. You can take snapshots by selecting File->Take Snapshot

Also if you want the XCode to take automatic snapshots when the build succeeds or finishing some other processes, you can do that by enabling a checkbox in the XCode->Behaviour->Select option->Create Snapshot.

You can restore the project to these snapshots at any time in the future. This will update the current source code to its origin source during the time of the snapshot. This may be very helpful than taking manual copies. File->Restore Snapshot->Choose the snapshot to be restored->Restore.

The XCode will open an interface comparing the files before and after restoring the snapshot. You can manually select any change and discard it if you don't want it.

Git Vs Snapshot
If you are using Git or some other source control software, you may confuse both of them. Git and Snapshot are not same and they cannot be used interchangeably. Snapshot saves the changes of a file in a format only the XCode will understand but the Git is an universal technology. But in some situations you may have to use both of them. Using Git is a must one for the project, but using Snapshot will help you to do restore temporary backups.

When you start work on a milestone, you can discard all local change in Git at any time. But you can't have many commits like "Temp Commit", "temp commit2"... Because when working with a team, you can't commit a project often. So in this case you can use the snapshots. Because the snapshots are local copies which will not affect the remote source.

Also you can share the snapshots to other people. All your snapshots are located under the folder
~/Library/Application Support/Developer/Shared/SnapshotRepository.sparseimage

iPhone tips and tricks

There are many hidden features in iPhone which are not mentioned anywhere in the apple website, but works.

1. Swipe left on the Compass app and your iPhone will work as a level meter.

2. You can see the timestamps of your text messages by sliding your texts over to the left.

3. As long as the camera app is open, you can use the volume buttons to take a photos.

4. Double-tapping the spacebar will automatically end the sentence with a period and start a new one for you.

5. There is an undo function that allows you to go back if you make a mistake writing a text message, email, or editing a photo. Simply shake your phone and this option will pop up.

6. By holding down the capture button in the camera app, your phone will take a series of photos so you can get the perfect shot.

7. You can enable the emoji keyboard that appears in the whatsapp for all your apps.

Go to Settings > General > Keyboard > Add New Keyboard and select Emoji.

8. HeadPhones: Double click the volume button in of the head phone to play the next songs, and triple click to play the previous song. When the camera app is open, you can use the volume buttons to take the photographs.

9. Triple click the Home button to enable/disable the assistive touch.

10. If you press and hold the dot (.) button in the Safari when entering the web address, you will see multiple options like .org, .net. .com…

11. Double tap the shift button in the keyboard will do the “Caps Lock”. Double tap again to disable Caps Lock.

12. Press the home button and the Off button of the iPhone at the time to take screenshot of the current iPhone’s screen. But few apps can block their screens while taking screenshot to protect their sensitive information.

Selecting a control among multiple in Interface Builder.

When you are working on the Interface Builder, you will find it hard to select a particular control when lot of controls are near by it. Also it is hard to select a control which is beneath another control.

For e.g., if you have a text field over a UIView, then you can't select the UIView directly sometimes. You may to select that view from the Document Outline.

Instead, you can use this shortcut which is provided with the XCode. 

Hold the "Shift" button, and right click over the control. 

(Or Hold the "Shift" and the "Option" button and click over the control)

Now XCode will list all the subviews and super views present at the clicked location, like in the above image. You can easily select your desired control from this menu. This is like selecting a layer in the Photoshop.

XCode Snippets - How to use?

If you are an iOS developer, you would be spending most of your time with the XCode. One of the most advanced feature of XCode is Code Completion, which is available now with most of the SDKs.

But the sad part is, many SDKs provide the code completion only for their inbuild functions/methods. But in the XCode, we can create our own code completion shortcuts with the help of snippets. Snippets are the small piece of code saved with the XCode, which can be used whenever needed without having to type the same piece of code again and again.

By default the XCode have many code snippets. You can see that in the bottom of the Utilities panel.

Snippets Menu

To create your custom snippet, prepare the piece of code you want, and drag it to the utilities panel. The XCode will open a popup, in which you have to enter the title, description, scope, shortcut. You have to do this only once. Once you finish this, you don't have to type the same piece of code ever. You can make the code appear in the editor either by typing the shortcut or by dragging the snippet to the editor.

The snippets are basic XML and they can be shared to other people. You can find all your snippets in the following path.
/Users/<Your_Name>/Library/Developer/Xcode/UserData/CodeSnippets
Just copy the desired snippet and paste in the same path in another machine.

How to convert an existing iPhone project into an ARC enabled project?

It's very simple as it looks like. All you have to do is select a menu from the XCode menu bar, and the XCode do all the stuffs for you.

The menu is,

Edit -> Refactor -> Convert to Objective-C ARC...

Serialization in iPhone

Archives and serializations are two ways in which you can create architecture-independent byte streams of hierarchical data. Byte streams can then be written to a file or transmitted to another process, perhaps over a network. When the byte stream is decoded, the hierarchy is regenerated. Archives provide a detailed record of a collection of interrelated objects and values. Serializations record only the simple hierarchy of property-list values.

In English, it means, you can write a NSArray directly to a file and read it back when you need.

By using serializations you can directly write NSArray, NSDictionaries, NSObjects or even your own custom objects to the file.

    NSArray *arr = [NSArray arrayWithObjects:@"Obj1", @"Obj2", @"Obj3", @"Obj4", nil];
    
    [NSKeyedArchiver archiveRootObject:arr toFile:[[self getApplicationsDirectory] stringByAppendingPathComponent:@"encodedFile"]];

You can simply regenerate them by using the NSKeyedUnarchiver class.

    NSData *readedData = [NSData dataWithContentsOfFile:[[self getApplicationsDirectory] stringByAppendingPathComponent:@"encodedFileData"]];
    NSArray *decodeObj = [NSKeyedUnarchiver unarchiveObjectWithData:readedData];

All of the Foundation value objects objects (NSString, NSArray, NSNumber, and so on) and most of the UIKit user interface objects adopt NSCoding and can be put into an archive.

For custom objects you have to implement the NSCoding protol.

I have created a sample application to show the working of this. You can find it here

WIKI is here:

NSArchiver Docs link is here:

Google Search Tricks

1. Identify Local Time for Any City in the World using Google
If you want to know current local time in a particular city, use the following method. To see the current local time in Los Angeles do the following. Go-ahead and try this yourself for your local city and see how it works.
Syntax: time in PLACE

time in New York

2. Identify Local Weather for Any City in the World using Google
To see the current weather in Los Angeles do the following. Go-ahead and try this yourself for your local city and see how it works.
Syntax: weather PLACE

weather New York


3. Exclude Keywords in the Search
If you want Google to exclude a word while searching the web page, use – (minus) before the search as shown below. This example searches for the pages which has the word ebooks, and without the word free.
ebooks -free

4. Search for Keywords with Similar Meaning. Include Synonym Keywords in Search
Instead of searching for only the given word, using ~ before the keyword you can instruct Google to search for webpages with the exact given word or the words which has same meaning. In the following example, giving ~tutorial also searches for keywords: guide, manual, reference etc.
ios ~tutorial

5. Match Any Single Word in the Search Using *
While searching, if you are not sure about which keyword to be placed in the phrase, you can match any single word using *.

For example, if you want to search for examples of vim substitution, and you are not sure whether to search for “vim editor find and replace examples”, or “vim editor search and replace examples”, then use * , which will match either find, search or any other word, as shown below.
vim editor * and replace examples
Note: You can also match multiple words by using multiple number of *’s respectively.

6. Use OR in Google Search
Using OR operator in between the words makes the following kind of search possible in Google. Following example will search for bash examples or bash programs.
bash examples OR programs
 
Note: The keyword OR should be in uppercase

7. Identify Definition a Word
To view the definition of a word use the following method.
Syntax: define: <word>

define: big data

8. Search for a Range Using ..
If you are looking for a product in a specific price range use the following. It will search for the pages with text PDA, and $400 to $450 ranged text.
Syntax: text $100..$125

olympics 1900..2000

9. Searching within a Specific Website
You can search for a text in a specific website. The following example shows how to search only within our blog – www.thegeekstuff.com.

examples site:stackoverflow.com

Note: There is no space between site: and the website address.

10. Google Search for a Given Keywords (both without and with sequence)
Basic Search for a Given Keywords – Without Sequence
The very basic feature of Google which everybody is using today is searching for pages which has the given text as:
linux command line history examples

Note: Highlighted words are not in the order as we given in the search box.
Basic Search with Keywords In a Given Sequence
If you want Google to show only the pages which has the words in the given sequence, then double quote that search string as:
"linux command line history examples"

Note: Highlighted words are in the same order as we given in the search box.

11. Search Based on File Type
The following examples searches only the matching keywords inside a Power Point presentations. In the same way, you can search for the doc, pdf and other file types.
iphone filetype:pdf

12. Use Google as a calculator.
Google has a built-in calculator — try entering a calculation like 110 * (654/8 + 3). Yes, your computer also has a calculator, but if you spend most of your day inside a browser, typing your calculation into the browser’s search box is quicker than firing up your calculator app.

Also type the following in the search box and hit enter.
online money converter
online conversion
online calculator

Also, you can do all the above things in the google advanced search

Asset Catalogue in Xcode

Apple introduced a new concept called "Asset Catalogue" with the XCode5. It is even better with the latest XCode. 

Asset Catalogue

Asset Catalogue is the collection of all the icons, app images, launch images of your application. When creating a new project in Xcode 5 (or later version), the asset catalogue will be automatically created for you. We can add the asset catalogue for the older projects too. The Xcode asks a confirmation to add the Asset Catalogue while converting older projects to the latest Xcode.

Advantages of Asset Catalogue:

1) All the icons, splash images are listed under a single hood. You can easily spot the missed images.
2) You don't need to follow the naming conversion when using 2 images for the normal and retina(@2x) displays.
3) However, if you have two images like button_bg.png, button_bg@2x.png and if you drag them into the asset catalogue, the XCode will automatically identify that the two images are the two version of a single image. So XCode will group them into a single asset called "button_bg". You can use this image simply by passing "image" to the [UIImage:imageNamed:@"button_bg"] method.
4) We can use patch images like Android. Previously we have to do all these in code by the resizableimagewithcapinsets method. Now we can do this in Xcode by Slicing.

Even if you have device specific images (separate images for iPad) you can select them in the file inspector of the asset.

Device Specific Images

Slicing Images:

Resizing images using slicing is a common technique for creating visual elements such as buttons - where the center of the image should be stretched or tiled to the new size, and the corners should remain the same size.
When adding a new image to the Asset Catalogue of the Xcode project, you can do your slicing by clicking the "Show Slicing" button. This will give you the options to slice horizontally/vertically/both. You can select according to the image.

You have to adjust the slicing according to your image. According to your image you can select the slicing options in the preview pane. You can edit the values manually in the file inspector also.

The main advantage of the slicing is we can use patched images instead of using a big image. This will help us to reduce the size of the application.
Also when using the asset catalogue, the Xcode converts them into a binary format which increases the speed of our app.

Have a look at the following images, which shows the magic of slicing.

Before Slicing

After Slicing

Apple Docs link is here.

Mac Spotlight tips and tricks

This post is especially for the new Mac users.

One of the amazing feature that the Mac have is the Spotlight application, the system wide searching tool.

You can open the spotlight application by clicking the Search icon in the top right of the screen or by pressing Command+Space keys.

1) You can use the Spotlight application to search any files in your system. The Spotlight not only searches the file name but also searches the contents of the files also.

2) Spotlight2: You can use the spotlight as a simple calculator. Commands like sqrt, pi.. also works in spotlight.

3) Spotlight3: You can use the spotlight to know the meaning of any word

4) Spotlight4: Use quotes while searching multiple words or phrases.

5) Spotlight5: Use keywords like kind to search a particular category.

6) Spotlight6: You can use operands like OR, AND.

Promoting Apps with Smart App Banners

Safari has a new Smart App Banner feature in iOS 6 and later that provides a standardised method of promoting apps on the App Store from a website.

Note: Smart App Banners only show on iOS, not OS X.

Smart App Banners vastly improve users’ browsing experience compared to other promotional methods.

If the app is already installed on a user’s device, the banner intelligently changes its action, and tapping the banner will simply open the app. If the user doesn’t have your app on his device, tapping on the banner will take him to the app’s entry in the App Store. When he returns to your website, a progress bar appears in the banner, indicating how much longer the download will take to complete. When the app finishes downloading, the View button changes to an Open button, and tapping the banner will open the app while preserving the user’s context from your website.

Smart App Banners automatically determine whether the app is supported on the user’s device. If the device loading the banner does not support your app, or if your app is not available in the user’s location, the banner will not display.

To add a Smart App Banner to your website, include the following meta tag in the head of each page where you’d like the banner to appear:

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Note: You cannot display Smart App Banners inside of a frame.

Source: Apple Developer Site

For example, please open this link in your iPhone Safari.

I have added the meta like this

<meta name="apple-itunes-app" content="app-id=313192737">