iOS App Development iOS Swift Tutorial iOS9 SellAnything

SellAnything Part 1 : Creating a post and uploading image to Parse

In this month’s tutorial we will be learning how to build an mobile app similar to craiglist  but for mobile which will help you sell any stuff. The main concepts we will be learning in this app are

  • How to capture image/use image from a photo library of the stuff you want to sell
  • Uploading image to parse and creating a list of all items.
  • Using apple pay to buy the item.

To get started lets see how to create a post for selling the item. We will be using parse for storing all the posts and corresponding images. Create a new project and call it SellAnything.

On the main view controller on the storyboard drag 3 textfields for capturing the title, detailed description and the price of the item and an imageview for displaying the item which we want to sell. Create a new Class which subclasses the UIViewController and call it PhotoCaptureViewController. Once you align the textfield and the uiimageview , create IBOutlets for all of them also don’t forget to set auto layout constraints for all of elements. (If you are not sure what it means I suggest you take a look at  How to make an app link to get started with simple apps) .

We will be using the basic UIImagePickerViewController to take the picture of the item or to choose from the photolibrary. For the sake of simplicity we will only choose the image from the photo library because we don’t have the camera on the Simulator. If you want to see how we can take the picture take a look at this tutorial. Also at this point go to editor -> embed in -> Navigation Controller. After this drag 2 bar button items on the Nav bar and call it post and cancel.

To select an image from the Photo library or to capture an image our custom class needs to implement two different delegates namely UINavigationControllerDelegate and UIImagePickerControllerDelegate. In the viewDidLoad function we will set the delegate to self.  We will have a default image for the UIImageview and onTapping that image we will display the image picker. To do so let’s drag a UITapGestureRecognizer from the object library and drop it on the UIImageView.  Next create and IBAction for the gesture recognizer and called it tapped.

 

Screen Shot 2015-07-19 at 11.28.28 AM

Similarly CTRL+DRAG from the cancel and post button and create 2 IBAction called cancel and post respectively.  The next thing would be to save all the data which we have captured in the post creation phase and store it in parse. Take a look at this tutorial on how to integrate parse into your swift app tutorial.

Lets take a look at the post code and see whats going on. We get the current titleLabel, info and the price from the text field and using guard statement we get the dereferenced value for all of them.A guard statement is used to transfer program control out of a scope if one or more conditions aren’t met. Any constants or variables assigned a value from an optional binding declaration in a guard statement condition can be used for the rest of the guard statement’s enclosing scope. The else clause of a guard statement is required, and must either call a function marked with the noreturnattribute or transfer program control outside the guard statement’s enclosing scope using one of the following statements:

  • return

  • break

  • continue

  • throw

    @IBAction func post(sender: AnyObject) {

        guard let currTitle = self.titleLabel.text , info = self.infoLabel.text, price = Double(self.priceLabel.text!) , imageData = UIImageJPEGRepresentation(self.itemImageView.image!, 0.1) else {
            return
        }
        let pimageFile = PFFile(data: imageData)
        let timageFile = PFFile(data: imageData)
        let photo = PFObject(className: "Item")
        photo.setValue(currTitle, forKey: "title")
        photo.setValue(info, forKey: "info")
        photo.setValue(price, forKey: "price")
        photo.setObject(pimageFile, forKey: "itemImage")
        photo.setObject(timageFile, forKey: "thumbnailImage")
        photo.saveInBackgroundWithBlock { (success, error ) -> Void in
            print("Photo uploaded")
            /* This step will make more sense when you present the viewcontroller modally from the listview controller for displaying all the items */    
            self.dismissViewControllerAnimated(true , completion: nil)
        }

    }

We create the PFFile for the image that need to be stored and then set the key for itemImage and the thumbnailImage and store the photo item in the background. In the next tutorial we will see on how we can display all the items in our parse database.

About the author

Shrikar

Backend/Infrastructure Engineer by Day. iOS Developer for the rest of the time.

  • Trudy

    How do you take care resizing the images? Do you resize at the app side or service side?

  • ThankGod ForHis Promise

    Hello Engr. Shrikar,

    Thanks you so much for that wonderful tutorial, my question is how can I pick up a text files like .doc, .pdf etc. to the backend server with swift. Thanks.

/* ]]> */