DEV Community: Janire Fernandez

Android Jetpack Compose MVVM

Janire Fernandez — Sun, 20 Nov 2022 01:56:13 +0000

I will show you how I've created the screen views with Jetpack Componse for this example

First, lets explain the basics

What is MVVM architecture?

Model — View — ViewModel (MVVM) is the industry-recognized software architecture pattern that overcomes all drawbacks of MVP and MVC design patterns. MVVM suggests separating the data presentation logic(Views or UI) from the core business logic part of the application.

The separate code layers of MVVM are:

Model: This layer is responsible for the abstraction of the data sources. Model and ViewModel work together to get and save the data.
View: The purpose of this layer is to inform the ViewModel about the user’s action. This layer observes the ViewModel and does not contain any kind of application logic.
ViewModel: It exposes those data streams which are relevant to the View. Moreover, it serves as a link between the Model and the View.

What is Jetpack Compose?

Jetpack Compose is Android’s recommended modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

Now we are ready to start with the project!

*Note: In this article I will only explain how the screen views have been defined. If you want to know more, you can check the whole project on Github: JetpackComposeMVVM

Jetpack Compose

To be able to display a list of Categories we first need to define how one category should be displayed. In this case we have the following (code below images):

We also need to understand what are Rows and Columns in Jetpack Compose:

Row: It arranges the views horizontally.
Column: It arranges the views vertically.

In this case we have a Row to display the Image, Title and Description. But we also have a column which contains the Title and Description.

The code for displaying a Category Item is the following:

@Composable
fun CategoryItem(category: Category, context: Context, onClickListener: (Category) -> Unit) {
    Card(
        modifier = Modifier
            .padding(8.dp, 4.dp)
            .fillMaxWidth()
            .height(300.dp)
            .clickable { onClickListener.invoke(category) },
        shape = RoundedCornerShape(25.dp),
    ) {
        Surface(
            color = Color.LightGray
        ) {

            Row(
                Modifier
                    .padding(4.dp)
                    .fillMaxSize()
            ) {

                Image(
                    painter = rememberAsyncImagePainter(
                        model = category.strThumb,
                        imageLoader = ImageLoader.Builder(context).crossfade(true).build()
                    ),
                    contentDescription = category.str,
                    modifier = Modifier
                        .fillMaxHeight()
                        .weight(0.2f)
                )
                Column(
                    verticalArrangement = Arrangement.Center,
                    modifier = Modifier
                        .padding(4.dp)
                        .fillMaxHeight()
                        .weight(0.8f)
                ) {
                    Text(
                        text = category.str,
                        style = MaterialTheme.typography.titleMedium,
                        fontWeight = FontWeight.Bold
                    )
                    Text(
                        text = category.strDescription,
                        style = MaterialTheme.typography.bodyMedium
                    )
                }
            }
        }
    }
}

Once we have how one category should look like, we can define how the list should be displayed:

@Composable
fun CategoryList(
    categoryList: List<Category>,
    context: Context,
    onClickListener: (Category) -> Unit
) {
    LazyColumn {
        itemsIndexed(items = categoryList) { _, item ->
            CategoryItem(category = item, context, onClickListener)
        }
    }
}

In this case we define a LazyColumn which is a vertically scrolling list that only composes and lays out the currently visible items. It’s similar to a Recyclerview in the classic Android View system.

The result is the following:

Now we need to call CategoryList method in the MainActivity:

@AndroidEntryPoint
class MainActivity : ComponentActivity() {
    private val viewModel: MainViewModel by viewModels()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MealRecipesTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    CategoryList(categoryList = viewModel.categoryList, context = this) {
                        val intent = Intent(this@MainActivity, DetailActivity::class.java).apply {
                            putExtra(DetailActivity.DETAIL_CATEGORY, it)
                        }
                        intent.flags = Intent.FLAG_ACTIVITY_SINGLE_TOP
                        startActivity(intent)
                    }
                    viewModel.getCategories()

                }
            }
        }
    }
}

Note that when a category is clicked, another view will be displayed with the information of the category selected. This can be done because in the CategoryItem compose function we have:

.clickable { onClickListener.invoke(category) }

When clicking on a Category we go to another activity (there is an Intent in the MainActivity that will be called when the category is clicked).

The new activity, DetailActivity, displays again the Title,Description and the Image.

The compose function looks like this:

@Composable
fun CategoryItem(category: Category, context: Context) {
    Surface(
        modifier = Modifier
            .padding(4.dp)
            .fillMaxHeight(),
        color = Color.White,
    ) {
        Column(
            verticalArrangement = Arrangement.Top,
            modifier = Modifier
                .padding(20.dp)
                .fillMaxHeight()
        ) {

            Text(
                text = category.str,
                style = MaterialTheme.typography.titleMedium,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .padding(25.dp)
            )
            Image(
                painter = rememberAsyncImagePainter(
                    model = category.strThumb,
                    imageLoader = ImageLoader.Builder(context).crossfade(true).build()
                ),
                contentDescription = category.str,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 25.dp)
            )
            Text(
                text = category.strDescription,
                style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier
                    .padding(25.dp)
            )

        }


    }
}

Then we need to call CategoryItem function in the DetailActivity:

@AndroidEntryPoint
class DetailActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val category = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
            intent.getSerializableExtra(DETAIL_CATEGORY, Serializable::class.java) as Category
        } else {
            @Suppress("DEPRECATION")
            intent.getSerializableExtra(DETAIL_CATEGORY) as Category
        }
        setContent {
            MealRecipesTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    CategoryItem(category = category, context = this@DetailActivity)
                }
            }
        }
    }

    companion object {
        const val DETAIL_CATEGORY = "detail_category"
    }
}

The result is the following:

And that's all!! That's how you create screen views with Jetpack Compose. Hope you enjoyed!!

If you want to check the whole project here you have the link: JetpackComposeMVVM

Don't forget to like and share! Thank you! :)

Connect REST API to database with Go

Janire Fernandez — Sat, 15 Oct 2022 15:27:54 +0000

In previous tutorial we learned how to create a REST API with Go

Now we are going to connect this API to a database. We will use PostgreSQL.

If you want to check the whole project here you have the link: ArticleRestApi

Create database

To create a database we are going to use a Docker image. Make sure you have docker installed.

*A Docker image is a read-only template that contains a set of instructions for creating a container that can run on the Docker platform.

Create a file docker-compose.yml:

version: "3.8"
services:
  database:
    container_name: database
    image: postgres
    ports:
      - "5432:5432"
    volumes:
      - ./database:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=articlesDB
      - POSTGRES_USER=janire
      - POSTGRES_PASSWORD=password

This will pull the postgres image from the Docker Hub.
The container opens port 5432.
It sets the environment variables to use when connecting to the database.
The volume is needed so the data persists inside the container at /var/lib/postgresql/data.

To start the docker container use command:

docker-compose up -d

We can stop it by doing:

docker-compose down

Connect to database

Now that the database is created let's connect to it. In my case I will be using TablePlus, but you can use other database management.

We need to create a new connection with details defined in docker-compose.yml.

Connect to database with Go

Go’s standard library was not built to include any specific database drivers. So we need to install a third party package. In this case we are going to install https://github.com/lib/pq. Run following command:

go get github.com/lib/pq

You should see that the dependency has been included in file called go.mod and go.sum.

Now we are going to create db.go file in package pkg/db.

package db

import (
    "database/sql"
    "fmt"
    "log"

    "github.com/janirefdez/ArticleRestApi/pkg/mocks"
    _ "github.com/lib/pq"
)

const (
    host     = "localhost"
    port     = 5432
    user     = "janire"
    password = "password"
    dbname   = "articlesDB"
)

func Connect() *sql.DB {
    connInfo := fmt.Sprintf("host=%s port=%d user=%s "+
        "password=%s dbname=%s sslmode=disable",
        host, port, user, password, dbname)

    db, err := sql.Open("postgres", connInfo)
    if err != nil {
        log.Fatal(err)
    }
    err = db.Ping()
    if err != nil {
        panic(err)
    }
    fmt.Println("Successfully connected to db!")
    return db
}

func CloseConnection(db *sql.DB) {
    defer db.Close()
}

Connection information is defined in our docker-compose.yml file.
sql.Open() connects to the database.

Now that we have the database setup, we need to think where to start the connection. We cannot connect in each handler as this will create lots of database connections.

We will use dependency injection to pass only one database connection to all the handlers.

Create file handler.go in pkg/handlers:

package handlers

import "database/sql"

type handler struct {
    DB *sql.DB
}

func New(db *sql.DB) handler {
    return handler{db}
}

The structure of the project in our example should now be like this:

├── cmd
│   └── main.go
├── pkg
│    ├── db
│    │   └── db.go
│    ├── handlers
│    │   ├── AddArticle.go
│    │   ├── DeleteArticle.go
│    │   ├── GetAllArticles.go
│    │   ├── GetArticle.go
│    │   ├── UpdateArticle.go
│    │   └── Handler.go
│    ├── mocks
│    │   └── article.go
│    └── models
│        └── article.go
├── go.sum
└── go.mod

Lets include the dependency in the handlers:

GetAllArticles

func (h handler) GetAllArticles(w http.ResponseWriter, r *http.Request) { ...

Get Article By Id

func (h handler) GetArticle(w http.ResponseWriter, r *http.Request) { ...

Create new Article

func (h handler) AddArticle(w http.ResponseWriter, r *http.Request) { ...

Update Article by id

func (h handler) UpdateArticle(w http.ResponseWriter, r *http.Request) { ...

Delete Article by id

func (h handler) DeleteArticle(w http.ResponseWriter, r *http.Request) {

Now let's change the cmd/main.go to start the database connection:

func handleRequests(DB *sql.DB) {
    h := handlers.New(DB)
    // create a new instance of a mux router
    myRouter := mux.NewRouter().StrictSlash(true)
    myRouter.HandleFunc("/", homePage)
    myRouter.HandleFunc("/articles", h.GetAllArticles).Methods(http.MethodGet)
    myRouter.HandleFunc("/articles/{id}", h.GetArticle).Methods(http.MethodGet)
    myRouter.HandleFunc("/articles", h.AddArticle).Methods(http.MethodPost)
    myRouter.HandleFunc("/articles/{id}", h.UpdateArticle).Methods(http.MethodPut)
    myRouter.HandleFunc("/articles/{id}", h.DeleteArticle).Methods(http.MethodDelete)
    log.Fatal(http.ListenAndServe(":8080", myRouter))
}

func main() {
    DB := db.Connect()
    handleRequests(DB)
    db.CloseConnection(DB)
}

If you now run the API you should see message :

% go run cmd/main.go
Successfully connected to db!

But we still have to update the functions of the handlers to use the database information instead of the mocks defined in pkg/mocks/article.go and we also have to create a table 'articles' in the database. So let's start with that.

Create table in database with Go

We can create a table directly with TablePlus or we can create it with the code. These are the SQL queries we will use:

To create the table 'articles':

CREATE TABLE articles (id VARCHAR(36) PRIMARY KEY, title VARCHAR(100) NOT NULL, description VARCHAR(50) NOT NULL, content VARCHAR(50) NOT NULL);

To know if table 'articles' already exists:

SELECT EXISTS (SELECT FROM pg_tables WHERE  schemaname = 'public' AND tablename = 'articles' );

or when creating the table we can include IF NOT EXISTS

CREATE TABLE IF NOT EXISTS  articles  (id VARCHAR(36) PRIMARY KEY, title VARCHAR(100) NOT NULL, description VARCHAR(50) NOT NULL, content VARCHAR(50) NOT NULL);

To include data in table 'articles':

INSERT INTO articles (id,title,description,content) VALUES ('8617bf49-39a9-4268-b113-7b6bcd189ba2', 'Article 1', 'Article Description 1', 'Article Content 1');

In this example we will create the table with Go so let's create a new function in pkg/db/db.go:

func CreateTable(db *sql.DB) {
    var exists bool
    if err := db.QueryRow("SELECT EXISTS (SELECT FROM pg_tables WHERE  schemaname = 'public' AND tablename = 'articles' );").Scan(&exists); err != nil {
        fmt.Println("failed to execute query", err)
        return
    }
    if !exists {
        results, err := db.Query("CREATE TABLE articles (id VARCHAR(36) PRIMARY KEY, title VARCHAR(100) NOT NULL, description VARCHAR(50) NOT NULL, content VARCHAR(50) NOT NULL);")
        if err != nil {
            fmt.Println("failed to execute query", err)
            return
        }
        fmt.Println("Table created successfully", results)

        for _, article := range mocks.Articles {
            queryStmt := `INSERT INTO articles (id,title,description,content) VALUES ($1, $2, $3, $4) RETURNING id;`

            err := db.QueryRow(queryStmt, &article.Id, &article.Title, &article.Desc, &article.Content).Scan(&article.Id)
            if err != nil {
                log.Println("failed to execute query", err)
                return
            }
        }
        fmt.Println("Mock Articles included in Table", results)
    } else {
        fmt.Println("Table 'articles' already exists ")
    }

}

We will call this function in cmd/main.go:

func main() {
    DB := db.Connect()
    db.CreateTable(DB)
    handleRequests(DB)
    db.CloseConnection(DB)
}

If you run the API it will first create the database and insert data into it. You should now be able to see content in your database:

Update handlers

We already have a database with articles and we are able to create a connection with Go. Now its time to modify the handlers so our API works with the database instead of the mocks defined in pkg/mocks/article.go.

Get All Articles

In pkg/handlers/GetAllArticles.go we need to use query SELECT * FROM articles;

func (h handler) GetAllArticles(w http.ResponseWriter, r *http.Request) {

    results, err := h.DB.Query("SELECT * FROM articles;")
    if err != nil {
        log.Println("failed to execute query", err)
        w.WriteHeader(500)
        return
    }

    var articles = make([]models.Article, 0)
    for results.Next() {
        var article models.Article
        err = results.Scan(&article.Id, &article.Title, &article.Desc, &article.Content)
        if err != nil {
            log.Println("failed to scan", err)
            w.WriteHeader(500)
            return
        }

        articles = append(articles, article)
    }

    w.Header().Add("Content-Type", "application/json")
    w.WriteHeader(http.StatusOK)
    json.NewEncoder(w).Encode(articles)
}

The method returns results, which is of type sql.Rows. This stores the result of a query, row by row. So we need to go thought the list and scan the content.

Get Article By Id

In pkg/handlers/GetArticle.go we need to use query SELECT * FROM articles WHERE id = $1 ;

func (h handler) GetArticle(w http.ResponseWriter, r *http.Request) {
    vars := mux.Vars(r)
    id := vars["id"]

    queryStmt := `SELECT * FROM articles WHERE id = $1 ;`
    results, err := h.DB.Query(queryStmt, id)
    if err != nil {
        log.Println("failed to execute query", err)
        w.WriteHeader(500)
        return
    }

    var article models.Article
    for results.Next() {
        err = results.Scan(&article.Id, &article.Title, &article.Desc, &article.Content)
        if err != nil {
            log.Println("failed to scan", err)
            w.WriteHeader(500)
            return
        }
    }

    w.Header().Add("Content-Type", "application/json")
    w.WriteHeader(http.StatusOK)
    json.NewEncoder(w).Encode(article)
}

Create new Article

In pkg/handlers/AddArticle.go we need to use query INSERT INTO articles (id,title,description,content) VALUES ($1, $2, $3, $4)

func (h handler) AddArticle(w http.ResponseWriter, r *http.Request) {
    // Read to request body
    defer r.Body.Close()
    body, err := ioutil.ReadAll(r.Body)

    if err != nil {
        log.Fatalln(err)
        w.WriteHeader(500)
        return
    }
    var article models.Article
    json.Unmarshal(body, &article)

    article.Id = (uuid.New()).String()
    queryStmt := `INSERT INTO articles (id,title,description,content) VALUES ($1, $2, $3, $4) RETURNING id;`
    err = h.DB.QueryRow(queryStmt, &article.Id, &article.Title, &article.Desc, &article.Content).Scan(&article.Id)
    if err != nil {
        log.Println("failed to execute query", err)
        w.WriteHeader(500)
        return
    }

    w.Header().Add("Content-Type", "application/json")
    w.WriteHeader(http.StatusCreated)
    json.NewEncoder(w).Encode("Created")

}

Update Article by id

In pkg/handlers/UpdateArticle.go we need to use query UPDATE articles SET title = $2, description = $3, content = $4 WHERE id = $1 RETURNING id;

func (h handler) UpdateArticle(w http.ResponseWriter, r *http.Request) {
    vars := mux.Vars(r)
    id := vars["id"]

    // Read request body
    defer r.Body.Close()
    body, err := ioutil.ReadAll(r.Body)

    if err != nil {
        log.Fatalln(err)
    }

    var updatedArticle models.Article
    json.Unmarshal(body, &updatedArticle)

    queryStmt := `UPDATE articles SET title = $2, description = $3, content = $4 WHERE id = $1 RETURNING id;`
    err = h.DB.QueryRow(queryStmt, &id, &updatedArticle.Title, &updatedArticle.Desc, &updatedArticle.Content).Scan(&id)
    if err != nil {
        log.Println("failed to execute query", err)
        w.WriteHeader(500)
        return
    }

    w.Header().Add("Content-Type", "application/json")
    w.WriteHeader(http.StatusOK)
    json.NewEncoder(w).Encode("Updated")

}

Delete Article by id

In pkg/handlers/DeleteArticle.go we need to use query DELETE FROM articles WHERE id = $1;

func (h handler) DeleteArticle(w http.ResponseWriter, r *http.Request) {
    vars := mux.Vars(r)
    id := vars["id"]

    queryStmt := `DELETE FROM articles WHERE id = $1;`
    _, err := h.DB.Query(queryStmt, &id)
    if err != nil {
        log.Println("failed to execute query", err)
        w.WriteHeader(500)
        return
    }

    w.Header().Add("Content-Type", "application/json")
    w.WriteHeader(http.StatusOK)
    json.NewEncoder(w).Encode("Deleted")
}

And that's all!! You have an API that connects to a database. Hope you enjoyed!!

Improvements

Include error response when an article is not found.
Include tests.
...

If you want to check the whole project here you have the link: ArticleRestApi

Don't forget to like and share! Thank you! :)

Create a REST API with Go

Janire Fernandez — Mon, 10 Oct 2022 18:06:35 +0000

In this example we will create a simple REST API with Go.

Get all articles.
Get specific article.
Add new article.
Update Article.
Delete article.

Let's get started!

Install Go

Make sure that Go language is installed in your system. Open a new terminal and run the following command.

go version

It should print the Go language version that you have.
Otherwise install the Go language before proceeding.

brew install go

Create a new Go project

First, create a new directory for the Go project and go into the directory created.

mkdir articleRestApi

cd articleRestApi

Now we need to create the project module with the go mod init <path> command.
The module path normally is the URL where you publish your project. In my case it will be github.com/janirefdez/ArticleRestApi

go mod init github.com/janirefdez/ArticleRestApi

This command will create a file called go.mod. It will contain information about the Go module path and the Go language version. When adding more dependencies to the project, they will be mentioned in this file.

Set up

In this example we are going to use a gorilla/mux router instead of the traditional net/http router.

And we are also going to use google/uuid to generate random uuids.

Run the following command to be able to use gorilla/mux

go get github.com/gorilla/mux

And for google/uuid run

go get github.com/google/uuid

You should see that in go.mod it should appear the dependencies gorilla/mux and google/uuid. And a new file go.sum should have been created.

Create the base for our API

Now let's create the main.go file.

touch main.go

and add the following code to it.

package main

import (
    "fmt"
    "log"
    "net/http"

    "github.com/gorilla/mux"
)

func homePage(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Welcome to the Article REST API!")
    fmt.Println("Article REST API")
}

func handleRequests() {
    // create a new instance of a mux router
    myRouter := mux.NewRouter().StrictSlash(true)
    myRouter.HandleFunc("/", homePage)
    log.Fatal(http.ListenAndServe(":8080", myRouter))
}

func main() {
    handleRequests()
}

This has:

A homePage function that will handle all requests to our root URL.
A handleRequests function that will match the URL path hit with a defined function
A main function which will kick off our REST API.

Let's run our API to see what happens ;)!

go run main.go

If you now check http://localhost:8080/ you should see message Welcome to the Article REST API!

This means we have now successfully created the base for our REST API.

But first we need to organize the project because we don't want to code everything on main.go. So let's move main.go to a new directory called cmd. At this point the project structure should look like this.

├── cmd
│   └── main.go
├── go.sum
└── go.mod

Create Article Model and Mock

Now we need to define our Article model. In this example, Article will contain an Id, a Title, a Description and Content.

Let's create file pkg/models/article.go.

package models

type Article struct {
    Id      string `json:"Id"`
    Title   string `json:"Title"`
    Desc    string `json:"desc"`
    Content string `json:"content"`
}

and also create mocks for that Article model pkg/mocks/article.go.

package mocks

import "github.com/janirefdez/ArticleRestApi/pkg/models"

var Articles = []models.Article{
    {Id: "8617bf49-39a9-4268-b113-7b6bcd189ba2", Title: "Article 1", Desc: "Article Description 1", Content: "Article Content 1"},
    {Id: "38da7ce2-02b5-471a-90b8-c299f2ef132e", Title: "Article 2", Desc: "Article Description 2", Content: "Article Content 2"},
}

Now our project looks like this:

├── cmd
│   └── main.go
├── pkg
│    ├── mocks
│    │   └── article.go
│    └── models
│        └── article.go
├── go.sum
└── go.mod

API EndPoints

Now we are going to start creating our API endpoints.

Get All Articles

This will be an HTTP GET request that will return all the articles.

Create a new handler pkg/handlers/GetAllArticles.go.

package handlers

import (
    "encoding/json"
    "net/http"

    "github.com/janirefdez/ArticleRestApi/pkg/mocks"
)

func GetAllArticles(w http.ResponseWriter, r *http.Request) {
    w.Header().Add("Content-Type", "application/json")
    w.WriteHeader(http.StatusOK)
    json.NewEncoder(w).Encode(mocks.Articles)
}

The call to json.NewEncoder(w).Encode(mocks.Articles) does the job of encoding our articles array into a JSON string and then writing as part of our response.

In function handleRequests() from cmd/main.go include the new endpoint.

func handleRequests() {
    // create a new instance of a mux router
    myRouter := mux.NewRouter().StrictSlash(true)
    myRouter.HandleFunc("/", homePage)
    myRouter.HandleFunc("/articles", handlers.GetAllArticles).Methods(http.MethodGet)
    log.Fatal(http.ListenAndServe(":8080", myRouter))
}

If we now run main.go we can do the request to get all the articles.

go run cmd/main.go

*Note: It will return the articles defined in pkg/mocks/article.go.

Get Article By Id

This will be an HTTP GET request that will return one article.

Create a new handler pkg/handlers/GetArticle.go.

package handlers

import (
    "encoding/json"
    "net/http"

    "github.com/gorilla/mux"
    "github.com/janirefdez/ArticleRestApi/pkg/mocks"
)

func GetArticle(w http.ResponseWriter, r *http.Request) {
    vars := mux.Vars(r)
    id := vars["id"]

    for _, article := range mocks.Articles {
        if article.Id == id {
            w.Header().Add("Content-Type", "application/json")
            w.WriteHeader(http.StatusOK)
            json.NewEncoder(w).Encode(article)
            break
        }
    }
}

And in function handleRequests() from cmd/main.go include the new endpoint.

func handleRequests() {
    // create a new instance of a mux router
    myRouter := mux.NewRouter().StrictSlash(true)
    myRouter.HandleFunc("/", homePage)
    myRouter.HandleFunc("/articles", handlers.GetAllArticles).Methods(http.MethodGet)
    myRouter.HandleFunc("/articles/{id}", handlers.GetArticle).Methods(http.MethodGet)
    log.Fatal(http.ListenAndServe(":8080", myRouter))
}

If we now run main.go we can do the request to get an specific article by id.

go run cmd/main.go

Create new Article
This will be an HTTP POST request that will add a new article.

Create a new handler pkg/handlers/AddArticle.go.

package handlers

import (
    "encoding/json"
    "io/ioutil"
    "log"
    "net/http"

    "github.com/janirefdez/ArticleRestApi/pkg/mocks"
    "github.com/janirefdez/ArticleRestApi/pkg/models"

    "github.com/google/uuid"
)

func AddArticle(w http.ResponseWriter, r *http.Request) {
    // Read to request body
    defer r.Body.Close()
    body, err := ioutil.ReadAll(r.Body)

    if err != nil {
        log.Fatalln(err)
    }
    var article models.Article
    json.Unmarshal(body, &article)

    article.Id = (uuid.New()).String()
    mocks.Articles = append(mocks.Articles, article)

    w.Header().Add("Content-Type", "application/json")
    w.WriteHeader(http.StatusCreated)
    json.NewEncoder(w).Encode("Created")
}

In this function we are reading the information of the article the client has sent. And we are generating a random uuid to that article.

If everything goes well, we send response HTTP 201.

*Note: 201 -> created success status response code indicates that the request has succeeded and has led to the creation of a resource.

And in function handleRequests() from cmd/main.go include the new endpoint.

func handleRequests() {
    // create a new instance of a mux router
    myRouter := mux.NewRouter().StrictSlash(true)
    myRouter.HandleFunc("/", homePage)
    myRouter.HandleFunc("/articles", handlers.GetAllArticles).Methods(http.MethodGet)
    myRouter.HandleFunc("/articles/{id}", handlers.GetArticle).Methods(http.MethodGet)
    myRouter.HandleFunc("/articles", handlers.AddArticle).Methods(http.MethodPost)
    log.Fatal(http.ListenAndServe(":8080", myRouter))
}

If we now run main.go we can do the request to add a new article.

If you then do the request to get all articles, the new article you have added should be there.

Update Article by id
This will be an HTTP PUT request that will update an article.

Create a new handler pkg/handlers/UpdateArticle.go.

package handlers

import (
    "encoding/json"
    "io/ioutil"
    "log"
    "net/http"

    "github.com/gorilla/mux"
    "github.com/janirefdez/ArticleRestApi/pkg/mocks"
    "github.com/janirefdez/ArticleRestApi/pkg/models"
)

func UpdateArticle(w http.ResponseWriter, r *http.Request) {
    vars := mux.Vars(r)
    id := vars["id"]

    // Read request body
    defer r.Body.Close()
    body, err := ioutil.ReadAll(r.Body)

    if err != nil {
        log.Fatalln(err)
    }

    var updatedArticle models.Article
    json.Unmarshal(body, &updatedArticle)

    for index, article := range mocks.Articles {
        if article.Id == id {
            article.Title = updatedArticle.Title
            article.Desc = updatedArticle.Desc
            article.Content = updatedArticle.Content

            mocks.Articles[index] = article

            w.Header().Add("Content-Type", "application/json")
            w.WriteHeader(http.StatusOK)
            json.NewEncoder(w).Encode("Updated")
            break
        }
    }
}

And in function handleRequests() from cmd/main.go include the new endpoint.

func handleRequests() {
    // create a new instance of a mux router
    myRouter := mux.NewRouter().StrictSlash(true)
    myRouter.HandleFunc("/", homePage)
    myRouter.HandleFunc("/articles", handlers.GetAllArticles).Methods(http.MethodGet)
    myRouter.HandleFunc("/articles/{id}", handlers.GetArticle).Methods(http.MethodGet)
    myRouter.HandleFunc("/articles", handlers.AddArticle).Methods(http.MethodPost)
    myRouter.HandleFunc("/articles/{id}", handlers.UpdateArticle).Methods(http.MethodPut)
    log.Fatal(http.ListenAndServe(":8080", myRouter))
}

If we now run main.go we can do the request to update an article.

If you then do the request to get all articles, the article should be updated.

Delete Article by id

This will be an HTTP DELETE request that will delete an article.

Create a new handler pkg/handlers/DeleteArticle.go.

package handlers

import (
    "encoding/json"
    "net/http"

    "github.com/gorilla/mux"
    "github.com/janirefdez/ArticleRestApi/pkg/mocks"
)

func DeleteArticle(w http.ResponseWriter, r *http.Request) {
    vars := mux.Vars(r)
    id := vars["id"]

    for index, article := range mocks.Articles {
        if article.Id == id {
            mocks.Articles = append(mocks.Articles[:index], mocks.Articles[index+1:]...)

            w.Header().Add("Content-Type", "application/json")
            w.WriteHeader(http.StatusOK)
            json.NewEncoder(w).Encode("Deleted")
            break
        }
    }
}

And in function handleRequests() from cmd/main.go include the new endpoint.

func handleRequests() {
    // create a new instance of a mux router
    myRouter := mux.NewRouter().StrictSlash(true)
    myRouter.HandleFunc("/", homePage)
    myRouter.HandleFunc("/articles", handlers.GetAllArticles).Methods(http.MethodGet)
    myRouter.HandleFunc("/articles/{id}", handlers.GetArticle).Methods(http.MethodGet)
    myRouter.HandleFunc("/articles", handlers.AddArticle).Methods(http.MethodPost)
    myRouter.HandleFunc("/articles/{id}", handlers.UpdateArticle).Methods(http.MethodPut)
    myRouter.HandleFunc("/articles/{id}", handlers.DeleteArticle).Methods(http.MethodDelete)
    log.Fatal(http.ListenAndServe(":8080", myRouter))
}

If we now run main.go we can do the request to delete an article.

If you then do the request to get all articles, the article you deleted shouldn't appear.

Now our project looks like this:

├── cmd
│   └── main.go
├── pkg
│    ├── handlers
│    │   ├── AddArticle.go
│    │   ├── DeleteArticle.go
│    │   ├── GetAllArticles.go
│    │   ├── GetArticle.go
│    │   └── UpdateArticle.go
│    ├── mocks
│    │   └── article.go
│    └── models
│        └── article.go
├── go.sum
└── go.mod

Improvements

Include error response when something goes wrong.
Include error response when an article is not found.
Connect the API to a real database
...

But this is a simple example to learn how to create a REST API. Hope you enjoyed!!

If you want to check the whole project here you have the link: ArticleRestApi

In the next example we will connect this API to PostgreSQL database.

Don't forget to like and share! Thank you! :)

Shimmer Effect on Android

Janire Fernandez — Wed, 10 Aug 2022 15:06:00 +0000

What is a Shimmer Effect?

Its an effect to show a loading status. Instead of using a progress, Shimmer effect creates a better design for ux. It mimics the page’s layout by showing its elements in a shape similar to the actual content as it is loading and becoming available (i.e. when network latency allows).

How to implement this on Android?

There is is an Android library, Shimmer, that provides an easy way to add a shimmer effect to any view in your Android app.

So lets start!

First include the library dependency:



dependencies {
    // Shimmer
    implementation 'com.facebook.shimmer:shimmer:0.5.0'
}

Now create a layout list_placeholder_layout.xml that will act as a placeholder while content is loading.

In my example I have an imageView to display the image of the animal and two textViews for the name and the type. So the layout is something like this:



<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginStart="10dp">

    <androidx.cardview.widget.CardView
        android:id="@+id/animal_image"
        android:layout_width="120dp"
        android:layout_height="150dp"
        android:backgroundTint="@color/gray"
        app:cardCornerRadius="20dp"
        app:cardElevation="4dp"
        app:cardUseCompatPadding="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.cardview.widget.CardView
        android:id="@+id/animal_name"
        android:layout_width="120dp"
        android:layout_height="30dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="30dp"
        android:backgroundTint="@color/gray"
        app:cardCornerRadius="10dp"
        app:cardElevation="4dp"
        app:cardUseCompatPadding="true"
        app:layout_constraintStart_toEndOf="@id/animal_image"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.cardview.widget.CardView
        android:id="@+id/animal_type"
        android:layout_width="120dp"
        android:layout_height="30dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:backgroundTint="@color/gray"
        app:cardCornerRadius="10dp"
        app:cardElevation="4dp"
        app:cardUseCompatPadding="true"
        app:layout_constraintStart_toEndOf="@id/animal_image"
        app:layout_constraintTop_toBottomOf="@id/animal_name" />

</androidx.constraintlayout.widget.ConstraintLayout>

Once the layout is created we need to include it in the main layout activity_main, where the recyclerView is situated.

To do that, we include <com.facebook.shimmer.ShimmerFrameLayout>



<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.main.MainActivity">

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmer_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:duration="800">

        <!-- Adding 8 rows of placeholders -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
            <include layout="@layout/list_placeholder_layout" />
        </LinearLayout>

    </com.facebook.shimmer.ShimmerFrameLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginStart="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

In the next step, we just need to tell Shimmer when to start and stop the animation.

We should start the Shimmer when we fetch the list of items. binding.shimmerView.startShimmer()
We should stop the Shimmer when we get the list of items. binding.shimmerView.stopShimmer()

Also, we should hide the visibility of the Shimmer Frame Layout, when we have the list of items.
binding.shimmerView.isVisible = false



class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    private val viewModel: MainViewModel by viewModels()


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //Start Shimmer
        binding.shimmerView.startShimmer()

        viewModel.getAnimals(10)
        viewModel.animalList.observe(this) {
            initRecyclerView(it)
        }
    }

    private fun initRecyclerView(animalList: List<Animal>) {

        binding.recyclerView.layoutManager = LinearLayoutManager(this)
        val adapter = AnimalAdapter(animalList)
        binding.recyclerView.adapter = adapter
        //Stop Shimmer
        binding.shimmerView.stopShimmer()
        //Hide Shimmer view
        binding.shimmerView.isVisible = false
    }
}

And that's all!!

If you want to check the whole project here you have the link: ShimmerEffectAndroid

Don't forget to like and share! Thank you! :)

Useful links:

https://facebook.github.io/shimmer-android/