Web app(bShare) progress (asp.net mvc) part 4

I completed my bShare web app. I should say nearly done, just need to go over each code again to do some cleaning or maybe even optimizing without breaking anything. Features are there, the web app is live and running (privately).

Updated ReadMe on github, going to take a day or two off while I plan on my next project, which should be way more challenging. Thinking of a private chat app using Blazor webassembly with SignalR and Asp.net backend API.

bShare github link

Web app(bShare) progress (asp.net mvc) part 3

I’m almost done with my file share web app project.
Still need to finalize some UI elements, and go over my code to do some cleaning up where I can. Progress from the prototype looking UI, to a little bit better one on the right.
My takeaway from this project so far is that to work with placeholder UI elements if the code behind is not completed yet.
You may add new features, or think of different ways to represent data. In this case, some of the work you have put in on the frontend side may become a waste.

Web app(bShare) progress (asp.net mvc) part 2

My app bShare is nearly complete for the coding side.
This is a temporary file upload web app. User can choose to have files removed after 12, 24, or 48 hours. Quick and easy way to share files in case someone doesn’t use any cloud storage platforms such as dropbox, google drive, etc.

Main features are functioning. I need to touch up the UI, and do some testing.
And then for the first time, I must work on the documentation/wiki. I doubt anyone would be using this template, but documentation is good for code review and building your skills on explaining your code? Or at least I believe so.

Almost forgot, before going on to the documentation, I need to work on the automation of MySQL database deletion based on datetime value, and configure a task schedule on Windows Server to remove expired/old files from the system.

Web app(bShare) progress (asp.net mvc) part 1

Steady progress on my mini web app BShare. My Goal is to finish this by the end of the month. I am stuck troubleshooting routing of view access towards random generated shortlinks.

http://site.com/link/{string}
The controller checks the database if the string exists, and if it exists, it will return the view with the same url. It’s good to take a few hours off, or continue the next day for a fresh clear mind.
This is usually the same with music production. But in case of music production, your ears need to take a break so it’s almost mandatory to wait until the next day to notice the slightest sound differences.

Chrome, allowing localhost bad ssl cert

I recently rebuilt my comptuer with a fresh install of Windows. I’ve lost many small custom configs here and there. Including the one for Chrome where you can allow bad ssl certs to be loaded.
You need this to test out your apps via localhost using Chrome.

Solution, on image below. This is something you don’t do often, I’m pretty sure I’ll be looking this up again in a few years lol. Now i’ll just search my own blog for this.

Asp.net core, system environment variables

I started working on a new small project. I took some time in reading about my option on storing environment variables. (For like the 10th time..)
I am using AWS’s Secrets Manager for my NanisuruApp, but this time around I decided to simply utilize the System Environment Variables on Windows.

Steps taken (Asp.net Core 6.x+)
1.) Added my custom prefix to use.
builder.Configuration.AddEnvironmentVariables(prefix: “CustomPrefix_”);

example environtment variable:
CustomPrefix_DevConnectionString = value

2.) Created 2 profile in launchSettings.json for a “Development” and “Production” profile.
“ASPNETCORE_ENVIRONMENT”: “Production” and copy and paste for Development

3.) Create a cooresponding appsettings file for both Development and Production.
appsettings.Development.json
appsettings.Production.json

something like this (appsettings.Development.Json)

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "DevConnectionString": "connection"
}

4.) Then I did a sloppy job at loading different connection info based on the project’s environment.

(Program.cs)

// Enable custom environment variables.
builder.Configuration.AddEnvironmentVariables(prefix: "CustomPrefix_");

// Store database connection string
string? connectionString = null;

// Create environment variable to check dev/prod/staging status
IHostEnvironment currentEnvironment = builder.Environment;

// Load different database connection string depending on dev or prod environment
if (currentEnvironment.IsDevelopment())
{
    connectionString = builder.Configuration.GetValue<string>("DevConnectionString");
}
else if (currentEnvironment.IsProduction())
{
    connectionString = builder.Configuration.GetValue<string>("ProdConnectionString");
}

Something important. After adding/editing system environment variables, make sure to restart Visual Studio. These variables are only loaded during launch of the editor.

Small fixes/updates for NanisuruApp

Fixed a few things on my on-going project NanisuruApp.

Problem#1) To-Do items have the date added and completion date saved in Database as UTC. Stored, retrieved, and displayed as UTC. For a bigger scale app with many users, it is natural to have a user preference saved, and the TimeZone for each specific user kicks in to display the correct time.
I decided to simply hard code this for now, as this is an App used by 2 people…

DateTime adjustedAddedDateTime
{
    get => todoItem.Added.AddHours(9);
    set => todoItem.Added = value;
}

DateTime adjustedCompletedDateTime
{
    get => todoItem.Completed.AddHours(9);
    set => todoItem.Completed = value;
}

Problem#2) When the user adds a link with the To-Do item, if the string is missing http:// or https://, Blazor Uri directs the link to a non-existent location. I thought of messing with the root Uri in the project, but instead I countered this problem by using this code in the razor page.

 @if (!string.IsNullOrEmpty(todoItems.Url))
 {
     @if ((!todoItems.Url.StartsWith("http://", StringComparison.OrdinalIgnoreCase)) && (!todoItems.Url.StartsWith("https://", StringComparison.OrdinalIgnoreCase)))
     {
         modifiedUrl = "http://" + todoItems.Url;
     }
     else
     {
         modifiedUrl = todoItems.Url;
     }
     <a class="text-primary-blue" href="@modifiedUrl" target="_blank">
         <i class="fas fa-link me-3 fa-2x" title="URL"></i>
     </a>
 }

//// Code section
string modifiedUrl;

Nanisuru Webapp updates ウェブアプリ更新

Updated my on-going Blazor Webassembly & Asp.net API to version 2.0 today.
Minor updates that shouldn’t be worthy for a whole step up to 2.0, but 2.1 will have the push notification which is a pretty big deal to me and the app.
– Added auto resizing with image uploading for completed items on the ToDo list.
– Added URL option to reference whatever the action item is.

なにするウェブアプリの更新。一気に2.0にアプデしたけれど、今回のアプデは大した内容ではないけれど、2.1では初めてのプッシュ通知を導入する予定。
今回の更新は:

-画像添付機能を追加 (自動リサイズ後、アップロード)
-URLの貼り付けオプション追加
-編集・完了リストからの画像拡大 (Blazored Modal)
-なにするリストの表示順を上から最新へ変更
-スマホで”まだのリスト”と”完了リスト”のボタンを押すと、文字が黒くなる事象を修正

Blazor wasm: IBrowser resize file after selection

Today’s progress on my webapp.
Working on adding a feature to attach one image to each complete ToDo item.
This way, you could look back and get a glimpse of your memory be it eating or doing some sort of activity.
I’m setting an upload limit of 16mb because my file storage approach is directly storing into Binary with Mongodb.  MongoDB only supports a max of 16megs per Binary.  You could upload bigger files if you use MongoDB’s GridFS.  Besides, I don’t think a photo taken with your smartphone will exceed 16megs anytime soon.

    public async Task HandleFileSelected(InputFileChangeEventArgs e)
    {
        isDisabled = true;
        selectedFile = e.File;

        // Resize the selected image
        resizedFile = await  selectedFile.RequestImageFileAsync(selectedFile.ContentType, 960, 540);

        // Save updated image to byte
        buffer = new byte[resizedFile.Size];

        // Update resizedFile's stream with buffer
        await resizedFile.OpenReadStream().ReadAsync(buffer);

        // Force UI update
        await InvokeAsync(StateHasChanged);
    }


    async void SaveItem()
    {
        if (selectedFile != null)
        {
            if (selectedFile.Size < maxFileSize)
            {

                var ms = new MemoryStream();
                todoItem.FileName = selectedFile.Name;
                await resizedFile.OpenReadStream(maxAllowedSize: 1024 * 1024 * 16).CopyToAsync(ms);
                todoItem.BinFile = ms.ToArray();
            }
            else
            {
                // Alert if file exceeds the limit
                await Swal.FireAsync("ファイルが大きすぎます(最大16mb)", "");
                return;
            }
        }

File uploading challenge with Blazor


After using or should I say testing my webapp on the daily, you realize what would be nice to have for a better user experience.
My NanisuruApp is  a ToDo list, but strictly for family use.
Future plan is to consolidate everything and anything I need into this WebApp.
I got file uploading as binary directly into the database working.
Now to work on thumbnails, and figuring out what to do with HEIC formats

The backend API is set to public on my Github, but this app is still on private.  I plan on sharing it for public after I add a few more tweaks and clean up the code a bit.

なにするアプリに機能を追加して行こう。ということで、身内専用のToDoアプリで完了済みのタスクに思い出用の画像を添付できるようにしたいということで、今日はMongoDBへBinaryとしてデータベースへ直接ファイルをアップロードするという荒い手を使って導入。サーバーへファイルをおいて、ファイルの場所をstringで保存するのが王道らしいけれど、超規模だし一応ScalabilityもMongoFSを使えば大きいファイルも何なりと扱えるらしい。
今日はファイルのアップと表示までかな。
HEICフォーマットはどうする?サムネール化が必要など課題は残る。
バックエンドAPIは一応Githubに公開はしているけれど、まだ追加や修正が必要。フロントエンドのアプリの方の公開はコードのクリーニングと追加したい機能がほぼ終わった段階にしようと思う。