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) {
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent