DEV Community: Rafael Adolfo

SwiftUI navigation link

Rafael Adolfo — Sun, 14 Jun 2020 12:16:01 +0000

In part 2 we created a view with a list of products using MVVM and observables.
Now, let's build a view to display the product details, and to navigate to this new screen we are going to use a navigation link.

https://developer.apple.com/documentation/swiftui/navigationlink

Update the model

Our model will need additional properties to display product detail, here's how it look like now:

struct Product : Identifiable {
    //MARK: - Properties

    var id = UUID()
    var description: String
    var detail: String
    var price: Double
}

extension Product {

    //MARK: - Default initialization
    init() {
        self.description = "New product"
        self.detail = "Detailed information"
        self.price = 999.99
    }
}

New screen

The new screen will display the product model properties.
It's just a simple list of data:

struct ProductDetailView: View {

    let description: String
    let detail: String
    let price: Double

    var body: some View {
        List {
            HStack {
                VStack {
                    Text("Description:")
                }
                VStack {
                    Text(description)
                }
            }

            HStack {
                VStack {
                    Text("Detail:")
                }
                VStack {
                    Text(detail)
                }
            }

            HStack {
                VStack {
                    Text("Price:")
                }
                VStack {
                    Text(String(price))
                }
            }

        }
        .navigationBarTitle("Product detail")
    }
}

Notice that I declared these properties in this screen:

    let description: String
    let detail: String
    let price: Double

This means that when we call this view, we need to send the values for these properties in order to display them in the screen.

The navigation link

The navigation link is what will enable us the open the new screen by tapping a product that is displayed in the first list.

We need to place this navigation link for each product that will be displayed in the list. This means, inside the foreach loop:

Before navigation link:

ForEach(viewModel.productList) { product in
    Text("Description: " + product.description)
}

After navigation link

ForEach(viewModel.productList) { product in
    NavigationLink(product.description, destination:      ProductDetailView(description: product.description, detail:      product.detail, price: product.price))
}

Final result

Alright, after completing these changes our navigation to the new screen should be ready.

You can download the updated version and play the result for yourself: Github

MVVM + Observables

Rafael Adolfo — Mon, 08 Jun 2020 00:07:33 +0000

The previous post was a simple list displaying an array of strings.

Now, let's build up this project a little bit, shall we?

Download the project

Download the project with the finished feature, and I'll explain what changed and how does it work now.

We had a pretty much basic folder structure in the first part, the initial project default layout:

Now, there's a place for everything. What I did was to create a folder for each kind of class responsibility.

As we are using the MVVM pattern, we need at least:

A Model
A View
A View Model

Using MVVM basically defines that:

We have a model to store our model properties
We have a view to display our model and receive user interaction
We have a viewmodel that will handle user interaction coming from the view, and send model data to the view

search dev.to for more mvvm info

The View

The project is still displaying a list of products, but now data is coming from the viewmodel.

struct ProductListView: View {
    //MARK: - view model
    @ObservedObject var viewModel = ProductListViewModel()

    var body: some View {
        NavigationView {
            List {
                ForEach(viewModel.productList) { product in
                    Text("Description: " + product.description)
                }
            }
            .navigationBarItems(trailing: Button(action: {
                self.viewModel.addNewProduct()
            }, label: {
                Text("Add new product")
            } ))
        }

    }
}

The first version we simply put our array of strings inside the view. But now, our view is referencing a variable inside the viewmodel class.

Notice that the viewmodel is labeled as a @ObservedObject. This means that the view is observing the class, at any change of published variables these changes will reflect in our view.

The Model

struct Product : Identifiable {
    //MARK: - Properties

    var id = UUID()
    var description: String
}

extension Product {

    //MARK: - Default initialization
    init() {
        self.description = "New product"
    }
}

The model is pretty straightforward:

There's the description property where we can save the product description value
and a default initialisation, so that we don't have to write property values every time we want to create a new product.

The ViewModel

protocol ProductListViewModelProtocol {
    //MARK: - Protocol definition

    var productList: [Product] {get}
    func addNewProduct()
}

final class ProductListViewModel : ProductListViewModelProtocol, ObservableObject {
    //MARK: - Published properties

    @Published var productList: [Product] = []

    init() {
        productList.append(Product(description: "iPhone"))
        productList.append(Product(description: "Macbook Pro"))
    }
}

extension ProductListViewModel {
    //MARK: - Functions implementations

    func addNewProduct() {
        productList.append(Product())
    }
}

Here's where happens all the data and actions flow.

We have a protocol to define the class capabilities
A observable class, to enable this class be observed
I also added a function addNewProduct() so that we can add a new product with the app running, and see the changes reflect in our view thanks to the observable feature.

And that's it.
Hit the play button, and now you'll see the same screen working, with an additional button on the right upper corner.
Click the button to add new products and enjoy.

Display a list using SwiftUI

Rafael Adolfo — Sun, 07 Jun 2020 19:08:44 +0000

SwiftUI provides an easy and fast way to build user interfaces for apple devices.

This series will show you how to:

Display an array in a list
Adapt the list to display using MVVM and Observables
Create a navigation link, to show the item details
Get the list from an API

Create the project

Open Xcode and create a new project using SwiftUI as User Interface:

Replace the initial code in the file ContentView.swift with the code bellow:

import SwiftUI

struct ContentView: View {
    private var itemList = [  "iPhone",
                              "iPad",
                              "MacBook Pro",
                              "Macbook Air"  ]

    var body: some View {
        List {
            ForEach(self.itemList, id: \.self) { item in
                Text(item)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Explaining the code

What list does?
From apple:

List
A container that presents rows of data arranged in a single column.

So here, we are using List as a container for our declared array of strings variable:

private var itemList = [  "iPhone",
                              "iPad",
                              "MacBook Pro",
                              "Macbook Air"  ]

And inside the list, we are looping all contents of the itemList array:

ForEach(self.itemList, id: \.self) { item in
    Text(item)
}

This means that for each item inside our array, we create a new Text() to display the value of that item.

What the ForEach loop is doing, is the same as this code:

List {
  Text("item 1")
  Text("item 2")
}

Hit the play button and this should be the final result:

Alright! You have now created a list of items using SwiftUI.
Next, let's use MVVM as architecture pattern with the help of Observables.

The complete code is available @ Github

Deploy .net core API using docker compose - Part 1

Rafael Adolfo — Sun, 07 Jun 2020 03:30:58 +0000

The main purpose of this post is to provide an easy example of how to deploy a docker image using docker compose.

This is part 1, we'll just build a docker image from a single application and deploy using docker compose.

You should know what is docker to understand this content, if you have no idea you can read here

Before we begin, make sure you have docker installed -> docker

The application

The focus is not the application, so you may download the complete source code and I'll explain the container files.

Github project

Alright!
You know what is a docker container and have the environment ready to test.

So what's the deal with docker compose anyway?

Docker compose is the solution to deploy multiple containers.

Example:

You have an API that manage products.
The API store products data into a database.
You can use docker compose to deploy both the application and the database that the API depends on.

In order to deploy the application image using docker compose we need 3 things:

The application
A docker file
A docker compose file

Docker file

This file is responsible for building and creating the application docker image.

FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build-env
WORKDIR /app

RUN dotnet publish "DockerComposeProductApi.csproj" -c Release -o out
FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build-env

COPY . ./
RUN dotnet restore "DockerComposeProductApi.csproj"
FROM mcr.microsoft.com/dotnet/core/aspnet:3.1

WORKDIR /app
COPY --from=build-env /app/out .
ENTRYPOINT ["dotnet", "DockerComposeProductApi.dll"]

Docker compose file

This file responsibility is to explain to docker which docker images we want to publish.

We are also explaining docker that the image should be available in the port 5555.

version: '3.8'

services:
  dockercomposeproductapi:
    image: dockercomposeproductapi
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "5555:80"
    networks:
      - product-network

networks:
    product-network:
        driver: bridge

Let's run the application

To test this, open a terminal or command prompt and navigate to the application directory that contains the docker compose file (docker-compose.yml).

Just type:

docker-compose up -d

Docker will build the image and start the application deployment.

To check where the application was deployed you can type:

docker-compose ps

You can see that the service is running and available in the port 5555.

To access the application browse to http://localhost:5555/api/products

The result:

Conclusion:

Now you have the application running on docker, in the next part, we're going to connect our application to a database, and update the docker compose file to deploy both the application image and the database software image.