DEV Community: Sefat Anam

Share Data Between Mobile and PWA Apps

Sefat Anam — Tue, 06 Feb 2024 18:13:57 +0000

Hello There,

Alright, let's get straight to the point without too much theory, because there are tons of articles out there that I don't even understand well about how the data sharing mechanism works and what I should code in the frontend. Phew! 🫤

If you're facing the same issue, cheers!

So, let's say you've mostly tackled the PWA part. Now, at some point, you realize you need to add a feature where users can share a YouTube video directly to your PWA app from the YouTube app. What do you do now?

Chill out, here are some simple points to follow:

Note: I did this in the latest Angular project (version 17), but these steps are valid for every framework or library. Believe me, man!

Let go,

Step 1

Basically in every PWA app there is manifest.webmanifest file or have something similar where we declare app's name, theme_color, short_name etc... so go to this file and add a new section share_target like this way,

{
  "name":"YOUR_APP_NAME",
   ...
   ...
  "share_target": {
    "action": "/any-route-you-want",
    "method": "GET",
    "params": {
      "title": "title",
      "text": "text"
    }
  }
}

Some FAQ About share-target:

Why share-target section ?

Because it will make your PWA app available to the mobile's native share list.

Why method GET?

Because your PWA app need a route or any route available, once user share some data to PWA app forward those data to that route.

Whay params and even if you specified title, url ?

So, once PWA forward user's shared data to route it will decode it on the fly and if the shared data I mean here as object's property get matched to your declared params then it will automatically bind those value to your params.

I hope now you clear about the Step-1.

Cool ! Move on.

Step 2

So, the hard part complete. From now changes are framework or library agnostic. Once the Step-1 hapeends successfully then you will get a url with some query-params like this,

http://jingalalapwaapp.com/any-route-you-want?title="You are great"&text="somefunckyurl.com/asdfgh"

Some FAQ About this route:

WTF is going now?

Alright, so imagine you're building a website or app using React, Angular, Vue, or just plain JavaScript (Vanilla JS). Let's say you've set up a route in your project, maybe you named it any-route-you-want.

Now, if someone shares a YouTube video link to your Progressive Web App (PWA), the system automatically decodes the shared data and sends it to that route you declared. When this happens, you can extract useful information from the shared data, like the video ID or other details, from the URL's query parameters.

So, in simpler terms, you're basically setting up a spot in your project where shared YouTube video links can land, and you're ready to catch when they arrive.

Then ?

Now user's shared data on your hand I mean in your code 😂 do whatever you wanna do.

Keep Coding, Peace ✌️

If anything goes wrong please let me know your valueable feedback.

Must-know Javascript object property security

Sefat Anam — Sun, 23 Apr 2023 16:02:11 +0000

Do you know about writable, configurable & configurable these property descriptor in JavaScript ?

The age property in this code serves to store the age of a Member object. By defining the age property with writable, configurable, and enumerable flags set to false, the code is essentially creating a read-only property that cannot be changed or deleted once it has been set. This helps ensure that the age property remains accurate and consistent throughout the lifetime of the Member object, and that it cannot be accidentally or maliciously modified or deleted.

If an attempt is made to modify the age property, as shown in the example code with anam.age=24, the operation will fail silently and the age property will retain its original value. Similarly, attempts to delete the age property with delete anam.age will also fail silently, and the property will continue to exist on the object.

A day in life of a Software engineer (Remote) - Bangla

Sefat Anam — Fri, 24 Feb 2023 06:06:28 +0000

তো সকাল ১০টা থেকে শুরু হয়ে যায় আমার রিমোট জব, আমার মিটিং থাকে ১০ টায় উঠি ৯.৫২ তে যা কিনা একটা বড় সুবিধা রিমোট জবের,মিটিং থাকে ১০-৩০মিনিট তারপরে একটা বিরতি দেই ২০-৩০ মিনিট নাস্তার জন্য ,এরপর শুরু আগামী দিনের PR গুলার স্ট্যাটাস দেখা, সব Merge হয়ে গেলে টেস্ট র্সাভরে টুকটাক টেস্টিং করা তারপর শুরু হয় আসল কাজ অথবা দ্যা বাঘ ভাল্লুক ঠিক করা সোজা যাই জিরা তে টিকিট সোজা দেখে একটা নেই ফরমালিটি সারি তারপর শুরু করি কোড করা, তবে বেশির ভাগ সময় মাইনসের কোড পড়া লাগে মাঝে মাঝে এমনও হয় যে খুব সিরিয়াস Bug কিন্ত অল্পতেই ঠিক করা যায় যদি কোডের Flow টা বোঝা যায় আবার একটা ছোট ফিচার এড করতে গিয়া অবস্থা টাইড হইয়া যায়, তো এর মাঝে দিনে অনেক গুলা মিটিং থাকে টিমের সাথে আবার গ্রুপ কোডিং ও করা লাগে। এর মাঝে দুপুরের খাবারের বিরতি তো থাকেই তো মজার ব্যাপার হইলো বিকালে সব সময় কাজ করি না মাঝে মাঝে ঘুরতে বেড়াই। ঘুরা শেষে রাতে আবার কাজ করি ২ ঘন্টার মতো তো হয়ে যায় আমার ডেইলি

এই আরকি করি সারাদিন..

What you need to extra setup before start to working with Angular ?

Sefat Anam — Mon, 14 Nov 2022 12:20:59 +0000

Hi I'm @sefatanam,

I'm planning to do a open-source project where I will build a Angular template where prettier, eslint, cypress, husky & also translation service will be in pre-configured. So that, Every time I start a fresh (professional)project I don't need to set up this type of config every time.

Here is the repo that I currently working on : https://github.com/nixgram/nixng

So, you can help by commenting, What you need to do for the extra setup before starting an angular project. Please.

Waiting for your feedback.
Thanks

Managing Multiple Environments with Angular and AWS Amplify Made Easy

Sefat Anam — Thu, 19 May 2022 11:23:06 +0000

Today I going to discuss how you can manage a single environment in AWS Amplify & obviously with multiple backends in GraphQL. What does diff based backend mean? In a simple way, Let's say, You start developing an application in the dev branch initially and you entried many dummy data and also have dummy user credentials for test purposes, but now you want to deploy a fresh build into prestage mode this app, Now how you do that? This is the agenda for today. Let’s get into it.

Technology that I am using : Angular, AWS Amplify

Initial Scenario : I suppose you do it well in dev with the aws-amplify setup and rest of the things, like - Add GraphQL api, completing CURD, user Authentication using AWS Amplify auth components also dev deployment. Now you stuck into how you can build a fresh build into a fresh environment without the dev's branch dummy data.

If you are beginner I'm sure that you are frustrated that you can't get solution also after reading the docs. No worries. Here the steps you can go through

1 Step
Check the environment status first amplify status you can saw current environment is set to dev
Here you can note down the GraphQL api endpoint and API KEY, just for later check purpose.

note : If you tried before to create environment before for the same project you can check that's are created or not via the amplify env list.
2 Step
Once you sure about the which environment you are, then you need to create a new environment in aws-amplify, it will be better if you checkout
git branch with a fresh copy of dev, because if any thing goes wrong you can start again from the stage you are going to be start now.
run command 'amplify init`,it will ask you several questions

Answer as follow :
- Do you want to use an existing environment ? - No
- Enter name for the environment - TYPE_YOUR_ENV_NAME_HERE
- Select the authentication method you want to use : AWS profile [ But you can choose another ]
- Choose the profile you want to use - SELECT_CURRENT_USED_PROFILE Then you gonna see "Your project has been successfully initialized and connected to the cloud"
3 Step
- Now try to add api amplify add api you gonna see soon that amplify tell you to go with the update command which is amplify update api
- Run amplify update api, then it will show you some default pre-setuped information & ask you some question to answer. You can answer these as bellow :
  - Select a setting to edit Authorization modes
  - Choose the default authorization type for the API - YOUR_CHOOICE
  - Enter a description for the API KEY : ENTER_THE_GRAPHQL_API_KEY (that you saved earlier)
  - After how many days from now the api key should expire : YOUR_CHOOICE
  - Configure additional auth types ? YOUR_CHOOICE Now run amplify status you can see that all the operations now are in create mode. That's mean you are almost done. ┌──────────┬────────────────┬───────────┬───────────────────┐ │ Category │ Resource name │ Operation │ Provider plugin │ ├──────────┼────────────────┼───────────┼───────────────────┤ │ Auth │ ampyt48e9a487 │ Create │ awscloudformation │ ├──────────┼────────────────┼───────────┼───────────────────┤ │ Hosting │ amplifyhosting │ Create │ awscloudformation │ ├──────────┼────────────────┼───────────┼───────────────────┤ │ Api │ ampyt │ Create │ awscloudformation │ └──────────┴────────────────┴───────────┴───────────────────┘ all the operation are in create mode.
  - now run amplify push it will give an new GraphQL API endpoint and API KEY or you can check it after amplify push then you will able to see the same key it will given. You have to remember that, that's key only for the new environment that you created now not for another environment.
4 Step
- Note : This is crusal part of this blog if you failed here you cant able to do diff based backend. So, try to understand step 4 in cool mind.
- now you have to checkout one more time via 'amplify env checkout ENV_NAME'
- after checkout update the API via amplify update api rest of the things are same as step 3 but here you just need to put this API KEY which you got earlier when you push new environment into cloud the GraphQL API KEY. Just paste it there and go on.
5 Step
- Now push it into cloud by amplify push
- Deploy the frontend amplify publish

Check it out that is it works or not.

If in some end point you got access denied error you can check this solution

Step-by-Step Guide to Building Your First Ionic App with Cordova on Windows

Sefat Anam — Mon, 21 Mar 2022 04:23:53 +0000

One Question - Did you noticed that building apk with cordova have smaller size rather than use capacitor ? know me your feedback !

How to build a Ionic app using Cordova in windows

Prequsites :

Install Andorid studio, JDK (preferd version 1.8), gradle.

Tricks

After installed Android studio build a native hello world app and run it through Emulator or physical device for the first time. It will automatically gives you the support of installing gradle & reduce much time to installing & finding gradle version compability.

Checking this info you can run java --version

java version "1.8.0_321"
Java(TM) SE Runtime Environment (build 1.8.0_321-b07)
Java HotSpot(TM) 64-Bit Server VM (build 25.321-b07, mixed mode)

After install JDK you will get a path in your machine like this C:\Program Files\Java or C:\Program Files (x86) you able to see this two folder path.
```
jdk1.8.0_321
jre1.8.0_321
```

Update environment variable

// Add these in User Variables :

ANDROID_HOME : C:\Users\theanam\AppData\Local\Android\Sdk
ANDROID_PLATFORM_TOOLS : C:\Users\theanam\AppData\Local\Android\Sdk\platform-tools
ANDROID_TOOLS : C:\Users\theanam\AppData\Local\Android\Sdk\tools
JAVA_HOME : C:\Program Files\Java\jdk1.8.0_321

//Add these in System Variables path:

C:\Program Files\Java\jre1.8.0_321\bin  // Otherwise you will get Jarsigner is not recognized internal or external command

C:\Program Files\Java\jdk1.8.0_321\bin // Otherwise keytool is not recognized internal or external command

C:\Program Files (x86)\Common Files\Oracle\Java\javapath
C:\gradle-7.4.1\bin  // If path not found installed it.

Ionic App build stage & Signing unsigned apk

Go to the App Folder
Open terminal in that folder.
Run keytool -genkey -v -keystore HERE_YOUR_KEY_NAME-key.keystore -alias HERE_YOUR_APP_ALIAS_NAME -keyalg RSA -keysize 2048 -validity 10000. You will find a keystore file is generated in your app folder.
Run ionic cordova build android --prod --release --verbose

   After successfully executed this command you will get a message like this,
   Built the following apk(s):
       D:\xyz\ion-cordova\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk

   It generate an unsigned apk that you never install in a phone so need to sign this apk.

Run jarsigner --verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore HERE_YOUR_KEY_NAME-key.keystore "D:\xyz\ion-cordova\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk" HERE_YOUR_APP_ALIAS_NAME it will start signing this apk.

Now you are happy to go with the APP.

Signing Off
Sefat

Startup guide of Jest for testing your javascript code. (Beginner)

Sefat Anam — Sun, 06 Mar 2022 08:52:00 +0000

The purpose of writing this article is to clarify that when a newbie learns javascript he goes through many concepts. But he doesn't know how to test code or doesn't have any idea about code testing. Today, I will make you understand how you can start learning javascript as well as writing test code also. So that, from the start phase you are confident about your code.

Today's Topics

create package.json
intalling jest via npm
configuration for running test
write function & test it.

Don't be panic, this article is very practical.

Step 1 : Create package.json

What is package.json ?
Metadata that is specific to the project. It contains a collection of any given project's dependencies. A web application is used to identify the project and acts as a baseline for users and contributors to get information about the project

To create a package.json you must have to install nodejs on your machine that's all. If you don't have nodejs installed go to this website and install it. Then open an empty folder in vs code, open terminal type npm init -y. After executing this command you can see a file is created named package.json. 😀 Dig more into understanding package.json click here

Step 2 : Install jest via npm

This is the simpliest way through this step. go go the existing terminal and type npm install --save-dev jest.

Step 3 : Configuration for running test

update your package.json's scripts section like this,

 "scripts": {
       "test":"npx jest --watchAll"
  },
  "jest": {
    "testEnvironment": "node"
  },

That's all for now.

Step 4 : writing function & test it

Make a file like script.js
Also make a file script.test.js

For example,

scripts.js

function sum(a, b)
{
    return (a + b);
}

module.exports = sum;

script.test.js

const sum = require('../script')


test('Sum of (1,1) = 2', () =>
{
    expect(sum(1, 1)).toBe(2);
})
test('Sum of (2,3) = 5', () =>
{
    expect(sum(2, 3)).toBe(5);
})

test('Sum of (3,7) = 10', () =>
{
    expect(sum(3, 7)).toBe(10);
})

After writing your function & tests code. Go to terminal and run npm run test. You can watch something like this ,

Cool 😎 huh !
Yes, now you got the point that I want to share with you.
From today try to build up writing tests for your code & understand your code better. 💖

Signing off.
Sefat

Easy Guide to Azure Blob Storage for .NET Developers

Sefat Anam — Fri, 10 Sep 2021 05:25:52 +0000

What is Azure Blob Storage ?

Azure Blob storage is Microsoft's object storage solution for the cloud. Blob storage is optimized for storing massive amounts of unstructured data. Unstructured data is data that doesn't adhere to a particular data model or definition, such as text or binary data.

Why Azure Blob Storage ?

Serving images or documents directly to a browser.
Storing files for distributed access.
Streaming video and audio.
Writing to log files.
Storing data for backup and restore, disaster recovery, and archiving.
Storing data for analysis by an on-premises or Azure-hosted service.

All of above theory from Microsoft's Documentations about Blob Storage . Now Let get into the point ,

Today we will go fast forward to see how its works rather than knowing too deep architecture, its pretty straight forward for visualize the work flow of azure blob storage.

What we will learn today ?

Today we will store a image to blob storage and retrieve it using NET5 web project.

Ingredient's

Visual Studio Code
NET5 SDK
Azure Account *Its Free for 1 month

To Continue further steps sign up in Azure.

Azure Blob Storage Setup

After creating Azure Account , Open Azure Portal . In the homepage will will notice a icon named "create a resource" click it.

You will see a search bar there you type "Blob" & hit in "Storage Account" , create a storage account & set a storage account name. here I set my storage name is "blobazdemo"

So if everything goes well you will get validation passed message then create storage & waiting for deployment.

After complete deployment, Go to resource and find container option from resource side nav options. Create a container inside it to store out images. Here I set my container name is "azdemo"

Here the last steps, now we need connection string to connect our blob storage container to our API project. To again from your resource side nav option find out "Access key" follow the steps and copy the "connection string".

That's all for now to working with azure blob storage.

Web Project Setup

We mainly focus on how we can store image in blob storage not making a fancy application. I recommend you to create 'webapp' or 'webapi' using dotnet cli its up to you.

Check available command to create new project

dotnet new --list

Now you can create your dotnet project by using this command schema,

dotnet new <TEMPLATE> [--dry-run] [--force] [-lang|--language {"C#"|"F#"|VB}]
    [-n|--name <OUTPUT_NAME>] [-o|--output <OUTPUT_DIRECTORY>] [Template options]

We will make a Service for responsible to store & retrieve image in azure blob storage, so before start making service we need to add a Nuget package in our project. By following,

dotnet add package Azure.Storage.Blobs --version 12.10.0

Know More About Azure Storage Blob Nuget Package

Let Jump into coding part 😀

Update your startup.cs by following,

  services.AddSingleton(x => new BlobServiceClient(PUT_YOUR_BLOB_CONNECTION_STRING));

Create a service class in my case I named it BlobService. You can set any name you want. Then Inject BlobServiceClient which is provid by Azure.Storage.Blobs.

 public class BlobService 
    {
        // BlobServiceClient from 'Azure.Storage.Blobs' package
        private readonly BlobServiceClient _blobClient;

        public BlobService(BlobServiceClient blobClient)
        {
            _blobClient = blobClient;
        }
}

Let fetch data from blob storage. its pretty straight forward.

 public async Task<IEnumerable<string>> AllBlobs(string containerName)
        {
            // allow us to get access to data inside container
            // in our senario 'containerName' will be 'azblob'
            var containerClient = _blobClient.GetBlobContainerClient(containerName);
            var files = new List<string>();
            var blobs = containerClient.GetBlobsAsync();
            await foreach (var item in blobs)
            {
                files.Add(item.Name);
            }
            return files;
        }

Upload Image into blob storage

        public async Task<bool> UploadBlob(string name, IFormFile file, string containerName)
        {
          // in our senario 'containerName' will be 'azblob'
            var containerClient = _blobClient.GetBlobContainerClient(containerName);
            // checking is current file is exit; if exit then ovverrite
            var blobClient = containerClient.GetBlobClient(name);

            var httpHeaders = new BlobHttpHeaders()
            {
                ContentType = file.ContentType
            };

            var res = await blobClient.UploadAsync(file.OpenReadStream(), httpHeaders);

            if (res != null) return true;
            return false;
        }

Here The Complete Code of Service

Now, We should trigger these method from controller right. Get into it, Post an image through API. [ Here I used basic mvc app to also display updated image ]

 [HttpPost]
        public async Task<IActionResult> AddFile(IFormFile file)
        {
            if (file == null || file.Length < 1) return View();
            var fileName = Guid.NewGuid() + Path.GetExtension(file.FileName);
            var res = await _service.UploadBlob(fileName, file, "azdemo");

            if (res) return RedirectToAction("Index");

            return View();
        }

After Successfully Posting image via API go to Azure Portal and open azdemo container you can see their a image file is created.

Click on the view from given options.

Finally your image is there.

Here The Complete Code of Controller

That's all for today. Hope now you can easily complete rest of the functionality your self.

Happy Coding
I’m Sefat Anam
Full-Stack Developer ( Angular, .NET )
Email: sefatanam@outlook.com