All posts by meta_prasad

https://res.cloudinary.com/metasyssoftware/images/f_auto,q_auto/v1658483418/PowerBI-1/PowerBI-1.png?_i=AA

Power BI – A Visualization Tool which is easy to understand and develop

Power BI is a tool used for generating business intelligence reports, charts and graphs, that incorporate easy to understand visuals. It is a self-service BI tool that is particularly useful for data analysts who create and distribute BI reports throughout the organization. With moderate knowledge of SQL, one can develop simple power BI visuals after only very basic training.

The first important point is that it is essential to determine the Storage mode before starting to develop any power BI report. Storage modes that can be used for accessing the data can include:

  1. Import mode
  2. DirectQuery mode
  3. LiveConnect mode
  4. Push mode

My experience in developing a power BI report increased quickly, as I started by developing a very simple report and ended up learning a huge amount about more advanced elements of Power BI as the project requirements changed.

In the beginning, it was exciting to work on the first simple power BI report, which I developed using a database like SQL Server and Storage mode as Import.

PowerBI 1

As shown above, the visualisation was for a count of orders for the time period indicated by the date slider. The stacked column chart on the right shows the orders based on service type on a yearly basis. The visualisation can be done for any date hierarchy including daily, weekly, monthly, quarterly and yearly. In the pie chart on the left, the total orders are shown as both a total count and a percentage breakdown. As specifically requested by the client, we also added a reset button to restore the initially selected filters values.

Later on, during the deployment phase, we had to search for an on-premises data gateway to maintain the continuous connection with the data relying on the SQL server. We installed the on-premises data gateway on our database server connecting to the datasets created on the Power BI portal as shown below:

Datasets 2

We maintained daily refresh schedule as shown below:

Scheduled Cache refreshing 3

After deploying this report to production, the client requested a live report that showed current statistics without needing a page refresh. After some research I found that automatic page refresh can be achieved using the DirectQuery Storage mode. Unfortunately, my report was developed using the Import mode. This is when I learned the hard way that choosing the right storage mode from the beginning is very important, as I had to recreate the whole report using the DirectQuery storage mode. Meeting the clients’ needs required converting the storage mode to Direct Query, recreating the report and setting the automatic page refresh option to 5 seconds.

Orders 4

We can develop a variety of reports using the Visualization options as shown in the image below.

Visualization option 5

We can even use visuals other than those available in the Visualization pane, such as the Search tool shown below:

Search tool 6

At MetaSys, we  are focused on investing time into new and innovative projects like Power BI, to meet our clients’ needs.

For more information refer to  https://www.metasyssoftware.com/contact

https://res.cloudinary.com/metasyssoftware/images/w_624,h_414/f_auto,q_auto/v1658484643/pexels-pixabay-235922/pexels-pixabay-235922.jpg?_i=AA

A Developer’s Tale: Using Microsoft technologies to integrate Myzone device with Genavix application

It is no secret that digital technology is slowly shaping the future of the healthcare industry. The use of fitness tracking devices has grown rapidly, the philosophy being ‘that which gets measured can be improved’. The MetaSys team has worked on integrating tracking devices with Fitness and Nutrition Applications.  This article describes one such achievement, namely integration of Myzone into our clients’ application.

Our client: Genavix is a venture in the preventive health care services industry. It offers members comprehensive health and fitness solutions to reduce health risks and improve wellness. They provide various fitness and nutrition plans helping associates follow a healthy lifestyle.

About Myzone: Myzone is an innovative wearable heart rate based system. It uses wireless and cloud technology to monitor physical activity. Myzone allows the user to view their fitness efforts live on their phone, such as how many calories they are burning. Users are also able to make connections and compete with other individuals in the network. Based on their fitness efforts, users are awarded MEPs (Myzone Effort Points), which they can use to challenge others on the platform.

We at MetaSys were given the task of integrating the Myzone system with our client’s application. Our solution used the fact that each Myzone device has a unique belt number, which is registered with a particular wellness facility. Users are able to submit their Myzone belt number, after which a unique ID is assigned to their profile. The client system can then track all Myzone activities.

One of the challenges we faced in the integration, was that the data obtained from the Myzone API is only available for the last three months. As a long term health app, our client tracks fitness for a much longer duration. To resolve this issue, we decided to import the data every night by creating a task scheduler, which imports data from the Myzone API into the application SQL tables.

Each wellness facility with registered Myzone belts has a unique API key. Using this API key and Myzone Cloudbase API – 2.0.3, a web request API call is made which retrieves Myzone API data of each user in the previous three months. The data is received in JSON (JavaScript Object Notation), is then interpreted in Asp.net and imported into the application SQL tables. The imported data is used to build a user fitness diary that integrates the Myzone data with data that has been manually entered in the application by the user. The detailed tracking of fitness, such as tracking calories is used to help every user, achieve their daily health and fitness goals.

If you wish to collaborate on similar projects, feel free to contact us. We have extensive experience in integrating devices into web applications such as ASP.NET Framework, JavaScript, jQuery, Microsoft SQL Server. For more details, please visit – https://www.metasyssoftware.com/dot-net

 

https://res.cloudinary.com/metasyssoftware/images/w_624,h_246/f_auto,q_auto/v1658484646/Bonjour11/Bonjour11.png?_i=AA

How to implement Internationalization for a React Application

Internationalization of an application, document or product refers to the development of easy content localization, i.e. modifying the content to target the language and culture of the region. Internationalizing an application leads to improved usability by people located across the globe.

There are two main aspects to internationalization, firstly the detection of the user’s local language, and secondly the modification of the content, including translation of the text, and switching relevant items such as currency.

This article addresses how to implement the internationalization of a React application using the library ‘React-intl’. The first step is to create a new React project and add the intl package:

  • Create a React project using the commands –

$ npx create-react-app project_i18n

         $ cd project_i18n

  • Add the ‘react-intl’ package.

Configuration of the package consists of four main steps: creating the locales, creating the provider, and finally creating a common translator. In the remainder of this article, I will elaborate on these steps.

1. Create the locales –

a.Create a folder with the name ‘i18n’ in your code folder.

i18n folder 2

b.Create a file ‘locale.js’ and export the locales object.

locale js3

2. Create the provider –

a.Now, let’s create the Provider to hook the IntlProvider to the application.
INTLprovider4
In the above image, IntlProvider is imported from react-intl and a wrapper is created for the application, setting the default locale and passing the message content according to the locale.

b.To create the messages for the respective languages, create a folder called ‘MessageContent’ and create the locale files for messages within that folder.
Let us create two different message objects.
For English: – en-US.js –

EN-US5

For French:- fr-CA.js –

FR-CA 6

c. Create an ‘js’ file under the MessageContent folder to export the messages.
MessageContent-> index.js –

Messagecontent 7

3. Create a common translator –

a.Let us create a common Translate function to translate the message according to the locale.
i18n-> translate.js –

Commontranslator8

b.Create ‘index.js’ under the ‘i18n’ folder to export the locales and provider as default.
i18n-> index.js –

index.js9

c.Finally, let us wrap the application with IntlProvider and set the locale in App.js.
src-> App.js –

wrappingapp10

Example for French Locale –

fr-CA.js

export default {

[LOCALES.FRENCH]: { ‘hello’: ‘Bonjour’, ‘userName’: ‘le nom d\’ utilisateur est {uname}’

}

};

translate.js

const translate = (id, value={}) => <FormattedMessage id={id} values={{…value}}/>

d. We are looking for the following output:

translate(‘hello’)  => Bonjour

translate(‘userName’, {‘uname’: ‘Sam’}) => le nom d’ utilisateur est Sam

Bonjour11

Internationalization can be achieved in react application by using ‘React-intl’ with minimal development efforts for handling multiple languages.

MetaSys has developed custom React solutions for clients across various industries and geographies. If you have any questions on internationalization in your React projects, then please feel free to contact us. Happy coding!

https://res.cloudinary.com/metasyssoftware/images/f_auto,q_auto/v1658484648/Sportlookupfield-1/Sportlookupfield-1.png?_i=AA

Exporting JSON data from your ASP .Net Web API to a Microsoft Excel Spreadsheet using Macro Programming

Exporting your data to an excel spread sheet is a very common requirement, but what if this data is coming from a  database as a Web API  service . This is possible using Macro Programming.

In this article, I would like to give a  brief overview of how to export your data from the ASP .net Web API controller to your Excel Spread Sheet on a specific look up field using a live example.

Example:  We had a sport lookup field which populated the data from a second tab sheet where there was Master data.

Sports lookup field on Excel tab sheet 1

Sport Look Up Field
We had a web application developed in MVC and a Web API. The web application had a feature where the end-users could download an excel file template with columns of static data on one sheet and master data present on the second sheet using data validations (Feature of Excel). As the data fields increased we had to keep updating this excel template with the static data for selection so that the end users could use the template with the latest data. As this was quite a tedious process, we decided to write a program in macro. The macro program was supposed to get the latest data from the database and populate the excel file with the same fields whenever you opened it.

Master values for the Sports look-up field from the second tab sheet.

Mastervalues 2

On the Web API side, we had the controller Method Get() returning a JSON object with all the data in it. You can name it as GetSportsData(). On the macro program side, we consumed the service from the API with the below code.

Here is the following code snippet which we wrote for macro programming. The programming langauge which was used here is VB;

Dim requestObject As Object

Dim URL As String

Dim boolAsync As Boolean

Dim strResponse As String

Set requestObject = CreateObject(“MSXML2.XMLHTTP”)

URL = http://mylittleblog.com/api/GetSportsData <>

boolAsync = True

With requestObject

.Open “GET”, URL, boolAsync

.SetRequestHeader “Content-Type”, “application/json”

.Send

While requestObject.readyState <> 4

DoEvents

Wend

strResponse = .ResponseText

End With

The variable ‘strResponse‘ contains the JSON object and the data from this JSON object can be used in the sheet and formatted into rows and columns.

The readyState property holds the status of the XMLHttpRequest which you can find in any AJAX Server reponses.

readyState

The various status of the XMLHttpRequest.

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

Points to consider:

You must make sure that while executing the macro program, the WEB API service must be running or else we will not get the latest data from the API.
If you are not able to hit the WEB API endpoint, then you can write the code to populate the data from the master tab sheet as it may happen that the user may not be connected to the internet.

This way, one can find a solution to connect to the WEB API world from the Microsoft Excel sheet. We at MetaSys Software have been building such customized solutions using Microsoft technologies for clients across different industry verticals. For more info. https://www.metasyssoftware.com/dot-net

https://res.cloudinary.com/metasyssoftware/images/w_624,h_351/f_auto,q_auto/v1658484650/Unit-Testing/Unit-Testing.png?_i=AA

Few tips to help you get better at building app features through Unit Testing

At MetaSys, we place great importance on writing unit tests, as it leads to faster development and reduces the time it takes for software to get to the production stage.Unit testing is the first step of software testing, where individual units/components of a software are verified. A unit refers to the smallest module of any software, and usually has one or more inputs and often a single output. The purpose of unit testing is to check whether the units are working as expected.

Unit tests help in finding regressions, test error cases and reduces the requirement for manual testing significantly. Unit tests also help in improving the code quality, e.g. if you are not able to write a unit test for a particular scenario, then it typically means that the code needs to be refactored. For a better understanding of the topic, I recommend reading Kent Beck’s book on unit testing ‘Test-Driven Development by Example’.
Having said that, here are my comments on Unit testing –

● Any *newly*developed app feature should not be considered complete until a unit test has been performed. This means, the development estimates should always include the unit testing time. For example, a developer might build a feature without writing a unit test and perform manual testing instead for which he might spend 24 hours plus an additional 24 hours to fix bugs and regressions. Instead, it would be better to spend 48 hours or less for building a feature by writing the unit tests, as it will ensure that the code quality is better. The developer will have more confidence in the code after completing the unit test. Unit testing is particularly useful for identifying regression bugs, as the same tests can be reused to prevent future regressions.

● Some existing applications do not have any unit tests because they have been developed by developers who have not prioritized unit testing, or may not have been aware of its benefits. When new developers who are aware of unit test concepts start working on the application, they should not necessarily interrupt the work to start writing unit tests for all components immediately. Instead, the process can be undertaken gradually. For instance, if they are working on specific components that lack tests, they should take the opportunity to write unit tests, at least to verify the newly added functionality. It is important that the project manager takes care of estimates for development time for writing unit tests for old components. Over time the code coverage for these components will increase and at some point in time, it may become sensible to set a goal specifically to increase test coverage.

Advantages of unit testing –
1. It reduces the level of bugs in the production environment.
2. It builds confidence in the developer.
3. It allows the code to be easily refactored or changed.
4. Regression bugs can be caught easily.

Disadvantages of unit testing –
1. In our experience, writing unit tests requires about 20-30% more time at the beginning of the project. For a complicated project, it may require even more time.
2. If the architecture/design of the project is not correct from the beginning, then tests need to be rewritten when the project is re-architected. This can turn into a major time loss.
3. For big/complex projects, unit testing alone is not enough. Typically, integration tests and e2e tests will be required alongside the unit tests to have proper test coverage.

As developers, we always look to reduce costs whilst still fulfilling all the project requirements. Unit testing can play a big role in achieving this. Unit testing helps any developer to produce bug-free and quality software with confidence.
Over the years, MetaSys has successfully built a robust testing environment to build custom software solutions. Feel free to reach us and do share your feedback in the comments section below.

https://res.cloudinary.com/metasyssoftware/images/w_624,h_349/f_auto,q_auto/v1658484670/React-Native-vs-Flutter-image/React-Native-vs-Flutter-image.png?_i=AA

Flutter vs React Native

Many new technologies have evolved because of the increasing demand for cross-platform products. Facebook’s React Native and Google’s Flutter have created a lot of buzz in the cross-platform app development market. These two trending technologies are both known for high performance, and many enterprises and big brands are embracing them to come out with value-driven web and mobile applications.

React Native and Flutter are currently competing with each other to become the leading product, and although both have their advantages, it is not yet clear which one will come out on top. This article compares the technologies by examining their features, and their respective advantages and disadvantages. We hope this can help you in choosing which technology to use for your application.

Before looking at the technical differences, let us briefly have a look at their positions in the market so far. In order to do this, we can use Google trends to look at the interest in the technologies since 2015, when React Native was launched.

Google Trends comparison 1

The trend shows that both technologies have been gaining popularity steadily, and that although React Native is much older, Flutter is catching up quickly.

About Flutter

  • Flutter is a free, open-source portable UI toolkit for creating web, desktop, and natively compiled mobile apps in a single codebase.
  • It was created by Google in 2017.
  • It uses a language named Dart.

 About React Native

  • React Native is also a free, open-source mobile application framework.
  • It enables the developers to use its parent framework React with the native platform.
  • React was created by Facebook in March 2015.
  • React Native is virtually identical to React.

Head to head comparison between Flutter and React Native

Flutter vs React Native comparison

Let’s list a few of the major advantages and disadvantages of each technology.

Flutter

Advantages:

  • Fast apps
  • User-friendly design
  • Perfect for MVC structure

Disadvantages:

  • Large Apps can be difficult to program
  • Limited libraries in comparison with React Native
  • Currently small developer community (though growing)

React Native

Advantages:

  • Active large community
  • Uses widely popular JavaScript language
  • Robust Performance
  • Easy to learn

Disadvantages:

  • Lots of abandoned libraries and packages
  • App size is bigger than Natively developed Apps
  • Fewer testing features compared to Flutter

Which technology should we choose in 2020?

React Native has a huge base of achievements to showcase its success in the market, compared to the new player. However, Flutter has a lot of potential and as of now there is a chance that it can become the leading technology for cross platform mobile app development and web applications. We hope that this article has highlighted some of the key differences and can help you choose the best technology for your app development.

Happy Coding…

https://res.cloudinary.com/metasyssoftware/images/f_auto,q_auto/v1658484684/Inventory_19/Inventory_19.png?_i=AA

Call FileMaker Script from a JavaScript function

This article is the second part of a two-part series diving into some new features of FileMaker 19. In the previous article (https://www.metasyssoftware.com/blogs/integrating-jquery-datatable-in-filemaker-application-using-perform-javascript-in-web-viewer), we explored the new FileMaker script step “Perform JavaScript in Web Viewer”. Using this feature, we added the jQuery data table in FileMaker Web Viewer. In this article, we will explore how we can call a FileMaker script from JavaScript function within FileMaker Web Viewer.

Demonstration

The example we will be using is a follow-on from the previous article, in which we showed a method for displaying data of companies and contacts. We displayed the FileMaker data in a jQuery datatable in the FileMaker Web Viewer, which allowed us to include jQuery features like pagination and sorting without any coding. Using the FileMaker.PerformScript() function, we can add the functionality through which, once the user clicks on any of the contact records from datatable in Web Viewer, the chosen contact details are shown on the FileMaker card window.

Inventory_19

The FileMaker.PerformScript() function takes two input parameters:

  1. FileMaker Script Name – A non-case-sensitive name of the script we wish to run
  2. Script input parameters (optional) – a string that contains the required parameters, which can be read using the function Get(ScriptParameter).

This FileMaker script can be called from the WebViewer using the following JavaScript function: function performFileMakerScript() {
FileMaker.PerformScript ( “FileMaker Script Name”, “Optional Parameter” );

Specify calculation

The highlighted section from the above screenshot shows how to call the FileMaker script using ‘FileMaker.PerformScript() function from Web Viewer. In it we write a JavaScript function called showContacts(), in which we can specify the execution for a double click event. We specify that a double click event calls the FileMaker script called “Show Contact Details”, passing the ID parameter as the optional second parameter. The ID parameter is retrieved from the double click event, by identifying the datatable row that has been clicked. This id parameter is further used in the FileMaker script to get more details of the selected contact record and displayed in the FileMaker card window.

A few notes regarding this implementation:

  • In the Web Viewer Setup dialog, you must select the setting “Allow JavaScript to perform FileMaker scripts”. Otherwise, the FileMaker.PerformScript()function will not work.
  • The FileMaker script name which we pass as a first parameter is not case-sensitive.
  • The FileMaker.PerformScript() function doesn’t wait for the FileMaker script to finish. That means the FileMaker script doesn’t return a value to the FileMaker.PerformScript() function that called it.
  • The FileMaker script is executed in the current context. So if the user or script changes the layout or record while the script is running, then the FileMaker script will run in a new context. To deal with such a situation, we can pass the context information as a second parameter to the function.

The JavaScript integration in FileMaker 19 platform allows creating custom apps that can use the existing JavaScript libraries to incorporate amazing functionality easily. It enables a seamless ability to pass data back and forth between FileMaker and JavaScript.

If you are looking for support with FileMaker, or FileMaker integration, feel free to contact our us. For more details, please visit – www.metasyssoftware.com/filemaker

https://res.cloudinary.com/metasyssoftware/images/f_auto,q_auto/v1658484691/Card-windows-in-webdirect/Card-windows-in-webdirect.png?_i=AA

Card Window in FileMaker 19 WebDirect

FileMaker 19 offers many new features that can be used to enhance the UI/UX of FileMaker Custom apps. One exciting feature is the ability to use card windows in WebDirect. FileMaker introduced the card windows in FileMaker 16. At the time that feature was not supported in WebDirect. Card Window support in WebDirect is a powerful feature.

Card Windows are modal to its parent window and allows the display of context-independent information from the parent window. Using the card window, users can perform actions without navigating from the parent window.

Card windows in webdirect

We can implement a card window using New Window or Go To Related Record script steps and selecting card as the window type. Only Close Window and Dim Parent Window options are available with card window type.

Please refer to the below screenshot

New window options

We can use the following script steps and Functions with cards in FileMaker WebDirect:

Script Steps

  • New Window
  • Adjust Window
  • Move/Resize Window

Functions

  • Get (WindowStyle)
  • Get (WindowLeft)
  • Get (WindowTop)

Things to bear in mind when using Card Window in WebDirect:

  • The status toolbar and menu bar in the parent window are not active when a card window is open.
  • Changes made in the card window will not be reflected in the parent window until the card window is closed.
  • When the card window is closed, the parent window doesn’t always refresh. We can solve this problem by adding a Refresh Portalor Refresh Window script step to the close window button.
  • When you are using the card window, make sure that close window button is visible in WebDirect solution. Because sometimes the close button may not be visible even if the close window option is selected. This can be handled by providing a custom close button on the layout.

Overall, the card window support in WebDirect offers an enriched user experience to Web users. We hope that this blog gives you valuable insights on card window support in WebDirect.

MetaSys has a team of experienced FileMaker developers. Please feel free to reach out should you need to support or you wish to develop FileMaker Apps. Please feel free to reach out to us at  https://www.metasyssoftware.com/contact

https://res.cloudinary.com/metasyssoftware/images/w_624,h_350/f_auto,q_auto/v1658484688/UI-structure-image-1/UI-structure-image-1.png?_i=AA

React Redux – The art of state management

React is one of the most popular technologies for front-end development, which uses a component based approach to enable fast app development. Redux is a predictable state container for JS apps, and works particularly well with React.  In this article, I will be covering some basics on how to set up React-Redux for state management of a UI.

To illustrate the advantages of this approach, have a look at the UI structure shown below.

UI structure image 1

Let’s say the functionality required is that when a user interacts with the big component, the application has to update the small component and the header. In other words, we need to sync the header and small component as well as manage the states of all the other components. Without a state management library such as the one provided by Redux, coding this implementation can easily become very complicated.

Using the state functionality in React allows only the use of local, component level states.

Image 2

You can store the states using setState method, and fetch the stored state using state.[STATE_NAME]. However, these states are local, and only available within the class component in which it is declared.

Setstate image3

To store the states at the application level, i.e. the global level, in order to access them from different components, we can use React-Redux.

Let’s see how React-Redux works

You will see three main elements in the Redux architecture – Store, Dispatch Actions and Reducers.

Redux architecture 4

Store: holds the states at the application level, and allows any component to get data from the store in the form of Redux States.

Dispatch Action: a function of the Redux Store to trigger a state change.

Reducers: It handles the value change in Redux State.

How to configure React Redux in a React JS project –

The following packages are needed to be installed to configure  Redux in the project –

  1. Redux: the core package of React Redux.
  2. React-redux: needed for React bindings.
  3. Redux-thunk: a middleware which allows you to call action creators, and which returns a function instead of the action object.

These dependencies can be installed by using the following NPM command –
npm install redux react-redux redux-thunk –save

After these dependencies are installed, a store can be created and initialized with data/null values as per the requirements. This can be done by creating the file store.js in the project.

First however, you need to create reducer.js to handle the next states. Below is the example of reducer.js to initialize the state. Here, it is just returning the initial value from the reducer.

reducer.js 5

Below is a slightly more complex example of the code in reducer.js to update the states based on the action executed from the component.

coding 6

In the above example, it adds the data to the state upon the dispatch action (ADD_DATA). Now let’s create the action to dispatch. You can create a file with the name action.js, that contains the code shown below.

action.js 7

Once the action is created, now you can create a store and then connect the store to the application. You can create a file with the name store.js, that contains the code shown below.

store.js 8

To connect the store to the application, you will have to use the entry point. In the index.js (i.e. entry point of the app), import the store as shown below –

coding 9

These are all the Redux configurations for an application. Refer the the image below to use it in your component –

React component 10

React Redux can handle large amounts of data at the application level with cleaner components and is particularly useful for big applications.

Without Redux 11

With Redux 12

Without redux, to transfer data from component 1 to component 5, you need to pass it through middle components. This increases the props for components and creates more complexity and the components are less clean.

Using React-Redux, you can get or set the data to the store from any of the components directly by mapping the redux states to component props. In this case, you do not need to pass props to the middle components. This allows for much cleaner components and increased clarity in the code.

If you are looking to build a mobile or web application using React technology, then please feel free to contact us.