First, create a MongoDB instance on Atlas cloud: Go to:

https://www.mongodb.com/cloud/atlas

Start Free > Sign In > Create a New Cluster

Choose your cloud provider and configuration. Create a cluster - sandbox cluster is free.

In the cluster Sandbox view click 'Connect'. Whitelist your IP. Create user. Click 'Choose a connection method'.

Click 'Connect your application'. Copy the unique url - we will use it to connect to the database. Save it, add user password and database name (we will use 'users'), keep it privately!

Then, within the cluster create a database 'users' with a collection 'users'. Here we will keep our data.

Good, let's move back to creating the app:

Let's create our app:

npx create-next-app --example with-context-api wb-context

Now, let's install Apollo Server, Mongoose and create api endpoint for the Apollo Server:

cd wb-context
npm i apollo-server-micro mongoose
cd pages
mkdir api
code graphql.js

Inside a file import the dependencies:

import { ApolloServer, gql } from "apollo-server-micro";
import mongoose from 'mongoose';

Define the GraphQL query:

const typeDefs = gql`
  type Query {
    user: String,
    email: String
  }
`;

Define the user schema. You only want to create the user schema once! Otherwise you would get errors, so better use try/catch statement instead:

let defineUserModel = async () => {
  let connect = async () => {
    let connection = await mongoose.connect('mongodb+url', {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      useFindAndModify: false,
      useCreateIndex: true
    });
    return connection;
  }
  connect()
  const userSchema = new mongoose.Schema({
    user: String,
    email: String,
  })
  let UserModel;
  try {
    UserModel = mongoose.model('user');
  } catch {
    UserModel = mongoose.model('user', userSchema);
  }
  return UserModel;
}

Define the user function to get the username:

let getUser = async () => {
  let UserModel = await defineUserModel()
  const instance = await UserModel.findOne({ user: 'jaguar' }, (err, foundItem) => {
    if (err) {
      console.log(err);
      return err;
    } else {
      return foundItem
    }
  });
  let data = instance.toJSON()
  return data['user']
}

Same for email:

let getEmail = async () => {
  let UserModel = await defineUserModel()
  const instance = await UserModel.findOne({ user: 'jaguar' }, (err, foundItem) => {
    if (err) {
      console.log(err);
      return err;
    } else {
      return foundItem
    }
  });
  let data = instance.toJSON()
  return data['email']
}

So we can define the resolvers. This time they are asynchronous:

const resolvers = {
  Query: {
    user: async () => await getUser(),
    email: async () => await getEmail()
  }
}

Let's define, run on an endpount '/graphql/api' and export the Apollo Server.

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
  context: () => {
    return {};
  }
});


const handler = apolloServer.createHandler({ path: "/api/graphql" });

export const config = {
  api: {
    bodyParser: false
  }
};

export default handler;

To create dummy data with the same user model you can run:

let createUserData = async () => {
  let UserModel = await defineUserModel()
  await UserModel.create({ user: 'jaguar', email: 'jaguar@foo.bar' });
}
createUserData()

Your graphql.js file should be:

import { ApolloServer, gql } from "apollo-server-micro";
import mongoose from 'mongoose';

const typeDefs = gql`
  type Query {
    user: String,
    email: String
  }
`;

let createUserData = async () => {
  let UserModel = await defineUserModel()
  await UserModel.create({ user: 'jaguar', email: 'jaguar@foo.bar' });
}

let defineUserModel = async () => {
  let connect = async () => {
    let connection = await mongoose.connect('mongodb+url', {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      useFindAndModify: false,
      useCreateIndex: true
    });
    return connection;
  }
  connect()
  const userSchema = new mongoose.Schema({
    user: String,
    email: String,
  })
  let UserModel;
  try {
    UserModel = mongoose.model('user');
  } catch {
    UserModel = mongoose.model('user', userSchema);
  }
  return UserModel;
}


let getUser = async () => {
  let UserModel = await defineUserModel()
  const instance = await UserModel.findOne({ user: 'jaguar' }, (err, foundItem) => {
    if (err) {
      console.log(err);
      return err;
    } else {
      return foundItem
    }
  });
  let data = instance.toJSON()
  return data['user']
}

let getEmail = async () => {
  let UserModel = await defineUserModel()
  const instance = await UserModel.findOne({ user: 'jaguar' }, (err, foundItem) => {
    if (err) {
      console.log(err);
      return err;
    } else {
      return foundItem
    }
  });
  let data = instance.toJSON()
  return data['email']
}

const resolvers = {
  Query: {
    user: async () => await getUser(),
    email: async () => await getEmail()
  }
}

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
  context: () => {
    return {};
  }
});


const handler = apolloServer.createHandler({ path: "/api/graphql" });

export const config = {
  api: {
    bodyParser: false
  }
};

export default handler;

Your _app.js file should include Apollo Client:

import '../styles/globals.css'
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks';

const client = new ApolloClient({
  uri: 'http://localhost:3000/api/graphql'
});
function MyApp({ Component, pageProps }) {

  return <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
}

export default MyApp

Now, let's use GrapQL inside the rendered html in index.js:

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';

export default function Home() {
  const USER_QUERY = gql`
    {
      user
      email
    }
  `;
  const { loading, error, data } = useQuery(USER_QUERY);
  if (loading) {
    return <p>Loading...</p>;
  }
  if (error) {
    console.log(error)
    return <p>Error :(</p>;
  } 
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App with GraphQL</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
            <div className="App">
          <header className="App-header">
            <p>
              User is: {data.user}
            </p>
            <p>
              Email is: {data.email}
            </p>
          </header>
        </div>

      </main>
      <footer className={styles.footer}>
      </footer>
    </div>
  )
}

All done! You should see user data loaded on the screen. Have fun!

Most space systems are made of ground station and space vehicle:

However, Sputnik 1, the first ever satellite did not receive any instructions from ground station. It was essentially a shell with antennas on the outside and a battery and radio transmitter inside. It broadcasted a radio wave signal that could be heard by anyone on Earth 🌎 with a radio antenna.

Today, the ISS regularly communicates with ground station on Earth to correct it's course and avoid collisions with space debris.

So, to be more detailed, in the ground stations today there are:

1. C&DH Command and Data handling Antenna to receive the signal wave from the air and/or transmit it back to the Space Vehicle.

2. Software defined radio - responsible for receiving signals from the Space Vehicle and turning them into communications via demodulation.

1. If there is encryption for the data, it will be decrypted and passed to the flight control computer. Flight control computer runs the software that communicates with and controls the Space Vehicle and keeps track of it's flight operational data.

2. Payload control - on the same Flight control computer there is a payload control, which handles operation of the payload and keeps track if it's data being sent.

From the ground station communication process is the opposite:

Communications stream is created using IP protocol and then encrypted if necessary. It is modulated and sent as a radio wave via Software Defined Radio and antennas into the air to the Space Vehicle.

On the Space Vehicle: radio signal is converted by Software Defined Radio to turn the radio wave signal into a communications stream. Next, the command and data handler receives the communications from the ground station and directs them as necessary to the flight computer or payload computer.

To summarize, most of the satellite communication in done through radio waves which need to be modulated and defined. Data safety can be ensured by encryption, although it is not always used.

Upcoming satellite technology already benefits from laser communication, which I will introduce in an upcoming post.

Stay tuned!

npx create-next-app

Give your app a name. We'll be running in a development environment with

npm run dev

Enter the project folder:

cd MyApp

Install the packages

npm install apollo-server-micro graphql apollo-boost graphql-tag @apollo/react-hooks

Backend

Inside the 'pages/api' create a file named 'graphql.js'. We'll create an apollo server on this endpont (NextJS will make an endpoint on 'api/graphql' for this server).

Let's define the type for query:

import { ApolloServer, gql } from "apollo-server-micro";

const typeDefs = gql`
  type Query {
    user: String,
    email: String
  }
`;

Now, let's create resolvers with dummy data. In another post we'll replace this with mongoose resolvers:

const test_user = 'jaguar'
const test_email = 'jaguar@gmail.com'

const resolvers = {
    Query: {
      user: () => test_user,
      email: () => test_email,
    },
  };

Let's run the Apollo Server:

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
  context: () => {
    return {};
  }
});

const handler = apolloServer.createHandler({ path: "/api/graphql" });

Also make sure that this API route is not parsed and interpreted by NextJS. It has to be interpreted by the Apollo Server: https://nextjs.org/docs/api-routes/api-middlewares#custom-config Add the configuration:

export const config = {
  api: {
    bodyParser: false
  }
};

The whole graphql.js file is now:

import { ApolloServer, gql } from "apollo-server-micro";

const typeDefs = gql`
  type Query {
    user: String,
    email: String
  }
`;

const test_user = 'jaguar'
const test_email = 'jaguar@gmail.com'

const resolvers = {
    Query: {
      user: () => test_user,
      email: () => test_email,
    },
  };

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
  context: () => {
    return {};
  }
});

const handler = apolloServer.createHandler({ path: "/api/graphql" });

export const config = {
  api: {
    bodyParser: false
  }
};

export default handler;

Frontend

In the 'pages/_app.js' import the Apollo Client and react hook:

import ApolloClient from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks';

point the Apollo Client instance to the Apollo Server:

const client = new ApolloClient({
  uri: 'http://localhost:3000/api/graphql'
});

And add Apollo Provider wrapper for the Component:

function MyApp({ Component, pageProps }) {

  return <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
}

So the whole '_app.js' file is:

import '../styles/globals.css'
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks';

const client = new ApolloClient({
  uri: 'http://localhost:3000/api/graphql'
});
function MyApp({ Component, pageProps }) {

  return <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
}

export default MyApp

Now let's use the data inside the 'index.js' file. First, let's import the GraphQL query parser and useQuery hook:

import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';

Inside the 'Home' function we'll be resolving a query:

  const USER_QUERY = gql`
    {
      user
      email
    }
  `;
  const { loading, error, data } = useQuery(USER_QUERY);
  if (loading) {
    return <p>Loading...</p>;
  }
  if (error) {
    console.log(error)
    return <p>Error :(</p>;
  }

So we can use it inside 'main' component:

            <p>
              User is: {data.user}
            </p>
            <p>
              Email is: {data.email}
            </p>

Finally, the whole 'index.js' file is:

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';

export default function Home() {
  const USER_QUERY = gql`
    {
      user
      email
    }
  `;
  const { loading, error, data } = useQuery(USER_QUERY);
  if (loading) {
    return <p>Loading...</p>;
  }
  if (error) {
    console.log(error)
    return <p>Error :(</p>;
  } 
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App with GraphQL</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
            <div className="App">
          <header className="App-header">
            <p>
              User is: {data.user}
            </p>
            <p>
              Email is: {data.email}
            </p>
          </header>
        </div>

      </main>
      <footer className={styles.footer}>
      </footer>
    </div>
  )
}

Let's check the browser at 'http://localhost:3000/'. You should see:

Voila! We successfully integrated GraphQL with NextJS. Next - integrating mongoose.

Let the good times roll!

In the cyber security world for enterprise (these are your usual organisations running the internet services you use) we strive to identify the tactics and attacker behaviour. You can read more about them here: https://attack.mitre.org/.

I'll summarize all of them below. Most of the tactics resolve around getting access to the system by escalating priviledges, acquiring your data, running scripts in your system or exploiting your network.

Accounts

We access all of the services as users. Some users have superpowers and can access all the important data and actions on the system - these are admins or priviledged users. Gaining intial access can happen through unsecure WiFi, leaked or guessed password. If hacker can manage to elevate priviledges, they can get hold of your whole system! Persistence means that access to your account can be gained in many ways: through a script injected into the system on boot, through a browser plugin, remote service, etc.

Prevention!

Maintain a list of user prviledges, use least priviledge principle: give out priviledges only if necessary. Make sure accesses are given only for those users who absolutely need the files or that part of the system.

Data

One of the most common goals of hackers is to snatch your data - all the value on your system. They will try to capture your inputs, to get in the middle of your customer and your system to collect the passwords and messages. Sniff your networks to access your user credentials. After collection the data is processed with exfiltration in order to make sense of it.

Prevention!

Choose safe passwords, encrypt your data and monitor your network. Sudden IP address change can warn you that somebody is trying to use a hijacked account.

System

Hackers will try to get around your defences by modifying permissions, using proxies and obscuring themselves. Some hackers, the impact seekers, will try to destroy your service and can go far in deleting data and bringing down the service. They can execute scripts in your system in a timely manner, exploiting your system seemingly unnoticed.

Prevention!

Monitor and track who is accessing your system and where from. Check the blacklists for malicious IP addresses.

Connection

Connection to your system is hackers gateway to exploiting it. They will try to use everything: remote connections, proxies, USB devices, cloud service features.

Prevention!

Try to avoid the use of unecessary USB devices, know your network structure, maintain a firewall. Don't establish unnecessary connections, remove them if they are no longer needed. Last, but not least, know your cloud provider very well to ensure your cloud security!

undraw_unlock_24mb.png

I hope this was a good overview of all the nasty things that can happen. Gladly, we have the preventive measures for all of them. Healthy monitoring and good habits can go far in the quest of safe internet!

Let the good times roll!

GraphQL is a fast and modern way to fetch data to your application. It has many advantages, such as: caching, speed and unified data model. It sits between your backend and frontent:

We will be implementing a very simple GraphQL use case for Node.js backend and React.js frontend.

Middleware and Backend

We'll use Apollo and Express server integration: apollo-server-express.

npm i create-react-app graphql apollo-server-express express

Create a folder for a server side:

mkdir server
code apollo_server.js

In the apollo_server.js file import the modules:

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

Then construct a schema with GraphQL language for variables that you will be fetching. Define the type for variables, here it will be a string:

const typeDefs = gql`
  type Query {
    user: String,
    email: String
  }
`;

Now let's create some dummy data. We will later replace this with MongoDB data.

const test_user = 'jaguar'
const test_email = 'jaguar@gmail.com'

Let's use it and create Query resolvers:

const resolvers = {
  Query: {
    user: () => test_user,
    email: () => test_email,
  },
};

Now let's run Apollo Server and make it a middleware in front of our express server:

const server = new ApolloServer({ typeDefs, resolvers });

const app = express();
server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);

We can start the server with:

node apollo_server.js

The whole apollo_server.js file should look like this:

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

const typeDefs = gql`
  type Query {
    user: String,
    email: String
  }
`;

const test_user = 'jaguar'
const test_email = 'jaguar@gmail.com'

const resolvers = {
  Query: {
    user: () => test_user,
    email: () => test_email,
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

const app = express();
server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);

Now let's move on to the front-end.

Frontend

Let's create the folder and the starting application:

mkdir client
cd client
npm i -g create-react-app
create-react-app test_book
cd test_book
npm i @apollo/react-hooks apollo-boost
cd src
code index.js

Import the Apollo hooks, client and connect it to the server:

import { ApolloProvider } from '@apollo/client';
import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'http://localhost:4000',
});

Add Apollo Client context to the App component:

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

The whole index.js file should look like this:

import { ApolloProvider } from '@apollo/client';
import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

Now we will use useQuery hook to query data from the Apollo server. Open App.js:

const USER_QUERY = gql`
  {
    user
    email
  }
`;

Fetch the data, display whether the data was loading or an error happened:

const App = () => {
  const { loading, error, data } = useQuery(USER_QUERY);
  if (loading) {
    return <p>Loading...</p>;
  }
  if (error) {
    console.log(error)
    return <p>Error :(</p>;
  } 
  return (
    <div className="App">
      <header className="App-header">
        <p>
          User is: {data.user}
        </p>
        <p>
          Email is: {data.email}
        </p>
      </header>
    </div>
  );
}

You shoul see the data successfully loaded in the browser:

The whole App.js file should be:

import React from 'react';
import './App.css';
import { useQuery } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';

const USER_QUERY = gql`
  {
    user
    email
  }
`;

const App = () => {
  const { loading, error, data } = useQuery(USER_QUERY);
  if (loading) {
    return <p>Loading...</p>;
  }
  if (error) {
    console.log(error)
    return <p>Error :(</p>;
  } 
  return (
    <div className="App">
      <header className="App-header">
        <p>
          User is: {data.user}
        </p>
        <p>
          Email is: {data.email}
        </p>
      </header>
    </div>
  );
}

export default App;

Enjoy - you just made a successfull GraphQL query! In the following tutorial we will tailor our query to the full user model.

Let the good times roll!

This is my first post. My name is Monika and I will be sharing my journey through tech world with you: news, web development, entrepreneurship and AI.

How I got started? I wrote my first code when I was 15. It was an automation for a Mars rover in Colobot. I was so amazed about how much work programs can save for us!

(Photo credit goes to NASA)

Fast forward 13 years and I grew in many areas in tech: data analytics, web development, cyber security and physics. I cannot wait to talk about all of it with you!

Let the good times roll,

Monika