DEV Community: LUCIANO DE SOUSA PEREIRA

From TDD to DDD: Building a .NET Core Web API - Part 7

LUCIANO DE SOUSA PEREIRA — Mon, 16 Dec 2019 12:23:29 +0000

The complete project can be found here: https://github.com/lucianopereira86/CRUD-NetCore-TDD

Technologies

Post User • Theory

Red Step • Age

Let's do a Theory for the "Age" attribute.

[Theory]
[InlineData(0, 102)]
[InlineData(-1, 102)]
[InlineData(33, 102)]
public  void Theory_PostUser_Age(int Age, int ErrorCode)
{
    var user = new User
    {
        Age = Age
    };

    CheckError(new PostUserValidator(), ErrorCode, user);
}

If you run the tests, there will error for all the values because we have not implemented the validation for the age yet. It must be greater than zero.

Green Step • Age

Inside the PostUserValidators constructor, add the following lines:

public PostUserValidator()
{
    RuleFor(x => x.Name)
        .Cascade(CascadeMode.StopOnFirstFailure)
        .NotEmpty()
        .WithErrorCode("100")
        .MaximumLength(20)
        .WithErrorCode("101");

    RuleFor(x => x.Age)
        .Cascade(CascadeMode.StopOnFirstFailure)
        .GreaterThan(0)
        .WithErrorCode("102");
}

Run the tests again and this will be the result:

Only the valid value (33) has not returned any error, so our tests are working correctly again!

Post User • Fact II

Refactor Step II

There is no need for another Theory for the "PostUserTest" but another Fact is required to validate the data. Rename the "Fact_PostUser" method to "Fact_PostUser_NoValidation" and create another one:

 [Fact]
public void Fact_PostUser()
{
    // EXAMPLE
    var user = new User(0, "LUCIANO PEREIRA", 33, true);

    var val = new PostUserValidator().Validate(user);

    // ASSERT
    Assert.True(val.IsValid);

    if (val.IsValid)
    {
        // REPOSITORY
        user = new UserRepository(ctx).Post(user);

        // ASSERT
        Assert.Equal(1, user.Id);
    }
}

This time we are using the "Assert" class to ensure that the validation will be true before accessing the repository. Run the test again.

This must be your project so far:

Coming soon...

The PUT method will be the next to receive tests, repository and validation.

From TDD to DDD: Building a .NET Core Web API - Part 6

LUCIANO DE SOUSA PEREIRA — Mon, 16 Dec 2019 12:23:20 +0000

The complete project can be found here: https://github.com/lucianopereira86/CRUD-NetCore-TDD

Technologies

Post User • Theory

Refactor Step • Name

Change the "PostUserValidator" constructor by adding these lines:

public PostUserValidator()
{
    RuleFor(x => x.Name)
        .Cascade(CascadeMode.StopOnFirstFailure)
        .NotEmpty()
        .WithErrorCode("100")
        .MaximumLength(20)
        .WithErrorCode("101");
}

For the null or empty condition, it will return the custom error code 100.

For the maximum length condition, it will return the custom error code 101.

Inside the "PostUserTest" class, copy the "Theory_PostUser_Name_Validation", comment the original, rename the copy to "Theory_PostUser_Name" and refactor the code:

[Theory]
[InlineData(null, 100)]
[InlineData("", 100)]
[InlineData("LUCIANO PEREIRA", 100)]
[InlineData("ABCDEFGHIJKLMNOPQRSTUVWXYZ", 101)]
[InlineData("LUCIANO PEREIRA", 101)]
public void Theory_PostUser_Name(string Name, int ErrorCode)
{
    var user = new User
    {
        Name = Name
    };

    var val = new PostUserValidator().Validate(user);
    Assert.False(val.IsValid);

    if(!val.IsValid)
    {
        bool hasError = val.Errors.Any(a => a.ErrorCode.Equals(ErrorCode.ToString()));
        Assert.True(hasError);
    }
}

For each possible value there is an error code. The successful result will happen when the expected error code exists in the error list.

Notice that the value "LUCIANO PEREIRA" appears twice because it will be tested for each validation.
Run the test and see the result:

As we have expected, only the valid value didn't return the error code it was expecting. It means that our validation is working perfectly!

Let's improve our refactoring a little more by adding a generic method inside the "BaseTest" class that will be useful for all the other CRUD Test classes that will be created:

// Add inside BaseTest.cs
protected void CheckError<T>(AbstractValidator<T> validator, int ErrorCode, T vm)
{
    var val = validator.Validate(vm);
    Assert.False(val.IsValid);

    if (!val.IsValid)
    {
        bool hasError = val.Errors.Any(a => a.ErrorCode.Equals(ErrorCode.ToString()));
        Assert.True(hasError);
    }
}

The "Theory_PostUser_Name" inside the "PostUserTest" class must be changed as well:

[Theory]
[InlineData(null, 100)]
[InlineData("", 100)]
[InlineData("LUCIANO PEREIRA", 100)]
[InlineData("ABCDEFGHIJKLMNOPQRSTUVWXYZ", 101)]
[InlineData("LUCIANO PEREIRA", 101)]
public void Theory_PostUser_Name(string Name, int ErrorCode)
{
    var user = new User
    {
        Name = Name
    };
    CheckError(new PostUserValidator(), ErrorCode, user);
}

It's time create a Theory for the "Age" attribute.

From TDD to DDD: Building a .NET Core Web API - Part 5

LUCIANO DE SOUSA PEREIRA — Mon, 16 Dec 2019 12:23:09 +0000

The complete project can be found here: https://github.com/lucianopereira86/CRUD-NetCore-TDD

Technologies

Topics

Post User • Theory
- Red Step • Name
- Green Step • Name

Post User • Theory

Red Step • Name

The Theory must be used to test the INVALID values from an entity. Some VALID values might be used as well but only to confirm that the test works perfectly for what it was designed for.

Let's start testing the possible values for the User's "Name" attribute.

Inside the "PostUserTest" class write the following code:

#region THEORY
[Theory]
[InlineData(null)]
[InlineData("")]
[InlineData("ABCDEFGHIJKLMNOPQRSTUVWXYZ")]
[InlineData("LUCIANO PEREIRA")]
public void Theory_PostUser_Name (string Name)
{
    var user = new User
    {
        Name = Name
    };
    Assert.Null(user.Name);
    Assert.Empty(user.Name);
    Assert.True(user.Name.Length > 20);
}

#endregion

The "Name" will be invalid if it be null, empty or exceeds 20 characters.
If you run the test, this will the result:

The errors happened because all the conditions weren't respected at once. They should be tested separetely in different methods, but as the User class has many attributes, it would consume lots of lines of code and, most important, time.

To improve our development, we must use the "FluentValidation" package. It contains many functions that validate entire objects or attributes and return all the errors in a list.

Before doing it, rename the "Theory_PostUser_Name" method to "Theory_PostUser_Name_NoValidation" and change the code a bit:

[Theory]
[InlineData(null)]
[InlineData("")]
[InlineData("ABCDEFGHIJKLMNOPQRSTUVWXYZ")]
[InlineData("LUCIANO PEREIRA")]
public void Theory_PostUser_Name_NoValidation (string Name)
{
    var user = new User
    {
        Name = Name
    };

    var val = new PostUserValidator().Validate(user);
    Assert.False(val.IsValid);
}

All the validations will be implemented inside the "PostUserValidator" class. If one condition be disrespected, than the "val.IsValid" attribute will be false. It's time to go to the Green step.

Green Step • Name

Inside the Infra project, install the "FluentValidation" package through Nuget, create a folder named "Validations" and add into it a file named "PostUserValidator.cs". It will be responsible for validating only the "User" class attributes required in the POST method.

using CRUD_NETCore_TDD.Infra.Models;
using FluentValidation;

namespace CRUD_NETCore_TDD.Infra.Validations
{
    public class PostUserValidator: AbstractValidator<User>
    {
        public PostUserValidator()
        {
            RuleFor(x => x.Name)
                .Cascade(CascadeMode.StopOnFirstFailure)
                .NotEmpty()
                .MaximumLength(20);
        }
    }
}

Inside this code, the "Name" attribute must respect some rules.
The "Cascade(CascadeMode.StopOnFirstFailure)" means that if an error be encountered, it should return immediately from the field validation.

"NotEmpty" means that it should not be null or empty.

"MaximumLength" means that it should not have more than 20 characters.

These are the same rules we have stablished before.

Now, go back to the "PostUserTest" class, copy the "Theory_PostUser_Name_NoValidation" method, comment the original, rename the copy to "Theory_PostUser_Name_Validation" and import the "PostUserValidator" class. The file will be able to compile.

Run the test again and this will be the result:

ATTENTION
The Green tests should have full green results to prove that all the validations have run correctly. But as a practice of mine, I put at least one valid value to show a red result as a safety measure. In no other way this approach should be used because it violates the TDD principles of the Green step.

All the conditions have been met except for the one containing a valid value ("LUCIANO PEREIRA") which was to be expected. So we can comment its line for further tests.

But there is still a problem... How to prove that an specific condition was met instead of another one?

We will solve this but adding error codes for each one. Time for refactoring...

From TDD to DDD: Building a .NET Core Web API - Part 4

LUCIANO DE SOUSA PEREIRA — Mon, 16 Dec 2019 12:23:00 +0000

The complete project can be found here: https://github.com/lucianopereira86/CRUD-NetCore-TDD

Technologies

Post User • Fact

Refactor Step

We will concentrate the database operations inside a repository class for the user entity.

Firstly, modify the "Fact_PostUser" method like this:

[Fact]
public void Fact_PostUser()
{
    // EXAMPLE
    var user = new User(0, "LUCIANO PEREIRA", 33, true);

    // REPOSITORY
    user = new UserRepository(ctx).Post(user);

    // ASSERT
    Assert.Equal(1, user.Id);
}

As you can see, it must be created a "UserRepository" class with a "Post" method that must execute that same operations from before.

Inside the Infra project, create another file inside the "Repositories" folder named "UserRepository.cs" with the following code:

using CRUD_NETCore_TDD.Infra.Models;

namespace CRUD_NETCore_TDD.Infra.Repositories
{
    public class UserRepository
    {
        private readonly MyContext ctx;
        public UserRepository(MyContext ctx)
        {
            this.ctx = ctx;
        }
        public User Post(User user)
        {
            ctx.User.Add(user);
            ctx.SaveChanges();
            return user;
        }
    }
}

Just import the "UserRepository" class inside the "PostUserTest" file and it will compile.

Run the test again:

Our refactoring is complete!

If you have followed the instructions faithfully until here, then your project must be like this:

We are still far from finishing the POST tests. It's necessary to validate the user attributes before persist them in the database, so let's create our first Theory.

From TDD to DDD: Building a .NET Core Web API - Part 3

LUCIANO DE SOUSA PEREIRA — Mon, 16 Dec 2019 12:22:49 +0000

The complete project can be found here: https://github.com/lucianopereira86/CRUD-NetCore-TDD

Technologies

Post User • Fact

Green Step

Create a folder named "Models" inside the Infra project with a file named "User.cs".

Add the following code into it:

namespace CRUD_NETCore_TDD.Infra.Models
{
    public class User
    {
        public User()
        {

        }
        public User(int Id, string Name, int Age, bool IsActive)
        {
            this.Id = Id;
            this.Name = Name;
            this.Age = Age;
            this.IsActive = IsActive;
        }
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public bool IsActive { get; set; }
    }
}

The "User" model is completed. Inside the "PostUserTest.cs" file, copy and paste the "Fact_PostUser_NoModelNoRepository" method and comment the original. Change the copy's name to
"Fact_PostUser_NoRepository" and import the "User" class. The full code will be like this:

using CRUD_NETCore_TDD.Infra.Models;
using Xunit;

namespace CRUD_NETCore_TDD.Test.Tests
{
    public class PostUserTest
    {
        #region THEORY
        #endregion
        #region FACT
        //[Fact]
        //public void Fact_PostUser_NoClassNoRepository ()
        //{
        //    // EXAMPLE
        //    var user = new User("LUCIANO PEREIRA", 33, true);

        //    // REPOSITORY
        //    ctx.User.Add(user);
        //    ctx.SaveChanges();

        //    // ASSERT
        //    Assert.Equal(1, user.Id);
        //}

        [Fact]
        public void Fact_PostUser_NoRepository()
        {
            // EXAMPLE
            var user = new User(0, "LUCIANO PEREIRA", 33, true);

            // REPOSITORY
            ctx.User.Add(user);
            ctx.SaveChanges();

            // ASSERT
            Assert.Equal(1, user.Id);
        }
        #endregion
    }
}

Now, it is only missing the "ctx" object to make the code compile.
It will be necessary to install 3 packages through Nuget:

"Microsoft.EntityFrameworkCore" and "Microsoft.EntityFrameworkCore.SqlServer" packages inside the Infra project;
"Microsoft.EntityFrameworkCore.InMemory" package inside the Test project.

Create a new folder named "Repositories" inside the Infra project containing the "MyContext.cs" file with the following code:

using CRUD_NETCore_TDD.Infra.Models;
using Microsoft.EntityFrameworkCore;

namespace CRUD_NETCore_TDD.Infra.Repositories
{
    public class MyContext: DbContext
    {
        public DbSet<User> User { get; set; }
        public MyContext(DbContextOptions<MyContext> options) : base(options)
        {

        }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            base.OnModelCreating(modelBuilder);
            modelBuilder.Entity<User>(e =>
            {
                e
                .ToTable("user")
                .HasKey(k => k.Id);

                e
                .Property(p => p.Id)
                .ValueGeneratedOnAdd();
            });
        }
    }
}

What we have here is the basics for the EF Core to work in our project. The "user" table does not need to exist yet because will make the database to run in runtime memory.
Inside the Test project, create another file inside the "Tests" folder named "BaseTest.cs". It will be a super class containing the following code:

using CRUD_NETCore_TDD.Infra.Repositories;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;

namespace CRUD_NETCore_TDD.Test.Tests
{
    public class BaseTest
    {
        protected MyContext ctx;
        public BaseTest(MyContext ctx = null)
        {
            this.ctx = ctx ?? GetInMemoryDBContext();
        }
        protected MyContext GetInMemoryDBContext()
        {
            var serviceProvider = new ServiceCollection()
                .AddEntityFrameworkInMemoryDatabase()
                .BuildServiceProvider();

            var builder = new DbContextOptionsBuilder<MyContext>();
            var options = builder.UseInMemoryDatabase("test").UseInternalServiceProvider(serviceProvider).Options;

            MyContext dbContext = new MyContext(options);
            dbContext.Database.EnsureDeleted();
            dbContext.Database.EnsureCreated();
            return dbContext;
        }
    }
}

The "BaseTest" class is responsive for instantiating the "MyContext" class and make it run in memory without the need of a database previously created. All the write and read operations will work perfectly. If another "MyContext" instance exists, it will be passed as parameter to the constructor.

Make the "PostUserTest" class to implement the "BaseTest" class and the code will be finally be able to compile. Copy and paste the "Fact_PostUser_NoRepository" method, comment the original and rename the copy to "Fact_PostUser". The code will be like this:

using CRUD_NETCore_TDD.Infra.Models;
using Xunit;

namespace CRUD_NETCore_TDD.Test.Tests
{
    public class PostUserTest: BaseTest
    {
        #region THEORY
        #endregion
        #region FACT
        //[Fact]
        //public void Fact_PostUser_NoClassNoRepository ()
        //{
        //    // EXAMPLE
        //    var user = new User("LUCIANO PEREIRA", 33, true);

        //    // REPOSITORY
        //    ctx.User.Add(user);
        //    ctx.SaveChanges();

        //    // ASSERT
        //    Assert.Equal(1, user.Id);
        //}

        //[Fact]
        //public void Fact_PostUser_NoRepository()
        //{
        //    // EXAMPLE
        //    var user = new User(0, "LUCIANO PEREIRA", 33, true);

        //    // REPOSITORY
        //    ctx.User.Add(user);
        //    ctx.SaveChanges();

        //    // ASSERT
        //    Assert.Equal(1, user.Id);
        //}

        [Fact]
        public void Fact_PostUser()
        {
            // EXAMPLE
            var user = new User(0, "LUCIANO PEREIRA", 33, true);

            // REPOSITORY
            ctx.User.Add(user);
            ctx.SaveChanges();

            // ASSERT
            Assert.Equal(1, user.Id);
        }
        #endregion
    }
}

Run the tests with the Test Manager to see the result:

Finally, our Green step is done!

Time to refact the code.

From TDD to DDD: Building a .NET Core Web API - Part 2

LUCIANO DE SOUSA PEREIRA — Mon, 16 Dec 2019 12:22:32 +0000

The complete project can be found here: https://github.com/lucianopereira86/CRUD-NetCore-TDD

Technologies

Topics

Test Project
- Post User
- Fact
  - Red Step

Test Project

It's time to begin the fun!

We will build tests for each CRUD method of the User entity by using Entity Framework Core structure.
There will be two types of unit tests: Fact and Theory.

Fact is a method with a unique result without parameters.

Theory allow multiple parameters expecting for different results.

Post User

Add a folder named "Tests" to the Test Project with a file named "PostUserTest.cs" with the code below:

using Xunit;

namespace CRUD_NETCore_TDD.Test.Tests
{
    public class PostUserTest
    {
        #region THEORY
        #endregion
        #region FACT
        [Fact]
        public void Fact_PostUser ()
        {

        }
        #endregion
    }
}

Fact

Red Step

Our first test will run what we really want: to register a new user to the database. Write this code inside the Fact_PostUser method:

[Fact]
public void Fact_PostUser ()
{
    // EXAMPLE
    var user = new User("LUCIANO PEREIRA", 33, true);

    // REPOSITORY
    ctx.User.Add(user);
    ctx.SaveChanges();

    // ASSERT
    Assert.Equal(1, user.Id);
}

At first, there are no User class. Also, the "ctx" object should be an instance of the DbContext class, but there is no EF Core library installed yet to make the code to compile.
That is the Red step. We know what we want and what we have to do.

Before going to the Green step, change the method's name from "Fact_PostUser" to "Fact_PostUser_NoModelNoRepository", so it becomes clear what is missing for the method to run.

Let's implement the Green step.

From TDD to DDD: Building a .NET Core Web API - Part 1

LUCIANO DE SOUSA PEREIRA — Mon, 16 Dec 2019 12:22:10 +0000

Hello, everyone!
It's being a while.

Are you ready for another epic saga?
This time we will make a complete .NET Core web API by following the TDD (Test Driven Development) steps with xUnit until the DDD (Domain Driven Design) structure.

The complete project can be found here: https://github.com/lucianopereira86/CRUD-NetCore-TDD

Technologies

Topics

TDD
Project Structure

TDD

What's TDD?

It means Test Driven Development and it consists on programming unit tests for core functionalities of an application before creating classes, projects, validations and other layers.

During the development, there will be a cycle of three steps: Red, Green and Refactor.

The Red step needs the code to fail when executed, even by not compiling.

The Green step consists of a successful compilation and exacly what the unit test was expecting as result.

The Refactor step will be a refactoring of the code to become a new functionality like a new class or module.

With this cycle you will have a clear understanding of all the failures and certainties that your program may have. The problem is that it requires a good amount of time to develop.

Project Structure

Initially, our solution will have 3 layers: web API, Infra and Test.

The web API layer will contain the controllers.
The Infra layer will be responsible for the repositories and table models.
The Test layer will have the unit tests for each funcionality to be built in the other layers.

Now, let's create a solution!

Open the Visual Studio 2019 and create a new .NET Core web application project and name it "CRUD-NETCore-TDD". Choose the API template and uncheck the HTTPS option:

The default .NET Core web API will be created.

Delete the "Controllers/WeatherForecastController.cs" and "WeatherForecast.cs" files. Add a C# .NET Core class library project to the solution named "CRUD-NETCore-TDD.Infra". Delete the "Class1.cs" file as well.

The solution will look like this:

Add a .NET Core xUnit Test Project to the solution and name it "CRUD-NETCore-TDD.Test". Delete the "UnitTest1.cs" file.

The solution will look like this:

Add a reference from the Infra project to the web API project and a reference to the Test project from the other ones.

The solution will look like this:

Let's build the Test project.

Criando um jogo de plataforma com Construct3 - Parte 2

LUCIANO DE SOUSA PEREIRA — Thu, 21 Nov 2019 00:25:13 +0000

Nesta parte, prosseguiremos com a construção de nosso jogo adicionando o personagem, itens coletáveis e o placar.

Projeto completo disponível aqui.

Topicos

Personagem
Pontos

Personagem

Retorne à aba "Layout 1" e adicione um novo sprite. Dessa vez, carregue uma imagem qualquer do seu computador que represente o seu personagem:

Eu selecionei a minha foto 🤣:

Agora adicione um comportamento de plataforma:

Execute o jogo e você conseguirá manipular o personagem com as setas do teclado:

Pontos

Agora vamos dá substância ao jogo e adicionar itens coletáveis que atribuem pontos ao jogador.

Crie um novo sprite com uma cor diferente dos usados em plataformas. Mantenha o formato de quadrado, mas bem pequeno:

Adicione o comportamento "Girar":

Ao executar o jogo, verá que o sprite estará girando em sentido horário sem sair do lugar. Agora, adicione a seguinte condição na aba de eventos: Quando o personagem colidir com o sprite, o sprite será destruído:

Execute o jogo e o sprite irá desaparecer ao entrar em contato com o personagem.

Agora precisamos de um placar. Adicione o objeto "Texto" no layout:

Este será o placar. Posicione-o em algum ponto da tela que não será obstruído:

Adicione uma variável de instância ao objeto "Texto":

Chame-a de "Pontos". Ela será do tipo numérico:

Uma nova regra deverá ser inserida na aba de eventos: ao iniciar o layout, o texto deverá mostrar o valor dos pontos. Para isso, crie uma nova ação à condição "Sistema" -> "Ao iniciar layout" e selecione o objeto "Texto":

Selecione a opção "Definir Texto" e prossiga:

Para exibir os pontos, será necessário usar o a função "str" para converter em string a variável "Pontos" do objeto "Texto":

A condição inicial do jogo ficou assim:

Agora precisamos incrementar os pontos a cada vez que ocorre o contato do personagem com o sprite giratório, para isso aproveite a condição já existente e apenas adicione uma nova ação:

Selecione o objeto "Texto" e a opção "Adicionar a":

Para a variável "Pontos", defina o valor 1:

Copie a ação adicionada à condição inicial para atualizar o placar:

Agora faça várias cópias do sprite giratório e espalhe-as pelo layout:

Execute o jogo, colida com os sprites giratórios e o placar será incrementado:

Conclusão

Construct3 mostrou-se um ferramenta excelente para desenvolvimento de jogos por iniciantes. O mínimo de programação foi necessário para exibir o placar.

Criando um jogo de plataforma com Construct3 - Parte 1

LUCIANO DE SOUSA PEREIRA — Thu, 21 Nov 2019 00:25:00 +0000

Introdução

As vezes você está entediado no seu trabalho e decide utilizar 15 minutos do seu tempo para se distrair. Que tal criar um jogo de plataforma simples e sem a necessidade de instalar programa algum, apenas usando o navegador?

Construct3 permite que seja possível criar jogos 2D com grande rapidez, bastando utilizar um pouco de lógica de programação e atribuindo comportamentos aos objetos como física, solidez, plataforma, projétil, etc.

Projeto completo disponível aqui.

Instruções

Acesse a página web do Construct3 e pressione em "NOVO PROJETO":

Crie um projeto com a configuração padrão:

Pressione o botão direito do mouse na área de trabalho da aba "Layout 1" e selecione "Inserir novo objeto":

Criaremos plataformas sólidas por onde nosso personagem irá se movimentar. Para isso, insira o objeto "Sprite" no layout:

Na janela de edição de animações do Sprite, apenas adicione uma cor no quadrado e feche a janela:

Transforme o sprite em um retângulo e o coloque na base da área tracejada:

Adicione um comportamento ao retângulo:

Selecione sólido:

Pronto! Temos o piso do cenário.

Faça uma cópia do retângulo e crie uma pequena plataforma flutuante do lado direito:

Crie um novo sprite seguindo os passos anteriores para que tenha o comportamento sólido, mas dessa vez ele ficará do lado esquerdo da tela e irá se mover para cima e para baixo. Para isso, será necessário adicionar o comportamento "Senóide":

Você pode visualizar e editar os comportamentos pela janela de propriedades:

Se você executar o jogo, verá que a plataforma da esquerda estará se movendo horizontalmente ao invés de verticalmente. Para alterar essa característica padrão do comportamento senoidal, vamos utilizar a aba "Folha de eventos 1":

Ao pressionar em "Adicionar..." -> "Adicionar Evento", selecione o objeto "Sistema" e clique em "Próximo":

Adicione a condição "Ao iniciar layout" e continue:

Uma condição será adicionada na aba de eventos e precisará de uma conclusão. Pressione em "Adicionar ação":

Selecione o sprite correspondente à plataforma senoidal e continue:

Selecione "Definir movimento" e prossiga:

Selecione a opção vertical e conclua:

Pronto!

Temos a primeira condição do jogo que será ativada automaticamente ao executá-lo.

Na próxima parte, iremos adicionar nosso personagem!

Uploading a NodeJS web API to Heroku

LUCIANO DE SOUSA PEREIRA — Wed, 06 Nov 2019 11:24:46 +0000

Objective

Upload a simple NodeJS web API to Heroku without using Docker.

Full example: https://github.com/lucianopereira86/NodeJS-Heroku.

Technologies

Topics

NodeJS
Heroku

NodeJS

Create a directory for your NodeJS web API.

By running this command in a terminal, create a package.json file:

npm init

Edit the file by adding the following dependencies:

{
    ...
    "dependencies": {
        "cors": "^2.8.5",
        "express": "^4.16.4"
    }
    ...
}

Create the node_modules folder with this command:

npm install

Create an index.js file containing this code:

const express = require('express');
const app = express();
var cors = require('cors');

app.use(
    cors({
        credentials: true,
        origin: true
    })
);
app.options('*', cors());

app.get('/', (req, res) => res.send('Working!!!'));

app.listen(process.env.PORT || 3000, function() {
    console.log('server running on port 3000', '');
});

Run the web API with the following command:

node index

Open the browser with the URL below:

http://localhost:3000/

This will be the result:

Your web API is WORKING!

Time to upload it to Heroku.

Heroku

Heroku is a cloud platform that allows applications be hosted at will. It's mostly used for web APIs. Go to Heroku website and sign up or sign in.

In your machine, install the latest version of Heroku CLI here.

In the web API root folder, create a Procfile, which is a Heroku file that specifies the commands that are executed by the app on startup. Write the following line within the file:

web: node index.js

Create a .git folder with this command:

git init

Create a .gitignore manually containing this line:

/node_modules

Your project will look like this:

Authenticate with Heroku by running this command and follow the instructions that will be displayed in the terminal:

heroku login

Run the following command to create a project in Heroku. It will receive a random name but you can change it.

heroku create

Now, run the commands below to commit your web API to Heroku's new project:

git add *;
git commit -m "First commit";
git push heroku master;

The console will show the upload progress like this:

Check if any error has occurred by running:

heroku logs

Finally, open the project by running this command:

heroku open

This will be the result:

Conclusion

We have successfully uploaded our NodeJS web API to Heroku without using Docker.

Also, it was not needed to interact directly with Heroku website to create the app.

References

How To Deploy Nodejs App To Heroku

Como integrar Vue com ASP.NET Core usando extensão SPA

LUCIANO DE SOUSA PEREIRA — Sat, 02 Nov 2019 13:37:03 +0000

AVISO
Estou usando .NET Core 3.0 e Visual Studio 2019 v16.3.2, porém, acredito que quase tudo esteja disponível no .NET Core 2.x.

Introdução

Single Page Application (SPA) é uma tecnologia muito importante para desenvolvedor front-end.

No ASP.Net Core, existe a funcionalidade de integração com SPA.
Você pode vê-la ao criar um novo projeto do tipo ASP.NET Core Web Application.

Os três templates no fundo são "Angular", "React.js" e "React.js e Redux", utilizados para desenvolver web APIs (usando ASP.NET Core) e SPAs (usando o framework selecionado) em um projeto, como demonstrado abaixo:

No Solution Explorer haverá uma chamada ClientApp pertencente à aplicação SPA. É possível desenvolver usando Visual Studio ou qualquer editor de sua preferência, como o Visual Studio Code.

Se quiser debuggar a aplicação, pressione "F5". O Visual Studio irá executar o servidor de desenvolvimento para a SPA e para o ASP.NET Core, configurando a comunicação entre ambos.
Também serão executados comandos como "npm install" automaticamente.

Parece perfeito, mas você deve estar pensando: "Onde está o Vue que eu gosto tanto?".
É o que veremos a seguir.

Criando um projeto ASP.NET Core Web Application

Vamos primeiro criar um projeto ASP.NET Core Web Application usando o template de API:

Dentro da pasta do projeto, abra um terminal e execute o comando abaixo para criar um projeto Vue usando o Vue-CLI:

vue create client-app

Caso não tenha instalado o Vue-CLI, acesse o link abaixo:

https://cli.vuejs.org/guide/installation.html

Editando o arquivo do projeto para realizar a integração

Edite o arquivo .csproj manualmente com o seguinte código:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <RootNamespace>YOUR-PROJECT-NAME-HERE</RootNamespace>
    <TargetFramework>netcoreapp3.0</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>client-app\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.0.0-preview6.19307.2" />
  </ItemGroup>

  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

</Project>

Depois de editar o arquivo, o projeto em Vue será construído com o projeto em ASP.NET Core.

Adicionado configuração de conexão

Último passo. Crie uma classe chamada VueHelper para configurar a conexão entre o servidor de desenvolvimento e a aplicação em Vue:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.SpaServices;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using System;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Net.NetworkInformation;
using System.Runtime.InteropServices;
using System.Threading.Tasks;

namespace NetCore3_Vue
{
    public static class VueHelper
    {
        // default port number of 'npm run serve'
        private static int Port { get; } = 8080;
        private static Uri DevelopmentServerEndpoint { get; } = new Uri($"http://localhost:{Port}");
        private static TimeSpan Timeout { get; } = TimeSpan.FromSeconds(30);
        // done message of 'npm run serve' command.
        private static string DoneMessage { get; } = "DONE  Compiled successfully in";

        public static void UseVueDevelopmentServer(this ISpaBuilder spa)
        {
            spa.UseProxyToSpaDevelopmentServer(async () =>
            {
                var loggerFactory = spa.ApplicationBuilder.ApplicationServices.GetService<ILoggerFactory>();
                var logger = loggerFactory.CreateLogger("Vue");
                // if 'npm run serve' command was executed yourself, then just return the endpoint.
                if (IsRunning())
                {
                    return DevelopmentServerEndpoint;
                }

                // launch vue.js development server
                var isWindows = RuntimeInformation.IsOSPlatform(OSPlatform.Windows);
                var processInfo = new ProcessStartInfo
                {
                    FileName = isWindows ? "cmd" : "npm",
                    Arguments = $"{(isWindows ? "/c npm " : "")}run serve",
                    WorkingDirectory = "client-app",
                    RedirectStandardError = true,
                    RedirectStandardInput = true,
                    RedirectStandardOutput = true,
                    UseShellExecute = false,
                };
                var process = Process.Start(processInfo);
                var tcs = new TaskCompletionSource<int>();
                _ = Task.Run(() =>
                {
                    try
                    {
                        string line;
                        while ((line = process.StandardOutput.ReadLine()) != null)
                        {
                            logger.LogInformation(line);
                            if (!tcs.Task.IsCompleted && line.Contains(DoneMessage))
                            {
                                tcs.SetResult(1);
                            }
                        }
                    }
                    catch (EndOfStreamException ex)
                    {
                        logger.LogError(ex.ToString());
                        tcs.SetException(new InvalidOperationException("'npm run serve' failed.", ex));
                    }
                });
                _ = Task.Run(() =>
                {
                    try
                    {
                        string line;
                        while ((line = process.StandardError.ReadLine()) != null)
                        {
                            logger.LogError(line);
                        }
                    }
                    catch (EndOfStreamException ex)
                    {
                        logger.LogError(ex.ToString());
                        tcs.SetException(new InvalidOperationException("'npm run serve' failed.", ex));
                    }
                });

                var timeout = Task.Delay(Timeout);
                if (await Task.WhenAny(timeout, tcs.Task) == timeout)
                {
                    throw new TimeoutException();
                }

                return DevelopmentServerEndpoint;
            });

        }

        private static bool IsRunning() => IPGlobalProperties.GetIPGlobalProperties()
                .GetActiveTcpListeners()
                .Select(x => x.Port)
                .Contains(Port);
    }
}

Adicione a função AddSpaStaticFiles no método ConfigureServices do arquivo Startup.cs para ter suporte à SPA:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    services.AddSpaStaticFiles(options => options.RootPath = "client-app/dist");
}

E adicione as funções UseSpaStaticFiles e UseSpa no método Configure:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // Other code
    (...)

    // add following statements
    app.UseSpaStaticFiles();
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "client-app";
        if (env.IsDevelopment())
        {
            // Launch development server for Vue.js
            spa.UseVueDevelopmentServer();
        }
    });
}

Executando a aplicação

Abra a seção Depurar na página de propriedades do projeto e remova o conteúdo do campo "Iniciar navegador":

Pressione "F5" novamente para ver a página inicial do Vue.

É hora de se conectar com a API. Crie o arquivo ValuesController.cs na pasta Controllers contendo um simples método GET:

using Microsoft.AspNetCore.Mvc;

namespace NetCore3_Vue.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ValuesController : ControllerBase
    {
        [HttpGet]
        public IActionResult Get()
        {
            return Ok(new string[] { "value1", "value2" });
        }
    }
}

Edite o arquivo HelloWorld.vue dentro do projeto em Vue para exibir o resultado da requisição:

<template>
    <div>
        <div :key="r" v-for="r in this.results">{{ r }}</div>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                results: []
            };
        },
        async created() {
            const r = await fetch('/api/values');
            this.results = await r.json();
        }
    };
</script>

Execute a aplicação novamente e este será o resultado:

Conclusão

Integramos um projeto web em ASP.NET Core com um projeto em Vue usando extensões SPA do ASP.NET Core.

Para que houvesse conexão entre ambos os projetos, foi necessário realizar alterações no arquivo de configuração do projeto em .Net Core, assim como, uma classe auxiliar foi criada para gerenciar a aplicação em Vue.

Referências

Artigo original: How to integrate Vue.js and ASP.NET Core using SPA Extension

Projeto completo no GitHub: https://github.com/lucianopereira86/NetCore3-Vue

.Net Core 3 + EFCore

LUCIANO DE SOUSA PEREIRA — Fri, 25 Oct 2019 11:30:15 +0000

In this article, you will learn how to connect a .Net Core 3 web API with a MySQL database by using Entity Framework Core.

The original project is available here: NetCore3-EFCore.

Technologies

Topics

Installation
Repository

Installation

You will need a .Net Core 3 project connected with a MySQL database, so follow the instructions from this repository or from this article.

These are your current packages:

You don't need Dapper anymore, so download the Entity Framework Core package for MySQL, called Pomelo.EntityFrameworkCore.MySql, by Nuget:

Create a folder in the root called Infra with three other folders inside of it: interface, models and repository.

It's time for some coding!

Repository

Inside the repository folder, create a class called DBContext with the following code:

using Microsoft.EntityFrameworkCore;

namespace NetCore3WebAPI.Infra.Repository
{
    public class DBContext: DbContext
    {
        public DBContext(DbContextOptions<DBContext> options) : base(options)
        {

        }

        protected override void OnModelCreating(ModelBuilder modelBuider)
        {
            base.OnModelCreating(modelBuider);
        }
    }
}

This class will be responsible for mirroring the database tables into Class objects.

If you have followed the instructions from the article NetCore3 MySQL, your database must have a table called user. Create a class within the Infra/Models folder containing the same properties as the table:

namespace NetCore3WebAPI.Infra.Models
{
    public class User
    {
        public int id { get; set; }
        public string name { get; set; }
    }
}

Modify the DBContext class by adding a DBSet for the User class:

public DbSet<User> User { get; set; }

This object will be used to manipulate the data from the table.

Inside the OnModelCreating, you need to mirror each model with its respective table. So do this for the User class:

 modelBuider.Entity<User>(e =>
{
    e
    .ToTable("user")
    .HasKey(k => k.id);

    e
    .Property(p => p.id)
    .ValueGeneratedOnAdd();
});

This will be the result:

using Microsoft.EntityFrameworkCore;
using NetCore3WebAPI.Infra.Models;

namespace NetCore3WebAPI.Infra.Repository
{
    public class DBContext: DbContext
    {
        public DbSet<User> User { get; set; }
        public DBContext(DbContextOptions<DBContext> options) : base(options)
        {

        }

        protected override void OnModelCreating(ModelBuilder modelBuider)
        {
            modelBuider.Entity<User>(e =>
            {
                e
                .ToTable("user")
                .HasKey(k => k.id);

                e
                .Property(p => p.id)
                .ValueGeneratedOnAdd();
            });
            base.OnModelCreating(modelBuider);
        }
    }
}

To build the repository, it will be necessary a super class containing the generic methods used by the DBSet object.
Inside the Infra/Interface folder, create two interfaces:

using System;
using System.Collections.Generic;
using System.Linq.Expressions;

namespace NetCore3WebAPI.Infra.Interface
{
    public interface IBaseRepository<T> where T : class
    {
        IEnumerable<T> List(Expression<Func<T, bool>> expression);
        bool Any(Expression<Func<T, bool>> expression);
        T Save(T entity);
        T Update(T entity);
        void Delete(T entity);
    }
}

using NetCore3WebAPI.Infra.Models;

namespace NetCore3WebAPI.Infra.Interface
{
    public interface IUserRepository : IBaseRepository<User>
    {
    }
}

Inside the Infra/Repository folder, create two classes:

using Microsoft.EntityFrameworkCore;
using NetCore3WebAPI.Infra.Interface;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;

namespace NetCore3WebAPI.Infra.Repository
{
    public class BaseRepository<T> : IBaseRepository<T> where T : class
    {
        private DbSet<T> entity_;
        protected DBContext context;

        public BaseRepository(DBContext context)
        {
            this.context = context;
            entity_ = context.Set<T>();
        }

        public virtual IEnumerable<T> List(Expression<Func<T, bool>> expression)
        {
            return entity_.Where(expression).ToList();
        }

        public bool Any(Expression<Func<T, bool>> expression)
        {
            return entity_.Any(expression);
        }

        public T Save(T entity)
        {
            entity_.Add(entity);
            context.SaveChanges();

            return entity;
        }

        public T Update(T entity)
        {
            entity_.Update(entity);
            context.SaveChanges();
            return entity;
        }

        public void Delete(T entity)
        {
            entity_.Remove(entity);
            context.SaveChanges();
        }
    }
}

using NetCore3WebAPI.Infra.Interface;
using NetCore3WebAPI.Infra.Models;

namespace NetCore3WebAPI.Infra.Repository
{
    public class UserRepository : BaseRepository<User>, IUserRepository
    {
        public UserRepository(DBContext context) : base(context)
        {
        }
    }
}

Inside the Startup's ConfigureServices method, create a service for the IUserRepository and inject the MySQL connection string (from the appsettings.json) into DBContext:

(...)
using Microsoft.EntityFrameworkCore;

namespace NetCore3WebAPI
{
    public class Startup
    {
        (...)
        public void ConfigureServices(IServiceCollection services)
        {
            (...)
            services.AddScoped<IUserRepository, UserRepository>();
            services.AddDbContext<DBContext>(o => o.UseMySql(Configuration.GetConnectionString("MySQL")));
        }
        (...)
    }
}

Now, we are ready to test our connection!

Inside the UserController class, inject the IUserRepository interface inside the constructor:

private readonly ConnectionStrings con;
private readonly IUserRepository repo;
public UserController(ConnectionStrings c, IUserRepository r)
{
    con = c;
    repo = r;
}

Import the Linq library and modify the Get method like this:

(...)
using System.Linq;

namespace NetCore3WebAPI.Controllers
{
    [Route("api/User")]
    [ApiController]
    public class UserController : ControllerBase
    {
        (...)
        [HttpGet]
        public async Task<IActionResult> Get([FromQuery] User vm)
        {
            return await Task.Run(() =>
            {
                var result = repo.List(w =>
                            (vm.id == 0 || w.id == vm.id)
                            &&
                            (vm.name == null || w.name.ToUpper().Equals(vm.name.ToUpper())));
                return Ok(result);
                //using (var c = new MySqlConnection(con.MySQL))
                //{
                //    var sql = @"SELECT * FROM user
                //                WHERE (@id = 0 OR id = @id)
                //                AND (@name IS NULL OR UPPER(name) = UPPER(@name))";
                //    var query = c.Query<User>(sql, vm, commandTimeout: 30);
                //    return Ok(query);
                //}
            });
        }
        (...)
    }
}

You did the same thing as the Dapper code was doing, but without using SQL commands.

Run the web API and access the Swagger by the URL:

http://localhost:53000/swagger/index.html

Test the GET method:

The result will be something like this:

Conclusion

It was much more complex to connect with a database by using Entity Framework than by using Dapper. However, due to the interface/repository layers, the database access has become safer, better structured and object oriented.

Entity Framework is advised for systems in which the business rules are kept in the application layer. This commonly happens when there are databases with different technologies integrated with the web API.

DEV Community: LUCIANO DE SOUSA PEREIRA

From TDD to DDD: Building a .NET Core Web API - Part 7

Technologies

Post User • Theory

Red Step • Age

Green Step • Age

Post User • Fact II

Refactor Step II

Coming soon...

From TDD to DDD: Building a .NET Core Web API - Part 6

Technologies

Post User • Theory

Refactor Step • Name

Next

From TDD to DDD: Building a .NET Core Web API - Part 5

Technologies

Topics

Post User • Theory

Red Step • Name

Green Step • Name

Next

From TDD to DDD: Building a .NET Core Web API - Part 4

Technologies

Post User • Fact

Refactor Step

Next

From TDD to DDD: Building a .NET Core Web API - Part 3

Technologies

Post User • Fact

Green Step

Next

From TDD to DDD: Building a .NET Core Web API - Part 2

Technologies

Topics

Test Project

Post User

Fact

Red Step

Next

From TDD to DDD: Building a .NET Core Web API - Part 1

Technologies

Topics

TDD

Project Structure

Next

Criando um jogo de plataforma com Construct3 - Parte 2

Topicos

Personagem

Pontos

Conclusão

Criando um jogo de plataforma com Construct3 - Parte 1

Introdução

Instruções

Uploading a NodeJS web API to Heroku

Objective

Technologies

Topics

NodeJS

Heroku

Conclusion

References

Como integrar Vue com ASP.NET Core usando extensão SPA

Introdução

Criando um projeto ASP.NET Core Web Application

Editando o arquivo do projeto para realizar a integração

Adicionado configuração de conexão

Executando a aplicação

Conclusão

Referências

.Net Core 3 + EFCore

Technologies

Topics

Installation

Repository

Conclusion