DEV Community: Yared Solomon

How can we integrate Flutter with .Net core web API | Part-1: Building Back-end Web service using .Net core.

Yared Solomon — Sat, 17 Jul 2021 22:58:01 +0000

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,

Step 2: Install Microsoft Sql Server Managment Studio

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.

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

then install it.

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

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.

 <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

<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.

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.

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.

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.

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.


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.


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.

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.

A dialog box will come witht the window together.

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.

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.

Then clcik on the icon next to the disconnect icon in order to connect again.

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

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


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

the whole appSettings.json code will be.

 {
  "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.

 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.

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

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

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

the whole startUp.cs file looks like the following

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.

dotnet ef migrations add InitialCreate

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:

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 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.

dotnet run

you will get a page that looks like this.

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.

we got the data that has been stored in the Sql server.
You can get the full Github code here

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

Thank you!

How can we integrate Flutter with .Net core web API | Part-2: Building the Flutter App.

Yared Solomon — Wed, 05 May 2021 20:19:04 +0000

The application simply do the following activities.

Displaying the Services on the main screen
Showing the detail of every service listed on the main screen
It will have edit option for every service
It will have a delete option for every service.

This is the main page of the application that will display the services lists.

and this is the service add and update page.

and this one is the service detail page on this page we can delete and edit the single service.

so here we will follow some steps to buildthis application.

Pre requests

1.Installing Android studio
2.Installing Flutter and dart

Step 1: Creating a new Flutter Project from an android studio or visual studio code.
From the android studio go to File and click on the New then select New Flutter Project option.

Then you will get the following page.
Click on the Flutter Application and click on the Next button

then here give the application a new name. and click on the Next button.

Then click on the Finish button at the bottom.

here we get a default code.

First, we should prepare a debugging emulator or connect our phone. and it will come at the top.

after that click on the green run button at the top. you will get this page on the emulator.

leave this code, for now, we will update it later.
now create a new directory called Service inside the lib package and inside this directory create the following directories.

Let us see step by step the code insides these directories.

What is Bloc State Management?

Bloc Overview

Overall, Bloc attempts to make state changes predictable by regulating when a state change can occur and enforcing a single way to change state throughout an entire application.

Below are common developer needs that Bloc tries to address

Working as efficiently as possible and reuse components both within your application and across other applications.
Letting many developers to seamlessly work within a single code base
following the same patterns and conventions Developing fast and reactive apps
knowing what state your application is in at any point in time
Easily testing every case to make sure our app is responding appropriately
Recording every single user interaction in your application so that you can make data-driven decisions

Installing and Importing Bloc package

Installation
Add the flutter_bloc package to your pubspec.yaml as a dependency

dependencies:
flutter_bloc: ^6.1.1

Import



import 'package:flutter_bloc/flutter_bloc.dart';

Bloc Architecture

Bloc Architecture: Data Layer

The data layer's responsibility is to retrieve/manipulate data from one or more sources The data layer can be split into two parts
Repository
Data Provider
This layer is the lowest level of the application and interacts with databases, network requests, and other asynchronous data sources

Bloc Architecture: Data Layer -> Data Provider

The data provider's responsibility is to provide raw data. It should be generic and versatile and it will usually expose simple APIs to perform CRUD operations. We might have a createData, readData, updateData, and deleteData method as part of our data layer.

Inside the DataProvider directory create the following two dart files.

Service_data.dart

then inside the Service_data.dart file first add the necessary imports.



import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter_group_project/Service/Model/Service.dart';
import 'package:meta/meta.dart';
import 'package:http/http.dart' as HTTP;

create a class called ServiceDataProvider



class ServiceDataProvider {

}

then inside this class first define the Url for which it will fetch the data from the back-end API



final _baseUrl = 'http://192.168.42.232:5000/api';

Then define the httpClient




final http.Client httpClient;

next, add the constructor for the class.and inside the constructor specify the necessary parameter .



ServiceDataProvider({@required this.httpClient}) : assert(httpClient != null);

after this let's we add the code for the CRUD methods.

createService
this method will communicate with the back-end in order to create the data at the back-end database.

First we have to define the method signature for the createService method as follows.



Future<Service> createService(Service service) async {

}

then let us define the response




final response = await httpClient.post(

)

Inside this httpClient.post method we should put some parameters which are essesntial for the http call.

URL
The first one is the URL this is the destination where the method invocation will go.



 Uri.http('http://192.168.42.232:5000', '/api/services'),

Header

then we should give the header information. on this information we have to tell the back-end the
type of files we are passing.



headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },

Body

then the last on is the body this will be the data that will be created at the server.



 body: jsonEncode(<String, dynamic>{
        "serviceName": service.ServiceName,
        "description": service.Description,
        "category": service.Category,
        "initialPrice": service.InitialPrice,
        "intermediatePrice":service.IntermediatePrice,
        "advancedPrice":service.AdvancedPrice,

      }),

The whole response code will look like the following.



 final response = await httpClient.post(
      Uri.http('http://192.168.42.232:5000', '/api/services'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },

      body: jsonEncode(<String, dynamic>{
        "serviceName": service.ServiceName,
        "description": service.Description,
        "category": service.Category,
        "initialPrice": service.InitialPrice,
        "intermediatePrice":service.IntermediatePrice,
        "advancedPrice":service.AdvancedPrice,

      }),
    );

after the response successfully define, based on the response that come from the server we will update the state



if (response.statusCode == 200) {
      return Service.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed to create course.');
    }

The whole createService method code looks like this.




 Future<Service> createService(Service service) async {

    final response = await httpClient.post(
      Uri.http('http://192.168.42.232:5000', '/api/services'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },

      body: jsonEncode(<String, dynamic>{
        "serviceName": service.ServiceName,
        "description": service.Description,
        "category": service.Category,
        "initialPrice": service.InitialPrice,
        "intermediatePrice":service.IntermediatePrice,
        "advancedPrice":service.AdvancedPrice,

      }),
    );

    if (response.statusCode == 200) {
      return Service.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed to create course.');
    }
  }

getService




Future<List<Service>> getServices() async {
    try{

     final response = await http.get('${_baseUrl}/services');
     if (response.statusCode == 200) {
       final services = jsonDecode(response.body) as List;
       return services.map((service) => Service.fromJson(service)).toList();
     } else {
       throw Exception('Failed to load courses');
     }
   }catch(e){
     print("Exception throuwn $e");
    }


  }

deleteService



Future<void> deleteService(int  id) async {
    final http.Response response = await http.delete(
      'http://192.168.43.163:5000/Service/$id',
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
    );

    if (response.statusCode != 200) {
      throw Exception('Failed to delete course.');
    }

  }

updateService



Future<void> updateService(Service service) async {
    final http.Response response = await httpClient.put(
      'http://192.168.43.163:5000/Service/',
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(<String, dynamic>{
        "serviceId":service.id,
        "serviceName": service.ServiceName,
        "description": service.Description,
        "category": service.Category,
        "initialPrice": service.InitialPrice,
        "intermediatePrice":service.IntermediatePrice,
        "advancedPrice":service.AdvancedPrice,

      }),
    );

    if (response.statusCode != 200) {
      throw Exception('Failed to update course.');
    }
  }

The overall service_data.dart code will be like the following.



import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter_group_project/Service/Model/Service.dart';
import 'package:meta/meta.dart';
import 'package:http/http.dart' as http;

class ServiceDataProvider {
  final _baseUrl = 'http://192.168.42.232:5000/api';
  final http.Client httpClient;

  ServiceDataProvider({@required this.httpClient}) : assert(httpClient != null);

  Future<Service> createService(Service service) async {

    final response = await httpClient.post(
      Uri.http('http://192.168.42.232:5000', '/api/services'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },

      body: jsonEncode(<String, dynamic>{
        "serviceName": service.ServiceName,
        "description": service.Description,
        "category": service.Category,
        "initialPrice": service.InitialPrice,
        "intermediatePrice":service.IntermediatePrice,
        "advancedPrice":service.AdvancedPrice,

      }),
    );

    if (response.statusCode == 200) {
      return Service.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed to create course.');
    }
  }

  Future<List<Service>> getServices() async {
    try{

     final response = await http.get('${_baseUrl}/services');
     if (response.statusCode == 200) {
       final services = jsonDecode(response.body) as List;
       return services.map((service) => Service.fromJson(service)).toList();
     } else {
       throw Exception('Failed to load courses');
     }
   }catch(e){
     print("Exception throuwn $e");
    }


  }

  Future<void> deleteService(int  id) async {
    final http.Response response = await http.delete(
      'http://192.168.43.163:5000/Service/$id',
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
    );

    if (response.statusCode != 200) {
      throw Exception('Failed to delete course.');
    }

  }

  Future<void> updateService(Service service) async {
    final http.Response response = await httpClient.put(
      'http://192.168.43.163:5000/Service/',
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(<String, dynamic>{
        "serviceId":service.id,
        "serviceName": service.ServiceName,
        "description": service.Description,
        "category": service.Category,
        "initialPrice": service.InitialPrice,
        "intermediatePrice":service.IntermediatePrice,
        "advancedPrice":service.AdvancedPrice,

      }),
    );

    if (response.statusCode != 200) {
      throw Exception('Failed to update course.');
    }
  }
}

data_provider.dart
this will export the Service_data add the following line of code inside.



export 'Service_data.dart';

Bloc Architecture: Data Layer -> Repository

The repository layer is a wrapper around one or more data providers with which the Bloc Layer communicates. It can interact with multiple data providers and perform transformations on the data before handing the result to the business logic layer.

Inside the Repository directory let us create the following two dart files.

Then inside the Service_repository.dart file we are going to create a function for all of the data provider CRUD method.
this method will serve as a mediator between the business logic layer and the data access layer.



import 'package:flutter_group_project/Service/Model/Service.dart';
import 'package:meta/meta.dart';
import '../Service.dart';

class ServiceRepository {
  final ServiceDataProvider dataProvider;

  ServiceRepository({@required this.dataProvider})
      : assert(dataProvider != null);

  Future<Service> createService(Service service) async {
    return await dataProvider.createService(service);
  }

  Future<List<Service>> getServices() async {
    print("This is the getService method");
    return await dataProvider.getServices();
  }

  Future<void> updateService(Service service) async {
    await dataProvider.updateService(service);
  }

  Future<void> deleteService(int  id) async {
    await dataProvider.deleteService(id);
  }
}

The repository.dart file does nothing but exporting the Service_repository.dart.



export 'Service_repository.dart';

Bloc Architecture: Business Logic Layer

The business logic layer's responsibility is to respond to input from the presentation layer with new states. This layer can depend on one or more repositories to retrieve data needed to
build up the application state. Think of the business logic layer as the bridge between the user interface (presentation layer) and the data layer.
The business logic layer is notified of events/actions from the presentation layer and then communicates with the repository in order to build a new state for the presentation layer to consume.

From the Bloc directory create the following dart files.

The bloc state management has three different elements.

State
Event
bloc

State
The State will represent the state for the application. this will be the defined state that the app will possess.

open Service_state.dart file and add the following code inside.



import 'package:equatable/equatable.dart';
import 'package:flutter_group_project/Service/Service.dart';


class ServiceState extends Equatable {
  const ServiceState();

  @override
  List<Object> get props => [];
}
class ServiceLoading extends ServiceState {}

class ServicesLoadSuccess extends ServiceState{
  final List<Service> services;

  ServicesLoadSuccess([this.services = const []]);

  @override
  List<Object> get props => [services];
}

class ServiceOperationFailure extends ServiceState {}

As you can see from the code we have three different states. ServiceLoading,ServicesLoadSuccess,ServiceOperationFailer

Event
The event means the operation that will take place in the application. this will be the same as the CRUD operation that we have registered in the data provider.

For this open the Service_event.dart file and add the following code inside.



import 'package:equatable/equatable.dart';
import 'package:flutter_group_project/Service/Model/Service.dart';
import '';

abstract class ServiceEvent extends Equatable {
  const ServiceEvent();
}

class ServiceLoad extends ServiceEvent {
  const ServiceLoad();

  @override
  List<Object> get props => [];
}

class ServiceCreate extends ServiceEvent {
  final Service service;

  const ServiceCreate(this.service);

  @override
  List<Object> get props => [service];

  @override
  String toString() => 'Service Created {service: $service}';
}

class ServiceUpdate extends ServiceEvent {
  final Service service;

  const ServiceUpdate(this.service);

  @override
  List<Object> get props => [service];

  @override
  String toString() => 'Service Updated {service: $service}';
}

class ServiceDelete extends ServiceEvent {
  final Service service;

  const ServiceDelete(this.service);

  @override
  List<Object> get props => [service];

  @override
  toString() => 'Service Deleted {service: $service}';
}

here we have 4 different Events These are listed below with their correspondence data provider method.

ServiceLoad -> getServices()
ServiceCreate -> createService()
ServiceUpdate -> updateService()
ServiceDelete -> deleteService()

bloc

This dart file will map every event invoked by the presentation layer to the state. then it will send the updated state back to the presentation layer.

open the Service_bloc.dart file and add the following code.



import 'package:flutter/cupertino.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import 'package:flutter_group_project/Service/Bloc/bloc.dart';
import 'package:flutter_group_project/Service/Repository/Service_repository.dart';


class ServiceBloc extends Bloc<ServiceEvent, ServiceState> {
  final ServiceRepository serviceRepository;

  ServiceBloc({@required this.serviceRepository})
      : assert(serviceRepository != null),
        super(ServiceLoading());

  @override
  Stream<ServiceState> mapEventToState(ServiceEvent event) async* {
    if (event is ServiceLoad) {
      print("Service load method");
      yield ServiceLoading();

      try {
        final services = await serviceRepository.getServices();
        print("This is the service $services");
        yield ServicesLoadSuccess(services);
      } catch (_) {
        yield ServiceOperationFailure();
      }
    }

    if (event is ServiceCreate) {
      try {
        await serviceRepository.createService(event.service);
        final services = await serviceRepository.getServices();
        yield ServicesLoadSuccess(services);
      } catch (_) {
        yield ServiceOperationFailure();
      }
    }

    if (event is ServiceUpdate) {
      try {
        await serviceRepository.updateService(event.service);
        final services = await serviceRepository.getServices();
        yield ServicesLoadSuccess(services);
      } catch (_) {
        yield ServiceOperationFailure();
      }
    }

    if (event is ServiceDelete) {
      try {
        await serviceRepository.deleteService(event.service.id);
        final services = await serviceRepository.getServices();
        yield ServicesLoadSuccess(services);
      } catch (e) {
        print("Error de,ete=$e");
        yield ServiceOperationFailure();
      }
    }
  }
}

and finally, there is one file that remained called bloc.dart this file will export all three files once. so in other than importing all three files separately importing only this file will make our code simpler and minimize the line of code.



export 'Service_bloc.dart';
export 'Service_state.dart';
export 'Service_event.dart';

If you came from the react js web development background, this type of state management is exactly the same as the React Redux state management

Bloc -> Reducer
State -> State
Event -> Action

Bloc Architecture: Presentation Layer

The presentation layer's responsibility is to figure out how to render itself based on one or more bloc states In addition, it should handle user input and application lifecycle events Most applications flows will start with an AppStart event which triggers the application to fetch some data to present to the user
In this scenario, the presentation layer would add an AppStart event.

We are going to build the UI on this step.
In the Screen directory, create the following dart files.

The main page of the app looks like the following.

First, there will be an import from the above. we are gonna import all the necessary packages we need to integrate the UI with the business logic and for layouts.



import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_group_project/Service/Bloc/bloc.dart';
import 'package:flutter_group_project/Service/Screen/ServiceCreateUpdateScreen.dart';
import 'package:flutter_group_project/Service/Screen/screens.dart';
import 'dart:math';

Create a class called ServiceMainScreen and define the class routeName as Static.



class ServiceMainScreen extends StatelessWidget {
  static const routeName='/category_screen';
}

The first method we are going to use is a buildSectionTitle and this method is used to build a custom text widget for the title.



Widget buildSectionTitle(BuildContext context, String text){
    return  Container(

      margin: EdgeInsets.symmetric(
        vertical: 10,

      ),
      child: Text('${text}',
        style: Theme.of(context).textTheme.headline6,),
    );
  }

and next, we have here a buildContainer method that used to build a container, we will use this method later.




Widget buildContainer(BuildContext context , Widget child){
    return Container(
      height: MediaQuery.of(context).size.height * 0.5 ,
      width:MediaQuery.of(context).size.width * 0.90 ,
      decoration: BoxDecoration(
        color:Colors.white,
        border:Border.all(
            color:Colors.grey
        ),
        borderRadius: BorderRadius.circular(10),


      ),
      child:child,
    );
  }

Build Method
This is the defualt method that will be overriden. this method will start rendering the application so that the app start the building process from this method.

It have a BuildContext parameter.




 @override
  Widget build(BuildContext context) {
    Random random = new Random();
    int randomNumber = random.nextInt(6);

    // return statment here
}

we will use the random number later.

the build methos should return a widget.we are going to return a Scaffold from the build method.



return Scaffold(
// 
)

the scaffold widget have might have different named parameters depending on the app we are building for this application we are
going to use the following named parameters inside the Scaffold widget.

appBar
body
floatingActionbutton
floatingActionButtonLocation
bottomNavigationBar

appBar

This is the top navigation bar.



appBar: AppBar(title: Text('Category Name'), actions: [
          PopupMenuButton(
              icon: Icon(Icons.refresh),
              itemBuilder: (_) => [
                    PopupMenuItem(
                      child: Text('Refresh'),
                      value: () {},
                    ),
                    PopupMenuItem(
                      child: Text('Show All'),
                      value: null,
                    ),
                  ]),
        ]),

body
This is the main portion of the application, it will cover the place other than the bottomNavigationBar and the floatingActionButton

Because the whole page will scroll we have to held using a singleChildScrolView at the top.



body: SingleChildScrollView(
          child: Column(
              children: [
                 // Childrens will come here
               ]
          )

Then inside the children widget we have the following childrent respectively.
* Image Section
* Text Section
* List View

Image Section



 Container(
              height: MediaQuery.of(context).size.width * 0.5,
              width: double.infinity,
              child: Image.asset("Assets/assets/wood.jpg"),
            ),

Text Section



buildSectionTitle(context, 'Services'),

If you remember in the above we have implemented this buildSectionTitle method, so that we are using it here to build a custome text Wdiget.

List View

This section is the place where the Services that came from the back-end will be displayed, so this widget is a replaceble widget depending on the new state that came.
we are going to use our Bloc concept here.

Core Concepts of Bloc: BlocBuilder

BlocBuilder is a Flutter widget which requires a Bloc and a builder function BlocBuilder handles building the widget in response to new states The builder function will potentially be called many times and should be a pure function that returns a widget in response to the state.

Next to the Service title section put the following blocBuilder method signature.



    BlocBuilder<ServiceBloc, ServiceState>(builder: (_, state) {
        // remainging code here
    }

Then inside this method let us add our business logic, this page only loads data from the businessLogicLayer so the possible states will be the following.

ServiceOperationFailure
ServicesLoadSuccess

so let us do a confition for these states.

ServiceOperationFailure
we do not have much to do here only return a Text.



 if (state is ServiceOperationFailure) {
                return Text('Could not do Service  operation');
              }

ServicesLoadSuccess
here our on this condition our list view will be build depending on the States that come from businessLogicLayer.



if (state is ServicesLoadSuccess) {
                final services = state.services;
                return buildContainer(
                    context,
                    ListView.builder(
                        itemCount: services.length,
                        itemBuilder: (ctx, index) => Column(children: [
                              Container(
                                decoration: BoxDecoration(
                                    color: Colors.white38,
                                    borderRadius: BorderRadius.circular(20)),
                                height:
                                    MediaQuery.of(context).size.height * 0.15,
                                margin: EdgeInsets.all(4),
                                padding: EdgeInsets.all(4),
                                child: Card(
                                  elevation: 5,
                                  margin: EdgeInsets.symmetric(
                                      vertical: 8, horizontal: 5),
                                  child: Center(
                                    child: ListTile(
                                      leading: CircleAvatar(
                                        backgroundImage: AssetImage(
                                            'Assets/assets/fixit.png'),
                                      ),
                                      title: Text(
                                        services[index].ServiceName != null
                                            ? services[index].ServiceName
                                            : "place holder",
                                        style: Theme.of(context)
                                            .textTheme
                                            .headline6,
                                      ),
                                      subtitle: Text(
                                        services[index].Description != null
                                            ? services[index].Description
                                            : "Place holder",
                                      ),
                                      trailing: MediaQuery.of(context)
                                                  .size
                                                  .width >
                                              450
                                          ? FlatButton.icon(
                                              textColor:
                                                  Theme.of(context).errorColor,
                                              icon: Icon(
                                                Icons.delete_forever,
                                                color: Theme.of(context)
                                                    .errorColor,
                                              ),
                                            )
                                          : IconButton(
                                              icon: Icon(
                                                Icons.star_border,
                                                color: Theme.of(context)
                                                    .errorColor,
                                              ),
                                            ),
                                      onTap: () => Navigator.of(context)
                                          .pushNamed(ServiceDetail.routeName,
                                              arguments: services[index]),
                                    ),

                                  ),
                                ),
                              )
                            ])));
              }

then on the defualt position let us return a progress indicator.



return CircularProgressIndicator();

The overall BlocBuilder code will looks like the following.



            BlocBuilder<ServiceBloc, ServiceState>(builder: (_, state) {

              if (state is ServiceOperationFailure) {
                return Text('Could not do Service  operation');
              }
              if (state is ServicesLoadSuccess) {
                final services = state.services;
                return buildContainer(
                    context,
                    ListView.builder(
                        itemCount: services.length,
                        itemBuilder: (ctx, index) => Column(children: [
                              Container(
                                decoration: BoxDecoration(
                                    color: Colors.white38,
                                    borderRadius: BorderRadius.circular(20)),
                                height:
                                    MediaQuery.of(context).size.height * 0.15,
                                margin: EdgeInsets.all(4),
                                padding: EdgeInsets.all(4),
                                child: Card(
                                  elevation: 5,
                                  margin: EdgeInsets.symmetric(
                                      vertical: 8, horizontal: 5),
                                  child: Center(
                                    child: ListTile(
                                      leading: CircleAvatar(
                                        backgroundImage: AssetImage(
                                            'Assets/assets/fixit.png'),
                                      ),
                                      title: Text(
                                        services[index].ServiceName != null
                                            ? services[index].ServiceName
                                            : "place holder",
                                        style: Theme.of(context)
                                            .textTheme
                                            .headline6,
                                      ),
                                      subtitle: Text(
                                        services[index].Description != null
                                            ? services[index].Description
                                            : "Place holder",
                                      ),
                                      trailing: MediaQuery.of(context)
                                                  .size
                                                  .width >
                                              450
                                          ? FlatButton.icon(
                                              textColor:
                                                  Theme.of(context).errorColor,
                                              icon: Icon(
                                                Icons.delete_forever,
                                                color: Theme.of(context)
                                                    .errorColor,
                                              ),
                                            )
                                          : IconButton(
                                              icon: Icon(
                                                Icons.star_border,
                                                color: Theme.of(context)
                                                    .errorColor,
                                              ),
                                            ),
                                      onTap: () => Navigator.of(context)
                                          .pushNamed(ServiceDetail.routeName,
                                              arguments: services[index]),
                                    ),

                                  ),
                                ),
                              )
                            ])));
              }
              return CircularProgressIndicator();
            }),

So by this we have finalized the body.

floatingActionButton

This action button will be use to add additional services.



floatingActionButton: FloatingActionButton(
          onPressed: () => Navigator.of(context).pushNamed(
            AddUpdateService.routeName,
            arguments: ServiceArgument(edit: false),
          ),
          child: Icon(Icons.add),
        ),

To make the floatingActionButton have a dom shaped and stayed at the center of the bottom navigation bar let us give it the follwoing property.



floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

bottomNavigationBar

This part have no any functionality for this application but incase of a serious project we can give it some actoin to perform. here it is just a default for a decorating the layout.



bottomNavigationBar: BottomAppBar(
          color: Theme.of(context).primaryColor,
          shape: CircularNotchedRectangle(),
          child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.search),
                  color: Colors.white,
                  onPressed: () {
                    print("search icon button have been clicked");
                  },
                ),
                IconButton(
                  icon: Icon(Icons.note),
                  color: Colors.white,
                  onPressed: () {
                    print("the note icon button have been clicked");
                  },
                )
              ]),
        )

The whole ServiceMainScreen.dart file will be as the follwoing.



import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_group_project/Service/Bloc/bloc.dart';
import 'package:flutter_group_project/Service/Screen/ServiceCreateUpdateScreen.dart';
import 'package:flutter_group_project/Service/Screen/screens.dart';
import 'dart:math';

class ServiceMainScreen extends StatelessWidget {
  static const routeName = '/category_screen';

  Widget buildSectionTitle(BuildContext context, String text) {
    return Container(
      margin: EdgeInsets.symmetric(
        vertical: 10,
      ),
      child: Text(
        '${text}',
        style: Theme.of(context).textTheme.headline6,
      ),
    );
  }

  Widget buildContainer(BuildContext context, Widget child) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.5,
      width: MediaQuery.of(context).size.width * 0.90,
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(10),
      ),
      child: child,
    );
  }

  @override
  Widget build(BuildContext context) {
    Random random = new Random();
    int randomNumber = random.nextInt(6);

    print(randomNumber);

    return Scaffold(
        appBar: AppBar(title: Text('Category Name'), actions: [
          PopupMenuButton(
              icon: Icon(Icons.refresh),
              itemBuilder: (_) => [
                    PopupMenuItem(
                      child: Text('Refresh'),
                      value: () {},
                    ),
                    PopupMenuItem(
                      child: Text('Show All'),
                      value: null,
                    ),
                  ]),
        ]),
        body: SingleChildScrollView(
          child: Column(children: [
            Container(
              height: MediaQuery.of(context).size.width * 0.5,
              width: double.infinity,
              child: Image.asset("Assets/assets/wood.jpg"),
            ),
//           ingredient
            buildSectionTitle(context, 'Services'),

            BlocBuilder<ServiceBloc, ServiceState>(builder: (_, state) {

              if (state is ServiceOperationFailure) {
                return Text('Could not do Service  operation');
              }
              if (state is ServicesLoadSuccess) {
                final services = state.services;
                return buildContainer(
                    context,
                    ListView.builder(
                        itemCount: services.length,
                        itemBuilder: (ctx, index) => Column(children: [
                              Container(
                                decoration: BoxDecoration(
                                    color: Colors.white38,
                                    borderRadius: BorderRadius.circular(20)),
                                height:
                                    MediaQuery.of(context).size.height * 0.15,
                                margin: EdgeInsets.all(4),
                                padding: EdgeInsets.all(4),
                                child: Card(
                                  elevation: 5,
                                  margin: EdgeInsets.symmetric(
                                      vertical: 8, horizontal: 5),
                                  child: Center(
                                    child: ListTile(
                                      leading: CircleAvatar(
                                        backgroundImage: AssetImage(
                                            'Assets/assets/fixit.png'),
                                      ),
                                      title: Text(
                                        services[index].ServiceName != null
                                            ? services[index].ServiceName
                                            : "place holder",
                                        style: Theme.of(context)
                                            .textTheme
                                            .headline6,
                                      ),
                                      subtitle: Text(
                                        services[index].Description != null
                                            ? services[index].Description
                                            : "Place holder",
                                      ),
                                      trailing: MediaQuery.of(context)
                                                  .size
                                                  .width >
                                              450
                                          ? FlatButton.icon(
                                              textColor:
                                                  Theme.of(context).errorColor,
                                              icon: Icon(
                                                Icons.delete_forever,
                                                color: Theme.of(context)
                                                    .errorColor,
                                              ),
                                            )
                                          : IconButton(
                                              icon: Icon(
                                                Icons.star_border,
                                                color: Theme.of(context)
                                                    .errorColor,
                                              ),
                                            ),
                                      onTap: () => Navigator.of(context)
                                          .pushNamed(ServiceDetail.routeName,
                                              arguments: services[index]),
                                    ),

                                  ),
                                ),
                              )
                            ])));
              }
              return CircularProgressIndicator();
            }),
          ]),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => Navigator.of(context).pushNamed(
            AddUpdateService.routeName,
            arguments: ServiceArgument(edit: false),
          ),
          child: Icon(Icons.add),
        ),

        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: BottomAppBar(
          color: Theme.of(context).primaryColor,
          shape: CircularNotchedRectangle(),
          child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.search),
                  color: Colors.white,
                  onPressed: () {
                    print("search icon button have been clicked");
                  },
                ),
                IconButton(
                  icon: Icon(Icons.note),
                  color: Colors.white,
                  onPressed: () {
                    print("the note icon button have been clicked");
                  },
                )
              ]),
        ));
  }
}

Introduction to PingCap/TiDB/ Part-3: Building a .Net core web API and connect to TiDB Mysql Server

Yared Solomon — Tue, 20 Apr 2021 20:28:41 +0000

In the previous part of this article, we tried to connect the TiDB MySQL with Grafana and tried to visualize and monitor the data that comes from MySQL. In this article, we are going to implement a .Net core web API on top of the TiDB MySQL server.

Pre requests

1. See part 1 of this article in order to set up TiDB successfully in your local machine.

2. Make sure you installed .Net if you haven't installed go to this article and install it.

Step 1: Creating the database

To create the database we should start the TiDB server first using the following command.

tiup playground

Then, we need to start the MySQL server on the IP address that the TiDB is running and any port number.

mysql --host 127.0.0.1 --port 4000 -u root

next to this let us create the database

create database FixItDb;

we are going to create a table on this database.

use FixItDb;

next to this let us create the table.

CREATE TABLE  Service(
        ServiceId  int NOT NULL  AUTO_INCREMENT,
        ServiceName  varchar(255) NOT NULL,
    Description  varchar(255) NOT NULL,
    Category  varchar(255) NOT NULL,
    InitialPrice  int,
    IntermediatePrice int ,
    AdvancedPrice  int ,
    AddedTime DATETIME,
    PRIMARY KEY (ServiceId)
);

let us add some data to it.

INSERT INTO Service(ServiceName,Description,Category,InitialPrice,IntermediatePrice,AdvancedPrice,AddedTime) VALUES("Fixing Electronics","The wire have to be fixed","Electrical",34,223,10,"2020-06-03 09:37:13");
INSERT INTO Service(ServiceName,Description,Category,InitialPrice,IntermediatePrice,AdvancedPrice,AddedTime) VALUES("Fixing Electronics","The wire have to be fixed","Electrical",34,223,10,"2020-06-03 18:10:13");
INSERT INTO Service(ServiceName,Description,Category,InitialPrice,IntermediatePrice,AdvancedPrice,AddedTime) VALUES("Fixing Electronics","The wire have to be fixed","Electrical",34,223,10,"2020-06-03 01:11:13");
INSERT INTO Service(ServiceName,Description,Category,InitialPrice,IntermediatePrice,AdvancedPrice,AddedTime) VALUES("Fixing Electronics","The wire have to be fixed","Electrical",34,223,10,"2020-06-03 06:13:13");
INSERT INTO Service(ServiceName,Description,Category,InitialPrice,IntermediatePrice,AdvancedPrice,AddedTime) VALUES("Fixing Electronics","The wire have to be fixed","Electrical",34,223,10,"2020-06-03 12:09:13");
INSERT INTO Service(ServiceName,Description,Category,InitialPrice,IntermediatePrice,AdvancedPrice,AddedTime) VALUES("Fixing Electronics","The wire have to be fixed","Electrical",34,223,10,"2021-06-03 12:09:13");
INSERT INTO Service(ServiceName,Description,Category,InitialPrice,IntermediatePrice,AdvancedPrice,AddedTime) VALUES("Fixing Electronics","The wire have to be fixed","Electrical",34,223,10,"2021-06-03 01:01:13");
INSERT INTO Service(ServiceName,Description,Category,InitialPrice,IntermediatePrice,AdvancedPrice,AddedTime) VALUES("Fixing Electronics","The wire have to be fixed","Electrical",34,223,10,"2021-06-03 06:09:13");

now if we select everything from the Service table we should see all the data.

select * from Service;

Step 2: configuring the .Net web API project

After we set up our MySQL server well the next step will be configuring the .Net core web API for connecting with TiDB MySQL.

Create a new .Net web API project by using this command.

dotnet new  webapi -n <name>

then we will get the template for a web API. remove the default controller from the controller directory.

The next thing we need to do is to 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

then install it.

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

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 MySql.Data.EntityFrameworkCore which used to connect to MySQL database.

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.

  <PackageReference Include="Microsoft.EntityFrameworkCore" Version="3.1.12" />
  <PackageReference Include="Pomelo.EntityFrameworkCore.MySql" Version="3.2.4" />
  <PackageReference Include="MySql.Data.EntityFrameworkCore" Version="8.0.19" />

the whole code of our .csproj file will look like the following

<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="Pomelo.EntityFrameworkCore.MySql" Version="3.2.4" />
    <PackageReference Include="MySql.Data.EntityFrameworkCore" Version="8.0.19" />
 </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.

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.

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.

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.

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.


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 database. the code of all the CRUD operations is like this just copy and paste it.


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

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 any requests from any client and get information from the database through the mediator interface then after that, it will return the data back to the client.

Step 10: update the connection string on appSettings.json

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 on the TiDB server. you can get this information from the command you used to start MySQL.

mysql --host 127.0.0.1 --port 4000 -u root from this we can get all the necessary information about the database.

The server is running on the IP address of 127.0.0.1 which means it is localhost and on the port number of 4000 with a user name of root and an empty password. using this information we can write the connection string as

"Server=localhost;port=4000;database=FixItDb;user=root;password=;"

and 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


 "ConnectionStrings": {
   "fixItConnection": "Server=localhost;port=4000;database=FixItDb;user=root;password=;"
 }

the whole appSettings.json code will be.

 {
  "AppSettings": {

  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",

  "ConnectionStrings": {
    "fixItConnection": "Server=localhost;port=4000;database=FixItDb;user=root;password=;"
  }
}

Step 11: Updating the startUp.cs

update the startUp.cs file of the project in order to connect to MySQL.

from the ConfigureService method add the following line of code.

services.AddDbContext<DataContext>(opt => opt.UseMySql(Configuration.GetConnectionString("fixItConnection")));

here the UseMySql method will be imported from the package we have installed before.MySql.Data.EntityFrameworkCore and used to interconnect the database information stored on the fixItConnection to the DataContext.

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

Then we need to register Controllers and Repository we have created so far.

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

the whole startUp.cs file looks like the following

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 MySql.Data.EntityFrameworkCore;
// 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.UseMySql(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();
            });
        }
    }
}

Step 12: 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.

dotnet run

you will get a page that looks like this.

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.

we got the data that has been store in the TiDB Mysql server.

This will be the end of this article.

Thank you!

Introduction to PingCap/TiDB/ Part-2 Monitoring TiDB MySQL data using Grafana

Yared Solomon — Sat, 10 Apr 2021 15:50:41 +0000

In the last article, we have seen how to install TiDB in window os using Wsl if you haven't install TiDB yet you better go and have a look at the previous article.

In this section, we are going to see that how can we set up Grafana for TiDB and How it is used to monitor and visualize data from TiDB Mysql Data Source.

Step 1:Start the TiDB playground

The Prometheus and Grafana will be installed by default when we run the TiDB playground so the first step will be to start the playground using the following command.

tiup playground

Then we will get this information from the terminal.

Step 2:Start Grafana and change the default password

from the above information copy, the Grafana link and past it to any browser.

we will get this login page of grafana.

The default username and password will be admin for both. so log in with this information.

it will give you an optional page that prompt you to change the default password for username admin.

change the password and click on the save button.

then after that, you will get the home page of the Grafana.

Step 3:Add Data Source

The next step is to indicate the source of data that will be displayed on Grafana.

To do this from the home page of Grafana on the left side there is a list of menus. go to the Configuration menu and click on the Data Source option.

Then you will get the Data source configuration page which exactly looks like this.

Click on the Add Data Source button at the top. and you will get a list of data sources categories.

from the categories select the MySql category because our database that runs on top of TiDB playground is MySQL. after this you will get a MySql Connection Page.

we need to give all the required information in order to make a connection with MySql.

The First is Host we should provide the Host IP address of our MySql.so let us go back to the MySQL running on our computer and select the Host IP address.

As you can see from the beginning there is an IP address with a specific port of 127.0.0.1:4000. my database name is FixItDb. the default User for my case is root and the password will be empty. so now I am going to provide all this information to the MySql Connection Page.

After that click on the Save and Test button at the bottom. and if all your information is valid and the connection made successfully you will get a green confirmation at the bottom.

At the top of this page, we can also update the name for the data source. later when we create a dashboard we will access this data source based on the name we specified now.

we have also an option to set it as a Default Data Source you can make it a default data source if you want it to appear by default whenever you create a new dashboard.

Step 4:Create A DashBoard

After we successfully added our data source the next step will be creating a dashboard to show the data.

to do this from the left menu options click on the + create menu and when the list of menus comes select the dashboard option.

then select the Add Query option.

after that, you will get a dashboard in which the data came from the default data source.

so change the data source to the data source that we have created before. which is Service-DS.

after this, we will get our dashboard with No Data Points.

This is because we haven't configured our dashboard yet.

Step 5:Configuring the Dashboard to get data

First, let us select the table we want to visualize in my case, it is the Service table.

This is the whole table information.

Because Grafana will do monitoring based on the date-time we should have the Date Time Column in our table so I have created one called Added Time. which indicates the time in which the particular service is added. so in the Time Column option of the dashboard, I am going to select Added Time.

At the bottom of the FROM option of the dashboard, you can see that there is a SELECT nominated row. from this, we can select the Column we want to display on the Grafana. but this column should be an integer and because of this Grafana by default will add only the integer data type column on the menu.

hit the + button on that row and add the Aggregate option and set it to max and give the Alias name.

at the bottom, we have WHERE nominated row. we can remove this if we don't have a condition to select the column from the database. so select on the condition and you will get the remove button at the bottom.

immediately when removing the where condition the graph will be changed.

from this, we can understand that grafana was able to fetch the data from the Service-DS MySQL data source. but the graph is a straight line. this is because of the selected time.at the top of the dashboard next to the setting icon. there is some option which says like Last 6 hours click on this.

by default, the Grafana is displaying data that have been added 6 hours before now. but from our database, there is only one data that have been added before 6 hours.

so let me update the beginning time to something like this 2020-05-03 09:37:13 and ending time to 2021-07-03 09:37:13 to include all the data's time from my database table.

hit on the Apply button then our graph will be changed.

now if we hover on the graph we can see that the data will be changed from one place to another place. because the visualization includes all rows from the database table based on the Added Time

Step 6:Query Inspection

Alternativ to the graph we have also an option to look at the response object that comes from the data source.

from the dashboard select the button next to the Add Query button called Query Selector.

Then have a look at the Response to see the coming data.

Step 7:Adding more select option

If you want to see some other column on this dashboard you can simply do it by adding another column from the SELECT row.

From the SELECT option at the end, there is a + button. when you click on it you will get an option called Column from the listed menu options to click on that.

then provide information about the column you want to display.

change the Alias to the new column name, in order to differentiate the two columns.

when you hit enter the graph will be changed.

The new data on the graph looked a straight line because I have constant data for the Advanced Price Column which is 10.

That is all about this article. In the next article, we will see the integration of TiDB with .Net core API.

Thank You!.

Introduction to PingCap/TiDB/ Part-1 Installation of TiDB on Windows machine.

Yared Solomon — Fri, 02 Apr 2021 19:33:39 +0000

What is TiDb?
TiDB (/’taɪdiːbi:/, "Ti" stands for Titanium) is an open-source NewSQL database that supports Hybrid Transactional and Analytical Processing (HTAP) workloads. It is MySQL compatible and features horizontal scalability, strong consistency, and high availability. The goal of TiDB is to provide users with a one-stop database solution that covers OLTP (Online Transactional Processing), OLAP (Online Analytical Processing), and HTAP services. TiDB is suitable for various use cases that require high availability and strong consistency with large-scale data.

Getting started with TiDB

How to install TiDB on Windows machine?

TiDB runs on top of the Linux operating system so it is not possible to directly install it to a windows machine. We have different ways to install TiDB on Windows. like using local Linux virtual machine, cloud Linux virtual machine(Azure, AWS), and using Window's subsystem for Linux.In this article, we are going to focus on the installation of TiDB using Windows subsystem for Linux.

Step 0:Check if WSL already existed in our computer

before going to step 1 make sure that your computer has or has no windows subsystem for Linux because some programs like docker will install it by themselves.

so go to Control Panel

then click on the Programs option at the bottom.

under the Programs and Features category click on the Turn Windows feature on and off option.

from this page find the windows subsystem for the Linux windows feature. in my case, because I have already installed you can see that there is an option for that around the bottom. if you get it already installed make sure that it is turned on. unless otherwise follow this Tutorial to install it and make sure to turn it on after installation finished.
Step 1:Install Ubuntu on top of Wsl
Wsl helps us to install ubuntu on our windows machine without a virtual machine. it will be like other software running on the computer. now let us install Ubuntu 20.04.LTS. when you click the link you will get this page.

Click on the Get option. we are going to download it from Microsoft store. so when you click that the browser will prompt you with a dialog box.

Click on Open Microsoft store. you will get the Microsoft store page. download it with the Get button provided.

when the download finished, click the launch button at the top.

because you are running it for the first time you need to provide a user name and password information. after that, you will get an ubuntu terminal that consists of the username you gave before.

so we have successfully installed ubuntu on our windows machine.
Step 2:Install TiDB on Ubuntu
All the next TiDB configuration will be done on the ubuntu terminal we installed.

As a distributed system, a basic TiDB test cluster usually consists of 2 TiDB instances, 3 TiKV instances, 3 PD instances, and optional TiFlash instances. With TiUP Playground, you can quickly build the above test cluster by taking the following steps:

Download and install TiUP:

curl --proto '=https' --tlsv1.2 -sSf https://tiup-mirrors.pingcap.com/install.sh | sh

Declare the global environment variable:
After the installation, TiUP displays the absolute path of the corresponding profile file. You need to modify the following source command according to the path.

copy only the file name from the Shell profile in my case it is .bashrc after that we will declare this variable globally by using the following command.

source .bashrc

Start the cluster in the current session:
If you want to start a TiDB cluster of the latest version with 1 TiDB instance, 1 TiKV instance, 1 PD instance, and 1 TiFlash instance, run the following command:

tiup playground

If you want to specify the TiDB version and the number of the instances of each component, run a command like this:

 tiup playground v4.0.0 --db 2 --pd 3 --kv 3 --monitor

The command downloads a v4.0.0 cluster to the local machine and starts it. --monitor means that the monitoring component is also deployed.

after we executed the code we will get a page that looks like this.

It has information about Prometheus, TiDB Dashboard and Grafana we will see later what these pages look like.

Start a new session to access TiDB:

Install the MySQL client. If it is already installed, skip this step.

 yum -y install MySQL

Use the MySQL client to connect to TiDB.

   mysql --host 127.0.0.1 --port 4000 -u root

after this command, we can able to get the MySQL command line on our terminal.

now we can continue working on MySQL like creating database show database and other MySQL queries.

let us try the show databases option.

These databases existed by default when the MySQL client installed.

now I am going to create a database called FixItDb using this SQL command.

   create database FixItDb;

then I will change the database to FixItDb using this MySQL command.

   use FixItDb;

let us create one table called User.

  CREATE TABLE User(
        UserId int NOT NULL  AUTO_INCREMENT,
        FullName varchar(255) NOT NULL,
    Email varchar(255) NOT NULL,
    Password varchar(255) NOT NULL,
    Phone  varchar(255),
    Address varchar(255),
    Picture varchar(255),
    Sex  varchar(255),
    Dob  varchar(255),
    RoleId int  NOT NULL,
    PRIMARY KEY (UserId)
);

and insert some data into it.

INSERT INTO user(FullName,Email,Password,RoleId) VALUES("Yared Solomon","yaredyaya16@gmail.com","yared",1);

after that let us check our database;

  select * from user;

so MySQL is working fine

Demonstrating TiDB Dashboard

we have got these three pieces of information when TiDB playground run.

from these let us have a look at the TiDB dashboard.
The host's IP address will be the IP address of the local machine. because we are not running on the virtual machine there will not be any different IP address from the host machine.

The dashboard looks like this initially.

as you can see there is a sign-in option. The default username is the root, with an empty password. when we sign in using this information we will get the overview page.

This page is the overview of different information that existed on the dashboard.

We have the Cluster info option at the bottom of the overview this gives information about the host machine and the running instances.

next to this, we get the SQL statement which contains some SQL statements that have been performed on the TiDB server.

The SQL statements we did before on the MySQL will appear here let us filter it by database and have a look at it.

next to this, we have the Slow Queries that contains queries that need some time to load.

after this, there is an option called Key visualizer that has a visualization option for the execution performed on the TiDB server.

this is what the Cluster Diagnostic page looks like.

TiDB Monitoring Framework Overview

The TiDB monitoring framework adopts two open-source projects: Prometheus and Grafana. TiDB uses Prometheus to store the monitoring and performance metrics and Grafana to visualize these metrics.

Demonstrating Prometheus

From the information, we got when TiDB playground runs. there is a link for Prometheus. if we click it we will get the Prometheus home page.

Demonstrating Grafana

Similarly, there is also a link for grafana. which will display the grafana login page.

The default user name and password are admin for both.

after we logged in using the default username and password we get a page that looks like this.

it allows us to change the default password for the user admin.
so enter a new password and click on the save button. then we will get the home page.

That is all about this part we will see Grafana monitoring in the next part of this article.

Thank you!

Building BitPrice web application using Next js and React js Then deploy it to Azure Static Website

Yared Solomon — Fri, 19 Feb 2021 07:13:49 +0000

In this post, I will show you the next js implementation with react js. I will do a sample web app called BitzPrice which is an app that shows the bitcoin price by using an API from bitcoin. and then I will show you how to deploy it to the azure static web app.

so let's get started with the next js.

Part 1: Setting environments for development

Step 1: Installing Dependencies.

npm install next react react-dom --save

After the package have been successfully installed we will get a file called package.json
in that file, delete everything inside script tag and add the following
Step 2: Adding scripts.

"dev":"next"
"build":"next build"
"start":"next start"

so that our package.json will look like the following


{
  "name": "Next",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "isomorphic-unfetch": "^3.1.0",
    "next": "^10.0.5",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

Step 3: Project structure.
Create one directory for a page called pages this directory is useful for routing. next js by default will iterate through this directory and create routing for all pages inside this pages directory so we don't have to create the pages manually as we do in the react js application. that is one use of next js.
after that, we will create a directory called components for putting all the components inside this directory.

the project structure should look like this.

Part 2: Start Implementation

Step 1: creating pages.
inside the pages directory create two pages called index.js and about.js

so we have two different pages. but both have the same navigation bar so that we have to implement the navigation bar once and use it for both of the pages.
so in the component directory create the navbar.js component so that we will just import this component on both of our two pages.

inside this navbar.js add the following code.

import Link from 'next/link';
const Navbar = () => (


    <nav className="navbar navbar-expand navbar-dark bg-dark mb-4">
        <div className="container">
            <a className="navbar-brand" href="#">BitzPrice</a>
            <div className="collapse navbar-collapse">
                <ul className="navbar-nav ml-auto">
                    <li className="nav-item">
                        <Link href="/"><a className="nav-link">Home</a></Link>
                    </li>
                    <li className="nav-item">
                        <Link href="/about"><a className="nav-link">About</a></Link>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
);

export default Navbar;

next, we will create a component called layout.js this component is like the high order function in react js that used to surround the pages so that the navbar and other common services will be provided. so put the following code inside this layout.js

import Head from 'next/head';
import Navbar from './Navbar';

const Layout = (props) => (
    <div >
        <Head>
            <title>BitzPrice</title>
            <link rel='stylesheet' href="https://bootswatch.com/4/cerulean/bootstrap.min.css" />
        </Head>

        <Navbar />

        {props.children}
    </div>
);


export default Layout;import Head from 'next/head';
import Navbar from './Navbar';

const Layout = (props) => (
    <div >
        <Head>
            <title>BitzPrice</title>
            <link rel='stylesheet' href="https://bootswatch.com/4/cerulean/bootstrap.min.css" />
        </Head>

        <Navbar />

        {props.children}
    </div>
);


export default Layout;

{props.children} this code will pass the children from the child component to the parent or layout component so that it will be displayed as it is. in this application, we will use this code to display the price of bitcoin in different currencies.

next, create the price.js component inside the component directory. this component will show the price on the index directory.
and add the following code inside.

import React from 'react'

class Prices extends React.Component {
    state = {
        currency: 'EUR'
    }




    render() {

        let list = '';
        if (this.state.currency === 'USD') {

            list = <li className="list-group-item">
                Bitcoin rate for {this.props.bpi.USD.description} : <span className="badge badge-primary">
                    {this.props.bpi.USD.code}
                </span> <strong>{this.props.bpi.USD.rate}</strong>
            </li>


        } else if (this.state.currency === 'GBP') {

            list = <li className="list-group-item">
                Bitcoin rate for {this.props.bpi.GBP.description} : <span className="badge badge-primary">
                    {this.props.bpi.GBP.code}
                </span> <strong>{this.props.bpi.GBP.rate}</strong>
            </li>


        } else if (this.state.currency === 'EUR') {

            list = <li className="list-group-item">
                Bitcoin rate for {this.props.bpi.EUR.description} : <span className="badge badge-primary">
                    {this.props.bpi.EUR.code}
                </span> <strong>{this.props.bpi.EUR.rate}</strong>
            </li>

        }
        return (<dev>



            <ul className="list-group">
                {list}
            </ul>
            <br />
            <select onChange={e => this.setState({
                currency: e.target.value
            })} className="form-control">
                <option value="USD"> USD</option>
                <option value="GBP"> GBP</option>
                <option value="EUR"> EUR</option>

            </select>
        </dev>




        )

    }
}

export default Prices;

next, add the following code to the index.js file we have previously created in the pages directory.

import Layout from '../Components/Layout'
import Fetch from 'isomorphic-unfetch';
import Prices from '../Components/Prices'

const index = (props) => (
    <div>

        <Layout>
            <h1>Welcome to the index page.</h1>
        </Layout>

        <Prices bpi={props.bpi.bpi} />
        {/* {props.bpi.bpi.USD.description} */}
    </div>
);


index.getInitialProps = async function () {
    const res = await Fetch("https://api.coindesk.com/v1/bpi/currentprice.json");
    const data = await res.json();
    return {
        bpi: data
    }
}

export default index;

in the above code, the price from the API will be fetched and passed to the price.js component so that it will render in a structured manner. the price component is expecting this information using props. next, we will add the about.js page just to show how the routing works. On this page, we will add some texts to show that the page is displaying on the about page. so create about.js inside the pages directory and add the following code inside that file.

import Layout from '../Components/Layout';
const index = () => (
    <div>
        <Layout>
            <h1>
                Welcome to the About page!
            </h1>
        </Layout>
    </div>
);


export default index;

so far we have done with the implementation part let us see what we have done by running the app.

use the following command to run this application locally.

npm run dev

then we got the following result

if we go to the specified URL given by the next js for the application we will get the following page.

YEAH!! so this means everything is working fine locally the next thing we will do is to deploy this application to the azure static web app. you can find the Github code here

Part 3: Deploying the app to azure

Step 1: configuring GitHub
we have to first configure GitHub on our local machine and push the code to the GitHub source control. I will not go in-depth with that like how to install the GitHub for the local machines and things similar to this staff are considered as already known. so we will proceed to add remote on our code, committing the application, and push it to Github.

okay, so the first thing to do is create a repository for our web application inside the GitHub repositories.
after that, we have to add this repository to our local machine.
so open cmd if you are on Windows or terminal if you are on some other Linux operating system. navigate to the project directory from the cmd or terminal. if you are using vs code you don't have to do this just click on the terminal tab then you will get a terminal with the current working directory.

next to this let us initialize the git repository locally.

git init

this will create an empty git repository

then let us add a remote repository where our code will be pushed.

git remote add [remoteName] [link to the remote git repository]

in my case it will be like this

git remote add cloudbloq https://github.com/CloudBloq/BitzPrice

before we commit the changes to the local repository we have to update the package.json file to use it for the azure configuration.
add the following to the script tag inside package.json

"build":"next build && next export"

you will see the purpose of adding this later.

so that our full package.json look will be like this


{
  "name": "Next",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build && next export",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "isomorphic-unfetch": "^3.1.0",
    "next": "^10.0.5",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

next to this commit the changes to the local repository
you can do this by the following command

git commit -m "commit message"

then push it to GitHub

git push cloudbloq

Step 2: Integrate Azure to GitHub and deploy the code

Okay only some staffs remain keep walking with me
go to the Azure portal home page Azure portal
you should have an azure account for deploying the app. if you don't have any you can go and create a student free account
you should use student email like someone@student.oauife.edu.ng
once you created and login to your account you will see a page like this.

Let us go to the deployment now

First, we should have a resource group so let us create a resource group. go to the Resource groups option from the top listed tabs.
you will get this page.

then click on the Add* option at the top

after filling in all the necessary information click on the Review+create option at the bottom that is decorated with blue color. so that you will successfully create a resource group. the purpose of this resource group is to group some similar things. we will use it later to create a static web app.

Alright!

let us go to the main goal. which is creating the static web app.

so go back to the Azure portal

on the top left you can see there is an option for Static Web app(preview) click that option.
then you will get into this page.

Click on the Add button at the top left corner.

you will see a page like this.

choose the resource you have created before on the option of Resource Group

then it will ask you to SignIn using Github click that and a page to authorize the azure with GitHub will come.

Click on the green Authorize button at the bottom right. then it will ask you to put in the password and after that, it will redirect you back to the azure site with some other additional options.

fill all the necessary information on the options listed below
in my case it will be like this

and choose react on the build preset options

then when you are sure of filling in all the necessary information click the **Review + Create" option on the bottom.
Then you will get this page.

Click on the create button at the bottom and wait till finish the build.

After it successfully builds it will create the static web app. click on the dialog coming with text like Go to Resources at the top right corner. when you click that you will get a page like this.

YES!!! our static web is ready now. let us check it by clicking on the link.

but I am not getting what I want. what may be the problem?

Click on the deployment history and click on GitHub action runs
you will see this page

it means that it is still building.
remember what I have said to you before. you can see now the use of the below script tag. our app is building on GitHub because of this script.

"build":"next build && next export"

after some time i got my website

check out the site BitzPrice

Building a Photo Displayer Application with Postgress, GraphQL, Hasura Subscription, and React –Class Component.

Yared Solomon — Sat, 05 Dec 2020 22:26:55 +0000

In this post, I will show you how to make Hasura graphql subscription in the photo displayer application used to display images of a photographer added to show his/her work to the people. The subscription feature makes it to be realtime that we don’t have to refresh the site to see the new updating data there. We can directly see on the site when there is any change from the database.

First Thing is First!

Part 1: Creating Hasura Account and new project

Step 1: Creating Hasura Account

First, let us go to Hasura Cloud and create our new account.!

Click on the Create an Account button at the top.

After filling out all the necessary information click on the Create my account button at the bottom.

If it is completed successfully you will get a message like this.

Then go to your email and verify your account there.

You will get the following page after verifying your account.

Step 2: Creating database and project

In this section, we have two options for adding a database to our project. The first is to copy the URL link of our previous database from Heroku if we already had a database created.

But because I don’t have any I have to create new.

So click on the Try a free database with Heroku button at the bottom so that it will create the Postgres database in the Heroku and it will bring back the database URL to the Hasura project.

Note that for creating the database you should have a Heroku account first!

Finally, click on the Create Project button at the bottom so that our project will be created.

This is our project dashboard click on the Launch Console button at the top and it will let us to the Hasura console home page.

Step 3: Creating a table in Hasura console.

from the above table go to the data section.

Click on the Create Table button in the schema.

Fill out all the table information with the same data as the above table image. then click on Create Table

Part 2 : Connection to React js code

we are now one step forward. we have finished setting up our database and project on the Hasura console. the next step will be connecting our Hasura project to our react js code.

we have a photo displayer application done using react js(Get The Code). We will modify it by adding a subscription feature on the image add option. So that the application will listen to any change in the database and display it.

Step 1: Installing Dependencies.

npm install @apollo/client graphql
npm install react-apollo
npm install apollo-link-ws
npm i react-router-dom

Step 2: Importing Dependencies in src/index.js file.

import { ApolloProvider } from 'react-apollo';
import {

  ApolloClient,
  HttpLink,
  InMemoryCache,
  split,
} from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";
import { WebSocketLink } from "@apollo/link-ws";

The above react dependencies are used for connecting our application to the Hasura project.

we need to import the react-router too because we will use a router in our application.

import { Switch, Route, Link, BrowserRouter } from 'react-router-dom'

Step 3: Importing Components
The next is importing the signUp, login, and home component to the src/index.js file to add them to the routing.

There will be nothing we will do with the signUp and login component here in this post. I imported them just to add to the router so no fear towards that. you don't have to know them. our main focus will be on the home component. The subscription will be implemented on this component.

import Home from './App'
import Login from './Components/SignIn';
import SignUp from './Components/SignUp';

so we have done with the imports. the overall import will look like this.


import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Switch, Route, Link, BrowserRouter } from 'react-router-dom'

import Home from './App'
import Login from './Components/SignIn';
import SignUp from './Components/SignUp';

import { ApolloProvider } from 'react-apollo';
import {

  ApolloClient,
  HttpLink,
  InMemoryCache,
  split,
} from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";

Step 4: Copy Graphql EndPoint

Now let us go back to our Hasura console and copy our Graphql endpoint.

then in our index.js file, we will declare this endpoint globally to use it by different connection.

const GRAPHQL_ENDPOINT = 'gentle-ghost-74.hasura.app/v1/graphql';

Now let us take a break and know some important things!

We are going to use two types of connections for this photo displaying application. HTTP and Web socket connection

What is the difference between the two? and where we will use HTTP and Websocket?

HTTP is unidirectional where the client sends the request and the server sends the response. Let’s take an example when a user sends a request to the server this request goes in the form of HTTP or HTTPS, after receiving a request server send the response to the client, each request is associated with a corresponding response, after sending the response the connection gets closed, each HTTP or HTTPS request establish the new connection to the server every time and after getting the response the connection gets terminated by itself.

WebSocket is bidirectional, a full-duplex protocol that is used in the same scenario of client-server communication, unlike HTTP it starts from ws:// or wss://. It is a stateful protocol, which means the connection between client and server will keep alive until it is terminated by either party (client or server). after closing the connection by either of the client and server, the connection is terminated from both the end.

we use a WebSocket connection for the subscription because it needs a live connection between server and client. any change in the database will show up in our application because of the subscription. and the thing behind this subscription is the WebSocket connection.

and we use HTTP connection for the mutation and query.

Step 5:Create HTTP and WebSocket connection

const httpLink = new HttpLink({
  uri: `https://${GRAPHQL_ENDPOINT}`,
});

const wsLink = new WebSocketLink({
  uri: `ws://${GRAPHQL_ENDPOINT}`,
  options: {
    reconnect: true,
  }
});

how can we use both in one application?

Step 6:Add split function

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "subscription"
    );
  },
  httpLink,
  wsLink
);

so this splitLink constant will hold the URL that returned from the split function depending on the coming connection. if it is a subscription it will return the second constant(wsLink) and if it is like mutation or query it will return the first constant(httpLink).

Step 7:creating a client

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: splitLink,
});

Step 8:Creating routing class.

class Routing extends React.Component {
  render() {
    return (
      <div className="center w85">

        <div className="ph3 pv1 background-gray">
          <Switch>
            <Route exact path="/home" component={Home} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/signUp" component={SignUp} />
          </Switch>
        </div>
      </div>
    )
  }
}

Step 9:Render.
Then finally we will pass this routing class and the client we created in the above to the render function.

ReactDOM.render(
  <BrowserRouter>
    <ApolloProvider client={client}>
      <Routing />
    </ApolloProvider>
  </BrowserRouter>,
  document.getElementById('root')
)

That is all about connection!

the whole index.js file will look like this.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Switch, Route, Link, BrowserRouter } from 'react-router-dom'
import Home from './App'
import Login from './Components/SignIn';
import SignUp from './Components/SignUp';
import { ApolloProvider } from 'react-apollo';
import {
  ApolloClient,
  HttpLink,
  InMemoryCache,
  split,
} from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";
import { WebSocketLink } from "@apollo/link-ws";

const GRAPHQL_ENDPOINT = 'gentle-ghost-74.hasura.app/v1/graphql';

const httpLink = new HttpLink({
  uri: `https://${GRAPHQL_ENDPOINT}`,
});

const wsLink = new WebSocketLink({
  uri: `ws://${GRAPHQL_ENDPOINT}`,
  options: {
    reconnect: true,
  }
});

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "subscription"
    );
  },
  httpLink,
  wsLink
);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: splitLink,
});

class Routing extends React.Component {
  render() {
    return (
      <div className="center w85">

        <div className="ph3 pv1 background-gray">
          <Switch>
            <Route exact path="/home" component={Home} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/signUp" component={SignUp} />
          </Switch>
        </div>
      </div>
    )
  }
}



ReactDOM.render(
  <BrowserRouter>
    <ApolloProvider client={client}>
      <Routing />
    </ApolloProvider>
  </BrowserRouter>,
  document.getElementById('root')
)

Part 3: Implementation of subscription

we are going to implement the subscription in the home component. the file name is Album.js you can find the full code here.

in this part, we will implement image add functionality and rendering images from the database with a subscription.

so let us follow some steps!

Step 1:Import necessary dependencies

import { gql } from '@apollo/client';
import { withApollo, Subscription } from 'react-apollo'

Step 2:Implementing the image add function

handleUpload = async () => {
    const { loading, error, data } = await 
     this.props.client.mutate({
        mutation: gql`

        mutation {
            insert_Photos(objects: {
                 PhotographerEmail: "${this.state.email}",
                 PhotosName: "${this.state.photosToUpload}"

                }) {
              affected_rows
              returning {
                PhotosId
              }
            }
          }

    `, variables: null,})
    if (error) {

        return (<div>
            Error : error.toString();
        </div>)
    }
    await this.setState({
        sucess: 'Sccessfully uploaded...'
    })

}

Then we will pass this function to the Upload button.

 <Grid className="addIMage" container spacing={2} justify="center">
     <div className="button_upload">
         <input color="danger" type="file" name="file" onChange={(e) => this.onChange(e)} />
     </div>
     <Button onClick={this.handleUpload} variant="contained" color="primary">
         Upload
     </Button>
 </Grid>

Step 3:implemement Subscription

To do subscription because we started the project using class-based component, not functional component we can’t use any react Hocs inside the class component. So we will use something like tag which is imported from react-apollo to surround the rendering data.so any time when there is a change in the database these tags will recognize it and build the render again with the upcoming updated data. like the setState() method in the state management system. Simple that is all about it.

<Subscription subscription={gql`
        subscription{
            Photos(where: {PhotographerEmail: {_eq: "${this.state.email}"}}) {
              PhotosName
            }
          }

`}>
    {({ loading, error, data }) => {
        if (loading) {
            return (
                <div>
                    <h1>
                        Loading...
                    </h1>
                </div>
            );
        }
        if (error) {
            return (
                <div>
                    <h2>Error : {error.toString()}</h2>
                </div>
            );
        }
        if (data) {
            console.log("data", data);
        }
        return (
            data.Photos.map((photo) => (
                <Grid item key={photo} xs={12} sm={6} md={4}>
                    <Card className={classes.card}>
                        <CardMedia
                            className={classes.cardMedia}
                            image={photo.PhotosName}
                            title="profile"
                        />
                        <CardContent className={classes.cardContent}>
                            <Typography gutterBottom variant="h5" component="h2">
                                {/* {photographer.fName + " " + photographer.lName} */}
                            </Typography>
                            <Typography>
                                This is a media card. You can use this section to describe the content.
            </Typography>
                        </CardContent>
                        <CardActions>
                            <Button size="small" color="primary">
                                View
            </Button>
                            <Button size="small" color="primary">
                                Edit
            </Button>
                        </CardActions>
                    </Card>
                </Grid>
            ))
        );
    }}
</Subscription>

The last step is to export the class component and surround it with the withApollo high order function so that our component will use the client passed from the index.js file.

 export default withApollo(withStyles(useStyles)(Album))