How can we integrate Flutter with .Net core web API | Part-1: Building Back-end Web service using .Net core.
Tags: flutter, dotnet
Published: 2021-07-17 22:58:01

#**Part 1:Configure the database**
The database managment system we will use for this particular project is **Sql Server** and **Micrsoft Sql Server Managment Studio** for using sql server in **GUI**. so if you haven't installed it yet. go to the following **Microsoft Documentation** and install. 

*Step 1: [Install SqlServer](https://docs.microsoft.com/en-us/sql/database-engine/install-windows/install-sql-server?view=sql-server-ver15)*,

*Step 2: [Install Microsoft Sql Server Managment Studio](https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver15)*

 

#**Part 2: configuring the .Net web API project**

**Step 1: Create a new .Net web API project** 

we can simply create new project by using this command. 

```cmd
dotnet new  webapi -n <name>
```
then we will get the template for a web API. remove the default controller from the controller package. 

**Step 2: Install the necessary packages** 

to install package we have especial extension called **NuGet Package Manager** from the visual studio code go to the extension tab and search for **NuGet Package Manager** 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nt9y22e7prvkxf6frjvr.png)
 

then install it. 

then after that hit on **ctrl + shift + p** and you will see a drop-down option from the above. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfjf41e2tu0tmnng4rb9.png)

Click on the above choice which says that **Nuget Package Manager: Add Package** it will prompt you to enter the package name so enter the package name in this case the package we want to install is **Microsoft.EntityFrameworkCore** which used to connect to SQL server.

then choose the version number that can work fine with the  .Net version of your computer. after some seconds it will automatically install it and put it on the **.csproj** file.

do the same for the rest of the packages too. 

```c#
 <PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="8.1.0"/>
<PackageReference Include="Microsoft.EntityFrameworkCore" Version="3.1.12"/>
<PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="3.1.12"/>
```
the whole code of our **.csproj** file will look like the following

```c#
<Project Sdk="Microsoft.NET.Sdk.Web" ToolsVersion="Current">
  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <OldToolsVersion>2.0</OldToolsVersion>
    <GenerateAssemblyInfo>false</GenerateAssemblyInfo>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="8.1.0"/>
    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="3.1.12"/>
    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="3.1.12"/>
  </ItemGroup>
</Project>
```

**Step 3: Add a model called Service.cs**

First, create a folder called **Model** and in that folder create **Service.cs** model.

This model should be the same as the database column we have created before. so our **Service.cs** code will look like this. 

```c#
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System;

namespace fixit.DTO
{
    public class ServiceDto
    {

        [Required]
        public int ServiceId { get; set; }
        [Required]
        public string ServiceName { get; set; }
        [Required]
        public string Description { get; set; }
        [Required]
        public string Category { get; set; }
        [Required]
        public int InitialPrice { get; set; }
        [Required]
        public int IntermediatePrice { get; set; }
        [Required]
        public int AdvancedPrice { get; set; }
        [Required]
        public DateTime AddedTime { get; set; }




    }
}
```

**Step 4: add a DTO called *ServiceDto.cs*.**
First, create a folder called **DTO** and in this folder create a file called **ServiceDto.cs** and add the following code. 

```c#
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System;

namespace fixit.DTO
{
    public class ServiceDto
    {

        [Required]
        public int ServiceId { get; set; }
        [Required]
        public string ServiceName { get; set; }
        [Required]
        public string Description { get; set; }
        [Required]
        public string Category { get; set; }
        [Required]
        public int InitialPrice { get; set; }
        [Required]
        public int IntermediatePrice { get; set; }
        [Required]
        public int AdvancedPrice { get; set; }
        [Required]
        public DateTime AddedTime { get; set; }





    }
}
```
The purpose of adding this file to the project is in order to map the data that come from the database to some format we want. which will be stored on the Dto file called **ServiceDto.cs**

**Step 5: Add a Profile called *ServiceProfile.cs*.**
create a folder called *Profile* and in this folder create a file called **ServiceProfile.cs** and in this file add the following code.
```c#
using AutoMapper;
using fixit.DTO;
using fixit.Models;

namespace fixit.Profiles
{
    public class ServiceProfile : Profile
    {
        public ServiceProfile()
        {
            CreateMap<fixit.Models.Service, ServiceDto>()
            .ForMember(dest => dest.ServiceId, opt => opt.MapFrom(src => src.ServiceId))
            .ForMember(dest => dest.ServiceName, opt => opt.MapFrom(src => src.ServiceName))
            .ForMember(dest => dest.Description, opt => opt.MapFrom(src => src.Description))
            .ForMember(dest => dest.Category, opt => opt.MapFrom(src => src.Category))
            .ForMember(dest => dest.InitialPrice, opt => opt.MapFrom(src => src.InitialPrice))
            .ForMember(dest => dest.IntermediatePrice, opt => opt.MapFrom(src => src.IntermediatePrice))
            .ForMember(dest => dest.AdvancedPrice, opt => opt.MapFrom(src => src.AdvancedPrice))
            .ForMember(dest => dest.AddedTime, opt => opt.MapFrom(src => src.AddedTime));
           CreateMap<ServiceDto, fixit.Models.Service>();

    
    
    
 }

    }
}
```
What this code will do is mapping from the model to Dto using a special package called **AutoMapper**.

**Step 6: Create an interface called  IRepository.cs
create a folder called **Data** and in that folder create a file called **IRepository.cs** and add the following code.

```c#
using System.Collections.Generic;
using System.Threading.Tasks;
using fixit.DTO;

namespace fixit.Data
{
    public interface IRepository<T>
    {
        Task<List<T>> GetData();
        Task<T> GetDataById(int id);

        Task<T> InsertData(T service);
        Task<T> UpdateData(T service);
        Task<bool> DeleteData(T service);

    }
}
```
This interface act as a **mediator** between the controller and repository.

**Step 7:  Add a DataContext for the Service model**

from the **Data** folder, we have created before, create a new file called **DataContext.cs** and add the following code to it.

```c#

using fixit.Models;
using Microsoft.EntityFrameworkCore;
using MySql.Data.EntityFrameworkCore;
namespace fixit.Data

{
    
    public class DataContext : DbContext
    {
        public DataContext() { }
        public DataContext(DbContextOptions<DataContext> options) : base(options) { }

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


```

**Step 8: Add ServiceRepsitory.cs**
From the **Data** folder again create a file called **ServiceRepositiry.cs** this file will contain all the CRUD operations that will be performed on the Service object. the code of all the CRUD operations is like this just copy and paste it. 

```c#

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;
using fixit.Models;


namespace fixit.Data
{
    public class ServiceRepository: IRepository<Service>
    {
        private readonly DataContext _context;
        public ServiceRepository(DataContext context)
        {
            _context = context;
        }
        // Delete Service objects
        public async Task<bool> DeleteData(Service service)
        {
            Console.WriteLine("Delete method invoked");
            _context.Service.Remove(service);
            await _context.SaveChangesAsync();
            return true;
        }


        // Get all service objects
        public async Task<List<Service>> GetData()
        {
            //    Getting database data here
            var model = await _context.Service.ToListAsync();
            return model;

        }
        // Get Service by  id
        public async Task<Service> GetDataById(int id)
        {
            return await _context.Service.FirstOrDefaultAsync(x => x.ServiceId == id);
        }
       
        // Update and create new service objects
        public async Task<Service> InsertData(Service service)
        {

            Console.WriteLine("Create data  method invoked");
            _context.Service.Add(service);

            await _context.SaveChangesAsync();
            return service;
        }

        public async Task<Service> UpdateData(Service service)
        {




            Console.WriteLine("Update method  invoked");



            _context.Update(service).Property(x => x.ServiceId).IsModified = false;
            _context.SaveChanges();

            return service;
        }
    }
}
```

**Step 9: Add ServiceController.cs**

By default when the project created it will contain a folder called *Controller*. if it does not exist create it. then in that folder create a file called **ServiceController.cs** and add the following code to it.

```c#
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using AutoMapper;
using fixit.Data;
using fixit.DTO;
using Microsoft.AspNetCore.Mvc;
using fixit.Models;

using Microsoft.AspNetCore.Authorization;

namespace Controllers
{

    
    [ApiController]
    [Route("api/services")]
    public class ServiceController : ControllerBase
    {
        private readonly IRepository<Service> _repo;
        private readonly IMapper _mapper;
        public ServiceController(IRepository<Service> repo, IMapper mapper)
        {
            _repo = repo;
            _mapper = mapper;
        }



        [HttpGet]
        public async Task<IActionResult> GetServices()
        {
            Console.WriteLine("This is the get All service method");

            var model = await _repo.GetData();
           
            return Ok(_mapper.Map<IEnumerable<ServiceDto>>(model));
        
        }

        [HttpGet("{id}")]
        public async Task<IActionResult> GetServiceById(int id)
        {
             Console.WriteLine("This is the comming id ");
            Console.WriteLine(id);
             

            var model = await _repo.GetDataById(id);
            return Ok(_mapper.Map<ServiceDto>(model));
        }
     
     
        //  Service Post method

         [HttpPost]
        public async Task<IActionResult> CreateService(ServiceDto serviceDto)
        {
            Console.WriteLine("Crate Service Method Invoked");
            var service = _mapper.Map<Service>(serviceDto);
            await _repo.UpdateData(service);
            return Ok(serviceDto);
        }
        
        // Service Delete method
        [HttpDelete("{id}")]
        public async Task<IActionResult> DeleteServices(int id)
        {
            var service = await _repo.GetDataById(id);
            // var service = _mapper.Map<Service>(serviceDto);
            await _repo.DeleteData(service);
            return Ok(_mapper.Map<ServiceDto>(service));

            
        }
    }
}
```
The purpose of this controller is to receive requests from the client , get information from the repository through the mediator interface,returning  the data back to the client.

#**Part 3: Connect our code  to the database**

The database information will be store on the connection string, later on, to connect it to the data context on the startup method.

In this case, we need to give information about the database that is running.

**Step 1: Start Sql Server and copy the connection string**
Open or launch **Microsoft Sql Server Managment Studio**.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68j9d32g1dz2jmlf44fn.png)

A dialog box will come witht the window together. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p151jdd9pbkzewpd87jn.png)
 Select **Database Engine** on the server type. 
 It will give you the server name by default.
and make the **Authentication** to be **Window Authentication** like it is  on the displayed image.

Then click on the **connect**

if the connection is successful you will get an explorer page like this. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gibhnoa7fln162ns6kn2.png)

so the connection string will be the one that we put on the server name when we connect to the database. you may find different ways to copy this server name after connecting to the database. but what i prefer is to **disconnnect** the database and try to **connect** again then I will copy the server name from the dialog box. 

To disconnect click on the icon on the left top corner of the explorer. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rsv4vl10yly6i8ajievi.png)
Then clcik on the icon next to the disconnect icon in order to connect again. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pikqjocx479790j8jc9s.png)

The dialog box will appear again. and this time copy the server name option. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvty8wof0nidkzgcbm17.png)
 

*So now we have got our connection string value.* 
 
**Step 2: Put the connection string on the appSettings.js**

put this to the **ConnectionStrings** object by assigning to a variable that used to access this information from some other file. for my case it is **fixItConnection**

```JSON
 
 "ConnectionStrings": {
 "fixItConnection": "Server=DESKTOP-BEKSKMU\\SQLEXPRESS;Database=FixItDb;Trusted_Connection=True;"
}
```

the whole **appSettings.json** code will be. 

```JSON
 {
  "AppSettings": {
    
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  
  "ConnectionStrings": {
   "fixItConnection": "Server=DESKTOP-BEKSKMU\\SQLEXPRESS;Database=FixItDb;Trusted_Connection=True;"
  }
}
```

**Step 3: Updating the startUp.cs**

update the *startUp.cs* file of the project in order to connect to Sql Server. 

from the **ConfigureService** method add the following line of code. 

```c#
 services.AddDbContext<DataContext>(opt => opt.UseSqlServer(Configuration.GetConnectionString("fixItConnection")));
 
```

here the **UseSqlServer** method will be imported from the package we have installed before.**Microsoft.EntityFrameworkCore;** and used to inter connect the database information stored on the **fixItConnection** to our **DataContext**.

down to this, we should insert a code for **CORS** this gives permission to our back-end server in order to be accessible by any front-end running on the same machine. unless otherwise, we will get a cors error whenever we try to access this server from the same machine.

```c#
 services.AddCors(option =>
  {
      option.AddPolicy("allowedOrigin",
          builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()
          );
  });
```

Then we need to register our **Controller** and **Repository** we have created before.

```c#
  services.AddControllers();
  services.AddScoped<IRepository<Service>, ServiceRepository>();
```


the whole startUp.cs file looks like the following 

```c#
using System;
using AutoMapper;
using fixit.Data;
using fixit.Models;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

using System.Text;


// using Pomelo.EntityFrameworkCore.MySql;
// using fixit.Service;

namespace fixit
{   
    public class Startup
    {   
             readonly string AllowedOrigin = "allowedOrigin";
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<DataContext>(opt => opt.UseSqlServer(Configuration.GetConnectionString("fixItConnection")));
            services.AddAutoMapper(AppDomain.CurrentDomain.GetAssemblies());

           services.AddCors(option =>
            {
                option.AddPolicy("allowedOrigin",
                    builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()
                    );
            });
          
            services.AddControllers();
         
            services.AddScoped<IRepository<Service>, ServiceRepository>();
        
         
         
         

        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseCors(AllowedOrigin);
            app.UseHttpsRedirection();

            app.UseRouting();

            app.UseAuthentication();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }
    }
}
```
#Part 4: Migrating the model to sql server database. 
In this part of the article we will see on how can we set up our database objects from the code. 

the traditionall way of doing this is to create the objects directly form the database. but that will be tiresome and not efficient.

**Step 1:Create your first migration**

You're now ready to add your first migration! Instruct EF Core to create a migration named InitialCreate:

excute the folllwong from command line with in the project directory. 

```cmd
dotnet ef migrations add InitialCreate
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7sjs6bysc59o0frfggnx.png)
 
EF Core will create a directory called Migrations in your project, and generate some files. It's a good idea to inspect what exactly EF Core generated - and possibly amend it - but we'll skip over that for now.

**Step2:Create your database and schema**

At this point you can have EF create your database and create your schema from the migration. This can be done via the following:

```cmd
dotnet ef database update
```

That's all there is to it - your application is ready to run on your new database, and you didn't need to write a single line of SQL. Note that this way of applying migrations is ideal for local development, but is less suitable for production environments.

*check out this [link](https://docs.microsoft.com/en-us/ef/core/managing-schemas/migrations/?tabs=dotnet-core-cli) to understand more about migration in .Net core Entity Frame work*.

#**Finally: Running the Code and Check the result**
**Almost Done**. now we have done with the implementation staffs.
 the next thing will be running the code and check its functionality. in order to run any dotnet project what we need to do is to execute the following command from the terminal.

```cmd
dotnet run
```

you will get a page that looks like this. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tp0ebnpqrmb9erk1eso.png)
copy the IP address from the page running and test it using postman. 

**http://localhost:5000/api/services/** this is the URL for the controller Service let us try the Get method from the postman. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5so7mxmtvzr4g4aante.png)

we got the data that has been stored in the Sql server.
You can get the full Github code [here](https://github.com/yared123yared/Flutter-With-Asp.Net_Core_Web_Api-1/tree/master/.Net) 

This will be the end of this article.

Next we will look in to how to integrate this web api with the flutter application. check out the part2 of this article [here](https://dev.to/yared123yared/how-can-we-integrate-flutter-with-net-core-web-api-flutter-bloc-state-management-2ak3)

Thank you!