Saturday, May 5, 2018

A minimal web application structure with technologies like node.js, typescript, express

Recently, I have been working the lot with Node.js and TypeScript. And I absolutely love TypeScript due to its features. I was actually looking for a boilerplate code to start which should be very easy to understand. But there was no code there. So I decided to create a minimum web application structure. I have used it in some project and I was quite happy with it.

So I thought why should I make it open source so that people can also get benefited by this. So here I am presenting A minimal Web Application Structure with technologies like Node.js, TypeScript, and Express.

You can find the complete source code on Github at following location - https://github.com/dotnetjalps/minimum-nodejs-typescript-express

How to Run this Project:

To run this project you need to first install all the NPM packages via the following command.
npm install 
Then you can run this project with the following command.
npm start

Directory Structure Of Project:

  • App.ts – Typescript file for creating express application class and where we have initialized the application.
  • routes.ts - Typescript files for creating all the routes under Init() Method.
  • package.json - Contains all the packages and dev dependencies required for this application. You can add more as your requirement.
  • tsconfig.json - Where all the typescript configuration is there and we converting typescript into ES5.
  • Controller Folder - Contains all the classes for the controller of the express application
  • tsconfig.josn  - Contains all the rules for TypeScript linting.
I’m looking for constructive feedback on this and I’m hoping that I will get it.
Share:

Video: Angular Language Service Extension with Visual Studio Code

I love Angular as Framework and I used it for many applications so I always look forward to how I can make my life easy as a developer and How I am more productive. So Angular Language Service Extension help do that.

In this Video, I have demonstrated Angular Language Service Extension with Visual Studio Code. It analyzes your property and methods from Angular Component and provides Great Intellisense in App component HTML pages in Visual Studio Code. So you don’t have to worry about your spelling mistakes and other stuff.

You can find angular language service extension at - https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

Excited!. Here is the video for the same.



If you like this video then press like button and don't forget to subscribe to my YouTube channel for more videos and instant notification.

Here is the link for subscribing my youtube channel.
https://www.youtube.com/channel/UC5n1O3KCfG3ip3O3pvonCNw?view_as=subscriber

Stay tuned for more. An Angular 6 blog post coming soon!.
Share:

Video: How to debug Angular 5 application in Visual Studio Code with Chrome Debugger

Recently, I have been enjoying creating videos, So I have created a video related debugging of the Angular app in Visual Studio Code. In this video, I have shown how we can debug Angular 5 application in Visual Studio Code with Chrome Debugger Plugin and what configuration we need to make. And It always has a great feeling when you debug your application in the code editor itself instead of the browser.

You can install Chrome Debugger installer from here -
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

So what we are waiting for following is a video.



If you like this video then press like button and don't forget to subscribe to my YouTube channel for more videos and instant notification.

 Here is the link for subscribing my youtube channel.
https://www.youtube.com/channel/UC5n1O3KCfG3ip3O3pvonCNw?view_as=subscriber

Stay tuned for more A great post about Angular 6 is coming soon.
Share:
Friday, April 27, 2018

Flexible Object Mapping in Entity Framework Core 2.0

Entity Framework 2.0 is out for some time. If you don’t know Entity Framework 2.0 is a lightweight, extensible and Cross-Platform Object-relational mapper from Microsoft. It is a new version of Entity Framework which is now cross-platform and can now run now operating system like Linux, Mac etc.With Entity Framework Core 2.0, There are tons of ways to create a table and we are going to see one of that. In this blog post, We are going to see how we are going to see how we can create a field for private fields in the table.

So what we are waiting for. Let’s get started.

Flexible Object Mapping in Entity Framework Core 2.0:

So in this example, We are going to create a Console Application like following.

new-project-entity-framework-core

Once we are done with Creating Application We are going to insert NuGet Package for EF Core like below.

nuget-package-entity-framework-core

You can also install it via running following command.
Install-Package Microsoft.EntityFrameworkCore -Version 2.0.2
Here we are going to install SQL Server Express as a database so we need to install Nuget Package for that also.

enttity-framework-core-sqlserver-nuget-package

You can also install via running following command.
Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 2.0.2
Now it’s time to write some code. First of all, We are going to create A model called Student and In that, we are going to have two private fields.
namespace EFCore2Mapping
{
    public class Student
    {

        public int StudentId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }


        private string _standard;
        private string _division;


        public void AssignStandard(string standard)
        {
            _standard = standard;
        }

        public void AssignDivision(string division)
        {
            _division = division;
        }

        public string GetStandard()
        {
            return _standard;
        }

        public string GetDivision()
        {
            return _division;
        }
    }
}

Here in the above code, You have seen that I have created few fields for Student Model. If you see it carefully, You can see that there are two private fields _standard and _division.  And there are two methods for each field to get and set private variables.

Now let’s write our Entity Framework Data Context. That’s where the Magic going to happen.
using Microsoft.EntityFrameworkCore;

namespace EFCore2Mapping
{
    public class StudentContext : DbContext
    {
        public DbSet<Student> Student { get; set; }
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            optionsBuilder.UseSqlServer("Data Source=Your Server;Initial Catalog=Student;User ID=sa;[email protected]");
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<Student>().Property<string>("Division").HasField("_division");
            modelBuilder.Entity<Student>().Property<string>("Standard").HasField("_standard");
        }
    }
}

Here in the above code, If you see I have created a dataset for our student model that is a standard way to create a table for the map. There is another method OnCofiguring for giving database connection string. There are is another method called OnModelCreating which Entity framework core uses to create tables. Here If you see that I have written code to map private fields to Table Fields so that two fields Division and Standard will be created with tables.

Now let’s run the migration to create a table like following.

migration-to-create-private-fields-in-table-entity-framework-core

You need to go to the Nuget Package Manager Console and then run the following command.
Add Migration Initial Create
Once you are done with it. It will create the tables in the database like following.

fields-created-in-SQL-Server

Now let’s write some code insert data in the table. So following is code for the same.
using System;
using System.Collections.Generic;
using System.Linq;

namespace EFCore2Mapping
{
    class Program
    {
        static void Main(string[] args)
        {

            List<Student> ExistingStudents = new List<Student>();

            Student student = new Student
            {
                FirstName = "Joe",
                LastName = "Tailor",
            };
            student.AssignStandard("5");
            student.AssignDivision("A");

            using (StudentContext studentConext = new StudentContext())
            {
                ///Adding a new Student;
                studentConext.Student.Add(student);
                studentConext.SaveChanges();


                ///Retriviting newly added student
                ExistingStudents = studentConext.Student.ToList();
                
            }

            foreach(Student s in ExistingStudents)
            {
                Console.WriteLine($"Student Id: {s.StudentId}");
                Console.WriteLine($"First Name: {s.FirstName}");
                Console.WriteLine($"Last Name:{s.LastName}");
                Console.WriteLine($"Standard:{s.GetStandard()}");
                Console.WriteLine($"Division:{s.GetDivision()}");
            }
        }
    }
}

Here you can see that in the above code, I have created Student called Joe Tailor and then I have saved it in the database and then I have written the code for fetching the student data and print it via for loop.

When you run this application It will show like following.

output-entity-framework-core-flexible-column-mapping

That’s it. Here you can see that It’s very easy to Manipulate the Columns with Entity Framework core 2.0. Hope you like it.
This complete blog post source  code available on github at - https://github.com/dotnetjalps/EFCoreFlexibleObjectMapping
Share:
Thursday, April 26, 2018

Subscribe to my YouTube channel- DotNetJalps

Dear Friends,
Recently I have been creating lots of Videos. I feel that with videos People can learn and see what others are doing. So I have already started a YouTube channel for my blog. Where I am going to create videos and explain the topics which is difficult to understand.

So on this occasion, I would really like to ask a favor to subscribe to my channel. As I want to give it a proper URL and for that, I require more than 500 subscribers. So If you like the videos recently I have posted. Please do subscribe to my YouTube channel.

https://www.youtube.com/channel/UC5n1O3KCfG3ip3O3pvonCNw?view_as=subscriber

As always, I would to thanks for all the love that you are showering to my blog and I will try best to make my YouTube Channel a great hit.

Thanks in advance for the all the support and love you guys are providing.
Share:

Video: How to debug C# Code with Visual Studio Code

Hello Friends, Recently I have been having fun creating Video. So Here I have created one more. In this Video, I have explained how we can debug the C# Code with Visual Studio Code.

For those, you don’t know Visual Studio Code is a brand new open source Editor from Microsoft. It provides lots of cool features and debugging is one of them. It has got built-in debug support and intellisense with languages like CSharp and Node.js.

So what we are waiting for. Here is the link for the video.
https://www.youtube.com/watch?v=NrEG2vAcRGM&t=154s



You can see the same video at the following link.

https://vimeo.com/265443966


Subscribe to Youtube Channel:

If you are really like my videos then don’t forget to subscribe to my youtube channel.I really need your help giving my youtube channel a custom URL so I need to have 500 subscribers to my channel. So Please do subscribe if you like this kind of videos that I produced.

Here is the link to YouTube

https://www.youtube.com/channel/UC5n1O3KCfG3ip3O3pvonCNw?view_as=subscriber

That’s it. Stay tuned for more!!.

Share:
Tuesday, April 17, 2018

Video: How to use Git with Visual Studio Code

Recently I am having fun creating videos and I have created another one.

In this video, I have explained how we can use GIT Source Control with Visual Studio Code. You will get any idea how it is very easy to to use GIT with Visual Studio Code. You can see that video at following.



Also, don’t forget to subscribe to my channel for more videos, There is a  lot more coming!. Following is my youtube subscription link.


https://www.youtube.com/channel/UC5n1O3KCfG3ip3O3pvonCNw?view_as=subscriber

You can find the same video at vimeo.com at following place
How to use Git with Visual Studio Code from Jalpesh Vadgama on Vimeo.

Stay tuned lot more coming!!
Share:
Search This Blog
About Me
My Photo

Full Stack Developer, Blogger, Microsoft Mvp, Mentor, Lifelong learner, 12+ Years of Experience for JavaScript, web and Microsoft technologies. ASP.NET MVC/Core, C#, Angular,Vue.js and node.js
Subscribe to my blog

  

My Mvp Profile
Follow us on facebook
Blog Archive
Total Pageviews