Skip to main content

Posts

Redis Cache Implementation In .NetCore Web API Using Distributed Caching Technique(Redis Docker Instance)

Redis Cache: Redis is an open-source in-memory data structure store, used as a database, cache. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, etc. Setup Redis Docker Instance: For this sample to use Redis instance locally we will use Docker. If you don't have any prior knowledge of docker, not a problem just follow the steps below.  Click here for a video session on Redis docker setup Note: Skip this section if you already have redis direct instance or azure or any cloud provider that have redis Step1: Download docker into our local system "https://docs.docker.com/desktop/" . Docker was available for all desktop operating systems. Step2: After downloading the docker installer, then install it. Now to run any docker containers(eg: Redis, MongoDB, PostgreSQL, etc) this docker instance we just installed should be active(should be running). Step3: Now we need to pull the docker Redis image from the docker hub "http

Vuejs Application JSON To Excel Generation

In this article, we will explore JSON data to excel file generation in the Vuejs application. An Overview On vue-json-excel: The technique to download your JSON data as an excel file directly from the browser. The following are key options for the excel vue component. data: The array of data to be exported. fields:  Fields inside the JSON object that you want to export. If none provided, all properties in the JSON will be exported. type: Mime type[xls, csv]. name: Filename to export. header: Title(s) for the data. Can be a string(one title) or an array of string (multiple titles). footer: Footer(s) for the data. Can be a string(one footer) or an array of strings(multiple footers). default-value: Use as a fallback when the row has no field values. worksheet: Name of the worksheet tab. fetch: Callback to fetch data before download if it's set it runs immediately function after mouse pressed and before the download process(Note: Only works if no data prop is defined). before-generate:

Localization In .NetCore MVC Application

Localization: The translation to a specific region or country or culture or local. The websites with localization can reach a wider range of audiences. Create A DotNet Core MVC Sample Application: Let's learn localization steps by implementing them in a sample MVC application. Add Sample Language Collection To AppSettings File: In our sample let's read the different languages that we support from the appSettings.json file. appSettings.Development.json: "LanguageCodes": [ { "Name": "Spain", "Code": "es" }, { "Name": "Mexico", "Code": "es-Mx" }, { "Name": "United States", "Code": "en-us" } ] Let's create a type for the "LanguageCodes". Shared/LanguageCodes: namespace Sample.Localization.Mvc.Shared { public class LanguageCodes { public string Name { get; set; } public string Code { get; set; } } } Register

Scratch Card Integration In Vuejs Application Using vue-scratchable Plugin

In this article, we will learn about scratch card integration in the vuejs application using a 'vue-scratchable' plugin. Create A Vuejs Sample Application: Command To Install Vue CLI Globally On Your System: npm run -g @vue/cli Command To Create Vue App: vue create your_application_name After creating a sample application run the following command to start the application. Command To Run Vue App: npm run serve Install vue-scratchable Npm Package: Command To Install Scratch Card Package: npm i vue-scratchable Register Scratch Component Globally: Now let's register the 'vue-scratchable' library component globally by importing in main.js(entry file). src/main.js: import Vue from 'vue' import App from './App.vue' import VueScratchable from 'vue-scratchable'; Vue.component('vue-scratchable', VueScratchable); Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') (Line: 3) Imported 'v

Part-2 Ionic Angular JWT(JSON Web Token) Authentication(Refresh Token Implementation)

In  Part-1  we have implemented steps for jwt authentication in Ionic5 angular application. This is a continuous article of  Part-1 , our main goals here are to use access token in the authorization header and refresh token implementation for user authentication. NestJS(Node.js) Todos API: In  Part-1  we discussed steps to set up the Nestjs API. In that API we have a secured endpoint called 'Todos'. In the next step, we are going to consume this 'Todo' API from our Ionic application. http://localhost:3000/todos Ionic Application Use Authorization Header: Now let's try to consume the secured 'Todos' endpoint by adding the access token to the header. Let's now create a TodoService as below. src/app/services/todo.service.ts: import { Injectable } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { Observable } from 'rxjs'; @Injectable() export class TodoServie { constructor(private http:HttpCl

Part-1 Ionic Angular JWT(JSON Web Token) Authentication(Access Token Implementation)

In this article, we are going to understand the implementation steps on Jwt authentication in Ionic5 angular application. Here we mainly concentrate on authenticated user access token. What is JSON Web Token?: JSON Web Token is a digitally signed and secured token for user validation. The jwt is constructed with 3 informative parts: Header Payload Signature Create A Sample Ionic Angular Application: Let's begin our journey by creating a sample Ionic Angular application where we are going to implement our JWT authentication. Command To Install Ionic CLI: npm install -g @ionic/cli Command To Create Ionic Tabs Structure APP: ionic start your_application_name tabs Command To Run Application: ionic serve Ionic Storage: The access token on receiving to our Ionic application we need to store it to use it in a subsequent request, the ideal choice for it to use Ionic Storage. Ionic storage provides an easy way to store key/value pairs and JSON objects. It has the capability of picking the