Azure CosmosDBでCRUD操作を実行する

この記事では、EFCoreを使用してAzureCosmosDBでCRUD操作を実行できる.NET5APIを作成する方法を学習します。

前提条件 

• Azureアカウント-まだお持ちでない場合は、クラウドコンピューティングサービス|にアクセスして無料で作成できます。MicrosoftAzure。
• Azure Cosmos DBのセットアップ-その方法の詳細な手順が必要な場合は、この記事に従ってください

フォローするには、Azure Cosmos DBにVideogamesDBというデータベースと、Videogamesというコンテナーを作成してください。

ステップ1 

1. VS 2019を開き、新しいASP .NET Core WebAPIを作成します。
2. ターゲットフレームワークを.NET5として選択します。
3. NuGetパッケージ「Microsoft.EntityFrameworkCore.Cosmos」バージョン5.0.1をインストールします

ステップ2-appsettings.jsonファイルを編集します

appsettings.jsonファイルを編集して、Azure Cosmos DBのアカウント、主キー、およびデータベース名を含める必要があります。次のコードをコピーしてappsettings.jsonファイルに貼り付けます

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "CosmosDb": {
    "Account": "<>",
    "Key": "<>",
    "DatabaseName": "<>",
    "ContainerName": "<>"
  },
  "AllowedHosts": "*"
}

JavaScript

Azure Cosmos DBの「アカウント」の値をURIに、「キー」を主キーに置き換えます（下のスクリーンショットを参照）。

DatabaseNameとContainerNameを、Azure Cosmos DBの[概要]セクションのデータベースとIDに置き換えます（下のスクリーンショットを参照）。

ステップ3-DBコンテキストを作成する

DbContextは、データベースとのセッションを作成するために使用され、すべてのCRUD操作を実行するために使用されます。 

DBContextという名前の新しいフォルダーを作成し、その中に新しいクラスApplicationDbContextを追加します。次のコードをコピーしてApplicationDbContextに貼り付けます

using AzureCosmosEFCoreCRUD.Models;
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.Metadata.Builders;

namespace AzureCosmosEFCoreCRUD.DBContext
{
    public class ApplicationDbContext : DbContext
    {
        public ApplicationDbContext(DbContextOptions dbContextOptions) : base(dbContextOptions)
        {
        }
        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {

            modelBuilder.Entity<Videogames>()
                 .HasNoDiscriminator()
                 .ToContainer(nameof(Videogames))
                 .HasPartitionKey(da => da.Id)
                 .HasKey(da => new { da.Id });
            modelBuilder.ApplyConfiguration(new VideogameEntityConfiguration());

        }
        public DbSet<Videogames> Videogames { get; set; }
    }
    public class VideogameEntityConfiguration : IEntityTypeConfiguration<Videogames>
    {
        public void Configure(EntityTypeBuilder<Videogames> builder)
        {
           builder.OwnsOne(x => x.Company);
        }
    }

}

C＃

ステップ4-モデルクラスを追加する

Modelsというフォルダを追加します。CompanyとVideogameの2つのモデルクラスを追加します。次のコードをコピーしてクラスに貼り付けます

namespace AzureCosmosEFCoreCRUD.Models
{
    public class Company
    {
        public string Name { get; set; }
        public string City { get; set; }
        public string Province { get; set; }
        public string Country { get; set; }
    }
}

C＃

using Newtonsoft.Json;
using System;
using System.ComponentModel.DataAnnotations;

namespace AzureCosmosEFCoreCRUD.Models
{
    public class Videogames
    {
        [Key]
        [JsonProperty(PropertyName = "id")]
        public string Id { get; set; } = Guid.NewGuid().ToString();
        public string Name { get; set; }
        public string Genere { get; set; }
        public string Platform { get; set; }
        public Company Company { get; set; }
    }
}

C＃

ステップ5-スタートアップクラスを編集する

ConfigureServicesメソッドで、ApplicationDbContextを使用してCosmos DBを構成するには、次のコード行を追加する必要があります。

var accountEndpoint = Configuration.GetValue<string>("CosmosDb:Account");
var accountKey = Configuration.GetValue<string>("CosmosDb:Key");
var dbName = Configuration.GetValue<string>("CosmosDb:DatabaseName");
services.AddDbContext<ApplicationDbContext>(x => x.UseCosmos(accountEndpoint, accountKey, dbName));

C＃

ステップ6-コントローラーを追加する

Controllersフォルダーに、VideogameControllerという新しいControllerクラスを追加します。次のコードをコピーしてクラスに貼り付けます。

これらは、LINQスタイルのクエリを使用してDbContextを使用してデータベースでCRUD操作を簡単に実行する方法を示す単純なエンドポイントです。 

using AzureCosmosEFCoreCRUD.DBContext;
using AzureCosmosEFCoreCRUD.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace AzureCosmosEFCoreCRUD.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class VideogameController : ControllerBase
    {
        private readonly ILogger _logger;
        private readonly ApplicationDbContext applicationDbContext;
        private readonly IConfiguration configuration;

        public VideogameController(ApplicationDbContext applicationDbContext, IConfiguration configuration, ILogger<VideogameController> logger)
        {
            this.applicationDbContext = applicationDbContext;
            this.configuration = configuration;
            _logger = logger;
        }
        [HttpGet("GetAllVideogames")]
        public async Task<ActionResult<IList<Videogames>>> GetAllVideogames()
        {
            try
            {
                var videogames = await applicationDbContext.Videogames.ToListAsync();
                if (videogames != null)
                {
                    return Ok(videogames);
                }
                return NotFound("No results found");
            }
            catch (Exception ex)
            {
                _logger.LogError(ex.Message);
                return StatusCode(500, "Some error occured while retrieving data");
            }
        }
        [HttpGet]
        public async Task<ActionResult<IList<Videogames>>> GetVideogamesByName(string name)
        {
            try
            {
                var videogames = await applicationDbContext.Videogames.FirstOrDefaultAsync(x => x.Name == name);
                if (videogames != null)
                {
                    return Ok(videogames);
                }
                return NotFound("No results found for "+name);
            }
            catch (Exception ex)
            {
                _logger.LogError(ex.Message);
                return StatusCode(500, "Some error occured while retrieving data");
            }
        }
        [HttpGet("GetVideogameByCompanyName")]
        public async Task<ActionResult<IList<Videogames>>> GetVideogameByCompanyName(string name)
        {
            try
            {
                var videogames = await applicationDbContext.Videogames.Where(x => x.Company.Name == name).ToListAsync();
                if (videogames != null)
                {
                    return Ok(videogames);
                }
                return NotFound("No results found for " + name);
            }
            catch (Exception ex)
            {
                _logger.LogError(ex.Message);
                return StatusCode(500, "Some error occured while retrieving data");
            }
        }
        [HttpPost]
        public async Task<ActionResult> AddVideogame(Videogames videogame)
        {
            try
            {
                await applicationDbContext.Videogames.AddAsync(videogame);
                await applicationDbContext.SaveChangesAsync();
                return Ok();
            }
            catch(Exception ex)
            {
                _logger.LogError(ex.Message);
                return StatusCode(500, "Some error occured while adding data");
            }
        }
        [HttpDelete]
        public async Task<ActionResult> DeleteVideogameByName(string name)
        {
            try
            {
                var videogame = await applicationDbContext.Videogames.FirstOrDefaultAsync(x => x.Name == name);
                if (videogame != null)
                {
                    applicationDbContext.Remove(videogame);
                    await applicationDbContext.SaveChangesAsync();
                    return Ok();
                }
                return NotFound();
            }
            catch (Exception ex)
            {
                _logger.LogError(ex.Message);
                return StatusCode(500, "Some error occured while deleting data");
            }
        }
        [HttpPut]
        public async Task<ActionResult> UpdateVideogameByName(Videogames data)
        {
            try
            {
                var videogame = await applicationDbContext.Videogames.FirstOrDefaultAsync(x => x.Name == data.Name);
                if (videogame != null)
                {
                    var itemBody = applicationDbContext.Videogames.WithPartitionKey(videogame.Id);
                    itemBody.FirstOrDefault().Platform = "XBOX";
                    applicationDbContext.Update(itemBody.FirstOrDefault());
                    await applicationDbContext.SaveChangesAsync();
                    return Ok();
                }
                return NotFound();
            }
            catch (Exception ex)
            {
                _logger.LogError(ex.Message);
                return StatusCode(500, "Some error occured while updating data");
            }
        }
    }
}

C＃

概要

これは、EFCoreを使用して.NET5 RESTAPIを使用してAzureCosmosDBでCRUD操作を実行する方法のベースとして機能する非常に基本的な記事です。

 リンク：https ：//www.c-sharpcorner.com/article/create-a-net-5-app-to-perform-crud-operations-on-azure-cosmos-db-sql-api-usin/

#dotnet  #crud  #aruze 

Handsontable is a JavaScript/HTML5 Spreadsheet Library for Developers

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. 
It provides data binding, data validation, filtering, sorting, and CRUD operations.     

Get Started with Handsontable

Features

The most popular features of Handsontable:

  ✓  Multiple column sorting 
  ✓  Non-contiguous selection 
  ✓  Filtering data 
  ✓  Export to file 
  ✓  Validating data 
  ✓  Conditional formatting 
  ✓  Merging cells 
  ✓  Freezing rows/columns 
  ✓  Moving rows/columns 
  ✓  Resizing rows/columns 
  ✓  Hiding rows/columns 
  ✓  Context menu 
  ✓  Comments 
 

Documentation

• Developer guides
• API Reference
• Changelog
• Demo

Get Started

Install with npm

Run the following command in your terminal

npm install handsontable

You can also use Yarn, NuGet or load the bundle directly from jsDelivr.

Create a placeholder

Create an HTML placeholder

<div id="example"></div>

Import Handsontable and its stylesheet

import Handsontable from "handsontable";
import 'handsontable/dist/handsontable.full.css';

Initialize the grid

Now turn your placeholder into a data grid with sample data.

const data = [
  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
  ['2019', 10, 11, 12, 13],
  ['2020', 20, 11, 14, 13],
  ['2021', 30, 15, 12, 13]
];

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true
});

Support

We provide support for developers working with commercial version via contact form or at support@handsontable.com.

If you use a non-commercial version then please ask your tagged question on StackOverflow.

License

Handsontable is a commercial software with two licenses available:

• Free for non-commercial purposes such as teaching, academic research, and evaluation. Read it here.
• Commercial license with support and maintenance included. See pricing plans.

License key

If you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at handsontable.com.

If you use the free for non-commercial license of Handsontable, then pass the phrase 'non-commercial-and-evaluation', as described in this documentation.

Proudly created and maintained by the Handsontable Team.

Author: Handsontable
Source Code: https://github.com/handsontable/handsontable 
License: View license

#javascript #React #perform #angular #crud 

Cree Una Aplicación .NET 5 Para Realizar Operaciones CRUD En Azure

En este artículo, aprenderemos a crear una API de .NET 5 que pueda realizar operaciones CRUD en Azure Cosmos DB mediante EF Core.

requisitos previos 

• Cuenta de Azure: si aún no la tiene, puede crear una gratis visitando Servicios de computación en la nube | Microsoft Azure.
• Configuración de Azure Cosmos DB: si desea obtener instrucciones paso a paso sobre cómo hacerlo, siga este artículo

Para continuar, cree una base de datos en Azure Cosmos DB llamada VideogamesDB y un contenedor llamado Videogames.

Paso 1 

1. Abra VS 2019 y cree una nueva API web ASP .NET Core.
2. Elija el marco de destino como .NET 5.
3. Instale el paquete NuGet "Microsoft.EntityFrameworkCore.Cosmos" versión 5.0.1

Paso 2: edite el archivo appsettings.json

Tenemos que editar el archivo appsettings.json para incluir la cuenta, la clave principal y el nombre de la base de datos para Azure Cosmos DB. Copie y pegue el siguiente código en el archivo appsettings.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "CosmosDb": {
    "Account": "<>",
    "Key": "<>",
    "DatabaseName": "<>",
    "ContainerName": "<>"
  },
  "AllowedHosts": "*"
}

JavaScript

Reemplace el valor de "Cuenta" con URI y "Clave" con Clave principal de Azure Cosmos DB (consulte las capturas de pantalla a continuación)

Reemplace DatabaseName y ContainerName con Database e ID de la sección Información general de Azure Cosmos DB (consulte la captura de pantalla a continuación)

Paso 3: crear contexto de base de datos

DbContext se usa para crear una sesión con la base de datos y se usará para realizar todas las operaciones CRUD. 

Cree una nueva carpeta llamada DBContext y agregue una nueva clase ApplicationDbContext dentro de ella. Copie y pegue el siguiente código en ApplicationDbContext

using AzureCosmosEFCoreCRUD.Models;
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.Metadata.Builders;

namespace AzureCosmosEFCoreCRUD.DBContext
{
    public class ApplicationDbContext : DbContext
    {
        public ApplicationDbContext(DbContextOptions dbContextOptions) : base(dbContextOptions)
        {
        }
        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {

            modelBuilder.Entity<Videogames>()
                 .HasNoDiscriminator()
                 .ToContainer(nameof(Videogames))
                 .HasPartitionKey(da => da.Id)
                 .HasKey(da => new { da.Id });
            modelBuilder.ApplyConfiguration(new VideogameEntityConfiguration());

        }
        public DbSet<Videogames> Videogames { get; set; }
    }
    public class VideogameEntityConfiguration : IEntityTypeConfiguration<Videogames>
    {
        public void Configure(EntityTypeBuilder<Videogames> builder)
        {
           builder.OwnsOne(x => x.Company);
        }
    }

}

C#

Paso 4: agregar clases de modelo

Agregue una carpeta llamada Modelos. Agregue dos clases de modelos: Empresa y Videojuego. Copie y pegue el siguiente código en las clases.

namespace AzureCosmosEFCoreCRUD.Models
{
    public class Company
    {
        public string Name { get; set; }
        public string City { get; set; }
        public string Province { get; set; }
        public string Country { get; set; }
    }
}

C#

using Newtonsoft.Json;
using System;
using System.ComponentModel.DataAnnotations;

namespace AzureCosmosEFCoreCRUD.Models
{
    public class Videogames
    {
        [Key]
        [JsonProperty(PropertyName = "id")]
        public string Id { get; set; } = Guid.NewGuid().ToString();
        public string Name { get; set; }
        public string Genere { get; set; }
        public string Platform { get; set; }
        public Company Company { get; set; }
    }
}

C#

Paso 5: edite la clase de inicio

En el método ConfigureServices tenemos que agregar las siguientes líneas de código para configurar Cosmos DB con ApplicationDbContext

var accountEndpoint = Configuration.GetValue<string>("CosmosDb:Account");
var accountKey = Configuration.GetValue<string>("CosmosDb:Key");
var dbName = Configuration.GetValue<string>("CosmosDb:DatabaseName");
services.AddDbContext<ApplicationDbContext>(x => x.UseCosmos(accountEndpoint, accountKey, dbName));

C#

Paso 6 - Agregar controlador

En la carpeta Controladores, agregue una nueva clase de controlador llamada VideogameController. Copie y pegue el siguiente código en la clase.

Estos son puntos finales simples para mostrar cómo podemos usar fácilmente consultas de estilo LINQ para realizar operaciones CRUD en la base de datos usando DbContext. 

using AzureCosmosEFCoreCRUD.DBContext;
using AzureCosmosEFCoreCRUD.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace AzureCosmosEFCoreCRUD.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class VideogameController : ControllerBase
    {
        private readonly ILogger _logger;
        private readonly ApplicationDbContext applicationDbContext;
        private readonly IConfiguration configuration;

        public VideogameController(ApplicationDbContext applicationDbContext, IConfiguration configuration, ILogger<VideogameController> logger)
        {
            this.applicationDbContext = applicationDbContext;
            this.configuration = configuration;
            _logger = logger;
        }
        [HttpGet("GetAllVideogames")]
        public async Task<ActionResult<IList<Videogames>>> GetAllVideogames()
        {
            try
            {
                var videogames = await applicationDbContext.Videogames.ToListAsync();
                if (videogames != null)
                {
                    return Ok(videogames);
                }
                return NotFound("No results found");
            }
            catch (Exception ex)
            {
                _logger.LogError(ex.Message);
                return StatusCode(500, "Some error occured while retrieving data");
            }
        }
        [HttpGet]
        public async Task<ActionResult<IList<Videogames>>> GetVideogamesByName(string name)
        {
            try
            {
                var videogames = await applicationDbContext.Videogames.FirstOrDefaultAsync(x => x.Name == name);
                if (videogames != null)
                {
                    return Ok(videogames);
                }
                return NotFound("No results found for "+name);
            }
            catch (Exception ex)
            {
                _logger.LogError(ex.Message);
                return StatusCode(500, "Some error occured while retrieving data");
            }
        }
        [HttpGet("GetVideogameByCompanyName")]
        public async Task<ActionResult<IList<Videogames>>> GetVideogameByCompanyName(string name)
        {
            try
            {
                var videogames = await applicationDbContext.Videogames.Where(x => x.Company.Name == name).ToListAsync();
                if (videogames != null)
                {
                    return Ok(videogames);
                }
                return NotFound("No results found for " + name);
            }
            catch (Exception ex)
            {
                _logger.LogError(ex.Message);
                return StatusCode(500, "Some error occured while retrieving data");
            }
        }
        [HttpPost]
        public async Task<ActionResult> AddVideogame(Videogames videogame)
        {
            try
            {
                await applicationDbContext.Videogames.AddAsync(videogame);
                await applicationDbContext.SaveChangesAsync();
                return Ok();
            }
            catch(Exception ex)
            {
                _logger.LogError(ex.Message);
                return StatusCode(500, "Some error occured while adding data");
            }
        }
        [HttpDelete]
        public async Task<ActionResult> DeleteVideogameByName(string name)
        {
            try
            {
                var videogame = await applicationDbContext.Videogames.FirstOrDefaultAsync(x => x.Name == name);
                if (videogame != null)
                {
                    applicationDbContext.Remove(videogame);
                    await applicationDbContext.SaveChangesAsync();
                    return Ok();
                }
                return NotFound();
            }
            catch (Exception ex)
            {
                _logger.LogError(ex.Message);
                return StatusCode(500, "Some error occured while deleting data");
            }
        }
        [HttpPut]
        public async Task<ActionResult> UpdateVideogameByName(Videogames data)
        {
            try
            {
                var videogame = await applicationDbContext.Videogames.FirstOrDefaultAsync(x => x.Name == data.Name);
                if (videogame != null)
                {
                    var itemBody = applicationDbContext.Videogames.WithPartitionKey(videogame.Id);
                    itemBody.FirstOrDefault().Platform = "XBOX";
                    applicationDbContext.Update(itemBody.FirstOrDefault());
                    await applicationDbContext.SaveChangesAsync();
                    return Ok();
                }
                return NotFound();
            }
            catch (Exception ex)
            {
                _logger.LogError(ex.Message);
                return StatusCode(500, "Some error occured while updating data");
            }
        }
    }
}

C#

Resumen

Este es un artículo muy básico que sirve como base para saber cómo usar EF Core para realizar operaciones CRUD en Azure Cosmos DB mediante la API REST de .NET 5.

 Enlace: https://www.c-sharpcorner.com/article/create-a-net-5-app-to-perform-crud-operations-on-azure-cosmos-db-sql-api-usin/

#dotnet  #crud  #aruze 

How to Build CRUD Apps in Fewer Lines Of Code

CanJS

Web Components

CanJS’s StacheElement allows you to create Web Components with observable properties and live-bound templates.

class Counter extends StacheElement {
	static view = `
		Count: <span>{{ this.count }}</span>
		<button on:click="this.increment()">+1</button>
	`;

	static props = {
		count: 0
	};

	increment() {
		this.count++;
	}
}
customElements.define("my-counter", Counter);

Model layer

Components shouldn’t be concerned with how data is fetched, updated, or cached.

CanJS provides the right abstractions for your model code to be cleanly separated from your UI code. Learn more…

Promises in templates

CanJS’s stache templating language can directly read the state and values from Promises.

No need to write any extra code to determine whether a Promise is pending, resolved, or rejected. Learn more…

{{# if(this.promise.isPending) }}
  Loading…
{{/ if }}
{{# if(this.promise.isRejected) }}
  Error: {{ this.promise.reason }}
{{/ if }}
{{# if(this.promise.isResolved) }}
  Result: {{ this.promise.value }}
{{/ if }}

Real-time list updating

After data is created, updated, or destroyed, CanJS automatically updates your lists for you.

Filtering and sorting are preserved, so you don’t have to manually update your lists or fetch the same data again. Learn more…

Getting Started

Ready to get started? See the Setting Up CanJS, API Docs and Guides pages.

Support / Contributing

Before you make an issue, please read our Contributing guide.

You can find the core team on Slack.

Release History

See Releases.

Author: Canjs
Source Code: https://github.com/canjs/canjs 
License: View license

#javascript #crud 

InfyOm Laravel Generator: API, Scaffold, Tests, CRUD Laravel Generator

InfyOm Laravel Generator

Generate Admin Panels CRUDs and APIs in Minutes with tons of other features and customizations with 3 different themes.
Read Documentation for detailed installation steps and usage.

Support Us

We have created 14+ Laravel packages and invested a lot of resources into creating these all packages and maintaining them.

You can support us by either sponsoring us or buying one of our paid products. Or help us by spreading the word about us on social platforms via tweets and posts.

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site.

Backers

Become a backer and get your image on our README on Github with a link to your site.

Buy our Paid Products

You can also check out our other paid products on CodeCanyon.

Follow Us

• Twitter
• Facebook
• LinkedIn
• Youtube
• Contact Us

Made with InfyOm Generator

Also, Do not forget to add your website to Made with InfyOm Generator List list.

Video Tutorials

Checkout Video Tutorials - By: Shailesh Ladumor

Author: InfyOmLabs
Source Code: https://github.com/InfyOmLabs/laravel-generator 
License: MIT License

#laravel #crud 

How to Create a Simple CRUD App Built Around Budgeting with React

How To Create A Budget App With React

Creating CRUD apps in React is something that most beginners struggle with so in this video I will be explaining how I would go about creating a simple CRUD app built around budgeting. This is a fun project since it covers many intermediate and beginner level React concepts that all come together to create a complex project.

⏱️ Timestamps:

00:00 - Introduction
00:40 - Basic Component HTML/CSS
05:10 - Budget Card Component HTML/CSS
16:10 - Budget Context
25:45 - useLocalStorage Hook
28:55 - Adding Budgets
38:08 - Adding Expenses
45:08 - Uncategorized Budget Card
47:55 - Total Budget Card
50:28 - View/Edit/Delete Expenses

GitHub Code: https://github.com/WebDevSimplified/react-budget-app 

#react #crud 

Firebase Firestore (Version 9) CRUD con JavaScript

Firebase Firestore (Version 9) CRUD con Javascript

Aprende a crear una aplicación web de Javascript que usa Firebase como backend. En este ejemplo aprenderemos a crear un CRUD (Create, React, Update, Delete) que usa Firestore como base de datos NoSQL en tiempo real.

Indice del Tutorial:
00:00 Introducción
01:12 Project Setup
14:06 Firestore Setup
30:14 Listar Datos
44:17 Eliminar Datos
56:44 Editar Datos
01:06:20 Actualizar Datos
01:13:02 Estilizar con Bootstrap5

Código del Ejemplo: https://github.com/FaztWeb/firebase-crud-javascript

#javascript #firebase #crud #firestore #nosql 

How to Set Up Realm Database in 12 Minutes

In this Video I'm going to teach how to Setup Realm Database as an alternative for Core Data and also implementing CRUD Operations on Realm Database
#apple  #swiftui  #ios  #xcode  #animation  #crud 

Learn Two Angular CRUD Projects Back To Back

Angular 12 CRUD with JSON-server, Angular CRUD with json-server Project from scratch, CRUD Operation. Angular 12 CRUD project from scratch, Angular CRUD with JSON-Server crash course, In This Video we will learn two Angular CRUD projects Back to Back.

#angular #crud 

Student Fees Management System in Angular 12

In this angular crud tutorial, we will see the student fees management system in angular 12 with GET, POST, PUT and delete methods.

#angular #crud 

Angular CRUD Tutorial Project from Scratch

In this Angular Material CRUD Tutorial, we will see insert data, read data, Edit data and Delete Data with JSON-server in Angular12, Angular CRUD Tutorial project from Scratch.

#angular #crud 

Angular CRUD Bookshop Project From Scratch

In this video Angular project, we will see the angular CRUD Bookshop project from scratch, here we also Learn Mean Stack Crash Course from Scratch, using MongoDB, Angular, Express, and Nodejs.

#angular #crud 

Build A Real-time Angular Web Application using Mean Stack

Complete Angular CRUD application using Mean Stack, This Angular crud tutorial I will tell you backend and frontend, Build a real-time Angular web Application using Mean Stack.

#angular #crud #mean 

CRUD API Example with Django Rest Framework

SIMPLE CRUD API WITH DJANGO REST FRAMEWORK

Django REST framework is a powerful and flexible toolkit for building Web APIs.

Requirements

• Python 3.6
• Django 3.2
• Django REST Framework

Installation

After you cloned the repository, you want to create a virtual environment, so you have a clean python installation. You can do this by running the command

python -m venv env

After this, it is necessary to activate the virtual environment, you can get more information about this here

You can install all the required dependencies by running

pip install -r requirements.txt

Structure

In a RESTful API, endpoints (URLs) define the structure of the API and how end users access data from our application using the HTTP methods - GET, POST, PUT, DELETE. Endpoints should be logically organized around collections and elements, both of which are resources.

In our case, we have one single resource, movies, so we will use the following URLS - /movies/ and /movies/<id> for collections and elements, respectively:

Use

We can test the API using curl or httpie, or we can use Postman

Httpie is a user-friendly http client that's written in Python. Let's try and install that.

You can install httpie using pip:

pip install httpie

First, we have to start up Django's development server.

python manage.py runserver

Only authenticated users can use the API services, for that reason if we try this:

http  http://127.0.0.1:8000/api/v1/movies/

we get:

{
    "detail": "Authentication credentials were not provided."
}

Instead, if we try to access with credentials:

http http://127.0.0.1:8000/api/v1/movies/3 "Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjE2MjA4Mjk1LCJqdGkiOiI4NGNhZmMzMmFiZDA0MDQ2YjZhMzFhZjJjMmRiNjUyYyIsInVzZXJfaWQiOjJ9.NJrs-sXnghAwcMsIWyCvE2RuGcQ3Hiu5p3vBmLkHSvM"

we get the movie with id = 3

{  "title":  "Avengers",  "genre":  "Superheroes",  "year":  2012,  "creator":  "admin"  }

Create users and Tokens

First we need to create a user, so we can log in

http POST http://127.0.0.1:8000/api/v1/auth/register/ email="email@email.com" username="USERNAME" password1="PASSWORD" password2="PASSWORD"

After we create an account we can use those credentials to get a token

To get a token first we need to request

http http://127.0.0.1:8000/api/v1/auth/token/ username="username" password="password"

after that, we get the token

{
    "refresh": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTYxNjI5MjMyMSwianRpIjoiNGNkODA3YTlkMmMxNDA2NWFhMzNhYzMxOTgyMzhkZTgiLCJ1c2VyX2lkIjozfQ.hP1wPOPvaPo2DYTC9M1AuOSogdRL_mGP30CHsbpf4zA",
    "access": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjE2MjA2MjIxLCJqdGkiOiJjNTNlNThmYjE4N2Q0YWY2YTE5MGNiMzhlNjU5ZmI0NSIsInVzZXJfaWQiOjN9.Csz-SgXoItUbT3RgB3zXhjA2DAv77hpYjqlgEMNAHps"
}

We got two tokens, the access token will be used to authenticated all the requests we need to make, this access token will expire after some time. We can use the refresh token to request a need access token.

requesting new access token

http http://127.0.0.1:8000/api/v1/auth/token/refresh/ refresh="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTYxNjI5MjMyMSwianRpIjoiNGNkODA3YTlkMmMxNDA2NWFhMzNhYzMxOTgyMzhkZTgiLCJ1c2VyX2lkIjozfQ.hP1wPOPvaPo2DYTC9M1AuOSogdRL_mGP30CHsbpf4zA"

and we will get a new access token

{
    "access": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjE2MjA4Mjk1LCJqdGkiOiI4NGNhZmMzMmFiZDA0MDQ2YjZhMzFhZjJjMmRiNjUyYyIsInVzZXJfaWQiOjJ9.NJrs-sXnghAwcMsIWyCvE2RuGcQ3Hiu5p3vBmLkHSvM"
}

The API has some restrictions:

• The movies are always associated with a creator (user who created it).
• Only authenticated users may create and see movies.
• Only the creator of a movie may update or delete it.
• The API doesn't allow unauthenticated requests.

Commands

Get all movies
http http://127.0.0.1:8000/api/v1/movies/ "Authorization: Bearer {YOUR_TOKEN}" 
Get a single movie
http GET http://127.0.0.1:8000/api/v1/movies/{movie_id}/ "Authorization: Bearer {YOUR_TOKEN}" 
Create a new movie
http POST http://127.0.0.1:8000/api/v1/movies/ "Authorization: Bearer {YOUR_TOKEN}" title="Ant Man and The Wasp" genre="Action" year=2018 
Full update a movie
http PUT http://127.0.0.1:8000/api/v1/movies/{movie_id}/ "Authorization: Bearer {YOUR_TOKEN}" title="AntMan and The Wasp" genre="Action" year=2018
Partial update a movie
http PATCH http://127.0.0.1:8000/api/v1/movies/{movie_id}/ "Authorization: Bearer {YOUR_TOKEN}" title="AntMan and The Wasp" 
Delete a movie
http DELETE http://127.0.0.1:8000/api/v1/movies/{movie_id}/ "Authorization: Bearer {YOUR_TOKEN}"

Pagination

The API supports pagination, by default responses have a page_size=10 but if you want change that you can pass through params page_size={your_page_size_number}

http http://127.0.0.1:8000/api/v1/movies/?page=1 "Authorization: Bearer {YOUR_TOKEN}"
http http://127.0.0.1:8000/api/v1/movies/?page=3 "Authorization: Bearer {YOUR_TOKEN}"
http http://127.0.0.1:8000/api/v1/movies/?page=3&page_size=15 "Authorization: Bearer {YOUR_TOKEN}"

Filters

The API supports filtering, you can filter by the attributes of a movie like this

http http://127.0.0.1:8000/api/v1/movies/?title="AntMan" "Authorization: Bearer {YOUR_TOKEN}"
http http://127.0.0.1:8000/api/v1/movies/?year=2020 "Authorization: Bearer {YOUR_TOKEN}"
http http://127.0.0.1:8000/api/v1/movies/?year__gt=2019&year__lt=2022 "Authorization: Bearer {YOUR_TOKEN}"
http http://127.0.0.1:8000/api/v1/movies/?genre="Action" "Authorization: Bearer {YOUR_TOKEN}"
http http://127.0.0.1:8000/api/v1/movies/?creator__username="myUsername" "Authorization: Bearer {YOUR_TOKEN}"

You can also combine multiples filters like so

http http://127.0.0.1:8000/api/v1/movies/?title="AntMan"&year=2020 "Authorization: Bearer {YOUR_TOKEN}"
http http://127.0.0.1:8000/api/v1/movies/?year__gt=2019&year__lt=2022&genre="Action" "Authorization: Bearer {YOUR_TOKEN}"

Download Details:
Author: KibetRonoh
Source Code: https://github.com/KibetRonoh/Django-Rest-Framework-CRUD-example
License: MIT License

#django #python #crud #api 

Implementing a CRUD view with database connection: Part 4

In this video, Alejandro Duarte demonstrates a quick way to implement CRUD (create, read, update, delete) web pages with a database connection in Java using Vaadin.

#java #crud