Fibonalabs

Angular JS: Sharing data between child and parent components

2023-02-28T14:03:20.969Z

Introduction

Angular is one of the widely used JavaScript frameworks, written in typescript. It is a component-based framework which is used for developing SPAs and large enterprise applications. It was developed by Google in 2009, and as a result, there have been many iterations. In general, frameworks increase performance and web development efficiency by providing a consistent structure for developers. It also offers developers a host of additional features which can be added to the software/application without any additional effort, hence saving a lot of development time.

Benefits

Faster Development Process: It allows the developer to build a highly efficient application faster with the help of technical advantages that the angular framework provides like – Angular CLI, Two-Way data binding, built-in routing, templating and a large developer community which makes angularJS web development easier.
Lightweight web Apps: Earlier performance of large-scale applications was very poor. Thanks to angular for the Lazy-Load feature. Which significantly improves the performance of such large-scale apps by reducing the size of the initially-loaded app.
Efficient Problem-solving patterns: It offers an efficient design pattern, dependency injection and service which helps in solving productivity issues and speeding up the development process.
Cross-Platform Development: It also supports cross-platform development. It allows the developers to write code that can run on multiple platforms like mobile and web applications.

Data sharing between components in angular is an important thing in a component-based framework. Small components are good to manage in angular. When we start breaking down the complex requirements into smaller ones (I.e., smaller components) then it's very important to have a proper data-sharing mechanism. There are multiple ways in which data is shared between the components. Few of them are

Parent-to-child component
Child to a parent component
Sharing data between sibling components

Let us see how this can be achieved

Let us consider the below hierarchy for understanding the purpose

<parent-component>

<child-component></child-component>

</parent-component>

Here <parent-component> serves as a context for the <child-component>

@Input() and @Output() decorators give the child component a way to communicate with the parent component

@Input(): Lets the parent component pass the data to the child component

@Output(): Using this decorator child component can pass data to the parent component

Sending data from Parent to Child Component

Child Component

Create a child component to receive the input from the parent component

@Input() decorator in the child component signifies that it can receive data from the parent component. @Input() properties can have any type, such as string, number, object etc

Binding the Property in the Parent

Use the property in the child component

// child.html

Now the data will be available in the child component. By using interpolation binding syntax we can access the value in the template file.

Sending data from child to parent

For sharing data from child to parent we need an output decorator.

@Output() decorator allows data to be sent from the child component to the parent component. This decorator acts as a doorway for the transfer of data. The child component needs to notify the parent component about the change/update in data. This can be done by using event emitters.

Preparing the child component for emitting data

Whenever the user clicks Submit button, an event is emitted. Which contains the new user’s name.

The next step is to instruct the child selector in the parent component to listen to this event. This can be done by event binding.

Configuring the parent component to access the data from the child

Now the parent component is aware of the event but we have to create a method to access the data that the child component is emitting.

//parent.ts

In the parent component, let us create a class with a variable to store the data and a method that will be invoked whenever the child component emits an event.

This can be achieved by sharing the data from one child to parent by using an output decorator and event emitter. Once the data is received in the parent component, we can share it with other child components using the input decorator. To achieve this we have to follow the first two steps.

5 Effective Tips for UX Designers to Design Fintech Products

2023-01-23T12:37:30.544Z

fintech product design

Nowadays users want fintech products to be as fast and convenient as other products they use. Being a UX Designer, I constantly think from the user’s perspective but I need to be even more vigilant about Fintech app UX design because users expect them to safeguard their privacy, security, and trust.

From January 2019 to March 2021, there were 149 crore fintech app downloads by Indians as the coronavirus outbreak has pushed the payment services to go digital.

Digital users expect fintech apps to simplify the security process, give personalized recommendations and also help them improve their financial health.

In the below blog, I have some key pointers to follow for fintech app design to make users happy and satisfied.

Improve Security And Accuracy With Biometrics

My grandfather uses notebooks for writing his contact numbers, banking details, and all the important things he needed to maintain a record of. He loses his temper whenever he cannot locate any of that information or even worse when he misplaces his notebook. I can imagine him losing his cool `if he happens to forget his phone’s passcode or mobile app’s pin.

Another scenario, I personally don’t like is when someone uses my phone without my permission and can even see my transaction history if he/she only knows my pin number or security pattern.

This issue of security and not remembering too many passwords can be solved by Biometrics which are biological measurements that are used to identify individuals. Biometrics can be fingerprints, voice recognition, retina scans, and facial recognition.

The above UX designs are of a loan app and on these screens, we are taking facial recognition for the signing of a loan agreement.

Strategies to Build Trust

I asked 5 people what makes them trust a website or app if their money is involved in it, and 5 out of 5 said that they only go by the brand name.

A few strategies to build trust with your UX design of a fintech product are:

One of the best ways to gain trust is by being transparent about rates and fees.
According to Research, about a quarter of consumers are more likely to trust a new fintech product if it emphasizes that it will take care to secure their data.
Explain your fintech service in layman’s terms to reach the audience who does not have a background in finance.
Increase trust signals by showing off your third-party reviews, security seals, and accreditation. Make your website look professional and see if there are any typos on your website.

Data Visualization For Better Understanding

Once I was using the PNB bank app to check my recent transactions through its digital passbook, I felt the data presented to be too complex and it doesn't provide my overall financial health.

Most people are visual learners so providing visual illustrations to users helps them better understand the data that can help them to make wise decisions. Also, data visualization in UX design helps to correlate things, make connections and give clear actions needed to improve users’ performance.

Gamification for Engagement

People are already scared of finances, and when finance is merged with technology it is even scarier and more boring for people. Gamification is a fun & engaging way of teaching users about stocks, investment and savings to name a few.

Try to make finances less stressful by including points, bonuses, and visual aids to keep things interesting.
Users’ achievements can also be shared with their social connections to gain respect for financial expertise.

Whenever I use Google Pay, I get instant rewards which motivates me to use the app even more. There is a framework called Octalysis which is used for gamification and focuses on 8 human drives that make any boring activity fun. In the above diagram, I have pointed out how google pay uses those 8 core drives.

Include setting goals option in a product

In my childhood, I used a piggy bank to keep depositing my cash received from any monetary prize or from my relatives so that I would be able to purchase my favourite things at festivals or on my birthdays. Goal setting remains relevant in today's era too. If the fintech products that include goal-setting features to fulfil financial needs can be more popular and useful.

In the above screens, I have designed a personal finance app that lets users make saving goals and see their progress. If the user is able to meet goals within his set deadline, then he can avail of special offers which will further motivate him to save more.
Conclusion
In terms of customer expectations, the primary takeaway for fintech app design is: Meet the diverse expectations of every customer to succeed and provide a superior user experience. And, this can be done through the above 5 tips. I hope this blog has helped you to build better fintech digital products.

A Brief History of UX Design And The Future It Is Building

2023-01-23T12:35:45.315Z

future of UX design

What is UX? How did it become this relevant? Was it always a part of the system even before the age of IT? What does the future hold? Being a UX designer, I always thought about these questions. So, to get the answers to these questions, I researched its history and what does future hold for it.

I have tried to get all the questions answered in this blog, so stay with me to unravel your thoughts on the same.

To start with, I would say, look around, wherever you are at this moment, every product that surrounds you was designed by a human at some point of time in history. There were many iterations done by other humans over the years to get what we have now. Whether it’s a fan, a window, a chair, or the device on which you are reading this blog.

If we take any product and try to understand the history of UX design behind the innovations that have happened around the product, then we will come to an understanding that the end goal behind every design decision was to solve a problem faced directly or indirectly by the end-user; and ultimately to enhance the User Experience(UX).

A Chair, for example, thinks about it. We all needed to sit and relax since the time we were in caves. As we moved forward in time, the need stayed constant but we kept on iterating and improving the user experience. Today we have advanced ergonomic chairs that support long hours of sitting and give a great user experience.

Whether it’s a bottle, a cup, a knife, a musical instrument, or any product designed for humans has evolved with the same process of iterations to enhance User Experience.

Historical Examples of UX Design Practices Over the Years

Feng Shui: The practice of Feng Shui which dates almost 4000 BC, is a Chinese philosophy to seek balance and harmony between elements and space. It uses the basic elements and forces of nature and then transforms that idea into human experiences in the form of the interior of a home. Feng Shui was used to arrange the objects of a house. If we compare it with our existing design principle we are going to find that principles like layout, alignment, contrast, and hierarchy were still used then.

Greek Tools: The Greeks have been creating ergonomic tools since the 3rd century BC to create a better user experience and ultimately have better efficiency. If we think about its history of UX design, they conducted design research to understand the need and behaviour, and based on that they created tools that will enhance the User Experience.

As we move ahead in time we will see an exponential rise in science and technology and the impact it has on the lifestyle and the products used by humans. It will also impact the methods to create those products. For example, the first handwritten letter was written by the Persian queen Atossa in around 500 BC and since then everything about letter writing, sending and communication have been evolved. over the years the type of paper has evolved in which the letter is written, the ink and the language itself have evolved, and the method of transportation and the form of communication, in general, has evolved. But the purpose is still the same, the purpose is still having communication between two humans.

Over the years we have achieved communication to be better and better not just functionally but also in terms of the user experience. In the future still, the fundamental need to communicate is going to be the same unless we evolve as a species to have a different set of needs. With the advancement in technology, we may have telepathic communication or we might be living in an alternate reality to communicate with other humans.

There are a few technologies that I would like to mention that are going to revolutionize the human experience of the future:

Artificial Intelligence(AI): Artificial Intelligence in the future is going to revolutionize research and design. The way we conduct user research is a very tedious and long process with lots of inaccuracies. Even the AI that exists today is a weak AI that can only do the task it is programmed to do, in the future when we are close to building artificial general intelligence, the AI will be performing the tasks that are actually needed in all instances. If we think about it, AI, machine learning and UX researchers have a lot in common, they both gather data and analyze users' behaviour patterns and interactions. Self-driving cars, Google Translator and Alexa are good examples of AI gathering data to create enhanced experiences.

The design process that we follow today won’t be the same in the future and the reason is automation. Automation will be a big part that is going to help UX designers to manifest faster and easier along with more accurate design research conductions.

Brain-Computer Interface: The form of communication of the future is going to be magical. It is doubtful that 30 to 50 years from today you will be reading a post like this on a screen. You might not have to type on your screens to get results for yesterday's news. Basically, there will be no middle man as with a Brain-computer interface there will be a direct connection from brains to the network and that means we could be connecting to other brains without a middle interface which is a screen.

In the world of brain-computer interfaces, our interactions will be completely different but one thing we can say that is going to be constant is the need to stay connected and communicate. The need to design better experiences will remain the same, just the form of experience will be different.

Extended Reality(XR): Extended reality is a conglomerate between Virtual Reality(VR), Augmented Reality(AR), and Mixed Reality(MR). Through VR we can step into a different world and experience a different reality. Currently, we use a VR headset to experience this. In the future, with brain-computer interfaces, this form of experiencing VR would be completely different. Similarly, AR augments an extrapolation of our existing realities and MR is where the digital and physical worlds merge. In the future, the experience of games, movies, and other forms of entertainment and connections would be revolutionized with extended reality technology.

UX of the future

Technologies like AI, brain-computer interfaces, big data, and XR are like plain canvases. Through the ever-evolving UX practices, we can paint beautiful experiences for humans. The form of experiences created by these technologies would be different. At this point, it can’t be accurately predicted how different the experiences would be. But, one thing that we can predict for sure is that human needs are going to be the same and designers will be creating better experiences for the users. And I would like to say that the term UX designer might evolve to experience maker. Below are a few practices that will be relevant in the future as a UX designer:-

User Research: As an experienced maker of the future two things is going to be constant. One is the human need to consume experiences and another is the need to understand humans as a designer or makers. With the advancement in technologies like data AI, Machine Learning, and Big Data it will be easier to predict and understand user behaviour. The tools to conduct user research are also going to enhance but the need to study humans and conduct user research is going to be constant.
Emotional Design: The need to empathize with the end-users and understand their emotions and feelings is also going to stay the same and we will be seeing more products from an emotional standpoint. It will be easier to achieve a task functionally considering the technology but bringing personality and human emotions are going to be the same. Creating reflective design is also going to stay very relevant in the future.
Experience Makers: The medium in which we are going to design or the medium in which the user is going to experience communication is going to evolve. We will be moving towards extended reality or a true brain-computer interface but in any scenario, the need to create a good user experience is going to stay constant in the future. There will be several things that are going to be automated. For example, we see how we have website builders and logo makers, and the UI and development aspects are becoming easier day by day. In the future, what will truly be required is to design and conceptualize an experience for the user.
Problem-Solving: Humans are creative beings and they always come up with creative and innovative solutions to problems that the user faces. In the future, this skill will be as relevant as it is today to be a creative thinker until and unless there is an inception of artificial general intelligence or artificial superintelligence. Not just in design but in every other field also, this skill is going to be the most relevant in the future.
UX Maturity Model: In the future, we will see more companies that will be at the highest level of UX maturity, and achieving a good user experience is the most important thing for UX designers or companies. The form of a company is also going to be different in the future, there will be more independent designers collaborating with companies and other designers. With technologies like XR and brain-computer interface, collaborations will become easier to manifest better user experiences.

We might be a multi-planetary species or have discovered telepathy through a brain-computer interface or we might have artificial superintelligence with AI being smarter than human beings. However, one thing will be constant,i.e., the need to create human-centric design and solve human problems.

How to make React Applications SEO-friendly?

2023-01-23T12:30:36.188Z

SEO friendly react app

Before making an SEO-friendly React application, let’s know what exactly SEO is, why it is so important to consider while building the applications and why it is challenging to optimize these Single page applications like SEO-friendly React apps.

What is SEO?

SEO stands for Search engine optimization. SEO is the practice of improving quality traffic to your website when people search for products/services related to your business in Google and other search engines.

Why is SEO so Important?

In this competitive world, SEO marketing is very important for our business. Search engines serve millions of users daily based on users' queries. So, our website/business must stand out in search results when users try to find related information about our products/business

How Google Crawls and Indexes Webpages

As we know Google is one of the popular search engines and the majority of online users use it. So, let's have a look at how google crawls and indexes web pages.

Crawling and Indexing a Website

Crawling: Crawlers like Googlebot search the internet for new and updated websites to identify their content. Crawlers find new pages when they follow links from sites they already know. They also crawl sitemaps and web pages offered by managed web hosts.
Indexing: Indexing Once Googlebot finds new pages, Google tries to understand what these pages are about. While Google can understand the contents of images and videos, it understands text best. Take advantage of meaningful titles, headings, proper meta descriptions, and topical content so that Google sees what you want it to see on a particular web page.

Challenges In Optimizing React Apps for SEO

There are several challenges that one can face to build an SEO-friendly React app. Some of them are discussed below.

Delay in content fetching

As we know React applications rely on JavaScript, and they often run into problems with search engines. The initial HTML does not contain any meaningful content, and a user or a bot must execute JavaScript to see the page’s actual content.
It means that Googlebot detects an empty page at first and then the content is seen by Google only when the page is rendered. This will result in a delay in the indexing of content when dealing with thousands of pages.

Load time of web page

Fetching, parsing, and executing JavaScript takes some time. JavaScript may need to make network calls to bring the content, and the user may need to wait for a while before they can view the requested information.
Google has laid out a set of web vitals related to user experience, used in its ranking criteria. A longer loading time may affect the user experience score, prompting Google to rank a site lower.

Page Metadata

Meta tags are helpful because they allow Google and other social media websites to show appropriate titles, thumbnails, and descriptions for pages. But these websites rely on the head tag of the fetched webpage to get this information. These websites do not execute JavaScript for the target page.
React renders all the content, including meta tags, on the client. Since the app shell is the same for the entire website/application, it may be hard to adapt the metadata for individual pages.

The Inability to create built-in Sitemaps

A sitemap is a file where you provide information about the pages, videos, and other files on your site and the relationships between them. Search engines like Google read this file to crawl your site.
React does not have a built-in way to generate sitemaps. If you are using something like React Router to handle routing, you can find tools that can create a sitemap though it may require some effort.

How to Make SEO-Friendly React Apps?

Discussed below are some methods that contribute to making an SEO-friendly React app.

Prerendering

To make a SPA (Single Page Application) visible for crawlers to use pre-renderers: programs that can detect Googlebot requests. Once a pre-renderer understands that a bot is crawling your site, it provides the bot with a static HTML version of your SPA from the server so the bot can index it. But how does an HTML page appear on the server? In the case of pre-rendering, all HTML pages are preloaded and cached in advance with Headless Chrome, a tool that helps software engineers effortlessly work with server environments.
You might want to opt for pre-rendering because it’s easy to implement. You generally don’t need to make any changes to the existing codebase, or if the need does arise, the changes will be minimal. Finally, pre-renderers can transform any JavaScript code into static HTML files.
However, you should keep in mind that pre-renderers are paid tools and might not work well with websites whose data frequently changes.

Isomorphic React

The Isomorphic JavaScript Technology has an automatic capacity to detect whether JavaScript on the server side is enabled or not. In cases where JavaScript is disabled, Isomorphic JavaScript works on the server side, thus providing the concluding content to the client-side server. All the required content and attributes become readily available once the page starts to load. However, when JavaScript is enabled, it performs like a dynamic app having several components. This enables faster loading compared to the conventional website, thereby leaving the user with a smooth experience in the SPAs.

Server-Side Rendering

If you wish to build a React Web application, you need to have a precise knowledge of client-side rendering and server-side rendering. Client-side rendering is a Googlebot and a browser that receives empty HTML Files having less or no content.
Subsequently, JavaScript code downloads the content from the servers and allows users to view it on their screens. However, client-side rendering faces several challenges concerning SEO. This is because Google crawlers cannot consider any content or view less content that is not indexed appropriately. On the contrary, with server-side rendering, the browsers and the Google Bots receive HTML files along with the whole content. This assists Google bots in performing indexing and ranking higher without any hassle.

Some React SEO Tools

React Helmet

This is a library that enables developers to set the HTML metadata in the header of a component. With this tool, one can easily update the meta tags on the client side as well as the server side.
React Helmet supports every valid head tag including meta, title, script, NoScript, style, link, and base; server-side rendering; and every attribute for title tags, body, and HTML. Moreover, it enables callback from tracking the DOM alterations. The nested components override the duplicate modifications in the head and these duplicate head modifications are preserved when they are specified under the same component.
This tool not only makes your web app SEO and social media-friendly, but also facilitates modifying the title, metadata, and language of the page. We can combine server-side rendering with React Helmet for the best results.

React Snap

This tool is responsible for pre-rendering a web app into static HTML using Headless Chrome for crawling all links starting from the root. Zero configuration is the main feature. You do not need to worry about how it works or how to configure it.

React Router

This is a component for creating routes between the various pages/components and makes it possible to develop a website having an SEO-friendly structure thus helping in building an SEO-friendly React app.

Server-side rendering with Next.js

As we know Next.js is one of the popular frameworks built on React which supports SSR. So, let’s have a brief look at how Next.js works. Next.js is a popular framework that helps you develop React apps that work on the server side efficiently and quickly. It enables automatic code splitting and hot reloading. In addition, this framework can provide full-fledged server-side rendering, which means HTML is generated for each request when the user makes a request.

Due to this, Next.js has become the ideal choice for solving the SEO challenges of a React app with dynamic data. However, for utilizing server-side rendering on React, developers will also need to use the Node.js server capable of processing requests on runtime.

Key Features of Next.js

Facilitates full-fledged server-side rendering
Supports static page generation at build time
Supports Hot Module Replacement – seeing all changes in real-time.
Intelligent enough to load only required CSS and JavaScript.
It comes with many ready-to-use components.

Conclusion

While developing applications with React, we should be careful about the website structure, what pages are loading, the loading time, and how long it will take the search engine bots to crawl and analyze the pages. Single Page Applications offer a seamless user experience, a native-like feel, and improved performance, and they should not be disregarded just because of the SEO challenges.

Choose the Best Agile Product Development Method for a Successful Business

2023-01-23T12:27:43.743Z

best agile methodologies

Progress is a word that resonates with each one of the business owners. It is that continuous improvement that helps them to reach the pinnacle of success. Agile is one such methodology that is used by almost every organization these days. Agile methodology is the proper management and monitoring of step-by-step progress that has attracted business owners to it.

Introduction

Unlike the traditional, time-boggling development methods like the waterfall model, spiral method, etc., agile is more inclined towards continuous communication between the client and the engineering team. Agile software development focuses on the micromanagement of things by tracking the smallest progress in a defined manner. This way the changes in the requirements that occur even in the middle of the project completion are infused more progressively.

Types of Agile Methodologies

There are different types of agile methodologies, based on your requirements, you can choose among the following:

Scrum
Scaled Agile Framework (SAFe)
Kanban
Extreme Programming
Feature-driven Development
Dynamic Systems Development Method
Crystal
Lean

Scrum

Scrum, the most widely used agile methodology, is the pioneer of agile. It is based on micro planning where every small goal is set and achieved in a given period. It follows a basic structure of specialization, where big room planning is done for accomplishing the goal. This goal is further divided into numerous short-term goals that are achieved as per the time management specifications of the scrum methodology.

If we look closely, scrum has a structure like that of a tree, where there are different stages of product development and time management in parallel.

This table depicts a clearer picture of how the Scrum methodology works.

A typical scrum methodology consists of releases. These releases comprise the development of a cluster of features in various disciplines. Now, in a single release, the work is divided into cycles. These cycles are further divided into months. For example, if a release is to happen in the next 6 months, it can have two processes of 3 months each. One cycle is divided into several sprints. And finally, a sprint is two weeks, including weekends and holidays.

Similarly, a feature is the big picture of a product which is explained in a more detailed manner in epic. So, if a feature is big, it can be explained in multiple epics. Epics are further divided into user stories, which are dedicated to individual team members, say a developer, a tester, a designer, a tech writer, and so on.

Used in Projects like:

Web Development
Agile Management Courses
Mobile App Development
IT Service Management
Cloud Computing Projects

Scaled Agile Framework (SAFe)

SAFe or Scaled Agile Framework is technically an extension of agile practices. It is a framework that encompasses team handling on an enterprise scale. Unlike other agile methodologies where a handful of teams coordinate, plan and execute a goal, SAFe focuses on the larger picture.

SAFe is a framework for agile software development that eyes on handling larger teams. It guides not only cross-functional teams but also cross-functional organizations. Helping in organizing a high-compliance setup, SAFe is the primary choice of some of the world’s biggest companies like Cisco, Barclays, Panera Breads, and so on. You can manage agile teams and portfolios, abiding by the company’s strategies, almost seamlessly. On a broader spectrum, it would be justified to say that SAFe is a perfect amalgamation of agile principles, Lean, DevOps, and System Thinking. Four levels of SAFe are dedicated to various types of configurations, mainly depending upon the complexities of projects. Let’s understand the levels through this table.

One of the most important reasons that invite organizations to adopt SAFe is to attain business agility. It functions in a way that classifies not just the progress of a team but that of the whole organization(s). It keeps businesses ahead of their games by adapting to the latest market changes and grabbing the progressive opportunities that thrive for innovation.

SAFe can be used in projects that:

Handle larger teams
Are meant for bigger enterprises
Align their portfolios with market advancements

Kanban

Derived from the Japanese word, this agile methodology can be termed “just-in-time”. In this method the core is transparency. The idea is to have everything available on the same page/board. In Kanban, there is a board designed in rows and columns. Here, an agile software development company can have information on every component of the project following its progress. This board is updated as per the advancement of the project. In case any new task is added to be done, a card is created.

Kanban is also more or less similar to scrum methodology, only the difference comes in terms of presentation and micromanagement of the software development process.

Used in Projects like:

Design and Production
Production Support
UX Designing Projects
Patch Releases
Press Releases
Report Development

Extreme Programming

As the name suggests, Extreme Programming gives you extreme results. This methodology is mainly based on the coordination between developers, clients, team managers, team architects, and the other members involved. It begins with the testing of software from its primary stage. The primary focus in this agile framework is given to discussion, communication, and collaboration.

The development team is always flexible enough to make changes to the product even after its final testing stage. There is a lot of planning, testing, customer acceptance, refactoring, pair programming, etc. Though this method needs a lot of hard work and a great amount of coordination, the result is amazing. Extreme Programming is not very popular due to its nature of continuous changes.

Used in Projects with:

Less staff maintenance
No Constant Functionalities
Frequent delivery of products

Feature-driven Development

Another finest agile framework is Feature-driven Development. This method is a combination of five steps, namely:

Creating a complete model
Making a list of features
Planning according to features
Designing for that feature
Building that feature

This agile methodology is following the above steps for two weeks. So, you have to strategize everything to get fit in two weeks. This method requires high-end designers, developers, and high-level planning. Like Extreme Programming, this method is also not very popular as say scrum methodology.

Used in Projects with:

A large number of employees
Complex Processes
Feature-driven Projects
Projects with a long-term development process

Dynamic Systems Development Method

This method is more of a quick delivery framework, primarily designed for common industries. Here, everything has to be fast because depending upon the changes in the requirements, the developers are supposed to be flexible enough to incorporate them, reverse the work, rework the product, and so on. It is entirely based on business needs. So, some of the things that play a key role here are:

Eye on goal
Timely delivery of the project
Team collaboration
Keeping up with the product quality
Iterative development of the product
Transparency in communication

Used in Projects with:

On-time delivery
Budget-friendly projects
All sizes of projects
Any given business sectors

So, the dynamic systems development method can be used in any type of agile software development, depending upon the organization’s preferences.

Crystal

This is a huge agile framework that has different subgroups. Crystal is a methodology that emphasizes team interaction and collaboration. It gives full freedom to the project team in terms of running the process. A team can have its process to go on with a project. This framework was created keeping in mind human interaction and how many tremendous ideas it can bring to the table.

Based on the size of your team, you can choose any of the following crystal families.

Where is crystal methodology applicable?

Unlike other agile methodologies, crystal is completely dependent on teams’ interests. As mentioned above, it is not dependent on one set of tools or processes, rather it is more of a team-driven methodology. So, depending upon the teams’ requirements, it can change its methodology on and off.

Lean

Derived from Lean manufacturing, Toyota, in this agile software development, the same framework is designed for software development. It focuses on the quality development of a product. Here are the points of importance:

Focus on quality
Proper documentation of infrastructure
Refrain from spending too much time in planning without understanding the actual requirements
Effective team management and coordination
Optimization of workflow

Lean can be used in organizations where the focus is on:

Optimization of workforce
Best use of resources
No wastage of efforts
Becoming valuable for the customers
Improving quality control

It is from this wide variety of agile methodologies; you can choose the one that is more appropriate for your business. If followed in a regulated manner, these frameworks can give your business excellent results.

7 Psychology Theories in UX to Provide Better User Experience

2023-01-23T12:21:36.605Z

UX design psychology

UX design psychology is about knowing the user behaviour in different circumstances and interaction with products which varies for different scenarios. What is the relationship between Psychology and UX Design? I am going to unveil the answers in this blog. I’ll share my thoughts on the following two disciplines:

the relationship between Psychology and UX Design
how their abilities and work intersect at various times during the design process.

How Do We Define Psychology?

Psychology is a discipline that studies human behaviour and mental models. The main focus lies in understanding how diverse environments/societal pressures impact people to act/behave in different ways.

Relation Between Psychology and UX Design

Let me paint a picture of these two vocations and the skills they share.

The image above might not explain everything about the two occupations, but it'll give you an idea. They both have the same ability. They have three things in common:

Research
Empathy and Emotional Design
Balance intuition with data.

These three points are moving around the human centre. This is the connection I saw and it piqued my curiosity to know the relationship between design and psychology. I'm particularly interested in observing human behaviour and comprehending the environment and societal pressures that influence it.

Through both Psychology and UX design practices, you learn how the user will engage with your product in various conditions and how your product must respond to all these circumstances.

"A designer who doesn’t understand human psychologies is going to be no more successful than an architect who doesn’t understand physics." -Quote(Joe Leech)

Human Psychology Theories to Create Impactful UX Design

If you understand the relationship between Psychology and UX Design, you'll be a better UX designer. Some of the human psychology theories that influence users' decision-making and how we make decisions on the basis of psychological concepts are as listed below. We can develop precise responses and activities from our target audience by knowing how different psychological phenomenon impact human behaviour.

Von Restorff effect
Von Restorff's effect is a phenomenon that occurs when a person is exposed to isolation. The isolation effect suggests that individuals will recall an object that stands out from the others.

Let me throw some light on it. The memories of the human mind always categorize data based on the shape, size, colour, smell, or sound of the substance. So, whenever we see something unique, it gets stuck in our minds.

This is the principle about how the human mind grabs data. But how is it relevant to the UX Design and Design process? Let me explain more from the designer's perspective with an example.

Example: You must have seen the prime video subscription offers. They highlight one offer out of the three or four that is best for you. And that one card always stands out from the others. Or they do that by changing the colour or size of it.

Let's say that I show you five shoes where the colour of the three shoes is black and one is grey and the 5th one is red. Which one would draw your attention first? Of course the red one. Your memory will hold more information about the red shoe as red is from a different colour family.

Hick’s Law

The second and one of the most important psychologies is Hick’s law. This law states that the time taken to make decision increases with the number and complexity of options.

For instance, the other day, I spent a lot of time on my food delivery app before choosing one. But, by then the food went out of stock. The amount of time I spent was because of the number of restaurants and items on the menu.

If you want to buy a product or subscription for any product, the more options you see, the longer it'll take for you to make a decision. And sometimes this can lead to not buying anything.

I am sure we all have experienced this, visiting many shoe shops and picking nothing. It’s because we saw many options and that left us in confusion. There is a limit to our mind on how much cognitive load it can take and make a decision out of it.

The graph on the top is the representation of Hick’s Law. The more time you take in decision making the greater number of options pop up.

As per Hick’s rule, we as UX designers always keep these theories in mind while creating any product/service. Designers need to analyze the design to ensure they give users few options to complete any job or goal.

The above example is an excellent way to show the effect of this rule when you create any UI form and ask users to choose anyone from it. This makes the process of choosing much easier.

But don’t get confused. I am not saying that if the business is required to give fifty options you just have to put five. You need to give fewer options at one glance or in one section.

The Principle of Least Effort

The principle of least effort is one of the important Psychology principles. It says that users are always likely to choose an easier way to complete any job or action. Users are less likely to use any product that has difficult functionality.

So, whenever a UX designer creates any flow for completing any job or action, they should keep this law in mind and keep things simpler. This will help your customers to take quick action.

Tip: Changing the layout of the interface very often can result in losing customers.

In the above image, you can see how users want to complete their tasks.

I won’t say this is the perfect example of what this law means. But it gives us the idea that designers don’t need to make a complex flow if the same task can be achieved in simpler steps.

Note: It’s a never-ending cycle of creating more iterations and trying to find a better or simple way to complete the same task.

The Serial Positioning Effect

This principle of Psychology is more about the conscious intellectual activity of the human mind. Or we can say it talks about how a human mind grabs data. According to this theory, the human mind is more likely to recall the first or last piece of information.

Suppose, I show you a list of product names, and after some time I ask you for those product names. Then the probability of recalling the first/last information is higher than that of the middle ones.

The above picture is a representation of the same principle of how individuals recall information. The primacy effect is cognitive bias, which explains, that an individual's mind has a tendency to recall the information that is represented in the first place.

This effect is another cognitive bias that refers to a tendency to recall the information that is presented recently. This is why we are only able to recall the information that we see at first or the last.

The Principle of Perpetual Habit

The principle of perpetual habit says that your user wants to rely on a familiar routine or habit of completing any job or objective. To be precise, designers should always be considerate of the flow or the new function that they are providing to the users.

Let me ask you a question. Where do you see the footer or header in a word document? Of course, the answer would be, the footer is seen at the bottom and a header on the top of the screen, right? But why is it so?

The answer is, that we are in habit of this kind of framework if we see any new framework, we need to guide our mind to take those actions very precisely. And it takes some time for our minds to understand the flow and get accustomed to the change.

We all have experienced playing video games with customized controls on our laptops. And, whenever we play the same game with different controls, we face problems. Because we are so much in the habit of the same control that our finger goes subconsciously to the same place.

So, let me show you one example of the same interaction on the CTA.

As a result, if we are used to executing a specific action or reaction based on a memorized pattern, we'll repeat the action or reaction if the pattern appears again.

The same thing is happening in the above example. Of the three pairs of TAS, two of them have positive responses highlighted in bold colour. But, in the third one, the negative response is highlighted. So, it is very likely that we will click the Delete CTA subconsciously.

The Principle of Emotional Contagion

This principle refers to the emotional transfer from one to another. It says that individuals will copy/sympathize with the emotions/behaviours of others.

For example, if you see someone crying then you may become sad or you may start crying. If you see someone laughing you may laugh or smile. Because emotion is contagious. This law says that a designer can transfer emotion with layout, picture, and illustration. Also, they can make their audience feel what they wanted them to feel.

Let me give you a nice example of this.

Duolingo is a language learning app for learning a different language. This app uses language birds. Whichever emotion they want you to feel, they do that by making their bird sob, cry, or laugh. These all emotions come when you do mistakes or missed a lesson or completed a lesson.

The Principle of the Aesthetic-Usability Effect

This law of psychology says that we as human beings like beautiful things. Most of the time, we appreciate aesthetically pleasing things, but sometimes we ignore the function/use case of it.

This principle says that sometimes aesthetics become a point of making a decision. So, designers need to make their stuff aesthetic appealing.

Any mediation school can use the software shown above. If all three apps have the same features and functions and you ask your users to pick one, they'll go with the most attractive one. This is due to the aesthetic usability concept. People are usually drawn to attractive things.

Conclusion

Having knowledge of human psychology for a designer is very crucial to design a better experience for the use of a product/service.

Human psychology laws help predict human behaviour in various circumstances/social scenarios. It’s not only limited to the interaction with the product but it also gives us instructions about the cognitive load or selection bias in the scenario where the user is going to interact with the product.

Cyber Security: Most Important Aspect of a Successful Business

2022-12-11T16:47:21.451Z

As business owners, there are many concerns that people have, and cyber security is the top among them. In this era of the so-called digital age, everything is done online now. And as it is said, “with great power comes great responsibility”, the power of the internet is shouldered by cyber security.

Cyber Security in business is all about protecting the data, not just the online data but also the offline data, from theft and any sort of damage. It includes the security of personal data, intellectual property data, protected information, sensitive data, government data as well as the data of various industries. It is a shield that helps in safeguarding the entire data of a business. Running a business is not everyone’s cup of tea and what makes it further difficult is the absence of cyber security. Let’s learn what impact this service has on the running of a successful business.

Importance of Cyber Security in Business

There is a plethora of information available on the internet that backs up the cyber-attacks done on several organizations. In fact, as per OTA (Online Trust Alliance), almost every company has undergone a cyber-attack in one way or the other. The bigger the organization, the more vulnerable it is to such attacks.

Let’s have a look at the importance of cyber security in a business.

Freedom To Surf: It allows you to freely surf the internet without being at risk all the time. You can easily do your research and go to different websites without any worry about data comprise.
Safeguards Personal Information: It protects your personal information that is there, on saying some online shopping portal, employee data of an organization, etc.
Increased Productivity: An attack from a malicious file or a virus can slow down your system’s speed and efficiency. Cyber security makes sure to stop any such attack right at the first step.
Maintains Your Website’s Rank: Once your system/website is infected, it is likely to shut down thus causing a huge fall in its rank. With cyber security in business, you can rest assured that the virus can never be the reason behind any fluctuation in your website’s rank.
Protects From Spyware: Spyware, a software that gets installed in your system without asking for any permission. It is meant to keep track of your online activities and share all the information with the cyber attacker. By having good cyber security, you can ensure that spyware never enters your system.

Threat Analysis in Cyber Security

There is a lot that can be written about threat analysis. But here we will discuss the process of threat analysis. Given below are the factors that help in analyzing the vulnerabilities that lead to any cyber-attack.

Analysis of Data Worth Saving: The very first step of threat analysis is to detect what needs to be protected and what is not. It includes information that is sensitive, susceptible, and confidential.
Details of Previous Attacks: Collecting the data from previous cyber-attacks helps in identifying the entry ports, vulnerable areas, and areas that demand high-end security. It could be the network, server, endpoints, etc. By doing this, we can stay focused on the pinpoint of cyber security in the business.
Analysis of Vulnerability and Risks: This helps an analyst determine how to neutralize the attack by ensuring that the security measures, policies, and other adequate measures pose no threat to the confidentiality, integrity, and availability of data.
Finalizing the Mitigation Measures: After analyzing the above aspects of cyber threats, an analyst categorizes these threats into different data groups. Then he identifies their pattern and finally acts on implementing the mitigation measures.

Famous Examples of Cyber Attacks

Cyber security in business is of utmost importance. Some of the global cyber-attacks that proved extremely worrisome for businesses across the globe are listed below.

Atlanta cyber-attack, 2018: This was a massive ransomware attack that shook the government of Atlanta, USA. The attack was noticed in early March when the government system was hacked. Being the major transportation and economic hub of the USA, Atlanta faced a crisis for quite a few days. Travellers couldn’t use the airport’s Wi-Fi, traffic ticket forms were filled manually, and a lot of chaos was created for the citizens.
Luas cyber-attack, 2019: This was another ransomware attack that affected Luas, a tram management system in Dublin, Ireland. The hacker demanded a ransom of 1 bitcoin whose value then was € 3,385.
Health Service Executive cyber-attack, 2021: Since the attacks are done on famous and larger organizations are mostly ransom war attacks, so was this one. On May 14, 2021, this attack caused all the IT systems across Ireland to be shut down because of its severity. This was a Conti ransomware attack, which came into the picture in 2020. It is known that it has more or less affected all the versions of Microsoft.
Colonial Pipeline cyber-attack, 2021: This attack targeted the American oil pipeline system in Houston, Texas. It hacked the computer-managed system of the pipeline. This ransomware attack got successful as the hackers got paid $4.4 million by the government, though $2.3 million of the amount got recovered.
Steamship Authority cyber-attack, 2021: In June 2021, a ransomware attack on the Steamship Authority of a ferry service in Massachusetts, USA, caused a halt in the service. It attacked their system by affecting their logistics and made the system inoperable.

Preventive Measures for Cyber Attack

Preventing cyber-attacks is not an impossible task if all the measures are followed religiously to ensure cyber security in a business. But in the past few years, it has become the most difficult task because of the rise in remote work and hybrid working models. Availing of the best cloud technologies is the best way of dealing with such issues. Also, given the fact that attackers are getting experts in new technologies, it should be the priority of every kind of business to invest in the latest cybersecurity solutions. Discussed below are some of the latest cyber-attack preventive measures that could be extremely helpful in the coming years.

Safeguarding from On-Demand Information Access

Issue: With everything getting digitalized, today organizations have the data of millions of users, like their social media clicks, banking information, shipping information and so much more. This makes them more vulnerable to cyber-attacks. As discussed in the above examples, such huge classified information is an invitation to ransomware attacks.
Solution: Trending technologies like zero trust architecture, behavioural analytics, and elastic log monitoring are extensively important in shielding organizations from cyber-attacks.
Zero Trust Capabilities: As more and more employees are working from home currently; it is essential to shift the security more towards users and physical networks rather than focusing on centralized data.
Behavioural analytics: Since this trend of attacking an employee’s system has been witnessed worldwide, analyzing their activities is very helpful. Such as their login time, the websites they are accessing for work, sites where they are spending more time, their log-out timings, etc.
Elastic monitoring of data: Monitoring small data is still easier than taking keeping track of bulk data. With flexible monitoring, organizations can extract the desired information and analyze it in terms of security.

Using the latest AI solutions

Issue: Advancements in technologies like Artificial Intelligence and Machine Learning, have given attackers new and advanced tools to launch cyber-attacks. Such attacks can be controlled by having an automated response or a predefined defence system at the first step itself.
Solution: Organizations should stay ahead of the attackers by adapting to more advanced AI solutions. There should be operational and technical changes in the traditional security software. Apart from the above-discussed measures, businesses and organizations should continue to follow the generic cyber security norms like staff training against identifying cyberattacks, keeping the systems up to date with the latest updates, ensuring endpoint encryption, and the list continues.

How Do We Ensure Cyber Security In Business At Fibonalabs?

Preventing cyber-attacks is not an impossible task if all the measures are followed religiously. Discussed below are some essential steps that are followed at Fibonalabs.

Staff Training: This is the first and the most effective measure for any organization. Training your staff in recognizing the red flags of cyber-attacks is very important. Cybercriminals find it easy to attack an organization’s system through an employee’s account. Therefore, it is advised not to open links from unidentified sources, verify unknown email addresses, ensure safety before sending classified information via mail, and so on.
Latest System Update: It is highly recommended to keep your systems up to date with the latest updates available. A non-updated system is more vulnerable to attacks as cybercriminals are well aware of the loopholes.
Endpoint Protection: All the endpoint devices such as laptops, tablets, mobile devices, and desktops, should be fully protected by some endpoint protection software. There should be a proper analysis of the activities done on these systems through agent deployment.
Firewall Installation: A firewall is the first or the outermost shield of a network. It stops the attack at the very first step. Hence, it is of utmost importance to have a firewall installed to safeguard the network.
Data Backup: Whether you run an organization or you are a normal employee, data backup is recommended in both scenarios. Cyber-attacks are not restricted to just ransomware, there are viruses, malware, spyware, and several other types of attacks that could damage your data. So, taking backup is extremely helpful and with cloud management, even this process becomes easy.
Controlled Access: The easiest way to attack a system is to physically inject it with a virus. This can be done using a USB-like pen drive, external hard disk, external Bluetooth device, etc. There has to be a barrier in the network that doesn’t allow these devices to get access to your system.
Secured Wi-Fi: In this digital age, having Wi-Fi is the most normal thing. Now gaining Wi-Fi access is another entry port for cybercriminals to execute an attack. Thus, you must always ensure the secure your Wi-Fi networks as it connects your entire business system.

Atomic Design: Effective Way of Designing UI

2022-12-11T16:42:49.766Z

Hello people, I’m pretty sure that you might have heard the term “Atomic Design” at some point in your daily work life. If you haven’t heard about this beautiful concept yet, then let’s dive straight into what atomic design is and how it helps UI designers.

I have used the concept of atomic design after watching the speech of Brad Frost regarding atomic design on Youtube. The concept was meant for front-end developers but now UX designers also use it. As you know, the Internet is filled with many super UI design tools, but mine and almost every digital product designer’s favourite is Figma. Now, why Figma? And why do we use it for Atomic design? Figma is free to use! It is one of those tools which supports component-based design.

Advantages of Using Atomic Design Methodology

Components, components & components only, these components made the designer's life much easier and made it one of the most used features in Figma. Component-based design helps the designers to design a parent component and to create multiple child components which help the designers to reflect the changes of the parent design to all the child components.

For example, when I want to change the colour of a button, I only need to change its parent component and it reflects on all the other screens. That is the kind of power that components hold and it is derived from the concept of atomic design.

Coming to the developers, one of the most used frameworks in the market now is React. React framework has components that are independent and reusable bits of code. This makes it easy for the developer to write code for a particular component only once and it can be reused in different sections and pages of the UI, thus making the developer's life easy in executing the code.

Now let us dive straight into what atomic design means and how it helps designers and also developers to make better user experiences.

What is Atomic Design Methodology?

Atomic Design is a methodology developed by Brad Frost to guide developers in the creation of more intentional and hierarchical interface design systems.

What Is the Purpose of Atomic Design Methodology?

This process is known as Atomic Design since its basic concept is based on chemistry and the study of matter's composition. The periodic table of elements is a collection of fixed atomic elements that make up the cosmos. Everything around us is made up of these components.

These atomic elements have set characteristics that identify them in chemistry. On their own, oxygen and hydrogen are atoms with distinct properties. When these elements are mixed, however, molecules are formed, which have their distinct features based on the atoms they contain. The water molecule is formed by joining two hydrogen atoms with oxygen.

This concept of how smaller components, or atoms, may be merged to form larger items or molecules, is similar to the design world and the numerous elements we utilize to develop our designs. Following the atomic design, principles give us a framework for creating our designs and designing our design systems and pattern libraries.

Elements of Atomic Design

The Atomic Design process is divided into five separate stages, the first three of which are modelled by their chemistry counterparts. Each stage builds on the one before it, serving as a collection of items from previous stages.

Atoms
Molecules
Organisms
Templates
Pages

Atoms: Atoms are the tiniest building units in our system, just as they are in chemistry. Instead of atoms like oxygen or hydrogen, designers utilize buttons, inputs, labels, and other microscopic components throughout their work.

For example, Iconography, whether it's a menu icon or an avatar, falls into this category since they're little parts that join together to form the next step - molecules. This helps me to concentrate more on a particular element and make design changes to it accordingly.

Molecule: In this stage, we must take our atomic design elements, each with their qualities, style, and format, and begin to join them together into new groups in the molecule stage.

Take our avatar atom, for example. A profile molecule may be created by combining the avatar atom with name and title labels, as well as additional atomic constituents. Each atom has transferred its unique qualities to a group that has distinct traits on its own.

We may combine the same atoms in different ways to generate distinct molecules for usage in our design, the same as in chemistry. The groups are still rather simple collections at this point.

Organisms: Our collections of atoms and molecules grow more sophisticated as we progress through the organism stage than at the molecular level.

Take our 'profile' molecule which I’ve created, for example. It was a simple element, consisting of an avatar and two label components. I have attached it with the active molecule to make it a post-organism.

The organism isn't quite finished, but it's a component that may be utilized in several designs or layout templates.

Templates: At the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action. You saw how pieces started coalescing into functional blocks of material in the Organism stage, and how those blocks started coming together to produce a template of blocks that can be utilized across several pages. Consider templates to be the pattern for our final page designs. They're still elements at this point and won't have any meaningful data — similar to a wireframe.

Our template will now contain a statistics organism, which will display some facts about the profile, such as activities done, skill levels, and so on, based on the organism we created for the profile page. At the bottom, there will be a connection organism. We now have a page template using this method. This template may be used more than once in our app.

Page: The Atomic Design process culminates in the creation of pages. This is where template instances are produced (in this case, one for every post). You may not construct pages for every scenario throughout the design phase, but it is beneficial to generate a few versions.

Your template design may be influenced by changes in your data, such as changed profile information or languages. You may test for these variances and make global changes to your templates by working your way out to the page level.

It's conceivable that you won't utilize all of the organisms in a template in certain cases, perhaps because a user doesn't have them enabled or because they don't apply. In those cases, you'd alter which sections of the template are displayed on the pages.

Most clients and internal stakeholders will assess the design on pages since you can see everything in one location. Though it's also a good idea to discuss at the template stage, seeing the full fidelity of your design together might help you detect flaws or portions of the design that aren't functioning.

Conclusion

It's simple to get started with atomic design. Start by sketching out the core pieces, or atoms, that you'll need in your design, keeping in mind the notion of building up from small parts to templates and pages. Starting with a free UI kit is a good idea because many of them already have these atomic pieces for you to tweak.

After that, practice assembling your atoms into molecules and creatures to discover how they interact and adapt in various configurations. It's up to you how you organize your atoms, molecules, and creatures, and it'll probably change from project to project.

Cloud Computing Architecture: Components, Importance, and Tips

2022-12-11T16:41:00.248Z

Introduction

Cloud computing, is a term that had already hogged enough limelight but then Covid-19 happened. One of the most famous technologies of all time, cloud computing encompasses many services, from databases, storage, software analytics, servers, and so much more over the internet.

With the current setup of work, most of us are still working from home and cloud computing has played a pivotal role in making this all happen. So, let's understand the basics of it, starting with cloud computing architecture.

Cloud Computing Architecture

As the term architecture states, proper designing and planning of something so is the cloud architecture in cloud computing. It is divided into two parts, the front end, and the back end.

Front end: You can count all the endpoint devices, services, and applications in this category such as web servers, User Interface or client-side interface, network, mobile, laptops, etc. For example, Google, Firefox, and Microsoft Edge are all front-end cloud services.
Back end: Everything else that doesn’t come in the front end is categorized in the back end like servers, large storage devices, management of applications and services, security, etc. For example, Microsoft Azure, Google Cloud, and Amazon Web Services are all back-end cloud services.

This image is a perfect depiction of cloud architecture in cloud computing.

Components of Cloud Computing Architecture

As you can see in the above image, there are mainly five components of cloud computing architecture, namely:

Management
Application
Storage
Services
Security

You might come across articles where cloud services are further divided into subcategories but listed above are the basic cloud components:

1. Management: As the name suggests management refers to the overall management of cloud architecture. This includes:

Allocation of resources for various tasks
Management of back-end components i.e., application, storage, services, and security.
Building coordination among all the components.

2. Application: This may include anything from software to the platform. Whether it is system software or application software, the cloud manages them both effectively and efficiently. The application helps the clients and end-users in accessing the information they need. Cloud computing architecture helps users to interact with the application and perform desired tasks directly.

3. Storage: Storage is a big issue when it comes to saving data. Even with so many large physical storage devices and dedicated storage units, data storage often becomes a strenuous task. With cloud computing, this problem has been resolved to a great extent. Data like files, videos, and documents are stored over the cloud and it's straightforward to access them provided you have an internet connection. Some of the most popular cloud storage services are Microsoft Azure Storage, Amazon S3, Oracle Cloud Storage, and so on.

4. Services: Another important component of cloud architecture is services. There are mainly three types of services that the cloud offers, these are:

IaaS (Infrastructure as a Service)
PaaS (Platform as a Service)
SaaS (Software as a Service)

Shown above is the service-oriented architecture in cloud computing.

IaaS: Here cloud manages infrastructural services for you such as managing actual servers, virtualization, network, data storage etc. You can access these services via a dashboard or sometimes via an API. In IaaS user’s role comprises managing apps, middleware, and operating system while the cloud service provider takes care of hardware which includes servers, hard drives, data storage, and so on.
PaaS: In this service, the user takes care of running the app and managing the data. While the cloud service provider handles the rest of all from the runtime, networking, middleware, and storage to operating system and virtualization.
SaaS: This cloud service is responsible for handling everything from software maintenance, and updates to bug fixes and other tasks. Mobile apps and Web applications are the SaaS apps that we use on daily basis. It is the most advanced cloud computing service that encourages accessing mobile and web applications without actually downloading them. You can easily access an app via API or dashboard.

5. Security: This component of cloud computing architecture is one of the most important components, especially in current times. Since several small, medium, and big organizations are moving towards completely cloud-based services, security has a lot to do with it. Some of the most basic and generic measures that are taken by cloud service providers are:

Restricted client access to data
Continuous security auditing
High-end authentication
Multiple-ways authorization

These security services also vary depending upon the types of cloud computing models i.e., public, private, hybrid, and community cloud models.

Now that we have a good idea of cloud architecture, let’s move further and discuss its benefits.

Importance of Cloud Computing Architecture

There are several advantages of having cloud computing architecture. Some of them are listed below:

Saves Physical space: With this architecture, you can save a lot of space in terms of physical storage and on-site servers as everything is done over the cloud.
Streamlined communication external to and within the organization: With the cloud sharing of data among employees, client, and third-party vendors become easier.
Remote access made easy: With cloud computing architecture, accessing data remotely has become a smooth task. You can grant quick access to files and data for your employees.
Decreased Human Resources: With nothing much to maintain on-site like data storage units, servers etc., human resources can be employed for other jobs as dependency on them reduces.
Flexible scalability: As a business owner if your organization requires more storage, you can always buy it and extend the data storage capacity.
Cost-Effective: It is well-known thing that creating a physical data storage site is very expensive. With cloud computing, this cost has been brought down to a significant amount.

Tips For Cloud Computing Architecture in Your Business

Having discussed the components and importance of cloud computing architecture, it's now time to give you a few tips if you are planning to move your business to the cloud. These are some really important aspects that you must keep in mind before purchasing, renting or designing your cloud.

1. Plan well: You must plan well before going for such a big transition and have answers to the following questions:

What is the size of your company?
How does your current computing storage system work?
How frequently does file exchange among employees, clients, and vendors happen?
Why do you need to change the existing cloud architecture?

2. Promote usage of the cloud in your employees: For taking such a big step, it is of utmost importance that you encourage your employees to use cloud services, applications etc. This way they will get used to it and will get trained in advance.

3. Discourage saving unnecessary data: Another important aspect is to monitor your resources time-to-time. This happens when you keep checking on the files that are not required and are still taking up storage space. Allocate employees that are dedicated to removing unused or irrelevant files.

4. Ensure Endpoint Security: Introduce cloud computing security architecture where all the endpoints are secured. Ensure that your employees are using the secure network and their systems are up to date with security updates.

5. Regular Security Check: To avoid any sort of cyber-attack it is very important to carry out security audits frequently. Scan all the devices in your organization for any security threat.

Conclusion

Now that we know the effectiveness of cloud computing architecture, its importance, and its components, cloud services and applications are the need of the hour. With a great future ahead, cloud computing has become the top choice for small, medium, and large businesses.

Push Notifications: How to add them to a Flutter App

2022-12-11T16:39:10.531Z

Introduction

One of the most efficient ways to engage customers with your app is the introduction of push notifications. Whether a person is using the app or not, push notifications will notify them about all the latest updates that your app offers. And if an app is created using Flutter this task becomes even easier. Using Google’s Firebase Cloud Messaging platform, you can add push notifications to your app.

Before getting into the detail of how to add push notifications using Flutter, let's have a quick look as to what are its benefits.

Increases user retention i.e. a greater number of users download the app
Increases user engagement in the app
Significant increase in the conversion rate
Keeps track of user metrics
Improved user experience

Now, let’s have a look at the steps to add push notifications to your app.

How to Introduce Push Notifications In Your App?

With Flutter's fame over the years, it has become the top choice of business owners for cross-platform mobile app development. With the enhancement of features like push notifications, it has further made its place firmly in the world of app development. In this blog, I will help you understand firebase cloud messaging by showing the procedure of adding Push Notification in a Flutter app for android with the help of a sample project. Let’s discuss the steps that need to be executed for this phenomenal integration.

STEP 1: Set up and create a new Firebase project

Log in to your Google account and access the Firebase console.
Click “Add Project”, enter the project name, and click “Continue”.
Next, disable Google Analytics and click “Create Project”. The Firebase Project will be created.
Once the project is initialized, click “Continue” to land on the Project Overview Screen.

STEP 2: Integrate the Firebase Project with your Android App

Firstly, create a Flutter application using the command “flutter create notify” and open it in your IDE.
Now, click on the Android icon, shown on the Project Overview Screen and it will direct you to a form.
Fill in the following details:
Android package name (get it from the following path project directory → android → app → src → main → AndroidManifest.xml).
Next, enter a nickname for your app (optional).
Enter SHA-1 hash (click on the help icon to know where to get the SHA-1 hash value)

Click “Register app” and your app will be registered.
Next, download the google-services.json file, drag and drop it to the following path project directory → android → app, and click “Next”.
Add Firebase SDK using the code snippet below and click “Next”.

buildscript {
repositories {
// Check that you have the following line (if not, add it):
google() // Google's Maven repository
}
dependencies {
...
// Add this line
classpath 'com.google.gms:google-services:4.3.4'
}
}

allprojects {
...
repositories {
// Check that you have the following line (if not, add it):
google() // Google's Maven repository
...
}
}

Now, apply google-plugin-services to the Gradle files.
Lastly, click “Continue to console” and your Firebase set-up for the Android app will be completed.

STEP 3: Install Firebase Plugins

With the help of firebase cloud messaging, the most important step for adding Push Notifications is explained below, follow carefully. There are three plugins required for this sample project, which are:

firebase_core: Helps in using Firebases service with the Flutter app.
firebase_messaging: Helps in receiving notifications in the Flutter app.
overlay_support: Helps in building overlay UI.

To add these packages to your project:

Get their latest version from the pub.dev.
Add these packages to the pubspec.yaml file of your Flutter Project using the command below:
flutter pub add firebase_core //installs firebase core
flutter pub add firebase_messaging //installs firebase massaging package
flutter pub add overlay_support //installs overlay support
Look for dependencies in the pusbspec.yaml file. The added dependencies should be:
dependencies:
firebase_core: ^1.13.1
firebase_messaging: ^11.2.11
overlay_support: ^1.2.1

STEP 4: Create a UI for Flutter App and Add Push Notification Functionality

It is per your convenience and interest that you can build a Flutter UI. Here, I have purposely skipped the details for UI creation as I want to focus on the Push Notification functionality of the app.

The first step here is to define a variable for FirebaseMessaging. For that, run the following command:

class _HomePageState extends State {
late final FirebaseMessaging _messaging;
// ...

@override
Widget build(BuildContext context) {
// ...
}
}

Then, create a method as registerNotification() inside the class _HomePageState. This helps in initializing the Firebase app and instantiating Firebase Messaging.

void registerNotification() async {
// 1. Initialize the Firebase app
await Firebase.initializeApp();

// 2. Instantiate Firebase Messaging
_messaging = FirebaseMessaging.instance;
}

Now, to receive a Push Notification on your device and make changes in the UI, run the command below:

void registerNotification() async {
//...

if (settings.authorizationStatus == AuthorizationStatus.authorized) {
print('User granted permission');

// For handling the received notifications
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
// Parse the message received
PushNotification notification = PushNotification(
title: message.notification?.title,
body: message.notification?.body,
);
setState(() {
_notificationInfo = notification;
_totalNotifications++;
});
});
} else {
print('User declined or has not accepted permission');
}
}

By now you must be aware that PushNotification is a model class that stores notification content. It should look like this:

Step 5: Sending Push Notification in your Flutter app

If you got to step 3, you will find we have used an overlays-support plugin. This comes into action now. Here we will show how firebase cloud messaging has made it easy for you to receive the notifications while:

the app is in use
the app is in minimized state
The app is in a closed state

When App is in use

Now, you can create a sample or a custom UI effect for Push Notification when it arrives on your device.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return OverlaySupport(
child: MaterialApp(
// ...
),
);
}
}

Now to display the Push Notification inside your app use the function showSimpleNotification().

void registerNotification() async {
//...

if (settings.authorizationStatus == AuthorizationStatus.authorized) {
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
// ...
if (_notificationInfo != null) {
// For displaying the notification as an overlay
showSimpleNotification(
Text(_notificationInfo!.title!),
leading: NotificationBadge(totalNotifications: _totalNotifications),
subtitle: Text(_notificationInfo!.body!),
background: Colors.cyan.shade700,
duration: Duration(seconds: 2),
);
}
});
} else {
print('User declined or has not accepted permission');
}
}

Next, you have to use two variables to display the notification information, namely, _notificationInfo and _totalNotifications.

class _HomePageState extends State {
late int _totalNotifications;
PushNotification? _notificationInfo;

//...

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Notify'),
brightness: Brightness.dark,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//...

_notificationInfo != null
? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'TITLE: ${_notificationInfo!.title}',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
SizedBox(height: 8.0),
Text(
'BODY: ${_notificationInfo!.body}',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
],
)
: Container(),
],
),
);
}
}

Shown above is a column with the two text widgets i.e., notification title and body.

When App is in Minimized State

To handle Push Notifications while the app is in terminated state, we need to define a top-level function. This function _firebaseMessagingBackgroundHandler(), should not be included in any of the classes defined

Firstly, define the above function as shown below:
Future _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
print("Handling a background message: ${message.messageId}");
}

Now, call the method onBackgroundMessage().
void registerNotification() async {
await Firebase.initializeApp();
_messaging = FirebaseMessaging.instance;

// Add the following line
FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

// ...
}

If your app is running in the background and you tapped on the received notification, then this action needs to be handled using the initState() method.

@override
void initState() {
//...

// For handling notification when the app is in background
// but not terminated
FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
PushNotification notification = PushNotification(
title: message.notification?.title,
body: message.notification?.body,
);
setState(() {
_notificationInfo = notification;
_totalNotifications++;
});
});

super.initState();
}

When App is in a Closed State

As we know, Push Notifications can also be sent while the app is in the terminated state. So, let’s see what commands we need to run while we open the notification in the app’s closed form.

For this, the first step is to define checkForInitialMessage() in this method.

// For handling notification when the app is in terminated state
checkForInitialMessage() async {
await Firebase.initializeApp();
RemoteMessage? initialMessage =
await FirebaseMessaging.instance.getInitialMessage();

if (initialMessage != null) {
PushNotification notification = PushNotification(
title: initialMessage.notification?.title,
body: initialMessage.notification?.body,
);
setState(() {
_notificationInfo = notification;
_totalNotifications++;
});
}
}

Next, call this method, for iniState method().
@override
void initState() {
// ...

// Call here
checkForInitialMessage();

// ...
super.initState();
}

STEP 6: Sample Testing of Flutter Push Notifications on Android Device

To run this app on an Android device, follow the steps below.

Go to android → app → build.gradle and enable multidex support, using the command:
android {
defaultConfig {
// ...
multiDexEnabled true
}
}
Add <intent-filter> tag inside <activity> (follow this path android → app → src → main → AndroidManifest.xml). This tag will help you in retrieving the message at the time of notification’s arrival.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="<your_package_name>">
<application
android:label="notify"
android:icon="@mipmap/ic_launcher">
<activity
android:name=".MainActivity"


<intent-filter>
<action android:name="FLUTTER_NOTIFICATION_CLICK" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>

</application>
</manifest>

You can also add additional messages using the Firebase console.

This way you can add Push Notifications using firebase cloud messaging in Flutter apps.

Fibonalabs

Angular JS: Sharing data between child and parent components

Introduction

Benefits

Sharing data between Parent & Child components

Sending data from Parent to Child Component

Sending data from child to parent

Sharing data between sibling components

5 Effective Tips for UX Designers to Design Fintech Products

A Brief History of UX Design And The Future It Is Building

Historical Examples of UX Design Practices Over the Years

How to make React Applications SEO-friendly?

What is SEO?

Why is SEO so Important?

How Google Crawls and Indexes Webpages

Challenges In Optimizing React Apps for SEO

How to Make SEO-Friendly React Apps?

Some React SEO Tools

Conclusion

Choose the Best Agile Product Development Method for a Successful Business

Introduction

Types of Agile Methodologies

7 Psychology Theories in UX to Provide Better User Experience

How Do We Define Psychology?

Relation Between Psychology and UX Design

Human Psychology Theories to Create Impactful UX Design

Conclusion

Cyber Security: Most Important Aspect of a Successful Business

Importance of Cyber Security in Business

Threat Analysis in Cyber Security

Famous Examples of Cyber Attacks

Preventive Measures for Cyber Attack

How Do We Ensure Cyber Security In Business At Fibonalabs?

Atomic Design: Effective Way of Designing UI

Advantages of Using Atomic Design Methodology

What is Atomic Design Methodology?

What Is the Purpose of Atomic Design Methodology?

Elements of Atomic Design

Conclusion

Cloud Computing Architecture: Components, Importance, and Tips

Introduction

Cloud Computing Architecture

Components of Cloud Computing Architecture

Importance of Cloud Computing Architecture

Tips For Cloud Computing Architecture in Your Business

Conclusion

Push Notifications: How to add them to a Flutter App

Introduction

How to Introduce Push Notifications In Your App?