Getting started with Glam App iOS Template and Parse

Introduction

Glam eCommerce iOS Template for Swift is one of the awesome, easy to use templates that can be used to create your own shopping application. The template contains most of screens needed to create your application, starting from the splash and login screen to the checkout screen. In this tutorial, we are not going to explain the template or how it is built. It is a UI template built in Swift, which requires a backend API added (unless you are using something like Snapp Mobile instead).  We are going to explain and show you how to use it to create your shopping application and how this template is very easy to use and portable. Before getting started, the template and tutorial are using Swift as a programming language, so I assume that the reader has experience and familiar with Swift.

Getting Started

To get started in using glam tutorial, we are going to use Parse as our backend to handle login/signup and all API’s needed.  Parse offers a lot of features as a backend to your app and in same time its free. Open Parse and create an account if you don’t have one. Go to your applications and create new app and name it GLAM or whatever you need. Now open the quick start guide and follow the steps to configure your app to add Parse framework and all dependencies it needs.

Login and Signup

Lets first work in login and signup screens and link it with Parse backend. In SplashViewController in storyboard, you will find that the button SignIn is linked to action called loginSucessful, remove it and let it linked to push the SignUpViewController. Check the image below:
Glam iOS Tutorial Screen 1
After that change the identifier of the two segues, the first one make it “signUp“ and the second to “signIn“. We do this because the SignUpViewController will work as sign in or sign up based on the clicked button. Now lets open SignUpViewController and add variable indicate if this view controller works as Sign In or Sign Up:

var isSignUpMode = false

Now we want to set this variable, so lets back to SplashViewController and override the prepareForSegue method to update the SignUpViewController instance before opening:

override func prepareForSegue(segue: UIStoryboardSegue!, sender: AnyObject!)
{
if let signUpViewController = segue.destinationViewController as?
SignUpViewController
{
signUpViewController.isSignUpMode = segue.identifier == "signUp"
}
}

In SignUpViewController, the sign in button title should be changed to Sign up if we are in signUp mode. To do this, go to storyboard and update the sign in button. Remove its background image and use background color with title, and then this title will be updated programmatically. Then take an outlet to this button in SignUpViewController:

 

Glam iOS Tutorial Screen 2

 

Then update its action to a new method called didClickOnSignInButton to handle the logic of sign in and sign up:

@IBAction func didClickOnSignInButton(sender: AnyObject) {

if isSignUpMode{
doSignUp()
}
else{
doLogin()
}
}
Lets now start implementing the logic of doLogin method:

func doLogin(){

PFUser.logInWithUsernameInBackground(self.txtUsername.text,
password:self.txtPassword.text) {
(user: PFUser?, error: NSError?) -> Void in
if user != nil {
// Do stuff after successful login.
self.loginSuccessful()
} else {

if let loginError = error{
self.showAlert(msg: loginError.localizedDescription)
}

}
}
}

Now we used Parse for login, it has a class PFUser that is responsible for all operations authentication and login. You will find all these users in your app in parse account, there is table User contains all user info. If login success, we will use the template method loginSuccessful to open home screen.

Now lets implement the signup logic:

func doSignUp(){
let username = txtUsername.text
let pass = txtPassword.text
if username.length != 0 && pass.length != 0{

var user = PFUser()
user.username = username
user.password = pass
user.email = username

user.signUpInBackgroundWithBlock {
(succeeded: Bool, error: NSError?) -> Void in
if let error = error {
let errorString = error.userInfo?[“error”] as? String

self.showAlert(msg: errorString!)
} else {
// Hooray! Let them use the app now.
self.loginSuccessful()
}
}
}
}

We created instance of class PFUser and set the username, email, and password. Then we called the signup method to signup the user. This method will return error for invalid email or duplicate ones. If the signup goes successfully, we call the loginSuccessful method to open the Home screen. So now we have implemented the sign in/up functionalities.

Sign in With Facebook

Signing in with social networks became very common in most of apps to simplify login/signup in apps without needing to provide information and specific credentials for each app. The most commonly one used in most of apps is Login with Facebook. So to make life easier to our users, we will provide this functionality to users who prefer this method. Some other users don’t like signing with social network and that’s why we have created sign in/up with email in previous sections.

Getting started with Facebook

Glam template provides you already with Login with Facebook button in SignUpViewController class. Now the button is connected to the action loginSuccessful, remove this action and lets connect it to a new action called didClickOnFacebookButton, check the following screenshot:

 

Glam iOS Tutorial Screen 3

 

Now lets implement the Facebook login using Parse. Parse provides an easy way to integrate Facebook SDK with its SDK.  The authenticated Facebook users will be associated with PFUser class. Before starting, lets setup a Facebook app first at Facebook developers website. Click on My Apps -> Add new application -> iOS. Write the name of app and then follow the instructions to completely configure Facebook SDK in our Glam application. After configuring your app to use Facebook SDK, add ParseFacebookUtilsV4.framework to your Xcode project, by dragging it into your project folder target. Now open Glam-Bridging-Header.h file and add the following import statements:

#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <ParseFacebookUtilsV4/PFFacebookUtils.h>

Then open AppDelegate.swift file and add the following line at the end of method didFinishLaunchingWithOptions to initialize Facebook.

PFFacebookUtils.initializeFacebookWithApplicationLaunchOptions(launchOptions)

Then add the following two methods at the end of the file:

func application(application: UIApplication, openURL url: NSURL,
sourceApplication: String?, annotation: AnyObject?) -> Bool
{

return FBSDKApplicationDelegate.sharedInstance().application(application,
openURL: url, sourceApplication: sourceApplication, annotation: annotation)
}

func applicationDidBecomeActive(application: UIApplication) {
FBSDKAppEvents.activateApp()
}

These methods are used as handlers to app events. PFFacebookUtils provides a way to allow your users to sign in/up through their Facebook accounts. Now you are totally configured your app to use login with Facebook. Lets go back to didClickOnFacebookButton method to add the logic of Facebook login. Add the following code in the method to fire the login:

let permissions = ["public_profile"]
PFFacebookUtils.logInInBackgroundWithReadPermissions(permissions) {
(user: PFUser?, error: NSError?) -> Void in
if let user = user {
if user.isNew {
println("User signed up and logged in through Facebook!")
self.loginSuccessful()
} else {
println("User logged in through Facebook!")
self.loginSuccessful()
}
} else {
println("Uh oh. The user cancelled the Facebook login.")
}
}

As we see in the previous piece of code, we called logInInBackgroundWithReadPermissions method to perform FB login with permissions. You can read more about permissions needed from here. The app will be switched to Facebook app installed in device or to Facebook page in Safari to authenticate Facebook user and permit the app to user his account. After all these steps, your app will be opened again and closure (callback) above will be called given the PFUser and Error. If everything worked fine, you will have a PFUser object and the error will be nil. If any error happened, the PFUser object will be nil. The condition user.isNew is used to check if this is the first time to this user to login with this FB account. Now you call self.loginSuccessful() when the login goes fine.

Please feel free to leave comments below.

BY : Hossam Ghareeb | CATEGORY : Tutorial |CATEGORY SLUG: tutorial | Date : 17 June, 2015 | Tags : , , ,