Giter Site home page Giter Site logo

caioaugustoo / pickpallet_api Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 43 KB

🎨 API desenvolvida para o projeto "PickPallet". Desenvolvida através do Wordpress com PHP

Home Page: https://caioohtml.com/pickpallet/json/api/pallets

PHP 99.56% CSS 0.44%
api pickpallet backend pallets php

pickpallet_api's Introduction

PickPallet

Web app que contém diversas paletas de cores desenvolvida especialmente para designers.

Sobre o PickPallet

Resumidamente, este projeto é um "clone" de ColorHunt. Ambas web app's possuem as mesmas intenções: reunir diversas paletas afim de ajudar designers e artistas. Qualquer usuário pode criar qualquer paleta, visualizar qualquer paleta, e até mesmo copiar o link da paleta através de um simples botão e copiar, também, cada cor de cada paleta, basta clicar no hexadecimal de cada cor.

A API

Esta foi descontinuada, por favor conferir a nova versão do projeto em https://github.com/CaioAugustoo/pickpallete_api

Esta API foi desenvolvida através do Wordpress. Caso você pretenda utilizá-la como seu tema, basta clonar este repositório e adicionar nos temas do Wordpress.

API desenvolvida para o projeto "PickPallet". Desenvolvida com PHP.

Você pode conferir o front-end da aplicação aqui.

Rotas

Métodos HTTPS disponíveis:

  • GET

    Por padrão o método é o GET. Este método lista, inicialmente, 18 paletas. Um pouco mais abaixo você pode conferir os parâmetros.

    Exemplo de um trecho de código utilizando o método GET:

     const fetchPallets = async () => {
       const response = await fetch(
         "https://caioohtml.com/pickpallet/json/api/pallets"
       );
       const json = await response.json();
       console.log(json);
     };
     fetchPallets();

    Como citado anteriormente, o método padrão é o GET, então não precisamos especificar o mesmo.

    Caso queira pegar uma paleta específica, você deve informar o ID da mesma. Exemplo:

      const fetchPallets = async () => {
        const response = await fetch(
          "https://caioohtml.com/pickpallet/json/api/pallets/102"
        );
        const json = await response.json();
        console.log(json);
      };
      fetchPallets();

    *PS: o tipo de dado esperado é de number. Qualquer outro tipo retornará a mensagem "No route was found matching the URL and request method."

    Retorna:

     {
       "id": 102,
       "created_at": "2021-01-25 09:11:08",
       "pallet1": "#4f4dff",
       "pallet2": "#01bc39",
       "pallet3": "#6aa300",
       "pallet4": "#fe3485"
      }

    onde:

    - id: número único identificador.
    - created_at: data de quando a paleta foi criada.
    - pallet1: string da primeira paleta.
    - pallet2: string da segunda paleta.
    - pallet3: string da terceira paleta.
    - pallet4: string da quarta paleta.
    
  • POST

    Para publicar uma nova paleta você deve enviar o método POST com o seguinte body/corpo:

    • pallet1: "#corPaleta1",
    • pallet2: "#corPaleta2",
    • pallet3: "#corPaleta3",
    • pallet4: "#corPaleta4"

    Deve respeitar o seguinte padrão de regex: /#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?\b/

    Exemplo de um trecho de código utilizando o método POST:

     const fetchPallets = async () => {
       const response = await fetch(
        "https://caioohtml.com/pickpallet/json/api/pallets",
         {
           method: "POST",
           headers: { 
             "Content-Type": "application/json",
           },
         },
         body: JSON.stringify({
           pallet1: "#00af91",
           pallet2: "#007965",
           pallet3: "#f58634",
           pallet4: "#ffcc29",
         }),
       }
     );
     const json = await response.json();
     console.log(json);  // 126
    };
    fetchPallets();

    Após o POST de uma nova paleta é retornado um ID da mesma criada (caso sucesso). No exemplo citado acima foi retornado o valor 126.

  • DELETE

    Este método consiste em deletar uma paleta específica. O mesmo só funcionará no modo local (caso você clone este repositório) e não afetará o projeto real. Para deletar uma paleta você deve informar o método DELETE e informar o ID da paleta que deseja deletar após o /pallets/ID-DA-PALETA-VAI-AQUI

    Exemplo de um trecho de código utilizando o método DELETE:

     const deletePalletById = async () => {
       const response = await fetch(
         "http://localhost:10004/json/api/pallets/356",
         {
           method: "DELETE",
           headers: {
             "Content-Type": "application/json",
           },
         },
       );
       const json = await response.json();
       console.log(json);
     };
    deletePalletById();

    Caso sucesso, retornará a seguinte mensagem: "Paleta deletada."

Parâmetros

Mensagens de erros

  • "Verifique se não deixou algum campo vazio ou não inseriu um hexadecimal incorreto."

    É retornado quando algum campo não foi preenchido corretamente. Verifique, também, se você utilizou headers (apenas para métodos POST e DELETE).

  • "Valor hexadecimal inválido."

    É retornado quando, ao adicionar uma nova paleta, não foi inserido corretamente o valor hexadecimal. Deve respeitar o seguinte padrão de regex: /#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?\b/

  • "Paleta não encontrada"

    É retornado quando a paleta não é encontrada, isso significa que ela ainda não existe. Verifique se o ID passado na url é válido.

  • "No route was found matching the URL and request method."

    É retornado quando a rota é inexistente. Verifique se inseriu corretamente a URL ou se passou um ID válido para uma paleta (caso esteja procurando por uma paleta específica).

Contribuições

Caso pretenda contribuir para este projeto, sinta-se livre para enviar pull request's. Caso tenha algum problema envie uma nova issue.

Licença

Copyright © 2021 Caio Augusto.

pickpallet_api's People

Contributors

caioaugustoo avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.