DEV Community: MKilmer

MVVM Design Pattern in iOS

MKilmer — Fri, 12 Nov 2021 17:10:42 +0000

MVVM ( Model-View-ViewModel )

You can ask me : "Marcos, what's MVVM? Why use it there? Why not use another?"

## Well, adopting a design pattern will depend on many things. Whether it's a business strategy, be size of what will be developed, testing requirements and so on. In this article, i will show some concepts about MVVM and a code demonstration.

Let's go!!!

MVVM Flow

ViewController / View will have a reference to the ViewModel
ViewController / View get some user action and will call ViewModel
ViewModel request some API Service and API Service will sends a response to ViewModel
ViewModel will notifies the ViewController / View with binding
The ViewController / View will update the UI with data

Project Informations

Use jsonplaceholder REST API
URLSession to fetch data
The table view will show data from service

MVVM ( Model-ViewModel- Model )

M ( Model ) : Represents data. JUST it. Holds the data and has nothing and don't have business logic.

struct Post: Decodable {
  let userId:Int
  let id: Int
  let title: String
  let body: String
}

V ( View ) : Represents the UI. In the view, we have User Actions that will call view model to call api service. After it, the data will through to view ( view model is responsible to do it ) and shows informations in the screen.

class PostViewController: UIViewController {

    private var postViewModel: PostViewModel?
    private var postDataSource: PostTableViewDataSource<PostTableViewCell, Post>?
    private var postDelegate: PostTableViewDelegate?

    private lazy var postTableView: UITableView = {
       let tableView = UITableView()
        tableView.translatesAutoresizingMaskIntoConstraints = false
        return tableView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
        setupConstraints()
        updateUI()
    }

    private func setupViews() {
        postTableView.register(PostTableViewCell.self, forCellReuseIdentifier: PostTableViewCell.cellIdentifier)
        self.view.addSubview(postTableView)
    }

    private func setupConstraints() {
        NSLayoutConstraint.activate([
            postTableView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            postTableView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            postTableView.widthAnchor.constraint(equalTo: self.view.widthAnchor),
            postTableView.heightAnchor.constraint(equalTo: self.view.heightAnchor),
            postTableView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            postTableView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        ])
    }
    private func updateUI() {
        postViewModel = PostViewModel()
        postDelegate = PostTableViewDelegate()
        postViewModel?.bindPostViewModelToController = { [weak self] in
            self?.updateDataSource()
        }
    }

    private func updateDataSource() {
        guard let posts = postViewModel?.getPosts() else { return }
        postDataSource = PostTableViewDataSource(cellIdentifier: PostTableViewCell.cellIdentifier, items: posts, configureCell: { (cell, post) in
            cell.configureCell(post: post)
        })

        DispatchQueue.main.async {
            self.postTableView.delegate = self.postDelegate
            self.postTableView.dataSource = self.postDataSource
            self.postTableView.reloadData()
        }
    }
}

PostTableViewCell

class PostTableViewCell: UITableViewCell {
    static public var cellIdentifier: String = "PostTableViewCellIdentifier"

    private lazy var titleLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0
        label.lineBreakMode = .byWordWrapping
        label.textColor = .black
        label.font = UIFont.boldSystemFont(ofSize: 13)
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    private lazy var bodyLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0
        label.lineBreakMode = .byWordWrapping
        label.textColor = .blue
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    private var postStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.spacing = 3
        stackView.distribution = .fill
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupViews()
        setupConstraints()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        titleLabel.text = ""
        bodyLabel.text = ""
    }

    public func configureCell(post: Post) {
        titleLabel.text = post.title
        bodyLabel.text = post.body
    }

    private func setupViews() {
        contentView.addSubview(postStackView)
        postStackView.addArrangedSubview(titleLabel)
        postStackView.addArrangedSubview(bodyLabel)
    }
    private func setupConstraints() {
        NSLayoutConstraint.activate([
            postStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
            postStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            postStackView.topAnchor.constraint(equalTo: contentView.topAnchor),
            postStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
    }
}

PostTableViewDataSource


class PostTableViewDataSource<CELL: UITableViewCell, T>: NSObject, UITableViewDataSource {

    public var cellIdentifier: String
    public var items: Array<T>
    public var configureCell: (CELL, T) -> () = {_,_ in }

    init(cellIdentifier: String, items: Array<T>, configureCell: @escaping  (CELL, T) -> () ) {
        self.cellIdentifier = cellIdentifier
        self.configureCell = configureCell
        self.items = items
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        items.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as? CELL {
            let item = items[indexPath.row]
            self.configureCell(cell, item)
            return cell
        }

        return UITableViewCell()
    }
}

PostTableViewDelegate

class PostTableViewDelegate: NSObject, UITableViewDelegate {
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 300.0
    }
}

VM ( ViewModel ) : Responsible to call service class to fetch data from the server.The ViewModel don't know what the views and what thew view does.

class PostViewModel: NSObject {
    private var postService: PostService?
    private var posts: Array<Post>? {
      didSet {
        self.bindPostToViewController()
      }
    }

    override init() {
        super.init()
        self.postService = PostService()
        self.callGetPosts()

    }

    public var bindPostToViewController: (() -> ()) = {}

    private func callGetPosts() {
        postService?.apiToGetPosts { (posts, error) in
            if error != nil {
                self.posts = posts
            }
        }
    }
}

posts is a property observer, so when we have API response, we will populate posts variable and call bindPostToViewController. Once we have data from view model, we can update the UI. bindPostToViewController will tell us when the response is already.

PostService

class PostService {
    private let postsPath = "https://jsonplaceholder.typicode.com/posts"

    public func apiToGetPosts(completion: @escaping([Post]?, Error?) -> ()) {
        guard let url = URL(string: postsPath) else { return }

        URLSession.shared.dataTask(with: url) { (data, response ,error) in
            if error != nil { completion(nil, error); return }

            guard let dataReceive = data else { return }

            do {
                let posts = try JSONDecoder().decode([Post].self, from: dataReceive)
                completion(posts, nil)
            } catch {
                completion(nil, error)
            }
        }.resume()
    }
}

Thanks for all! 🤘

I hope that i help you. Any question, please, tell me in comments.

Github Project

SOLID Principles in iOS Development

MKilmer — Sat, 06 Nov 2021 10:23:18 +0000

SOLID Principles in iOS Development

😩 Ok, you probably already hear this term, but in practice, what's mean? When uses? How uses? Keep reading for FINALLY LEARN

First of all, SOLID is a s a mnemonic acronym for five design principles intended to make software design more understandable, flexible, and maintainable

In all tutorial, i will show SOLID Principles in action and codes that don't follow SOLID

So, let's go 😁

S - Single Responsibility Principle

A classe should have one reason to change ( to exists )

Tips to apply

Ask yourself for every entity ( classes / functions ) : this entity, does more than one thing?
You shouldn't have use the word and when have to talk the responsibility to entity

💢 NOT Single Responsibility Principle apply

class Handler_NOT_SOLID {

    func handle() { 

        let data = requestDataToAPI()
        guard let dataReceive = data else { return }
        let array = parse(data: dataReceive)
        saveToDB(array: array)

    }

    private func requestDataToAPI() -> Data?{
        // send API request and wait the response
        return nil
    }

    private func parse(data:Data)->[String]?{
        // parse the data and create an array
        return nil
    }

    private func saveToDB(array:[String]?){
        // save array in a database
    }
}

Can you see?

Handler_NOT_SOLID class have several responsibilities

Send request to API
Create an array with data receive
Save array in a database

👍 Single Responsibility Principle apply

class Handler_SOLID {

    let apiHandler: APIHandler
    let parseHandler: ParseHandler
    let dbHandler: DBHandler

    init(apiHandler: APIHandler, parseHandler: ParseHandler, dbHandler: DBHandler) {
        self.apiHandler = apiHandler
        self.parseHandler = parseHandler
        self.dbHandler = dbHandler
    }
}


class APIHandler {

    func requestDataToAPI() -> Data?{
        // send API request and wait the response
        return nil
    }
}

class ParseHandler {
    func parse(data:Data) -> [String]?{
        // parse the data and create an array
        return nil
    }
}

class DBHandler {
    func saveToDB(array:[String]?){
        // save array in a database
    }
}

Now, each entity have just one responsibility

O - Open/Closed Principle

A software entity should be open to extension, but closed for modification.

Tips to apply

If you want to modify a class every time a new behavior is added, something isn't quite right
If/else/switch statements don't be used to modify a behavior

💢 NOT Open/Closed Principle apply

class Vehicles_NOT_SOLID {

    func printData() {
        let cars = [
            Car_NOT_SOLID(name: "Batmobile", color: "Black"),
            Car_NOT_SOLID(name: "SuperCar", color: "Gold"),
            Car_NOT_SOLID(name: "FamilyCar", color: "Grey")
        ]

        cars.forEach { car in
            print(car.printDetails())
        }

        let buses = [
            Bus_NOT_SOLID(type: "School bus"),
            Bus_NOT_SOLID(type: "Minibus"),
            Bus_NOT_SOLID(type: "Minicoach")
        ]

        buses.forEach { bus in
            print(bus.printDetails())
        }
    }

}

class  Car_NOT_SOLID {
    let name:String
    let color:String

    init(name: String, color: String) {
        self.name = name
        self.color = color
    }

    func printDetails() -> String {
        return "name : \(name) color :\(color)"
    }

}


class Bus_NOT_SOLID {
    let type:String

    init(type: String) {
        self.type = type
    }

    func printDetails() -> String { 
        return "bus type : \(type)"
    }
}

Can you see?

When printData receive other type of object, we have to add more rules to work

If you want to add the possibility to print also the details of a new class, we should change the implementation of printData every time we want to log a new class

👍 Open/Closed Principle apply

protocol Printable {
    func printDetails() -> String
}

class Vehicles_SOLID {

    func printData() {
        let cars:[Printable] = [
            Car_SOLID(name: "Batmobile", color: "Black"),
            Car_SOLID(name: "SuperCar", color: "Gold"),
            Car_SOLID(name: "FamilyCar", color: "Grey"),

            Bus_SOLID(type: "School bus"),
            Bus_SOLID(type: "Minibus"),
            Bus_SOLID(type: "Minicoach")
        ]

        cars.forEach { car in
            print(car.printDetails())
        }
    }
}

class Car_SOLID:Printable {
    let name: String
    let color: String

    init(name: String, color: String) {
        self.name = name
        self.color = color
    }
    func printDetails() -> String {
        return "name : \(name) color :\(color)"
    }

}

class Bus_SOLID: Printable {
    let type: String

    init(type: String) {
        self.type = type
    }

    func printDetails() -> String {
        return "bus type : \(type)"
    }
}

We don't need change behavior of printData, just make a layer between printData and the class

L - Liskov Substitution Principle

Objects should be replaceable with instances of their subtypes without altering the correctness of that program.

Tips to apply

Instead of one monolithic interface, break an interface up based on what implementers should be doing
Keeps consumers from having to much power

💢 NOT Liskov Substitution Principle apply

class Rectangle_NOT_SOLID {
    var width: Double = 0
    var height: Double = 0

    var area: Double {
        return width * height
    }


}

class Square_NOT_SOLID: Rectangle_NOT_SOLID {
    override var width: Double {
        didSet {
            height = width
        }
    }
}

// MARK: - Implementations 
 func printArea(of rectangle: Rectangle_NOT_SOLID) {
     rectangle.width = 10
     rectangle.height = 4

     print(rectangle.area)
 }

 let rect = Rectangle_NOT_SOLID()
 printArea(of: rect) // 40
 let square = Square_NOT_SOLID()
 printArea(of: square ) // 40

See that printArea(of rectangle:Rectangle_NOT_SOLID) return the same result with different types instead return specific value of each class

👍 Liskov Substitution Principle apply

protocol Polygon {
    var area :Double { get }
}

class Rectangle_SOLID: Polygon {

    let width:Double
    let height:Double

    init(width: Double, height: Double) {
        self.width = width
        self.height = height
    }

    var area: Double {
        return width * height
    }

}

class Square_SOLID: Polygon {
    let side:Double

    init(side: Double) {
        self.side = side
    }

    var area: Double {
        return pow(side, 2)
    }
}

/// MARK: - Implementations  

 func printArea(of polygon:Polygon){
     print(polygon.area)
 }

 let rect = Rectangle_SOLID(width: 10, height: 40)
 printArea(of: rect) // 400.0
 let square = Square_SOLID(side: 10)
 printArea(of: square) // 100.0

I - Interface Segregation Principle

(M)any client-specific interfaces are better than one general-purpose interface

Tips to apply

Instead of one monolithic interface, break an interface up based on what implementers should be doing
Keeps consumers from having to much power

💢 NOT Interface Segregation Principle apply

//MARK:- Fat Interface (Protocol)
protocol GestureProtocol {
    func didTap()
    func didLongPress()
    func didSwipe()
}

class RichButton_NOT_SOLID: GestureProtocol {

    func didTap() {
        print("tap button")
    }

    func didLongPress() {
        print("long press")
    }

    func didSwipe() {
        print("swipe")
    }

}

class PoorButton_NOT_SOLID: GestureProtocol {
    func didTap() {
        print("tap")
    }

    func didLongPress() {}

    func didSwipe() {}

}

See that PoorButton_NOT_SOLID class have methods that not are usable

👍 Interface Segregation Principle apply

protocol TapGesture {
    func didTap()
}

protocol LongPressGesture {
    func didLongPress()
}

protocol SwipeGesture {
    func didSwipe()
}

class RichButton_SOLID: TapGesture, LongPressGesture, SwipeGesture{

    func didTap() {
        print("tap button")
    }

    func didLongPress() {
        print("long press")
    }

    func didSwipe() {
        print("swipe")
    }


}


class PoorButton_SOLID: TapGesture {
    func didTap() {
          print("tap button")
      }
}

Now we remove all unnecessary methods

D - Dependency Inversion Principle

High-level modules should not depend on low-level modules. Both should depend on abstractions.

Tips to apply

We’re used to this : High level -> (uses) Low level
High level -> (expects) interface <- ( fulfills ) low level

💢 NOT Dependency Inversion Principle apply

class SaveData_NOT_SOLID {

    let filesSystemManager = FilesSystemManager_NOT_SOLID()

    func handle(data:String){
        filesSystemManager.save(data: data)
    }
}

class FilesSystemManager_NOT_SOLID {

    func save(data:String){
        // save data
    }
}

With this, we have just a way to save Data. If we want use any DataBase?

👍 Dependency Inversion Principle apply


protocol Storage {
    func save(data:Any)
}

class SaveData_SOLID {
    let storage:Storage

    init(storage: Storage) {
        self.storage = storage
    }

    func handle(data: Any){
        self.storage.save(data: data)
    }
}

class FilesSystemManager_SOLID: Storage {
    func save(data: Any) {}
}

class MySQLDataBase: Storage {
    func save(data: Any) {}
}

Now, we can use any storage method

👊 Thanks for read!! I hope that you have understand all principles about SOLID and how apply in your day by day for build a better software. In doubt, please put your comment below and i will try to help.

Github Project

How be less stressed?

MKilmer — Sat, 16 Nov 2019 09:11:24 +0000

I decided create this post, because i see much people talk about be more "productive", setting absurd habits and goals. However, stay relaxed is very important for a good life and be more productive.

That is why, decided search about methods and habits that could help people become less stressed.

Meditation

Yes, meditation for many may seem bullshit, but it is not. Neither is necessary learn with an expert or spend a lot of your time. Just take a moment to do "nothing", just close your eyes and clear your thoughts. A thing that help me to clear my mind is imagine that I'm lying in a totally white room where no have sound and other things, just me and a white room.

I normally do meditation when I wake up and when I will sleep. But feel free for make it or other meditation in any moment of your day.

Exists a lot of app that can help you with meditation, I use the Meditopia, it have several features like breath exercises, music for relax and guided meditation.

Breath

Is a of my favorite methods for relax, because help to calm my mind and can take a several benefits for the health, like blood pressure balance and increased lung capacity.

among the various breathing techniques, these are my favorite :

Shavasana : basically consists in lying down, leaving an arm extended and the other under the chest. The secret is to inflate the diaphragm like a bladder and slowly let go.

Bramari : sit on a chair with an upright posture and move mouth muscles trying to reproduce sound of a bee.

i like join meditation with breath exercises, because the breath help me have more focus.

Music

Music, from the Greek, "the art of the muses". For me, one of the most beautiful arts. Each has a musical style, but it is know that Music Classic and Instrumenal help in concentration and stimulates the cognitive development. Other musical style that help in keep focus is LoFi, music genre that has a slower beat and the sound more grave.

That is why I decided make two playlists that could help people to be less stressed.

LoFi : Low Wifi

Classic Music : NoStressYesClassic

Conclusion 😄 😃 😆

It was a pleasure to me write about the habits and methods that I use for keep me less stressed. Feel free for share your tips with others. Thanks for all! 🤘 🤘 🤘

An Introduction to UX

MKilmer — Sun, 03 Nov 2019 14:37:02 +0000

This post is about what I studied about UX for the Apple Developer Academy selection process.

Throughout the post, I talk about product, understand product as a service, software, anything that anyone can use.

What is UX?

UX means User eXperience, defining the relationship that one person have one product ( service, software ).

The relationship between person and product can be measure in terms of experience user, this experience may be NEGATIVE or POSITIVE.

UX = bigger preocupation with the user

The UX still has the function of merging User Goals with Business Goals.

Micro & Macro

The User eXperience can be as much in a MICRO aspect, for example, the reformulation of user experience with a website shopping car( more related with the nice design), as well as MACRO, for example , such as the desire to buy, of brand trust (more related with the user feel and sensation ).

What isn't UX

Have in mind that product interface is not UX. The interface it's part of UX.Don´t forget, the user experience references the use of something.

It's not about a method, science or tecnologie, but the relationship between person with a product.

How make/project UX?

It’s not about project the experience, but project for the experience. For example, not is possible project the happiness of someone when making a purchase. However, it’s possible do something to user have a happy experience.

For example, if you want user feel safer for make a purchase, then is projected an environment that transmits security, as an indication of a padlock ( representing data confidentiality ).

Don't forget that you don't project something for you but for the other, therefore always imagine how the other feel. One of the most ways do make this, is use the aproach of "User-Centered Design", where every action are based what the user wants and what the user needs.

How to Define The Objective of your Product

Before we start talk about objectives, keep in your mind that a good product is one that meets your expectations. So, if you don't know your product proposal well, maybe you have difficulties explaining this for someone.

So before you define your target public, define your product well. Don't mind putting too many features into one product, leave only what is really needed. Otherwise, the user may has difficulty using your product, triggering a negative experience and making that the user don't use your product again.

What is a Persona?

Personas are documents that describes fictional people, based in results of a search with real users.

It's interessant interview extreme profiles ( that bring both positive and negative positions to your product proposal ), making a amplitude of characteristics of public.

To trace a good persona, isn't enough look Google Analytics for example. Is necessary sit and talk with the users, because this way, it's possible know much better the necessities of user.

The personas can be much util and generate benefits for your design team when used as a connection between search phase and a information architecture ( content structuring ).

The personas from to point view of Marketing, often take into account demographics data, labeling users. It may be that this type of persona acceptable in advertising campaigns, but you won't be able to make design decisions thinking about User eXperience with only this.

“Demographics can cause assumptions, shortcuts in thinking, and subconscious stereotypes by team members.” Indi Young — Describing Personas

Process of User eXperience ( in Garrett's view )

This process is constituted per layers, whose overlaps go of a level more abstract to a more concrete.

Strategy : regards what is expected of the product ( of point view from who want offer a product / service ) and too what users want.

Scope : survey of requirements and specs of functionality and characteristics that the product may has and how the project will be lead.

Structure : define how content will organize, defining what is less important and what is more important to be displayed and found by the user e how to fit this in the technical specifications and product usability.

Skeleton : when it draws an organization of the elements that make up an interface, including considering what types of components are best suited to display as information and enable features for users.

Surface : It's the final interface, what the user will see and interact with.

Conclusion 📙

I liked study about UX universe and sure I will not let to study about UX. Recently I started a read The Design of Everyday Things by Don Norman and found much interesting your approach about peoples and products.

An Introduction to Basic Types in Elixir

MKilmer — Sun, 27 Oct 2019 12:29:21 +0000

Before all, this post it aims to share and learn a new programming language ( called Elixir) and new knowledges about functional programming world.Like any begin in any programming language, it important start learn about syntax and the basic data types. So, let's go!

just wait a little longer, I swear it will be important.I need talk about print to the console in Elixir.

Console

If you are running on Windows, there is a chance your terminal does not use UTF-8 by default. You can change the encoding of your current session by running chcp 65001 before entering IEx.

Basicaly, exists two way for print to console in Elixir :

IO.puts : requires the argument to be either a string, or a struct that implements the String.Chars protocol.

IO.inspect : can print an arbitrary elixir term, like a list of strings.

ok, now let's go!

Integer

Represent numbers without floating point.These are the methods of this kind :

sum

sum = 7 + 1
IO.puts(sum)

output : 8

division ( div( ) )

division = div(9,2)
IO.puts(division)

output : 4
# the div() method will always take integers as parameters and return integer values.

rem ( division remainder )

remMethod = rem(10,3)
IO.puts remMethod

output : 1
# Elixir allows you to drop the parentheses when invoking named function.

subtraction

sub = 9-18
IO.puts sub

output : -9

You can use is_integer() method to verify if a value is integer

isOrNotInteger = "9"
IO.puts is_integer(isOrNotInteger)

output : false

Binary, Octal and Hexadecimal

binary : begins with 0b
octal : begins with 0o
hex : begins with 0x

bin = 0b1010
octal = 0o666
hex = 0x1D

Both binary, octal and hexadecimal types allow the use of the is_integer () method. If you use IO.puts, you can represent these values in decimal basis.

IO.puts is_integer(bin)
IO.puts is_integer(octal)
IO.puts is_integer(hex)

output : 
true
true
true

IO.puts (bin)
IO.puts (octal)
IO.puts (hex)

output :
10
438
29

Float
Represent numbers with floating point

sum

sum = 12.0 + 1
IO.puts(sum)

output : 13.0
# note that if you have an operation that has a floating point number, the end result will be a float.

subtraction

sub = 12.01 - 7.89
IO.puts(sub)

output : 4.12

division ( / )

div = 9/2
IO.puts(div)

output : 4.5
# note that it's allow use integers in operator / , but always return a float number.

rem method does not work with floating point numbers

IO.puts( rem(12.9,2) )
output :
 (ArithmeticError) bad argument in arithmetic expression: rem(12.9, 2)

Booleans
Elixir basicaly have two values for represent booelans values, true and false

IO.puts true
IO.puts false
IO.puts false == false

output :
true
false
true

Atom

An atom is a constant whose value is its own name, like Symbols in others languages. Often they are used to express the state of an operation.

If you enter in Interative mode ( run iex ), after the end of a successful operation, an :ok is always returned.

iex(1)> IO.puts "atoms"
atoms
:ok

Elixir allows you to skip the leading : for the atoms : nil , false, true

IO.puts :nil == nil
IO.puts :false == false
IO.puts :true == true

output :
true
true
true

IO.puts :elixir == "elixir"
IO.puts :elixir == :elixir

output :
false
true

String

Strings in Elixir are delimited by double quotes, and they are encoded in UTF-8.The String module contains a bunch of functions that operate on strings, see in HexDocs.

Strings are represented internally by binaries which are sequences of bytes. Single quotes aren't represented like binaries.

doubleQuotes = "DEV"
singleQuotes = 'DEV'
IO.puts is_binary(doubleQuotes)
IO.puts is_binary(singleQuotes)

output : 
true
false

concatenation

Unlike some languages, elixir does not allow the + operator to join strings, in this case, we use <>

IO.puts "DEV" + "Community"

output : 
(ArithmeticError) bad argument in arithmetic expression: "DEV" + "Community"

IO.puts "DEV" <> "Community"

output :
"DEVCommunity"

string interpolation

Elixir allow you to use string interpolation

world = :world
IO.puts "hello #{world}"

output :
hello world

break line and multiple lines

# use \n for break line
IO.puts "hello\nworld"

output :
hello
world

# multiple lines
multiLine = "
breathe
think
continues"
IO.puts multiLine

output :
breathe
think
continues

preview of some methods

dev = "DEV"
IO.puts is_binary dev 
IO.puts byte_size dev
IO.puts String.length dev

output : 
true
3
3

split = String.split("Led Zeppelin", " ")
IO.inspect split

output : 
["Led", "Zeppelin"]

It was a pleasure learning and writing a little about Elixir, any questions or criticism, please comment below 🤘 🤘 🤘

How Create Relationships with Mongoose and Node.js ( with real example )

MKilmer — Sun, 20 Oct 2019 14:27:31 +0000

Before all, not exists JOIN here! Basically is saved the _id from one collection to another collection ( {type: mongoose.Schema.Types.ObjectId,ref:'NameOfSchema'}).Where the data related it select with the populate() method.

The ideia of the example
Will be a system that allows Users to register and that these users can create Posts

required dependencies

    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "mongoose": "^5.7.5",
    "nodemon": "^1.19.4"

Project Structure

├── index.js

const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const app = express();

// middlewares
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
mongoose.connect('mongodb://localhost:27017/relationships',{
    useNewUrlParser: true,
    useUnifiedTopology: true 
})

// routes
app.use(require('./app/routes'));

app.listen(3000, () => console.log('server on!'));

├── models
└── user.js

const mongoose = require('mongoose');
const UserSchema = new mongoose.Schema({
    name :{
        type:String,
        required: '{PATH} is required!'
    },
    bio: {
        type:String
    },
    website:{
        type:String
    },
    posts : [
        {type: mongoose.Schema.Types.ObjectId,ref:'Post'}
    ]
},{
    timestamps: true
})

module.exports = mongoose.model('User',UserSchema);

├── models
└── post.js

const mongoose  = require('mongoose');
const PostSchema = new mongoose.Schema({
    title:{
        type:String,
        required: '{PATH} is required!'
    },
    subtitle :{
        type: String
    },
    user :{
        type:mongoose.Schema.Types.ObjectId,
        ref:'User'
    }
},{
    timestamps:true
})

module.exports = mongoose.model('Post',PostSchema);

└── user.js ( controller )

const User = require('../../models/user');

module.exports = {
    create : async (req, res) =>{
        const { name, bio, website } = req.body;
        const user = await User.create({
            name,
            bio,
            website
        })

        return res.send(user)
    },

    find : async (req, res) => {
        const user = await User.find()
        return res.send(user)
    },
    postsByUser : async (req, res) => {
       const { id } = req.params;
       const user = await User.findById(id).populate('posts');

        res.send(user.posts);
    }
}

notice that const user = await User.findById(id).populate('posts') is equivalent to :

 user.posts.forEach(async element => {
           const post = await Post.findById(element);
              console.log(post);
        });

└── post.js ( controller )

const Post = require('../../models/post');
const User = require('../../models/user');

module.exports = {
    create : async (req, res) => {

        console.log(req.params);
        user = req.params;
        id = user.id;
        const { title, subtitle} = req.body;
        const post = await Post.create({
            title,
            subtitle,
            user:id
        });
        await post.save();

        const userById = await User.findById(id);

        userById.posts.push(post);
        await userById.save();

        return res.send(userById);
    },
    userByPost : async (req,res)=>{
        const { id } = req.params;
        const userByPost = await Post.findById(id).populate('user');
        res.send(userByPost);
    }
}

└── routes.js

const express = require('express');
const router = new express.Router;
const User = require('./controllers/user/user');
const Post = require('./controllers/post/post');
router.get('/',(req,res)=>res.send('ok'));
// user routes
router.post('/user/create',User.create);
router.post('/user/find',User.find);
router.post('/user/find/post/:id', User.postsByUser);
// post routes
router.post('/post/create/:id', Post.create);
router.post('/post/populate/:id',Post.userByPost);

module.exports = router;

configure └── package.json
to use nodemon in your project, set "start" key in "scripts",passing the nodemon command and the application root filename.

"scripts": {
    "start": "nodemon index.js"
  },

after this, run command "npm start" in your terminal and the application will restart the server every time any files of your project are changed, making development more productive.

Final Result

thanks for everything! 😄

SCRUM Without Winding

MKilmer — Sat, 19 Oct 2019 14:53:15 +0000

SCRUM

SCRUM is framework that helps in fast and secure product development.

When to use?

When you have the mastery of technologies and the requirements of an application, there is no need to implement an agile methodology. In this case, the Layer Method can be used (where each step is well defined and done linearly). When requirements are not well defined or have no mastery of technologies, it is essential to use some agile methodology, such as SCRUM.

The Pillars of SCRUM

Transparency : Process transparency, delivery requirements and status. That is, everyone involved understands the functionality of the application as well as the time and effort required to implement something.

Inspection : Constant inspection of everything being done, so that no functionality is no longer implemented and those involved are always clear about what is being done.

Adaptation : Adaptation of both process and product to changes. Adaptations are always something complicated, of course, must meet the pre-established requirements, not departing much from what has been proposed. Regarding the process, deadlines and phases can be changed.

SCRUM Roles
We have three roles: Product Owner/SCRUM Master/ Dev Team

Product Owner

It is the central point with product leadership powers, and it is solely responsible for deciding which features and functionality will be built and in which order the processes should occur.

SCRUM Master

Responsible for helping everyone involved to understand SCRUM values, principles and practices. It can be understood as a facilitator, solving doubts and uniting people, not being boss of anyone.

Dev Team

It is the people who will actually build the project, the team must self-organize to fulfill what was passed by the Product Owner.

SCRUM Cycles

PRODUCT BACKLOG : At this stage, the Product Owner should give the general idea of what will be developed and present the features. Being in this phase defined the degrees of importance of the functionalities.

SPRINT : Period of time that Product Backlog functionality should be done. Being each Sprint made in a Time Box (time to complete a task) and each must have more or less time interval.

SPRINT PLANNING : Before each Sprint, a Sprint planning meeting is held, where BackLog is created (features that fit into a Sprint).At this stage, every day, members gather to answer three questions: What did you do yesterday? / What will you do today ? / What are your obstacles?

SPRINT REVIEW : After attending a Sprint, an assessment is made, in which the product is evaluated and adapted and verified if what is being done is as expected. It is the presentation of what was done in Sprint. It aims to verify what was developed.

RETROSPECTIVE : At this stage, an analysis is made of all that was done, as well as the habits that led to success and the habits that disrupted the teams.

DELIVERY STAGE : After all these processes, there is the end result of a product or the implementation of functionality that is testable to interested users.

If you can, Leave a comment saying your experiences with SCRUM.Thank you for everything! 😎

My First Hackathon ( an amazing experience )

MKilmer — Sun, 13 Oct 2019 13:08:04 +0000

from the start

I applied for this event as a way to challenge myself and network. the hackathon took place at AccessOne, a company dedicated to identity and access management.The tecnologies used was React and C#,being that I was responsible for FrontEnd ( it was really a challenge because it had been a long time since I worked with React ).

the challenge proposed

We had the challenge build a API and an client application that could register computers and receive user commands and execute these commands on a machine (Windows or Linux).

organization phase

After the presentation of the challenge and the formation of the teams (in this case, a pair), we started the Kanban Board, where we were deciding what functionality we needed and what tools / libraries we would use. We also defined which commands we would execute.

hands on code

So is here that magic happens.I started thinking about the division of the screen components, which were basically a component for the navigation menu, registration table (computers and computer groups), making it possible to insert new computers and update the data of already registered. My partner was then responsible for building the .NET API.

the bug phase ❌

After assembling the screen components and my partner building the API, the time has come to unite the applications and behold BOOM! The errors start to appear. We face many problems with SSL Certificate. We spent a lot of time getting applications to communicate (we found out later that all participants experienced this problem). After solving the problems, there was little time to start the presentation phase, so we were able to pull data from the bank and make the entries, leaving the other features unfinished

apresentation phase

After all, it was time for the presentations, to my surprise, all teams had a problem with SSL or another communication problem and couldn't implement everything on time. I just have to thank AccessOne for the opportunity and my competition partner Alan Soder for the good teamwork.

`tell us a little bit about your experiences, it would be really cool to share it with others` ✔️ 🔗

Facebook Auth ( Node.js and Passport.js )

MKilmer — Sun, 06 Oct 2019 14:41:53 +0000

In this week, i learned about auth with social networks ( in this case, auth with Facebook ). I created a simple API with Node.js and Passport.js ( auth API ). So, let's code !

Passport.js
Passport is authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped in to any Express-based web application. A comprehensive set of strategies support authentication using a username and password, Facebook, Twitter, and more.

Before code, is necessary make some configurations - get API key in Facebook Developers. I found a video explaining how to make the settings : https://www.youtube.com/watch?v=_hF099c0A9M

passes as body in the request json: (use Postman/Insomia)


{
 "access_token": "YOUR ACCESS TOKEN IN FACEBOOK DEVELOPER"
}

required dependencies


"dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^8.1.0",
    "express": "^4.17.1",
    "express-jwt": "^5.3.1",
    "passport": "^0.4.0",
    "passport-facebook": "^3.0.0",
    "passport-facebook-token": "^3.3.0",
    "mongoose": "^5.7.1"
  }

project structure

├── index.js 
├── passport.js 
└── app
 └── routes.js
 └── models
    └── user.js
└── .env

index.js

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();
const app = express();

// allow your application to be consumed
app.use(cors());

// mongodb local 
mongoose.connect(process.env.MONGODB_URL_DEV, {
    useUnifiedTopology: true ,
    useNewUrlParser : true
})

app.listen(3333, () => console.log('server on !'))

.env

MONGODB_URL_DEV=mongodb://localhost:27017/YOUR_NAME_PROJECT
PRIVATE_KEY=YOUR_KEY_PRIVATE
clientID=YOUR_CLIENT_ID
clientSecret=YOUR_CLIENT_SECRET

└── models └── user.js

const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
    name : String,
    facebook_id : String,
    email: String,

});

module.exports = mongoose.model('AuthFacebook',UserSchema);

passport.js

const passport = require('passport');
const FacebookTokenStrategy = require('passport-facebook-token');
const User = require('./app/models/user');
require('dotenv').config();

passport.use('facebookToken', new FacebookTokenStrategy({
    clientID: process.env.clientID,
    clientSecret:process.env.clientSecret
}, async (accessToken, refreshToken, profile, done) => {
    try {
        if( await User.findOne({'facebook_id':profile.id})) return console.log('this account is already registered!')
        const email = profile.emails[0].value;
        const { id: facebook_id, displayName: name } = profile;
        const user = await User.create({
            email,facebook_id,name
        })
        await user.save();

        console.log(user)
    }catch(error){
        done(error,false,error.message)
    }
}));

routes.js

const express = require('express');
const router = new express.Router;

router.post('/user/signin/facebook',passport.authenticate('facebookToken',{session:false}))

module.exports = router;

SEE THE RESULT

how to join open source projects?

MKilmer — Sun, 29 Sep 2019 14:53:35 +0000

For beginners, what are the tips for getting started in open source projects? Tell us about the difficulties, the first projects you participated in and what is the experience of participating in this type of project.

What opportunities did this activity bring you: portfolio, job, network, knowledge ...?
Right now for beginners what languages would be cool for beginners to start with ?

Tell us if you would have any projects to recommend for beginners

thanks for all !! 🤘 😄

Demystifying CSS ( A Pratical Approach ) Part. I

MKilmer — Sun, 22 Sep 2019 12:07:23 +0000

I decided write a tutorial about CSS, demystifying some properties and concepts about css. this is a first part from a series of posts. then, enjoy!

Margin vs Padding

Margin : Defines the exterior space of an elements relative to browser elements. For examples : want give a space of 10px to a button in relation to top of page. Therefore, margin property defines the margins of a element.

margin used alone implies give a margin in top, left, right and bottom with the same spacing values, however It's still possible defines specific values for each sense.

margin-top : top spacing
margin-bottom : bottom spacing
margin-right : right spacing
margin-left : left spacing

Examples

element without margin

element with margin

That is, from the margin, it is possible to define the same spacing value for all directions, as it is possible to select specifically which directions will have a spacing.

Padding : Sets the spacing relative to the edge of an element. That is, defines the horizontal and vertical spacing of an element within a larger element.

Like margin, the padding property can define spacing in four directions: top, bottom, right and left.

Examples

element without padding

element with padding

Conclusion 🎉

So this first part of the "Demystifying CSS (A Pratical Approach)" series came to an end. Thanks for everything and wait for the other parts!

How to use React Native Gesture Handler and React Navigation ( Side Menu Example )

MKilmer — Sun, 15 Sep 2019 17:16:11 +0000

So I decided to write this post because I had some problems implementing Gesture Handler on React Native and some friends had it too.

But isn't it just looking at the React Native Gesture Handler documentation and implementing the code? So, React-Native-Gesture-Handler supports autolinking on Android but the problem is that it is not yet compatible with AndroidX.

What is Gesture Handler?

Declarative API exposing platform native touch and gesture system to React Native. React Native Gesture Handler provides native-driven gesture management APIs for building best possible touch-based experiences in React Native.

What is React Navigation?

React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution written entirely in JavaScript (so you can read and understand all of the source), on top of powerful native primitives.

Versions of dependencies

 "dependencies": {
    "react-native": "0.60.5",
    "react-native-gesture-handler": "1.3.0",
    "react-navigation": "3.11.1",
    "jetifier": "^1.6.4
  }

Instalation

  yarn add react-native-gesture-handler@1.3.0
  yarn add react-navigation@3.11.1
  yarn add jetifier

Now just follow the React Navigation documentation steps to deploy on Android and IOS.

So how to solve the problem with Gesture Handler? Jetifier is the solution. It helps make the library compatible with your AndroidX project by converting all dependency packages at compile time.

Steps to Resolution

1.Open the project package.json file and add this line to the scripts section:

 "postinstall" : "npx jetify"

2.Now run npm install or yarn

3.Code!

How Implement Side Menu

project structure


├── src                    # source folder
└── screens
  └── SideDrawer           # screen components
  └── HomeScreen             
├── App                    # createAppContainer

└── SideDrawer.js

import React, { Component } from 'react';
import {
    View,
    Text,
    Button,
    StyleSheet
} from 'react-native';


class SideDrawer extends Component{
    render(){
        return(
            <View style={styles.main}>
                <Text>SideMenu</Text>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    main : {
        flex : 1,
        alignItems:'center',
        justifyContent:'center',
        fontWeight:'bold'
    }
})
export default SideDrawer

└── HomeScreen.js

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Button
} from 'react-native';

class HomeScreen extends Component{
    render(){
        return(
            <View style={styles.main}>
               <Button
                title={"Open Side Menu"}
                onPress = {()=> this.props.navigation.openDrawer()}
               />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    main : {
        flex : 1,
        alignItems:'center',
        justifyContent:'center'
    }
})
export default HomeScreen

├── App.js

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Button,
  Text
} from 'react-native';
import { createAppContainer, createDrawerNavigator } from 'react-navigation';
import HomeScreen from './src/screens/HomeScreen';
import SideDrawer from  './src/screens/SideDrawer';

const App = createAppContainer(
  createDrawerNavigator({
    Home : HomeScreen,

  },{
    contentComponent : SideDrawer
  })
)



export default App;

Final Result 😆 😎

DEV Community: MKilmer

MVVM Design Pattern in iOS

MVVM ( Model-View-ViewModel )

You can ask me : "Marcos, what's MVVM? Why use it there? Why not use another?"

Let's go!!!

MVVM Flow

Project Informations

MVVM ( Model-ViewModel- Model )

M ( Model ) : Represents data. JUST it. Holds the data and has nothing and don't have business logic.

V ( View ) : Represents the UI. In the view, we have User Actions that will call view model to call api service. After it, the data will through to view ( view model is responsible to do it ) and shows informations in the screen.

VM ( ViewModel ) : Responsible to call service class to fetch data from the server.The ViewModel don't know what the views and what thew view does.

Thanks for all! 🤘

SOLID Principles in iOS Development

SOLID Principles in iOS Development

😩 Ok, you probably already hear this term, but in practice, what's mean? When uses? How uses? Keep reading for FINALLY LEARN

First of all, SOLID is a s a mnemonic acronym for five design principles intended to make software design more understandable, flexible, and maintainable

In all tutorial, i will show SOLID Principles in action and codes that don't follow SOLID

So, let's go 😁

S - Single Responsibility Principle

A classe should have one reason to change ( to exists )

Tips to apply

💢 NOT Single Responsibility Principle apply

Handler_NOT_SOLID class have several responsibilities

👍 Single Responsibility Principle apply

O - Open/Closed Principle

A software entity should be open to extension, but closed for modification.

Tips to apply

💢 NOT Open/Closed Principle apply

When printData receive other type of object, we have to add more rules to work

👍 Open/Closed Principle apply

L - Liskov Substitution Principle

Objects should be replaceable with instances of their subtypes without altering the correctness of that program.

Tips to apply

💢 NOT Liskov Substitution Principle apply

👍 Liskov Substitution Principle apply

I - Interface Segregation Principle

(M)any client-specific interfaces are better than one general-purpose interface

Tips to apply

💢 NOT Interface Segregation Principle apply

👍 Interface Segregation Principle apply

D - Dependency Inversion Principle

High-level modules should not depend on low-level modules. Both should depend on abstractions.

Tips to apply

💢 NOT Dependency Inversion Principle apply

👍 Dependency Inversion Principle apply

How be less stressed?

Meditation

Breath

Music

Conclusion 😄 😃 😆

An Introduction to UX

What is UX?

Micro & Macro

What isn't UX

How make/project UX?

How to Define The Objective of your Product

What is a Persona?

Process of User eXperience ( in Garrett's view )

Conclusion 📙

An Introduction to Basic Types in Elixir

How Create Relationships with Mongoose and Node.js ( with real example )

SCRUM Without Winding

My First Hackathon ( an amazing experience )

from the start

the challenge proposed

organization phase

hands on code

the bug phase ❌

apresentation phase

tell us a little bit about your experiences, it would be really cool to share it with others ✔️ 🔗

Facebook Auth ( Node.js and Passport.js )

how to join open source projects?

Demystifying CSS ( A Pratical Approach ) Part. I

Margin vs Padding

How to use React Native Gesture Handler and React Navigation ( Side Menu Example )

`tell us a little bit about your experiences, it would be really cool to share it with others` ✔️ 🔗