|
| 1 | +--- |
| 2 | +title: Google Cloud Big Query |
| 3 | +page_title: Google Cloud Big Query |
| 4 | +description: "Learn how to bind the Telerik UI for {{ site.framework }} Grid to data that is served through Google Cloud Big Query." |
| 5 | +slug: google_cloud_big_query_aspnetmvc6_aspnetmvc |
| 6 | +position: 2 |
| 7 | +--- |
| 8 | + |
| 9 | +# Google Cloud Big Query |
| 10 | + |
| 11 | +This tutorial shows how to create a Dataset in [Google Cloud Big Query](https://cloud.google.com/bigquery) and configure the Telerik UI for {{ site.framework }} Grid to perform remote CRUD (Create, Read, Update, Destroy) data operations in the Dataset. |
| 12 | + |
| 13 | +## Prerequisites |
| 14 | + |
| 15 | +Before you start using the Grid with Google Cloud Big Query, you will need: |
| 16 | + |
| 17 | +* A Google Cloud account |
| 18 | +* A project created in Google Cloud |
| 19 | +* Basic knowledge on using the [Cloud Console](https://cloud.google.com/cloud-console/) |
| 20 | +* An application set up to use {{ site.product }} |
| 21 | + |
| 22 | +Refer to [Creating a Google Cloud Account and Project]({% slug google_cloud_getting_started_aspnetmvc6_aspnetmvc %}) for more information on how to create an account and a project. |
| 23 | + |
| 24 | +## Creating New DataSet and Table in BigQuery |
| 25 | + |
| 26 | +For more information on how to create new datasets and tables, refer to the articles about [creating and using datasets](https://cloud.google.com/bigquery/docs/tables) and [creating and using tables](https://cloud.google.com/bigquery/docs/tables) from the official BigQuery documentation. |
| 27 | + |
| 28 | +1. Navigate to **BigQuery** from the Google Cloud Platform navigation menu. |
| 29 | + |
| 30 | +  |
| 31 | + |
| 32 | +1. Select your project and choose **Create dataset** from the dropdown, which opens on clicking the project's menu button. |
| 33 | + |
| 34 | +  |
| 35 | + |
| 36 | +Once the dataset is created, copy the datasetid. You will need it later, in the logic responsible for running the queries against this dataset. In this example the datasetid is `TestDataset`. |
| 37 | + |
| 38 | +1. Create a `products` table with the following Schema and Data. |
| 39 | + |
| 40 | + Schema in the TestDataset: |
| 41 | +  |
| 42 | + |
| 43 | + Data of the Products Table in the TestDataset: |
| 44 | + |
| 45 | +  |
| 46 | + |
| 47 | +## Authorization and Access |
| 48 | + |
| 49 | +The Google APIs Client library for .NET handles the authorization and access to the Google API. For more details on the available libraries, refer to [Cloud Client Libraries](https://cloud.google.com/apis/docs/cloud-client-libraries). |
| 50 | + |
| 51 | +To start using the Google APIs Client library for .NET: |
| 52 | + |
| 53 | +1. Install the **Google.Apis.Bigquery.v2** NuGet package in your {{ site.framework }} application. |
| 54 | + |
| 55 | +1. Follow the steps from the [Setting up Authentication](https://cloud.google.com/bigquery/docs/reference/libraries#setting_up_authentication) guide. |
| 56 | + |
| 57 | +One of the steps for setting up authentication consists of downloading a JSON key file that holds the credentials information to your computer. Provide the credentials to your application code by setting the environment variable GOOGLE_APPLICATION_CREDENTIALS. To set the variable, use the approach described in the [Setting up Authentication](https://cloud.google.com/bigquery/docs/reference/libraries#setting_up_authentication) guide. |
| 58 | + |
| 59 | +If you experience issues with accessing the environment variable, make sure the JSON file is present in an accessible location, for example, `C:\Program Files (x86)\IIS Express\myproject-name-191225-5f6ddc8dc2f6.json`. Try setting the GOOGLE_APPLICATION_CREDENTIALS environment variable in the application: |
| 60 | + |
| 61 | +``` |
| 62 | +public ActionResult Index() |
| 63 | +{ |
| 64 | + Environment.SetEnvironmentVariable("GOOGLE_APPLICATION_CREDENTIALS", "myproject-name-191225-5f6ddc8dc2f6.json"); |
| 65 | +
|
| 66 | + return View(); |
| 67 | +} |
| 68 | +``` |
| 69 | + |
| 70 | +## Configuring the Grid to Consume and Manipulate Available BigQuery Data |
| 71 | + |
| 72 | +Configure the Grid for remote binding and implement the actions the Grid will call to perform CRUD operations. |
| 73 | + |
| 74 | +1. Configure the Grid. |
| 75 | + |
| 76 | + The declaration of the Grid and the view model it uses are shown in the example below. |
| 77 | + |
| 78 | + ``` |
| 79 | + @(Html.Kendo().Grid<TelerikApp1.Models.ProductViewModel>() |
| 80 | + .Name("grid") |
| 81 | + .Columns(columns => |
| 82 | + { |
| 83 | + columns.Bound(p => p.ProductID); |
| 84 | + columns.Bound(p => p.ProductName); |
| 85 | + columns.Bound(p => p.SupplierID); |
| 86 | + columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250); |
| 87 | + }) |
| 88 | + .ToolBar(toolbar => toolbar.Create()) |
| 89 | + .Editable(editable => editable.Mode(GridEditMode.InLine)) |
| 90 | + .Pageable() |
| 91 | + .Sortable() |
| 92 | + .Scrollable() |
| 93 | + .HtmlAttributes(new { style = "height:550px;" }) |
| 94 | + .DataSource(dataSource => dataSource |
| 95 | + .Ajax() |
| 96 | + .PageSize(20) |
| 97 | + .Events(events => events.Error("error_handler")) |
| 98 | + .Model(model => |
| 99 | + { |
| 100 | + model.Id(p => p.ProductID); |
| 101 | + model.Field(f => f.ProductID).Editable(false); |
| 102 | + }) |
| 103 | + .Read(read => read.Action("Products_Read", "Home")) |
| 104 | + .Create(create => create.Action("Product_Create", "Home")) |
| 105 | + .Update(update => update.Action("Product_Update", "Home")) |
| 106 | + .Destroy(destroy => destroy.Action("Product_Destroy", "Home")) |
| 107 | + ) |
| 108 | + ) |
| 109 | + |
| 110 | + <script type="text/javascript"> |
| 111 | + function error_handler(e) { |
| 112 | + if (e.errors) { |
| 113 | + var message = "Errors:\n"; |
| 114 | + $.each(e.errors, function (key, value) { |
| 115 | + if ('errors' in value) { |
| 116 | + $.each(value.errors, function() { |
| 117 | + message += this + "\n"; |
| 118 | + }); |
| 119 | + } |
| 120 | + }); |
| 121 | + alert(message); |
| 122 | + } |
| 123 | + } |
| 124 | + </script> |
| 125 | + ``` |
| 126 | + ```Model |
| 127 | + public class ProductViewModel |
| 128 | + { |
| 129 | + public int ProductID { get; set; } |
| 130 | + |
| 131 | + public string ProductName { get; set; } |
| 132 | + |
| 133 | + public int SupplierID { get; set; } |
| 134 | + } |
| 135 | + ``` |
| 136 | + |
| 137 | +1. Implement the `Products_Read` action. |
| 138 | + |
| 139 | + The Google BigQuery API (using Google.Cloud.BigQuery.V2;) allows you to run queries against the dataset. To use the API, add the following namespace to the controller: |
| 140 | + |
| 141 | + ```csharp |
| 142 | + using Google.Cloud.BigQuery.V2; |
| 143 | + ``` |
| 144 | + |
| 145 | + This exemplary implementation shows how you can use a SELECT statement, to get the data and then return it back to the client, for the Grid to visualize it. |
| 146 | + |
| 147 | + ```Controller |
| 148 | + public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request) |
| 149 | + { |
| 150 | + BigQueryClient client = BigQueryClient.Create("myproject-name-191225"); |
| 151 | + //The GetTable method expects the Google Cloud projectid, the datasetid and the tableid: |
| 152 | + BigQueryTable table = client.GetTable("myproject-name-191225", "TestDataset", "products"); |
| 153 | + |
| 154 | + string sql = $"SELECT * FROM TestDataset.products"; |
| 155 | + BigQueryParameter[] parameters = null; |
| 156 | + BigQueryResults results = client.ExecuteQuery(sql, parameters); |
| 157 | + |
| 158 | + List<ProductViewModel> data = new List<ProductViewModel>(); |
| 159 | + foreach (BigQueryRow row in results) |
| 160 | + { |
| 161 | + data.Add(new ProductViewModel() { ProductID = Int32.Parse(row["ProductID"].ToString()), ProductName = row["ProductName"].ToString(), SupplierID = Int32.Parse(row["SupplierID"].ToString()) }); |
| 162 | + } |
| 163 | + |
| 164 | + return Json(data.ToDataSourceResult(request)); |
| 165 | + } |
| 166 | + ``` |
| 167 | + |
| 168 | +1. Implement the Update, Create and Destroy actions. |
| 169 | + |
| 170 | + This snippet shows an exemplary implementation of the action responsible for the Update operations. |
| 171 | + |
| 172 | + ```Controller |
| 173 | + [AcceptVerbs(HttpVerbs.Post)] |
| 174 | + public ActionResult Product_Update([DataSourceRequest] DataSourceRequest request, ProductViewModel product) |
| 175 | + { |
| 176 | + if (product != null && ModelState.IsValid) |
| 177 | + { |
| 178 | + //Update product |
| 179 | + BigQueryClient client = BigQueryClient.Create("rich-sunlight-353114"); |
| 180 | + BigQueryTable table = client.GetTable("rich-sunlight-353114", "TestDataset", "products"); |
| 181 | + |
| 182 | + string sql = $"UPDATE TestDataset.products SET ProductName = '" + product.ProductName + "', SupplierID = " + product.SupplierID + " WHERE ProductID = " + product.ProductID + "; "; |
| 183 | + BigQueryParameter[] parameters = null; |
| 184 | + BigQueryResults results = client.ExecuteQuery(sql, parameters); |
| 185 | + } |
| 186 | + |
| 187 | + return Json(new[] { product }.ToDataSourceResult(request, ModelState)); |
| 188 | + } |
| 189 | + ``` |
| 190 | + |
| 191 | + Use the same approach, to implement the Create and Destroy actions. With the help of BigQuery API, you can run INSERT and DELETE statements to modify the data in the dataset. |
| 192 | + |
| 193 | + ```Controller |
| 194 | + [AcceptVerbs(HttpVerbs.Post)] |
| 195 | + public ActionResult Product_Create([DataSourceRequest] DataSourceRequest request, ProductViewModel product) |
| 196 | + { |
| 197 | + if (product != null && ModelState.IsValid) |
| 198 | + { |
| 199 | + //Create product... |
| 200 | + } |
| 201 | + |
| 202 | + return Json(new[] { product }.ToDataSourceResult(request, ModelState)); |
| 203 | + } |
| 204 | + |
| 205 | + [AcceptVerbs(HttpVerbs.Post)] |
| 206 | + public ActionResult Product_Destroy([DataSourceRequest] DataSourceRequest request, ProductViewModel product) |
| 207 | + { |
| 208 | + if (product != null) |
| 209 | + { |
| 210 | + //Destroy product... |
| 211 | + } |
| 212 | + |
| 213 | + return Json(new[] { product }.ToDataSourceResult(request, ModelState)); |
| 214 | + } |
| 215 | + ``` |
| 216 | + |
| 217 | +## See Also |
| 218 | + |
| 219 | +* [Binding to Azure Cosmos DB]({% slug azure_cosmosdb_aspnetcore %}) |
| 220 | +* [Consuming Data from Amazon DynamoDB]({% slug aws_dynamodb_aspnetcore %}) |
0 commit comments