Forem: Wilson Bright

[Tutorial] How to make a dynamic logic flowchart in AngularJS

Wilson Bright — Mon, 02 Aug 2021 12:19:12 +0000

As Developers, many of us daily work with logical statements and conditions in the applications we build. Sometimes while building a use case with so many logical conditions, it starts to puzzle us. This is primarily due to a lack of visualization. This will eventually lead to taking an excessive amount of our time if we don't have a proper flow chart to visualize our use case looks.

There are many products and npm packages in the market that can help us build a dynamic logical flowchart when we feed our logical conditions. Some of them support only React, and some are paid and not affordable. This is a problem for indie devs working on Angular.

Today, we are going to take a look at an npm module named Mermaid. Mermaid is a Javascript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. It's a free tool, and we will be using this to build our dynamic logical flowchart. All the tools analyzed are available in references at the end of this tutorial for you to explore.

In this tutorial, let’s learn how to create a dynamic logic flowchart in AngularJS.

Note: In this tutorial, we will be using the Top-down orientation flowchart. There are various other orientations, charts, and diagrams. Users can implement their own design by following the main documentation for various other themes and configurations. We are using Angular in this tutorial to implement the same.

Steps to create a mermaid logical flowchart:

To start with, create an Angular project and install the npm module for a mermaid:

npm install mermaid --save

Next, we have to add the module in the component.ts file.

import { Component, OnInit } from '@angular/core';  
import mermaid from 'mermaid';@Component({  
selector: 'app-root',  
templateUrl: './app.component.html',  
styleUrls: \['./app.component.scss'\]  
})

Now we have to initialize the mermaid tool in the ngOnInit function. The tool supports various configurations and settings. Users can take a look at their documentation page which will be provided below for further customization.

ngOnInit(): void {  
   mermaid.initialize({});  
}

Next, we have to create a function for providing logical conditions to the mermaid tool to render and build a flowchart out of it.

export class AppComponent implements OnInit {flowChart: any;  
stringFlowChart: any = "";constructor() {  
   this.createFlowchart();  
}ngOnInit(): void {  
   mermaid.initialize({});  
}createFlowchart() {  
   this.flowChart = \[  
      "graph TD",  
       "id1\[Start\] --> id2\[Ques 1\]",  
       "id2 --> id3\[Ques 2\] & id4\[Ques 3\]",  
       "id3 & id4 --> id5\[Ques 4\]",  
       "id5 --> id6",  
       "id6\[Ques 5\] --> id7\[End\]",  
       "id6 --> id2"  
   \]; this.stringFlowChart = this.flowChart.join("\\n");  
 }  
}

The array ‘this.flowchart’ contains logical conditions that point from one question id to another. For the mermaid to render the flowchart, it needs the input to be in string format. We will join the array using (“\n”) newline character and form a string to support this.
Logics can be dynamically build using the above format. ‘Graph TD’ means Graph in Top-Down orientation. Ids have to be unique for each label. Arrow is used to point one label to another. Labels are described in the square brackets [] or rounded brackets (). This decides how the design of the label looks. [] for a sharp square edge while () for a rounded edge.
We can add themes, font style, colors to text and backgrounds, etc. More customization can be done using the documentation provided. Below you can find a sample code for themes and colors.

createFlowchart() {  
   this.flowChart = \[  
      "%%{init: {'theme': 'base', 'themeVariables': {               
      'primaryColor': 'rgba(229,96,115,.06)' , 'primaryTextColor' :    
      '#e56073', 'font-family': '-apple   
       system,BlinkMacSystemFont,segoe    
       ui,Oxygen,Ubuntu,Cantarell,fira sans,droid sans,helvetica   
       neue,sans-serif'}}}%%",  
       "graph TD",  
       "id1\[Start\] --> id2\[Ques 1\]",  
       "id2 --> id3\[Ques 2\] & id4\[Ques 3\]",  
       "id3 & id4 --> id5\[Ques 4\]",  
       "id5 --> id6",  
       "id6\[Ques 5\] --> id7\[End\]",  
       "id6 --> id2"  
   \];this.stringFlowChart = this.flowChart.join("\\n");  
 }  
}

Next, we have to integrate the stringFlowchart to Html component file.

<div class="row">  
   <div class="col-12" style="text-align: center;">  
      <h3>Logical Flowchart</h3>  
      <div style="margin-top: 50px;">  
         <pre class="mermaid">  
            {{stringFlowChart}}  
         </pre>  
      </div>  
   </div>  
</div><router-outlet></router-outlet>

Implementation of Logical Flowchart in BlockSurvey

Questions in forms and surveys are difficult to visualize when there is logic built into it. You can read about skip logic in surveys to know more about this feature. BlockSurvey’s users faced this problem of visualizing, and it was stressful to validate what was built. Today, we have solved this using Mermaid after analyzing all the packages available in the market.

Screenshots from BlockSurvey’s Logic Map implemented using Mermaid.

Logical flowchart using Mermaid

Implementation of Logic Map in BlockSurvey

Summary

Using the mermaid npm module, we can easily create a dynamic logical flowchart. It helps us visualize a clear picture of how the use case will look, and it gives us a better view when we work with complex logic and conditions.

Visualization helps users validate correctness, immediate feedback from eagles view, makes you creative, and saves time.

Give Mermaid a try in your application. Let us know what you think about it.

Thanks for reading. Looking forward to your feedback in the comments.

References

Top 10 BlockStack Apps from Dec 2019

Wilson Bright — Tue, 31 Dec 2019 10:54:20 +0000

I came across BlockStack(https://blockstack.io) in June 2019 as part of the first "Can't Be Evil" hackathon.

I built BlockSurvey - https://blocksurvey.io as part of the hackathon and today it has more than 1000+ users. It allows users to create surveys, polls, & forms with complete confidentiality. Rewards from App Mining helped to build further and I have bootstrapped the product completely from that money.

In this article, I would like to share the Top 10 DApps (BlockSurvey not included) which I like to bring to your attention so that you can try them too. This will also give you an idea of what is possible to be built with Blockstack and how you can bootstrap your product in a quicker time.

Envelop - https://envelop.app/ - Share private files easily, without losing their ownership. An alternative to WeTransfer / Firefox Send.
Compress.Studio - https://compress.studio - Serverless Image Compression Tool. An alternative to TinyPng / other image compression tools.
Mumble - https://app.trymumble.com/ - Text and voice chat for passionate communities. An alternative to Slack.
DCasso - https://dcasso.app - A decentralized drawing app. Ready, Set, Sketch!A fun drawing app.
Dappity - https://dappity.app/ - All your Dapps in one place
Paras - https://paras.id/ - Your Decentralized Personal Website. An alternative to about.me.
Note Riot - https://note.riot.ai - Easy to use note taking app. An alternative to Google Keep, Evernote.
Sigle - https://app.sigle.io - Decentralized blogging platform. An alternative to Medium or any blogging platforms out there.
Arcane Products - https://products.arcane.ac/ - Suite of office and dev tools. An alternative to GSuite in the making.
Daily Habits - https://thedailyhabits.com/ - Your private habit tracker.

Surveys as a Marketing Tool

Wilson Bright — Tue, 31 Dec 2019 06:14:07 +0000

Marketing is no longer about the stuff that you make, but about the stories you tell. - Seth Godin

A beverage major launched a short but interesting campaign across social media platforms with regards to a recently released flavored drink from its product portfolio. The campaign, unlike, most others had an interesting take – it was nothing but a simple survey of 5 easy-to-answer questions aimed at understanding consumer behavior and reception of their newly launched product. To make it even more enticing, all participants were awarded a coupon upon survey completion. The coupon code could be used to get a 50% discount on the next purchase of any beverage from the beverage major’s portfolio of products. Interesting isn’t it?

The result?

A whopping success!

The campaign resulted in 1,000s of participants from across geographies with teens contributing to more than 70% of the surveyed lot. The beverage major had lots of feedback and lots of interesting insights to take home.

Busy-busy marketing world out there!

We are part of a very chaotic and dynamic business world. A world where things happen at the speed of thought and consumer decisions change at the drop of a hat. It’s a tough world out there, for marketers. Though "Marketing" seems more fashionable in comparison to other corporate functions such as finance, the job only gets complex as you move higher up in the marketing line. From overseeing day-to-day promotional campaigns to having an astute eye on the bigger picture – your role as a marketer only gets diverse and challenging.

At BlockSurvey, we understand all of that and more.

So, we went a step ahead to build something to make your job easier – a set of very curated and customized survey forms as "Templates".

Our survey forms and polls help you gain interesting and yet useful insights into the consumer’s mindset, just like the one used by the beverage major in the aforementioned example did. From consumer behavior patterns to consumer perceptions of your brand, BlockSurvey forms help gather rich and unique insights.

We create short, interesting and compelling surveys that entice participants to take part and come up with the best possible and most authentic feedback.

Blocksurvey enhances Marketing.

Our survey forms play a pivotal role in enhancing the marketing function.

Trustable - Because our survey forms ensure anonymity and privacy. Anonymity because we believe in the philosophy of obtaining genuine feedback from data providers.

And private because we really care about what happens to your data collected. With BlockSurvey, you own your data and only you can see it. Not anyone and not even us. By this you are building trust with the data providers and your intentions with the data is clear.

Authentic – Authentic or honest feedback from customers is but a natural by-product of anonymity and privacy that BlockSurvey provides. Authentic is a treasure, it is hard to come by these days and organizations would benefit in immeasurable terms when they can gather authentic feedback.

Low cost – A survey by Market Research firm Attest says that 26% of businesses surveyed do not gauge the market before they launch a new product or service and 21% of them cannot afford market surveys. Offline and phone-based surveys can be stretching the marketing budgets which is why BlockSurvey surveys are even more essential. We hardly create a dent on the marketing budget.

Use Case #1 - Feedback and Brand positioning

Imagine the exciting ways an organization can make use of the digital medium to promote its brand(s) and gather customer insights?

BlockSurvey takes conducting market research to an altogether different level. Take this use case as an example – BlockSurvey creates interesting and yet easy-to-use survey forms which can double up as feedback forms and promo tools at one go!

These short and interesting survey forms can be floated across social media platforms enticing users to participate. While participants can be lured with goodies or credit points, organizations have the benefit of obtaining some very authentic feedback on their products/services. Authentic because, BlockSurvey polls and surveys come with the twin advantages of being – anonymous and private.

Organizations can end up even positioning their brands in a way that appeals to their respective demographics. For example, a few questions can be subtly laid out in a manner that prompts participants to build the desired image of the brand.

Use Case#2 – Building Strategy

We also customize survey forms to help organizations gather customer feedback that can help create better products/services or add additional features to existing products. All of this, done in a very innovative and quick-paced manner that creates time advantage for organizations.

Marketers and decision-makers can now come up with products that will have the approval of the larger customer segment thereby making it a successful launch.

Conclusion:

Keeping the customer at the center of marketing is one of the ways to build customer branding. Surveys and polls help you build rapport with the customer. Customers of today are more likely to spend money with a brand that they feel they are connected to. Understanding the way customers think and feel drives outcomes always. BlockSurvey is here to help in this customer engagement through marketing by understanding customers, assessing competition, innovative campaigns, giveaways, contests, validating new ideas, and building out new strategies.

Surveys as a Marketing Tool

Wilson Bright — Thu, 26 Dec 2019 05:15:17 +0000

Marketing is no longer about the stuff that you make, but about the stories you tell. - Seth Godin

The result?

A whopping success!

Busy-busy marketing world out there!

At https://blocksurvey.io, we understand all of that and more.

So, we went a step ahead to build something to make your job easier – a set of very curated and customized survey forms as "Templates".

We create short, interesting and compelling surveys that entice participants to take part and come up with the best possible and most authentic feedback.

Blocksurvey enhances Marketing.

Our survey forms play a pivotal role in enhancing the marketing function.

Trustable - Because our survey forms ensure anonymity and privacy. Anonymity because we believe in the philosophy of obtaining genuine feedback from data providers.

Use Case #1 - Feedback and Brand positioning

Imagine the exciting ways an organization can make use of the digital medium to promote its brand(s) and gather customer insights?

Use Case#2 – Building Strategy

Marketers and decision-makers can now come up with products that will have the approval of the larger customer segment thereby making it a successful launch.

Conclusion:

Why BlockSurvey?

Wilson Bright — Thu, 21 Nov 2019 11:33:19 +0000

“Privacy is not something that I’m merely entitled to, it’s an absolute prerequisite.” — Marlon Brando, Actor

BlockSurvey came out as an idea during the ‘Can’t Be Evil’ hackathon conducted by Blockstack in July 2019. The theme we had in mind was to build something on Society 3.0. While evaluating multiple ideas, we used survey tools to validate our ideas with friends and family. During this time, we asked ourselves- How safe are our ideas in the survey platforms of today?

And also, how are we interacting with the surveys of today?
On reflection, our participation with surveys over the years has been very minimal and it has always been a conscious choice not to participate. This is primarily due to a lack of trust in humans while surveying. More than the intended data provided, we lose our private data which we don’t want to. Each time, we saw an employee engagement or an employee satisfaction survey run by an employer, we never answered authentically because we had a feeling of being watched or that the privacy element was unconfirmed. We interviewed multiple people and asked if they felt the same. To our surprise, they did.

How can we solve this? How to regain trust in filling out surveys? What if, we provide a system where survey takers answer from their private space to share genuine and authentic feedback/suggestions/opinions without being judged. What if, all the data collected is seen only by the survey creator alone and not by anyone else. Neither the supervisor/manager nor the platform provider, and thereby putting an end to all the leaks. This led us to create privacy-focused surveys, polls & forms platform.
We did some secondary research in this space and below are the findings in the survey industry.

In a horrendous and bizarre incident involving online surveys, around 6 million accounts were hacked from CashCrate — a site that facilitates users to take online surveys and get paid in return. This breach allowed hackers to have access to accounts that were created as early as 2006. The hacked data included — email addresses, passwords, physical addresses and names of users.

2018 — June 27, the day Spanish online survey firm — Typeform, realized that there was a security breach causing the firm to lose private survey data of tens of thousands of its customers using their platform. Hackers gained access to everything from personal details to email addresses and other private information that has put many survey participants at risk. Reddit, in particular, suffered heavy damage as personal details of its large-scale users’ surveys were exposed.

All of the above data breach incidents point out to two important things –
Data breaches have been consistent and seem unstoppable
There is a steady decrease in the confidence and trust levels of the public when it comes to surveys, polls or sharing of information online
Scary isn’t it? And quite unfair too. What with all the precious personal data thrown out in the open for anybody and everybody to access and misuse. A survey conducted by the popular Harris Poll (2017) stated that ‘’Privacy’’ is the #1 priority for Americans with a whopping 82% of preferring a technology that protects their privacy.

This begs the question — Are current survey tools safe enough?
Sadly, they aren’t.

Where BlockSurvey comes into the picture?

Upon constant research and trials, we found that there are numerous problems with the current survey tools. So, what did we do? We decided to counter these problems with our unique surveying solution. With the use of Blockchain tech from Blockstack- we came up with a methodology to conduct private, secure and anonymous surveys.

BlockSurvey also focuses on making surveys interesting and kills the fatigue factor steering participants away from ‘another boring’ survey towards an interesting survey attempt/process.

Benefits of using BlockSurvey:

Share Answers, Not Identity
End to End Encryption
Smooth Surveying Experience
Advanced Analytics
Elegant Design Themes
Simple To Build

We believe privacy in surveys, polls & forms is critical. Having a privacy-focused approach to surveying could lead to making better decisions thereby benefiting all the players involved in the process.