Angela Yu Xcode 12 Course - Part 23 (lectures 202 to 209)

Here we go! Having failed miserably of getting much coding done at home, I'm back with a vengeance! Seriously though, I should NOT feel guilty. It's all about when I can actually have the time; it will come and go in phases. When I get to the 'One year' point (around June) then I can review what I have achieved and where I want to go with this. For now, the aim today is to get the Firebase course totally done. Let's go!

Start Time - 13:15

UI Animations

This sounds interesting - I'd assumed it was possible to do your own but having never SEEN it, I wasn't so sure!

So Angela is showing the movement of a circle from left to right.



All sorts of options for duration etc.

So in this section


This is wear we want animation coming up. The text field will move up so it's not obscured by the keyboard.

Challenge - added the UITextFieldDelegate protocol no problems. I've done this before with a text bar!

It means we're setting up this chat view controller to be the delegate for the text field....

Cool, so after some code, we've got the textfield to move up, so it pops up above the keyboard. *This is good stuff and I must come back to it when working on any app with a keyboard!


Cool! It all works! Not too much to type so I'll copy and paste a bit of code -

 let tapGesture = UITapGestureRecognizer(target: self, action: #selector(tableViewTapped))

        messageTableView.addGestureRecognizer(tapGesture)

        

func textFieldDidBeginEditing(_ textField: UITextField) {

        

        

        UIView.animate(withDuration: 0.5) {

        self.heightConstraint.constant = 308

        self.view.layoutIfNeeded()

            

        }

    }

    

    //TODO: Declare textFieldDidEndEditing here:

    

    func textFieldDidEndEditing(_ textField: UITextField) {

        

        UIView.animate(withDuration: 0.5) {

            self.heightConstraint.constant = 50

            self.view.layoutIfNeeded()

        }

    }

    

     @objc func tableViewTapped() {

        

        messageTextfield.endEditing(true)

    }

The order is a bit different here. But lots of interesting stuff! Not really what I was expecting in terms of UIanimations - how the video started was quite separate to the rest of this entry but never mind. 

Sending Messages!

    @IBAction func sendPressed(_ sender: AnyObject) {

        

        messageTextfield.endEditing(true)

        messageTextfield.isEnabled = false

        sendButton.isEnabled = false

        

        let messagesDB = Database.database().reference().child("Messages")

        let messageDictionary = ["Sender": Auth.auth().currentUser?.email, "MessageBody": messageTextfield.text!]

        

    }

The last part of this is to do with dictionaries. Cool!

This extra line is so that the data can be saved automatically. So the data is saved to the database. And the reference to the data. 

messagesDB.childByAutoId().setValue(messageDictionary)

Actually a closure has been used here - the curly bracket bit onwards. Still not 100% sure with those, so I do need to go back over the syntax and concept. After this Angela project!

        messagesDB.childByAutoId().setValue(messageDictionary) {

            (error, reference) in

            if error != nil {

                print(error)

            } else {

                print("Message saved successfully")

            }

        }

Paused at 14:08

Restart at 14:25

So all closure done and the idea of this is to send a message, then clear the text etc. 

Observing for Database Changes

Navigation - all the 'Marks' with comments from Angela are like little bookmarks to easily scroll through the file. Similar with the 'TODO' ones as well.

Casting - changing the type. In this case into a known data type.

The whole 'child' concept is tricky. I need read up on that, as well as the whole closure bit!

So casting used in this function to retrieve the message -

func retrieveMessages() {

        

        let messageDB = Database.database().reference().child("Messages")

        

        messageDB.observe(.childAdded) { (snapshot) in

            let snapshotValue = snapshot.value as! Dictionary<String,String>

            

            let text = snapshotValue["MessageBody"]!

            

            let sender = snapshotValue["Sender"]!

            

            let message = Message()

            message.messageBody = text

            message.sender = sender

            

         

        }

Paused at 14:45 (Break needed!)

Resumed at 15:16!

Lots more code - not worth copying and pasting to be honest. It's complex stuff and plenty to get my head around and learn!

Historical data - keeping messages in the history and having these stored.

Paused at 15:30!

Resumed at 15:36

Security rules for database

{
  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
  "rules": {
    ".read": auth != null,
    ".write": auth != null
  }
}

Basically the read and write needed to change from true to the auth != null. This protects the security.

No only authenticated users can access the database.

Progress Spinner - improving the UX

UX - user experience!

All the print statements go to the console - only for the developer to use. Progress indicators are obviously better!

E.g. logging onto internet - better to have the progress bar or spinner than to leave the user hanging!

Nice! Small touch but looks cool.

Improving UI

UI - User interface!

So the last part now. Tweaks etc.

Chameleon framework - Angela had this imported. A lightweight colour framework. Cool!

 if cell.senderUsername.text = Auth.auth().currentUser?.email as String! {

            

        }

So here if the user's email is the same as the logged on email, then that is the same person. All ok...

 if cell.senderUsername.text == Auth.auth().currentUser?.email as String! {

            

            cell.avatarImageView.backgroundColor = UIColor.flatMint()

            cell.messageBackground.backgroundColor = UIColor.flatMaroon()

        } else {

            

            cell.avatarImageView.backgroundColor = UIColor.flatPlum()

            cell.messageBackground.backgroundColor = UIColor.flatSkyBlue()

        }

        

Such a cool idea - having just a different colour for everyone else! There would be a way of making an array of colours so it were randomised for the other people...

 let colourArray = [UIColor.flatSkyBlue(), UIColor.flatPlum(), UIColor.flatMint(), UIColor.flatPink(), UIColor.flatSand(), UIColor.flatTeal()]

        

        let randomNumber1 = Int.random(in: 0...5)

        let randomNumber2 = Int.random(in: 0...5)

        

  cell.avatarImageView.backgroundColor = colourArray[randomNumber1]

 cell.avatarImageView.backgroundColor = colourArray[randomNumber2]

Not bad! It worked in the sense that the colours varied each time. Not worked in the sense that the colours then stayed as fixed - they keep randomising every time. So not going to post that on Udemy. Still a nice little extra play around!

Finish Time - 16:05 (116 minutes total!)

So chapter and project complete! REALLY interesting one, looking at so many elements! That will do for today as I've been glued to this screen for too long (even with breaks). Next time - most likely Friday, I will do some consolidation rather than moving on. I'm getting there!