Azure Blob Storage is Microsoft's object storage solution for the cloud. Blob storage is optimized for storing massive amounts of unstructured data. Unstructured data is data that doesn't adhere to a particular data model or definition, such as text or binary data.

In this article I will walk you through how to use the Azure Blob Storage client library v12 for .NET to upload file into the Blob Storage.

Prerequisites

• Azure Subscription
• Azure Storage Account
• .Net Core 6 SDK

Setting Up

The first step is to create a storage account in your Microsoft Azure account. In this article we wont be covering the steps needed to create an Azure Storage account, you can read here and here if you want to know how to do that.

Creating ASP.Net Core Web API Project

Since our goal is to upload real file into Azure Storage, let's start by creating an ASP.Net Core Web API.

Create a new Web Api project named BlobStorage.API refer to the screenshot below:

Make sure you select the latest .Net framework  - 6.0 like so:

Install the v12 Package

The package will we be using is the version v12 and its name Azure.Storage.Blobs. In your package manager console type the commane below:

Copy your access keys from Azure Portal

Sign in to your Azure Portal and locate your storage account. In the storage account menu pane, under Security + networking, select Access keys. Here, you can view the account access keys and the complete connection string for each key.

Adding Connection String to appsettings.json

In the appsettings.json file in the root of our Web API project let's add a section called azure and then add both the storage container name and connection string like so:

Implementing Upload in Code

Let's start by writting the whole code that will be responsible for the uploads. In this tutorial, I will be writting a reusable code.

What we want to achieve:

• Upload file into Blob Storage
• Get the upload Uri, file type and file extension back as a response

For this purpose, let's create a DTO that will represent the Upload response details. In the models folder, create a class and name it AzureUploadResponseModel like so:

Create the upload service

Within our project, create a folder named Services, and add an Interface named IAzureStorageService like so:

Next, create another class within the Services folder named AzureStorageService and let it implement the IAzureStorageService like so:

Creating Helper class to Get Content Type

As you can see that we are calling an extension method to get content type of a file like so filePath.GetContentType().

This is an extention method that we will create next. Create a folder named StorageExtension and create a class named StorageHelpers. In the helper method, we will use FileExtensionContentTypeProvider to get file content type and also validate file type.

Using the Upload Service

In order to use the upload service, the first step is to inject BlogClient in our project Program.cs - this is called dependency injection like so:

Let's create an API contoller named upload and paste the following code.

If you try to send a file via postman you should get the result that is similar to this:

Conclusion

In this article, we have learned how to upload to Azure Blob Storage and also get back the upload Uri.

Thanks for your time.

Consuming REST APIs in a React application can be done in various ways, but in this tutorial, we will be discussing how we can consume REST APIs using two of the most popular methods known as Axios (a promise-based HTTP client) and Fetch API (a browser in-built web API). I will discuss and implement each of these methods in detail and shed light on some of the cool features each of them have to offer.

What is a REST API

THE BENEFITS OF REST APIS

Minimal APIs are architected to create HTTP APIs with minimal dependencies. They are ideal for microservices and apps that want to include only the minimum files, features, and dependencies in ASP.NET Core.

We would be building a minimal API to retrieve and add todo items using .Net 6

Requirements

• Visual Studio Code
• C# Extension for visual studio code
• .Net 6 SDK

Update the generated code

Add Nugget Packages

Add the API code

The model and database context classes

Examine the GET endpoints

Examine the PUT endpoint

Examine the DELETE endpoint

Prevent over-posting

Introduction to Map in Javascript

A map object holds key-value pairs where values of any type can be used as either keys or values. We can create a new map by using the following syntax:

The Map() method accepts an optional iterable object as an argument, whose elements are key-value pairs

Handy Map Methods

• clear() - removes all elements from the map object.
• delete(key) - removes the element with the specified key from the map object.
• entries() - returns a new Iterator object that contains the [key, value] pairs for each element in the map object.
• forEach(callback[, thisArg]) - calls a function for each [key, value] pair in the map object.
• get(key) - returns the value associated with the specified key.
• has(key) - returns true if the map object contains the specified key.
• keys() - returns a new Iterator object that contains the keys for each element in the map object.
• set(key, value) - adds or updates an element with a specified key and value to the map object.
• values() - returns a new Iterator object that contains the values for each element in the map object.

Example: Create a new Map Object

Add elements to the map

Initialize a map with an iterable object

Get a value from the map by its key

Check if a key is present in the map

Get the number of elements in the map

Iterate over map keys

Iterate over map values

Iterate over map entries

Convert map keys or values to an array

Delete an element from the map

Delete all elements from the map

Mobile application engineers will consistently need to implement authentication in their day to day app development. This could be because of many reasons like - limiting a region from unauthenticated clients, holding a few assets for just authenticated clients and so forth.

This article I will walk you through how to implement a straightforward yet a powerful and real-world  authentication flow in react native application.

My main focus will be on the explanation of the process and will not talk about building and styling the all the screen layout. The complete source code is however available on my github repository.

Prerequisites

To follow along with this tutorial you need the following:

• Node version ≥10.x.x installed 
• A package manager such as npm or Yarn 
• react-native-cli or expo-cli installed on your local machine

I will be using React Native version 0.64.3 and React Navigation version 6.x. For complete environment setup for react native development checkout the official documentation.

The Auth Flow

The authentication flow of the app will typically look like this:

• The user launch the app. 
• The app tries to loads some authentication data from persistent storage (in our case AsyncStorage). 
• If auth data is found in the storage, this will be passed in to the auth state and the user will be presented with the main app.
• If auth data is not found the user is presented with the authentication screen and will only be able to navigate through all the authentication screens only.
• When the user signs out, all authentication data will be removed from the storage and auth state will be updated and user is sent back to authentication screens.

Creating React Native Project

The Approach

We want to prevent user from gaining access to all the main app screens by clicking on the back button after they have logged out. The best way to prevent this is to unmount all of the screens related to main app screens when they logout. To achieve this, we will be using React Navigation Library.

Adding Screens

Since we will be having some different set of screens for authenticated and unauthenticated users, let's create four screens within our src/screens folder- LoginScreen and RegisterScreen for unauthenticated users and DashboardScreen and AccountScreen for authenticated users. 

Adding Navigation

Let's add React Navigation library. For a comprehensive documentation on adding navigation to your react native project can be found in React Navigation Library Docs 

React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. We will install some couple of libraries. 

React Navigation Library Installations - React Native CLI

React Navigation Library Installations - Expo Native CLI

Installing the native stack navigator library

Creating the app native stack navigators

Adding Redux Toolkit and React-Redux

Implementing the SignOut Logic 

Conclusion 

Simple Json Structure

Creating a blank App

Building the questions card

Implementing the Swipe Effect

import { Component, ElementRef, AfterViewInit, ViewChildren, QueryList } from '@angular/core';
import { GestureController, IonCard, Platform } from '@ionic/angular';

 @ViewChildren(IonCard, { read: ElementRef }) tinderCards: QueryList<ElementRef>;

 ngAfterViewInit() {
    const tinderCardArray = this.tinderCards.toArray();
    this.setGesture(tinderCardArray);
  }