Forem: Robertblazor

An old project helps search industrial threads information

Robertblazor — Mon, 31 Jul 2023 20:09:20 +0000

Here is the GitHub link and I am writing about an old project that I started with to learn databases and blazor developments.

GitHub Repo

Comment down below if you need the Excel file for MongoDB database, I am looking for peers to revitalize this project.

Start the client side

Robertblazor — Mon, 31 Jul 2023 20:06:47 +0000

Let's start with each page, we want to make sure the Index.razor page have link to each of the pages hosting each database.

            <div class="card">
                <img src="/images/MetricExternalPNG.PNG" alt="Metric External Thread" class="card-img-top">
                <div class="card-body">
                    <h3>Metric External Thread Info Per ISO</h3>
                    <button class="btn btn-info btn-outline-success col-12" @onclick="()=>OpenMetricExternalPage()">Details</button>
                </div>
            </div>

This is a card component to the Metric External ISO page.

For each of the Metric External info set, we also use card to display:

<div class="card mt-3 border-5">
                    <table>
                        <thead>
                            <tr>
                                <th scope="col">Thread Designition</th>
                                <th scope="col">Thread Class</th>
                                <th scope="col">Major Diameter</th>
                                <th scope="col">Pitch Diameter</th>
                                <th scope="col">Minor Diameter</th>
                                <th scope="col"><button type="button" class=" btn btn-outline-dark btn-secondary" @onclick ="()=>OpenDrafterDetails(me)">Drafter Details</button></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="col">@me.CustomThreadDesignition</th>
                                <th scope="col">@me.Classification</th>
                                <th scope="col">@me.MajorDiaMin - @me.MajorDiaMax</th>
                                <th scope="col">@me.PitchDiaMin - @me.PitchDiaMax</th>
                                <th scope="col">@me.MinorDiaMin - @me.MinorDiaMax</th>
                                <th scope="col"><button type="button" class="btn btn-outline-info btn-primary" @onclick = "()=>OpenInspectorDetails(me)">Inspector Details</button></th>
                            </tr>
                        </tbody>
                    </table>
                </div>

Each card contains a table to display the most used data, and we also have a search bar for more convenient search functionality:

<div class="row">
        <input type="text" placeholder = "Type Designition To Search" aria-label = "Search Box" class="col-lg-8" @oninput="((txt)=>OnSearchInput((string)txt.Value))"/>
    </div>

private async Task FilterMetricExternals()
    {
        var output = await metricExternalData.GetAllMetricExternalsAsync();
        if (string.IsNullOrWhiteSpace(searchText)==false)
        {
            output = output.Where(me => me.CustomThreadDesignition.Contains(searchText, StringComparison.InvariantCultureIgnoreCase))
            .OrderBy(me => me.InternalId)
            .ToList();
        }
        metricExternals = output;
        await SaveFilterState();
    }
    private async Task OnSearchInput(string searchInput)
    {
        searchText = searchInput;
        await FilterMetricExternals();
    }

Finishing up classlib project

Robertblazor — Mon, 31 Jul 2023 19:53:33 +0000

Now, we covered the major part of how the class library project should be, let's be more aggressive.

Every model we have, we have a cs file linking to the collection, and we also have a DbConnection cs file.

Extract interface for everyone of them cover all of the actions, just in case some day we want to switch to a different database.

Add the global usings file to wrap up.

global using MongoDB.Driver;
global using MongoDB.Bson;
global using MongoDB.Bson.Serialization.Attributes;
global using Microsoft.Extensions.Caching.Memory;
global using Microsoft.Extensions.Configuration;
global using ThreadsLib.Models;
global using ThreadsLib.DataAccess;

Create a MongoDB database from Excel table

Robertblazor — Mon, 31 Jul 2023 19:49:34 +0000

It's always a trick to convert flexible Excel tables to databases, like this one.

But, it's good practice to just aim for SQL format of the Excel table conversion.

Like this header

Note this is just applicable for internal threads, I can convert it to a one-line header as

MinorDiaMin
MinorDiaMax
PitchDiaMin
PitchDiaMax
MajorDiaMin
MajorDiaMax
TapDrillBasic
ThreadRunouts

and I can save this page to csv files.

After it's saved as csv files, I can simply import that csv file into the MongoDB compass app or use MongoDB VScode extension to import.

Now you have a MongoDB database, take your connection string out and we can continue.

Blazor app give you some auto calculation

Robertblazor — Mon, 31 Jul 2023 19:44:25 +0000

It looks like I missed the git operations in my last post, here I have it available

dotnet new gitignore

Now, you can start from here to either move this project to GitHub or use Git to keep track of this project

Continue with the models file, we can define data access files as well.

namespace ThreadsLib.DataAccess
{
    public class DbConnection : IDbConnection
    {
        private readonly IConfiguration _config;
        private readonly IMongoDatabase _db;
        private string _connectionId = "MongoDB";
        public string DbName { get; private set; }
        public string MetricExternalCollectionName { get; private set; } = "Metric_External_ISO";
        public string MetricInternalCollectionName { get; private set; } = "Metric_Internal_ISO";
        public string MetricWireCollectionName { get; private set; } = "MetricWire";
        public string StandardExternalCollectionName { get; private set; } = "Standard_External_ANSI";
        public string StandardInternalCollectionName { get; private set; } = "Standard_Internal_ANSI";
        public string StandardWireCollectionName { get; private set; } = "StandardWire";
        public string UserCollectionName { get; private set; } = "User_Collection";
        public MongoClient Client { get; private set; }
        public IMongoCollection<MetricExternal> MetricExternalCollection { get; private set; }
        public IMongoCollection<MetricInternal> MetricInternalCollection { get; private set; }
        public IMongoCollection<MetricWire> MetricWireCollection { get; private set; }
        public IMongoCollection<StandardExternal> StandardExternalCollection { get; private set; }
        public IMongoCollection<StandardInternal> StandardInternalCollection { get; private set; }
        public IMongoCollection<StandardWire> StandardWireCollection { get; private set; }
        public IMongoCollection<UserModel> UserCollection { get; private set; }
        public DbConnection(IConfiguration config)
        {
            _config = config;
            Client = new MongoClient(_config.GetConnectionString(_connectionId));
            DbName = _config["DatabaseName"];
            _db = Client.GetDatabase(DbName);

            MetricExternalCollection = _db.GetCollection<MetricExternal>(MetricExternalCollectionName);
            MetricInternalCollection = _db.GetCollection<MetricInternal>(MetricInternalCollectionName);
            MetricWireCollection = _db.GetCollection<MetricWire>(MetricWireCollectionName);
            StandardExternalCollection = _db.GetCollection<StandardExternal>(StandardExternalCollectionName);
            StandardInternalCollection = _db.GetCollection<StandardInternal>(StandardInternalCollectionName);
            StandardWireCollection = _db.GetCollection<StandardWire>(StandardWireCollectionName);
            UserCollection = _db.GetCollection<UserModel>(UserCollectionName);
        }
    }
}


namespace ThreadsLib.DataAccess
{
    public class MongoMetricExternalCollection : IMetricExternalCollection
    {
        private readonly IMongoCollection<MetricExternal> _metricExternals;
        private readonly IMemoryCache _cache;
        private const string cacheName = "MetricExternalData";
        public MongoMetricExternalCollection(IDbConnection db, IMemoryCache cache)
        {
            _cache = cache;
            _metricExternals = db.MetricExternalCollection;
        }
        public async Task<List<MetricExternal>> GetAllMetricExternalsAsync()
        {
            var output = _cache.Get<List<MetricExternal>>(cacheName);
            if (output == null)
            {
                var results = await _metricExternals.FindAsync(_ => true);
                output = results.ToList();
                _cache.Set(cacheName, output, TimeSpan.FromDays(1));
            }
            return output;
        }
        public Task CreateMetricExternalAsync(MetricExternal metricExternal)
        {
            return _metricExternals.InsertOneAsync(metricExternal);
        }
        public async Task<List<MetricExternal>> GetMetricExternalsByDesignition(string designition)
        {
            var results = await GetAllMetricExternalsAsync();
            return results.Where(me => me.CustomThreadDesignition == designition).ToList();
        }
        public async Task<MetricExternal> GetMetricExternalByInternalId(int id)
        {
            var results = await GetAllMetricExternalsAsync();
#pragma warning disable CS8603 // Possible null reference return.
            return results.FirstOrDefault(me => me.InternalId == id);
#pragma warning restore CS8603 // Possible null reference return.
        }
    }
}

We should be able to access the data based on those files, these are just our data service files.

Here is the GitHub Repo you can refer to:
GitHub repo of my project

Once these files are accomplished, we can continue on some more work on the database.

Blazor app give you some auto calculation

Robertblazor — Mon, 31 Jul 2023 19:38:26 +0000

BlazorThreadsFullStack

This is a starter project to let you know about databases, Blazor, and how you can create a web page to get to deal with both of them.

For starter, if you are using Visual Studio, go ahead and create a Blazor Server Project, just like me.

Or, if you are using Visual Studio Code, here is the CLI

dotnet new blazorserver -f net6.0 -n "BlazorThreadsFullStack"

Once this project is created, if you are using VSCode, go ahead and create a new solution file

dotnet new sln -n "BlazorThreadFullStack"

Add a new class library

dotnet new classlib -f net6.0 -n "ThreadsLib"

Add the two projects to the solution

dotnet sln add .\BlazorThreadFullStack\BlazorThreadFullStack.csproj
dotnet sln add .\ThreadsLib\ThreadsLib.csproj

Add a inter-project reference here:

cd .\BlazorThreadFullStack
dotnet add reference ..\ThreadsLib\ThreadsLib.csproj

If you like, you can delete the weather forecast files as shown in the project, but I would not show the process here. Here is a youtube video on how to clean up the project:

How Mr. Tim Corey clean up his project

I reference this project to this Excel table containing the information of industrial bolts and nuts specs, which is essential for machine shops to reference.

Use this two tables as one example, after we figure out the properties, we can have two files to define the model of each category, this is for metric external and metric internal threads:


namespace ThreadsLib.Models
{
    [BsonIgnoreExtraElements]
    public class MetricExternal
    {
        [BsonId]
        public ObjectId MEId { get; set; }
        [BsonElement("ID")]
        public int InternalId { get; set; }
        [BsonElement("Size")]
        public double Size { get; set; }
        [BsonElement("ThreadDesignition")]
        public string ThreadDesignition { get; set; }
        [BsonElement("CustomThreadDesignition")]
        public string CustomThreadDesignition { get; set; }
        [BsonElement("Pitch")]
        public double Pitch { get; set; }
        [BsonElement("Class")]
        public string Classification { get; set; }
        [BsonElement("MajorDiaMax")]
        public double MajorDiaMax { get; set; }
        [BsonElement("MajorDiaMin")]
        public double MajorDiaMin { get; set; }
        [BsonElement("PitchDiaMax")]
        public double PitchDiaMax { get; set; }
        [BsonElement("PitchDiaMin")]
        public double PitchDiaMin { get; set; }
        [BsonElement("MinorDiaMax")]
        public double MinorDiaMax { get; set; }
        [BsonElement("MinorDiaMin")]
        public double MinorDiaMin { get; set; }
    }
}

And this is for metric internal threads:


namespace ThreadsLib.Models
{
    [BsonIgnoreExtraElements]
    public class MetricInternal
    {
        [BsonId]
        public ObjectId MIId { get; set; }
        [BsonElement("ID")]
        public int InternalId { get; set; }
        [BsonElement("ThreadDesignition")]
        public string ThreadDesignition { get; set; }
        [BsonElement("CustomThreadDesignition")]
        public string CustomThreadDesignition { get; set; }
        [BsonElement("Pitch")]
        public double Pitch { get; set; }
        [BsonElement("Class")]
        public string Classification { get; set; }
        [BsonElement("MinorDiaMin")]
        public double MinorDiaMin { get; set; }
        [BsonElement("MinorDiaMax")]
        public double MinorDiaMax { get; set; }
        [BsonElement("PitchDiaMin")]
        public double PitchDiaMin { get; set; }
        [BsonElement("PitchDiaMax")]
        public double PitchDiaMax { get; set; }
        [BsonElement("MajorDiaMin")]
        public double MajorDiaMin { get; set; }
        [BsonElement("MajorDiaMax")]
        public double MajorDiaMax { get; set; }
        [BsonElement("TapDrillBasic")]
        public double TapDrillBasic { get; set; }
        [BsonElement("ThreadDepthMin")]
        public double ThreadDepthMin { get; set; }
        [BsonElement("ThreadRunouts")]
        public double ThreadRunouts { get; set; }
    }
}

You may notice that I used MongoDB in this project, yes, exactly

dotnet add package MongoDB.Driver --version 2.20.0
dotnet add package Microsoft.Extensions.Caching.Memory --version 6.0.2-mauipre.1.22102.15
dotnet add package Microsoft.Extensions.Configuration.Abstractions --version 6.0.2-mauipre.1.22102.15

Follow this pattern, we can go from now to the next step, defining data access layer and establish our MongoDB.

Learn bicep based on the GUI of Azure Portal

Robertblazor — Mon, 31 Jul 2023 14:06:42 +0000

Seems like expanding the scope of projects requires knowledge of different configs, like knowing what you can do and what you want to do.

In the context of me and today, I like to define a new scope of development and deployment as I am using Azure as my cloud provider and using .NET as my main choice of making Apps.

Core layer

Frontend Blazor, HTML, CSS
Backend APIs and databases
Any code associates with the business functions

Environment layer

Dev Containers for the dev environment
VM in Azure, whichever makes the most sense of storing the code and running the code in cloud.
DevOps Pipelines, justified based on preference.

Cloud layer

Bicep or terraform to specify the resource you like.

After the core layer is finished, we want to expand the project's scope a bit to make it work better.

Wherever you store your code, just to make sure it works for your pipeline. I like GitHub and GitHub Actions.
Take the services offered by your cloud service provider. Use the GUI portal to deploy the resources in your mind. If it's one Azure, make sure all your related resources are in the same Resource Group.
Now, go to the ARM template view of the Resource Group. Copy the file, and paste it to your Visual Studio Code.
Use the following command to convert the JSON file to bicep file.

az bicep decompile --file main.json

You have the basic bicep file to be further proceeded.

Support your GitHub Projects with GitHub Dependabot

Robertblazor — Wed, 26 Jul 2023 15:51:20 +0000

log4j is an event that lasts forever, and we should think about some ways to prevent this. Like keep all of our dependencies up to date.

Before today, it's going to be a bummer to do this, a person manually keep an eye on every single package used in a project is just a joke at least.

What we can do is to enable the dependabot component in GitHub, and let their excellent AI and the professional teams to take care of this.

First, I will find a github repo to fork, here is the link to the project we want to start with:

Blazor Starter Project

The next step is to go to the settings section right in your repository:

My personal suggestion is to enable all of them as that will help GitHub and everyone to keep the open-source community in a better health.

Let's try to enable the first section:

All good until the last enable button:

Dependabot version updates, it will show up a yml file shown below

# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates

version: 2
updates:
  - package-ecosystem: "" # See documentation for possible values
    directory: "/" # Location of package manifests
    schedule:
      interval: "weekly"

And the commit change button is also disabled as I need to fill some blanks, here is a working final result:

# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates

version: 2
updates:
  - package-ecosystem: "nuget" # See documentation for possible values
    directory: "/" # Location of package manifests
    schedule:
      interval: "weekly"

You can absolutely commit this one, but dependabot will give you some funny alerts and pull requests like it would ask you to upgrade some packages designed for .NET 8 - preview 6. And as you merge the pull requests, your application will boom right in front of you. (happened to me last night)

Some more modifications here, just use the ignore configuration for this case.

# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates

version: 2
updates:
  - package-ecosystem: "nuget"
    directory: "/"
    schedule:
      interval: "daily"
    ignore:
      - dependency-name: "Microsoft.AspNetCore.Components.WebAssembly"
        versions: ["8.0.x"]
      - dependency-name: "Microsoft.AspNetCore.Components.WebAssembly.DevServer"
        versions: ["8.0.x"]

The next thing you will get is some pull requests that specifies these two packages with new version of 7.0.9, I can safely promise that this upgrade won't break anything.

Okay, you should be able to keep your cloud application's packages up to date from now. (And please, this only works with deployed applications.)

Azure Static Web App for a contact us page

Robertblazor — Mon, 17 Jul 2023 15:13:21 +0000

Is it possible to have an alternative to Twilio SendGrid, Mail gun, or other third-party communication Software as a Service that drives me nuts on verification and compliance?

There is one offered by Microsoft built-in on Azure, and it can be easily integrated into Azure functions, as a backend function. Let's dive in.

First, we need to select the service we need from Azure, like here:

And under the page, look for this one icon with a name of Azure Email communication Service Domain.

Second, just follow the configuration steps listed on this blogpost.

https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/email/create-email-communication-resource

Now, we can pick a starter template from GitHub and create a repo.

https://github.com/staticwebdev/blazor-starter

Note if you want to create your own repo from scratch, it's also okay. Here are some CLI commands you can reference:
dotnet new blazorwasm -f net6.0 -n "Client"
dotnet new classlib -f net6.0 -n "Shared"
'func init'
'func new'
'dotnet new sln -n "Repo-Name"'
'dotnet add reference ..\classlibName\classlibName.csproj'

If the following cli doesn't work, here is a different tutorial you can reference.

'func init'

Alternative GUI method in Visual Studio Code:

https://learn.microsoft.com/en-us/azure/azure-functions/functions-develop-vs-code?tabs=csharp

Now, got to your Api folder, type or copy the following commands:
'dotnet add package Azure.Communication.Email --version 1.0.0'
'dotnet add package Microsoft.ApplicationInsights.WorkerService --version 2.22.0-beta3'

Type the following command
'func new --template "HttpTrigger" --name "SendEmail"'

And reference to this repo as I did (Thanks to Mike) for the C# part of the function.

https://github.com/mikepfeiffer/azure-serverless-contact

This function won't run as you made the change, please, go ahead and edit the local.settings.json file, as I did:

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "dotnet",
    "AzureCommunicationServicesConnectionString": "<Your Connection String>",
    "myEmailAddress":"<Your Email to receive the email>",
    "senderEmailAddress":"<System assigned email address or your custom email address to host the service>"
  },
  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*"
    }
}

And the serviceDependencies.json to the following:

{
    "dependencies": {
      "storage1": {
        "type": "storage",
        "connectionId": "AzureWebJobsStorage"
      },
      "appInsights1": {
        "type": "appInsights",
        "connectionId": "<Azure communication service connection key>",
        "dynamicId": null
      }
    }
  }

You can test the function with the following CLI
'func start'

And you can also start your frontend.

Make two new files as Contact.razor and Contact.razor.css

Please use PostAsJsonAsync to invoke the Azure function API. and edit the page as you need to.

Here is my own Repo as open-source for everyone to use.

https://github.com/Robertblazor/Contact-us-exp

Learn the recent technologies

Robertblazor — Sun, 11 Jun 2023 19:55:59 +0000

It's the conference season again, find out how to stay tuned and learn new things.

1. Find the tech stack you like. I loved the Microsoft tech stack, I use Blazor (razor components) for my frontend, SyncFusion for special components, and GitHub for DevOps. I keep an eye on those topics.

2. Listen to podcasts or YouTube channels, find what's in the podcaster's eyes. I keep an eye on the .NET 8 preview and Blazor United tech stacks. Seems straightforward to implement and Microsoft already takes care of most of the tooling.

3. Keep a smell of what is helpful, for coders, GitHub Copilot already revolutionized most of the coding and we need to learn how to work with it.

4. Follow-up with someone who shares interests with you, attend the recap meetings. Just share the new knowledge with your mentors, no one will regret anything.

Here are what I learned in Microsoft Build Event:

They are no better time to start moving local development workloads to GitHub CodeSpaces and Microsoft Dev Box. Especially, I can configure the virtual machine's specs.
I need to keep an eye on the Copilots and Microsoft Fabric, those tools are great candidates for automating workflows. Furthermore, constant workflow reporting might never require Microsoft Excel spreadsheets again.
Artificial Intelligence assistance is not for the future, it's for now.
Always keep in mind with the question:
How to outsource this workload to the computer in front of me or in the nearby datacenter?

A good habit of Winget update

Robertblazor — Tue, 30 May 2023 00:06:09 +0000

My daily habit of keeping my Windows 11 machine up to date.

First step:

Check my setting:

Move to update, make sure check update one more time after the Windows Security update is installed

Second step:

Check Microsoft Store for any update on apps, do it twice to make sure apps from Microsoft Store is covered.

Third step:

Open Windows Terminal

Type the following command:

winget upgrade

Or

winget update

Try the following CLI statement

winget upgrade --all

or update one-by-one with a format

winget upgrade <ApplicationId>

One example can be

winget upgrade Microsoft.Azd

Not sure if there is a way besides making a PowerShell script and running it to upgrade everything at once.

Last step

Open my Visual Studio Code - Insiders, and let it update its extensions, if it needs reload, just do it.

Do it daily and you will keep up with your computer's upgrade needs.

My first post, and hope you like it.