Software Archives - Bistec Global Services - Services enabled, digitally!

Blog Category: Software

Accelerated Mobile Pages for Fast Loading Web Pages

April 10, 2022

Are you looking to make fast-loading web pages for your business? 

The faster your page loads, the longer visitors spend time on your website. Here is a new framework that makes the loading time of your web page 10X faster. This amazing technology is AMP or Accelerated Mobile Pages. AMP optimizes a web page’s loading speed time to just a few seconds.   

What is AMP? 

AMP is an open-source HTML framework developed by the AMP Open-Source Project. Google created it as a competitor to Facebook Instant Articles and Apple News. It is optimized for mobile web browsing and designed to help web pages load faster. And AMP pages can be cached by a CDN, such as Microsoft Bing or Cloudflare’s AMP caches, allowing pages to be served speedily. 

Why AMP? 

Usually, mobile pages have problems like slow loading, unresponsive pages and content displaced by ads et cetera. Studies show that, 

  • 75% of mobile pages take 10+ seconds to load. 
  • 53% of mobile site visitors leave after 3+ seconds of loading time 

Maintaining a fast mobile website to overcome these problems on your own often requires large development teams or specialized skill sets.

AMP helps to overcome these issues as a smart solution. It does not require a large development team budget. And to top it off, it is compatible with all modern browsers!

With AMP you can have, 

  • A compelling user experience with near-instantaneous loading and smooth scrolling
  • 2X more mobile ad revenue for sites that load in 2 seconds vs 19 seconds

For developers and publishers, it creates opportunities for distribution on Google, Bing, Twitter, LinkedIn, Pinterest etc.

AMP Structure 

Accelerated Mobile Pages are built of 3 components – AMP HTML, AMP JS, and AMP Cache.

AMP Cache helps with validating AMP pages with fetched cache.  AMP is component-based and is not dependent on any special tooling. All components are with Standard HTML, CSS & JS.

AMP provides a static layout and minimum size stylesheet with inline & size-bound CSS.  

“Hello World” with AMP 

AMP site structure

Authored by Evantha Harshana @ BISTEC Global

Power Virtual Agent

April 10, 2022

Power Virtual Agents from Microsoft allow you to develop intelligent chatbots that can answer questions from users, consumers, and even workers in many languages, allowing you to automate customer service and team management activities.

What is the most attractive feature of Power Virtual Agents?

No programming is needed!

It is also called low code – no code concept as you may incorporate these bots into your processes without the assistance of any data science or engineering staff. This ensures fewer outgoings and none of the complicated code that is expected when integrating this technology.

Within this blog let’s discover how Power Virtual Agents make things easy to connect with consumers in a variety of settings.

Contents

  1. What is Virtual Agent?
  1. How can we use PVA?
  1. Advantages of PVA
  1. Real-world examples
  1. Understanding Power Virtual Agent chatbot in detail
  1. Implementing a chatbot
  1. Conclusion

1. What is Virtual Agent?

Power Virtual Agents from Microsoft are intelligent chatbots that respond to inquiries from clients, customers, and team members without the need for human interaction. Rather than dealing with staff communications constantly or paying a large customer care crew to speak with customers, you may create smart bots that handle all of the jobs for you.

Chatbots are growing more popular for businesses of all sizes. According to research, by the end of 2021, 85 percent of customer contacts will be conducted without the use of human agents. And chatbots can lower operating expenses in an organization by up to 30 percent.

Power Virtual Agents, on the other hand, are even more beneficial to organizations due to their integration with so many other programs, services, and connections in the Microsoft ecosystem. Power Virtual Agents, which are part of the Power Apps package, sync with numerous technologies to facilitate interactions across many platforms. For example, Microsoft Teams. When Power Virtual Agents and Teams are combined, you can automate chats with teammates and solve problems rapidly.

2. How can we use PVA?

Power Virtual Agents enables you to build intelligent chatbots that can respond to inquiries provided by customers, other workers, or visitors to your website or business.

These bots may be simply constructed without the assistance of data scientists or engineers. Power Virtual Agents bots have been utilized in a variety of ways, including,

  • To track COVID-19 infection rates and other information
  • To establish support for Sales and other issues.
  • Opening hours and store information
  • Employee health and vacation benefits
  • Common employee questions for businesses

Power Virtual Agents is accessible as a standalone web app as well as an inbuilt app in Microsoft Teams. Most of the features are similar across the two. However, depending on how you want to use Power Virtual Agents, there may be distinct reasons to select one version over the other.

3. Advantages of PVA

  • No coding required
  • Use of graphical interface to easily integrate a powerful chatbot
  • Able to integrate with hundreds of pre-built connectors
  • Compatible with a large number of platforms
  • Able to connect custom workflows to automate the bot
  • High accuracy
  • Low labour cost

4. Real-world examples

 Miami Dolphins

Miami Dolphins power virtual agent

  • Implemented a chatbot that managed 40,000 conversations with fans, answering 97 per cent of queries and enhancing customer satisfaction

Kobe City, Japan

Kobe City, Japan power virtual agent
  • A COVID-19 response chatbot was implemented to rapidly offer information to its citizens, lowering phone traffic by 90%

San Diego Workforce Partnership

San Diego Workforce Partnership -  power virtual agent
  • San Diego Workforce Partnership had an inflow of displaced employees, and its AI-supported virtual agent assisted by processing 75% of enquiries.

OBB

OBB - power virtual agent

  • OBB, Austria’s rail network, developed an AI-assisted chatbot to automate simple customer contacts, freeing up human workers for more difficult problems.

TruGreen

TruGreen - power virtual agent

  • In only two days, TruGreen designed an AI-powered virtual agent bot to answer regular enquiries and take action depending on consumer intent.

5. Understanding Power Virtual Agent chatbot in detail

Topics

Topics for the bot can be created by users, who can program conversation pathways that can have several branchings based on the customer’s inquiries and replies to the Power Virtual Agent. The authoring canvas may be used to configure topics. Topics can be toggled on and off.

When a new bot is formed, the system generates lesson topics that the Power Virtual Agent administrator may utilize to learn how to develop Power Virtual Agent content. Please keep in mind that these lesson topics are just for training purposes and should not be used in production.

Understanding Power Virtual Agent chatbot in detail - Topics

Trigger Phrases

Each topic should have a few keywords linked with it. Trigger phrases are phrases or keywords that users may enter to direct the bot to a certain topic. It’s critical to realize that trigger words don’t have to be accurate, which is where machine learning comes in. For example, if a subject includes a trigger phrase named “I want help” but the user enters in “help” or “need a help” the bot will still direct the user to the correct topic.

Understanding Power Virtual Agent chatbot in detail - Trigger phrases

Entities

Power Virtual Agent has a library of pre-built entities. Entities may be used to inform the bot not only what sort of data to look for when a client writes into the chat window (email address, money, a person’s name, etc.), but also how to record that data. There is, for example, an age object that allows Power Virtual Agent to extract an actual number from the data entered in the chat window. If the user input is ‘I’m 19 years old,’ the bot will save the value ’19’. Alternatively, if someone writes in ‘Five years,’ the bot will save it as a value of ‘5’.

We may also design our own custom entities, which allow us to enter a list of objects as well as synonyms for those items. These lists can be used to organize or categorize words. For example, if you’re creating a bot to handle the status of a request, you may have an object named Request Status with values like ‘Pending’, ‘Completed’, ‘Rejected‘, and so on. By putting these elements into a single list, the bot is able to better analyze the data that is entered.

We may enable smart matching in these custom entities, which allows the bot to detect things in the list even if the user misspells an item or uses a similar term, such as matching ‘status’ to ‘state.’

Understanding Power Virtual Agent chatbot in detail - Entities

Authoring Canvas

From this point, we can start to build our bot. Admins will most likely spend most of their time here, as this is where subjects’ questions, responses, actions, and variables are configured. Anyone with less knowledge about chatbots can also write the canvas’s user interface, although it might get a little busy if you have a lot of questions with different branches. When you begin to construct your dialogue, you have several alternatives to pick from,

Understanding Power Virtual Agent chatbot in detail - Authoring Canvas

  • Message: Each message can be formatted by using the options on the screen. We can also insert data stored in variables within the message. (i.e., if the bot captured the customer’s name earlier, we can use that variable later in the conversation)
  • Ask a question: Show a message: Displays question from VPA; we can use variables to capture customer responses
  • Call an action: The action option allows admins to trigger logic from outside VPA, this can be a Power Automate Flow or a Skills action
  • Show a message: Shows a message to a user, a response is not captured
  • Redirect to another topic: This step will redirect the conversation to another topic
  • End the conversation: Ends the conversation either with a survey or by transferring to a live agent

Variables

Variables are placeholders in which the application records customer responses and can be used in a variety of ways by administrators. The variable data can be used in the conversation that Power Virtual Agent has with the customer.

For example, if Power Virtual Agent asks the customer what his first name is, the customer replies Ben, which is saved as ‘Name Variable,’ and responds to the client by saying “Nice to meet you ‘Name Variable,’ which will appear to the client as “Nice to meet you, Ben”. Variables can also be supplied externally to the Power Virtual Agent.

Administrators can run actions (such as Power Automate Flow) and move data from variables to Power Automate Flow. Power Automate will then run and provide the data to Power Virtual Agent, which can subsequently be used in the client discussion. Power Virtual Agent asks the client for an email address and then searches the Dynamics 365 CE database to check whether there is a lead or contact record in the database with that email address. If no contact is available it will have Power Automate build a lead in Dynamics 365.

Publishing

Power Virtual Agent can be deployed through a variety of channels, including custom websites, mobile applications, and chat apps like Facebook Messenger and Microsoft Teams. Administrators of Power Virtual Agent can utilize the demo website to test the topics after they have been set up and published. This URL can be shared both internally and internationally, but it is not a live site. After running numerous tests, the Power Virtual Agent administrator may analyze the scans for each specific issue.

Understanding Power Virtual Agent chatbot in detail - Publishing

6. Making the first chatbot

Step 01

Sign in to Power Virtual Agent and click ‘start free

Then sign in with your O365 mail.

Step 02

Fill in the bot name and language in the bot creation window.

After filling in all the needed fields, click Create.

Making the first chatbot - Create a Chatbot

Step 03

Create a new topic with an appropriate name.

Create a trigger phrase as the below figure trigger phrases are,

  • What are the opening hours?
  • When are opens?
  • Are you open today

After creating the trigger phrase click the Go to author canvas and you will direct to the author canvas.

Making the first chatbot - Create a Trigger phrase

Step 04

After being directed to author canvas, the flow of the chatbot is displayed with the created trigger phrases.

Continue the flow as you like with the questions, messages, variables etc.

Making the first chatbot - After being directed to author canvas, the flow of the chatbot will be displayed with the created trigger phrases.
Making the first chatbot - After being directed to author canvas, the flow of the chatbot will be displayed with the created trigger phrases.

Making the first chatbot - After being directed to author canvas, the flow of the chatbot will be displayed with the created trigger phrases.

Step 05

After finishing the flow you can select the End the conversation to finish the flow.

Making the first chatbot - End of conversation

The flow will be completed as in the below figure.

Making the first chatbot - End of conversation

Step 06

Click the save button to save the flow of the newly created chatbot.

Making the first chatbot - save the flow of the newly created chatbot.

Step 07

Test your chatbot by clicking the Test your bot.

Making the first chatbot - test your bot

You can do a test run of the created chatbot after that.

Making the first chatbot - test run of the created chatbot after that.

Step 08

Select the publish Icon in the navigation pane.

Making the first chatbot - Select the publish Icon in the navigation pane.

Step 09

Click the Publish button to publish your chatbot.

Making the first chatbot PVA- Click the Publish button to publish your chatbot.

7. Conclusion

Microsoft Power Virtual Agents allows you to engage with clients, consumers, and team members in up to 60 different languages without writing code. Integrating this technology into your firm provides various communication benefits without the need to invest thousands of dollars in data engineers.

Working with a Power Virtual Agent partner enhances your experience. A professional will customize the program to your exact company requirements and give you all of the tools you’ll need for effective setup and ongoing maintenance. This suggests that communication will improve with time.

Authored by Bhashitha Dhananjaya @ BISTEC Global

Vue Js Composition API and Component Reusability

February 3, 2022

Vue 3 Composition API provides a new approach to organizing data models and functions. Previous options of API don’t provide features to organize models or business logic in a logical manner. Composition API provides a great feature to organize codes, in a more reusable manner and it improves the readability of big components.

Option API distributes codes among data block, computed blocks methods, and watch functions. Code has been spread in all the places there is no logical fragmentation. That structure is what makes it difficult to understand and maintain a complex component.

However, when we are working with bigger code blocks it’s convenient to fragment code blocks based on logical concerns. It would be much nicer if we could collocate code related to the same logical concern. And this is exactly what the Composition API enables us to do.

Vue - Composition API

The Problem

If you have experience with Vue Js 2, you must have seen the Option API, where the codes aren’t fragmented in a logical manner based on its functionality. A component might look like this. If we apply different color codes for code fragments according to the Vue Composition API RFC showing how code fragments will be.

Vue - color codes

How Composition API resolves

Here, the goal is to fragment codes based on their feature / logical functionality. Using Composition API, we can extract this logic and place it in separate files. And we can consume those inside the Setup method in Composition API. The separation of options obscures the underlying logical concerns. In addition, when working on a single logical concern, we have to constantly “jump” around option blocks for the relevant code

Composition API Using Nuxt Js

Nuxt Js provide Composition function using Nuxt Composition API. @nuxtjs/composition-api module that brings first-class Composition API support to Nuxt. The @nuxtjs/composition-api package is a wrapper over a @vue/composition-api plugin which means that along with Nuxt-specific utilities it contains all “standard” Composition API functions like ref or computed.

Before starting the feature of the Composition, first, we will look into how Nuxt Composition API addons facilities to us to work with Composition in Nuxt Project. To enable Composition in Nuxt project we have to setup NuxtJs Composition API.

The installation is straightforward, just like with every other Nuxt module. First, we have to install the package:

npm install @nuxtjs/composition-api –save

And register the module in our nuxt.config.js

{ buildModules: ['@nuxtjs/composition-api' ] }

The module is registering @vue/composition-api plugin under the hood so we can immediately use its features in our project without any additional code.

Server-side

The @nuxtjs/composition-api provide SSR capabilities within Composition.

UseFetch which is a Composition API wrapper for a well-known Nuxt fetch that is commonly used to fetch asynchronous data (both on a server and client-side)

It does two things:

It makes sure that the asynchronous function that passed as its argument resolved. Then the result conveyed to the client-side through the window. NUXT object and picked up by your client-side code as its initial state.

It prevents the client-side execution if navigation has been made on a server-side. Because of that, we are not performing unnecessary network calls if we already have the data from the server-side fetch.

To make use of useFetch in our composable we just need to wrap it around our asynchronous code:

Vue - asynchronous code

Using Nuxt Context in your composable

Among data-related server capabilities, Nuxt composition API is delivering a set of composable to interact with other composable APIs. One of the most helpful features is the use of Context. As represented in the name, it facilitates us to access Nuxt context inside our composable. We can use this instance to access router, store, and properties via Nuxt Modules.

In Vue 3 Composition, Vue Context is accessible inside the Setup() method only. It’s not allowed to accessed outside. Therefore, if we want to access the Context in different Compose files, we have to pass context as a parameter to the specific file. With the help of the use Context () method we can access Context Object inside any Composition API.

How to Modularize Components

Let’s see how we can organize our component by feature and reuse our code across other components. In this below example it’s a Student Portal that has three main feature areas; those are Course Enrolment, Showing Progress Report, Showing Student Profile. If we see the functionality of the student portal, we can clearly identify that it has three modules as follows.

  1. Enrollment
  2. Progress Report
  3. Student Profile

Let’s see how we can organize the code using Composition API.

Modularize Components

Here Enrollment, Progress Report, and Student Profile moved to different files. Its related fields and methods are also placed in the same file. Therefore, it’s more human-readable and meantime maintainable. And we can use the above compose section anywhere in our application as used on this page.

Building Reusable UI Vue Component

There are two approaches available to build reusable components in the Vue application. Both have their strength and weakness. Those are using Property and using Slot. We have to select the correct approach based on the needs.

Using Props

For example, there is an Address Component that used to capture the address of the student. The same component has been used to capture local addresses and foreign addresses as well. So based on the country, the address fields should changed. This has been achieved using Props for the component. The component has multiple props to change the behaviour of the component.

Props01
Props02

This approach is suitable for small components. If the number of props increases, it’s difficult to manage the component because we are introducing logic inside the component to maintain the state. It’s difficult to understand.

To handle this scenario with Vue 2.6 Slot directive has been introduced. Through this, we can distribute the content to the component. So rather than keeping the HTML content in a component and changing the behaviour based on the props. We can set the HTML content to the component from the outside.

Slot Directive

So, we understand the whole concept from the definition of slots it’s about making components reusable. Now, we’re going to dive in with some examples showcasing Vue slots and talk about how to make use of them.

We will take the same example and see how we can use Slot instead of Props.

Vue - Slot directive

You can notice in the above picture that we have removed Drop down and Input Control and we have placed <slot> tag. This is going to work as a placeholder and when we are using this component we have to define the HTML Content for this Slot as given below.

HTML Content

Through this, we can distribute the content to outside of the component. Therefore, we are able to control the component behaviour from the outside.

Conclusion

We have seen how we can use Nuxt Composition API to fragment code in a logical manner and how we can reuse them among the components. Meantime we can create reusable UI Components using Slot directives. The goal of the Composition API is to increase readability and facilitate us to create components in a more reusable manner.

Authored by Deepakumar Ganeshamany @ BISTEC Global

Source Code: https://github.com/bistecglobal/VueCompositionAndComponents

Agile Testing: It’s a new age of testing

December 7, 2021

Building software can be like creating a work of art sometimes. It requires creativity in design, and plenty of craftsmanship to do well. However, over the years, the methods of testing have evolved greatly, and this short blurb focuses on one of the current favorites, the “𝐀𝐠𝐢𝐥𝐞 𝐭𝐞𝐬𝐭𝐢𝐧𝐠” methodology.

As you probably know, Testing is not a phase, but an ongoing activity. all stakeholders including the developers are part of the agile testing method, which results in shortened feedback time. In agile software development in itself driven by testing from the early sprints itself.

“Pair testing” is a notable feature in today’s Agile testing method, where a member of the QA team works closely with a member of the development team to iron out the defects found during each sprint. These informal pairs work together as and when required, speeding up the debugging process effectively. To further strengthen its effectiveness, the team collaborates with the end-user to gather feedback after the completion of each sprint cycle.

Among the key benefits of the “whole-team approach” to product development are the enhanced communication and collaboration within the team, the enabling and best use of the various skillsets that are found within the team for the benefit of the project, and perhaps most importantly, making quality the responsibility of every member of the team.

At the best, Agile development is robust and proactive. Agile testing is robust and energetic the relatively mundane, predictable modules that need testing can easily automated. These include the common regression tests, unit tests, high traffic pages, cross-browser tests, and data-driven tests.

However, it is an important responsibility of the QA team to effectively prioritize the tests that can automated while those such as usability tests, one-off tests, testing the brand new features, and exploratory tests should not automated as they are specific in nature and cannot be reliably carried out by a machine.

These prioritized automated tests, then used by both the development as well as the QA teams. In addition, the QA team enhances the quality of the delivery by implementing performance tests and security tests as they see fit. At times, these tests carried out by specialized members of the QA team.

In the meantime, unit testing generally carried out exclusively by the development team and the responsibility of the entire product does not lie with the developer or the QAE, but with each and every member of the team. Along with their formal expertise, each team member brings in his or her own individual strengths to the table; all of which efficiently used to achieve the common goal of a perfect software product that can implemented at the customer site.

Most importantly, working in collaboration, instead of doing so in rigid isolation, brings about the best in the whole team, in record time. The active participation of a representative from the customer ensures that there are no miscommunications between requirements and products. Good communication among all, from the inception to the completion of the project, ensures that much time and money saved and a great piece of software created.

Authored by Dhara Jayasinghe @ BISTEC Global

 
Let's talk

We love connecting

We are here to help and support you.

If you believe that we can help you or your businesses requirements - do feel free to drop your details here and don’t hesitate to give us a ring.

Connecting with us on LinkedIn works best.

    • Marlon De Cruz
    • Marlon

      Director

      • |
    • Johann De Cruz
    • Johann

      CEO | Co-Founder

      • |