DEV Community: Hasan Ali

The Killer Framework to Generate SaaS Ideas for Martech

Hasan Ali — Tue, 09 Feb 2021 12:38:34 +0000

When it comes to building SaaS products, every tool out there is a solution to a problem that an audience is facing.
The biggest problem that marketing companies and agencies are facing is where to spend their next dollar for their marketing campaign.

The only reason why the Martech landscape has grown exponentially in the past couple of years is that marketing companies are always looking forward to upgrading themselves through technology, replacing their existing processes with automation, and to build effective and efficient strategies for their campaigns.

While working in a growth marketing agency I have followed a framework to come up with ideas and build Martech solutions for different industries.

Analytics

Analytics is one of the basic components of marketing, where you record and analyze events. It gives a holistic view of a marketing campaign, giving insights about how an audience is reacting towards a campaign, what actions they're taking, and from which platform the campaign is getting a positive response.

Based on the data from analytics, marketing teams predict and pivot marketing strategies to get effective results.
Analytics tools do a very basic job, that is they track campaigns, users, and events, then report them on a dashboard. Now by using Data Science and Artificial Intelligence, analytics tools are also predicting the upcoming reports to give marketers a chance to adjust their campaigns for better results.

Intelligence

Beauty may be dangerous, but intelligence is lethal.
In the era of social media, marketing companies don't rely on surveys and estimations, they exactly need to know the audience they're targeting, what are their sentiments about a topic, how they will react towards a campaign, what are they interested in, what type of content they consume, etc.
Technologies like AI, ML, and Data Science have made a profound change in marketing. The whole point of marketing intelligence is to collect data from different sources and conclude results using different algorithms like behavioral and pattern recognition.

Social listening tools are the best example of Marketing Intelligence. It grabs the data from different social networks and using Artificial Intelligence predicts in-depth audience insights.

Automation

The world of marketing is moving towards automation. From programmatic advertisements to No-Code tools, automation in marketing is a need of today.

Marketing companies and agencies are always in search of tools to automate their repetitive processes, allowing teams to do what they do best and bring more sales.

There are already many marketing automation tools available as it's easy to create some scripts to automate any task. Marketing automation is not limited to just lead generation, now everything is getting automated by a tool.

Customer Relationship Management

Whether it's a small e-commerce business or a multinational brand, everyone is marketing on multiple channels to capture audiences of all kinds, and keeping track of all marketing stats. Giving the right service to customers requires an intense amount of effort and time.

That's where CRM comes in, it tracks all the stats and metrics of marketing and sales and provides options to provide support to customers to maintain a good relationship.

CRMs that are already in the market are extensively built to cater all the problems, but small and medium enterprises are always in search of easy to use and affordable solutions and that's your sweet spot to build a tool for this market.
It's a general-purpose frame that can apply to any industry. Let's say you want to build tools for the e-commerce market then this framework would be changed into

Analytics tools for e-commerce
Intelligence tools for e-commerce
Automation tools for e-commerce
CRM/Support tools for e-commerce

Final Words

The future belongs to those who learn more skills and combine them in creative ways. - Robert Greene

Whether you're looking for an idea for a startup to pursue your entrepreneur journey or for a side project to build your brand and polish your skills, this stack can help you to come up with sure-fire Martech ideas for any market.

How to become MarTech Developer in 2021

Hasan Ali — Fri, 01 Jan 2021 12:12:47 +0000

You've heard of different job titles, like frontend developer, backend developer, full-stack developer, etc. Have you heard of MarTech developer?

MarTech is not something new, it's here for quite some time, but the way it exploded and grow over the past few years is phenomenal.

I haven't heard of it, until working before in a growth marketing agency, where I learn marketing concepts and principles and how a developer can play a part in marketing.

What is Martech?

Any tool or software that can help you to automate, optimize, or even enable you to do your marketing efforts is Martech or Marketing Technology.

Martech rides on the back of any technological advancement, whether it's artificial intelligence or blockchain, every technology effects and opens new doors of opportunity in martech.

Before becoming a martech developer you should know why to become a martech developer?

Why Martech?

Due to the boom of martech, marketing, and advertising agencies around the world are hiring developers to automate their existing processes and build automation tools.

Not just that Martech jobs are ranked #3 in Linkedin's 2020 emerging jobs report. This clearly shows how Martech landscape is growing and there is an enormous need for developers.

Now let's discuss what you exactly need to become a martech developer.

Marketing Knowledge

Most developers think that martech is only for marketeers, but that's not true. You don't have to be a marketeer to become a martech developer.

Marketing knowledge totally depends on the job you're looking for. For example, if a company wants to automate Facebook or Google Ads reporting or advertising then you need to learn Google Ads and Facebook Ads APIs.

It's all about how familiar you're with the marketing tools and their APIs.

However, most companies give starter training but it's still good to have good basic knowledge before going for a job.

I will explain below which basic APIs and tools you need to learn to get started.

Which programming language I need to learn?

There is no perfect or preferred programming language you need to learn to become a martech developer.

A language that can be used for anything is what you need.

Having a good command of a general purpose language like JavaScript, Python, PHP, etc is all you need.

I would prefer Javascript, because whether you want to create a web app or a mobile app, or even a desktop application, JS is all you need to know.

Of course strong skills in HTML, CSS is also required, if you're aiming to build tools for the web.

Tools you should know

The martech landscape is growing like never before every day new tools are coming, but don't worry you don't need to learn every single tool.

Get yourself familiar with popular tools that are used by marketing agencies every day. Beginner to intermediate knowledge is enough to build solutions on top of these tools.

I am listing down the categories of tools with some examples, all you need is to search for top tools in these categories to get yourself familiar with them.

Ads Manager (Facebook Business Manager, Google Ads Manager)
Analytics (Google Analytics, Facebook Pixel)
Email Marketing tools (MailChimp, Aweber, HubSpot)
Integrations tools (Zapier)
CRM (Hubspot, Salesforce)

Keeping in mind that these tools are made for marketeers, that's why your focus should be to have a technical understanding of the tool and its APIs. As a martech developer, you'll be making solutions on top of these tools to make things easier for marketeers.

From where should I learn all these things?

Well, that's simple, Youtube!

Whenever I want to learn something new, youtube is the best way to get some basics to get started.

But that's not enough always to give some time to official documentation or tutorials of the tools for a complete in-depth understanding of concepts.

Facebook and Google have official resources where you can get started.

Final Thought

Marketing agencies need developers who are creative and agile enough to play with data and pull out results and reports to empower the marketing teams to make effective strategies.

Now marketeers are exploring technologies like Machine Learning, Blockchain, Virtual Reality, etc to come up with out of the box ideas for their clients, and that's where a martech developer comes to help them to find the right technology.

If you're planning to give your career a shift in 2021 then martech is definitely an option to think about.

Learning Ethereum/Solidity Smart Contract Development – Week # 1

Hasan Ali — Sat, 25 May 2019 13:21:52 +0000

I’ve started working with blockchain by playing around with block explorers and RPC APIs. Setting up RPC APIs and connecting them to a frontend web was all that I know to do. But what I really wanted is to learn the core of blockchains and wanted to know how to become a blockchain developer. I was confused too at that time because the blockchain ecosystem was booming expeditiously and new development tools were coming, so it was making more difficulty for me to decide where to start.

I found this course on Udemy about “Ethereum and Solidity: The Complete Developer’s Guide” which laid down first steps of my journey of blockchain development.

Now being a blockchain developer, I’ve been asked this question more frequently, so I think I should write detailed notes of my solidity development course, from which anyone who wants to start blockchain development can start learning just like I did.

The first week is the introduction to Ethereum blockchain and kind of list of terminologies and their explanations but after that, we’ll dive into coding smart contracts.

Prerequisites:

You should have a basic understanding of blockchain, just a basic knowledge of addresses, wallets and how blockchain works in a nutshell. If you don’t know about basics of blockchain don’t worry check out Anders playlist

Blockchain 101 – A Visual Demo Blockchain 101 – Part 2 – Public / Private Keys and Signing

If you know React.js, it will be a plus point because in future we’ll be developing frontend for smart contracts in it. If you don’t know react don’t worry check out this free React.js course

History of Ethereum:

In December 2013 after the release of bitcoin whitepaper, Vatalik Buterin visions the idea to use the blockchain technology not just as a mode of payment transfer but also as a virtual machine which can run programs and codes and thus the idea of smart contracts was introduced. Vatalik wasn’t the first one to introduce the idea of smart contracts, it was proposed before by Nick Szabo too, but this was the first successful implementation of that idea.

Blockchain:

Blockchain is a database which keeps a record of all transactions and anyone can keep and maintain this database so its decentralized (not controlled by a authority)

Ethereum:

Ethereum is a special type of blockchain, instead of only keeping a record of transactions it also provides storage to host programming code on it which is executed by Ethereum Virtual Machine.

Metamask:

Metamask is a chrome browser extension allows user to interact with Ethereum applications in browser. Install it and explore it. (https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en)

Smart Contract:

Smart Contract is a special account in Ethereum blockchain which has 3 things in it.

Balance : Amount of Ethereum in this account
Storage : Data store for this contract
Code : Smart contract code

Solidity:

Solidity is the programming language introduced by Ethereum to write smart contracts. It’s a strongly typed language very similar to javascript.

Smart Contract Lifecycle:

When a smart contract is programmed in solidity it’s then compiled by Solidity Compiler which gives us two things.

Bytecode: This is the code which is deployed on Ethereum network
Application Binary Interface (ABI): ABI is a long JSON object contain smart contract methods and information from which we can interact with smart contract.

Create 360° Image Viewer – A-Frame VR Development Part 3

Hasan Ali — Tue, 23 Oct 2018 09:00:34 +0000

This is our first virtual reality project using A-Frame VR Framework. I’ll be making a 360° image or photosphere viewer using A-Frame. It will be super easy and we’ll also add interactive elements to it. So lets started

360° Image Viewer in A-Frame

First, create an HTML file with basic Doctype code and add the a-frame.js file to it

Now download any 360 images or photosphere from Google or anywhere. I am using this image (https://drive.google.com/drive/folders/0Bx2k1bqMoviiWW9hQ2ktM05zVk0)
Now to view this image in A-Frame we’ll create a scene and add ‘’ primitive with an attribute src link to that image
Now if you open the HTML file you’ll see your 360 image, which you can move around by dragging the mouse.

That’s how easy in A-Frame to view 360 image. Now let’s add text to the 360 image.

To add text we’ll use primitive. I will add the following code in the scene.

rotation=”0 5 0″>

Now after refresh, you will text with the 360 image.

In the next tutorial, I’ll show you how you can make a virtual tour experience using A-Frame and make interactive points which can change 360 images by click on them.

Source code on Github : https://github.com/hasanaliqureshi/A-Frame-VR-Development/blob/master/A-Frame-VR-Development-Part-3.html

Camera, Lights & Animations – A-Frame VR Development Part 2

Hasan Ali — Thu, 11 Oct 2018 21:41:47 +0000

Welcome to the second part of A-Frame Virtual Reality Framework for web tutorial series. In the first part, we learned basic A-Frame syntax, created a scene, added a box in it and set up the environment/skybox in it.

Now we’ll continue working on our file index.html. which we create in the first part and toggle camera settings, see how lighting affects the scene and animate our object.

Camera

A-Frame by default creates a camera element automatically with default settings if you don’t create it like in Part 1 we didn’t create the camera entity but A-Frame created it for us and we could see the elements in the scene.

But if you want a camera with custom settings then you can create a camera element with desired properties.

<a-entity><a-camera></a-camera></a-entity>

Add the above tag just before the closing tag of <a-scene>. The reason I encapsulate the <a-camera> tag inside <a-entity> is that if we want to change the position of the camera we will define property attributes of <a-entity> because if we directly set the property attributes on <a-camera>, controls will override them.

See camera attributes here: https://aframe.io/docs/0.8.0/primitives/a-camera.html#attributes

Changing Camera Position

To change the camera simply set the position attribute in ‘<a-entity>’ primitive.

<a-entity position = “0 0 5”><a-camera></a-camera></a-entity>

Adding Cursor to the Camera

One of the most crucial elements in any virtual reality environment is the cursor, it is the main element which allows interaction in the virtual reality world if there is no hand controller. Google Cardboard games used the cursor to interact with the virtual environment.

To add cursor to the camera simply put the <a-cursor> tag inside the <a-camera> tag

<a-entity position = “0 0 5”><a-camera><a-cursor></a-cursor></a-camera></a-entity>

Now you will see a circle at the center of the screen.

In the future tutorials when we’ll create fully interactive Virtual Reality environments, I’ll show you how to make cursor gaze effect and interacting with the objects.

Adding Lights

Lights make a 3d environment more realistic.

Add the <a-light> primitive inside the <a-scene>. The light we’re adding is directional, its color is white (#FFF), its intensity is 0.5 and it is at the position of -1 1 2 .

<a-light

type=”directional”

color=”#FFF”

intensity=”0.5″

position=”-1 1 2″>

</a-light>

You will see how box’s color changed.

Animating Objects

To animate an object on the screen put the <a-animation> tag inside that object tag. An <a-animation> tag has different attributes from which you can configure the animation. Let’s animate our box. Replace the <a-box> tag with the following code.

<a-box position=”0 2 -5″ rotation=”0 45 45″ scale=”2 2 2″ color=”red”>

<a-animation

attribute=”rotation”

from=”0 45 45″ to=”0 410 410″

direction=”alternative” dur=”4000″

repeat=”indefinite” easing=”ease”>

</a-animation>

</a-box>

Not just rotation you can also animate the position and size/scale of the object. Check out animation attributes and play around with it https://aframe.io/docs/0.8.0/core/animations.html#attributes

We’ve covered the basics of A-Frame framework. Now from the next tutorial we will start making virtual reality projects, in which we’ll learn advanced concepts and look into the WebVR Development in-depth.

Getting Started – A-Frame VR Development Part 1

Hasan Ali — Wed, 10 Oct 2018 18:24:18 +0000

This is the first part of A-Frame Virtual Reality Development series, in this part I will explain the basic components and syntax of the A-Frame framework and will create a simple Hello World Virtual Reality project using A-Frame.

Before getting started, if you don’t know basic web development technologies and never worked in the web then please first learn some HTML, CSS, and Javascript basic skills, then follow this tutorial.

Throughout the tutorial, I will be sharing the code with pictures step by step so you can understand easily. So lets get started.

Create an index.html file and write basic HTML DOCTYPE syntax in it.

Insert the A-Frame framework script inside \<head\>\</head\> container

\<script src="https://aframe.io/releases/0.8.0/aframe.min.js"\>\</script\>

Note : You can also install A-Frame using NPM. Use$ npm install aframecommand.

Now let’s explore the A-Frame syntax. A-Frame is based on custom created HTML elements. As you can is in the picture below every object is represented by a custom HTML element.

Creating a Scene

First, we have to create a scene, which will configure the basic components for us like canvas, rendered, camera, lights etc. It’s a container where all the elements of VR environment will come inside it.

Add the _\<a-scene\>\</a-scene\>_ tag inside the body to initialize the scene.

If you open the index.html file in your browser you will notice that after initializing the scene a small VR icon can be seen on the page.

Adding a Cube/Box

Let’s insert a 3d box in it.

Add _\<a-box color=”red”\>\</a-box\>_ inside the<a-scene>` tag.

Now if you refresh index.html you’ll see nothing. But if your press S key on your keyboard, the camera will start moving backward and you’ll see a red box. The reason that you didn’t see the box in the first place is that the position of the camera and the box is same, both are placed at the same point (origin [0,0,0]) in the screen.

Now before adding more elements let me tell you what are Primitives and Entities in A-Frame.

_\<a-scene\>_, _\<a-box\>_, _\<a-sphere\>_ etc all are pre-defined custom HTML tags by A-Frame, which are easy to use tags and are called Primitives.

On the hand \<a-entity\> can by any element. It can be a box, a scene, a sphere, a light or camera. All the _\<a-scene\>_, _\<a-box\>,` _<a-cube>etc are the pre-defined entities for ease of use. However, if you want custom shapes and advanced features like sound in your VR environment<a-entity>` will help you there.

For example underneath a _\<a-box\>_ tag there is an _\<a-entity\>_ tag with pre-defined position and geometry :

<a-entity id=”box” geometry=”primitive: box” material=”color: red”></a-entity>

I hope you got the different between the Primitives and Entities. Don’t worry if you’re still confused, you’ll understand it much better once we’ll use <a-entity> tags.

Changing Properties

Changing the properties of Primitives is also very easy. Lets put our box in front of our camera.

Add a position attribute in the a-box tag. Position attribute specifies the position on X, Y and Z axis of the element.

<a-box position=”0 2 -5″ color=”red”></a-box>

Add a rotation attribute in the a-box tag. Rotation attribute specifies the rotation on X, Y and Z axis of the element.

<a-box position=”0 2 -5″ rotation=”0 45 45″ color=”red”></a-box>

And add scale attribute to scale the element on X, Y and Z axis.

<a-box position=”0 2 -5″ rotation=”0 45 45″ scale=”2 2 2″ color=”red”></a-box>

Now your box will look like this.

Play around with the properties of the box all are listed here: https://aframe.io/docs/0.8.0/primitives/a-box.html#attributes

Adding background / Skybox

Skybox is the background of the 3D world. _\<a-sky\>\</a-sky\>_ is used to put background in the scene.

<a-sky color=”#94c5d6″></a-sky>

Add the _\<a-sky\>_ tag inside the _\<a-scene\>_ container. I have used simple hex-coded color for the sky color, but you can also use an image for the sky background. After adding the sky your scene will look like this

In this part, we’ve covered the basic syntax of A-Frame framework, made a simple scene with a box and add properties to it. In the next tutorial, we’ll look into the camera, lights and animations with their respective properties.

Complete code available on Github : https://github.com/hasanaliqureshi/A-Frame-VR-Development/blob/master/A-Frame-VR-Development-Part-1.html

Virtual Reality Pakistan Medium Publication : https://medium.com/vr-pakistan

Virtual Realiy Pakistan Facebook Group : https://www.facebook.com/groups/VirtualRealityPK/