Apple Pay integration with Stripe tutorial

Why Apple Pay?

  • It’s an easy, secure and private way to pay within the app
  • One touch payment
  • No need to re enter payment or contact information
  • Private – cause credit card number are not exposed to the merchant, instead you are sent the device number and unique token that is only valid for that particular purchase.

Why use Apple Pay as developer?

  • You don’t need to handle credit card number
  • Higher conversion rate and faster checkout

Apple Pay  VS  In-App Purchase

  • Apple Pay is used for physical good’s & services where as In-App purchase is for in app content/functionality only
  • Developer is responsible of processing payment in Apple Pay where as Apple is responsible for processing payments in In-App purchase.

Prerequisites

iOS device (iPhone 6 or 6+, iPad Air 2, or iPad mini 3) running iOS 8.1 or later

Quick overview of how it works

  • You create a Merchant ID and matching certificate in Developer Portal
  • Your ID and certificate are used to encrypt the payment data
  • Display Payment sheet to user
  • User uses Touch ID to authorize transaction
  • Your app receives the payment token
  • This token is encrypted using your Merchant ID and certificate so only your application can decrypt it
  • Send token for processing using one of payment platforms like Stripe, Braintree, Shopify etc.

Create new Xcode Project

Screen Shot 2016-03-14 at 6.07.39 PM.png

Select “Single View Application” Template

Setup your app for ApplePay

Once project is created, login into your  http://developer.apple.com account. Go to Member Center and click on Certificates, Identifiers & Profiles\Identifiers\App IDs. Click on the + button to create a new App ID

Screen Shot 2016-03-14 at 6.13.23 PM

 

Screen Shot 2016-03-14 at 6.13.31 PM.png

Make sure that you select Explicit App ID is selected, as wildcard App IDs aren’t able to make payments with Apple Pay. Finally, check the Apple Pay checkbox under App Services, click Continue and then click Register to complete the creation of your new App ID.

Creating Merchant ID

Next click on Merchant ID under Identifiers pane. Then click on + or Continue to create new merchant ID for your app.

Screen Shot 2016-03-14 at 6.14.53 PM.png

Now that we have both Merchant ID and App ID we can head back to the Xcode Project

Under your project Capabilities turn on the Apple Pay option and add in your MerchantID

Screen Shot 2016-03-22 at 3.54.56 PM.png

The three items in the Steps section should all have checkmarks next to them to indicate that you’ve satisfied all of the requirements for using Apply Pay in your app.

In Main.Storyboard we are going to create textfield name, email and donation amount. We are also going to create a “Donate Again” button and Thank you message label, we are going to set there visibility hidden for now.

Screen Shot 2016-03-22 at 4.02.08 PM.pngScreen Shot 2016-03-22 at 4.02.30 PM.png

We are now going to create attached properties with these IBOutlets.We are also going to create UIButton property “payButton”which will be our ApplePay button later on. So our ViewController.h file now looks like this.

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UITextField *userName;
@property (weak, nonatomic) IBOutlet UITextField *userEmail;
@property (weak, nonatomic) IBOutlet UITextField *donationAmount;
@property (weak, nonatomic) IBOutlet UILabel *thankYouMessage;
@property (weak, nonatomic) IBOutlet UIButton *donateAgainButton;
- (IBAction)donateAgainPressed:(id)sender;
@property (weak, nonatomic)  UIButton *payButton;
@end


The Apple Pay classes are part of PassKit, so you need that import to make things work.So lets add following right in our ViewController.h file.

@import PassKit;

Setting up Apple Pay button

Apple Pay is only available to a subset of iOS users. Before presenting the Apple Pay option to the current user, we are going to determine whether Apple Pay is available.

In ViewController.m file let put following

- (void)viewDidLoad {
 [super viewDidLoad];
 // Conditionally show Apple Pay button based on device availability
 if ([PKPaymentAuthorizationViewController canMakePaymentsUsingNetworks:@[PKPaymentNetworkVisa, PKPaymentNetworkMasterCard, PKPaymentNetworkAmex]]) {
 _payButton = [self applePayButton];
 
 //Set location of Apple Pay button
 _payButton.frame = CGRectMake(_donationAmount.frame.origin.x, _donationAmount.frame.origin.y + _donationAmount.frame.size.height + 22.0, _payButton.frame.size.width, _payButton.frame.size.height);
 [self.view addSubview:_payButton];
 }else{
 //Create alternate payment flow
 }
}
- (UIButton *)applePayButton {
 UIButton *button;
 if ([PKPaymentButton class]) { // Available in iOS 8.3+
 button = [PKPaymentButton buttonWithType:PKPaymentButtonTypePlain style:PKPaymentButtonStyleBlack];
 } else {
 // Create and return your own apple pay button
 }
 [button addTarget:self action:@selector(tappedApplePay) forControlEvents:UIControlEventTouchUpInside];
 return button;
}

In this example we are not handling older versions of iOS, but if your app targets older iOS versions  you will need to create your own button using Apple’s Human Interface Guidelines and assets.

If we run our App now we will see the ApplePay button appear on our screen, but it doesn’t do anything yet.

Simulator Screen Shot Mar 22, 2016, 4.42.51 PM

Now let’s make the Apple Pay button work.For that we are going to implement PKPaymentAuthorizationViewControllerDelegate. We implement this protocol to respond to user interaction with the view controller.

@interface ViewController : UIViewController<PKPaymentAuthorizationViewControllerDelegate>

Implementing Delegates to Handle Payment Requests

We are going to implements the two required methods of the delegate in ViewController.m file:

- (void)paymentAuthorizationViewController:(PKPaymentAuthorizationViewController *)controller didAuthorizePayment:(PKPayment *)payment completion:(void (^)(PKPaymentAuthorizationStatus))completion {
  //We are assuming right now that payment was successfull.
 completion(PKPaymentAuthorizationStatusSuccess);
}

- (void)paymentAuthorizationViewControllerDidFinish:(PKPaymentAuthorizationViewController *)controller {
 //we are going to make all fields blank after user is done paying or canceling payment
 _donationAmount.text = @"";
 _userEmail.text = @"";
 _userName.text = @"";
 
 [self dismissViewControllerAnimated:YES completion:nil];
}

Setting up PKPaymentRequest

PKPaymentRequest instance is responsible for displaying the Apple Pay payment sheet.We will fill in required PKPaymentRequest elements.

- (PKPaymentRequest *)paymentRequest:(NSString *)amount {
 PKPaymentRequest *paymentRequest = [[PKPaymentRequest alloc] init];
 paymentRequest.merchantIdentifier = @"merchant.com.xxxxxx";
 paymentRequest.supportedNetworks = @[PKPaymentNetworkAmex, PKPaymentNetworkVisa, PKPaymentNetworkMasterCard];
 paymentRequest.merchantCapabilities = PKMerchantCapability3DS;
 paymentRequest.countryCode = @"US";
 paymentRequest.currencyCode = @"USD";
 paymentRequest.paymentSummaryItems =
 @[
 [PKPaymentSummaryItem summaryItemWithLabel:@"Donation" amount:[NSDecimalNumber decimalNumberWithString:amount]],
 ];
 return paymentRequest;
}

Presenting Payment Sheet

When user taps on your Apple Pay button, we are going to present a PKPaymentAuthorizationViewController to initiate Apple Pay:

-(void)tappedApplePay{
 if ([self checkFormValid]){
 PKPaymentRequest *paymentRequest = [self paymentRequest:_donationAmount.text];
 PKPaymentAuthorizationViewController *vc = [[PKPaymentAuthorizationViewController alloc] initWithPaymentRequest:paymentRequest];
 vc.delegate = self;
 [self presentViewController:vc animated:YES completion:nil];
 }else{
 //Showing Alert to user if all values are not filled
 UIAlertController * alert = [UIAlertController alertControllerWithTitle:@"Please fill in all details" message:@"" preferredStyle:UIAlertControllerStyleAlert];
 
 UIAlertAction* ok = [UIAlertAction
 actionWithTitle:@"OK"
 style:UIAlertActionStyleDefault
 handler:^(UIAlertAction * action)
 {
 [alert dismissViewControllerAnimated:YES completion:nil];
 
 }];
 
 [alert addAction:ok];

 [self presentViewController:alert animated:YES completion:nil];
 }
}

-(BOOL)checkFormValid{
 BOOL valid = false;
 //We are doing some basic validation so we don't have amount blank while showing the payment sheet
 if ([_userName.text isEqualToString:@""] || [_userEmail.text isEqualToString:@""]|| [_donationAmount.text isEqualToString:@""]) {
 valid = false;
 }else{
 valid = true;
 }
 return valid;
}
Now lets run the app again and see the Apple Pay button in action. Once you fill in all the details and tap Apple Pay you should see the payment sheet with the option to pay with “Pay with Passcode”, if you are running this on iPhone you will see “Pay with TouchID” option.
Simulator Screen Shot Mar 28, 2016, 9.50.13 PM
Now only thing left to implement Stripe processing for Apple Pay.
Installing Stripe iOS SDK using CocoaPods
Let’s use CocoaPods to setup Stripe iOS library.  If you haven’t set up Cocoapods before, follow there installation instructions here. Then, add pod 'Stripe' to your Podfile, and run pod install. Close your project and use the .xcworkspace file to open your project in Xcode, instead of the .xcodeproj file, from here on out.
Screen Shot 2016-03-14 at 9.42.42 PM.png
Setting up Stripe for Apple Pay
Login/Register into your Stripe account and head to Apple Pay section of Account Setting.
Click on “Create New Certificate” and a .certSigningRequest file will automatically download.
Screen Shot 2016-03-14 at 10.27.01 PM.png
Now let’s head back to Apple Developer account. Click on Merchant ID under Identifiers pane and then click on Merchant ID we created for this app and hit edit.
Screen Shot 2016-03-14 at 10.29.23 PM.png
Upload the certificate downloaded from Stripe and hit continue.
Screen Shot 2016-03-14 at 10.29.45 PM.png
You’ll see a success page, with an option to download your certificate. Download it. Return to the Apple Pay section in Stripe dashboard and upload this .cer file to Stripe.
Screen Shot 2016-03-14 at 10.30.04 PM.png
Now our Stripe account is ready to work with Apple Pay.
Stripe API Keys
Get you test publishable API key from “API Keys” section of Account Setting. We will be setting it up in AppDelegate file, so it set for entire life cycle of the app.

Import Stripe in your AppDelegate.m file and setup publishable API key in method “didFinishLaunchingWithOptions”.

#import <Stripe/Stripe.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 [Stripe setDefaultPublishableKey:@"pk_test_key"];
 return YES;
}
Now lets add code to process the payment into Stripe Tokens. You can charge these tokens later in your server-side code.
In ViewController.m file lets import Stripe Libraries first.
#import <Stripe/Stripe.h>
Now in let change our PKPaymentAuthorizationViewControllerDelegate methods to handle stripe processing.
- (void)paymentAuthorizationViewController:(PKPaymentAuthorizationViewController *)controller didAuthorizePayment:(PKPayment *)payment completion:(void (^)(PKPaymentAuthorizationStatus))completion {
 
 [self handlePaymentAuthorizationWithPayment:payment completion:completion];
 
}

- (void)handlePaymentAuthorizationWithPayment:(PKPayment *)payment completion:(void (^)(PKPaymentAuthorizationStatus))completion {
 [[STPAPIClient sharedClient] createTokenWithPayment:payment completion:^(STPToken *token, NSError *error) {
 if (error) {
 completion(PKPaymentAuthorizationStatusFailure);
 return;
 }
 [self createBackendChargeWithToken:token completion:completion];
 }];
}

- (void)createBackendChargeWithToken:(STPToken *)token completion:(void (^)(PKPaymentAuthorizationStatus))completion {
 //We are printing Stripe token here, you can charge the Credit Card using this token from your backend.
 NSLog(@"Stripe Token is %@",token);
 completion(PKPaymentAuthorizationStatusSuccess);
 //Displaying user Thank you message for payment.
 _thankYouMessage.hidden = false;
 _payButton.hidden = true;
 _donateAgainButton.hidden =false;
}
Last thing we are going to do is to implement “donateAgianPressed” method to allow user to pay again.
- (IBAction)donateAgainPressed:(id)sender {
 _payButton.hidden =false;
 _donateAgainButton.hidden= true;
 _thankYouMessage.hidden = true;
}
Lets run our app and see Apple pay in action
Simulator Screen Shot Mar 29, 2016, 3.29.50 PM
Simulator Screen Shot Mar 29, 2016, 3.29.51 PM
Simulator Screen Shot Mar 29, 2016, 3.29.55 PM
Here is the full source code for this tutorial.

Integrating Stripe in Swift with custom view

In this tutorial I am gonna integrate with Stripe without using STPView.

1) Start a new project

new-proj new-proj2

Make sure you select Swift as Language.

2) Add Stripe Framework to your Project

Follow the instructions provided by stripe to add framework to your project using Cocoapods.

If you decided not to use pods follow these instructions

Clone the iOS library repository directly:


git clone https://github.com/stripe/stripe-ios.git
  • In the menubar, click on ‘File’ then ‘Add files to “Project”…’.
  • Select the ‘Stripe’ directory in the downloaded repository.
  • Make sure ‘Copy items into destination group’s folder (if needed)’ is checked.
  • Click ‘Add’.
  • In your project settings, go to the “Build Phases” tab, and make sure Foundation.framework, Security.framework, and PassKit.framework are included in the “Link Binary With Libraries” section. If you’re targeting versions of iOS before iOS8, make sure PassKit.framework is listed as “Optional.”

copy-stripeadd-framework  setpasskit

 

Since Stripe framework is written in Objective-c we need to add Bridging-Header file to import files into project.

Create new file by selecting source as header file.header

 

Name the file YourProject-Bridging-Header, once file is created delete everything in that file and replace it with following code.


#import "Stripe.h"
@import Foundation;

 

After that switch to your project Build Settings and find Swift Compiler – Code Generation, and next to Objective-C Bridging Header add the path to your bridging header file, from the project’s root folder. So it will be YourProject/YourProject-Bridging-Header.h
brheader

 

3) Setup Stripe Account 

If you already don’t have a stripe account then create one at stripe.com, and get your publishable API key.

4) Create your credit card view

Build this using Interface builder.

creditcardview

 

Add following outlets in your ViewController file and hook it up with the view. Also hookup getStripeToken function with payButton.


    @IBOutlet var email: UITextField!
    @IBOutlet var cardNum: UITextField!
    @IBOutlet var exp: UITextField!
    @IBOutlet var cvc: UITextField!
    @IBOutlet var payButton: UIButton!
    
    @IBAction func getStripeToken(sender: AnyObject){

    }

Now let goto AppDelegate.swift file and add following lines and update application didFinishLaunchingWithOptions function



    
    let StripePublishableKey = "pk_test_your_key"


    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
            Stripe.setDefaultPublishableKey(StripePublishableKey)

        return true
    }

5) Get token from stripe

Lets update getStripeToken method to send data to stripe


@IBAction func getStripeToken(sender: AnyObject){
        let creditCard = STPCard() //creating a stripe card object
        creditCard.number = cardNum.text
        creditCard.cvc = cvc.text
        
        //extracting month and year values from expiry date 
        if (!exp.text.isEmpty){
            let expArr = exp.text.componentsSeparatedByString("/")
            if (expArr.count > 1)
            {
                var expMonth: NSNumber = expArr[0].toInt()!
                var expYear: NSNumber = expArr[1].toInt()!
                
                creditCard.expMonth = expMonth.unsignedLongValue 
                creditCard.expYear = expYear.unsignedLongValue
            }
        }
        
        var error: NSError?
        if (creditCard.validateCardReturningError(&error)){
            var stripeError: NSError!
            Stripe.createTokenWithCard(creditCard, completion: { (token, stripeError) -> Void in
                if (stripeError != nil){
                    println("there is error");
                }
                else{
                    self.cardNum.text = ""
                    self.exp.text = ""
                    self.cvc.text = ""
                    self.email.text = ""
                    
                     //shows your stripe token 
                    var alert = UIAlertController(title: "Your stripe token is: " + token.tokenId, message: "", preferredStyle: UIAlertControllerStyle.Alert)
                    var defaultAction = UIAlertAction(title: "OK", style: .Default, handler: nil)
                    alert.addAction(defaultAction)
                    self.presentViewController(alert, animated: true, completion: nil)
                }
            })
        }else{
           //shows alert if information is not correct
            var alert = UIAlertController(title: "Please enter valid credit card details", message: "", preferredStyle: UIAlertControllerStyle.Alert)
            var defaultAction = UIAlertAction(title: "OK", style: .Default, handler: nil)
            alert.addAction(defaultAction)
            self.presentViewController(alert, animated: true, completion: nil)
            
        }

        
    }

iOS Simulator Screen Shot Jan 3, 2015, 11.19.26 PM

iOS Simulator Screen Shot Jan 3, 2015, 11.19.41 PM

So now you have your stripe token, you can send it some backend to process the payment.

You can download this project from github

Simple Parse Tutorial with Sprite Kit game

In this tutorial we are going to add scoring logic to Sprite Kit game we build in previous tutorial and save the score on Parse. Once the score is saved on Parse we are going to fetch the highest score for the user and display it.

Adding Scoring Logic to game

We are going to add a variable ‘player_score’ to keep track of user’s current score in MyScene.m


NSInteger player_score;

Our scoring logic is fairly simple, we give user a point on every missile appearing on the screen. You can pick any logic you like to calculate score for your game.


-(id)initWithSize:(CGSize)size {
    if (self = [super initWithSize:size]) {
        self.backgroundColor = [SKColor whiteColor];
        [self initalizingScrollingBackground];
        [self addShip];

        //Making self delegate of physics World
        self.physicsWorld.gravity = CGVectorMake(0,0);
        self.physicsWorld.contactDelegate = self;
        player_score = 0; //initializing score as zero
    }

    return self;
}

-(void)addMissile
{
    //initalizing spaceship node
    SKSpriteNode *missile;
    missile = [SKSpriteNode spriteNodeWithImageNamed:@"red-missile.png"];
    [missile setScale:0.15];

    //Adding SpriteKit physicsBody for collision detection
    missile.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:missile.size];
    missile.physicsBody.categoryBitMask = obstacleCategory;
    missile.physicsBody.dynamic = YES;
    missile.physicsBody.contactTestBitMask = shipCategory;
    missile.physicsBody.collisionBitMask = 0;
    missile.physicsBody.usesPreciseCollisionDetection = YES;
    missile.name = @"missile";

    //selecting random y position for missile
    int r = arc4random() % 300;
    missile.position = CGPointMake(self.frame.size.width + 20,r);

    player_score = player_score + 1; //adding to score when ever new missile is created
    [self addChild:missile];

}

We have to update our initWithSize and addMissile methods to incorporate scoring logic.

Now we want to display score at the end of game screen. To do that we going to modify our GameOverScene.m initWithSize method and add declaration in GameOverScene.h

GameOverScene.h


#import <SpriteKit/SpriteKit.h>

@interface GameOverScene : SKScene

-(id)initWithSize:(CGSize)size score: (NSInteger)player_score;

@end

GameOverScene.m



#import "GameOverScene.h"
#import "MyScene.h"
#import <Parse/Parse.h>

@implementation GameOverScene
-(id)initWithSize:(CGSize)size score: (NSInteger)player_score{ //updated the existing method
    if (self = [super initWithSize:size]) {

        // 1
        self.backgroundColor = [SKColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];

        // 2
        NSString * message;
        message = @"Game Over";
        // 3
        SKLabelNode *label = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];
        label.text = message;
        label.fontSize = 40;
        label.fontColor = [SKColor blackColor];
        label.position = CGPointMake(self.size.width/2, self.size.height/2);
        [self addChild:label];

        NSString * retrymessage;
        retrymessage = @"Replay Game";
        SKLabelNode *retryButton = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];
        retryButton.text = retrymessage;
        retryButton.fontColor = [SKColor blackColor];
        retryButton.position = CGPointMake(self.size.width/2, 50);
        retryButton.name = @"retry";
        [retryButton setScale:.5];

        [self addChild:retryButton];

        NSString * playerscoremsg = [NSString stringWithFormat:@"Player Score: %ld",(long)player_score];

        SKLabelNode *playerscore = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];
        playerscore.text = playerscoremsg;
        playerscore.fontColor = [SKColor blackColor];
        playerscore.position = CGPointMake(self.size.width/2, 250);
        playerscore.name = @"Player Score";
        [playerscore setScale:.5];

        [self addChild:playerscore];        
    }
    return self;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint location = [touch locationInNode:self];
    SKNode *node = [self nodeAtPoint:location];

    if ([node.name isEqualToString:@"retry"]) {
        SKTransition *reveal = [SKTransition flipHorizontalWithDuration:0.5];

        MyScene * scene = [MyScene sceneWithSize:self.view.bounds.size];
        scene.scaleMode = SKSceneScaleModeAspectFill;
        [self.view presentScene:scene transition: reveal];

    }

}
@end

In GameOverScene.m we have added another label which is displaying players score. Before we try out our scoring logic we need to make one more change in MyScene.m


- (void)didBeginContact:(SKPhysicsContact *)contact
{
    SKPhysicsBody *firstBody, *secondBody;
    if (contact.bodyA.categoryBitMask < contact.bodyB.categoryBitMask)
    {
        firstBody = contact.bodyA;
        secondBody = contact.bodyB;
    }
    else
    {
        firstBody = contact.bodyB;
        secondBody = contact.bodyA;
    }

    if ((firstBody.categoryBitMask & shipCategory) != 0 &&
        (secondBody.categoryBitMask & obstacleCategory) != 0)
    {
        [ship removeFromParent];
        SKTransition *reveal = [SKTransition flipHorizontalWithDuration:0.5];
        SKScene * gameOverScene = [[GameOverScene alloc] initWithSize:self.size score:player_score]; //updated this method so we can send players score to game over scene.
        [self.view presentScene:gameOverScene transition: reveal];

    }
}

Now we are ready to run our app and test out scoring logic.

iOS Simulator Screen shot Jan 13, 2014 11.39.01 PM

Saving Score on Parse

Download Parse SDK and follow the steps given in this guide to add Parse Framework to your app.

Once you have added Parse framework to your app, create a account on Parse.

Login to you account to get started.

create_new_app

Once you have created a new app, navigate to setting tab and copy Application ID and ClientKey.app-keys-big

Once you have the key copied Navigate to Data Browser to start creating your database.

create-new-table

After adding the class we going to add columns to PlayerScore class.

create-custom

We are going to add first column user_id which takes string value. Add another column ‘score’ which take number value.

new-table

Your class should look like this at the end.

Alright now are ready to add Parse related code in our app.

Step 1) Adding Parse Keys to app.

In AppDelegate.m update method didFinishLaunchingWithOptions to following


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [Parse setApplicationId:@"Application Key" //replace these values with keys you got from Parse account
                  clientKey:@"Client Key"];
    
    return YES;
}

Step 2) Push user score to Parse at end of the game.

Before we push user score to Parse we need a way to identify individual user, which we are going to save in “user_id” column in our Parse Class. We are going to use users “identifierForVendor” as unique identifier for now.

identifierForVendor:  The value of this property is the same for apps that come from the same vendor running on the same device. A different value is returned for apps on the same device that come from different vendors, and for apps on different devices regardless of vendor. You can read more about it here.

Note:  Every time you delete the app from your simulator and install it again you are going to get a different ID. So you will be considered as different user every time you delete the app and install it again.

We are going to update GameOverScene.m initialization method with the following code.



-(id)initWithSize:(CGSize)size score: (NSInteger)player_score{
    if (self = [super initWithSize:size]) {

        self.backgroundColor = [SKColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];

        NSString * message;
        message = @"Game Over";

        SKLabelNode *label = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];
        label.text = message;
        label.fontSize = 40;
        label.fontColor = [SKColor blackColor];
        label.position = CGPointMake(self.size.width/2, self.size.height/2);
        [self addChild:label];

        NSString * retrymessage;
        retrymessage = @"Replay Game";
        SKLabelNode *retryButton = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];
        retryButton.text = retrymessage;
        retryButton.fontColor = [SKColor blackColor];
        retryButton.position = CGPointMake(self.size.width/2, 50);
        retryButton.name = @"retry";
        [retryButton setScale:.5];

        [self addChild:retryButton];

        NSString * playerscoremsg = [NSString stringWithFormat:@"Player Score: %ld",(long)player_score];

        SKLabelNode *playerscore = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];
        playerscore.text = playerscoremsg;
        playerscore.fontColor = [SKColor blackColor];
        playerscore.position = CGPointMake(self.size.width/2, 250);
        playerscore.name = @"Player Score";
        [playerscore setScale:.5];

        [self addChild:playerscore];

        UIDevice * currentDevice = [UIDevice currentDevice];
        NSString *deviceIDString = [currentDevice.identifierForVendor UUIDString]; //getting unique id for the user

        NSNumber *playerScoreNum = [NSNumber numberWithInt:player_score]; //converting score into NSNumber format in which Parse expect the score

       PFObject *scoreObject = [PFObject objectWithClassName:@"PlayerScore"];
        [scoreObject setObject:deviceIDString forKey:@"user_id"]; //user's unique id

        [scoreObject setObject:playerScoreNum forKey:@"score"]; //user's score 

        [scoreObject saveInBackground]; //saving in background, so our application is not halted while saving the score.

    }
    return self;
}

If you run the code now, you will at the end of the game your score is getting pushed to Parse.

Data Browser   Parse

Step 3)  Fetch score from Parse and display the highest score so far

We are going to fetch all previous scores of current user and sort them descending order to get the highest score on top. We are going to add the following lines to GameOverScene.m initialization method.


-(id)initWithSize:(CGSize)size score: (NSInteger)player_score{
    if (self = [super initWithSize:size]) {

        self.backgroundColor = [SKColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];

        NSString * message;
        message = @"Game Over";

        SKLabelNode *label = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];
        label.text = message;
        label.fontSize = 40;
        label.fontColor = [SKColor blackColor];
        label.position = CGPointMake(self.size.width/2, self.size.height/2);
        [self addChild:label];

        NSString * retrymessage;
        retrymessage = @"Replay Game";
        SKLabelNode *retryButton = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];
        retryButton.text = retrymessage;
        retryButton.fontColor = [SKColor blackColor];
        retryButton.position = CGPointMake(self.size.width/2, 50);
        retryButton.name = @"retry";
        [retryButton setScale:.5];

        [self addChild:retryButton];

        NSString * playerscoremsg = [NSString stringWithFormat:@"Player Score: %ld",(long)player_score];

        SKLabelNode *playerscore = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];
        playerscore.text = playerscoremsg;
        playerscore.fontColor = [SKColor blackColor];
        playerscore.position = CGPointMake(self.size.width/2, 250);
        playerscore.name = @"Player Score";
        [playerscore setScale:.5];

        [self addChild:playerscore];

        UIDevice * currentDevice = [UIDevice currentDevice];
        NSString *deviceIDString = [currentDevice.identifierForVendor UUIDString]; 

        NSNumber *playerScoreNum = [NSNumber numberWithInt:player_score]; 

        PFQuery *query = [PFQuery queryWithClassName:@"PlayerScore"]; //creating query for Parse
        [query whereKey:@"user_id" equalTo:deviceIDString];
        [query orderByDescending:@"score"]; //Sorting the score so we have highest score on the top

        [query findObjectsInBackgroundWithBlock:^(NSArray *scoreArray, NSError *error) {

            NSNumber* hightestScore = [scoreArray.firstObject objectForKey:@"score"]; //highest score is first object
            NSLog(@"highest score %@ devise %@",hightestScore, deviceIDString);

            if (hightestScore < playerScoreNum){
                hightestScore = playerScoreNum; //if highest score so far is smaller than current score, display current score
            }
            NSString * highscoremsg = [NSString stringWithFormat:@"Highest Score: %@",hightestScore]; 

            SKLabelNode *highscore = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"]; //Displaying highest score label
            highscore.text = highscoremsg;
            highscore.fontColor = [SKColor greenColor];
            highscore.position = CGPointMake(self.size.width/2, 200);
            [highscore setScale:.5];
            [self addChild:highscore];

        }];

       PFObject *scoreObject = [PFObject objectWithClassName:@"PlayerScore"];
        [scoreObject setObject:deviceIDString forKey:@"user_id"];

        [scoreObject setObject:playerScoreNum forKey:@"score"];

        [scoreObject saveInBackground];

    }
    return self;
}

We are querying for the highest score in the background so that it does not halt the flow of the app, and user is displayed other information without a delay. We only create the label for highest score once the data is fetched from Parse.

Now run the app and see your highest score.

iOS Simulator Screen shot Jan 20, 2014 1.55.36 PM

 

I hope this was helpful.  You can download the code for this tutorial here.

Getting gravatar images with Ruby on Rails

What Is Gravatar?

An “avatar” is an image that represents you online—a little picture that appears next to your name when you interact with websites.A Gravatar is a Globally Recognized Avatar. You upload it and create your profile just once, and then when you participate in any Gravatar-enabled site, your Gravatar image will automatically follow you there.

Understanding how to get images from Gravatar

When you sign up in gravatar, you need to register an unique e-mail. Gravatar uses that email address to generate an unique MD5.hexdigest key, and then, it links that key to your image file.

Let’s take a look at my gravatar  image url:

http://gravatar.com/avatar/1c7b91342323ab699f6668f3317ed1bb

Parameter after the avatar is the MD5.hexdigest key generated with your email, let’s try generate that in our application and check if it gives the same result:


require "digest/md5"
Digest::MD5.hexdigest('meghagulati30@gmail.com').to_s

Result is “1c7b91342323ab699f6668f3317ed1bb”

So now you can write your own tool to get the gravatar user image: just use the email to generate the key and append it to the url.

If you are looking for more options while fetching the image you can use gems like gravtastic which lets you get images of different sizes, avatar rating and different filetype.

Sitemap.xml on Heroku with Ruby on Rails

Steps to generate dynamic sitemap.xml for Ruby on Rails site hosted on Heroku.

1) Remove /public/sitemap.xml if it exists.

2) Add following to routes.rb


resources :sitemaps, :only => :show
get "sitemap" => "sitemaps#show"

3) Create sitemaps controller


 rails g controller sitemaps

4) Update SitemapsController with following code


class SitemapsController 
  def show
    @posts = Post.where(:active => true) #we are generating url's for posts
    respond_to do |format|
     format.xml
    end
  end
end

5) Create /app/views/sitemap/index.xml.builder with the following content.


base_url = "http://#{request.host_with_port}"
xml.instruct! :xml, :version=>'1.0'
xml.tag! 'urlset', 'xmlns' => 'http://www.sitemaps.org/schemas/sitemap/0.9' do
  xml.url{
      xml.loc("http://example.com")
      xml.changefreq("weekly")
      xml.priority(1.0)
  }
  xml.url{
      xml.loc("http://example.com/posts")
      xml.changefreq("daily")
      xml.priority(0.9)
  }
  @posts.each do |p|
    xml.url {
      xml.loc("http://example.com/#{p.id.to_s}")
      xml.changefreq("weekly")
      xml.priority(0.5)
    }
  end
end

5) Commit and upload to heroku.

Add autocomplete to Git commands in terminal

1. Download the completion script from Github

curl https://raw.github.com/git/git/master/contrib/completion/git-completion.bash -OL
2. Add the following to your ~/.profile or ~/.bash_profile

source ~/git-completion.bash
alias gco='git co'
alias gci='git ci'
alias grb='git rb'
3. Add the following to your ~/.gitconfig

source ~/git-completion.bash
[alias]
co = checkout
ci = commit
rb = rebase
Restart Terminal and you are all set!

Simple Sprite Kit game tutorial- Part2

In the first part of the series, we created the basics scrolling background and a flying spaceship.

iOS Simulator Screen shot Oct 28, 2013 10.51.25 PM

In this part we are going to:

  1. Adding Missile with which spaceship can collide with
  2. Show end of game screen when spaceship collides with missile and give replay option
We are gonna add method to display missile on the screen, add this method at the end on MyScene.m

-(void)addMissile
{
    //initalizing spaceship node
    SKSpriteNode *missile;
    missile = [SKSpriteNode spriteNodeWithImageNamed:@"red-missile.png"];
    [missile setScale:0.15];

    //Adding SpriteKit physicsBody for collision detection
    missile.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:missile.size];
    missile.physicsBody.categoryBitMask = obstacleCategory;
    missile.physicsBody.dynamic = YES;
    missile.physicsBody.contactTestBitMask = shipCategory;
    missile.physicsBody.collisionBitMask = 0;
    missile.physicsBody.usesPreciseCollisionDetection = YES;
    missile.name = @"missile";
    //selecting random y position for missile
    int r = arc4random() % 300;
    missile.position = CGPointMake(self.frame.size.width + 20,r);
    [self addChild:missile];
}
For explanation of each line, take a look at addShip method. Once you have added this method add [self addMissile] at the end of initWithSize method and run to code to see our missile is appearing on the screen.
iOS Simulator Screen shot Nov 13, 2013 2.28.34 PM
Now we want to move the missile on the screen, so our spaceship can dodge it.
Add another constant for saving missile’s velocity right after background velocity.We want the missile to move little bit faster than background.
static const float BG_VELOCITY = 100.0;
static const float OBJECT_VELOCITY = 160.0;

Now we are going to add method to move the missile, at the end on MyScene.m

- (void)moveObstacle
{
    NSArray *nodes = self.children;//1

    for(SKNode * node in nodes){
        if (![node.name  isEqual: @"bg"] && ![node.name  isEqual: @"ship"]) {
            SKSpriteNode *ob = (SKSpriteNode *) node;
            CGPoint obVelocity = CGPointMake(-OBJECT_VELOCITY, 0); //2
            CGPoint amtToMove = CGPointMultiplyScalar(obVelocity,_dt); //3

            ob.position = CGPointAdd(ob.position, amtToMove); //4
            if(ob.position.x < -100)
            {
                [ob removeFromParent]; //5
            }
        }
    }
}
Let’s go through the code line by line.
  1. We collect all child nodes of the scene.
  2. Set the velocity by which the node is going to move
  3. Set the amount by which node has to move
  4. Set new position of the node
  5. We remove any node which has scrolled off the screen.
We going to call this method in update method like we called moveBg method. So now our update method looks like

-(void)update:(CFTimeInterval)currentTime {

    if (_lastUpdateTime)
    {
        _dt = currentTime - _lastUpdateTime;
    }
    else
    {
        _dt = 0;
    }
    _lastUpdateTime = currentTime;

    [self moveBg];
    [self moveObstacle];
}
Now we want to add missiles randomly at different y axis, every one second.
We are going to add another property to manage when was last time a missile was added on the screen.
    NSTimeInterval _lastMissileAdded;
We are going to use our update method to keep track of lastMissileAdded time interval.
-(void)update:(CFTimeInterval)currentTime {

    if (_lastUpdateTime)
    {
        _dt = currentTime - _lastUpdateTime;
    }
    else
    {
        _dt = 0;
    }
    _lastUpdateTime = currentTime;

    if( currentTime - _lastMissileAdded > 1)
    {
        _lastMissileAdded = currentTime + 1;
            [self addMissile];
    }

    [self moveBg];
    [self moveObstacle];

}
Run the project and you should be seeing multiple missiles on the screen now.
iOS Simulator Screen shot Nov 13, 2013 4.35.14 PM
Now we need to end the game if spaceship collides with the missile. To do that we need to add these two methods at the end of  MyScene.m


- (void)didBeginContact:(SKPhysicsContact *)contact
{
    SKPhysicsBody *firstBody, *secondBody;
    if (contact.bodyA.categoryBitMask < contact.bodyB.categoryBitMask)
    {
        firstBody = contact.bodyA;
        secondBody = contact.bodyB;
    }
    else
    {
        firstBody = contact.bodyB;
        secondBody = contact.bodyA;
    }

    if ((firstBody.categoryBitMask & shipCategory) != 0 &&
        (secondBody.categoryBitMask & obstacleCategory) != 0)
    {
            [ship removeFromParent];
    }
}

Since we set the scene as the contactDelegate of the physics world earlier, this method will be called whenever two physics bodies collide

There are two parts to this method:

  1. This method passes you the two bodies that collide, but does not guarantee that they are passed in any particular order. So this bit of code just arranges them so they are sorted by their category bit masks so you can make some assumptions later.
  2. Finally, it checks to see if the two bodies that collide are the spaceship and missile, and if so calls the method you wrote earlier.
If you run the current code, you will see if the spaceship collides with missile it will disappear.
Now, let’s create a new scene and layer that will serve as your “End of game” indicator. Create a new file with the iOS\Cocoa Touch\Objective-C class template, name the class GameOverScene, make it a subclass of SKScene, and click Next and then Create.
Then replace GameOverLayer.m with the following code:

#import "GameOverScene.h"
#import "MyScene.h"

@implementation GameOverScene
-(id)initWithSize:(CGSize)size {
    if (self = [super initWithSize:size]) {

        // 1
        self.backgroundColor = [SKColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];

        // 2
        NSString * message;
        message = @"Game Over";
        // 3
        SKLabelNode *label = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];
        label.text = message;
        label.fontSize = 40;
        label.fontColor = [SKColor blackColor];
        label.position = CGPointMake(self.size.width/2, self.size.height/2);
        [self addChild:label];

        //4
        NSString * retrymessage;
        retrymessage = @"Replay Game";
        SKLabelNode *retryButton = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];
        retryButton.text = retrymessage;
        retryButton.fontColor = [SKColor blackColor];
        retryButton.position = CGPointMake(self.size.width/2, 50);
        retryButton.name = @"retry";
        [self addChild:retryButton];

    }
    return self;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject]; 
    CGPoint location = [touch locationInNode:self];
    SKNode *node = [self nodeAtPoint:location]; //1

    if ([node.name isEqualToString:@"retry"]) { //2

        //3
        SKTransition *reveal = [SKTransition flipHorizontalWithDuration:0.5];
        MyScene * scene = [MyScene sceneWithSize:self.view.bounds.size];
        scene.scaleMode = SKSceneScaleModeAspectFill;
        [self.view presentScene:scene transition: reveal];

    }
}
@end

There are four parts to initWithSize method:

  1. Sets the background color to white, same as you did for the main scene.
  2. Sets the message to “Game Over”.
  3. Displays the label with Sprite Kit, choosing font and size.
  4. Creating another Sprite Kit label to represent our “Retry” button.
To track when user hit the replay button, we need touchesBegan method. This method is called when user touches anywhere on the screen. Let’s break down this method
  1. We track the node present at the location where user touched the screen.
  2. If the node touched name is equal to “retry”, then it means user has hit the replay button
  3. We transition back to MyScene to restart the game. You can pick from a variety of different animated transitions for how you want the scenes to display – we choose a flip transition here that takes 0.5 seconds.Then you create the scene you want to display, and use thepresentScene:transition: method on the self.view property.
Just one more thing to do before our game is ready to play.
In MyScene.m after removing the spaceship after collision we need to transition to GameOverScene. So replace didBeginContact with following code.

- (void)didBeginContact:(SKPhysicsContact *)contact
{
    SKPhysicsBody *firstBody, *secondBody;
    if (contact.bodyA.categoryBitMask < contact.bodyB.categoryBitMask)
    {
        firstBody = contact.bodyA;
        secondBody = contact.bodyB;
    }
    else
    {
        firstBody = contact.bodyB;
        secondBody = contact.bodyA;
    }

    if ((firstBody.categoryBitMask & shipCategory) != 0 &&
        (secondBody.categoryBitMask & obstacleCategory) != 0)
    {
        [ship removeFromParent];
        SKTransition *reveal = [SKTransition flipHorizontalWithDuration:0.5];
        SKScene * gameOverScene = [[GameOverScene alloc] initWithSize:self.size];
        [self.view presentScene:gameOverScene transition: reveal];

    }
}

Run the game and you should see Game over screen if you collide with a missile.

iOS Simulator Screen shot Nov 13, 2013 9.22.06 PM

And that’s a wrap! Here is the full source code for this Sprite Kit tutorial.

I hope you enjoyed this tutorial and are inspired to make your own game.