Skip to content

kboy-silvergym/SnapKitSample-iOS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

snapkit-sample-ios

This is an unofficial demo app of the Snap Kit produced by SnapChat.

Installation

You can install SnapSDK via Cocoapods.

pod 'SnapSDK', :subspecs => ['SCSDKLoginKit', 'SCSDKCreativeKit', 'SCSDKBitmojiKit']

Login Kit

First of all, you should check this document. https://docs.snapchat.com/docs/login-kit/

Following this document, you can implement SnapChat login.

You can fetch displayName & avatar (bitmoji avatar) so far.

1.Call Login Method when the button tapped

@IBAction func loginButtonTapped(_ sender: Any) {
    SCSDKLoginClient.login(from: self, completion: { success, error in
        
        if let error = error {
            print(error.localizedDescription)
            return
        }
        
        if success {
            self.fetchSnapUserInfo()
        }
    })
}

2.After login, fetch user datas

One of the interesting things is that Snap Kit is using the GraphQL not the RestAPI.

If you don't know the GraphQL, you should check this https://graphql.org/

And this codes, I made UserEntity which is inheriting Decodable because using it is easier to parse JSON I think. But of cource this is not the only way to parse JSON, choose the way what you like.

private func fetchSnapUserInfo(){
    let graphQLQuery = "{me{displayName, bitmoji{avatar}}}"
    
    SCSDKLoginClient
        .fetchUserData(
            withQuery: graphQLQuery,
            variables: nil,
            success: { userInfo in
                
                if let userInfo = userInfo,
                    let data = try? JSONSerialization.data(withJSONObject: userInfo, options: .prettyPrinted),
                    let userEntity = try? JSONDecoder().decode(UserEntity.self, from: data) {
                    
                    DispatchQueue.main.async {
                        self.goToLoginConfirm(userEntity)
                    }
                }
        }) { (error, isUserLoggedOut) in
            print(error?.localizedDescription ?? "")
    }
}

3.Some Adveices

There're some difficult points, so I note about that here.

Equalize Info.plist's SCSDKRedirectUrl with Redirect URLs on SnapChat Developer Portal (https://kit.snapchat.com/portal/)

If you didn't equalize that, the SnapChat App would show the error.

Don't use - in your app's url scheme.

If you use - like snap-client, the SnapChat App would show the error. I don't know the reason, but it seems to be the rule of SnapChat Developer Potal.

Creative Kit

Following this document https://docs.snapchat.com/docs/creative-kit/

This is so easy to code.

You can share a photo or video attaching a sticker, url, and caption.

Sample Code

import SCSDKCreativeKit

let snapshot = sceneView.snapshot() // Any image is OK. In this codes, SceneView's snapshot is passed.
let photo = SCSDKSnapPhoto(image: snapshot)
let snap = SCSDKPhotoSnapContent(snapPhoto: photo)

// Sticker
let sticker = SCSDKSnapSticker(stickerImage: #imageLiteral(resourceName: "snap-ghost"))
snap.sticker = sticker
        
// Caption
snap.caption = "Snap on Snapchat!"
        
// URL
snap.attachmentUrl = "https://www.snapchat.com"
        
let api = SCSDKSnapAPI(content: snap)
api.startSnapping { error in
            
    if let error = error {
        print(error.localizedDescription)
    } else {
        // success
    
    }
}

If you use SCSDKVideoSnapContent, you can share the videos.

Bitmoji Kit

Fetch avatar image

You can fetch your avatar image by coding like below codes.

import SCSDKBitmojiKit

// fetch your avatar image.
SCSDKBitmojiClient.fetchAvatarURL { (avatarURL: String?, error: Error?) in
    DispatchQueue.main.async {
        if let avatarURL = avatarURL {
            self.iconView.load(from: avatarURL)
        }
    }
}

Show bitmoji pickerview

The SCSDKBitmojiStickerPickerViewController is prepared in SCSDKBitmojiKit.

You can add the picker view as child viewController. It's very easy.

@IBAction func bitmojiButtonTapped(_ sender: Any) {
    // Make bitmoji background view
    let viewHeight: CGFloat = 300
    let screen: CGRect = UIScreen.main.bounds
    let backgroundView = UIView(
        frame: CGRect(
            x: 0,
            y: screen.height - viewHeight,
            width: screen.width,
            height: viewHeight
        )
    )
    view.addSubview(backgroundView)
    bitmojiSelectionView = backgroundView
    
    // add child ViewController
    let stickerPickerVC = SCSDKBitmojiStickerPickerViewController()
    stickerPickerVC.delegate = self
    addChildViewController(stickerPickerVC)
    backgroundView.addSubview(stickerPickerVC.view)
    stickerPickerVC.didMove(toParentViewController: self)
}

Inherit SCSDKBitmojiStickerPickerViewControllerDelegate

If you Inherit SCSDKBitmojiStickerPickerViewControllerDelegate, you can track events when the piker is selected, and the serach field is focused.

In this demo codes, it makes the AR stamps by the URL of bitmoji and place to the sceneView.

extension CameraViewController: SCSDKBitmojiStickerPickerViewControllerDelegate {
    
    func bitmojiStickerPickerViewController(_ stickerPickerViewController: SCSDKBitmojiStickerPickerViewController, didSelectBitmojiWithURL bitmojiURL: String) {
        
        bitmojiSelectionView?.removeFromSuperview()
        
        if let image = UIImage.load(from: bitmojiURL) {
            DispatchQueue.main.async {
                self.setImageToScene(image: image)
            }
        }
    }
    
    func bitmojiStickerPickerViewController(_ stickerPickerViewController: SCSDKBitmojiStickerPickerViewController, searchFieldFocusDidChangeWithFocus hasFocus: Bool) {
        
    }
}

Reference

About

The unofficial demo app of the Snapchat's Snap Kit

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published