DEV Community: CarolineBaillie

Xcode Collection of Useful Functions and Tips

CarolineBaillie — Thu, 22 Apr 2021 14:48:49 +0000

Scroll View
Keyboard Dismiss
Backpropagation Function
Loading Icon
Light/Dark Mode

Extras

When writing a tutorial for my latest iOS app, SnapShot, there were bits of code that appeared often. I thought these steps were generally useful, so I created this collection of them to post separately.

Scroll View

Below are my steps to incorporating a scroll view, but for more visual instruction check out this video.
     1. Add a scroll view to the chosen controller
     2. Drag it so it fills up the whole screen
     3. Hover over the scrollView -> click control -> drag to View -> select Leading/Top/Trailing/Bottom Space to Safe Area
     4. Add a view on top of the scrollView
     5. Repeat steps 2 & 3 but with the view and scroll view, also clicking Equal Widths/Heights
     6. Click on the equal heights constraints and in the Attributes Inspector, set the priority to 250
     7. Then click the controller -> Size Inspector -> Simulated Size -> Freeform and set the height to a suitable value (for signup: 950)
     8. Now add all the elements and make sure to add constraints to everything (otherwise the scrollView won’t work)
     9. Finally, click scrollView -> Attributes Inspector -> Scroll View -> Keyboard -> Dismiss Interactively

Keyboard Dismiss

You can override touchesBegan to dismiss the keyboard:

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        // option 1
        self.view.endEditing(true)
        // option2
        usernameTextField.resignFirstResponder()
        passwordTextField.resignFirstResponder()
}

Backpropagation Function

1. In viewDidLoad of the controller, you want the function to run in:

NotificationCenter.default.addObserver(self, selector: #selector(reloadContent), name: Notification.Name("reloadContent"), object: nil)

2. In the same file, add the function:

@objc func reloadContent (notification: NSNotification){
        // stuff you want to run in func - e.g...
        self.memTitle.text = page.title
        memTitle.adjustsFontSizeToFitWidth = true
        self.memImage.image = page.Image
        self.memDesc.text = page.desc
        self.memCategory.text = page.category
        self.memLocation.text = page.location
        self.memTags.text = page.tags
        self.memDate.text = page.date
    }

3. In the controller you want to call the function from, write:

NotificationCenter.default.post(name: Notification.Name("reloadContent"), object: nil)

Loading Icon

1. In the Classes folder, create a new file called AIUtil.swift
2. Add the following code:

@objc func reloadContent (notification: NSNotification) {
        self.memTitle.text = page.title
        memTitle.adjustsFontSizeToFitWidth = true
        self.memImage.image = page.Image
        self.memDesc.text = page.desc
        self.memCategory.text = page.category
        self.memLocation.text = page.location
        self.memTags.text = page.tags
        self.memDate.text = page.date
    }

3. When you want to show the spinner: self.showSpinner()
4. When you want to remove the spinner: self.removeSpinner()

Light/Dark mode

If your computer’s simulation shows the default color as white (lightmode) but your phone is in darkmode, the colors will be black when you run the app on your phone. This is an issue I ran into, but luckily there is an easy solution:
1. Go to SceneDelegate.swift
2. In the first function (scene), add the following code:

if #available(iOS 13.0, *) {
        window?.overrideUserInterfaceStyle = .light // for light mode
        window?.overrideUserInterfaceStyle = .dark // for dark mode
}

Resources

SnapShot Part 1: https://blog.sashido.io/snapshot-how-to-create-a-digital-scrapbook-in-ios-part-1/
SnapShot Part 2: https://blog.sashido.io/snapshot-how-to-create-a-digital-scrapbook-in-ios-part-2/
SashiDo: https://www.sashido.io/en/
Parse Documentation: https://docs.parseplatform.org/ios/guide/
Parse Video Playlist: https://www.youtube.com/playlist?list=PLMRqhzcHGw1ZFjFyHGJTTPuvcLbwVCuG4
GitHub: https://github.com/CarolineBaillie/snapShot

SnapShot: How to Create a Digital Scrapbook in iOS - Part 2

CarolineBaillie — Thu, 22 Apr 2021 14:48:05 +0000

Welcome to Part 2 of SnapShot: A Digital iOS Scrapbook! If you haven’t seen Part 1, I recommend you check it out as it takes care of all of the setup and registration.

Just to refresh your mind, SnapShot is an iOS app made using Xcode and SashiDo. It is kind of like a digital scrapbook, but for more information, here is the demo:

Again, I recommend looking at SnapShot Part 1, or even my first tutorial Fish Classification iOS App with SashiDo and Teachable Machine). Additionally, all my code is available on my GitHub.

Map
- Setup
- Memory Class
- Request Memories
- Annotations
- Memory Info Page
- Add Annotation
- New Memory
Delete
Edit
Storing
Closing Remarks
Resources

Map

Adding the map is probably the biggest step in this project. Below I have outlined all the steps I took to create and connect everything. However, if you want more visual instructions on how to create and display the map, I recommend checking out this video playlist!

Setup

     1. Go to the storyboard map controller (I created mine on the default ViewController)
     2. Add MKMapView controller
     3. Drag the sides so the MKMapView takes up the whole screen
     4. On the top bar, click Editor -> Resolve Auto Layout Issues -> Add Missing Constraints (selected views)

     5. Open dual editors (storyboard and ViewController.swift)
         a. Control drag from MKMapView into the ViewController class
         b. Call the outlet mapView
     6. Select the MKMapView/mapView
     7. Control drag to ViewController and click delegate
     8. Make sure you have import MapKit and import CoreLocation in ViewController.swift
     9. Make sure ViewController.swift conforms to MKMapViewDelegate
We also have to set up a reload function that could be called from a different controller (used when memory is edited). The code is also given in the Extras Backpropagation Function Section, but basically there are only two sections of code for ViewController.swift:
     1. In viewDidLoad add this:

// setup for function that is called from newMemory
NotificationCenter.default.addObserver(self, selector: #selector(reload), name: Notification.Name("reload"), object: nil)

2. Add the following reload function inside the class:

// function to reload newMemories bc when dismissed adding controller doesn't show without
@objc func reload (notification: NSNotification){
    self.mapView.removeAnnotations(self.mapView.annotations)
    for m in sessionManager.shared.memories {
        // if there is a mapView (protection)
        if mapView != nil {
            // add that Memory
            mapView.addAnnotation(m)
        }
    }
}

Memory Class

1. Inside the Classes folder, create a new Cocoa Touch Class file
2. Make sure your options are filled in as follows:

3. Click next and create
4. Inside this file, create a class with all the elements of each memory:

import UIKit
import MapKit

class Memory: NSObject, MKAnnotation {
    var title: String?
    var coordinate: CLLocationCoordinate2D
    var desc: String
    var category: String?
    var tags: String?
    var location: String
    var date: String
    var Image: UIImage
    var objID: String

    init(title:String, Image:UIImage, coordinate:CLLocationCoordinate2D,desc:String,category:String,tags:String, location:String,date:String, objID:String){
        self.title = title
        self.Image = Image
        self.coordinate = coordinate
        self.desc = desc
        self.category = category
        self.tags = tags
        self.location = location
        self.date = date
        self.objID = objID
    }
}

Now you can create a variable of type Memory and add it to the annotation map. However, we want to use the information from the database to populate this annotation. Therefore we must create a function in sessionManager.

Request Memories

For our current task, we want a function that gets all the data from SashiDo:
1. Inside the sessionManager class, add var memories : [Memory]! = [] to create an array of type Memory
2. Add the following function:

// get all memories
func GetAllMem(completion:@escaping (_ success:Bool) -> ()){
    // clear previous data
    memories.removeAll()
    // get all rows
    let query = PFQuery(className: "Memory")
    // where user is equal to current user
    query.whereKey("userID", equalTo:user.id)
    query.findObjectsInBackground { (objects, error) in
        // no errors
        if error == nil {
            // if there are objects in the array
            if let returnedObjects = objects {
                // loop through all objects in array
                for object in returnedObjects {
                    // extract the image
                    let file = object["Image"] as! PFFileObject
                    file.getDataInBackground { (imageData: Data?, error: Error?) in
                        if error == nil {
                            if let imageData = imageData {
                                let image = UIImage(data: imageData)
                                // convert coord of type GeoPoint to CLLocationCoordinate2D
                                let coor = object["coordinate"]! as! PFGeoPoint
                                let coord = CLLocationCoordinate2D(latitude: coor.latitude, longitude: coor.longitude)
                                // create a new memory
                                let memData = Memory(title: object["title"]! as! String, Image: (image ?? UIImage(named: "test"))!, coordinate: coord, desc: object["desc"]! as! String, category: object["category"]! as! String, tags: object["tags"]! as! String, location: object["location"]! as! String, date: object["date"]! as! String, objID: object.objectId!)
                                // add memory to the global array
                                self.memories.append(memData)
                            }
                        }
                    }
                }
            }
            completion(true)
        }
        else {
            //return false completion if fails
            completion(false)
        }
    }
}

         a. Essentially the function is getting all the information from the database rows that correspond with the current user (using Parse Documentation)
         b. It then loops through all the rows and creates a variable of type Memory
         c. Finally, it adds that memory to the array
     3. Now go to settings.swift and add this code to viewDidLoad:

// get all memories from database
sessionManager.shared.GetAllMem { (success) in
        if success {
            self.removeSpinner()
        }
}

a. This means that whenever a user logs in, all their information will be saved to the array memories in sessionManager (sessionManager.shared.memories)
4. To show these memories as annotations on the map, return to ViewContoller.swift and add this code in viewDidLoad:

// go through all memories in global list
for m in sessionManager.shared.memories {
    // if there is a mapView (protection)
    if mapView != nil {
        // add that Memory
        mapView.addAnnotation(m)
    }
}

a. This code just loops through all the memories and adds the memory to the mapView

Interactive Annotations

Now that we have displayed all our memories, we want to be able to click on them and open a new controller that displays all the information. To do this we need to add two functions to ViewController.swift:
1. This function changes the style of the pin and displays the i button when clicked:

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    // make sure only right type of pins display
    guard annotation is Memory else {return nil}
    // create identifier for annotation views
    let identifier = "Memory"
    // get back an annotation if it is one with identifier, otherwise nil
    var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier)
    if annotationView == nil {
        annotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: identifier)
        annotationView?.canShowCallout = true
        //create button - i button for info
        let btn = UIButton(type: .detailDisclosure)
        annotationView?.rightCalloutAccessoryView = btn
    } else {
        // if have in dq go ahead and use
        annotationView?.annotation = annotation
    }
    return annotationView
}

2. This function presents a different view controller when the i button is clicked

func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl) {
    // make sure is type Memory
    guard let memory = view.annotation as? Memory else {return}
    if control == view.rightCalloutAccessoryView {
        // go to info page for that memory
        let obj = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "memInfoPage") as! memInfoPage
        // pass memory information
        obj.page = memory
        self.present(obj, animated: true, completion: nil)
   }
}

Memory Info Page

The previous code showed you how to make an annotation clickable and open a new controller. It also sent information to the next controller (memInfoPage). To display this information in memInfoPage.swift you must:
     1. Create outlets for all the storyboard elements (labels, images, etc.)
     2. Add var page : Memory! to the top of the class to collect the memory passed from ViewContoller.swift
     3. In viewDidLoad, pass the information from page into all the storyboard elements
     4. Add a function to reload the controller (this is needed for editing the memory)
     5. All together it should look like this:

import Foundation
import UIKit
import Parse

class memInfoPage : UIViewController {
    // var from prev page
    var page : Memory!
    // connections
    @IBOutlet weak var memTitle: UILabel!
    @IBOutlet weak var memImage: UIImageView!
    @IBOutlet weak var memDesc: UITextView!
    @IBOutlet weak var memCategory: UILabel!
    @IBOutlet weak var memLocation: UILabel!
    @IBOutlet weak var memTags: UITextView!
    @IBOutlet weak var memDate: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.memTitle.text = page.title
        memTitle.adjustsFontSizeToFitWidth = true
        self.memImage.image = page.Image
        self.memDesc.text = page.desc
        self.memCategory.text = page.category
        self.memLocation.text = page.location
        self.memTags.text = page.tags
        self.memDate.text = page.date
        NotificationCenter.default.addObserver(self, selector: #selector(reloadContent), name: Notification.Name("reloadContent"), object: nil)
    }

    @objc func reloadContent (notification: NSNotification){
        self.memTitle.text = page.title
        memTitle.adjustsFontSizeToFitWidth = true
        self.memImage.image = page.Image
        self.memDesc.text = page.desc
        self.memCategory.text = page.category
        self.memLocation.text = page.location
        self.memTags.text = page.tags
        self.memDate.text = page.date
    }
}

Now when you click the i button on an annotation, a page with all the information about the memory will appear.

Add Annotation

The next logical step is to create a way to add new memories:
1. Add a button to the storyboard map controller and create an action function (addAnnotation) connecting to ViewController.swift
2. Insert the following code to present a camera controller (picController):

@IBAction func addAnnotation(_ sender: Any) {
    // should pop up different controller so that can enter info
    let obj = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "picController") as! picController
    self.present(obj, animated: true, completion: nil)
}

To create picController.swift:
1. If you haven’t already, create a controller with a button and imageView
2. Create a file called picController.swift with the following code:

import Foundation
import UIKit

class picController: UIViewController {

    @IBOutlet weak var img: UIImageView!

     // create camera
    let pickerController = UIImagePickerController()

    override func viewDidLoad() {
        super.viewDidLoad()
        // set camera
        pickerController.sourceType = UIImagePickerController.SourceType.camera
        pickerController.delegate = self
    }
    // linked to button that shows the camera
    @IBAction func onClickTakePic(_ sender: Any) {
        present(pickerController, animated: true, completion: nil)
    }
}
// image taken
extension picController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        picker.dismiss(animated: true, completion: nil)
        if let image = info[UIImagePickerController.InfoKey.originalImage] as? UIImage {
            // set image taken to image on screen
            img.image = image
            dismiss(animated: true, completion: nil)
            // send image to create new mem
            let obj = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "newMemory") as! newMemory
            obj.image = image
            self.present(obj, animated: true, completion: nil)
        }
    }
    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        //close out (camera has been closed)
    }
}

     3. Connect img and onClickTakePic to the image and button on the controller
     4. Allow camera access:
         a. Go to the outermost snapShot.xcodeproj
         b. info -> Custom iOS Target Properties -> right click → add row -> Privacy - Camera Usage Description

From the code, you can see that once the picture is taken, it sends the information to a different controller called newMemory.

New Memory

newMemory is the controller where the user inputs all the different information on the memory they wish to create. The corresponding file has 4 major parts to it:
     1. Basic setup
     2. Gets users location
     3. Gets current date
     4. Creates a new memory
Breaking each part down…

Basic setup:
     1. Add var image : UIImage! to the top of the newMemory class (it will store the image passed from picController)
     2. Create connections between each input field, image, and button
     3. In viewDidLoad, add self.memImage.image = image to set the image

Location:
     1. Allow location access:
         a. Go to the outermost snapShot.xcodeproj
         b. info -> Custom iOS Target Properties -> right click add row (x2) -> Privacy - Location When In Use Usage Description & Privacy - Location Always and When In Use Usage Description
     2. Add private var locationManager:CLLocationManager? to the top of the newMemory class so we can access the user’s location
     3. Add the following two functions to the class:

func getUserLocation() {
    locationManager = CLLocationManager()
    locationManager?.requestAlwaysAuthorization()
    locationManager?.startUpdatingLocation()
    locationManager?.delegate = self
}
func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
    if let location = locations.last {
        sessionManager.shared.currentCoord = CLLocationCoordinate2D(latitude: location.coordinate.latitude, longitude: location.coordinate.longitude)
    }
}

4. In sessionManager.swift add var currentCoord : CLLocationCoordinate2D? as a variable at the top of the class (this will store the users current coordinate)
5. Finally, back in newMemory.swift, create a variable for the location in the save button function (saveToggled)

getUserLocation()
let coord = sessionManager.shared.currentCoord

Date:
1. Add the following to saveToggled:

let date = Date()
let calendar = Calendar.current
let y = calendar.component(.year, from: date)
let m = calendar.component(.month, from: date)
let d = calendar.component(.day, from: date)
let dateNow = "\(m)/\(d)/\(y)"

New Memory:
1. In saveToggled, create a new variable of type Memory and save it to sessionManager

Code all together:

import Foundation
import UIKit
import MapKit
import Parse
import CoreLocation

class newMemory : UIViewController, UITextFieldDelegate, CLLocationManagerDelegate {

    var image : UIImage!
    private var locationManager:CLLocationManager?

    @IBOutlet weak var memTitle: UITextField!
    @IBOutlet weak var memCategory: UITextField!
    @IBOutlet weak var memImage: UIImageView!
    @IBOutlet weak var memDesc: UITextView!
    @IBOutlet weak var memLocation: UITextField!
    @IBOutlet weak var memTags: UITextView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Set image from passed in value
        self.memImage.image = image
    }

    //dismiss keyboard when tapped
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        self.view.endEditing(true)
    }

    @IBAction func saveToggled(_ sender: Any) {
        self.showSpinner()
        // find current location
        getUserLocation()
        let coord = sessionManager.shared.currentCoord
        // get current date
        let date = Date()
        let calendar = Calendar.current
        let y = calendar.component(.year, from: date)
        let m = calendar.component(.month, from: date)
        let d = calendar.component(.day, from: date)
        let dateNow = "\(m)/\(d)/\(y)"
        // create new memory
        let newMem = Memory(title: memTitle.text!, Image: image, coordinate: coord, desc: memDesc.text!, category: memCategory.text!, tags: memTags.text!, location: memLocation.text!, date: dateNow, objID: "none")
        // save memory
        sessionManager.shared.saveMemory(memory: newMem) { (success) in
            // reload map controller
            NotificationCenter.default.post(name: Notification.Name("reload"), object: nil)
            // move to next view controller
            self.dismiss(animated: true, completion: nil)
        }
    }
    // get user location stuff
    func getUserLocation() {
        locationManager = CLLocationManager()
        locationManager?.requestAlwaysAuthorization()
        locationManager?.startUpdatingLocation()
        locationManager?.delegate = self
    }
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        if let location = locations.last {
            sessionManager.shared.currentCoord = CLLocationCoordinate2D(latitude: location.coordinate.latitude, longitude: location.coordinate.longitude)
        }
    }
}

In sessionManager.swift, the function to save a memory looked like this:
     1. Set all the database rows to be the inputted information
     2. Reduce the image size (otherwise might cause error)
     3. Save changes to the database
     4. Add the new memory to global array (memories)

func saveMemory (memory:Memory, completion:@escaping (_ success:Bool) -> ()) {
    // set values for new memory
    let mem = PFObject(className:"Memory")
    mem["title"] = memory.title
    mem["desc"] = memory.desc
    mem["location"] = memory.location
    mem["date"] = memory.date
    mem["userID"] = user.id
    mem["tags"] = memory.tags
    mem["category"] = memory.category
    mem["coordinate"] = PFGeoPoint(latitude: memory.coordinate.latitude, longitude: memory.coordinate.longitude)
    // reducing image size
    let image = memory.Image
    let actualHeight:CGFloat = image.size.height
    let actualWidth:CGFloat = image.size.width
    let imgRatio:CGFloat = actualWidth/actualHeight
    let maxWidth:CGFloat = 1024.0
    let resizedHeight:CGFloat = maxWidth/imgRatio
    let compressionQuality:CGFloat = 0.5
    let rect:CGRect = CGRect(x: 0, y: 0, width: maxWidth, height: resizedHeight)
    UIGraphicsBeginImageContext(rect.size)
    image.draw(in: rect)
    let img: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    let imageData:Data = img.jpegData(compressionQuality: compressionQuality)!
    UIGraphicsEndImageContext()
    let imageFinal = UIImage(data: imageData)!
    // prepping to save image
    let imgData = imageFinal.pngData()
    let imageFile = PFFileObject(name:"image.png", data:imgData!)
    mem["Image"] = imageFile
    // save all
    mem.saveInBackground { (succeeded, error)  in
        if (succeeded) {
           // The object has been saved.
            memory.objID = mem.objectId as! String
            self.memories.append(memory)
            completion(true)
        } else {
            // There was a problem
            completion(false)
        }
    }
}

Delete

I wanted to allow the user to delete a memory if they no longer wanted it. Fortunately, this process was relatively simple:
     1. Create an action function from the memInfoPage delete button (deleteToggled)
     2. Create an alert asking the user to confirm that they want to delete this item
     3. If canceled dismiss
     4. If confirmed call the sessionManager delete function and return to the dismiss the controller

@IBAction func deleteToggle(_ sender: Any) {
    // alert are you sure you want to delete this
    let confirmAlert = UIAlertController(title: "Delete", message: "Are you sure you want to delete this memory?", preferredStyle: UIAlertController.Style.alert)
    // alert confirmed
    confirmAlert.addAction(UIAlertAction(title: "Confirm", style: .default, handler: { (action: UIAlertAction!) in
        // run delete function
        sessionManager.shared.deleteMemory(memory: self.page) { (success) in
            // reload map controller
            NotificationCenter.default.post(name: Notification.Name("reload"), object: nil)
            self.dismiss(animated: true, completion: nil)
        }
    }))
    // alert canceled
    confirmAlert.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: { (action: UIAlertAction!) in
        // do nothing
    }))
    // show the alert
    present(confirmAlert, animated: true, completion: nil)
}

To delete the memory in the sessionManager.swift function I had to:
     1. Find that memory in the database
     2. Delete it from the database
     3. Delete it from the global memories array (by comparing objectIDs)

func deleteMemory (memory:Memory, completion:@escaping (_ success:Bool) -> ()) {
    // get the memory
    let query = PFQuery(className:"Memory")
    query.getObjectInBackground(withId: memory.objID) { (object, error) in
        if error == nil {
            // Success!
            if let object = object {
                // delete this row
                object.deleteInBackground()
                // delete from array memories
                self.deleteMemArray(memory: memory)
            }
            completion(true)
        } else {
            // Fail!
            completion(false)
        }
    }
}

func deleteMemArray(memory:Memory) {
    // loop through all memories in array
    for i in 0..<memories.count-1 {
        // if the objectIDs match
        if memories[i].objID == memory.objID {
            // delete the memory
            memories.remove(at: i)
        }
    }
}

I used two separate functions as a stylistic choice.

Edit

I also wanted users to be able to edit memories instead of having to delete and recreate them. This proved to be a little bit harder, but I eventually got it to work:
1. Create an action function from the memInfoPage edit button (editToggled)
2. Present and pass information to the edit controller (editMem)

@IBAction func editToggle(_ sender: Any) {
    // put all inputs into the text stuff to be resaved
    let VC = self.storyboard?.instantiateViewController(withIdentifier: "editMem") as! editMem
    // pass memory information
    VC.page = page
    self.present(VC, animated: true, completion: nil)
}

3. In editMem.swift, write the following code:

import Foundation
import UIKit
import MapKit
import Parse
import CoreLocation

class editMem: UIViewController, UITextFieldDelegate, CLLocationManagerDelegate {

    var page : Memory!

    @IBOutlet weak var memTitle: UITextField!
    @IBOutlet weak var memCategory: UITextField!
    @IBOutlet weak var memImage: UIImageView!
    @IBOutlet weak var memDesc: UITextView!
    @IBOutlet weak var memTags: UITextView!
    @IBOutlet weak var memLocation: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()
        // set all input fields to the previous values
        memTitle.text = page.title
        memCategory.text = page.category
        memDesc.text = page.desc
        memTags.text = page.tags
        memLocation.text = page.location
        memImage.image = page.Image
    }

    @IBAction func memUpdate(_ sender: Any) {
        self.showSpinner()
        // can't edit coord or image
        let coord = page.coordinate
        let image = page.Image
        // create new memory with inputted info
        let newMem = Memory(title: memTitle.text!, Image: image, coordinate: coord, desc: memDesc.text!, category: memCategory.text!, tags: memTags.text!, location: memLocation.text!, date: page.date, objID: page.objID)
        // call update function
        sessionManager.shared.updateMemory(memory: newMem) { (success) in
            self.removeSpinner()
            // go back to memInfoPage
            let VC = self.storyboard?.instantiateViewController(withIdentifier: "memInfoPage") as! memInfoPage
            VC.page = newMem
            self.dismiss(animated: true, completion: nil)
            // call reload functions so update appears
            NotificationCenter.default.post(name: Notification.Name("reloadContent"), object: nil)
            NotificationCenter.default.post(name: Notification.Name("reload"), object: nil)
        }
    }
}

         a. This code first sets all the inputs equal to whatever the previous information on the memory was
         b. The user can then edit the information and click the update button when finished (which runs memUpdate)
         c. memUpdate creates a new memory with the updated information and runs the updateMemory function in sessionManager
         d. It then dismisses the controller (returning to memInfopage)
         e. Finally, it triggers the reload functions mentioned earlier in memInfoPage and ViewController so that the updated information is displayed
In sessionManager, create an update function that:
     1. Finds the object in the database
     2. Replaces with and saves the new information
     3. Replaces the old memory with the new memory in the global memories array (by comparing objectIDs)

func updateMemory (memory:Memory, completion:@escaping (_ success:Bool) -> ()) {
    // find memory
    let query = PFQuery(className:"Memory")
    // with the same objectID
    query.getObjectInBackground(withId: memory.objID) { (object, error) in
        if error == nil {
            // Success!
            if let object = object {
                // update all values
                object["title"] = memory.title
                object["desc"] = memory.desc
                object["location"] = memory.location
                object["date"] = memory.date
                object["tags"] = memory.tags
                object["category"] = memory.category
            }
            // save object
            object!.saveInBackground()
            // change in global array
            self.updateMemArray(memory: memory)
            completion(true)
        } else {
            // Fail!
            completion(false)
        }
    }
}

func updateMemArray(memory:Memory) {
    // loop through memories
    for m in memories {
        // if objectIDs the same
        if m.objID == memory.objID {
            // update that memory in the global array
            m.title = memory.title
            m.desc = memory.desc
            m.location = memory.location
            m.date = memory.date
            m.tags = memory.tags
            m.category = memory.category
        }
    }
}

Again, using two functions is stylistic.

Storing

Most of the previous code has been edited to exclude the sorting tableViewControllers and collectionViewControllers. This is because accessing information this way presented challenges when editing the memories (it was difficult to get the updated information to show up when clicking the navigation back button). Although I managed to do it in the end, including those steps and code in this tutorial added another layer of length and complexity. However, if you are interested in adding a similar kind of sorting mechanism, check out my code on GitHub to see how it was done!

Closing Remarks

Congratulations, you have now created your own digital scrapbook! I know I learned a lot from this project, and hope you did, too. I encourage all readers to embark on the rewarding journey of experimenting with and creating tutorials about Xcode, SashiDo, and iOS Maps. There are so many great resources all over the internet that help make your life easier when coding so there really is no downside to taking things into your own hands and having fun. I hope you all enjoyed my tutorial and again, make sure to check out (or download) my code on GitHub to get the full experience or my previous tutorial that uses Teachable Machine to classify fish types.

Thanks so much to SashiDo and all you readers! Happy future coding!

Resources

SnapShot Part 1: https://blog.sashido.io/snapshot-how-to-create-a-digital-scrapbook-in-ios-part-1/
An Xcode Collection of Useful Functions and Tips: https://blog.sashido.io/xcode-collection-of-useful-functions-and-tips/
SashiDo: https://www.sashido.io/en/
Parse Documentation: https://docs.parseplatform.org/ios/guide/
Parse Video Playlist: https://www.youtube.com/playlist?list=PLMRqhzcHGw1ZFjFyHGJTTPuvcLbwVCuG4
GitHub: https://github.com/CarolineBaillie/snapShot

SnapShot: How to Create a Digital Scrapbook in iOS - Part 1

CarolineBaillie — Thu, 22 Apr 2021 14:45:14 +0000

When you're standing before the Great Wall of China, going out to lunch with friends, or even wandering through the middle of nowhere, don’t you want to snap a picture and easily keep track of all your adventures and experiences? Sure, you can take hundreds of photos on your phone, but there are always so many to go through. Wouldn’t it be nice to have a digital map filled with specific pictures for specific locations?

As a traveler and wanderer, I definitely wanted an app like this, and as a coder, I wanted to learn more about the iOS map feature. Inspired, I set out to create a sort of digital scrapbook that I call SnapShot. Today I want to share my newly gained experience through a tutorial, but first, here is a demo of the final product:

In this tutorial, I will be going over how to set up and use the amazing backend platform SashiDo (also used in my prior tutorial: Fish Classification iOS App with SashiDo and Teachable Machine) as well as going over the basic components of my app. Also, all my code is available on my GitHub. Before continuing, I recommend you have a Xcode installed and basic knowledge of swift.

Podfile
SashiDo
Outline
Controller Setup
Session Manager
Registration
- Current User
- Signup
- Login
- Logout
Part 2
Resources

Podfile

As mentioned before, I used SashiDo’s backend platform to store user information. Because SashiDo uses Parse open-source technology to communicate with your app, you first must install the podfile:
     1. Create your Xcode project (I called mine snapShot)
     2. Go to terminal and enter your project’s folder
     3. Type sudo install cocoapods
     4. Then type pod init
     5. If you type ls you should see the following:

6. Type open -a TextEdit Podfile so that you can edit the file
7. Modify the file to look like this:

     8. Save the file and return to terminal
     9. Type pod update
     10. Now if you type ls you should see all these files:

11. Type open snapShot.xcworkspace to open in Xcode
From now on you must open .xcworkspace, NOT .xcodeproj

SashiDo

Now we will actually set up the connection with SashiDo:
     1. Create an account with SashiDo
     2. Go to your dashboard
     3. Click Create New App and follow the instructions
     4. Once your app has been created, you should see a page saying Connect Applications With SashiDo
     5. Making sure swift is selected, copy the 6 lines at the bottom:
         a. If you are not shown this page or accidentally move past it, you can find it again by clicking Getting Started at the top of the menu on the left

If you had any trouble with this section, refer to the Getting Started Guide
     6. Next, go back to Xcode and open AppDelegate.swift
     7. Inside func application, paste the code you copied
     8. At the top of this file, add import Parse
     9. It should look like this (note: the line about the local datastore is not required):

To communicate with SashiDo, we will use Parse documentation. I will be going over some of the functions and calls I used, but it is also beneficial to refer to the Parse iOS Documentation. Additionally, to gain a more in-depth understanding, I found this video playlist on using parse for iOS development very useful.

Outline

Once you have the connection to SashiDo set up, it’s important to create an outline of your app. This diagram should contain all your controllers and the connections between them. It is also a good practice to color different types of controllers (in my case viewController=black, TableViewController=blue, and CollectionViewController=red).

This is just the initial outline so your actual controllers might look or act differently.

Controller Setup

With this outline, you can now begin working on Xcode and adding the controllers:
     1. Inside the project folder, create a folder called viewControllers
     2. Go to Main.Storyboard
     3. Add the necessary (types of) controllers
     4. For each added controller create a swift file in the viewControllers folder with an appropriate name
     5. In the file, paste and modify this template code:

import Foundation
import UIKit
import MapKit
import Parse
import CoreLocation

class fileName: viewControllerType /*other types might be necessary depending on your usage of this class*/ {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

All these imports are not necessary for every controller, but it can’t hurt to have all of them.
6. Under the corresponding controller, go to identity inspector and under class, select the swift file
7. Copy the swift files name and paste it in Storyboard ID

     8. Add the necessary buttons, labels, images, etc.
         a. If your controller contains text inputs (e.g. login, signup, or newMemory), then I recommend adding a scrollView so the user can see all the input boxes
         b. Don’t add anything to the controller for the map (ViewController)
Now you should set up a navigationController to make movements between controllers smooth:
     1. Drag a navigationController onto the storyboard
     2. Under Attributes Inspector, check Is Initial View Controller
     3. Hover over the navigation controller, click control and drag your mouse to your first controller (e.g. login/signup screen)
     4. Release your mouse and select root view controller
     5. In settings.swift viewDidLoad, add the following code to keep the controller with navigation:

var objVC: UIViewController? = storyboard!.instantiateViewController(withIdentifier: "settings")
var aObjNavi = UINavigationController(rootViewController: objVC!)

From here you can create segues between view controllers (login/signup screen -> login controller) or wait to create these segues through code (login -> settings).
This is my final storyboard:

Session Manager

The complexity of this app requires us to store information in a database (taken care of by SashiDo). However, we still need to request and send information from and to the database. To do this we will create a file called sessionManager (also used in my previous tutorial). sessionManager is a class that contains all the query functions that can then be accessed from any other file. The basic setup for this file is as follows:
     1. In snapShot, create a new folder called Classes
     2. In the this folder, create a new swift file called sessionManager
     3. Add this template code to sessionManager.swift:

import Foundation
import Parse
class sessionManager: NSObject {
    static let shared = sessionManager()
    override init() {
       super.init()
    }
}

     4. In this class we will:
         a. Create query functions
         b. Store global variables on the user and location
         c. Store a global array with all information from the database so we only need to send one request
This file will be used throughout the app so it is important to have a basic understanding of and to create this file at the beginning.

Registration

In most apps, you will need the user to create and use an account. SashiDo makes this process super easy!

Current User

In order to show individual information, I created a variable that kept track of the current user:
1. In the Classes folder, create a new file called currentUser.swift
2. Write this code:

import Foundation
import UIKit
import Parse

class currentUser : NSObject {
    var username:String
    var id:String

    init(username:String, id:String) {
        self.username = username
        self.id = id
    }
}

3. In sessionManager.swift, add var user : currentUser! at the top
4. This variable will be used in other functions in sessionManager

Signup

     1. You should have all the necessary text inputs (preferably in a scrollView)
     2. Connect these inputs (as an outlet) and the button (as an action) to its file (signup.swift)
     3. Add the function to dismiss the keyboard
     4. Inside the button action function (signupToggled):
         a. Display waiting spinner
         b. Create and save the user (Parse)
         c. Go to the next controller (settings)

import Foundation
import UIKit
import Parse

class signup: UIViewController {

    @IBOutlet weak var emailTextField: UITextField!
    @IBOutlet weak var usernameTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    //get rid of keyboard when touch screen
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        usernameTextField.resignFirstResponder()
        passwordTextField.resignFirstResponder()
        emailTextField.resignFirstResponder()
    }

    @IBAction func signupToggled(_ sender: Any) {
        // loading icon
        self.showSpinner()
        // create new user
        let user = PFUser()
        user.username = usernameTextField.text!
        user.password = passwordTextField.text!
        user.email = emailTextField.text!
        // save user
        user.signUpInBackground { (result, error) in
            if error == nil && result == true {
                //successfully signed up
                // store current user
                let cUser = currentUser(username: user["username"] as! String, id: user.objectId!)
                sessionManager.shared.user = cUser
                //next screen
                let secondViewController = self.storyboard?.instantiateViewController(withIdentifier: "settings") as! settings
                self.navigationController?.pushViewController(secondViewController, animated: true)
            }
        }
    }
}

Login

1. Same as sign up code but login rather than signup:

import Foundation
import UIKit
import Parse

class login: UIViewController {
    @IBOutlet weak var usernameTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    //get rid of keyboard when touch screen
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        usernameTextField.resignFirstResponder()
        passwordTextField.resignFirstResponder()
    }

    @IBAction func loginToggled(_ sender: Any) {
        // loading icon
        self.showSpinner()
        // login user
        PFUser.logInWithUsername(inBackground:usernameTextField.text!, password:passwordTextField.text!) {
          (user, error) -> Void in
          if user != nil {
            // successful
            // store current User
            var cUser = currentUser(username: user?["username"] as! String, id: user?.objectId as! String)
            sessionManager.shared.user = cUser
            // next controller
            let secondViewController = self.storyboard?.instantiateViewController(withIdentifier: "settings") as! settings
            self.navigationController?.pushViewController(secondViewController, animated: true)
          } else {
            // The login failed.
            print("incorrect username or password")
          }
        }
    }
}

Logout

To logout you can override the navigation back function on a chosen controller (settings.swift):
1. In viewDidLoad:

//change back button name for navigation controller
let newBackButton = UIBarButtonItem(title: "Logout", style: UIBarButtonItem.Style.plain, target: self, action: #selector(settings.back(sender:)))
self.navigationItem.leftBarButtonItem = newBackButton

2. In Class:

@objc func back(sender: UIBarButtonItem) {
    // logout
    PFUser.logOut()
    // go back to first viewController
    self.navigationController?.popToRootViewController(animated: true)
}

Part 2

This is only the beginning of a larger project. This mainly included the setup and basics, and part 2 will go more into the specifics of this project and all the map functions. Check out Part 2 here!

Resources

An Xcode Collection of Useful Functions and Tips: https://blog.sashido.io/xcode-collection-of-useful-functions-and-tips/
Part 2: https://blog.sashido.io/snapshot-how-to-create-a-digital-scrapbook-in-ios-part-2/
SashiDo: https://www.sashido.io/en/
Parse Documentation: https://docs.parseplatform.org/ios/guide/
Parse Video Playlist: https://www.youtube.com/playlist?list=PLMRqhzcHGw1ZFjFyHGJTTPuvcLbwVCuG4
Install Cocoapods: https://www.youtube.com/watch?v=BSYLs0wl5ME
GitHub: https://github.com/CarolineBaillie/snapShot

Fish Classification iOS App with SashiDo and Teachable Machine

CarolineBaillie — Thu, 03 Dec 2020 18:59:55 +0000

I don’t consider myself A Fisher, but I do enjoy fishing occasionally. I thought it would be fun to create a classification and storage app. Using Xcode to create this app, Teachable Machine to identify the type of fish, and SashiDo to manage all the data and backend code, I finally have a finished product that I would like to share with you all. All these tools (Xcode, Teachable Machine, and SashiDo) enable you to create amazing apps, and I wanted to provide you the basic knowledge to get started. Before advancing, I recommend you have knowledge of swift as I will mainly be going over how to use SashiDo and how to integrate a Teachable Machine model. Using my app as an example, I want to show you the steps to creating your own and some important things I learned from creating mine.

First, for a quick overview of my app, once logged in, you can either take a picture, upload a picture, browse your catches, or browse others' catches. Below is a quick video displaying the components of my app:

Teachable Machine
Classification
Outline
SashiDo and Parse
Registration
- Signup
- Login
- Logout
SessionManager
- Setting up sessionManager
- requestGetPages
- requestCreateNewPage
Closing Remarks

Using Teachable Machine

Although it was not my actual first step, creating and importing the model really should be the first step. Unfortunately, Teachable Machine does not offer an exportation method using swift, so I had to find some other way to access the model. There are many different solutions, but I chose to export the model using Tensorflow Lite (which is made for Android development).

Here are steps to creating and downloading the model:
     1. Create and train your model with Teachable Machine.
     2. Click export model.
     3. Click on Tensorflow Lite at the top (right-most option).
     4. Download model (should be Floating point for Model conversion type).

This will download two files onto your computer (model_unquant.tflite and labels.txt). Save them for later as we will be inserting them to our Xcode project.

To actually get started with Xcode, generally you would create your own project and begin working from scratch, but in this case, because you must use the .tflite model in Xcode, it is best to download and use a template.

These are the following steps to set up the template:
     1. Download CatVsDogSample.
     2. In your downloaded file go to TensorFlow Deployment/Course 2 - TensorFlow Lite/Week 3/ Examples/iOS Apps/.
     3. You should see 3 files (cats_vs_dogs, image_classification, and object_detection); move the cats_vs_dogs folder into a separate place outside of all the other folders.
     4. Delete everything else (you only want the cats_vs_dogs folder).
     5. In terminal type sudo gem install cocoapods.
     6. Inside the cats_vs_dogs folder, right click on CatVsDogClassifierSample.xcworkspace and open with Xcode (you must open .xcworkspace, NOT .xcodeproj).
     7. Open the bottom-most folder Pods and open the Podfile.
     8. Add pod ‘Parse’ so that the contents are as such:

     9. Save and exit Xcode.
     10. In terminal navigate to the downloaded CatVsDogSample:
         - Use cd folderName.
         - You should see 6 other folders/files like this:

11. Type pod init.
12. Type pod install.

Now that you have downloaded everything, here are the steps to importing your model:
     1. Open up the CatVsDogClassifierSample.xcworkspace again.
     2. Under StoryBoards/Main.storyboard, delete the pre-existing ViewController.
     3. Under ViewController, delete the ViewController.swift file.
     4. Right click on the outermost CatVsDogClassifierSample.xcworkspace and click Add Files to “CatVsDogClassifierSample”...
     5. At the top select your model_unquant.tflite and click Add:

     6. Open ModelDataHandler.swift.
     7. Towards the top, look for this function:

     8. Replace “converted_model” with “model_unquant”.
     9. Scroll down a bit until you see this line of code:

     10. Replace “Cat”, “Dog” with your own labels.
         - To do this you must open the labels.txt file and IN THE SAME ORDER insert them into the array.

With the model imported, I'll show you how to use it for classification.

Classifying the image

There are several different ways you can get the image you want to classify (picture, upload, UIImage View, etc.), so in this example, we are just assuming that you have stored the image in a variable called image. This is the code to run the model:

let pixelBuffer = image.pixelBuffer()!
let inferenceResults = modelDataHandler?.runModel(onFrame:pixelBuffer)
guard let inference = inferenceResults?.first else {
   return
}

Now the classification label should be stored in inference.label, and you can choose what you want to do with this (display it on the controller, save it to the database, pass it to the next view controller, etc.).

Outline

One of the most important things to do when creating an iOS app is designing an outline for all the controllers you will need. This will look different for every app, but for mine, the outline looked like this:

With an outline in mind, it is now time to actually create these controllers.
For my specific app, I had 3 different types of controllers (viewController, TableViewController, and CollectionViewController), all highlighted in the specific colors (black, orange, blue) respectively.

Here are the steps to creating the controllers and their files:
     1. Add necessary controllers (View Controller, Table View Controller, and Collection View Controller, etc.).
         - Make sure you choose the controller option.
     2. Add navigation controller:
         - Set navigation controller as the initial view controller.
         - Set signup/login page (or whatever you want the first page of your app to be) as the navigation controller’s root view controller.
         - Add this code inside the settings class (or page/file after the signup and login pages).
         - Make sure 'settings' is changed to whatever you called your controller.

//keep with navigation controller
var objVC: UIViewController? = storyboard!.instantiateViewController(withIdentifier: "settings")
var aObjNavi = UINavigationController(rootViewController: objVC!)

     3. Add other elements (buttons, image views, labels, etc.).
     4. Create connections/paths through storyboard.
         - Hold control, click on button, drag to controller that you want to create path between.
         - Not all paths will be made through storyboard as some will be made through code.
         - The following were paths I did not connect through the storyboard: login and signup settings, upload and pic input info page, and table view collectionview description page.
     5. Add constraints to elements.

Here what my storyboard ended up looking like:

     6. Create files for all of the controllers:
         a. Right click in the ViewController folder and press New File...
         b. Choose swift file and click Next.
         c. Name the file and click Create.
         d. Write the necessary code:
             i. At the top of each file, import UIKit and import Parse (although you won’t need both of these for all controllers, it doesn’t hurt to have it).
             ii. Create a class with a name matching the name of the file and a type matching the type of the controller.
             iii. Inside the class override the viewDidLoad function and inside write super.viewDidLoad().
             iv. Eg. The code for settings.swift meant to connect with a viewController should look like this:

import Foundation
import UIKit
import Parse

class settings: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

     7. Connect each file to its corresponding controller:
         a. Click on the top of a view controller.
         b. Click on the identity inspector on the top right.
         c. Under Custom Class and next to Class, click on the blue arrow.
         d. Choose the corresponding file name.
         e. Copy the name of the file (in this example settings) and paste it into StoryboardID as we may need to reference it later.

Using SashiDo and Parse

Next we have to link our app to SashiDo:
     1. Go to your SashiDo dashboard.
     2. Click Create New App and follow the instructions.
         - Once your app has been created you should be shown a page saying Connect Applications With SashiDo.
     3. Making sure swift is selected, copy the 6 lines at the bottom:
         - If you are not shown this page or accidentally move past it, you can find it again by clicking Getting Started at the top of the menu on the left.
         - If you had any trouble with this section, refer to the getting started guide.

4. Next go back to Xcode and open AppDelegate.swift.
5. Inside func application, paste the code you copied.

In order to communicate with SashiDo, we are going to be using Parse documentation. I will be going over some of the functions and calls I used, but it is also beneficial to refer to the Parse iOS documentation. Additionally, in order to gain a more in depth understanding, I found this video playlist on using parse for iOS development very useful.

Registration

One thing that is consistent and important in most apps are the login and signup pages. In this section, I will lead you through creating your own registration pages with Sashido and Parse.

Signup

     1. Connect text inputs (as outlet) and button (as action) to file.
         - If you do not know how to do this, refer to this thorough guide.
     2. Inside the button action function (I called it signupToggled) create a user.
         - Parse enables you to do this through a few simple lines of code.
         - See screenshot below for code.
     3. Save the user and use the navigation controller to go to the next page.
         - See code below, but if you don’t understand how to push the next page, visit this link #18.
     4. Override the function touchesBegan to dismiss the keyboard when you tap somewhere else.

import Foundation
import UIKit
import Parse

class signup: UIViewController {
    @IBOutlet weak var emailTextField: UITextField!
    @IBOutlet weak var usernameTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!
    @IBOutlet weak var buttonStyle: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    //get rid of keyboard when touch screen
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        usernameTextField.resignFirstResponder()
        passwordTextField.resignFirstResponder()
        emailTextField.resignFirstResponder()
    }

    @IBAction func signupToggled(_ sender: Any) {
        self.showSpinner()
        //check username and password field are not empty / nil
        let user = PFUser()
        user.username = usernameTextField.text!
        user.password = passwordTextField.text!
        user.email = emailTextField.text!
        user.signUpInBackground { (result, error) in
            if error == nil && result == true {
                //successfully signed up in
                let cUser = currentUser(username: user["username"] as! String, id: user.objectId!)
                sessionManager.shared.user = cUser
                //next screen
                let secondViewController = self.storyboard?.instantiateViewController(withIdentifier: "settings") as! settings
                self.navigationController?.pushViewController(secondViewController, animated: true)

            } else {
                //error display error message
            }
        }
    }

}

Note: The code about cUser is just to store a local variable that keeps track of the current user. I stored it in sessionManager, which is a file that I can access globally containing all of my database query functions.

Login

1. This is the same as the signup page, but change the code from signing up to logging in as shown below:

import Foundation
import UIKit
import Parse

class login: UIViewController {
    @IBOutlet weak var usernameTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!
    @IBOutlet weak var buttonStyle: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    //get rid of keyboard when touch screen
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        usernameTextField.resignFirstResponder()
        passwordTextField.resignFirstResponder()
    }

    @IBAction func loginToggled(_ sender: Any) {
        PFUser.logInWithUsername(inBackground:usernameTextField.text!, password:passwordTextField.text!) {
          (user, error) -> Void in
          if user != nil {
            var cUser = currentUser(username: user?["username"] as! String, id: user?.objectId as! String)
            sessionManager.shared.user = cUser
            // Do stuff after successful login.
            let secondViewController = self.storyboard?.instantiateViewController(withIdentifier: "settings") as! settings
            self.navigationController?.pushViewController(secondViewController, animated: true)
          } else {
            // The login failed
          }
        }
    }
}

Logout

To logout in Parse, all you do is add this line of code:

PFUser.logOut()

Session Manager

When creating the app, I had two major issues surrounding database querying or saving that I solved using a file called sessionManager.swift. The first was organization and the second was timing. Basically, sessionManager is a file (and class) that I created where I can write and store all my database query and saving functions while still being able to access them in other files. By doing this, I was able to easily keep track of my functions, solving my first problem. My second problem was a little more complicated. When I tried retrieving data from SashiDo without sessionManager, there was a timing issue and the page would sometimes load before the data got back. Because of this, I decided to store information locally when the user signed in. This enabled me to access information on the catches of the user very quickly and easily. sessionManager was important in that process because all the functions were in one place and accessible throughout the app - I could also create arrays that stored the information there, too. If the user uploaded a new catch (or page as I called them), I would save the information to the database but also append it to the necessary arrays. This is generally a good practice, so I want to show you how to set up sessionManager, some examples of using it, and some examples of communicating with SashiDo.

Setting up sessionManager

     1. Create a new file and call it sessionManager.
     2. import Parse at the top.
     3. Create a class of type NSObject.
     4. Write static let shared = sessionManager().
     5. Then override the init function.

import Foundation
import Parse
class sessionManager: NSObject {
    static let shared = sessionManager()
    override init() {
       super.init()
   }
}

Now you can write whatever code you want inside this class. The two examples I am going to show you are retrieving information from the database and saving information in the database.

requestGetPages

Before getting started, it might be beneficial to take a look at Parse’s basic querying and image querying.

This is a function I wrote that gets all the pages (or catches) of a user with the matching ID:
     1. Define function (I called it requestGetPages).
     2. Clear the array that local information is stored in.
         - You clear it at the beginning because this should only be called once for each user, so if it is called again it means they have logged out then logged back in.
     3. Create query and define its constraints.
     4. Find objects in the database, check for errors, and loop through returned objects.
     5. Save or use the information somehow.
         - I created an object of class page and appended it to the array.
         - The class page is one that I created similar to sessionManager and is of type NSObject as well.
         - To learn more about creating classes in swift look at this site.

func requestGetPages (completion:@escaping (_ success:Bool) -> ()) {
    AllPages.removeAll()
    let query = PFQuery(className: "page")
    query.whereKey("userID", equalTo:user.id)
    query.findObjectsInBackground { (objects, error) in
        // no errors
        if error == nil {
            // if there are objects in the array
            if let returnedObjects = objects {
                // loop through all objects in array
                for object in returnedObjects {
                    let file = object["Image"] as! PFFileObject
                    file.getDataInBackground { (data, error) in
                        if error == nil {
                            if let imageData = data {
                               let image = UIImage(data: imageData) //can then display on screen
                               let fishData = page(fishType: object["fishType"]! as! String, Image: image!, desc: object["description"]! as! String, location: object["location"]! as! String, catchDate: object["catchDate"]! as! String, weight: object["weight"]! as! String, dimensions: object["dimensions"]! as! String)
                                    self.AllPages.append(fishData)
                            }
                        }
                    }
                }
            }
            completion(true)
        }
        else {
            //return false completion if fails
            completion(false)
        }
    }
}

Note: The functions I used for this are completion functions, meaning they will not move on until the data query has been completed.

6. In my settings.swift file (or whenever you want to call this function), INSIDE viewDidLoad you would put the following code:

sessionManager.shared.requestGetPages { (success) in
   if success {
      // query has completed - do what you want
   }
}

requestCreateNewPage

Before getting started it might be beneficial to take a look at saving data and images with Parse.

This is a function I wrote that saves a new page:
     1. Define function (requestCreateNewPage).
     2. Create a new object and add all necessary ‘columns’.
     3. Resize image
         - This step is not necessary, but I found I was trying to save too much information to the database and this was a solution to that.
     4. Save the information in the database and do whatever else you would like.
         - I appended the new page to the AllPages array.

func requestCreateNewPage (page:page, completion:@escaping (_ success:Bool) -> ()) {
    let pg = PFObject(className:"page")
    pg["fishType"] = page.fishType
    pg["description"] = page.desc
    pg["location"] = page.location
    pg["catchDate"] = page.catchDate
    pg["userID"] = user.id
    pg["weight"] = page.weight
    pg["dimensions"] = page.dimensions

    // reducing image size
    let image = page.Image
    let actualHeight:CGFloat = image.size.height
    let actualWidth:CGFloat = image.size.width
    let imgRatio:CGFloat = actualWidth/actualHeight
    let maxWidth:CGFloat = 1024.0
    let resizedHeight:CGFloat = maxWidth/imgRatio
    let compressionQuality:CGFloat = 0.5
    let rect:CGRect = CGRect(x: 0, y: 0, width: maxWidth, height: resizedHeight)
    UIGraphicsBeginImageContext(rect.size)
    image.draw(in: rect)
    let img: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    let imageData:Data = img.jpegData(compressionQuality: compressionQuality)!
    UIGraphicsEndImageContext()
    let imageFinal = UIImage(data: imageData)!

    // preping to save image
    let imgData = imageFinal.pngData()
    let imageFile = PFFileObject(name:"image.png", data:imgData!)
    pg["Image"] = imageFile

    pg.saveInBackground { (succeeded, error)  in
        if (succeeded) {
            // The object has been saved.
            self.AllPages.append(page)
            self.UpdateFishCat { (success) in }
            completion(true)
        } else {
            // There was a problem
            completion(false)
        }
    }
}

     5. In my info input page, I have an action of the submit button:
         a. First, I created a new page element using the template of a class page.
         b. Then I called my function and passed in the page I created.
         c. Finally, if it is successful I move onto the next controller.

@IBAction func submitToggled(_ sender: Any) {
    //create new page
    var newPage = page(fishType: inference, Image: image, desc: descriptionField.text, location: locationField.text!, catchDate: dateField.text!, weight:weightField.text!, dimensions: dimensionsField.text!)
    sessionManager.shared.requestCreateNewPage(page: newPage) { (success) in
        if success {
            //go to diff viewController
            let customViewController = self.storyboard?.instantiateViewController(withIdentifier: "CatchTypeTable") as! CatchTypeTable
                self.navigationController?.pushViewController(customViewController, animated: true)
       }
       else {
            //error
       }
    }
}

Closing Remarks

When I started this project, I had never before interacted with SashiDo and Parse. Like most new things, it was challenging at first, but after sifting through lots of resources and trying to implement the concepts myself, it began to get easier and my understanding grew. I really enjoyed creating this project, and I hope you can learn from the knowledge and skills I gained in doing so. There are a lot of great tips and good practices within this tutorial, and I would love to see posts about other projects with Teachable Machine and SashiDo! Overall, SashiDo is a great backend platform that was really useful in creating this app, and I really recommend it for anyone who is interested in app development. Additionally, Teachable Machine makes machine learning and classification super easy and is great for cool projects like this one!

A big thanks to SashiDo and to all you readers! I hope this was helpful and can’t wait to see where your journey takes you!

Useful links:

My code: https://github.com/CarolineBaillie/FishClassification
SashiDo: https://www.sashido.io/en/
iOS Tensorflow Lite Template: https://github.com/lmoroney/dlaicourse
Install Cocoapods: https://www.youtube.com/watch?v=7Sp7ojClZPU
SashiDo Getting Started Guide: https://blog.sashido.io/sashidos-getting-started-guide/
iOS Parse Documentation: https://docs.parseplatform.org/ios/guide/
iOS Parse Video Playlist: https://www.youtube.com/playlist?list=PLMRqhzcHGw1ZFjFyHGJTTPuvcLbwVCuG4
Connections between elements and file: https://developer.apple.com/library/archive/referencelibrary/GettingStarted/DevelopiOSAppsSwift/ConnectTheUIToCode.html
Navigation programmatically go to next controller (answer 18): https://stackoverflow.com/questions/25326647/present-view-controller-in-storyboard-with-a-navigation-controller-swift
Signing up with Parse: https://docs.parseplatform.org/ios/guide/#signing-up
Logging in with Parse: https://docs.parseplatform.org/ios/guide/#logging-in
Pares Query constraints: https://docs.parseplatform.org/ios/guide/#query-constraints
Teachable Machine Node:
https://github.com/SashiDo/teachablemachine-node
The Awesome Teachable Machine List:
https://github.com/SashiDo/awesome-teachable-machine

DEV Community: CarolineBaillie

Xcode Collection of Useful Functions and Tips

Table of Contents

Extras

Scroll View

Keyboard Dismiss

Backpropagation Function

Loading Icon

Light/Dark mode

Resources

SnapShot: How to Create a Digital Scrapbook in iOS - Part 2

Table of Contents

Map

Setup

Memory Class

Request Memories

Interactive Annotations

Memory Info Page

Add Annotation

New Memory

Delete

Edit

Storing

Closing Remarks

Resources

SnapShot: How to Create a Digital Scrapbook in iOS - Part 1

Table of Contents

Podfile

SashiDo

Outline

Controller Setup

Session Manager

Registration

Current User

Signup

Login

Logout

Part 2

Resources

Fish Classification iOS App with SashiDo and Teachable Machine

Table of Contents

Using Teachable Machine

Classifying the image

Outline

Using SashiDo and Parse

Registration

Signup

Login

Logout

Session Manager

Setting up sessionManager

requestGetPages

requestCreateNewPage

Closing Remarks

Useful links: