Looking for a Full-stack developer for a Sri Lankan base software company

Pure PHP Firebase JavaScript CSS3 & HTML5 AWS & GCP Knowledge

contact us : 0718968967 (Chandima Galahitiyawa)

spring AOP කරනකොට මේ error එක එනවා applicationContext.xml file එකේ තියෙන මේ <bean class="org.springframework.aop.aspectj.annotation.AnnotationAwareAspectJAutoProxyCreator"></bean>

line එකෙන් මොකද කරන්න ඔනි?

log4j:WARN No appenders could be found for logger (org.springframework.context.support.ClassPathXmlApplicationContext).
log4j:WARN Please initialize the log4j system properly.
Exception in thread "main" org.springframework.beans.factory.CannotLoadBeanClassException: Cannot find class [org.springframework.aop.aspectj.annotation.AnnotationAwareAspectJAutoProxyCreator] for bean with name 'org.springframework.aop.aspectj.annotation.AnnotationAwareAspectJAutoProxyCreator#0' defined in class path resource [applicationContextFile.xml]; nested exception is java.lang.ClassNotFoundException: org.springframework.aop.aspectj.annotation.AnnotationAwareAspectJAutoProxyCreator
at org.springframework.beans.factory.support.AbstractBeanFactory.resolveBeanClass(AbstractBeanFactory.java:1208)
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.predictBeanType(AbstractAutowireCapableBeanFactory.java:570)
at org.springframework.beans.factory.support.AbstractBeanFactory.isFactoryBean(AbstractBeanFactory.java:1277)
at org.springframework.beans.factory.support.AbstractBeanFactory.isFactoryBean(AbstractBeanFactory.java:844)
at org.springframework.beans.factory.support.DefaultListableBeanFactory.preInstantiateSingletons(DefaultListableBeanFactory.java:544)
at org.springframework.context.support.AbstractApplicationContext.finishBeanFactoryInitialization(AbstractApplicationContext.java:728)
at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:380)
at org.springframework.context.support.ClassPathXmlApplicationContext.<init>(ClassPathXmlApplicationContext.java:139)
at org.springframework.context.support.ClassPathXmlApplicationContext.<init>(ClassPathXmlApplicationContext.java:83)
at aspectdeclaresasaspect.Test.main(Test.java:10)
Caused by: java.lang.ClassNotFoundException: org.springframework.aop.aspectj.annotation.AnnotationAwareAspectJAutoProxyCreator
at java.net.URLClassLoader.findClass(URLClassLoader.java:382)
at java.lang.ClassLoader.loadClass(ClassLoader.java:418)
at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:355)
at java.lang.ClassLoader.loadClass(ClassLoader.java:351)
at org.springframework.util.ClassUtils.forName(ClassUtils.java:258)
at org.springframework.beans.factory.support.AbstractBeanDefinition.resolveBeanClass(AbstractBeanDefinition.java:408)
at org.springframework.beans.factory.support.AbstractBeanFactory.doResolveBeanClass(AbstractBeanFactory.java:1229)
at org.springframework.beans.factory.support.AbstractBeanFactory.resolveBeanClass(AbstractBeanFactory.java:1200)
... 9 more

alt text

86aa4aa8-a9d3-4749-b5a4-c1205a4372a0-image.png

download.png

We are looing for dotnet Engineers with 1-2 year experiences.

Skills
ASP.NET
SQL
MVC

Email your cv- [email protected]

32099fab-0e7e-4ca4-9950-4af807bdddd1-image.png

Introduction

In one of my Vue projects, I needed to generate word documents with different templates. I did a small R&D and came across several libraries and APIs to achieve this. All of them were not free and we have to buy a subscription which is very expensive for me. The available free libraries used an approach where we have to design the template with HTML first and then render them as a word document. This approach did not fit my need as there were many templates and they could frequently change as per the client’s need.

Finally, I came across a great library ( which was the only library available on the Internet) to generate word documents from a given template that includes tags that can be replaced with contemporary data when generating the report. It was a JavaScript library but my Vue project was in Typescript.

In this article, I am going to explain how to implement this feature easily with Vue.JS project in TypeScript. If you are new to Vue with TypeScript, please follow this article explaining how to create a new Vue.JS project in TypeScript. The others can proceed.

Installing necessary libraries

For generating the word document we use docxtemplater library by Edgar Hipp. First of all, run these commands in the console inside your project folder.

npm install --save docxtemplater npm install --save [email protected] npm install --save jszip-utils npm install --save file-saver

In addition to the main library, we need the other libraries mentioned above in this process. File saver library is used to save the final output to the local machine.

Writing definition files for TypeScript

Some JavaScript libraries cannot be directly used in a TypeScript project if they do not include a type definition file for TypeScript. Type definition files usually appear as <libraryName>.d.ts and you can check if there is a such file in the installed library in the node_modules folder of the project.

Except for the docxtemplater library, the other three libraries do not include such definition files. Therefore, we have to write definition files for them separately by our own. These files are created, named according to the structure <libraryName>.d.ts and placed inside the src folder.

jszip.d.ts

declare module "jszip" { import jszip from 'jszip'; export default JSZip; }

jszip-utils.ts

declare module "jszip-utils" { import JSZipUtils from 'jszip-utils.js'; export default JSZipUtils; }

file-saver.d.ts

declare module "file-saver" { import { saveAs } from 'file-saver'; export default saveAs; }

After creating these files in the src folder, you can use these in any component.

Submitting the templates

First, you have to place your template document that is composed of tags, inside the public folder of the Vue project. The tags are written inside two curly brackets. ex:- {full_name} .

For this explanation, I have created my sample template and placed it inside a separate folder inside the public folder ( public → ReportTemplates → template-1.docx ).

c989cdcc-110d-4fd4-aa99-ef8cca51ad70-image.png

All inside the {} are tags and they are replaced by the JSON dataset provided when rendering. The tag name and the property name in the JSON object must be similar to run a replacement for a tag.

{#students}……{/students} inside a row of a table represents a list named “students” in the JSON object which we are going to provide when rendering.

For this example, this is the JSON dataset we will provide.

{ "students": [ { "first_name": "Udith", "last_name": "Indrakantha", "phone": "+94760000000" }, { "first_name": "Chamal", "last_name": "Silva", "phone": "+94760000001" }, { "first_name": "Tharindu", "last_name": "Jayasinghe", "phone": "+94760000002" }, { "first_name": "Sanindu", "last_name": "Rathnayake", "phone": "+94760000003" }, { "first_name": "Pramodi", "last_name": "Samaratunga", "phone": "+94760000004" }, { "first_name": "Samanthika", "last_name": "Rajapaksha", "phone": "+94760000005" } ], "creater_name": "Udith Gayan Indrakantha", "created_date": "22/12/2020", "header": "Some Students' Details" }

Writing the component

This is how my final component code appears. When I click the button, it downloads the final word document in docx format with the hardcoded dataset in JSON format. Normally, you should call your back-end API and fetch this dataset for the report.

<template> <div> <button @click="getDoc">Download Word Document</button> </div> </template> <script lang="ts"> /* eslint-disable */ import { Component, Prop, Vue } from "vue-property-decorator"; import docxtemplater from 'docxtemplater'; import JSZip from 'jszip'; import JSzipUtils from 'jszip-utils'; import saveAs from 'file-saver'; @Component( { components: { } } ) export default class ReportComponent extends Vue { getDoc() { this.createAndSaveDocument(); } loadFile(url: any,callback: any){ JSzipUtils.getBinaryContent(url,callback); } createAndSaveDocument(){ /* * This required JSON dataset must be fetched from the backend API. * The tags in the template will be replaced by these data. * For demonstrations, I have hardcoded the tesdt dataset */ let dataset = { "students": [ { "first_name": "Udith", "last_name": "Indrakantha", "phone": "+94760000000" }, { "first_name": "Chamal", "last_name": "Silva", "phone": "+94760000001" }, { "first_name": "Tharindu", "last_name": "Jayasinghe", "phone": "+94760000002" }, { "first_name": "Sanindu", "last_name": "Rathnayake", "phone": "+94760000003" }, { "first_name": "Pramodi", "last_name": "Samaratunga", "phone": "+94760000004" }, { "first_name": "Samanthika", "last_name": "Rajapaksha", "phone": "+94760000005" } ], creater_name: "Udith Gayan Indrakantha", created_date: "22/12/2020", header: "Some Students' Details" }; /* * * The template's path must be passed as an arguement . * This path can be either a URL(as in the commented line) or a path relative to the Public folder * For testing, I have created a folder named "ReportTemplates" inside the public folder and it contains my sample * template named "template1.docx" . * */ // this.loadFile("https://docxtemplater.com/tag-example.docx",function(error: any,content : any){ this.loadFile('ReportTemplates/template-1.docx',function(error: any,content : any){ if (error) { throw error }; let zip = new JSZip(content); let doc = new docxtemplater().loadZip(zip) doc.setData(dataset) try { doc.render() } catch (error) { let e = { message: error.message, name: error.name, stack: error.stack, properties: error.properties, } console.log(JSON.stringify({error: e})); // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object). throw error; } // docx generating let out = doc.getZip().generate({ type:"blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", }) saveAs(out,`MyDocument.docx`); // You can pass this blob to a custom file saver component in the project. }); } } </script> <style scoped lang="scss"> </style>

n line 82, for the loadFile function’s first parameter, you can give the path of the template relative to the public folder.

Or

As in line 81 (commented), you can pass a URL too. This can be from a server or a cloud storage too.

JSUtils library is used here to read the binary content from the template document and prepare it in a way that can be zipped. JSZip library is used to create the zipped content . The docxtemplater library requires the template as a zipped content. That is why we use other two libraries in the process.

In line 89, you can see that I have set the JSON dataset to the document. This dataset can be as mentioned earlier, from an API.

In line 113, saveAs function exported in file-saver.js library, has been used to download the blob with a given file name ( here it is MyDocument.docx ).

I have put some useful comments too in the above code, so that you can modify the code as you wish.

Final Output

After submitting the templates, creating the definition files, and writing the Vue component, we can download the nice word document below.

a8d9cf13-026e-49e3-9fee-415db484e46f-image.png

........

What else can we do with this library?

Only word documents with “.docx” can be generated in the free version. ( commercial version supports for pptx and xlsx generation too)

The free version supports the features below, which are sufficient to generate good looking impressive reports in your project.

Filling data in tables ( As in the example we discussed)

Repeating a section in the word document with a given list of objects. (Loops)

Conditional Rendering of tags by enabling the angular parser option.

Creating a loop-list

You can test these features at the Demo Section of their official page.

Conclusion

I explained how to use this docxtemplater library with a Vue.JS project in TypeScript. With this approach, the frequent changes of the templates can be accommodated while the tag names are kept unchanged . This is one of the most advantageous libraries I have come across so far and I am sure it will be same for you one day.

If you have any issue or a question regarding this, please do not hesitate to use the comment section.

Thank you for reading & happy coding!

..................................

If you have any difficulty in reading this here, please visit my article on medium.

මම ගොඩක් අලුත් කෙනෙක් Laravel වලට , අලුතෙන් Develop කරන්න හිතන් ඉන්න , ERP system එකකට ගොඩාක් match වෙන්නේ Laravel livewire use කරන එකද නෙත්තම් vue .js use කරන එකද
ඒ දෙකේ වාසි අවාසි පැහැදිලි කරලා දෙන්න පුලුවන්ද

Please forward your CVs to [email protected]

45C6AB9D-7961-4C18-B2D7-BFDB09600E13.jpeg

woocommerce store එකක cart and checkout page එක HTML ,CSS ,JS ,PHP use කරලා customize කරන්නේ කොහොමද?

669f5998-72b9-4224-a43e-4b4b67913e81-image.png

අලුතෙන් Flutter ඉගෙනගන්න ආස අයට අලුත්ම විදිහේ series එකක්. In this new series, Chathu will be teaching Flutter to Pubudu who is a React Native developer and know nothing about Flutter!

Link

1d7e0de5-8145-4a21-b10c-7d8780d88949-image.png

අලුතෙන් Flutter ඉගෙනගන්න ආස අයට අලුත්ම විදිහේ series එකක්. In this new series, Chathu will be teaching Flutter to Pubudu who is a React Native developer and know nothing about Flutter!

Link

195017797_10221746422583428_7758435849010705521_n.jpg

The course can be done in English or Sinhala medium based on the student's request.

Screenshot_6.png
The session will focus on the advantages of developing Progressive Web Apps and what key technical factors play a role in converting a normal JS Web App into a PWA.

Live

Introduction

At times when developing applications, we may come across scenarios where the data sent to a server via http has to be verified to check whether the data has been manipulated when traveling across the wire to the server. This verification is required to check for the authenticity of the data.

Today, let us discuss about how to digitally sign data, often referred as DigitalSignature, and verify the DigitalSignature and data sent to a server using azure key-vault certificate and C#. This DigitalSignature can be then sent along with the data as a part of the request header or by other means according to the usage.

Keywords

DigitalSignature – the data that’s digitally signed using a certificate

Data – the message or document sent to a server via http post request most often

Azure key-vault – a service provider in the cloud that provides a secure store for secrets.
Read more on azure key-vault at
https://azure.microsoft.com/en-us/services/key-vault/

Pre-requisites

• Have some basic understanding about azure
• Understanding of asymmetric cryptography
• Working knowledge in C#
• Azure subscription

1. Setting up an Azure key-vault certificate

In this section lets us create a certificate on azure key vault.

First, create an azure key-vault resource, if you already have a Key-Vault resource you can use it.

In the left menu, under the “Settings” section select “Certificates”.


Once navigated to the certificate section, click on “Generate/Import”

The above action will take you to the page where it allows you to create or import a new certificate. Since we are creating a new certificate, select “Generate” from the “Method of Certificate Create” dropdown, and fill in the fields. Most of them can be left to the defaults selected. DON’T click on Create yet.


Once you come to the bottom of the form, click for the highlighted section as shown in above image. This will open a side bar to configure the policies. Please make sure that you select the required policies from the drop down as you cannot change them once the certificate is created. As for this certificate, we need the “Digital Signature” selected under “X.509 Key Usage Flags”.



In addition, please check all the flags in order to avoid problems from other features that may be required. You can also select the “Key Size” according to your need.

Finally, click “Ok”, and click on create button. This will create the certificate and it will take few minutes for the certificate to enable.


2. Configuring Access to Azure Key-Vault Using Active Directory
In order to use the certificate for signing and verifying the signed data from code we need to be authenticated in order to access the certificate.
In this section let’s understand how to configure an Active Directory app to access the certificate from code.

• Create an Active Directory app

Go to “Azure Active Directory” in the azure portal menu.

Select “App Registrations”, then click on “New registration” to add a new application providing a meaningful name.


Once the app has been created it will appear in the list as below. Copy the Application (Client) ID as it is required in the future.


Now navigate into the application details by clicking in the name of the app to generate a client secret. Click on the “Certificates and secrets” and then click on “+ New Client Secret”


Once the client secret is generated copy and have it pasted in a secure place along with the Application (Client) Id

Now navigate back to the azure key-vault resource that you created and click on “Access Policies”, then click on “Add Access Policy”.


This will take you to the “Add access policy” page to setup access policies.

Now let’s configure policies.

• From the “Configure from template (optional)”, select the highlighted ones according preference.


• Similarly select the “key permissions”, “secret permissions” and “certificate permissions” accordingly. As in this case it has to be “certificate permissions”.
• From the “Select Principal”, select the name of the Application that we registered with Active Directory. In case the app doesn’t appear in the list, search the name of the application that was used to register with Active Directory.


In this case the name of my Active Directory Application is “CFS-key-vault’. Select the proper application and click on “Add”.

Now this application’s Client-Id and Client-Secret can be used to access the certificate, sign and verify data from code.

3. Connecting to Key-Vault From Code
In this section let’s connect to the azure key-vault using the KeyVaultClient which is in the namespace Microsoft.Azure.KeyVault. The name space is also available as a nuget package at [https://www.nuget.org/packages/Microsoft.Azure.KeyVault/](link url)

Let’s look at the code

public KeyVaultClient GetAzureKeyVaultClientInstance() { var keyVaultClient = new KeyVaultClient(new KeyVaultClient.AuthenticationCallback(AuthenticateClient)); return keyVaultClient; } private async Task<string> AuthenticateClient(string authority, string resource, string scope) { var clientCredential = new ClientCredential("<your active directory application (client) Id>", "<the client Secret of the active directory app>"); var authenticationContext = new AuthenticationContext(authority); var result = await authenticationContext.AcquireTokenAsync(resource, clientCredential); return result.AccessToken; }

• In the above code, the method GetAzureKeyVaultClientInstance(), returns an instance of a KeyVaultClient once the authentication is successful.
• The KeyVaultClient constructor takes in an instance of the KeyVaultClient.AuthenticationCallback() delegate as a constructor parameter which has a callback function AuthenticateClient.
• The private method AuthenticateClient() takes in three arguments as shown in the code.
• You must pass the active directory application client Id and client secret as parameters to the ClientCredential instance as constructor parameters in the private method AuthenticateClient().
• The rest of the code is self-explanatory.
• If the authentication is successful the GetAzureKeyVaultClientInstance() method will return an instance of a KeyVaultClient, else it will throw unauthorized exception.
• Now that we have an instance of the KeyVaultClient, we can use it to sign and verify signed data.

4. Signing and Verifying Signed data using the certificate
In this section lets he how to sign and get the signed data verified using the certificate in azure key-vault.

• Let us first sign data using the certificate.

Let’s walk through the code below

public async Task<ValueTuple<byte[], string, byte[]>> GetSignedResultAsync(string model) { try { var encodedToBytes = Encoding.UTF8.GetBytes(model); var digest = Hasher.GetSHA256Digest(encodedToBytes); using (var keyVaultClientInstance = azureKeyVaultClient.GetAzureKeyVaultClientInstance()) { var signedData = await keyVaultClientInstance .SignAsync(keyIdentifier: "<your azure key vault certificate key identifier>", algorithm: JsonWebKeySignatureAlgorithm.RS256, digest: digest); return (signedData.Result, signedData.Kid, digest); } } catch (Exception e) { throw new OperationFailedException("some error message"); } } The method GetSignedResultAsync() takes in string parameter which is a JSON serialized representation of the data intended to sign. The serialized JSON is the encoded using the Encoding which is in the namespace System.Text. Here in this example I have used UTF8, you can use other options as well. Then the encodedToByte variable is passed to a hashing function. In this case SHA256 which will return a hashed value which is referred to as a digest. Then in the using statement we can make use of the KeyVaultClient instance that was return after authorization to the azure key-vault. In the above code I have used a function to get an instance of the KeyVaultClient. Since the KeyVaultClient instance implements the IDisposable interface it is wrapped in a using statement. Now on the KeyVaultClient instance we can invoke the SignAsync() method on it.
 The azure key vault key identifier is the identifier of the certificate. You can find the key identifier as shown below.

 Go to you key vault resource. Click on “certificate” in the left blade, then navigate to a certificate you are interested in.


 From here navigate into the certificate version.



Now, scroll down to the bottom of the page to get the key identifier of the certificate


• The green highlighted area provides key identifier. Copy the key-identifier and past it for the keyIdentifier argument of the SignAsync() of the KeyVaultClient instance.

Now, pass the algorithm and digest as the second and third arguments of the SignAsync() method respectively. The SignAsync() will return a KeyOperationResult which has a property Result it. This Result is the DigitalSignature that was signed by the certificate in azure key-vault.


• Now we can verify the digital signature against the original model. Let’s see how.
Lets walk through the code snippet below

public async Task<bool> VerifySignedResultAsync(string algorithm, byte[] digest, byte[] signedResult) { using (var keyVaultClientInstance = azureKeyVaultClient.GetAzureKeyVaultClientInstance()) { var isVerified = await keyVaultClientInstance .VerifyAsync(keyIdentifier: "<your azure key vault certificate key identifier>", algorithm: algorithm, digest: digest, signature: signedResult); return isVerified; } }

• First, we need an instance of KeyVaultClient class. You can follow the steps explained above to get this done.
• VerifySignedResultAsync() takes in 3 arguments.

The first argument is the algorithm. Its mostly the same algorithm which is used to sign the data. The second argument is the digest. The digest is the same as explained above, which is the JSON serialized string hashed using SHA256. The third argument is the DigitalSignature or the signed result.

• The KeyVaultClient instance has a method VerifyAsync() which will take in the arguments passed to the VerifySignedResultAsync() method and the key identifier of the certificate. The VerifyAsync() will return a Boolean true if the signed data and the digest match, else will return false.

That’s it. Hope you have had a better understanding on how to sign and verify signed data and are able to apply to your application when needed.
Thanks.

Looking for web developer for single project.
Budget : 1500$
Duration : 2 months
Required web scrapping knowledge

Whatsapp - 071 480 1966 (text me)

woocommerce store එකකට custom checkout and payment දෙකම කරන්න පුළුවන් plugin එකක් හදා ගන්න පුළුවන් step ටික දන්නවද ?

මේක 3 step subscription එකක් තියෙන්නේ
1.total cost /quantity pick
2.payment/billing stage
3.email confirmation

c0b39597-f398-4b35-a93f-858ec8580e2f-image.png

Mobile Game Development with Unity an event by American Center and U.S. Embassy Colombo, Sri Lanka ....