Forem: Bassel Kanso

How to upload an image to strapi

Bassel Kanso — Tue, 20 Jul 2021 12:46:37 +0000

Perhaps one of the hardest things to do, and that is to figure out how to upload an image to strapi,
and to link it to a specific content type.

On the official docs there is no mentioning of how to do it clearly, they only have an example on how to upload
a file to media and it's done with just javascript and HTML in the browser, and if you have tried uploading an image to strapi
form a react app or vue that clearly doesn't work.

But don't worry I have gone ahead and figured out how to make it work, so I am going to walk you through how to do it !

1- Let's add Axios to our react app

yarn add axios
or
npm install axios --save

To upload files to strapi you'll have to use the upload endpoint

If you are running it locally it will look like this

// Strapi v4
http:localhost:1337/api/upload

// Strapi v3
http:localhost:1337/upload

It will be a POST request

2- Add an input

import { useState } from 'react';
import axios from 'axios';

function App() {

  const [files,setFiles] = useState()

  const uploadImage = async () => {
      //posting logic will go here
  }

  return (
      <form onSubmit={uploadImage}>
        <input 
            type="file"
            onChange={(e)=>setFiles(e.target.files)}
        />
        <input type="submit" value="Submit" />
      </form>
  );
}

we'll add an input field of type file and capture the event with the onChange prop,
we are setting e.target.files to the state called files, this basically the information we need
to upload our file.

We are also adding a function for onSubmit where will create the logic for adding an image.

3- Uploading the image

const uploadImage = async (e) => {
    e.preventDefault();

    const formData = new FormData()

    formData.append('files', files[0])

    axios.post("http://localhost:1337/upload", formData)
    .then((response)=>{
        //after success
    }).catch((error)=>{
        //handle error
    })
}

First we prevent the default behaviour of the submit button so our page wouldn't refresh,
then we create an instance of FormData.

We have to use FormData or else it wouldn't work, using json format will not be possible in this case.

We append files[0] to the formData and we call it files, make sure to use the same key files

Then pass formData to axios.post second param, and after you press submit an image will be uploaded to the media on Strapi.

4- Link image to a content type

const uploadImage = async (e) => {
    e.preventDefault();

    const formData = new FormData()

    formData.append('files', files[0])

    axios.post("http://localhost:1337/upload", formData)
    .then((response)=>{

      const imageId = response.data[0].id

      axios.post("http://localhost:1337/people",{image:imageId}).then((response)=>{
        //handle success
      }).catch((error)=>{
          //handle error
        })
    }).catch((error)=>{
        //handle error
    })

}

I created a content type called Person (People because strapi is smart enough to make it plural),
I added an single image field to it.

All we need to do is get the image id that we successfully uploaded beforehand and after that we add the image id to
our POST request on the image field, and after that everything should be linked and your content type will have the image in it's field.

I hope this was helpful, and please checkout the Strapi website to learn more about it !

Follow me on my social media accounts to recieve more content !
Thanks for the support !

Create rest APIs with strapi

Bassel Kanso — Sun, 11 Jul 2021 10:18:10 +0000

Strapi is an open source headless CMS that let's you create powerful backends using nodejs

A headless CMS is similar to the famous known CMSs like Wordpress and Drupal except it doesn't have a frontend template.
It Decouples the frontend from the backend, and exposes restful or graphql APIs.

When I first found Strapi I was astonished by the abilities it gave me and the easy to use interface, it gave me the ability to
develop a mobile application without having to write backend code.

Strapi is built entirely using nodejs, which makes it perfect for developers who are familiar with JavaScript.
It's also open source and can be self-hosted.

I will walk you through how to setup a Strapi project and create a simple e-commerce app with it, I promise you it will be ready in minutes !

How to Get Started with Strapi

Creating a new project

To create a new blank project we can use the following command in the terminal

npx create-strapi-app project-name --quickstart

--quickstart means that we will use a blank project, but you can use a template instead which will come with
pre-defined configurations and setup

After the installation is finished we'll move into the project directory

cd project-name

and then we'll start the project with the following command

yarn develop

The dashboard will open in the browser and the registration page will appear so you can
create the Admin account

After you register you will be greeted with the dashboard, it has a Users collection created for us,
this allows for authentication using JWT, which is provided by strapi by default, pretty cool right !

Creating a collection

To create a collection we'll use the content types builder, and we will press on the Create new collection type
a modal will popup for us to choose the name of the collection type, I will call it Products.

Now we can add the fields we need, we'll need a name for the product, an id, a price and a description,
we'll keep it simple.

Those are the different field types we can choose from

After we are done with creating the fields we can save and the dashboard will update with the new collection type products,
I populated the table with one product.

Setting up the APIs

After we created the collection types product the rest APIs will also be created for us, Strapi will provide us with the
GET,POST,PUT,DELETE routes for products as such

/products //to get all the products or add a product 

/products/:id // to get one product or delete or update

To be able to use those APIs we'll have to make them public, they are made private by default which is exaclty what we need
since we only want the find and findone APIs to be public.

To do that we'll have to navigate to

settings > USERS & PERMISSIONS PLUGIN > Roles > Public

And we'll set find and findone as such

save and then we try to use them and we get the following responses in JSON format

// find all : localhost:1337/products
[{
    "id":1,
    "name":"T-shirt",
    "description":"A unique and special T-shirt",
    "price":70,
    "published_at":"2021-06-13T16:22:02.560Z",
    "created_at":"2021-06-13T16:21:58.801Z",
    "updated_at":"2021-06-13T16:22:02.573Z"
}]

// find one : localhost:1337/products/1
{
    "id":1,
    "name":"T-shirt",
    "description":"A unique and special T-shirt",
    "price":70,
    "published_at":"2021-06-13T16:22:02.560Z",
    "created_at":"2021-06-13T16:21:58.801Z",
    "updated_at":"2021-06-13T16:22:02.573Z"
}

Congrats we have setup a backend with an admin panel for our app now !

I have personally used Strapi in a lot of my projects, it's a solid CMS and if you dig deep enough you can build anything with it,
we can add custom plugins that we create with nodejs and react, also add hooks, integrate authorizations from different platforms (google,facebook...) and integrate different databases.

In this blog post I only scratched the surface of the capabilities that Strapi has, if you want to dig deeper check the official website here

Using react hooks

Bassel Kanso — Sun, 11 Jul 2021 09:57:31 +0000

What are react hooks ?

Hooks were added to React 16.8, they allow us to use state and
the other lifecycle methods without writing a class,
they make it possible to only use functional components.

You might ask, "why use hooks in the first place if they are just replacements to functionalities
that we already had while using class components !", but that is not the case, Hooks come with lot's of
improvements over the lifecycle methods used in class components.

React Hooks allow us to address cross-cutting concerns in a much more elegant way than the previous patterns
such as higher-order components
and render props.
Functionalities such as logging and authentication are not component-specific and React Hooks allow us to attach this type of reusable behavior to components.

In this blog post I will show you how to use the two most important hooks (useState and useEffect)
that you will need to build your classless react app, I will demonstrate by building a random joke generator using
this public api

api: https://v2.jokeapi.dev/joke/Any

useState

This method allows us to use state in our functional components,
it return an array with a state and a method to change that state

const [state,setState] = useState(); 
// state will have the initial state in this case undefined
// setState is the function that we can use to update the state

To update the state

setState("words") 
// you would use it as such, 
//the parameter takes in the value you want to update the state with

In our app we'll use the basic setup that comes with create-react-app
and update it as follows

import {useState} from 'react';
import './App.css';

function App() {
    //we created a state joke that is intialized with a string value for now
    const [joke,setJoke] = useState("There are only 10 kinds of people in this world: those who know binary and those who don't.")

    return (
        <div className="App">
        <header className="App-header">
            <h3>{joke}</h3>
        </header>
        </div>
    );
}

export default App;

Now our app looks like this !🤘

(I have to say that's a funny joke)

useEffect

React Hooks introduces the useEffect() method to replace
a class component’s lifecycle methods componentDidMount, componentDidUpdate, and componentWillUnmount.
The method also allows side effects in your functional component,
such as changing content in the document object model and fetching data.
useEffect() will run after every component render.

From Reacts documentation

useEffect Accepts a function that contains imperative, possibly effectful code.

Mutations, subscriptions, timers, logging, and other side effects are not allowed
inside the main body of a function component (referred to as React’s render phase).
Doing so will lead to confusing bugs and inconsistencies in the UI.

Instead, use useEffect. The function passed to useEffect will run after the render
is committed to the screen. Think of effects as an escape hatch from React’s purely
functional world into the imperative world.

By default, effects run after every completed render,
but you can choose to fire them only when certain values have changed.

That is a lot to take in !

I'll start by explaining what is effectful code ? !

effectful code is code that affects something outside of the scope of the function
that is being excuted, also known as side effects

Side effects can be observed in such events:

Modifying a global variable
Modifying local scope, such as assigning to a variable
Modifying memory in-place, such as assigning to an object property or pushing to an array
Making network requests
Printing to the terminal
Modifying the DOM tree

//Example
useEffect(()=>{
    fetchData() // making a network request
    //eveythig inside this function will be called on every render
    //fetchData() will be called everytime the component re-renders
})

useEffect takes a dependencies array as a second parameter,
this will allow us to make it run only when we want it to.

In our Jokes app we want to use the random jokes api to update the state on every render.
To do that we'll use the useEffect() method and the setJoke() method that we got from useState()

import {useState, useEffect} from 'react';
import './App.css';

function App() {

    const [joke,setJoke] = useState("")

    useEffect(()=>{
        getRandomJoke();
    })

    //fetching the data and setting and updating state
    const getRandomJoke = async () => {
        const response = await fetch("https://v2.jokeapi.dev/joke/Any?type=single");
        const result = await response.json();
        if(!result.error){
            setJoke(result.joke);
        }
    }

    return (
        <div className="App">
        <header className="App-header">
            <h3>{joke}</h3>
        </header>
        </div>
    );
}

export default App;

Interesting it looks like the joke is changing ! But it doesn't stop !

The useEffect() method is running every single time the joke state is changing, this makes it run
in an infinite loop !

To fix that we will use the dependencies array, we want it to run only on the first render
so we will pass an empty array like such

useEffect(()=>{
    getRandomJoke();
},[]) //passed an empty array []

(Enjoy the joke !)

This fixes it, now it runs only on the first render !

Kudos for reaching till the end 👍 !

There are a lot more information to be covered, but I'll keep them for another time (another blog post)

Check out the offical documentation

You can find the github repo of for the random joke generator here

Build a todo app with React-Query

Bassel Kanso — Sun, 11 Jul 2021 09:48:05 +0000

What is React-Query ?

from the React-Query website we can find this explanation

React Query is often described as the missing data-fetching library for React,
but in more technical terms, it makes fetching, caching, synchronizing and updating
server state in your React applications a breeze.

so basically react-query is a library that provides us by default with most of the functionalities that we would need to use
while fetching data from the server, things like caching, re-fetching automatically and synchronizing the fetched data across the app

I will demonstrate the benefits of this library by building a simple todo application that fetches and updates data on the server,
I will also provide code examples to showcase the difference between using react-query and not using it!

Todo App

First let's start by installing react-query in our react app, to do that we'll run

yarn add react-query

 npm install react-query

To setup react-query we'll have to wrap our App component with a Query provider just like so:

import {
  QueryClient,
  QueryClientProvider,
} from "react-query";

const queryClient = new QueryClient();


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

this will allow us to use the query client in all the child components of the App component which pretty much is our whole app

so let's try fetching our todos, we'll do so in two methods one with react-query and one without react-query

1. without react-query

const [data,setData] = useState([]); //state to hold our fetched data

useEffect(()=>{
    fetchTodos();
})

const fetchTodos = async () => {
   const todos = await getTodos(); //getTodos is an asynchronous function I created that fetches the todos for us and returns a promise
   setData(todos); // setting the data in the state
}

return (
    <div className="App">
      <header>
        <h1>Todos</h1>
      </header>
      <AddTodo />
      {data.map((todo) => (
        <Todo key={todo.id} text={todo.text} isDone={todo.is_done} id={todo.id} /> //component that presents the todos will get into it later
      ))}
    </div>
  );

that's the traditional basic way of doing it, you fetch the data update the state with the fetched data and to do that we use hooks
such as useState and useEffect

2. with react-query

import { useQuery } from "react-query";

import Todo from "./components/Todo";
import AddTodo from "./components/AddTodo";

import { getTodos } from "./apis";

function App() {
  const { isLoading, isError, data, error } = useQuery("todos", getTodos); // a hook provided by react-query, it takes a key(name) and function that returns a promise

  if (isLoading)
    return (
      <div className="App">
        <h1>isLoading...</h1>
      </div>
    );

  if (isError)
    return (
      <div className="App">
        <h1>{error}</h1>
      </div>
    );

  return (
    <div className="App">
      <header>
        <h1>Todos</h1>
      </header>
      <AddTodo />
      {data.map((todo) => (
        <Todo key={todo.id} text={todo.text} isDone={todo.is_done} id={todo.id} />
      ))}
    </div>
  );
}

export default App;

Here I used the useQuery hook, it takes a unique key as q first paremeter (you can name it whatever you want)
and an asynchronous function as the second paremeter in this case it's a function that fetches the todos from the server.

what's interesting here is what useQuery returns, it returns an object that contains the life cycle of fetching data, it returns a booledan isLoading
which is true incase the the fetching process is still on going, it also gives a an isError boolean which is true incase an error occurs, and also it returns
data which contains the data returned from the server and error incase an error occurs.

no useState, no useEffect, and most importantly it handles all the cases (loading, error and success),
and also it caches the data so it doesn't re-fetch if the data was just recently fetched

updating server data is one of the main points where react-query shines, it almost gives the illusion of being realtime,
so let's see how we can add todos to our list

import { useState } from "react";

import { useMutation, useQueryClient } from "react-query";

import { addTodo } from "../apis";

export default function AddTodo() {
  const [todo, setTodo] = useState("");

  const queryClient = useQueryClient();

  const mutation = useMutation(addTodo, {
    onSuccess: () => {
      // Invalidate and refetch
      setTodo("")
      queryClient.invalidateQueries("todos");
    },
  });

  return (
    <div>
      <input
        value={todo}
        onChange={(event) => {
          setTodo(event.target.value);
        }}
        type="text"
      />
      <button
        onClick={() => {
          mutation.mutate(todo);
        }}
      >
        Add
      </button>
    </div>
  );
}

using the useQueryClient and useMutation hooks we can update our data on the server and re-fetch if the update was successful,
as you can see useMutation return a mutation object that has a mutate method, the mutate method takes the parameters that addTodo function needs,
we can also pass on an onSuccess method which allows us in this case to tell the query client to re-fetch the todos so the update happens immediately.

Conclusion

React-Query is a great library for fetching data, it gives us the tools necessary so that we can avoid all the repetitive tasks that we would otherwise have to do
ourselves to achieve the same result.

I only touched breifly as an introduction to react-query but there is a lot more to explore in the library, so I urge you to go check it out and explore all the other functionalities
that I didn't explain.

As for the todo app, I have it completed with more functionalities like checking the todo and deleting todos on my github repo, so go check it out as well ===> laughing-computing-machine
(I know! I like to use weird names for my repos 😉 )

Create your first neural network with Javascript

Bassel Kanso — Sun, 11 Jul 2021 09:41:39 +0000

A neural network is a series of algorithms that endeavors to recognize underlying relationships in a set of data through a process that mimics the way the human brain operates. In this sense, neural networks refer to systems of neurons, either organic or artificial in nature.

This is an explanation for what a "neural network" means from investopedia, so really the neural network is like a mapping of how the human brain learns and we try to apply it to machines with machine learning.

We probably all have heard about doing machine learning or deep learning in python, it's the fancy language of AI, it's a powerful language and it's backed with a huge community of researchers and developers on the subject but as a software developer who uses JavaScript as his main gun I want to show you how we can build a neural network with Brain.js a library that makes ML a walk in the park.

// provide optional config object (or undefined). Defaults shown.
const config = {
  binaryThresh: 0.5,
  hiddenLayers: [3],
  activation: 'sigmoid',
};

const net = new brain.NeuralNetwork(config);

And... This is it !! we created our first neural network in one statement, I don't think it could have been any easier, so what exactly happened now, so as you can see "brain" provides us with a method that allows us to create a neural network with certain configs passed in the arguments.

now creating the neural network is fun and all but in it's current state it's just as stupid as it can be, it understands nothing at all just like an infant, and just like a baby it will learn by trying things out, so let's train it shall we

net.train([
  {
    input: [0, 0],
    output: [0],
  },
  {
    input: [0, 1],
    output: [1],
  },
  {
    input: [1, 0],
    output: [1],
  },
  {
    input: [1, 1],
    output: [0],
  },
]);

So Brain.js provides us with another method for the neural network "train" this allows us to train our neural network by passing an array of data containing the inputs and outputs of each example, in this case we are training it to understand XOR functions, and that's how the neural network for this example can be represented

we have an input layer that takes two inputs and those would be the 1s and 0s in our example and they pass to the hidden layer that contains neurons and this is where the magic happens and finally it goes to the output layer.

So how does it exactly train ?

Well in the training process a several number of iterations occur that train the neural network with the data we provided, in the first iteration it takes the inputs and produces a result any result it will be completely random at first and and this step is called "forward propagation"

the outcome of the first iteration well probably be way off the mark and that's were the error difference gets calculated and well here a little bit of math happens and adjustments to the neurons in the hidden layer that allows it to produce different results in the next iteration and this step is called "back propagation".

several iterations happen after that and it only stops when the error threshold is met (you can configure this yourself it's usually something like "0.003") or when 20k iterations occur (this is by default in brain.js but you can configure it as well)

Finally we want to run this to make sure it works

const output = net.run([1, 0]); // [0.987]

as we can see when it gets 1 and 0 inputs it gives 0.987 estimate which is basically saying it's 98.7% sure the result is a "1" which is correct !!

We can finally celebrate and enjoy the fact that we just created our first AI that understands XOR (Just XOR though) !!