GetSetUp is a US based venture backed company addressing the senior education market

GetSetUp

getsetup

Seasoned software engineers long for the good old days when web development was simple. You just needed a few files and a server to get up and running. No complicated infrastructure, no endless amount of frameworks and libraries, no build tools. Just some ideas and some code hacked together to make an app come to life. Whether or not this romanticized past was actually as great as we think it was, developers today agree that software engineering has gotten complicated. There are too many choices with too much setup involved. In response to this sentiment, many products are providing off-the-shelf starter kits and zero config toolchains to try to abstract away the complexity of software development. One such startup is , a company which offers an online IDE where you can create applets that run as serverless TypeScript functions in the cloud. With Zipper, you don’t have to spend time worrying about your toolchain — you can just start writing code and deploy your app within minutes. Zipper Today, we’ll be looking at a ping pong ranking app I built — once in 2018 with jQuery, MongoDB, Node.js, and Express; and once in 2023 with Zipper. We’ll examine the development process for each and see just how easy it is to build a powerful app using Zipper. Backstory First, a little context: I love to play ping pong. Every office in which I’ve worked has had a ping pong table, and for many years ping pong was an integral part of my afternoon routine. It’s a great game to relax, blow off some steam, strengthen friendships with coworkers, and reset your brain for a half hour. Those who played ping pong every day began to get a feel for who was good and who wasn’t. People would talk. A handful of people were known as the best in the office, and it was always a challenge to take them on. Being both highly competitive and a software engineer, I wanted to build an app to track who was the best ping pong player in the office. This wouldn’t be for bracket-style tournaments, but just for recording the games that were played every day by anybody. With that, we’d have a record of all the games played, and we’d be able to see who was truly the best. This was 2018, and I had a background in the MEAN/MERN stack (MongoDB, Express, Angular, React, and Node.js) and experience with jQuery before that. After dedicating a week’s worth of lunch breaks and nights to this project, I had a working ping pong ranking app. I didn’t keep close track of my time spent working on the app, but I’d estimate it took about 10–20 hours to build. Here’s what that version of the app looked like. There was a login and signup page: The login page asked for your username and password to authenticate: Once authenticated, you could record your match by selecting your opponent and who won: You could view the leaderboard to see the current office rankings. I even included an algorithm like they use in chess: Elo rating Finally, you could click on any of the players to see their specific game history of wins and losses: That was the app I created back in 2018 with jQuery, MongoDB, Node.js, and Express. And, I hosted it on an AWS EC2 server. Now let’s look at my experience recreating this app in 2023 using only Zipper. About Zipper Zipper is an online tool for creating applets. It uses TypeScript and Deno, so JavaScript and TypeScript users will feel right at home. You can use Zipper to build web services, web UIs, scheduled jobs, and even Slack or GitHub integrations. Zipper even includes auth. In short, what I find most appealing about Zipper is how quickly you can take an idea from conception to execution. It’s perfect for side projects or internal-facing apps to quickly improve a business process. Demo app Here’s the ping pong ranking app I built with Zipper in just three hours. And that’s including time reading through the docs and getting up to speed with an unfamiliar platform! First, the app requires authentication. In this case, I’m requiring users to sign in to their Zipper account: Once authenticated, users can record a new ping pong match: They can view the leaderboard: And they can view the game history for any individual player: Not bad! The best part is that I didn’t have to create any of the UI components for this app. All the inputs and table outputs were handled automatically. And, the auth was created for me just by checking a box in the app settings! You can hosted publicly on Zipper. find the working app Ok, now let’s look at how I built this. Creating a new Zipper app First, I created my Zipper account by authenticating with GitHub. Then, on the main dashboard page, I clicked the Create Applet button to create my first applet. Next, I gave my applet a name, which became its URL. I also chose to make my code public and required users to sign in before they could run the applet. Then I chose to generate my app using AI, mostly because I was curious how it would turn out! This was the prompt I gave it: “I’d like to create a leaderboard ranking app for recording wins and losses in ping pong matches. Users should be able to log into the app. Then they should be able to record a match showing who the two players were and who won and who lost. “Users should be able to see the leaderboard for all the players, sorted with the best players displayed at the top and the worst players displayed at the bottom. “Users should also be able to view a single player to see all of their recorded matches and who they played and who won and who lost.” I might need to get better at prompt engineering, because the output didn’t include all the features or pages I wanted. The AI-generated code included two files: a generic “hello world” file, and a file for viewing the match history of an individual player. main.ts view-player.ts So, the app wasn’t perfect from the get-go, but it was enough to get started. Writing the ping pong app code I knew that Zipper would handle the authentication page for me, so that left three pages to write: A page to record a ping pong match A page to view the leaderboard A page to view an individual player’s game history Record a new ping pong match I started with the form to record a new ping pong match. Below is the full main.ts file. We’ll break it down line by line right after this. type Inputs = {
  playerOneID: string;
  playerTwoID: string;
  winnerID: string;
};

export async function handler(inputs: Inputs) {
  const { playerOneID, playerTwoID, winnerID } = inputs;

  if (!playerOneID || !playerTwoID || !winnerID) {
    return "Error: Please fill out all input fields.";
  }

  if (playerOneID === playerTwoID) {
    return "Error: PlayerOne and PlayerTwo must have different IDs.";
  }

  if (winnerID !== playerOneID && winnerID !== playerTwoID) {
    return "Error: Winner ID must match either PlayerOne ID or PlayerTwo ID";
  }

  const matchID = Date.now().toString();
  const matchInfo = {
    matchID,
    winnerID,
    loserID: winnerID === playerOneID ? playerTwoID : playerOneID,
  };

  try {
    await Zipper.storage.set(matchID, matchInfo);
    return `Thanks for recording your match. Player ${winnerID} is the winner!`;
  } catch (e) {
    return `Error: Information was not written to the database. Please try again later.`;
  }
}

export const config: Zipper.HandlerConfig = {
  description: {
    title: "Record New Ping Pong Match",
    subtitle: "Enter who played and who won",
  },
}; Each file in Zipper exports a function that accepts as a parameter. Each of the inputs becomes a form in UI, with the input type being determined by its TypeScript type that you give it. handler inputs After doing some input validation to ensure that the form is correctly filled out, I stored the match info in . Each Zipper applet gets its own storage instance that any of the files in your applet can access. Because it’s a key-value storage, objects work nicely for values since they can be serialized and deserialized as JSON, all of which Zipper handles for you when reading from and writing to the database. Zipper’s key-value storage At the bottom of the file, I’ve added a to add some title and instruction text to the top of the page in the UI. HandlerConfig With that, the first page is done. Leaderboard Next up is the leaderboard page. I’ve reproduced the file below in full: leaderboard.ts type PlayerRecord = {
  playerID: string;
  losses: number;
  wins: number;
};

type PlayerRecords = {
  [key: string]: PlayerRecord;
};

type Match = {
  matchID: string;
  winnerID: string;
  loserID: string;
};

type Matches = {
  [key: string]: Match;
};

export async function handler() {
  const allMatches: Matches = await Zipper.storage.getAll();
  const matchesArray: Match[] = Object.values(allMatches);

  const players: PlayerRecords = {};

  matchesArray.forEach((match: Match) => {
    const { loserID, winnerID } = match;

    if (players[loserID]) {
      players[loserID].losses++;
    } else {
      players[loserID] = {
        playerID: loserID,
        losses: 0,
        wins: 0,
      };
    }

    if (players[winnerID]) {
      players[winnerID].wins++;
    } else {
      players[winnerID] = {
        playerID: winnerID,
        losses: 0,
        wins: 0,
      };
    }
  });

  return Object.values(players);
}

export const config: Zipper.HandlerConfig = {
  run: true,
  description: {
    title: "Leaderboard",
    subtitle: "See player rankings for all recorded matches",
  },
}; This file contains a lot more TypeScript types than the first file did. I wanted to make sure my data structures were nice and explicit here. After that, you see our familiar function, but this time without any inputs. That’s because the leaderboard page doesn’t need any inputs; it just displays the leaderboard. handler We get all of our recorded matches from the database, and then we manipulate the data to get it into an array format of our liking. Then, simply by returning the array, Zipper creates the table UI for us, even including search functionality and column sorting. No UI work needed! Finally, at the bottom of the file, you’ll see a description setup that’s similar to the one on our main page. You’ll also see the property, which tells Zipper to run the handler function right away without waiting for the user to click the Run button in the UI. run: true Player history Alright, two down, one to go. Let’s look at the code for the file, which I ended up renaming to : view-player.ts player-history.ts type Inputs = {
  playerID: string;
};

type Match = {
  matchID: string;
  winnerID: string;
  loserID: string;
};

type Matches = {
  [key: string]: Match;
};

type FormattedMatch = {
  matchID: string;
  opponent: string;
  result: "Won" | "Lost";
};

export async function handler({ playerID }: Inputs) {
  const allMatches: Matches = await Zipper.storage.getAll();
  const matchesArray: Match[] = Object.values(allMatches);

  const playerMatches = matchesArray.filter((match: Match) => {
    return playerID === match.winnerID || playerID === match.loserID;
  });

  const formattedPlayerMatches = playerMatches.map((match: Match) => {
    const formattedMatch: FormattedMatch = {
      matchID: match.matchID,
      opponent: playerID === match.winnerID ? match.loserID : match.winnerID,
      result: playerID === match.winnerID ? "Won" : "Lost",
    };

    return formattedMatch;
  });

  return formattedPlayerMatches;
}

export const config: Zipper.HandlerConfig = {
  description: {
    title: "Player History",
    subtitle: "See match history for the selected player",
  },
}; The code for this page looks a lot like the code for the leaderboard page. We include some types for our data structures at the top. Next we have our function which accepts an input for the player ID that we want to view. handler From there, we fetch all the recorded matches and filter them for only matches in which this player participated. After that, we manipulate the data to get it into an acceptable format to display, and we return that to the UI to get another nice auto-generated table. Ping pong ranking app - Player history page Conclusion That’s it! With just three handler functions, we’ve created a working app for tracking our ping pong game history. This app does have some shortcomings that we could improve, but we’ll leave that as an exercise for the reader. For example, it would be nice to have a dropdown of users to choose from when recording a new match, rather than entering each player’s ID as text. Maybe we could store each player’s ID in the database and then display those in the UI as a . dropdown input type Or, maybe we’d like to turn this into a to allow users to record their matches directly in Slack. That’s an option too! Slack integration While my ping pong app isn’t perfect, I hope the takeaway here is how easy it is to get up and running with a product like Zipper. You don’t have to spend time agonizing over your app’s infrastructure when you have a simple idea that you just want to see working in production. Just get out there, start building, and deploy!

How to Build a Ping Pong Ranking App using Zipper and TypeScript Functions

Today we're going to learn how to build a system that asks questions and gets accurate answers about documentation. The whole project being built is available . ChatGPT here You can also try an . interactive version https://www.youtube.com/watch?v=-9jL9r9QQm0&embedable=true Overview We're going to cover a few things here, but the big picture is that: We'll need to store our content in a database We'll get the user to type a query We'll search the database for the results that are most similar to the user query (more on that later) We'll create a "context" based on the top 5 most similar results matching the query and ask ChatGPT Answer the question based on the context below, and if the question can't be answered based on the context, say "I don't know"

Context:
[CONTEXT]
---
Question:
[QUESTION]
Answer: Diving into the implementation Alright, let's get started Here's what you'll be needing for this tutorial: A database that allows you to find "most similar results". Not all databases are suited for this kind of job. Today we'll be using Embedbase which allows you to do just that. Embedbase allows you to find "semantic similarity" between a search query and stored content. : that's for the ChatGPT part. OpenAI api key Nextra: . NodeJS installed Write the Embedbase and OpenAI API keys in : .env OPENAI_API_KEY="<YOUR KEY>"
EMBEDBASE_API_KEY="<YOUR KEY>" As a reminder, we will create with the amazing documentation framework Nextra which allows you to write documentation using NextJS, tailwindcss, and MDX (Markdown + React). We will also use as a database together with OpenAI to make use of ChatGPT. QA documentation powered by ChatGPT Embedbase Creating a Nextra doc You can find and use the official Nextra documentation template . Once you have created your documentation with this template, open it with your favorite editor. here # we won't use "pnpm" here, rather the traditional "npm"
rm pnpm-lock.yaml
npm i
npm run dev Now just head here. Try to edit some of the documents and see the content changing. .mdx Preparing and storing the documents The first step requires us to store our documentation in Embedbase. There's a small caveat, though, this works better if we store relatively small chunks in the DB. We'll chunk our text by sentences. Let's start by writing a script called in the folder .You'll need the library to list files (we'll use the 8.1.0 version). sync.js scripts glob npm i glob@8.1.0 const glob = require("glob");
const fs = require("fs");

const sync = async () => {
	// 1. read all files under pages/* with .mdx extension
	// for each file, read the content
	const documents = glob.sync("pages/**/*.mdx").map((path) => ({
		// we use as id /{pagename} which could be useful to
		// provide links in the UI
		id: path.replace("pages/", "/").replace("index.mdx", "").replace(".mdx", ""),
		// content of the file
		data: fs.readFileSync(path, "utf-8")
	}));
	
	// 2. here we split the documents in chunks, you can do it in many different ways, pick the one you prefer
	// split documents into chunks of 100 lines
	const chunks = [];
	documents.forEach((document) => {
		const lines = document.data.split("\n");
		const chunkSize = 100;
		for (let i = 0; i < lines.length; i += chunkSize) {
			const chunk = lines.slice(i, i + chunkSize).join("\n");
				chunks.push({
				// and use id like path/chunkIndex
				id: document.id + "/" + i,
				data: chunk
			});
		}
	});
}

sync(); Now that we have our chunks we need to store them in a DB, we'll extend our script so that it adds the chunks to Embedbase. To query Embedbase, we'll install the version of by running . 2.6.9 node-fetch npm i node-fetch@2.6.9 const fetch = require("node-fetch");

// your Embedbase api key
const apiKey = process.env.EMBEDBASE_API_KEY;

const sync = async () => {
	// ...
	// 3. we then insert the data in Embedbase
	const response = await fetch("https://embedbase-hosted-usx5gpslaq-uc.a.run.app/v1/documentation", { // "documentation" is your dataset ID
		method: "POST",
		headers: {
			"Authorization": "Bearer " + apiKey,
			"Content-Type": "application/json"
		},
		body: JSON.stringify({
			documents: chunks
		})
	});
	const data = await response.json();
	console.log(data);
}

sync(); Great, you can run it now: EMBEDBASE_API_KEY="<YOUR API KEY>" node scripts/sync.js If it worked well, you should be seeing: Getting the user’s query Now, we  will modify the Nextra documentation theme to replace the built-in search bar with one that will be ChatGPT-powered. We'll add a component to with the following content: Modal theme.config.tsx // update the imports
import { DocsThemeConfig, useTheme } from 'nextra-theme-docs'
const Modal = ({ children, open, onClose }) => {
	const theme = useTheme();
	if (!open) return null;
	return (
		<div
			style={{
				position: 'fixed',
				top: 0,
				left: 0,
				right: 0,
				bottom: 0,
				backgroundColor: 'rgba(0,0,0,0.5)',
				zIndex: 100,
			}}
			onClick={onClose}>			
			<div
				style={{
					position: 'absolute',
					top: '50%',
					left: '50%',
					transform: 'translate(-50%, -50%)',
					backgroundColor: theme.resolvedTheme === 'dark' ? '#1a1a1a' : 'white',
					padding: 20,
					borderRadius: 5,
					width: '80%',
					maxWidth: 700,
					maxHeight: '80%',
					overflow: 'auto',
				}}
				onClick={(e) => e.stopPropagation()}>			
			{children}
			</div>
		</div>
	);
}; Now we want to create the search bar: // update the imports
import React, { useState } from 'react'
// we create a Search component
const Search = () => {
	const [open, setOpen] = useState(false);
	const [question, setQuestion] = useState("");
	// ...
	// All the logic that we will see later
	const answerQuestion = () => {  }
	// ...
	return (
		<>
			<input
				placeholder="Ask a question"
				// We open the modal here
				// to let the user ask a question
				onClick={() => setOpen(true)}
				type="text"
			/>
			<Modal open={open} onClose={() => setOpen(false)}>
				<form onSubmit={answerQuestion} className="nx-flex nx-gap-3">
					<input
						placeholder="Ask a question"
						type="text"
						value={question}
						onChange={(e) => setQuestion(e.target.value)}
					/>
					<button type="submit">					
						Ask
					</button>
				</form>
			</Modal>
		</>
	);
} Last, update the config to set the search bar we created: const config: DocsThemeConfig = {
	logo: <span>My Project</span>,
	project: {
		link: 'https://github.com/shuding/nextra-docs-template',
	},
	chat: {
		link: 'https://discord.com',
	},
	docsRepositoryBase: 'https://github.com/shuding/nextra-docs-template',
	footer: {
		text: 'Nextra Docs Template',
	},
	// add this to use our Search component
	search: {
		component: <Search />
	}
} Building the context Here you will need the OpenAI token-counting library so run . tiktoken npm i @dqbd/tiktoken Now we are going to build the prompt to contextualize ChatGPT in a NextJS API endpoint. Create a file with the code: pages/api/buildPrompt.ts // pages/api/buildPrompt.ts
import { get_encoding } from "@dqbd/tiktoken";

// Load the tokenizer which is designed to work with the embedding model
const enc = get_encoding('cl100k_base');
const apiKey = process.env.EMBEDBASE_API_KEY;

// this is how you search Embedbase with a string query
const search = async (query: string) => {
	return fetch("https://embedbase-hosted-usx5gpslaq-uc.a.run.app/v1/documentation/search", {
		method: "POST",
		headers: {
			Authorization: "Bearer " + apiKey,
			"Content-Type": "application/json"
		},
		body: JSON.stringify({
			query: query
		})
	}).then(response => response.json());
};

const createContext = async (question: string, maxLen = 1800) => {
	// get the similar data to our query from the database
	const searchResponse = await search(question);
	let curLen = 0;
	const returns = [];
	// We want to add context to some limit of length (tokens)
	// because usually LLM have limited input size
	for (const similarity of searchResponse["similarities"]) {
		const sentence = similarity["data"];
		// count the tokens
		const nTokens = enc.encode(sentence).length;
		// a token is roughly 4 characters, to learn more
		// https://help.openai.com/en/articles/4936856-what-are-tokens-and-how-to-count-them
		curLen += nTokens + 4;
		if (curLen > maxLen) {
			break;
		}
		returns.push(sentence);
	}
	// we join the entries we found with a separator to show it's different
	return returns.join("\n\n###\n\n");
}

// this is the endpoint that returns an answer to the client
export default async function buildPrompt(req, res) {
	const prompt = req.body.prompt;
	const context = await createContext(prompt);
	const newPrompt = `Answer the question based on the context below, and if the question can't be answered based on the context, say "I don't know"\n\nContext: ${context}\n\n---\n\nQuestion: ${prompt}\nAnswer:`;
	res.status(200).json({ prompt: newPrompt });
} Making calls to ChatGPT First, add some utility function that is used to make stream calls to OpenAI in the file , you'll need to install by running . utils/OpenAIStream.ts eventsource-parser npm i eventsource-parser import {
	createParser,
	ParsedEvent,
	ReconnectInterval,
} from "eventsource-parser";

  
export interface OpenAIStreamPayload {
	model: string;
	// this is a list of messages to give ChatGPT
	messages: { role: "user"; content: string }[];
	stream: boolean;
}

  
export async function OpenAIStream(payload: OpenAIStreamPayload) {
	const encoder = new TextEncoder();
	const decoder = new TextDecoder();
	
	let counter = 0;
	const res = await fetch("https://api.openai.com/v1/chat/completions", {
		headers: {
			"Content-Type": "application/json",
			"Authorization": `Bearer ${process.env.OPENAI_API_KEY ?? ""}`,
		},
		method: "POST",
		body: JSON.stringify(payload),
	});
	
	const stream = new ReadableStream({
		async start(controller) {
			// callback
			function onParse(event: ParsedEvent | ReconnectInterval) {
				if (event.type === "event") {
					const data = event.data;
					// https://beta.openai.com/docs/api-reference/completions/create#completions/create-stream
					if (data === "[DONE]") {
						controller.close();
						return;
					}
					try {
						const json = JSON.parse(data);
						// get the text response from ChatGPT
						const text = json.choices[0]?.delta?.content;
						if (!text) return;
						if (counter < 2 && (text.match(/\n/) || []).length) {
							// this is a prefix character (i.e., "\n\n"), do nothing
							return;
						}
						const queue = encoder.encode(text);
						controller.enqueue(queue);
						counter++;
					} catch (e) {
						// maybe parse error
						controller.error(e);
					}
				}
			}
		
			// stream response (SSE) from OpenAI may be fragmented into multiple chunks
			// this ensures we properly read chunks and invoke an event for each SSE event stream
			const parser = createParser(onParse);
			// https://web.dev/streams/#asynchronous-iteration
			for await (const chunk of res.body as any) {
				parser.feed(decoder.decode(chunk));
			}
		},
	});
	
	  
	return stream;
} Then, create a file which will be an endpoint to simply make a streaming call to ChatGPT. pages/api/qa.ts // pages/api/qa.ts
import { OpenAIStream, OpenAIStreamPayload } from "../../utils/OpenAIStream";
export const config = {
	// We are using Vercel edge function for this endpoint
	runtime: "edge",
};

interface RequestPayload {
	prompt: string;
}

const handler = async (req: Request, res: Response): Promise<Response> => {
	const { prompt } = (await req.json()) as RequestPayload;
	if (!prompt) {
		return new Response("No prompt in the request", { status: 400 });
	}
	const payload: OpenAIStreamPayload = {
		model: "gpt-3.5-turbo",
		messages: [{ role: "user", content: prompt }],
		stream: true,
	};
	const stream = await OpenAIStream(payload);
	return new Response(stream);
};
export default handler; Connect everything & Asking questions Now it is time to ask questions through API calls. Edit to add the function to the component: theme.config.tsx Search // theme.config.tsx
const Search = () => {
	const [open, setOpen] = useState(false);
	const [question, setQuestion] = useState("");
	const [answer, setAnswer] = useState("");
	const answerQuestion = async (e: any) => {
		e.preventDefault();
		setAnswer("");
		// build the contextualized prompt
		const promptResponse = await fetch("/api/buildPrompt", {
			method: "POST",
			headers: {
				"Content-Type": "application/json",
			},
			body: JSON.stringify({
				prompt: question,
			}),
		});
		const promptData = await promptResponse.json();
		// send it to ChatGPT
		const response = await fetch("/api/qa", {
			method: "POST",
			headers: {
				"Content-Type": "application/json",
			},
			body: JSON.stringify({
				prompt: promptData.prompt,
			}),
		});
		if (!response.ok) {
			throw new Error(response.statusText);
		}
		const data = response.body;
		if (!data) {
			return;
		}
		
		const reader = data.getReader();
		const decoder = new TextDecoder();
		let done = false;
		// read the streaming ChatGPT answer
		while (!done) {
			const { value, done: doneReading } = await reader.read();
			done = doneReading;
			const chunkValue = decoder.decode(value);
			// update our interface with the answer
			setAnswer((prev) => prev + chunkValue);
		}
	};
	return (
		<>
			<input
				placeholder="Ask a question"
				onClick={() => setOpen(true)}
				type="text"
			/>
			<Modal open={open} onClose={() => setOpen(false)}>
				<form onSubmit={answerQuestion} className="nx-flex nx-gap-3">
					<input
						placeholder="Ask a question"
						type="text"
						value={question}
						onChange={(e) => setQuestion(e.target.value)}
					/>
					<button type="submit">
						Ask
					</button>
				</form>
				<p>
					{answer}
				</p>
			</Modal>
		</>
	);
} You should have this by now: Of course, feel free to improve the style 😁. Closing thoughts In summary, we have: Created a Nextra documentation Prepared and store our documents in Embedbase Built an interface to get the user's query Searched for the context of the question in our database to provide ChatGPT Built the prompt with this context and call ChatGPT Let the user ask a question by connecting everything together Thank you for reading this document, there is an open-source template to create this type of documentation . here Further reading Embeddings are a machine learning concept that allows you to represent the semantics of your data as a number, which allows you to create features such as: semantic search (e.g., what is the similarity between "the cow eats grass" and "the monkey eats bananas", which also works for comparing images, etc.) recommendation systems (if you like the movie Avatar, you might like Star Wars) classification ("this movie is amazing" is a positive sentence, "this movie sucks" is a negative sentence) generative search (chatbot that answers questions about a PDF, a website, a YouTube video, etc.) Embeddings are not a new technology, but they have been made more popular, more general, and more accessible recently thanks to the OpenAI embeddings endpoint which is fast and cheap. We won't dive into the technical subject of embeddings, there is a lot of information about them on the internet. AI embeddings can be thought of as a sorting hat of Harry Potter. Just like the sorting hat assigns houses based on the traits of the students, AI embeddings are assigned to similar content based on their features. When we want to find similar items, we can ask AI to provide us with embeddings of the items, and then calculate the distance between them. The closer the distance between the embeddings, the more similar the items. This process is similar to how the sorting hat uses the traits of each student to determine their best fit for a house. By using AI embeddings, we can quickly and easily compare items based on their features, resulting in smarter decisions and more efficient search results. The method described above is simply to embed words, but today, sentences, images, sentences + images, and many other things are possible. When you want to use embeddings in production software, there are some pitfalls to be careful with: All the infra of storing embeddings at scale Cost optimization (e.g. avoid calculating data twice) Segmentation of user embeddings (you don't want your search function to display another user's data) Dealing with the model input size limit Integration with popular app infras (supabase, firebase, google cloud, etc.) Preparing the data continuously in GitHub Actions The point of embeddings is to be able to index any kind of unstructured data, we want our documentation to be indexed every time we modify it, right? This is a GitHub action that will index every markdown file when a is done on the branch: git push main # .github/workflows/index.yaml
name: Index documentation
on:
	push:
		branches:
			- main
jobs:
	index:
		runs-on: ubuntu-latest
		steps:
			- uses: actions/checkout@v2
			- uses: actions/setup-node@v2
			with:
				node-version: 14
			- run: npm install
			- run: node scripts/sync.js
				env:
					EMBEDBASE_API_KEY: ${{ secrets.EMBEDBASE_API_KEY }} Don't forget to add to your . EMBEDBASE_API_KEY GitHub secrets

Building a ChatGPT-Powered Markdown Documentation 

This blog will take you through connecting the SuperTokens core service with a MySQL or a PostgreSQL database with and without Docker. This is only applicable if you are self-hosting the SuperTokens core service. There are several methods for how you might want to run SuperTokens along with a database. In this blog, we will cover: Running with MySQL: a) Running SuperTokens and MySQL without docker b) Running SuperTokens with Docker and MySQL without docker c) Running SuperTokens without Docker and MySQL with docker d) Running SuperTokens and MySQL with docker, but without docker-compose e) Running SuperTokens and MySQL with docker, with docker-compose Running with PostgreSQL: a) Running SuperTokens and PostgreSQL without docker b) Running SuperTokens with Docker and PostgreSQL without docker c) Running SuperTokens without Docker and PostgreSQL with docker d) Running SuperTokens and PostgreSQL with docker, but without docker-compose e) Running SuperTokens and PostgreSQL with docker, with docker-compose Please feel free to navigate to the correct section based on your setup. In each section, we will be linking to the SuperTokens documentation wherever applicable so that this blog is not very lengthy. All the sections below assume that you will be using a Linux based operating system. For Windows, the syntax for some of the steps might be different, but the overall steps that need to be performed will be the same. 1a) Running SuperTokens and MySQL without docker Install SuperTokens on your local machine by following the . self-hosted, without docker, instructions in the SuperTokens’ documentation Connect to the MySQL server on your local machine and create a database for SuperTokens to write to: create database supertokens; If you already have a database for your application and want SuperTokens to create tables in that, you can skip this step. Create a MySQL user that has full access to the database created in the previous step. This user will be used by SuperTokens to create and write to the database tables: CREATE USER 'supertokens_user'@'localhost' IDENTIFIED BY 'somePassword'; GRANT ALL ON supertokens.* TO 'supertokens_user'@'localhost'; FLUSH PRIVILEGES; Notice that we only allow this user to work via . This would only work if the SuperTokens core is running locally as well. If you are running the core in a different location, then you would need to replace in the above with . 'localhost' 'localhost' '%' Edit the SuperTokens file (located in ) to add the following config: config.yaml /usr/lib/supertokens/config.yaml mysql_connection_uri: "mysql://supertokens_user:[email protected]:3306/supertokens" Make sure that you put in the right values for the user, password, database name and location of your MySQL instance in the above connection uri string. Run SuperTokens by running on your terminal: supertokens start supertokens start

Loading storage layer.
Loading MySQL config.
...
Started SuperTokens on localhost:3567 with PID: ... Verify that it is setup correctly by querying the core service: curl http://localhost:3567/hello If you get back a reply, the core setup is done! Hello 1b) Running SuperTokens with Docker and MySQL without docker For this setup to work, we must connect SuperTokens and MySQL via the host machine’s network. For this, we will have to expose the MySQL db to the local IP. Start by pulling the SuperTokens docker image that is compatible with MySQL: docker pull registry.supertokens.io/supertokens/supertokens-mysql Expose MySQL server to all network interfaces on your machine. To do this, edit the file (MySQL config file) to include: my.cnf bind-address = 0.0.0.0 Be sure to restart your MySQL server after saving the file. Connect to the MySQL server on your local machine and create a database for SuperTokens to write to: create database supertokens; If you already have a database for your application and want SuperTokens to create tables in that, you can skip this step. Create a MySQL user that has full access to the database created in the previous step. This user will be used by SuperTokens to create and write to the database tables: REATE USER 'supertokens_user'@'%' IDENTIFIED BY 'somePassword'; GRANT ALL ON supertokens.* TO 'supertokens_user'@'%'; FLUSH PRIVILEGES; Run the SuperTokens docker image with the env var specifying the MySQL connection URI: docker run \
  -p 3567:3567 \
  --network=host \
  -e MYSQL_CONNECTION_URI="mysql://supertokens_user:[email protected]:3306/supertokens" \
  -d registry.supertokens.io/supertokens/supertokens-mysql Be sure to replace with the correct IP of your system. 192.168.1.1 This will start the docker image in the background. You can find it by running: docker ps If you want to run it in the foreground, you can remove the option from the command. -d docker run Verify that it is setup correctly by querying the core service: curl http://localhost:3567/hello If you get back a reply, the core setup is done! Hello 1c) Running SuperTokens without Docker and MySQL with docker Install SuperTokens on your local machine by following the . self-hosted, without docker, instructions in the SuperTokens’ documentation Start the MySQL docker container: docker run \
  -e MYSQL_ROOT_PASSWORD=root \
  -e MYSQL_USER=supertokens_user \
  -e MYSQL_PASSWORD=somePassword \
  -e MYSQL_DATABASE=supertokens \
  --network=host \
  -p 3306:3306 \
  -d mysql The above will start the mysql db with a new database called . SuperTokens core will store the data in this database. If you want the data to be stored in an existing db, please provide that db’s name instead. supertokens Edit the SuperTokens file (located in ) to add the following config: config.yaml /usr/lib/supertokens/config.yaml mysql_connection_uri: "mysql://supertokens_user:[email protected]:3306/supertokens" Make sure that you put in the right values for the user, password, database name and location of your MySQL instance in the above connection uri string. Run SuperTokens by running on your terminal: supertokens start supertokens start

Loading storage layer.
Loading MySQL config.
...
Started SuperTokens on localhost:3567 with PID: ... Verify that it is setup correctly by querying the core service: curl http://localhost:3567/hello If you get back a reply, the core setup is done! Hello 1d) Running SuperTokens and MySQL with docker, but without docker-compose Start by pulling the SuperTokens docker image that is compatible with MySQL: docker pull registry.supertokens.io/supertokens/supertokens-mysql Start the MySQL docker container: docker run \
  -e MYSQL_ROOT_PASSWORD=root \
  -e MYSQL_USER=supertokens_user \
  -e MYSQL_PASSWORD=somePassword \
  -e MYSQL_DATABASE=supertokens \
  --network=host \
  -p 3306:3306 \
  -d mysql The above will start the mysql db with a new database called . SuperTokens core will store the data in this database. If you want the data to be stored in an existing db, please provide that db’s name instead. supertokens Run the SuperTokens docker image with the env var specifying the MySQL connection URI: docker run \
  -p 3567:3567 \
  --network=host \
  -e MYSQL_CONNECTION_URI="mysql://supertokens_user:[email protected]:3306/supertokens" \
  -d registry.supertokens.io/supertokens/supertokens-mysql Be sure to replace with the correct IP of your system. 192.168.1.1 This will start the docker image in the background. You can find it by running: docker ps If you want to run it in the foreground, you can remove the option from the command. -d docker run Verify that it is setup correctly by querying the core service: curl http://localhost:3567/hello If you get back a reply, the core setup is done! Hello 1e) Running SuperTokens and MySQL with docker, with docker-compose Use the following docker compose file. You can call it docker-compose.yaml version: '3'

services:
  db:
    image: mysql:latest
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USER: supertokens_user
      MYSQL_PASSWORD: somePassword
      MYSQL_DATABASE: supertokens
    ports:
      - 3306:3306
    networks:
      - app_network
    restart: unless-stopped
    healthcheck:
      test: [ "CMD", "mysqladmin", "ping", "-h", "localhost" ]
      timeout: 20s
      retries: 10

  supertokens:
    image: registry.supertokens.io/supertokens/supertokens-mysql
    depends_on:
      - db
    ports:
      - 3567:3567
    environment:
      MYSQL_CONNECTION_URI: mysql://supertokens_user:[email protected]:3306/supertokens
    networks:
      - app_network
    restart: unless-stopped
    healthcheck:
      test: >
        bash -c 'exec 3<>/dev/tcp/127.0.0.1/3567 && echo -e "GET /hello HTTP/1.1\r\nhost: 127.0.0.1:3567\r\nConnection: close\r\n\r\n" >&3 && cat <&3 | grep "Hello"'
      interval: 10s
      timeout: 5s
      retries: 5

networks:
  app_network:
    driver: bridge You can run the following command to start the service: docker-compose up Verify that it is setup correctly by querying the core service: curl http://localhost:3567/hello If you get back a reply, the core setup is done! Hello 2a) Running SuperTokens and PostgreSQL without docker Install SuperTokens on your local machine by following the . self-hosted, without docker, instructions in the SuperTokens’ documentation Connect to the PostgreSQL server on your local machine and create a database for SuperTokens to write to: CREATE DATABASE supertokens; If you already have a database for your application and want SuperTokens to create tables in that, you can skip this step. Create a PostgreSQL user that has full access to the database created in the previous step. This user will be used by SuperTokens to create and write to the database tables: CREATE USER supertokens_user WITH ENCRYPTED PASSWORD 'somePassword'; GRANT ALL PRIVILEGES ON DATABASE supertokens TO supertokens_user; Edit the SuperTokens file (located in ) to add the following config: config.yaml /usr/lib/supertokens/config.yaml postgresql_connection_uri: "postgresql://supertokens_user:[email protected]:5432/supertokens" Make sure that you put in the right values for the user, password, database name and location of your postgreSQL instance in the above connection uri string. Run SuperTokens by running supertokens start on your terminal: supertokens start

Loading storage layer.
Loading PostgreSQL config.
...
Started SuperTokens on localhost:3567 with PID: ... Verify that it is setup correctly by querying the core service: curl http://localhost:3567/hello If you get back a reply, the core setup is done! Hello 2b) Running SuperTokens with Docker and PostgreSQL without docker For this setup to work, we must connect SuperTokens and PostgreSQL via the host machine’s network. For this, we will have to allow PostgreSQL to allow incomming client connections over the network. Start by pulling the SuperTokens docker image that is compatible with PostgreSQL: docker pull registry.supertokens.io/supertokens/supertokens-postgresql Allow incoming client connections to your PostgreSQL database over your network by adding the following lines to the and file. postgresql.conf pg_hba.conf postgresql.conf listen_addresses = '0.0.0.0' pg_hba.conf host all all 0.0.0.0/0 md5 Connect to the PostgreSQL server on your local machine and create a database for SuperTokens to write to: CREATE DATABASE supertokens; If you already have a database for your application and want SuperTokens to create tables in that, you can skip this step. Create a PostgreSQL user with full access to the database created in the previous step. This user will be used by SuperTokens to create and write to the database tables: CREATE USER supertokens_user with encrypted password 'somePassword'; GRANT ALL PRIVILEGES ON DATABASE supertokens TO supertokens_user; Run the SuperTokens docker image with the env var specifying the PostgreSQL connection URI: docker run \              
  -p 3567:3567 \
  --network=host \
  -e POSTGRESQL_CONNECTION_URI="postgresql://supertokens_user:[email protected]:5432/supertokens" \
  -d registry.supertokens.io/supertokens/supertokens-postgresql Be sure to replace with the correct IP of your system. 192.168.1.1 This will start the docker image in the background. You can find it by running: docker ps If you want to run it in the foreground, you can remove the option from the command. -d docker run Verify that it is setup correctly by querying the core service: curl http://localhost:3567/hello If you get back a reply, the core setup is done! Hello 2c) Running SuperTokens without Docker and PostgreSQL with docker Install SuperTokens on your local machine by following the . self-hosted, without docker, instructions in the SuperTokens’ documentation Start the PostgreSQL docker container: docker run \
  -e POSTGRES_USER=root \
  -e POSTGRES_PASSWORD=root \
  --network=host \
  -p 5432:5432 \
  -d postgres \
  -c listen_addresses=0.0.0.0 The above will start the PostgreSQL db. You will need to connect to the database and create a user with the privileges. CREATE DATABASE supertokens; If you already have a database for your application and want SuperTokens to create tables in that, you can skip this step. Create a PostgreSQL user with full access to the database created in the previous step. This user will be used by SuperTokens to create and write to the database tables: CREATE USER supertokens_user with encrypted password 'somePassword'; GRANT ALL PRIVILEGES ON DATABASE supertokens TO supertokens_user; Edit the SuperTokens file (located in ) to add the following config: config.yaml /usr/lib/supertokens/config.yaml postgresql_connection_uri: "postgresql://supertokens_user:[email protected]:5432/supertokens" Make sure that you put in the right values for the user, password, database name and location of your PostgreSQL instance in the above connection uri string. Run SuperTokens by running on your terminal: supertokens start supertokens start

Loading storage layer.
Loading PostgreSQL config.
...
Started SuperTokens on localhost:3567 with PID: ... Verify that it is setup correctly by querying the core service: curl http://localhost:3567/hello If you get back a reply, the core setup is done! Hello 2d) Running SuperTokens and PostgreSQL with docker, but without docker-compose Start by pulling the SuperTokens docker image that is compatible with PostgreSQL: docker pull registry.supertokens.io/supertokens/supertokens-postgresql Start the PostgreSQL docker container: docker run \
  -e POSTGRES_USER=root \
  -e POSTGRES_PASSWORD=root \
  --network=host \
  -p 5432:5432 \
  -d postgres \
  -c listen_addresses=0.0.0.0 The above will start the PostgreSQL db. You will need to connect to the database and create a user with the privileges. CREATE DATABASE supertokens; If you already have a database for your application and want SuperTokens to create tables in that, you can skip this step. Create a PostgreSQL user that has full access to the database created in the previous step. This user will be used by SuperTokens to create and write to the database tables: CREATE USER supertokens_user with encrypted password 'somePassword'; GRANT ALL PRIVILEGES ON DATABASE supertokens TO supertokens_user; Run the SuperTokens docker image with the env var specifying the PostgreSQL connection URI: docker run \              
  -p 3567:3567 \
  --network=host \
  -e POSTGRESQL_CONNECTION_URI="postgresql://supertokens_user:[email protected]:5432/supertokens" \
  -d registry.supertokens.io/supertokens/supertokens-postgresql Be sure to replace with the correct IP of your system. 192.168.1.1 This will start the docker image in the background. You can find it by running: docker ps If you want to run it in the foreground, you can remove the option from the command. -d docker run Verify that it is setup correctly by querying the core service: curl http://localhost:3567/hello If you get back a reply, the core setup is done! Hello 2e) Running SuperTokens and PostgreSQL with docker, with docker-compose Use the following docker compose file. You can call it docker-compose.yaml version: '3'

services:
  db:
    image: 'postgres:latest'
    environment:
      POSTGRES_USER: supertokens_user 
      POSTGRES_PASSWORD: somePassword 
      POSTGRES_DB: supertokens
    ports:
      - 5432:5432
    networks:
      - app_network
    restart: unless-stopped
    healthcheck:
      test: ['CMD', 'pg_isready -U supertokens_user']
      interval: 5s
      timeout: 5s
      retries: 5

  supertokens:
    image: registry.supertokens.io/supertokens/supertokens-postgresql
    depends_on:
      - db
    ports:
      - 3567:3567
    environment:
      POSTGRESQL_CONNECTION_URI: "postgresql://supertokens_user:[email protected]:5432/supertokens"
    networks:
      - app_network
    restart: unless-stopped
    healthcheck:
      test: >
        bash -c 'exec 3<>/dev/tcp/127.0.0.1/3567 && echo -e "GET /hello HTTP/1.1\r\nhost: 127.0.0.1:3567\r\nConnection: close\r\n\r\n" >&3 && cat <&3 | grep "Hello"'
      interval: 10s
      timeout: 5s
      retries: 5

networks:
  app_network:
    driver: bridge You can run the following command to start the service: docker-compose up Verify that it is setup correctly by querying the core service: curl http://localhost:3567/hello If you get back a reply, the core setup is done! Hello Written by the Folks at — hope you enjoyed! We are always available on our . SuperTokens Discord server

How to connect SuperTokens to a MySQL or to a PostgreSQL database

Here's what we'll be building Chrome extensions are small HTML, CSS and JS apps that we can install in the chrome browser. In this tutorial, We are going to build an extension that allows users get the most up to date data on the Coronavirus by simply typing the name of a country without having to navigate to a website. Let's get started! 1. Create a new directory and navigate into that directory. I'm a sucker for the command line so you'll see me use a number of Linux/Mac CLI commands in this post. You should have no problems following along. covid-extension && covid-extension mkdir cd Let's setup our app to make use of npm packages by running init -y npm 2. We need to create some files. I like to use webpack when developing apps so I can get that hot reload feature. to get setup to use webpack. Check out my article on Webpack To get set up quickly, run ```npm i webpack && npm i webpack-cli``` Next, create a dist folder. Inside the dist folder, create an index.html file and a manifest.json file. Then, create a src folder and an index.js file within it. (You can use the command line for this). ```mkdir src && touch index.js``` Get your code to compile by running ```webpack``` from the CLI. Running the `webpack` command automatically generates a `main.js` file inside our **dist** folder. It'll contain code generated by **webpack** based on the code we write inside our **index.js** file. 3. Head into your manifest.json and add the following code. This is the file that contains information on how Chrome should handle our extension. { : , : , : , : [ ], : { : }
} "manifest_version" 2 "name" "C19-Search!" "version" "0.1.0" "permissions" "<all_urls>" "browser_action" "default_popup" "index.html" , and are important and MUST be declared. Your extension must have a of to work with the latest chrome browsers.(what google says), you can give it whatever name/version you wish. We're using semantic versioning here. manifest_version name version manifest_version 2 We set permissions to so that our extension can run on any page. instructs chrome to show our file as a popup when the icon is clicked. all_urls browser action index.html 4. Next, let's load our chrome extension into chrome. In your chrome browser's address bar, head to chrome://extensions/ Towards the top left corner, click the button. Navigate to the folder where you have your files to upload that folder. If you're using Webpack, upload the folder. Load unpacked dist Our extension should now be uploaded. See below. 5. Head to your index.html. Hook up your `main.js` JavaScript file to your HTML.  Also create and hook up a file. styles.css Next, we create a simple form. Your file should look like below(your will be index.js if you aren't using Webpack). We will have a very basic UI. script src Our UI would not look like below. Nothing pretty, but it works. 5. Just before we start writing our script, we need to install . You should have an npm directory initialized already from step 1. Run axios npm axios --save i to install axios. Let's head into our file and get cracking. We'd be using an open source API. index.js We have an asynchronous function called and within that function, we can use . allows us to stop executing code that is dependent on a response from a server, while we wait for the response from a server. By using the keyword in front of a piece of code, we can get the rest of our code to stop executing while that piece of code executes. searchForCountry async-await Async await await In this example, we a response from our GET request before setting that response to our cases, recovered and deaths variable. await All of this happens within our block. Our block executes our GET request and if there’s an error, it is “caught” and handled inside the block. try — catch try catch Once you're done with your file and have it saved, head back to the and hit the reload button on the extension you have uploaded. index.js chrome://extensions/ Click the extension icon and watch it work! And that's it! You've a chrome extension. Here's a to my github repo for the source code. link

How to Build a Chrome Extension That Makes API calls

If you’re like me, you’re fascinated with AI. Maybe you’d love to dig deeper and get an image recognition program running in or ? Perhaps you’re a kick-ass developer or systems architect and you know computers incredibly well but there’s just one little problem: TensorFlow Theano You suck at math. That’s all right! I share your dirty little secret and I have some books and websites that will really help you get rolling fast. Like many folks, my love of intelligent machines didn’t come from calculus class. It sprang from science fiction. I remember reading one beautiful summer evening and imagining ways to trip up Asimov’s . As I watched masterpieces like and , it seemed that any day a and declare itself sentient. When I grew up and started publishing I imagined AI as a pervasive, ambient force that’s always there, like electricity, touching every aspect of life. “I, Robot” Three Rules of Robotics 2001: A Space Odyssey Ghost in the Shell gestalt consciousness might surge up from the glittering sea of information my own sci-fi Turns out, we have a few things to figure out before General AI can pop from the primordial digital goo. Mostly nothing ever came of the early AI promises in the 80’s and 90’s. Hype never lived up to reality and . AI winter followed AI winter All that changed in the last few years with the sudden success of . Deep Learning Maybe you saw the story in the New York Times that showed how transformed its translation services delivering accuracy that rivaled professional translators? In a mere nine months they outpaced what the platform managed in the seven previous years . Google almost overnight combined Perhaps you read about with open source tools? You might have also seen this amazing slide below that shows how DL ripped through the in just a few years, dropping the error rate from 25% to something that performs better than humans in 2017. the kid who built a self-driving car in his freaking garage Imagenet image recognition competition No matter how you cut it, AI solves big, intractable problems that have eluded us for decades. We know how to drive a car yet we can’t tell machines how to do it. But we can let machines figure it out for themselves. For once a technology coming out of Silicon Valley is not just hype. It’s real. AI is hot for good reasons. Top AI researchers are and you want to get in on the gold rush. Then again, you probably saw and as a traditional software engineer or sys-admin you want to make sure you have the skills to compete in an AI-centric world. No problem. There are tons of tutorials out there. You just have to get started, right? earning more than NFL starting quarterbacks the big scary stories that AI will eat all the jobs Then you get to a passage like the one below in and you have no idea what he is talking about at all. Ian Goodfellow’s seminal Deep Learning book Uh-oh. The problem is you have to understand a nested layer of logic, terms, symbols and ideas that are all interrelated but you have no foundation for any of it. So it basically sounds like an alien language. You probably understand all the text leading up to it but the rest is just gibberish. It can turn really disheartening fast. But have no fear! All is not lost. I’m here to help you wade through the swamp with some books that will get you crunching numbers like a savant. All right, well maybe you won’t be , but you can put aside those painful memories of times-table memorization and get cranking. You CAN learn math as an adult. Daniel Tammet I’ve tried to read a number of AI texts and tutorials. I understand the concepts intuitively. They make perfect sense to me. It’s just that when I see a string of symbols my brain glazes over and I have no idea what I’m reading. As a systems architect for much of my life I didn’t need much math. There are IP subnet cheat sheets and as long as I knew how far electricity could reasonably travel along the length of cables I could cut them and crimp them appropriately. For most of my life, I needed to understand how systems get setup, how they work together and how they stay running. Systems administration is very boolean. It either works or it doesn’t. But AI and math works on a different side of the brain. What I needed were some primers written for adults that treat you like one. I also want books that answer questions about math works. In school, your reason for learning was probably “shut up and do it or else.” But as an adult you need more. You want to know how things work too. why The very first book you need is Mathematics: A Very Short Introduction by Timothy Gowers. This book breaks down the “why” of math beautifully. It relates the subject to the real world, gets into the philosophy and then quickly leaves the philosophy behind because you don’t really need to understand whether fractions actually exist in nature or at the Platonic level. Instead, Timothy helped me understand that math is an abstraction layer. It breaks problems down into simpler, cleaner steps. The complexity of working out a model that precisely simulates particle interaction in a box would need to take into account an insane amount of real world physics properties like magnetic interference, gravity, the force of the collision, the particles initial direction and speed as well as much, much more. It turns out life is a complex series of algorithms. But here’s the trick. In practice you don’t need a perfect model. Instead, math looks to break the problem down into its components. What are the critical factors? Math gives you a general abstraction of the problem that can work with other problem sets as well. In essence, the numbers themselves don’t matter all that much. They are just variables. Math boils down to variables and rules. You can learn those variables and rules! essential While you’re reading the book you will want to have . You can also pick up . If you’re like me, you’ll have to see these symbols hundreds of times before they stick. You may find yourself forgetting various symbols the second you turn the page! Not to worry. This cheat sheet is perfect. Take a deep breath, slow down and go through the symbols one by one until you start to understand that string of crazy looking glyphs. Even if you have to look up every symbol a thousand times do it! There are no shortcuts to learning in life. You just have to do the work. this website’s handy dandy guide to the major math symbols this super concise guide for engineers called Mathematical Notation by Edward R. Scheinerman Now there are two other strong contenders for getting your math foundation built. Each appeals to a different mindset. I prefer the very short intro because it gets down to brass tacks quickly and still manages to stay very relate-able. The “Math for Nonmathematicians” book is much longer and goes into more detail about the history of math and how it works in the world. Some people will really enjoy that approach. The “No Bullshit Guide” is quick and gets right into the equations fast with no answer as to why anything works the way it does. It’s basically a primer on the rules. That will appeal to folks who have less of a philosophical bent. The first is Mathematics for the Nonmathemetician by Morris Kline. The second is the No Bullshit Guide to Math and Physics by Ivan Savov. Now there are a few typos in the book but I don’t find them all that distracting. I appreciate the book’s approach to gentle learning that quickly accelerates. Some people get worked into a lather over typos but you’ve got bigger challenges to worry about. You’re trying to learn math when your brain isn’t quite as plastic as it once was in your youth! So let the typos go and see the big picture here. This book will really help you get moving in the right direction. The next book you will want is Algebra Unplugged by Jim Loats and Kenn Amdahl. It also has some typos, but there is a with updates that fixes most of them. This book is incredibly gentle and intuitive. It seems to anticipate your objections and fears the second you have them! The author is uncanny in how he spots your resistance as it happens. The book walks through only the math you need for neural networks specifically. It then works through Python, assuming you know nothing about programming. Finally it gets you coding your own neural network from scratch. Now while there are certainly tools out there that will work better for professional programs, it helps to try your hand at your own first, so you understand the basics. After you’ve got the math down you’ll want to dig into Make Your Own Neural Network by Tariq Rashid. great Github repo After that book, you’ll want to start browsing the web. There are awesome new tutorials coming out every single day. Maybe check out Tensorflow for Poets or Recurrent Neural Networks for Artists . Medium itself is awesome for learning about AI. Then again, maybe you’re not the class taking type and prefer to work through things yourself? No problem. For example, check out this article on a roundup of various classes you can take to get deeper than you could on your own. Instead, check out this eight part series from AI researcher Arthur Juliani . There is also this one called Machine Learning is Fun , another great series right here on your favorite site. Lastly, you may want to move on to a more advanced book, confident in your ability to understand more challenging concepts. That book is the one I already mentioned earlier, Ian Goodfellow’s Deep Learning book , which you can read online or grab yourself a hard copy on Amazon . That’s all for now. Feel free to add your own books in the comments. Everyone learns a little differently and there are bound to be other books worth sharing. ############################################ Be sure to check out the rest of this ongoing series. Feel free to follow me because you want to be the first the read the latest articles as soon as they hit the press. — This article guides you through the essential books to read if you were never a math fan but you’re learning it as an adult. Learning AI if You Suck at Math — Part 1 — This article guides you through getting started with your first projects. Learning AI if You Suck at Math — Part 2 — Practical Projects — This article guides you through getting a powerful deep learning machine setup and installed with all the latest and greatest frameworks. Learning AI if You Suck at Math — Part 3 — Building an AI Dream Machine — This one answers the ancient mystery: What the hell is a tensor? Learning AI if You Suck at Math — Part 4 — Tensors Illustrated (with Cats!) — Here we create our first Python program and explore the inner workings of neural networks! Learning AI if You Suck at Math — Part 5 — Deep Learning and Convolutional Neural Nets in Plain English — Still struggling to understand those funny little symbols? Let’s change that now! Learning AI if You Suck at Math — Part 6 — Math Notation Made Easy — Understand how Google and Siri understand what you’re mumbling. Learning AI if You Suck at Math — Part 7 — The Magic of Natural Language Processing ############################################ If you enjoyed this tutorial, I’d love it if you could clap it up to recommend it to others. After that please feel free email the article off to a friend! Thanks much. ############################################ If you love my work Help me disconnect from the Matrix and and world. please do me the honor of visiting my Patreon page because that’s how we change the future together. I’ll repay your generosity a hundred fold by focusing all my time and energy on writing, research and delivering amazing content for you ########################################### A bit about me: I’m an author, engineer and serial entrepreneur. During the last two decades, I’ve covered a broad range of tech from Linux to virtualization and containers. You might like a copy of my first novel, The Scorpion Game, because it’s free. Readers have called it “the first serious competition to Neuromancer” and “ like a double shot of fine whiskey after drinking watered down beer for weeks. ” You can also join my private Facebook group, the Nanopunk Posthuman Assassins , where we discuss all things tech, sci-fi, fantasy and more. ############################################ I occasionally make coin from the links in my articles but I only recommend things that I OWN, USE and LOVE. Check my . full policy here ############################################ Thanks for reading

Learning AI if You Suck at Math

A React HOC for AWS Cognito to Simplify User Authentication

Hooked on React Hooks — useState So what’s all the rage with React hooks? I’ve been exploring it for the past few months and lets just say I really believe that this is what React has needed to surmount its position as the top front end framework. Let’s Get Setup! Setup your project as shown in this . post Then lets npm install --save react@^16.8.0 react-dom@^16.8.0 If your adding this to an existing codebase its super important to make sure that the react and react-dom versions are the same. We had some issues where if was throwing an error from the server side not recognising hooks. setState becomes useState Here we have a component ColourPicker. It toggles between the three colours chosen, with the default on red. import React, { Component } from 'react';

import './ColourPicker.css';

class ColourPicker extends Component {
    constructor() {
        super();
        this.state = {
            colour: 'Red',
        };
    }
    
    colourChoice = (colour) => {
        this.props.handleColour(colour);
        this.setState({ colour: colour });
    };
    
    render() {
        return (
            <div className="colour-picker">
                <p>
                    Colour:{' '}
                    <span className="picker-choice">{this.state.colour}</span>
                </p>
                <button onClick={() => this.colourChoice('Blue')} />
                <button onClick={() => this.colourChoice('Cyan')} />
                <button onClick={() => this.colourChoice('Pink')} />
            </div>
        );
    }
}
export default ColourPicker; When a button is clicked, it triggers the propped function handleColour from the parent component which will do something there. Now lets check out the React hooks refactor; import React, { useState } from "react";

import "./ColourPicker.css";

const ColourPicker = ({ handleColour }) => {
    const [colour, setColour] = useState("Red");

    const colourChoice = (colour) => {
        setColour(colour);
        handleColour(colour);
    };

    return (
        <div className="colour-picker">
            <p>
                {`Colour: `}
                <span className="picker-choice">{colour}</span>
            </p>
            <button onClick={() => colourChoice("Blue")} />
            <button onClick={() => colourChoice("Cyan")} />
            <button onClick={() => colourChoice("Pink")} />
        </div>
    );
};

export default ColourPicker; First thing we should notice is that we import useState at the top. This is how you import each hook that you want to use. Next you should notice this line; const [colour, setColour] = useState("Red"); This array destructuring is going to be the format we use the old setState with. There are three parameters we want to add in for every state we want to use, the name of the state, the function name of changing the state, and the state’s default value. const [stateName, setStateNameNewState] = useState(defaultValue); With this in mind, check out the function colourChoice that is called on click; const colourChoice = (colour) => {
    setColour(colour);
    handleColour(colour);
}; compared to the old colourChoice = colour => {
        this.props.handleColour(colour);
        this.setState({ colour: colour });
    }; As you can see its much nicer readable syntax. There is no need to always put in a key: value pair anymore, and notice the lack of this and this.props keywords! So much better! Stuff I Like — If everything is pure functions, having this consistency is great. This will make React easier to learn and understand. There’s nothing worse then when you start out learning trying to get your head around jsx syntax, then have it be recommended to write pure functions when you can mixing with the Class syntax. Consistent written components — Even with the simple example above, you can see how much space is saved, without compromising on the readability of the code. Extra destructuring is not needed. With larger apps, having no this, state, or props keywords can mean a lot more lines code saved which in turn can lead to less syntax and scoping mistakes. Better syntax — This should make code more readable and quicker to understand without all the necessary clutter Easier to understand, better readability Cons ? — Having this destructured format might be confusing for newer developers. However, React typically has a lot of newer ES6 features which are essential for a smoother experience. Weird / advanced syntax — Living in Javascript-land, this is a common thing. But I think it can get out of control, especially for new learners. It is quite common to find old deprecated solutions and then find out later down the line that you have done things incorrectly. Adds more ways of doing things Useful References There are some great docs about React and hooks, check out these awesome references if you wanna read more. The official React docs — https://reactjs.org/docs/hooks-intro.html Dan Abrov’s awesome blog — https://overreacted.io/ Examples of common components using hooks — https://usehooks.com/ Amazing illustration explanation of React (and other code related things) — https://illustrated.dev/ Next post we’ll check out how hooks deal with lifecycle hooks.

Hooked on React Hooks — useState

This rather long post steps you through the process of setting up a on a Zero W or Raspberry Pi 3. There are a number of reasons why you might want to do such a thing: WiFi router Raspberry Pi Setup a demo any where access point for your web apps Create deployable devices for use in network testing. As an added bonus this post also describes how to install NodeJS and the AWS command line tool to created scripted workflows with AWS. Setting up the Raspberry Pi Setup the Raspberry Pi Zero W using . The version I used was Raspbian Lite 2018-06-27-raspbian-stretch-lite.img The following instructions are Mac OSX centric but not too different for how you’d do this using other operating systems. Locate SD card On Mac you can do this using diskutil via the command line. Execute the command below and look for a /dev/disk that matches the size of your SD card. For me, that’s /dev/disk2 $ diskutil list Unmount the SD card Next unmount the SD card using the disk number. $ diskutil unmountDisk /dev/disk2 Flash the OS image Use the command to flash the Raspbian lite image onto your SD card. Be careful when doing this! dd This is a good time to mention that the command can be very dangerous if you're not careful using it. Always make sure that you're pointing to the correct disk drive! You wouldn't want to erase the wrong drive. After all, there's a reason why the command is known as the Disk Destroyer, but that's not what dd stands for. See this bit of history if you're interested. dd dd [dd](https://en.wikipedia.org/wiki/Dd_%28Unix%29) $ sudo dd bs=1m if=./2018-06-27-raspbian-stretch-lite.img of=/dev/disk2 conv=sync While dd is running you can press ctrl-t on your keyboard to check on the status. The SD disk flash can take a while based on the speed of your SD card. It’s recommended that you use a Class 6 or Class 10 microSDHC card for performance reasons. Once the copy completes you can cd onto the card: $ cd /Volumes/boot Create an empty ssh file to tell the OS that you wish to enable SSH access: $ touch ssh Next create a file with the following, make sure to replace your ssid and psk fields with your router's settings. wpa_supplicant.conf ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdevupdate_config=1country=USnetwork={    ssid="YOUR-SSID"    psk="YOUR-PASSWORD"    scan_ssid=1} Safely unmount the SD after your changes. $ cd ~$ diskutil unmountDisk /dev/disk2 Connecting to and configuring your Raspberry Pi Next, insert the SD into your Pi Zero and boot the device. Give that a minute or so to complete then try pinging the device to locate it. $ ping raspberrypi.local Or locate the device using your network router or a Wifi scanner such as Who’s on My Wifi You can ssh into the device using: $ ssh pi@raspberrypi.localor$ ssh pi@10.10.0.107 The default password is . raspberry If you encounter the following error: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: POSSIBLE DNS SPOOFING DETECTED! @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ then simply edit your file and remove the line that has the entry. .ssh/known_hosts raspberrypi $ vi /Users/${USER}/.ssh/known_hosts So moving right along, once you sign in, the first order of business is to change the password! $ passwd The username will still remain but you'll be able to sign in using your new password. pi You can optionally proceed to make other tweaks using the raspi-config utility if you’d like. $ sudo raspi-config Next make sure the OS is up to date: $ sudo apt-get update A note regarding the update command above: if while installing packages you get an error such as **_E: Unable to fetch some archives, maybe run apt-get update or try with — fix-missing?_** Then rerun **_sudo apt-get update_** and retry the package update that failed. This has proven to be successful. Lastly, here take a moment to setup your timezone: $ sudo dpkg-reconfigure tzdata Adding NodeJS For the Pi ZeroW use: $ mkdir nodejs; cd nodejs$ wget $ tar -xvf node-v8.12.0-linux-armv6l.tar.xz$ cd /usr/local/bin$ sudo cp /home/pi/nodejs/node-v8.12.0-linux-armv6l/bin/node .$ sudo ln -sf /home/pi/nodejs/node-v8.12.0-linux-armv6l/bin/npx npx$ sudo ln -sf /home/pi/nodejs/node-v8.12.0-linux-armv6l/bin/npm npm$ cd ~ https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-armv6l.tar.xz If using a Raspberry Pi 3 use: $ mkdir nodejs; cd nodejs$ wget $ tar -xvf node-v10.14.0-linux-armv7l.tar.xz$ cd /usr/local/bin$ sudo cp /home/pi/nodejs/node-v10.14.0-linux-armv7l/bin/node .$ sudo ln -sf /home/pi/nodejs/node-v10.14.0-linux-armv7l/bin/npx npx$ sudo ln -sf /home/pi/nodejs/node-v10.14.0-linux-armv7l/bin/npm npm$ cd ~ https://nodejs.org/dist/v10.14.0/node-v10.14.0-linux-armv7l.tar.xz You can test the NodeJS install by: $ node --version Installing the AWS command line tool This is an optional step but is useful if you have files in an S3 bucket that you’d like to copy into the Raspberry Pi. $ sudo apt-get install awscli Next configure AWS access: $ aws configureAWS Access Key ID [None]: ************AWS Secret Access Key [None]: ***************************Default region name [None]: us-west-2Default output format [None]: json Download assets script #!/bin/bashmkdir -p $1aws s3 cp s3://bucketname/$1 ./$1 — recursive Usage: ./download.sh 303A0FA/teb002/3A0FA-2018/10/18/90918447–2fnaodyxhbr Setup as a Router steps provided by with some changes below: https://medium.com/@ivaylov/raspberry-pi-wifi-router-82921ed2ac17 Remove WPA Supplicant $ sudo apt-get purge wpasupplicant Install an DHCP server $ sudo apt-get install isc-dhcp-server Setup DHCP $ sudo vi /etc/dhcp/dhcpd.conf Add to end of file: subnet 172.16.1.0 netmask 255.255.255.0 {range 172.16.1.25 172.16.1.50;option domain-name-servers 8.8.4.4;option routers 172.16.1.1;interface wlan0;} Install the host access point daemon $ sudo apt-get install hostapd Configure hostapd Create a hostapd.conf file $ sudo vi /etc/hostapd/hostapd.conf add these lines to hostapd.conf file interface=wlan0#driver=nl80211ssid=YOUR_STATIONhw_mode=gchannel=5wpa=1wpa_passphrase=SECRETPASSWORDwpa_key_mgmt=WPA-PSKwpa_pairwise=TKIP CCMPwpa_ptk_rekey=600macaddr_acl=0 Moving right along… $ sudo ifconfig wlan0 172.16.1.1$ sudo /etc/init.d/isc-dhcp-server restart -d is for debug mode so you can see if any errors appear $ sudo hostapd -d /etc/hostapd/hostapd.conf Might need to ctrl-c after ^^^ Now lets make these changes persistent $ sudo vi /etc/network/interfaces Next, add or edit these following line auto wlan0iface wlan0 inet staticaddress 172.16.1.1netmask 255.255.255.0 Edit rc.local … $ sudo vi /etc/rc.local and add two lines before the last line exit 0 hostapd -B /etc/hostapd/hostapd.confiptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE Then uncomment the following line in /etc/sysctrl.conf $ sudo vi /etc/sysctl.conf # Uncomment the next line to enable packet forwarding for IPv4#net.ipv4.ip_forward=1 So above should read: net.ipv4.ip_forward=1 That’s it. We can now reboot the box. $ sudo reboot Testing At this stage you should be able to access the WiFi network. — Thanks for reading! If you like what you read, hold the clap button below so that others may find this. You can also follow me on Twitter .

Raspberry Pi based Wifi Routers

This article shows all the steps required to to build a skeleton app in Flutter with Firebase. Google’s Flutter SDK can be used to develop apps that give native UI experience for both Android and iOS platforms. To write apps using Flutter, you have to use Dart programming language. Firebase Realtime Database is a cloud-hosted database with data stored as JSON. It provides backend database with secure access to build rich, collaborative applications directly from the client-side. Data is persisted locally on the device while offline and realtime events continue to fire giving responsive experience to the end user. When the device regains connection to the internet, the realtime backend database is automatically synchronized with local data changes that occurred while the client was offline while auto-merging any conflicts. Create Firebase Project Create a firebase project in firebase console. https://console.firebase.google.com 2. Complete platform specific configuration iOS Register IOS app to firebase, iOS bundle Id must be same in Xcode project and on firebase console. Download configuration files for your app and add it to your project folder. Add firebase dependencies to your project Android Register you android app. Use package name in the project on firebase console. Download the config file GoogleService-Info.plist and put it in the app module root directory. Create Flutter project Use the flutter create command to create a new project. $ flutter create flutter_with_firebase 2. Open ios/Runner.xcworkspace. Keep same Bundle Identifier in xcode project as defined on the firebase console and save GoogleService-info.plist in Runner folder 3. In your IDE or editor, open the file pubspec.yaml. Add dependency for and save the file. firebase_database dependencies:
  flutter:
    sdk: flutter
  firebase_database: 1.0.3 4. In your IDE or command line with its current directory set to your Flutter app directory, run the following command. flutter packages get Setup Import dependency for firebase. import 'package:firebase_database/firebase_database.dart'; 2. Create databaseReference object to work with database. final databaseReference = FirebaseDatabase.instance.reference(); 3. Create a screen with 4 buttons. Create Record 1. On click of “Create Record” button, createRecord() method is invoked. RaisedButton(
    child: Text('Create Record'),
    onPressed: () {
      createRecord();
    },
), 2. In createRecord(), we create two demo records in database. void createRecord(){
  databaseReference.child("1").set({
    'title': 'Mastering EJB',
    'description': 'Programming Guide for J2EE'
  });
  databaseReference.child("2").set({
    'title': 'Flutter in Action',
    'description': 'Complete Programming Guide to learn Flutter'
  });
} View Records On click of “View Record” button, getData() method is invoked. RaisedButton(
child: Text('View Record'),
onPressed: () {
getData();
},
) 2. In getData(), we retrieve all records from database. void getData(){
  databaseReference.once().then((DataSnapshot snapshot) {
    print('Data : ${snapshot.value}');
  });
} 3. They are printed on console Data : [{title: Mastering EJB, description: Programming Guide for J2EE}, {title: Flutter in Action, description: Complete Programming Guide to learn Flutter}] Update Record On click of “Update Record” button, updateData() method is invoked. void updateData(){
databaseReference.child('1').update({
'description': 'J2EE complete Reference'
});
} 2. It updates description of title ‘ from ‘ ’ to ‘ Mastering EJB’ Programming Guide for J2EE J2EE complete Reference ’ Delete Record On click of “Delete Record” button, deleteData() method is invoked. void deleteData(){
databaseReference.child('1').remove();
} 2. It deletes record from the database. Complete Code import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';

class FirebaseDemoScreen extends StatelessWidget {

  final databaseReference = FirebaseDatabase.instance.reference();

  @override
  Widget build(BuildContext context) {
    getData();
    return Scaffold(
        appBar: AppBar(
            title: Text('Firebase Connect'),
            ),
        body: Center(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[

                  RaisedButton(
                      child: Text('Create Record'),
                      onPressed: () {
                        createRecord();
                      },
                  ),

                  RaisedButton(
                      child: Text('View Record'),
                      onPressed: () {
                        getData();
                      },
                  ),
                  RaisedButton(
                      child: Text('Udate Record'),
                      onPressed: () {
                        updateData();
                      },
                  ),
                  RaisedButton(
                      child: Text('Delete Record'),
                      onPressed: () {
                        deleteData();
                      },
                  ),
                ],
            )
        ), //center
    );
  }

  void createRecord(){
    databaseReference.child("1").set({
      'title': 'Mastering EJB',
      'description': 'Programming Guide for J2EE'
    });
    databaseReference.child("2").set({
      'title': 'Flutter in Action',
      'description': 'Complete Programming Guide to learn Flutter'
    });
  }
  void getData(){
    databaseReference.once().then((DataSnapshot snapshot) {
      print('Data : ${snapshot.value}');
    });
  }

  void updateData(){
    databaseReference.child('1').update({
      'description': 'J2EE complete Reference'
    });
  }

  void deleteData(){
    databaseReference.child('1').remove();
  }
} Thanks for reading. If you enjoyed this article, feel free to hit that clap button 👏 to help others find it. This article is a part of the series of articles related to mobile technology. If you are looking for a Mobile app development team to build your solution, please contact us at info@47billion.com .

How to use Firebase with Flutter

I want to build a mobile app called for exploring the city. When I walk around , I want the app to tell me what interesting buildings or monuments are nearby.London is such a historic city, I think it would be a really fun way to explore it. Ideally, I’d like to just have the app running in the background and tell me (via text to speech) when I’m near an interesting place.I’m writing this series of tutorials to show how I’m building this app and hopefully along the way, I can help you learn some React Native. I’m myself it as I build.I already know React, so the tutorials assume some basic knowledge of React.The whole app is quite complex, so I’m splitting it into many tutorials. In this first tutorial we’re just going to build a simple app which can take a set of location co-ordinates (latitude, longitude) and convert them into a human understandable address or place name. Walkwaves London learning This is what we’re going to build in this tutorial: Geocoding app in React Native Let’s go! Resources The full code is on Github — https://github.com/learnetto/walkwaves What I used to learn everything in this tutorial: The Official React Native documentation React Native Elements documentation The OpenCage API documentation Step 1: Setup First, let’s get setup. Make sure you have installed. Node The official docs say that is the easiest way to get started, so that’s what I’m going to do. Expo Install the Expo CLI command line utility: #Run this on the command line npm install -g expo-cli At the time of writing this tutorial, the latest React Native version of 0.57. Step 2: Initialise a new app Next, let’s create our new app Walkwaves (you can call yours whatever you want!): #Run this on the command line expo init Walkwaves ? (Use arrow keys) ❯ The Blank project template includes the minimum dependencies to run and an empty root component. The Tab Navigation project template includes several example screens. Choose a template: blank tabs Choose the blank template. Step 3: Start the development server Then cd into the directory and start the development server. #Run this on the command line cd Walkwavesexpo start This will output something like this on the terminal: Expo development server starting Step 4: Run the app on your phone or a simulator Using one of the methods shown above, launch the app. I’m running it on an iPhone XS by scanning the QR code with the camera app which prompts you to open it in the . This is what it looks like: Expo iPhone app This is what the code directory structure and App.js looks like: Default React Native app screen App.js If you know any React, this will look very familiar to you. We import some components from the react and react-native libraries and then define the App component. is a simple React component which renders some text on the screen, using the component (which is like a paragraph <p> in HTML) inside the component (which is like a div). App Text View Step 5: Add a form for entering co-ordinates and geocoding them We want a text field where we can type in the latitude and longitude, a button to trigger the geocoding (the technical term for conversion to an address), and a Text component to display the result. Of course, our goal is to display it all on a map, but this is just a very simplified first step towards that. We’ll need to import the and components and change the App component as follows: TextInput Button //App.js import { StyleSheet, Text, View, } from 'react-native'; TextInput, Button export default class App extends React.Component {render() {return ( );}} <View style={styles.container}><Text>Walkwaves</Text><TextInput /><Button title='Geocode' /><Text>Human understandable address</Text></View> And now the app looks like this: Unstyled screen for geocoding That doesn’t look great, does it? It can do with some styling. Step 6: Style the components We can style the default components directly but I found that it’s not straightforward. For example, I wasted a lot of time trying to add a background colour to the Button, which is not directly supported (in the current version 0.57). The library looks nice and provides easy ways to style elements, so I’m going to use that. React Native Elements Let’s add the library to our app: #Run this on the command line yarn add react-native-elements Now let’s replace the default components with components from this library and add some styles: //App.js import React from 'react';import { StyleSheet, Text, View } from 'react-native';**import { Button, FormLabel, FormInput, FormValidationMessage } from 'react-native-elements'**export default class App extends React.Component {render() {return (<View style={styles.container}> </View>);}} <Text style={styles.title}>Walkwaves</Text><FormLabel style={{padding: 20}}>Enter Co-ordinates (latitude, longitude)</FormLabel><FormInput containerStyle={styles.input} /><Button title='Geocode'buttonStyle={styles.button}color='#FFFFFF'/><Text style={styles.result}>Human understandable address</Text> const styles = StyleSheet.create({container: { alignItems: 'center',justifyContent: 'center',}, }); marginTop: 100, title: {fontSize: 30,},input: {borderColor: 'gray',borderWidth: 1,marginBottom: 20,width: '80%',},button: {backgroundColor: '#1E88E5',width: 200,},result: {padding: 10,} This looks much better: Styled screen We can tap on the input field and enter text. Let’s store the entered input value in state so that we can use it later.Let’s add a constructor to the component and initialise the state with a value for the co-ordinates: //App.js export default class App extends React.Component { constructor(props) {super(props);this.state = {coords: '',address: ''};} We also initialise a value for the result of the conversion, called address. Let’s make sure the co-ordinates in state get updated when we type in the input box by setting the prop on FormInput: onChangeText //App.js <FormInput containerStyle={styles.input}  
      **onChangeText={(coords) => this.setState({coords})} />** Let’s also replace the text “ ” to use the value of the geocoded address from state: Human understandable address //App.js <Button title='Geocode'  
      buttonStyle={styles.button}  
      color='#FFFFFF'  
    />  
    **<Text style={styles.result}>{this.state.address}</Text>** Ok, now the we have a place to store the input and output values. But when we press the button, nothing happens yet…So, now for the fun part! Step 7: Add geocoding I’m going to use the for geocoding the co-ordinates. To be more precise, it’s reverse geocoding when you go from co-ordinates to addresses, and geocoding when it’s the other way around. OpenCage Data API OpenCage provides a very easy to use API and they have a generous free plan. You can . sign up here and get your API key Let’s add the library to our app: opencage-api-client #Run this on the command line yarn add opencage-api-client NOTE : At this step, I started getting a strange error from the fetch library (which is a dependency of opencage-api-client), saying “ ”. The error goes away when I run the app in remote debug mode. requiring module fetch which threw an exception… See this discussion for some more workarounds. If you find a more elegant solution, please let me know. Now, we need to trigger the geocoding when the button is pressed. We can do that by assigning a function — let’s call it — to the onPress prop of the Button component: reverseGeocode //App.js <Button title='Geocode'  
      buttonStyle={styles.button}  
      color='#FFFFFF'  
      **onPress={this.reverseGeocode}**        /> Now, let’s import the library in App.js and define the function: //App.js import opencage from 'opencage-api-client'; export default class App extends React.Component {... reverseGeocode = () => {const key = 'YOUR_API_KEY';opencage.geocode({ key, q: this.state.coords }).then(response => {result = response.results[0];this.setState({address: result.formatted});});} Let’s try it out now: Without button loading animation It works! It can take a couple of seconds to make the API call to Opencage, get the result and then display it. It would be nice to have some visual feedback when the geocoding is going on. Step 8: Add loading animation to the Button The Button component has a handy prop called , using which we can display different text based on whether the button action is loading or not. loading Let’s first add another property to the state called geocoding, which will take a boolean value to indicate if geocoding is going on. We’re initialise it as false: //App.js constructor(props) {super(props);this.state = {coords: '31.79261,35.21785',address: '', };} geocoding: false Now let’s use it in to set it to true before the API call and it back to false once the geocoding is done: reverseGeocode //App.js reverseGeocode = () => {const key = 'YOUR_API_KEY'; opencage.geocode({ key, q: this.state.coords }).then(response =>  {result = response.results[0];console.log(result.formatted); });} this.setState({geocoding: true}); this.setState({address: result.formatted, geocoding: false}); Now let’s use it in the Button component to set the value of the loading prop and also to conditionally change the button text: //App.js <Button  
      **loading={this.state.geocoding}**          buttonStyle={{backgroundColor: "blue"}}  
      onPress={this.reverseGeocode}  
      **title={this.state.geocoding ? "Geocoding..." : "Geocode"}**          color="#ffffff"  
    /> With button loading animation Alright, so that’s part 1 all done. You can find the . full code here Remember you’ll need an to follow the tutorial. Opencage API key In Part 2, we’ll add a map view, use the GPS to get the current location and geocode it. Make sure to to get all the tutorials in this series for free. sign up on Learnetto Originally published at learnetto.com .

How to build a location based app in React Native — Part 1

PassportJS is awesome. It provides an abstraction layer over logging in with various providers such as Facebook, Google, Github, Twitter and more. When first getting started though it can be a little challenging to understand what’s going on and why. Their documentation is pretty good but leaves out some specifics that I initially found difficult to understand. Hopefully this helps answer some of your questions and clears up some confusion. I assume you’ve read the docs a little and have maybe tried implementing it. Even if you haven’t though, you should still be able to follow along. Even if you have, this should still prove useful in understanding PassportJS a little better. Here’s what’s covered The Callback Function in Strategy Setup Why is needed in the callback passport.authenticate() Checking if the User is Logged in Understanding and serializeUser() deserializeUser() Alright, lets go! Issue 1: Understanding the Callback in Strategy Setup Take a look at the code below. We require our modules, set up our google strategy and create two routes, one for handling logging in and another for the . callbackURL When a user visits , we authenticate with google and in this case, request their and information. /login/google email profile One key part though is, as part of , the function on line 9 is called before the is on line 15. passport.authenticate() console.log() This function is the first time you have access to the profile information. Typically this is where you would add the user to your DB if it doesn’t already contain it (See code example below). But how do you exit this function to get back to your code, specifically to the route handler for the specified on line 19. callbackURL To do this you call . done() What is ? An internal PassportJS function. You pass it two arguments, null and the profile info like this: done() This takes the profile info and attaches it on the request object so its available on your callback url as . This will be available for the route as defined on line 41 and this is where you would set the session for the user and then send them on their way to another part of your site. req.user /login/google/return Issue 2: Why the passport.authenticate() in the callbackURL? If a user makes it back to , why do we need another ? This is partly to make sure the user didn’t just go to the route directly and verifies that they are in fact logged in. This is handled internally by PassportJS. /login/google/return passport.authenticate() As a side note, you should not use as a method to check if a user is logged in. This should only be used to actually log a user in which is needed in this case since they might not yet be logged in if they just typed in the url and route and hit enter. passport.authenticate() Issue 3: Check if a User is Logged In On line 36 in the code block above we set to equal the profile of the person who just logged in. To check if someone is logged in we can just see if this value has been set and then use this function as middleware on any route we want where the user has to be logged in. Here is an example of the middleware function. req.session.user Then if you want to ensure a user is logged in for a route, just do this This will call . If is set then the request continues on due to the call. Otherwise the user is redirected to . isLoggedIn req.session.user next() /login Issue 4: What is this Serialization and Deserialization Business? From above we said that passport attaches the profile information to . This occurs as a direct result of the and functions. req.user serializeUser() deserializeUser() When you write in the callback function specified when setting up the strategy (look at the second code block all the way at the top where we do or ), we pass in the entire user profile object (in this example as either or as ). done() done(null, dbUserRecord done(null, newUser) dbUserRecord newUser The reason for this is because it is received by . This function then calls . Passport takes that user id and stores it internally on which is passport’s internal mechanism to keep track of things. serializeUser() done(null, user.id) req.session.passport Then in , the first argument is an which is the same that was passed in of . then makes a request to our DB to find the full profile information for the user and then calls . This is where the user profile is attached to the request handler at . Then finally after all this occurs, the user is routed back to the route handler where we can finally access the user profile information on . deserializeUser() id id done(null, user.id) serializeUser() deserializeUser() done(null, user) req.user /login/google/return req.user To understand this user flow a little better take a look at the diagram on this StackOverflow answer: . https://stackoverflow.com/questions/27637609/understanding-passport-serialize-deserialize?answertab=votes#tab-top Wrapping Up You might ask yourself now, why is all this necessary. Handling user info in this manner means PassportJS only has to store the user id and not the entire user profile. This decreases the likelihood of confusing which is something we set and which is PassportJS’s way of keeping track of what’s going on. req.session.user req.session.passport.user This can be seen by logging which will return something like this req.session Notice how is the same as . They have to be so we can perform the database lookup with the right information. Further only stores the id and nothing else like or which we see in the object. passport.user user._id passport.user name googleID user Conclusion PassportJS makes it really easy to get setup but understanding its data flow can be confusing. I hope this helps explain some of the underlying principles it uses. If you have any questions please leave them in the comments. Thanks for reading!

PassportJS — The Confusing Parts Explained

By now every developer will be able to tell you that serverless is here to stay and you would be missing out if you were not going to start getting in on this action. So to make things easier for you I’ve compiled of lists of tutorials to get you going in no time. So without further ado, here are the top 5 articles that will help you get started with serverless. 1. A crash course on Serverless with Node.js In this cleverly constructed, well written tutorial, you’ll learn just how easy it is to get setup and started with serverless and NodeJs. I would strongly recommend it to anyone just starting out with serverless. Adnan 2. Create your first serverless site in 15 minutes Not to toot my own horn(as it was written by yours truly) but this truly amazing in its simplicity, this next tutorial will show you exactly how easy it is to build a website with serverless, in fact, most of the 15 minutes mentioned in the title will be spent setting up your environment. 3. Serverless Framework example for Golang and Lambda Maciej Winnicki writes an awesome tutorial on how to get a Golang working on a serverless environment. The reason behind this tutorial was simple: Golang support for Lambda has been one of the most anticipated releases. The crowd at re:Invent was ecstatic when Werner announced Golang support was coming soon. 4. Serverless monitoring — the good, the bad and the ugly One of the first things you will discover while learning serverless is its lack of observability. You don’t have the options of checking out an error.log file on your server nor can you run “grep” in a terminal to figure out what is happening behind the scenes. Learning how serverless monitoring works is going to be important! Adnan points out how, with serverless, it all boils down to the developer mindset. It takes a while to switch from the mental image of a server to FaaS. 5. Serverless security risks, and where to find them Last but not least, the next step in your serverless journey will lead you to question the security risks involved. Since the function as a service paradigm forces you to think differently about your servers will make it hard for the newcomers to understand how to identify and remove the security flaws and risks in their app. Luckily there’s an easy to follow tutorial that will help with that. There you have it, folks, five easy to follow articles that will get you started with serverless in no time. I’d advise you take the time to go over each one of the articles mentioned here and if you got the time jump over to article we published a while back and dive even deeper into serverless. The complete serverless resources _Serverless computing is a cloud computing execution model in which the cloud provider dynamically manages the…_hackernoon.com Going Serverless is Hip - Hacker Noon

Best tutorials to get started with Serverless

Freemium vs Free Trial vs Hybrid Customer Acquisition Models in SaaS:

Originally published at www.cloudways.com on December 6, 2016. Not many people realize that their choice of hosting solution could determine the success or failure of their project. Even the best code base fails to perform to its maximum potential because of a hosting solution that fails to provide appropriate support. Hosting a website or a web application in the cloud could be a technically challenging endeavour. The server size needs to be determined, server has to be setup and then the appropriate application/platform is installed. Not many people, even in the ICT industry, are able to set up and manage servers. Since a number of entrepreneurs and online business owners do not possess the required technical skills to manage the servers that host their applications and/or store, they either need to hire system administrators (not a cost effective choice for startups) or deal with regular server and application crashes. Given this, it is no wonder that managed cloud hosting is a rapidly growing sector of the overall hosting industry. More and more people now opt for managed cloud hosting for their projects because of the many benefits of the hosting solution. Why Industry Leaders Recommend Managed Cloud Hosting? In order to understand why many industry leaders recommend managed cloud hosting for PHP projects, it is important to understand the benefits of these hosting solutions. In effect, managed cloud hosting offers three important benefits. The first and the most important benefit is the fact that these solution providers handle all the hassles of server management. All the user has to do is to decide the basic parameters including RAM, bandwidth and server location. The hosting solution provider takes care of everything else. The second benefit is the improved security of the web application. Server and application level security is an ongoing task and i particularly important for PHP applications. Even the most dedicated of the user could not keep up with the routine of applying security patches. The managed hosting solution provider takes care of all security related issues from patch application to threat detection and management. Finally, managed cloud hosting providers offer scalable solutions that are ideal for ecommerce websites. Scalability is an important business process requirement that comes in handy during crunch times. At these moments, having the capacity (and capability) of increasing server resources prevents the web store from crashing. Let’s see what industry leaders have to say about the uses and benefits of managed cloud hosting: Anna Filina | Twitter LinkedIn It makes a lot of sense to offer managed hosting solutions, since not every developer even knows how to manage servers. It took me many years to learn how to do it, then many more years to learn how to do it properly. Even for those who can do it, it can be too much of a hassle. Time is precious. Nicolas Grekas | Twitter LinkedIn Managed hosting solutions provide great value. They allow devs to focus on their core issue: solving business problems. I can’t wait until infrastructure as a code is really ready for the masses. Adam Wathan | Twitter LinkedIn I haven’t used Cloudways myself, but I’m a huge fan of any product that tries to help developers focus on launching their next idea instead of wasting time on server configuration. Benjamin Eberlei | Twitter LinkedIn Managed Hosting or Platform as a Service is very valuable to get projects started, when you don’t have enough time or experience with the operations part of web development. The requirements for a good platform has changed drastically in the last 15 years with the arrival of AWS (IaaS), Heroku (PaaS) or Docker (FaaS). I think the separation of companies providing hosting resources and management and software platforms on top is a very welcome occurrence because it introduces much needed specialization. AWS and Digital Ocean provide very powerful hosting platforms but will never perfectly support PHP stack in every detail. Thus, managed hosting companies like Cloudways that build on top of the modern clouds functionality are very useful. Josh Lockhart | Twitter I believe hosted solutions like Cloudways, Heroku, or Platform.sh are *amazing* tools to quickly stage and launch PHP applications without having to worry about infrastructure. I strongly encourage exploring these hosted platforms because they abstract away most infrastructure concerns. Sometimes you just want to write and deploy code without worrying about how to setup, provision, and monitor servers. If the price is right, use a hosted platform. Managing and monitoring servers isn’t fun. Let others do that for you. Tessa Mero | Twitter LinkedIn With 1 click installations, make sure you always offer the latest version of Joomla. When I see a hosting platform offer an outdated version of Joomla, instantly I’ll never ever recommend anyone to use them for life. Also, the default PHP version is pretty important too. Too many hosts fail at providing this. Lorna Mitchell | Twitter LinkedIn For the 99% of people, I really think that if you’re not using a Platform as a Service (PAAS), you’re wasting your time. Yes, you often need to learn a few things to get setup, but from personal experience, this is a *massive* investment for the future. I might spend 8 hours today setting up some complex things in a PAAS, and enjoy one-click (one second) deploys for the next 12+ months. That’s a huge time and money saver. If I never have to manually spin up a server on Amazon, I’ll be happy. I’ve never tried Cloudways specifically, but the space is still wide open. One of the biggest opportunities as a consumer of PAAS is the ability to have a micro-service architecture. If my app is 6 mini-apps, it’s almost a non-starter to try to do this with traditional hosting. But if a ‘git push’ deploys them all and they’re able to talk with each other, now we’re in business. Yitzchok Willroth (@coderrabbi) has a great presentation on micro-service architecture, and automatic deploying is one of his key points. Matt Stauffer | Twitter LinkedIn I love the idea of managed hosting solutions in general. I have managed my own servers in the past, and it’s one of those things I put in the stack of “better to pay people other to do for me.” I’m glad I have an accountant I can pay to know about taxes for me. Glad I have a lawyer. Glad I have a plumber. And I’m glad I have folks who run SaaSes that make my development life easier–including hosting and dev-ops. Manuel Lemos | Twitter LinkedIn Managed hosting can be wonderful when you need to scale your applications when they do not fit a single server. There is plenty of knowledge out there on the Web you can use to learn how to assemble all the required parts to implement a scalable solution but having it done by somebody that is in the field for many years is often worth the investment of outsourcing that effort. Gabriela Davila | Twitter LinkedIn I am always interested to see how companies manage to enable developers to learn and explore the new options and technologies available in the market. I think you do a great job with one-click install apps, because everything is contained inside the same server and easily manageable. When you talk directly about database hosting, it implies having the application in the same network too because of latency and such. One idea I would be interested in seeing in action would be getting a big client with high traffic and database needs and remove the DB from that one-click install and seeing how that goes. There is a lot going into tuning, specially for Magento, I think you could do good things with that experience. As you can see, PHP experts and Industry leaders strongly favor managed hosting. If you wish to try out managed hosting for your existing or upcoming projects, I recommend Cloudways, which comes with a trial period.

Why PHP Influencers Endorse Managed Cloud Hosting

Running a business is like have a separate love life. You will go on thousands of dates and you will probably kiss a lot of ugly frogs — just to find a solid team. And most of you probably recognize that feeling when you need to tell that frog that your feelings isn’t mutual? That feeling have made it’s presence a lot lately. I’ve been speaking to a few fresh on the market companies for advice and idea bouncing — and it’s been hard to find the right words to tell them what I truly feel. That I don’t agree with their ideas. Here’s the thing: They all want to jump in bed before preparing the basics. And in this specific case the area of focus is . marketing I think we all can agree to this: Growing a company and finding new users without spending a fortune with huge risk is extremely hard. Many entrepreneurs are triggered by solving a difficult task or problem, but I’ve seen a dangerous pattern the last few years: the lack of groundwork and preparation. Preparation is not necessarily the difficult part but for most entrepreneurial personalities it’s incredibly boring. I think that’s the reason why preparations often never get done. Or gets done poorly. marketing I don’t think he prepared a hole lot…. Therefore, I’ve created a very short, but hopefully useful, marketing checklist to follow when launching your product or service. My own thoughts, of course. Onboarding One person signing in or downloading your app but never starting to use your product/service is probably far from what you hope to get out of the marketing money spent. Before you have a functioning onboarding system in place that will make sure you engage as much as possible of your first point users you will be throwing a lot of great potential clients overboard. Make sure users are engaged within the first 5 days and plan a drip-campaign (a set number of emails/push/messages to go out automatically based on timelines or user actions. Simply put, drip campaigns is set to give your user the right information and reminders at the right time) to make that happen. Work with the communication tools you have to understand when and what message goes best in what channel. Retention Getting one user to log in only one time is a lot of money spent for nothing. We live in a busy world and users will need, and count on you reminding them of your service or product. Again, don’t be afraid of using several touch-points (whatever you have is fair game; email, push messages, in-app messages) and work on sending through valuable communication. Reward users coming back to you and help the ones having a slow start to find additional value in your service or product. Growth If you don’t accelerate your user-base from the paid acquisition to a viral growth mechanism you will be stuck in a payment scheme and your growth will be slow. At all times I, as your loyal user, should be able to spread your brand and value to my network. The network effect is very much personal these days so building features for social media blasting is nothing I’d recommend. Focus on building your brand through person-2-person, a simple, and well tried out growth hack is to create a give-2-get program in place. Give-2-get simple guideline: Find out what you are able to pay to get a new client, then give this amount to your loyal user and his/her friend to try your service. It’s a fantastic set-up in every way: your users will feel privileged as they are able to give their friends discounted rates on a service they like, you will grow satisfaction rates as your loyal user is rewarded when sharing the service amongst his/her network and data proves that users coming in to a service through a personal recommendation carries a higher . Best part? Using the given amount to both parts as credits to your product is proven to work really well which allows you to keep your marketing money in your service and will help increase retention. A good referral program will have ongoing copy work, tailored emails and about 80 touch points throughout the service. Never miss an opportunity to remind your users about your generous give-2-get setup! Make sure you help your users that are sending invites by tailoring them as personal as possible (great tips and trix is to use their profile picture in the invites and work on personal copy). LTV Paid user acquisition Guess what? You’re ready to start working on attracting more users into your platform without throwing important leads in the trash. And please keep in mind: Always read your data and always iterate your copy, touch points and offers. A good onboarding, retention and growth program is never complete and perfect, but rather an ongoing integral part of your work. Due to the nature of a program like this, make sure you have one person in charge of reading data and iterating copy and content to maximize impact. Measure the results from your different touch-points and find the secret ingredient for your growth salsa. I also strongly recommend the co-founder or/and CEO to stay on top of this. Following these steps, finding a unique tone of voice and understanding what triggers users for a faster onboarding, higher retention and LTV is essential in building a successful , not to mention the core in any successful marketing strategy. business Feel free to ping me for any follow-up questions, I know it’s a big topic in a short article. Now — let’s onboard and beyond!

Don’t waste your marketing money!

Apache NiFi is a powerful tool for automating data flows with a large number of built-in processors. However, sometimes there is a need for specific processors to handle unique requirements and data stores. In such cases, creating custom processors becomes a necessity. In this article, we will go through the steps to create a very simple custom processor for Apache NiFi. Setup and sources gradle setup dependencies {
	compile "org.apache.nifi:nifi-api:*"
	compile "org.apache.nifi:nifi-utils:1.9.2"
	testCompile "org.apache.nifi:nifi-mock:1.9.2"
} source of the custom processor import org.apache.nifi.annotation.behavior.ReadsAttribute;
import org.apache.nifi.annotation.behavior.ReadsAttributes;
import org.apache.nifi.annotation.behavior.WritesAttribute;
import org.apache.nifi.annotation.behavior.WritesAttributes;
import org.apache.nifi.annotation.documentation.CapabilityDescription;
import org.apache.nifi.annotation.documentation.SeeAlso;
import org.apache.nifi.annotation.documentation.Tags;
import org.apache.nifi.annotation.lifecycle.OnScheduled;
import org.apache.nifi.components.PropertyDescriptor;
import org.apache.nifi.expression.ExpressionLanguageScope;
import org.apache.nifi.flowfile.FlowFile;
import org.apache.nifi.processor.*;
import org.apache.nifi.processor.exception.ProcessException;
import org.apache.nifi.processor.util.StandardValidators;

import java.io.OutputStream;
import java.nio.charset.StandardCharsets;
import java.util.*;

@Tags({"example"})
@CapabilityDescription("Hello World to output")
@SeeAlso({})
@ReadsAttributes({@ReadsAttribute(attribute = "", description = "")})
@WritesAttributes({@WritesAttribute(attribute = "", description = "")})
public class MyProcessor extends AbstractProcessor {

    public static final PropertyDescriptor propertyDescriptor = new PropertyDescriptor
            .Builder().name("name")
            .displayName("name")
            .description("Name to print")
            .required(true)
            .addValidator(StandardValidators.NON_EMPTY_VALIDATOR)
            .expressionLanguageSupported(ExpressionLanguageScope.FLOWFILE_ATTRIBUTES)
            .build();

    public static final Relationship successRelations = new Relationship.Builder()
            .name("success")
            .description("If everything is ok")
            .build();

    public static final Relationship failureRelations = new Relationship.Builder()
            .name("failure")
            .description("If something is wrong")
            .build();

    private List<PropertyDescriptor> descriptorList;

    private Set<Relationship> relationshipSet;

    @Override
    protected void init(final ProcessorInitializationContext context) {
        final List<PropertyDescriptor> descriptors = new ArrayList<PropertyDescriptor>();
        descriptors.add(propertyDescriptor);
        this.descriptorList = Collections.unmodifiableList(descriptors);

        final Set<Relationship> relationships = new HashSet<Relationship>();
        relationships.add(successRelations);
        relationships.add(failureRelations);
        this.relationshipSet = Collections.unmodifiableSet(relationships);
    }

    public Set<Relationship> getRelationshipSet() {
        return this.relationshipSet;
    }

    @Override
    public final List<PropertyDescriptor> getSupportedPropertyDescriptors() {
        return descriptorList;
    }

    @OnScheduled
    public void onScheduled(final ProcessContext context) {

    }

    @Override
    public void onTrigger(final ProcessContext context, final ProcessSession session) throws ProcessException {
        FlowFile flowFile = session.get();
        if (flowFile == null) {
            return;
        }

        try {
            String name = context.getProperty(propertyDescriptor).evaluateAttributeExpressions(flowFile).getValue();

            String result = "Hello " + name;
            session.putAttribute(flowFile, "result", result);

            try (OutputStream flowFileOutputStream = session.write(flowFile)) {
                flowFileOutputStream.write(result.getBytes(StandardCharsets.UTF_8));
            }

            session.transfer(flowFile, successRelations);
        } catch (IOException e) {
		        //IO Error processing error log
		        session.transfer(flowFile, failureRelations);
		    } catch (ProcessException e) {
				    // Process error log
		        getLogger().error("Processing error", e);
		        session.transfer(flowFile, failureRelations);
		    }
    }
} Build and deploy Build the project with Gradle: gradle build.
Find the generated .nar file in the target folder of your module.
Copy the .nar file to the lib folder of your NiFi installation. Screenshot of how the custom processor integrates seamlessly I hope this article was useful for you! Creating a custom processor for Apache NiFi allows you to customize it to meet the specific requirements of your project. By following the steps above, you will be able to develop and integrate a custom processor that will enhance the processing capabilities of your system. Apache NiFi is a powerful tool for automating data flows with a large number of built-in processors. However, sometimes there is a need for specific processors to handle unique requirements and data stores. In such cases, creating custom processors becomes a necessity. In this article, we will go through the steps to create a very simple custom processor for Apache NiFi. Setup and sources gradle setup gradle setup dependencies {
	compile "org.apache.nifi:nifi-api:*"
	compile "org.apache.nifi:nifi-utils:1.9.2"
	testCompile "org.apache.nifi:nifi-mock:1.9.2"
} dependencies {
	compile "org.apache.nifi:nifi-api:*"
	compile "org.apache.nifi:nifi-utils:1.9.2"
	testCompile "org.apache.nifi:nifi-mock:1.9.2"
} source of the custom processor source of the custom processor import org.apache.nifi.annotation.behavior.ReadsAttribute;
import org.apache.nifi.annotation.behavior.ReadsAttributes;
import org.apache.nifi.annotation.behavior.WritesAttribute;
import org.apache.nifi.annotation.behavior.WritesAttributes;
import org.apache.nifi.annotation.documentation.CapabilityDescription;
import org.apache.nifi.annotation.documentation.SeeAlso;
import org.apache.nifi.annotation.documentation.Tags;
import org.apache.nifi.annotation.lifecycle.OnScheduled;
import org.apache.nifi.components.PropertyDescriptor;
import org.apache.nifi.expression.ExpressionLanguageScope;
import org.apache.nifi.flowfile.FlowFile;
import org.apache.nifi.processor.*;
import org.apache.nifi.processor.exception.ProcessException;
import org.apache.nifi.processor.util.StandardValidators;

import java.io.OutputStream;
import java.nio.charset.StandardCharsets;
import java.util.*;

@Tags({"example"})
@CapabilityDescription("Hello World to output")
@SeeAlso({})
@ReadsAttributes({@ReadsAttribute(attribute = "", description = "")})
@WritesAttributes({@WritesAttribute(attribute = "", description = "")})
public class MyProcessor extends AbstractProcessor {

    public static final PropertyDescriptor propertyDescriptor = new PropertyDescriptor
            .Builder().name("name")
            .displayName("name")
            .description("Name to print")
            .required(true)
            .addValidator(StandardValidators.NON_EMPTY_VALIDATOR)
            .expressionLanguageSupported(ExpressionLanguageScope.FLOWFILE_ATTRIBUTES)
            .build();

    public static final Relationship successRelations = new Relationship.Builder()
            .name("success")
            .description("If everything is ok")
            .build();

    public static final Relationship failureRelations = new Relationship.Builder()
            .name("failure")
            .description("If something is wrong")
            .build();

    private List<PropertyDescriptor> descriptorList;

    private Set<Relationship> relationshipSet;

    @Override
    protected void init(final ProcessorInitializationContext context) {
        final List<PropertyDescriptor> descriptors = new ArrayList<PropertyDescriptor>();
        descriptors.add(propertyDescriptor);
        this.descriptorList = Collections.unmodifiableList(descriptors);

        final Set<Relationship> relationships = new HashSet<Relationship>();
        relationships.add(successRelations);
        relationships.add(failureRelations);
        this.relationshipSet = Collections.unmodifiableSet(relationships);
    }

    public Set<Relationship> getRelationshipSet() {
        return this.relationshipSet;
    }

    @Override
    public final List<PropertyDescriptor> getSupportedPropertyDescriptors() {
        return descriptorList;
    }

    @OnScheduled
    public void onScheduled(final ProcessContext context) {

    }

    @Override
    public void onTrigger(final ProcessContext context, final ProcessSession session) throws ProcessException {
        FlowFile flowFile = session.get();
        if (flowFile == null) {
            return;
        }

        try {
            String name = context.getProperty(propertyDescriptor).evaluateAttributeExpressions(flowFile).getValue();

            String result = "Hello " + name;
            session.putAttribute(flowFile, "result", result);

            try (OutputStream flowFileOutputStream = session.write(flowFile)) {
                flowFileOutputStream.write(result.getBytes(StandardCharsets.UTF_8));
            }

            session.transfer(flowFile, successRelations);
        } catch (IOException e) {
		        //IO Error processing error log
		        session.transfer(flowFile, failureRelations);
		    } catch (ProcessException e) {
				    // Process error log
		        getLogger().error("Processing error", e);
		        session.transfer(flowFile, failureRelations);
		    }
    }
} import org.apache.nifi.annotation.behavior.ReadsAttribute;
import org.apache.nifi.annotation.behavior.ReadsAttributes;
import org.apache.nifi.annotation.behavior.WritesAttribute;
import org.apache.nifi.annotation.behavior.WritesAttributes;
import org.apache.nifi.annotation.documentation.CapabilityDescription;
import org.apache.nifi.annotation.documentation.SeeAlso;
import org.apache.nifi.annotation.documentation.Tags;
import org.apache.nifi.annotation.lifecycle.OnScheduled;
import org.apache.nifi.components.PropertyDescriptor;
import org.apache.nifi.expression.ExpressionLanguageScope;
import org.apache.nifi.flowfile.FlowFile;
import org.apache.nifi.processor.*;
import org.apache.nifi.processor.exception.ProcessException;
import org.apache.nifi.processor.util.StandardValidators;

import java.io.OutputStream;
import java.nio.charset.StandardCharsets;
import java.util.*;

@Tags({"example"})
@CapabilityDescription("Hello World to output")
@SeeAlso({})
@ReadsAttributes({@ReadsAttribute(attribute = "", description = "")})
@WritesAttributes({@WritesAttribute(attribute = "", description = "")})
public class MyProcessor extends AbstractProcessor {

    public static final PropertyDescriptor propertyDescriptor = new PropertyDescriptor
            .Builder().name("name")
            .displayName("name")
            .description("Name to print")
            .required(true)
            .addValidator(StandardValidators.NON_EMPTY_VALIDATOR)
            .expressionLanguageSupported(ExpressionLanguageScope.FLOWFILE_ATTRIBUTES)
            .build();

    public static final Relationship successRelations = new Relationship.Builder()
            .name("success")
            .description("If everything is ok")
            .build();

    public static final Relationship failureRelations = new Relationship.Builder()
            .name("failure")
            .description("If something is wrong")
            .build();

    private List<PropertyDescriptor> descriptorList;

    private Set<Relationship> relationshipSet;

    @Override
    protected void init(final ProcessorInitializationContext context) {
        final List<PropertyDescriptor> descriptors = new ArrayList<PropertyDescriptor>();
        descriptors.add(propertyDescriptor);
        this.descriptorList = Collections.unmodifiableList(descriptors);

        final Set<Relationship> relationships = new HashSet<Relationship>();
        relationships.add(successRelations);
        relationships.add(failureRelations);
        this.relationshipSet = Collections.unmodifiableSet(relationships);
    }

    public Set<Relationship> getRelationshipSet() {
        return this.relationshipSet;
    }

    @Override
    public final List<PropertyDescriptor> getSupportedPropertyDescriptors() {
        return descriptorList;
    }

    @OnScheduled
    public void onScheduled(final ProcessContext context) {

    }

    @Override
    public void onTrigger(final ProcessContext context, final ProcessSession session) throws ProcessException {
        FlowFile flowFile = session.get();
        if (flowFile == null) {
            return;
        }

        try {
            String name = context.getProperty(propertyDescriptor).evaluateAttributeExpressions(flowFile).getValue();

            String result = "Hello " + name;
            session.putAttribute(flowFile, "result", result);

            try (OutputStream flowFileOutputStream = session.write(flowFile)) {
                flowFileOutputStream.write(result.getBytes(StandardCharsets.UTF_8));
            }

            session.transfer(flowFile, successRelations);
        } catch (IOException e) {
		        //IO Error processing error log
		        session.transfer(flowFile, failureRelations);
		    } catch (ProcessException e) {
				    // Process error log
		        getLogger().error("Processing error", e);
		        session.transfer(flowFile, failureRelations);
		    }
    }
} Build and deploy Build and deploy Build the project with Gradle: gradle build. Find the generated .nar file in the target folder of your module. Copy the .nar file to the lib folder of your NiFi installation. Build the project with Gradle: gradle build . gradle build Find the generated .nar file in the target folder of your module. .nar Copy the .nar file to the lib folder of your NiFi installation. .nar lib Screenshot of how the custom processor integrates seamlessly Screenshot of how the custom processor integrates seamlessly I hope this article was useful for you! Creating a custom processor for Apache NiFi allows you to customize it to meet the specific requirements of your project. By following the steps above, you will be able to develop and integrate a custom processor that will enhance the processing capabilities of your system.

Building a Simple Custom Processor With Apache Ni-Fi

In this article, we will look at the main aspects of structure-oriented programming: how to write code according to the SOLID principles without using protocols and without losing abstraction. The Structure Oriented Programming paradigm is based on the fact that a structure can replace any protocol. The advantage of this approach is performance. Since the structure-oriented approach is based on structures that use static dispatch, the dispatch speed will significantly differ from protocols with dynamic dispatch in the protocol-oriented approach. 1. Replacing a protocol with an equivalent structure Let’s start by trying to replace the protocol with an equivalent structure. In the protocol-oriented approach, the protocol itself allows abstraction from the implementation. In the structure-oriented approach, generics and closures help to provide abstraction. Consider, as an example, the composition of a protocol and a class, in which the protocol provides the square of a number for any object that will conform to this protocol: // Abstraction
protocol RegularProtocol {
    var sqrValue: Int { get }
}

// Object
class RegularClass {
    
    let value: Int
    
    init(value: Int) {
        self.value = value
    }
}

// Realization
extension RegularClass: RegularProtocol {
    var sqrValue: Int {
        value * value
    }
}

let onbject = RegularClass(value: 25)
print(onbject.sqrValue) Thus, the extension to the protocol adopt RegularProtocol. For a structure-oriented approach, the above would look like this: // Abstraction
struct RegularStruct<AdoptedObject> {
    var sqrValue: (AdoptedObject) -> Int
    
    init(sqrValue: @escaping (AdoptedObject) -> Int) {
        self.sqrValue = sqrValue
    }
}

// Object
class RegularClass {
    
    let value: Int
    
    init(value: Int) {
        self.value = value
    }
}

// Realization
extension RegularStruct where AdoptedObject == RegularClass {
    init() {
        sqrValue = { object in object.value * object.value }
    }
}

let onbject = RegularStruct<RegularClass>()
print(onbject.sqrValue(.init(value: 25))) 2. Covering all kinds of cases To understand how to use the structure-oriented approach in practice, let’s consider the most likely cases of using the protocol: Computed property


Property with getter and setter


Static property


Regular method


Static function


Function with an associated value


Parent protocol function when inheriting protocols For the protocol-oriented approach all these cases are presented below: protocol ProtocolExample: ParentProtocolExpample {
    // 1
    var getVariable: Int { get }
    
    // 2
    var getSetVariable: Int { get set }
    
    // 3
    static var staticVariable: Int { get }
    
    // 4
    func regularFunction(value: Int) -> Bool
    
    // 5
    static func staticFunction(value: Int) -> Bool
    
    // 6
    associatedtype Value
    func assosiatedFunction(value: Value) -> Bool
}

protocol ParentProtocolExample {
    // 7
    func inheritedFunction() -> String
} An equivalent composition for a structure-oriented approach looks like this: struct StructExample<AdoptedObject, Value> {
    // 1
    var getVariable: (_ object: AdoptedObject) -> Int
    
    // 2
    var setVariable: (_ object: AdoptedObject, Int) -> Void
    
    // 3
    var staticVariable: () -> Int
    
    // 4
    var regularFunction: (_ object: AdoptedObject, _ value: Int) -> Bool
    
    // 5
    var staticFunction: (_ value: Int) -> Bool
    
    // 6
    var assosiatedFunction: (_ object: AdoptedObject, _ value: Value) -> Bool
    
    // 7
    var parentStruct: ParentStructExample<AdoptedObject>
    var inheritedFunction: () -> String
}

struct ParentStructExample<AdoptedObject> {
    var inheritedFunction: () -> String
} 3. Performance benefits The effect of the implementation was tested with XCTest and the Optimization Level flags — Fastest, Smallest [-Os] and showed that dispatching is 3–4 times faster for the structure-oriented approach. The Protocol-oriented approach: The Structure-oriented approach: Don’t hesitate to contact me on Twitter if you have any questions. Also, you can always buy me a coffee. In this article, we will look at the main aspects of structure-oriented programming : how to write code according to the SOLID principles without using protocols and without losing abstraction. programming The Structure Oriented Programming paradigm is based on the fact that a structure can replace any protocol. The advantage of this approach is performance. Since the structure-oriented approach is based on structures that use static dispatch, the dispatch speed will significantly differ from protocols with dynamic dispatch in the protocol-oriented approach. 1. Replacing a protocol with an equivalent structure Let’s start by trying to replace the protocol with an equivalent structure. In the protocol-oriented approach, the protocol itself allows abstraction from the implementation. In the structure-oriented approach, generics and closures help to provide abstraction. Consider, as an example, the composition of a protocol and a class, in which the protocol provides the square of a number for any object that will conform to this protocol: // Abstraction
protocol RegularProtocol {
    var sqrValue: Int { get }
}

// Object
class RegularClass {
    
    let value: Int
    
    init(value: Int) {
        self.value = value
    }
}

// Realization
extension RegularClass: RegularProtocol {
    var sqrValue: Int {
        value * value
    }
}

let onbject = RegularClass(value: 25)
print(onbject.sqrValue) // Abstraction
protocol RegularProtocol {
    var sqrValue: Int { get }
}

// Object
class RegularClass {
    
    let value: Int
    
    init(value: Int) {
        self.value = value
    }
}

// Realization
extension RegularClass: RegularProtocol {
    var sqrValue: Int {
        value * value
    }
}

let onbject = RegularClass(value: 25)
print(onbject.sqrValue) Thus, the extension to the protocol adopt RegularProtocol . RegularProtocol For a structure-oriented approach, the above would look like this: // Abstraction
struct RegularStruct<AdoptedObject> {
    var sqrValue: (AdoptedObject) -> Int
    
    init(sqrValue: @escaping (AdoptedObject) -> Int) {
        self.sqrValue = sqrValue
    }
}

// Object
class RegularClass {
    
    let value: Int
    
    init(value: Int) {
        self.value = value
    }
}

// Realization
extension RegularStruct where AdoptedObject == RegularClass {
    init() {
        sqrValue = { object in object.value * object.value }
    }
}

let onbject = RegularStruct<RegularClass>()
print(onbject.sqrValue(.init(value: 25))) // Abstraction
struct RegularStruct<AdoptedObject> {
    var sqrValue: (AdoptedObject) -> Int
    
    init(sqrValue: @escaping (AdoptedObject) -> Int) {
        self.sqrValue = sqrValue
    }
}

// Object
class RegularClass {
    
    let value: Int
    
    init(value: Int) {
        self.value = value
    }
}

// Realization
extension RegularStruct where AdoptedObject == RegularClass {
    init() {
        sqrValue = { object in object.value * object.value }
    }
}

let onbject = RegularStruct<RegularClass>()
print(onbject.sqrValue(.init(value: 25))) 2. Covering all kinds of cases 2. Covering all kinds of cases To understand how to use the structure-oriented approach in practice, let’s consider the most likely cases of using the protocol: Computed property Property with getter and setter Static property Regular method Static function Function with an associated value Parent protocol function when inheriting protocols Computed property Computed property Property with getter and setter Property with getter and setter Static property Static property Regular method Regular method Static function Static function Function with an associated value Function with an associated value Parent protocol function when inheriting protocols Parent protocol function when inheriting protocols For the protocol-oriented approach all these cases are presented below: protocol ProtocolExample: ParentProtocolExpample {
    // 1
    var getVariable: Int { get }
    
    // 2
    var getSetVariable: Int { get set }
    
    // 3
    static var staticVariable: Int { get }
    
    // 4
    func regularFunction(value: Int) -> Bool
    
    // 5
    static func staticFunction(value: Int) -> Bool
    
    // 6
    associatedtype Value
    func assosiatedFunction(value: Value) -> Bool
}

protocol ParentProtocolExample {
    // 7
    func inheritedFunction() -> String
} protocol ProtocolExample: ParentProtocolExpample {
    // 1
    var getVariable: Int { get }
    
    // 2
    var getSetVariable: Int { get set }
    
    // 3
    static var staticVariable: Int { get }
    
    // 4
    func regularFunction(value: Int) -> Bool
    
    // 5
    static func staticFunction(value: Int) -> Bool
    
    // 6
    associatedtype Value
    func assosiatedFunction(value: Value) -> Bool
}

protocol ParentProtocolExample {
    // 7
    func inheritedFunction() -> String
} An equivalent composition for a structure-oriented approach looks like this: struct StructExample<AdoptedObject, Value> {
    // 1
    var getVariable: (_ object: AdoptedObject) -> Int
    
    // 2
    var setVariable: (_ object: AdoptedObject, Int) -> Void
    
    // 3
    var staticVariable: () -> Int
    
    // 4
    var regularFunction: (_ object: AdoptedObject, _ value: Int) -> Bool
    
    // 5
    var staticFunction: (_ value: Int) -> Bool
    
    // 6
    var assosiatedFunction: (_ object: AdoptedObject, _ value: Value) -> Bool
    
    // 7
    var parentStruct: ParentStructExample<AdoptedObject>
    var inheritedFunction: () -> String
}

struct ParentStructExample<AdoptedObject> {
    var inheritedFunction: () -> String
} struct StructExample<AdoptedObject, Value> {
    // 1
    var getVariable: (_ object: AdoptedObject) -> Int
    
    // 2
    var setVariable: (_ object: AdoptedObject, Int) -> Void
    
    // 3
    var staticVariable: () -> Int
    
    // 4
    var regularFunction: (_ object: AdoptedObject, _ value: Int) -> Bool
    
    // 5
    var staticFunction: (_ value: Int) -> Bool
    
    // 6
    var assosiatedFunction: (_ object: AdoptedObject, _ value: Value) -> Bool
    
    // 7
    var parentStruct: ParentStructExample<AdoptedObject>
    var inheritedFunction: () -> String
}

struct ParentStructExample<AdoptedObject> {
    var inheritedFunction: () -> String
} 3. Performance benefits The effect of the implementation was tested with XCTest and the Optimization Level flags — Fastest, Smallest [-Os] and showed that dispatching is 3–4 times faster for the structure-oriented approach. The Protocol-oriented approach: The Structure-oriented approach: Don’t hesitate to contact me on Twitter if you have any questions. Also, you can always buy me a coffee. Don’t hesitate to contact me on Twitter if you have any questions. Also, you can always buy me a coffee . Twitter Twitter buy me a coffee buy me a coffee

Optimizing Swift Code: Structure-Oriented Programming or Protocol-Oriented Programming?

The facade is one of my favorites. Out of , I have found that it’s the one I turn to repeatedly across different applications. In this article, I’ll be exploring the facade design pattern in C# — because all of the code examples will be in C#! We’ll be looking at 4 different examples of the facade pattern in C# and how each of them is used to simplify things for the caller of our API. design pattern all of the design patterns that are out there What is the Facade Design Pattern? The Facade pattern is a software design pattern that falls under the category of structural design patterns. It provides a simplified interface for a complex subsystem, making it easier to use and understand. The main purpose of the Facade pattern is to hide the complexities of the subsystem and provide a unified interface to the clients, shielding them from the details of how the subsystem works. The Facade pattern is particularly useful when working with large and complex systems, where there are multiple classes and interactions involved. By using the Facade , you can encapsulate the underlying complexities into a single high-level interface, making it easier to interact with the system. design pattern The key characteristics of the Facade pattern include: : The Facade class encapsulates the interactions and complexities of the underlying subsystem, providing a simplified interface for clients to interact with. Encapsulation : The Facade design pattern simplifies the overall usage of the system by providing a concise and easy-to-understand interface, reducing the cognitive load for developers. Simplification : The Facade class abstracts the complexities of the subsystem, allowing clients to interact with the system without needing to know the internal details. Abstraction By utilizing the Facade pattern, you can create a well-defined boundary between the client code and the complex subsystem, leading to improved maintainability, flexibility, and reusability of the codebase. A Generic Example of the Facade Design Pattern in C#: Here is an example of how the Facade pattern can be implemented in C#: // Complex subsystem classes
class SubsystemA
{
    public void MethodA()
    {
        Console.WriteLine("Subsystem A - Method A");
    }
}

class SubsystemB
{
    public void MethodB()
    {
        Console.WriteLine("Subsystem B - Method B");
    }
}

class SubsystemC
{
    public void MethodC()
    {
        Console.WriteLine("Subsystem C - Method C");
    }
}

// Facade class
class Facade
{
    private SubsystemA subsystemA;
    private SubsystemB subsystemB;
    private SubsystemC subsystemC;

    public Facade()
    {
        subsystemA = new SubsystemA();
        subsystemB = new SubsystemB();
        subsystemC = new SubsystemC();
    }

    public void Operation()
    {
        Console.WriteLine("Facade - Operation");
        subsystemA.MethodA();
        subsystemB.MethodB();
        subsystemC.MethodC();
    }
}

// Client code
class Client
{
    static void Main(string[] args)
    {
        Facade facade = new Facade();
        facade.Operation();
    }
} In this code example, we have a complex subsystem consisting of three classes: , , and . These classes represent different functionalities or components of the subsystem. The class acts as a simplified interface that encapsulates the complexities of the subsystem. The method in the class provides a unified interface for the clients to interact with the subsystem. SubsystemA SubsystemB SubsystemC Facade Operation Facade By calling the method on the object, the client code can perform the desired actions without needing to directly interact with the complex subsystem classes. The class internally communicates with the individual subsystem classes, hiding the intricate details from the client. Operation Facade Facade Plugin Architectures in C# with the Facade Pattern In a plugin-style architecture, the Facade design pattern can be particularly useful for abstracting the complexities of dynamically selecting and interacting with various plugins based on runtime conditions or configurations. Let’s consider a document processing system where the system needs to support different formats (e.g., PDF, DOCX, ODT) and operations (e.g., parsing, rendering) through plugins. Each format is handled by a different plugin, but clients interact with a unified interface provided by the facade. Complex Subsystems – Plugins! We have plugins for handling various document formats: : Handles PDF document operations. PdfPlugin : Handles DOCX document operations. DocxPlugin : Handles ODT document operations. OdtPlugin Each plugin implements a common interface, , which defines methods for whether or not the document is supported and rendering documents. We’ll be using an imaginary interface that would support interactions for being able to render the document content to some virtual canvas — outside of the scope of this example 🙂 IDocumentPlugin IRenderContext The IDocumentPlugin Interface Let’s check out the example code for a plugin interface that each of our implementations will have: public interface IDocumentPlugin
{
    bool SupportsFormat(string filePath);

    void RenderDocument(Stream stream, IRenderContext renderContext);
} And some dummy classes for now to meet the three plugins we’re required to support: public class PdfPlugin : IDocumentPlugin
{
    public bool SupportsFormat(string filePath) => filePath.EndsWith(
        "pdf",
        StringComparison.OrdinalIgnoreCase);

    public void RenderDocument(
        Stream stream,
        IRenderContext renderContext) => Console.WriteLine("Rendering PDF document...");
}

public class DocxPlugin : IDocumentPlugin
{
    public bool SupportsFormat(string filePath) => filePath.EndsWith(
        "docx",
        StringComparison.OrdinalIgnoreCase);

    public void RenderDocument(
        Stream stream,
        IRenderContext renderContext) => Console.WriteLine("Rendering DOCX document...");
}

public class OdtPlugin : IDocumentPlugin
{
    public bool SupportsFormat(string filePath) => filePath.EndsWith(
        "odt",
        StringComparison.OrdinalIgnoreCase);

    public void RenderDocument(
        Stream stream,
        IRenderContext renderContext) => Console.WriteLine("Rendering ODT document...");
} The Document Processing Facade Class The class provides a simplified interface to interact with the appropriate plugin based on the document format, hiding the complexity of plugin selection and operation execution: DocumentProcessorFacade public class DocumentProcessorFacade
{
    private readonly List<IDocumentPlugin> _plugins;

    public DocumentProcessorFacade()
    {
        // NOTE: I would probably use dependency injection to
        // pass in viable plugins, but this is just to
        // demonstrate the example
        _plugins = new List<IDocumentPlugin>
        {
            new PdfPlugin(),
            new DocxPlugin(),
            new OdtPlugin()
        };
    }

    public void ProcessDocument(
        string filePath,
        IRenderContext renderContext)
    {
        var plugin = GetSupportedPlugin(format);
        if (plugin == null)
        {

            throw new NotSupportedException(
                $"No plugin found to support format for file '{filePath}'.");
        }

        using var fileStream = File.OpenRead(filePath);
        plugin.RenderDocument(stream, renderContext);
    }

    private IDocumentPlugin GetPluginForFormat(string filePath)
    {
        return _plugins.FirstOrDefault(p => p.SupportsFormat(filePath));
    }
 } This example demonstrates how the Facade pattern simplifies interactions within a plugin-style architecture by providing a unified interface ( ) to various document processing plugins. The facade handles the complexity of selecting the appropriate plugin based on the document format and executing operations, allowing client code to remain simple and clean. This approach enhances modularity, scalability, and maintainability of the software system. DocumentProcessorFacade Streamlining API Calls using the Facade Design Pattern Managing multiple API calls in an application can be a complex task. As a software engineer, it is important to find ways to simplify and streamline this process. One effective approach is to utilize the Facade design pattern, which provides a convenient interface to a set of interfaces in a subsystem. In this section, we’ll explore how the Facade pattern can be utilized to streamline and centralize API call management in C#. When working with multiple APIs, it is common to encounter challenges such as handling authentication, managing request/response formats, and dealing with rate limiting. These tasks can become time-consuming and error-prone if not properly managed. The Facade pattern can help alleviate these challenges by providing a unified and simplified interface for interacting with the APIs. By implementing a facade class, we can encapsulate the complexity of making API calls behind a simple and easy-to-use interface. This allows other parts of the codebase to interact with the APIs without having to worry about the details of authentication, request/response formats, or rate limiting. Let’s take a look at an example to see how this can be achieved: public class ApiFacade
{
    private readonly ApiAuthenticationService _authenticationService;
    private readonly ApiRequestFormatter _requestFormatter;
    private readonly ApiRateLimiter _rateLimiter;

    public ApiFacade()
    {
        _authenticationService = new ApiAuthenticationService();
        _requestFormatter = new ApiRequestFormatter();
        _rateLimiter = new ApiRateLimiter();
    }

    public ApiResponse MakeApiCall(ApiRequest request)
    {
        _authenticationService.Authenticate();
        var formattedRequest = _requestFormatter.Format(request);
        _rateLimiter.WaitIfNeeded();

        // Make the actual API call and retrieve the response
        var response = ApiClient.MakeCall(formattedRequest);

        return response;
    }
} In the code example above, we have created an class that encapsulates the complexity of authentication, request formatting, and rate limiting. It utilizes three separate services: , , and . By utilizing the facade pattern, we can centralize the management of these services and expose a single method ( ) that takes care of all the necessary steps to make an API call. ApiFacade ApiAuthenticationService ApiRequestFormatter ApiRateLimiter MakeApiCall To use the class, other parts of the codebase can simply create an instance and call the method, passing in the required . The facade class will handle the authentication, request formatting, rate limiting, and the actual API call, simplifying the overall process and reducing the complexity of managing multiple API calls. ApiFacade MakeApiCall ApiRequest Enhancing UIs with the Facade Design Pattern in C# User interface interactions can often become complex and involve a series of intricate steps. The Facade pattern provides an elegant solution to simplify and optimize these interactions, making them more manageable and efficient. Let’s explore how the Facade pattern can enhance user interface interactions in C# with a code example. Consider a scenario where a user needs to perform various actions on a customer management system, such as creating a new customer, updating their information, and retrieving customer details. Each of these actions involves interacting with multiple components and performing a series of steps. By utilizing the Facade design pattern, we can create a unified interface that encapsulates the complexity of these interactions. The Facade class acts as a simplified entry point, shielding the client from the underlying system’s complexities and providing a more straightforward API for interacting with the user interface. public class CustomerManagementFacade
{
    private readonly CustomerService _customerService;
    private readonly CustomerValidationService _validationService;
    private readonly CustomerCacheService _cacheService;

    public CustomerManagementFacade()
    {
        _customerService = new CustomerService();
        _validationService = new CustomerValidationService();
        _cacheService = new CustomerCacheService();
    }

    public void CreateNewCustomer(string name, string email)
    {
        if (_validationService.ValidateCustomerData(name, email))
        {
            _customerService.CreateCustomer(name, email);
            _cacheService.CacheCustomer(name, email);
        }
    }

    public void UpdateCustomerInformation(string name, string email)
    {
        if (_validationService.ValidateCustomerData(name, email))
        {
            _customerService.UpdateCustomer(name, email);
            _cacheService.UpdateCachedCustomer(name, email);
        }
    }

    public Customer GetCustomerDetails(string name)
    {
        var customer = _cacheService.GetCachedCustomer(name);

        if (customer == null)
        {
            customer = _customerService.GetCustomer(name);
            _cacheService.CacheCustomer(customer.Name, customer.Email);
        }

        return customer;
    }
} In the above code example, we have a class that acts as the façade for managing customer interactions. It encapsulates the creation, updating, and retrieval of customer information. The façade orchestrates the interaction between the , , and to provide simpler methods for the client to use. CustomerManagementFacade CustomerService CustomerValidationService CustomerCacheService With the façade pattern, the client code only needs to interact with the façade class and doesn’t need to worry about the detailed interactions with each individual component. This simplifies the codebase, reduces complexity, and allows for easier maintenance and extensibility. [Paid Product] If you want more ! information on design patterns, get your E-Book today Wrapping Up The Facade Design Pattern in C# In conclusion, we have explored the Facade design pattern in C# and discussed 4 interesting use cases along with code examples. The Facade pattern provides a simplified interface to a complex subsystem, making it easier to understand and use. Each of these examples hopefully helped to illustrate different scenarios where leveraging a facade can make things much simpler for the calling code. Understanding and utilizing design patterns, such as the Facade pattern, is important for software engineers. These patterns provide proven solutions to common software engineering problems and offer a structured approach to designing robust and scalable applications. By incorporating design patterns into our development practices, we can create software solutions that are more efficient, flexible, and easier to maintain — but understanding which design patterns best fit where takes some practice! Try out the Facade pattern further and consider implementing it in your C# projects — it’s truly one of my favorite design patterns to work with. If you found this useful and you’re looking for more learning opportunities, consider and check out my ! subscribing to my free weekly software engineering newsletter free videos on YouTube Also published . here

Stories, News & Mentions about GETSETUP

Getsetup’s Stories on HackerNoon