Code Monkey home page Code Monkey logo

parederia-maker's Introduction

Build Status Dependency Status License

Parederia Maker

Parederia logo

Simples ambiente da parederia para criação de paredes, sinta-se a vontade para dar vida a sua parede.

Com alguns cliques você estiliza sua parede com quadros belíssimos e tem uma ótima visualização de como vai ficar.

Uma vez publicada a sua parede, acompanhe seu pedido através do maker.

Instalação

Antes de baixar o projeto crie seu db no firebase na internet existem inúmeros artigos não se reprima.

Será necessário instalar node e o npm, siga instruções nesse link de acordo com o sistema operação que você está utilizando.

Certifique-se também que tenha o angular-cli instalado. Caso contrário:

$ npm i -g @angular/cli
$ git clone https://github.com/murilobsd/parederia-maker
$ cd parederia-maker/
$ npm i

ou via packge (não existe ainda):

$ npm install [email protected]

Rodando localmente

Depois de instalado para desenvolver localmente.

$ ng serve

Acesse pelo seu navegador: http://localhost:4200

Produção

Caso queira usar em produção sugerimos fazer o hosting no firebase, porque já tem os arquivos configurados caso contrário basta pegar os arquivos gerados dentro da pasta dist/<nome_projeto>.

$ npm i -g firebase-tools
$ firebase login
$ ng build --prod
$ firebase deploy

Contribuir

Autor

Toda idéia e layout foi matutada pelo Sir. Mazza

parederia-maker's People

Contributors

murilobsd avatar

Watchers

 avatar  avatar  avatar

Forkers

mazzazzam

parederia-maker's Issues

Menu Quadro

O quadro possui um menu para definir propriedades como por exemplo:

  • Orientação
  • Cor
  • Foto
  • Exclusão

Aplicar Quadro

O quadro é a unidade básica da parede, possuem formatos pré definidos, ou seja, altura e largura o usuário não pode alterar, porém propriedades como cor, imagem de fundo, e orientação podem ser alteradas pelo usuário. O quadro deve existir somente se uma parede existir.

Um item importantíssimo é que quando adicionado uma imagem ao quadro a mesma deve obedecer as medidas do quadro, porém o usuário poderá movimentar essa imagem para posicioná-la no mesmo.

Regras de conduta

  • Quadro pode ou não ter uma imagem, mas somente uma imagem é permitida;
  • Quadro deve possuir uma cor inicial;
  • Quadro não pode ser redimensionado;
  • Quadro não pode sair do contorno da parede;
  • Quadro pode somente receber uma única cor de cada vez;
  • Quadro só deve receber cores pré determinadas;
  • Quadro pode ser removido a hora que quiser;
  • Quadro deve permitir o posicionamento da imagem pelo usuário, obedecendo ao ratio.

Propriedades

Nome Unidade Observações
Altura number Altura da parede
Largura number Largura da parede
Cor hexa Cor de fundo da parede
P0 number Posição topo esquero da parede
P1 number Posição topo direito da parede
P3 number Posição inferior esquero da parede
P4 number Posição inferior direito da parede
Imagem blob Imagem adicionado pelo usuário
Preco number Preco da quadro
Orientacao string Orientação da quadro (paisagem ou retrato)

Métodos

Nome Observações
Arrastar Função para movimentar a parede
Alterar Cor Função para alterar a cor
Adicionar Imagem Adicionar imagem ao quadro
Remover Imagem Remover imagem do quadro
Alterar Imagem Alterar imagem do quadro
Alterar Orientação Toogle

Pagamento

Uma vez que o usuário criou sua parede ele pode realizar o pagamento da mesma, para isso o ambiente utilizará de um serviço de terceiro como é o caso da loja virtual hoje! Por questões de compatibilidade será mantido a mesma empresa Paypal para realizar as cobranças.

Como hoje o usuário simplesmente se autentica via oauth, ou simplesmente definindo um e-mail e senha; se faz necessário ter um formulário para o cálculo de frete. Logo antes de redirecionar o usuário para o paypal o ambiente deve checar se o usuário já preencheu o formulário com as informações do endereço de entrega, caso não tenha sido preenchido o usuário deve ser informado e automaticamente atualizado o valor final do pedido.

Regras de conduta

  • Usuário deve estar autenticado
  • Usuário deve possuir ao menos um endereço de entrega
  • Usuário deve clicar no botão para realizar o pedido

Bug ao adicionar +4 quadros

Tá rolando alguma zica ao adicionar uma quantidade maior que 4 quadros. Eles não adicionam no canvas e trava todo o posicionamento, inclusive dando um "reset" nas posições dos quadros já adicionados e posicionados anteriormente.

Note: Pelo console, não retorna nenhum erro a respeito, inclusive pelo console ele notifica que foi inserido um novo quadro, porém não é exibido.

Criação da parede

Introdução

A parede é a base do ambiente, o usuário deve conseguir adicionar quadros nela, movimentar a parede para que fique melhor visualizado na tela, redimensioná-la tanto para cima/baixo e para os lados, salvar o trabalho atual e trocar as cores, para o usuário ter uma noção real de dimensionamento da parede deverá ser apresentado a altura e largura em uma únidade familiar para o ser humano como por exemplo centímetros (cm).

Propriedades

Nome Unidade Observações
Altura px Altura da parede
Largura px Largura da parede
Cor hexa Cor de fundo da parede
P0 px Posição topo esquero da parede
P1 px Posição topo direito da parede
P3 px Posição inferior esquero da parede
P4 px Posição inferior direito da parede

Métodos

Nome Observações
Redimensionar Função de redimensionamento da parede
Arrastar Função para movimentar a parede
Alterar Cor Função para alterar a cor
Calcular Cm Função para calcular unidade em cm
Salvar Função responsável por salvar a parede atual no db

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.