GetSetUp

getsetup

Xcode Cloud is a Continuous Integration and Continuous Delivery (CI/CD) platform provided by Apple. It automates away the hard work of building your apps, testing them, signing them, and pushing them to a destination. Why use Xcode Cloud, I hear you say? If you’ve been through the process of manually archiving your app, and then submitting it to iTunes Connect, you’ll know these steps take time. With Xcode Cloud, Apple makes it easy to automate this with a few button clicks through Xcode. Let’s take a look at how to do this. Setting Up Xcode Cloud In order to use Xcode Cloud, you need to have a few things set up. The main requirements are: Enrollment in the Apple Developer Program


An app record on App Store Connect


Your Developer Apple ID added to Xcode Your project also needs to be stored in a git repository. Xcode Cloud makes heavy use of git as a trigger to know when to start running. A complete list of requirements is available if you find yourself needing more. Once you’re set-up, it’s time to set up a workflow. Along the top of Xcode, click the git branch so a popup appears. You’ll see an option called Create Workflow. Click the option, and Xcode will show a new window, asking which product to create a workflow for. Select an app and click Next. You’ll be taken to the next screen to customize your workflow. Creating A Workflow The workflow screen contains a few different sections. First, it shows the General section where you can provide information about your workflow. Here, you can give your workflow a name and a description of what it does. This is useful for yourself as a solo developer, or as a team where you have multiple engineers who need to use the same workflow. You can also restrict the workflow from being edited in this section, ensuring workflows aren’t tampered with by other team members without the right permissions. The next section is the Environment section. Here, you can select what version of Xcode and macOS your workflow will use. Xcode Cloud provides a variety of Xcode versions, including beta versions. This is handy if you want to create multiple workflows building and testing different configurations. The environment section also provides the option to clean the workflow before each build. With the option unchecked, each workflow stores the derived data and other information from each build to speed up subsequent builds. Whilst this can be a good thing, you may want to avoid this depending on your needs. For example, delivering a build to TestFlight for external testing requires a clean build. Finally, you can provide environment variables to the workflow. These can be picked up by custom build scripts used by your app to extend workflows. If a variable value needs to be kept secret, you can check the secret tickbox, and the value will be hidden. With the information for the workflow setup and the environment configured, the next step is to create triggers that cause the workflow to run. Start Conditions The next section is called Start Conditions. Here, you can tell the workflow what conditions should trigger it to run. By default, Xcode sets the start condition to be any change to any file on any branch. It’s recommended to tweak this as your workflow will run for every commit. One option is to constrain the start condition to run for a certain branch. First, select the Custom Branches radio button, then begin to type the name of the branch. Xcode will search your git branches and suggest branches that match your search. You can also choose to trigger workflows based on changes occurring to a specific file or folder, including specific types of files. Multiple file triggers can be added, giving you the ability to build complex trigger rules for file changes. If you need a different trigger, you can create different start triggers by clicking the + next to the start condition. Xcode provides different triggers for a number of situations. These range from changes to git tags, pull request changes, a scheduler for a specific branch, and finally a manually started workflow. One common option across most of the triggers is the ability to Auto Cancel Builds. This is useful if your trigger is likely to start the workflow multiple times. Instead of waiting for each build to finish, Xcode Cloud cancels the older builds and prioritizes the latest build. This is so useful, it’s enabled by default! When you’re happy with your workflow start triggers, you’re ready to move on and set up actions for the workflow to perform. Workflow Actions As part of any good CI/CD platform, performing actions regularly and repetitively is good practice to ensure your app is built successfully and you can catch issues quickly. Xcode Cloud is no exception and allows you to choose from a selection of Actions. By default, your workflow includes a Build action to build your chosen app scheme. If there are issues with the scheme, Xcode Cloud provides a helpful warning so you can address it. Similar to start triggers, you can add more build actions that are run as part of the workflow. These include running tests, running the analyzer, and archiving your app before distributing it to TestFlight or the App Store. The test and analyze build actions contain a Requirement setting. This setting decides whether the build action must pass for the workflow to continue. For example, if you want the workflow to fail if one of your tests fails, then you can enforce this requirement. Interestingly, the test build action doesn’t seem to support visionOS at present. You can configure as many build actions as needed for your workflow. You could, for example, run the tests for each scheme in your project, then build, archive, and distribute each app in one workflow. Once you are happy with your build action setup, you can move to the final part of the workflow. Setting up post actions. Post Actions Post Actions allow you to perform a couple of actions before the workflow is complete. These include distributing new builds to TestFlight users, notarizing macOS apps, and notifying others of the workflow result through Slack or email. The Notify post action gives you a degree of control over what messages are sent. You can choose to receive all Build Success messages, to be notified when the workflow is fixed from a previous failure, or not to be notified at all! Similar options for Build Failure messages are available. You can choose to receive all failure messages, breaking workflow messages only, or no failure messages at all. Saving Your Workflow Once you are happy with your Workflow, click the Save button at the bottom right of the window. Xcode Cloud will check the workflow and let you know if there are issues that must be addressed. If all is well, the workflow window disappears and takes you back to Xcode. Click on the git branch along the top of Xcode again, and this time, click Manage Workflows. A new window will appear, showing the workflow you created for the app. If you want to edit the workflow, select the workflow, and click the gear button in the bottom left corner. You can also click on the - button whilst the workflow is selected to delete it. Running Shell Scripts In Xcode Cloud Xcode Cloud provides support for running shell scripts at specific parts of the workflow. This is useful if you need to perform more advanced configuration for your workflow, and allows your workflow to be customized even further. Exploring this topic is beyond the scope of this post, however, you can find out more in the Developer Documentation. Viewing Your Workflow In Xcode And App Store Connect You can view the results of your workflow in Xcode by clicking the Report Navigator and clicking the Cloud tab. Each workflow will be shown, including the results from each build. You can also view and interact with your workflows in App Store Connect by navigating to your App Store listing and selecting the Xcode Cloud tab at the top of the listing. Costs Xcode Cloud comes included in every Apple Developer Program Membership. Each membership comes with 25 hours of compute time per month. If you go over, then you can choose from a variety of subscription options to receive more time. Further Reading Xcode Cloud on the surface is a simple-to-use CI/CD platform for your Apple Apps. Don’t be deceived, however, in a few button clicks you can begin to create highly performant workflows that cover the majority of your use cases. If you want to learn more, I recommend starting here: Xcode Cloud Developer Documentation: The official documentation covering general usage and in-depth topics on how to get the most out of Xcode Cloud. Developing a workflow strategy for Xcode Cloud: Best practice suggestions on how to refine your CI/CD practices using Xcode Cloud. Configuring Webhooks with Xcode Cloud: Advice on how to expose Xcode Cloud events into your own tools and services using Webhooks. Finally If you enjoyed this blog post, consider dropping me a couple of $$$ over on Kofi. You can also follow me on Social Media to hear more about software engineering by clicking the links below: X/Twitter: https://x.com/darryl_bayliss LinkedIn: https://www.linkedin.com/in/darrylbayliss/ Mastodon: https://mastodon.social/@darryl_bayliss GitHub: https://github.com/DarrylBayliss Xcode Cloud is a Continuous Integration and Continuous Delivery (CI/CD) platform provided by Apple. It automates away the hard work of building your apps, testing them, signing them, and pushing them to a destination. Why use Xcode Cloud, I hear you say? If you’ve been through the process of manually archiving your app, and then submitting it to iTunes Connect, you’ll know these steps take time. With Xcode Cloud, Apple makes it easy to automate this with a few button clicks through Xcode. Let’s take a look at how to do this. Setting Up Xcode Cloud In order to use Xcode Cloud, you need to have a few things set up. The main requirements are: Enrollment in the Apple Developer Program An app record on App Store Connect Your Developer Apple ID added to Xcode Enrollment in the Apple Developer Program Enrollment in the Apple Developer Program An app record on App Store Connect An app record on App Store Connect Your Developer Apple ID added to Xcode Your Developer Apple ID added to Xcode Your project also needs to be stored in a git repository . Xcode Cloud makes heavy use of git as a trigger to know when to start running. git repository A complete list of requirements is available if you find yourself needing more. complete list Once you’re set-up, it’s time to set up a workflow. Along the top of Xcode, click the git branch so a popup appears. You’ll see an option called Create Workflow . Create Workflow Click the option, and Xcode will show a new window, asking which product to create a workflow for. Select an app and click Next . You’ll be taken to the next screen to customize your workflow. Next Creating A Workflow The workflow screen contains a few different sections. First, it shows the General section where you can provide information about your workflow. General Here, you can give your workflow a name and a description of what it does. This is useful for yourself as a solo developer, or as a team where you have multiple engineers who need to use the same workflow. You can also restrict the workflow from being edited in this section, ensuring workflows aren’t tampered with by other team members without the right permissions. The next section is the Environment section. Here, you can select what version of Xcode and macOS your workflow will use. Environment Xcode Cloud provides a variety of Xcode versions, including beta versions. This is handy if you want to create multiple workflows building and testing different configurations. The environment section also provides the option to clean the workflow before each build. With the option unchecked, each workflow stores the derived data and other information from each build to speed up subsequent builds. Whilst this can be a good thing, you may want to avoid this depending on your needs. For example, delivering a build to TestFlight for external testing requires a clean build. Finally, you can provide environment variables to the workflow. These can be picked up by custom build scripts used by your app to extend workflows. If a variable value needs to be kept secret, you can check the secret tickbox, and the value will be hidden. With the information for the workflow setup and the environment configured, the next step is to create triggers that cause the workflow to run. Start Conditions The next section is called Start Conditions . Here, you can tell the workflow what conditions should trigger it to run. By default, Xcode sets the start condition to be any change to any file on any branch. Start Conditions It’s recommended to tweak this as your workflow will run for every commit. One option is to constrain the start condition to run for a certain branch. First, select the Custom Branches radio button, then begin to type the name of the branch. Xcode will search your git branches and suggest branches that match your search. Custom Branches You can also choose to trigger workflows based on changes occurring to a specific file or folder, including specific types of files. Multiple file triggers can be added, giving you the ability to build complex trigger rules for file changes. If you need a different trigger, you can create different start triggers by clicking the + next to the start condition. Xcode provides different triggers for a number of situations. These range from changes to git tags, pull request changes, a scheduler for a specific branch, and finally a manually started workflow. One common option across most of the triggers is the ability to Auto Cancel Builds . This is useful if your trigger is likely to start the workflow multiple times. Instead of waiting for each build to finish, Xcode Cloud cancels the older builds and prioritizes the latest build. Auto Cancel Builds This is so useful, it’s enabled by default! When you’re happy with your workflow start triggers, you’re ready to move on and set up actions for the workflow to perform. Workflow Actions As part of any good CI/CD platform, performing actions regularly and repetitively is good practice to ensure your app is built successfully and you can catch issues quickly. Xcode Cloud is no exception and allows you to choose from a selection of Actions . By default, your workflow includes a Build action to build your chosen app scheme. Actions Build If there are issues with the scheme, Xcode Cloud provides a helpful warning so you can address it. Similar to start triggers, you can add more build actions that are run as part of the workflow. These include running tests, running the analyzer, and archiving your app before distributing it to TestFlight or the App Store. The test and analyze build actions contain a Requirement setting. This setting decides whether the build action must pass for the workflow to continue. For example, if you want the workflow to fail if one of your tests fails, then you can enforce this requirement. Requirement Interestingly, the test build action doesn’t seem to support visionOS at present. You can configure as many build actions as needed for your workflow. You could, for example, run the tests for each scheme in your project, then build, archive, and distribute each app in one workflow. Once you are happy with your build action setup, you can move to the final part of the workflow. Setting up post actions. Post Actions Post Actions allow you to perform a couple of actions before the workflow is complete. These include distributing new builds to TestFlight users, notarizing macOS apps, and notifying others of the workflow result through Slack or email. Post Actions The Notify post action gives you a degree of control over what messages are sent. You can choose to receive all Build Success messages, to be notified when the workflow is fixed from a previous failure, or not to be notified at all! Notify Build Success Similar options for Build Failure messages are available. You can choose to receive all failure messages, breaking workflow messages only, or no failure messages at all. Build Failure Saving Your Workflow Once you are happy with your Workflow, click the Save button at the bottom right of the window. Save Xcode Cloud will check the workflow and let you know if there are issues that must be addressed. If all is well, the workflow window disappears and takes you back to Xcode. Click on the git branch along the top of Xcode again, and this time, click Manage Workflows . A new window will appear, showing the workflow you created for the app. Manage Workflows If you want to edit the workflow, select the workflow, and click the gear button in the bottom left corner. You can also click on the - button whilst the workflow is selected to delete it. - Running Shell Scripts In Xcode Cloud Xcode Cloud provides support for running shell scripts at specific parts of the workflow. This is useful if you need to perform more advanced configuration for your workflow, and allows your workflow to be customized even further. Exploring this topic is beyond the scope of this post, however, you can find out more in the Developer Documentation . Developer Documentation Viewing Your Workflow In Xcode And App Store Connect You can view the results of your workflow in Xcode by clicking the Report Navigator and clicking the Cloud tab. Each workflow will be shown, including the results from each build. Report Navigator Cloud You can also view and interact with your workflows in App Store Connect by navigating to your App Store listing and selecting the Xcode Cloud tab at the top of the listing. Xcode Cloud Costs Xcode Cloud comes included in every Apple Developer Program Membership. Each membership comes with 25 hours of compute time per month. If you go over, then you can choose from a variety of subscription options to receive more time. Further Reading Xcode Cloud on the surface is a simple-to-use CI/CD platform for your Apple Apps. Don’t be deceived, however, in a few button clicks you can begin to create highly performant workflows that cover the majority of your use cases. If you want to learn more, I recommend starting here: Xcode Cloud Developer Documentation: The official documentation covering general usage and in-depth topics on how to get the most out of Xcode Cloud. Xcode Cloud Developer Documentation : The official documentation covering general usage and in-depth topics on how to get the most out of Xcode Cloud. Xcode Cloud Developer Documentation Developing a workflow strategy for Xcode Cloud: Best practice suggestions on how to refine your CI/CD practices using Xcode Cloud. Developing a workflow strategy for Xcode Cloud : Best practice suggestions on how to refine your CI/CD practices using Xcode Cloud. Developing a workflow strategy for Xcode Cloud Configuring Webhooks with Xcode Cloud: Advice on how to expose Xcode Cloud events into your own tools and services using Webhooks. Configuring Webhooks with Xcode Cloud : Advice on how to expose Xcode Cloud events into your own tools and services using Webhooks. Configuring Webhooks with Xcode Cloud Finally If you enjoyed this blog post, consider dropping me a couple of $$$ over on Kofi . Kofi You can also follow me on Social Media to hear more about software engineering by clicking the links below: X/Twitter: https://x.com/darryl_bayliss https://x.com/darryl_bayliss LinkedIn: https://www.linkedin.com/in/darrylbayliss/ https://www.linkedin.com/in/darrylbayliss/ Mastodon: https://mastodon.social/@darryl_bayliss https://mastodon.social/@darryl_bayliss GitHub: https://github.com/DarrylBayliss https://github.com/DarrylBayliss

How to Get Setup With Xcode Cloud

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 .

Stories, News & Mentions about GETSETUP

Getsetup’s Stories on HackerNoon