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に公開はしているけれど、まだ追加や修正が必要。フロントエンドのアプリの方の公開はコードのクリーニングと追加したい機能がほぼ終わった段階にしようと思う。

Blazor webassembly’s PWA

I was going to start working on migrating my Blazor Webassembly App to .NET MAUI in order to use it more conveniently on my IOS device, but I totally forgot about the PWA feature.  Following the official and well documented microsoft’s guide allowed me to easily enable PWA on my app.
It’s working like magic!

ASP.NET Core Blazor Progressive Web Application (PWA)

今開発中、というより随時機能追加や微調整中のアプリを今後iPhoneで使うために.NET MAUIへのコード移行を考えていたけれど、Blazor WebassemblyはPWAという素晴らしい機能が使えるのを完全に忘れていた。
今日はマイクロソフトのオフィシャルサイトのドキュメントを見てちょいちょいコードをいじって無事携帯からアプリ画面経由でアプリを開くことに成功。
素晴らしい。Apple Developerの登録や、アプリの審査とか不要なので便利!

Plans and fixes for Nanisuru Webapp.


I finished an unsatisfactory state of my webapp Nanisuru (ToDo), and already have some improvements and fixes I need to start working on.
Also excited for some new features which I have never implemented.  Should be a challenge, but good material to set new grounds.
Did some planning and brainstorming on how to approach my trello list today.

Some UI updates to my webapp

Been doing some small UI updates and code fixes for my Blazor WASM webapp.  I decided to maintain, and add more features while also preparing a adhoc private distribution of the IOS version using the .NET MAUI Blazor framework.  Most code should run as is, but stuff like local storage needs to be modified to fit IOS’s secure storage.

Blazor webassembly base path issues.

If you’re uploading your blazor wasm project on a subdirectory on your host, you have likely hit a problem where you had to edit the <base href> in wwwroot/index.html to adjust.  But after you do this, launching the project on your local machine turns up with a path problem.
I had to edit the base href parameter each time to test locally, but there’s a sweet fix for this thanks to this post

Simply replace <base href> in index.html with the below:

<base />
<script>
var path = window.location.pathname.split(‘/’);
var base = document.getElementsByTagName(‘base’)[0];
if (window.location.host.includes(‘localhost’)) {
base.setAttribute(‘href’, ‘/’);
} else if (path.length > 2) {
base.setAttribute(‘href’, ‘/’ + path[1] + ‘/’);
} else if (path[path.length – 1].length != 0) {
window.location.replace(window.location.origin + window.location.pathname + ‘/’ + window.location.search);
}
</script>

Screenshot taken in case link goes bad:

 

Progress on my personal ToDo app

Last year I created a personal ToDo app using Xamarin, and released it privately.  This year, I wanted to experience Blazor.  I decided to re-code the backend API handling database CRUD functions and get my hands dirty with Blazor Webassembly.
I kept things simple as possible, yet tweaked some stuff around to get a better understanding of the code instead of watching/reading an article and just slapping the code on.
Interface is prototype-ish.  Figured I’ll get my app running and then update as I go.

Dones:
– Asp.net Backend API hosted and ready to go.
– JWT Token, and expiration/validity check in place.
– Secure token in localstorage.  (Decided to use localstorage, instead of httponly cookie this time around)

Todos:
– Add, Edit, Delete function.
– Archive page to browse past, completed ToDos.

Environment Variables -> AWS Parameter Store

After contemplating wether to use Azure’s vault, or AWS’s Secrets Manager, I’ve ended with the choice to use AWS’s Parameter Store.
Simple and clean.

– NuGet required (Amazon.Extensions.Configuration.SystemManager

For the minimal setup this is all you need in your Program.cs
builder.Configuration.AddSystemsManager(“PATH”, TimeSpan.FromDays(X));

I’ve safely stored the DB connection strings, and a few other sensitive data successfully.