React + Vite + TypeScript - L2JLeozWeb

[Leonardo Alves ツ]

SAUDAÇÕES A TODOS.

ESTOU AQUI COM OBJETIVO DE APRESENTAR O MEU PROJETO WEB PARA L2J QUE IREI POSTA-LO FREE.

É UM SITE BEM SIMPLES, LEVE E COM BOM DESEMPENHO.

USANDO AS FERRAMENTAS DO REACT, ESTAMOS TRABALHANDO COM.

FONTAWESOME -> PARA MELHORES INTERAÇÕES COM ICONES DO ELEMENTO <I> HTML.

SPRING -> PARA PEQUENAS ANIMAÇÕES.

AXIOS -> PARA MELHORES CONEXÕES ENTRE FRONT-END E BACKEND (RESGATANDO, ENVIANDO, EDITANDO INFORMAÇÕES) PARA O BANCO DE DADOS.

FORMIK -> EM ANALISE PARA ENVIO DE FORMULÁRIOS (COMO POR EXEMPLO PÁGINA DE CADASTRO).

QUANTIDADE DE PÁGINAS - 

- HOME [COM-SUB-MENUS > RANKING-STAFF] (50%).

*Estatísticas PVP/PK. (100%). - REMOVIDO ALGUNS RANKINGS.

- INFORMAÇÕES [COM-SUB-MENUS > RATES-EVENTOS] (0%).

- CONTA [COM-SUB-MENUS > CRIAR CONTA-MUDAR SENHA] (0%).

* Criação de conta com cryptografia de ponta. (10%).

- DOWNLOADS [SEM-SUB-MENUS] (0%).

- <FOOTER> (97%).

< DOAÇÕES + VOTE + CRÉDITOS> 

</FOOTER>

ANDAMENTO DO PROJETO (LOADING22%).

OBJETIVO: APRESENTAR ALGO LIMPO, SEM GAMBIARRA, LEVE, PROTEGIDO E RESPONSIVO COM INTERAÇÕES ENTRE BACK-END E FRONT-END.

COMO EU NÃO TIVE MUITO INTERESSE DEMONSTRADO PELO CONTEÚDO E NEM INTERAÇÕES SERÁ POSTADO SOMENTE PARA RUS-ACIS 3.5.

PÁGINA HOME (OPÇÕES DE RANKING COM ATUALIZAÇÃO NO MESMO TEMPO DE ACESSO AO WEB).

INTEGRADO OPÇÃO PARA MOSTRAR TOTAL DE JOGADORES ONLINE JÁ FUNCIONAL.

INTEGRADO OPÇÃO DE VER SE O JOGADOR ESTÁ ONLINE PELO RANKING PVP.

ADICIONADO UM PEQUENO BANNER PARA OPÇÕES DE DOAÇÕES COM O OBJETIVO DE INTEGRAR ESSA LISTA DE DOAÇÕES DO BANCO DE DADOS POR UMA TABELA DONATE_ITEMS.

VISUALIZAÇÃO

 

 

 

ME PERDOEM A QUALIDADE RUIM DO PREVIEW.

Editado Domingo às 01:44 por Leonardo Alves ツ
Reconstrução geral do tópico.

[Leonardo Alves ツ]

Tópico atualizado meus queridos, devido a interação 0 eu fechei a minha enquete e resolvi trabalhar em cima da revisão que eu tenho disponível aqui no meu computador.
Ideias? Vamos esticar trabalhar juntos, colocar o conhecimento em prática e partilhar com os demais.

Estou aberto à críticas, sugestões, ajudas, ideias, tudo será bem vindo!
POIS ESTAMOS DE VOLTA!  

{HELLO WORLD}
 

[pioneer]

1 hora atrás, Leonardo Alves ツ disse:

Tópico atualizado meus queridos, devido a interação 0 eu fechei a minha enquete e resolvi trabalhar em cima da revisão que eu tenho disponível aqui no meu computador.
Ideias? Vamos esticar trabalhar juntos, colocar o conhecimento em prática e partilhar com os demais.

Estou aberto à críticas, sugestões, ajudas, ideias, tudo será bem vindo!
POIS ESTAMOS DE VOLTA!  

{HELLO WORLD}
 

Belo Trabalho @Leonardo Alves ツ . Parabéns.

Mas hoje vejo que o melhor caminho para quem não tem muito conhecimento é o wordpress, que tem seus inumeros defeitos mas é muito fácil de editar, tem um gerenciamento de  posts e cada site irá ter uma identidade diferente de servidor para servidor, por permitir uma edição super simples e rápida.

Acho que sites prontos sempre ficará mais do mesmo, todos os novos servidores irão utilizar o mesmo template, como acontece até hoje com os sites da atualstudio.

Uma ideia seria utilizar o seu esforço para criar plugins que integre wordpress+bd l2j(ranking,bosses, etc).

 

Desculpe, mas é só uma opnião.

 

 

 

Editado Setembro 10 por pioneer

[Leonardo Alves ツ]

24 minutos atrás, pioneer disse:

Belo Trabalho @Leonardo Alves ツ . Parabéns.

Mas hoje vejo que o melhor caminho para quem não tem muito conhecimento é o wordpress, que tem seus inumeros defeitos mas é muito fácil de editar, tem um gerenciamento de  posts e cada site irá ter uma identidade diferente de servidor para servidor, por permitir uma edição super simples e rápida.

Acho que sites prontos sempre ficará mais do mesmo, todos os novos servidores irão utilizar o mesmo template, como acontece até hoje com os sites da atualstudio.

Uma ideia seria utilizar o seu esforço para criar plugins que integre wordpress+bd l2j(ranking,bosses, etc).

Desculpe, mas é só uma opnião.

Obrigado meu amigo.

Sim wordpress é bastante usado, eu particularmente não conheço na pratica só conheço wix e shopify.
Porém eu não gosto muito porque você não tem total controle sobre o sistema completo.
Eu estou fazendo tudo do zero em react usando as bibliotecas citadas no tópico já está integrado o sistema top 5 de pvp e pk, e fiz agorinha um listem para boss listando apenas alguns nomes escolhidos.
Porque a forma que eu coloco para rodar os servidores é MSDOS são dois sitemas como se fosse login e game server, no mesmo estilo L2J. Veja:

Uma pergunta antes aqui, você diz para criar API's que façam com que o wordpress consiga ler os rankings de lineage 2? Eu não entendi muito bem essa parte.

Citar

Uma ideia seria utilizar o seu esforço para criar plugins que integre wordpress+bd l2j(ranking,bosses, etc).

1 - WEBSERVER

2 - BACKEND SERVER

3 - L2J

 

Requisição e resposta do servidor.

Editado Setembro 10 por Leonardo Alves ツ

[pioneer]

8 minutos atrás, Leonardo Alves ツ disse:

Obrigado meu amigo.

Sim wordpress é bastante usado, eu particularmente não conheço na pratica só conheço wix e shopify.
Porém eu não gosto muito porque você não tem total controle sobre o sistema completo.
Eu estou fazendo tudo do zero em react usando as bibliotecas citadas no tópico já está integrado o sistema top 5 de pvp e pk, e fiz agorinha um listem para boss listando apenas alguns nomes escolhidos.
Porque a forma que eu coloco para rodar os servidores é MSDOS são dois sitemas como se fosse login e game server, no mesmo estilo L2J. Veja:

Uma pergunta antes aqui, você diz para criar API's que façam com que o wordpress consiga ler os rankings de lineage 2? Eu não entendi muito bem essa parte.

Requisição e resposta do servidor.

 

O back esta ficando perfeito nessa estrutura que está fazendo, mas para iniciantes isso pouco importa.

O wordpress+elementor é legal pois consegue ter design diferentes e customizaveis.

Da forma que está fazendo fica limitado o design, não conseguindo ser um projeto bem customizavel e fácil de alterar.

Não curto wordpress, mas hoje é a melhor opção para projetos bonitos e rápidos de serem criados.

 

 

Sobre os plugins(api), o wordpress disponibiliza plugins para integrações(facebook, google por exemplo.

O legal seria criar plugins para buscar as informações de Server Online, Rankings e criações de conta por exemplo.

 

Com um plugin criado e disponibilizado para todos, qualquer um consegue parametrizar uma conexão WORDPRESS->BANCO SERVIDOR.

Acredito que isso seria uma revolução aqui no forúm.

 

 

 

Editado Setembro 10 por pioneer

[Leonardo Alves ツ]

5 minutos atrás, pioneer disse:

Q-1: O back esta ficando perfeito nessa estrutura que está fazendo, mas para iniciantes isso pouco importa.

Q-2: O wordpress+elementor é legal pois consegue ter design diferentes e customizaveis.

Q-3: Da forma que está fazendo fica limitado o design, não conseguindo ser um projeto bem customizavel e fácil de alterar.

Q-4: Não curto wordpress, mas hoje é a melhor opção para projetos bonitos e rápidos de serem criados.

R-1: Muito obrigado.

R-2: Sim é realmente interessante ter design diferente e customizaveis.

R-3: Eu particularmente discordo com design limitado da forma que eu estou fazendo. Pois a forma que o typescript trabalha se você souber um html e css básico e conhecer o chatGPT você consegue muito bem alterar.
O que torna um projeto não wordpress 'bem customizavel e fácil de alterar' como você falou acredito que primeiramente seja a organização geral de todas as files para que possa ficar bem legível por qualquer pessoa que pretenda fazer algum tipo de mudança (estou procurando usar arquitetura MVC).
E principalmente o interesse da pessoa em ler um pouco de conteúdo buscar aprender o básico.

Q-4: Acredito que para um projeto bonito e rápido para ser usado hoje em dia só é possível por conta desse tipo de ferramentas e IA.

Porém não esqueça, elas são falhas, e com o tempo que você for usando você perceberá que muita coisa as vezes compensa você criar o código mais limpo do que confiar em uma máquina que junta pedacinhos de informações para poder te ajudar da melhor forma que consegue.

Se procurar até por questão de invasões web por promp com linux você verá que wordpress é bonito e rápido porém também é BEM VULNERÁVEL, infelizmente  .

[pioneer]

1 minuto atrás, Leonardo Alves ツ disse:

R-1: Muito obrigado.

R-2: Sim é realmente interessante ter design diferente e customizaveis.

R-3: Eu particularmente discordo com design limitado da forma que eu estou fazendo. Pois a forma que o typescript trabalha se você souber um html e css básico e conhecer o chatGPT você consegue muito bem alterar.
O que torna um projeto não wordpress 'bem customizavel e fácil de alterar' como você falou acredito que primeiramente seja a organização geral de todas as files para que possa ficar bem legível por qualquer pessoa que pretenda fazer algum tipo de mudança (estou procurando usar arquitetura MVC).
E principalmente o interesse da pessoa em ler um pouco de conteúdo buscar aprender o básico.

Q-4: Acredito que para um projeto bonito e rápido para ser usado hoje em dia só é possível por conta desse tipo de ferramentas e IA.

Porém não esqueça, elas são falhas, e com o tempo que você for usando você perceberá que muita coisa as vezes compensa você criar o código mais limpo do que confiar em uma máquina que junta pedacinhos de informações para poder te ajudar da melhor forma que consegue.

Se procurar até por questão de invasões web por promp com linux você verá que wordpress é bonito e rápido porém também é BEM VULNERÁVEL, infelizmente  .

Perfeito, wordpress é falho, por isso não gosto.

Mas falo que é mais fácil de editar por que é drag and drop, não tem programação.

[Leonardo Alves ツ]

7 horas atrás, pioneer disse:

Perfeito, wordpress é falho, por isso não gosto.

Mas falo que é mais fácil de editar por que é drag and drop, não tem programação.

Certo!

Estava vendo seu comentário anterior ali, no REACT.JS também podemos usar API's.

Agora disponibilizar uma API que faça um check em todos os bancos seria até interessante, mas precisa ser algo muito bem pensado porque.

Se você quer uma API que faça um check no banco de dados para todos obviamente ela terá como requisição para resposta as informações do host, como por exemplo:

ip, host, db, pass. Isso são informações super sigilosas e restritas, se minha API tiver como requisição esses dados, eles também serão manipulados por uma possível variável que provavelmente não é no .env, ou seja, mais uma possível falha de deixar os dados importantes visíveis e vulneráveis.

Na minha opinião isso seria a mesma coisa que sair de casa, fechar a porta e deixar a janela aberta com uma plaquinha escrito 'por aqui' para o ladrão.

Mas como duas mentes sempre pensam melhor que uma sozinha, quem sabe alguém que pense de uma outra forma consiga enxergar uma maneira de fazer um código desse mais seguro, mas como isso não é meu FOCO eu ainda não sei como fazer isso de forma segura e confiável, algo para ser discutido porque um projeto desse necessitamos uma equipe.

[GrupoBw]

Olá, vou tentar esclarecer mais sobre os pontos depois de ter lido tudo.

11 hours ago, pioneer said:

Acho que sites prontos sempre ficará mais do mesmo, todos os novos servidores irão utilizar o mesmo template, como acontece até hoje com os sites da atualstudio.

Eu compartilho da ideia dos sites serem um projeto único e exclusivo, afim de evitar um dos problemas atuais(para mim), onde todos servidores utilizam templates semelhantes ou idêntico, partindo de uma mesma source.

E porque os administradores escolhem usar esses sites prontos? Acredito que por três motivos:

• Não querem perder tempo programando um site do zero
• Não sabem programar na linguagem que está o template(php em sua maioria)
• Não sabem programar

E ai vem entra a questão do @pioneer, já que a maioria dos administradores vão optar por usar templates prontos, @Leonardo Alves ツ o seu projeto em React terá o mesmo problema inicial(servidores com sites iguais), pois os mesmos terão os três problemas citados acima.

E como mudar essa realidade? A sugestão do @pioneer, é ter plugins no Wordpress, como por exemplo:

• Listas de Rank X,Y,Z
• Status do Servidor
• Status do Boss
• ...etc

Com os plugins(Drag-and-drop), o administrador consegue criar o site em Wordpress, como quiser e de forma simples(Low-code), adicionando esses plugins como, onde e com o tema que quiser. Dessa forma cada servidor teria um site diferente, não tendo os problemas citados anteriormente.

Editado Setembro 10 por GrupoBw

[GrupoBw]

10 hours ago, pioneer said:

Sobre os plugins(api), o wordpress disponibiliza plugins para integrações(facebook, google por exemplo.

2 hours ago, Leonardo Alves ツ said:

Estava vendo seu comentário anterior ali, no REACT.JS também podemos usar API's.

Agora disponibilizar uma API que faça um check em todos os bancos seria até interessante, mas precisa ser algo muito bem pensado porque.

Se você quer uma API que faça um check no banco de dados para todos obviamente ela terá como requisição para resposta as informações do host, como por exemplo:

O exemplo que o @pioneer se refere sobre plugins com API, são de integração de 1:N e N:N, como ele mesmo deu de exemplo, Facebook.

Acredito que para o nosso caso, a integração seja 1:1, onde o plugin comunica somente com o servidor(DB). Então a conexão e chamadas no SQL poderiam ser feitas no lado do plugin(backend) mesmo, resolvendo também o problema de vulnerabilidade ao passar dados de conexão com o DB pela requisição a API.

Um breve contexto para quem estiver lendo o tópico e não entendeu sobre a comunicação entre sistemas:

• 1:1 - Um para Um
  • Você se comunica diretamente com outra entidade.
• 1:N - Um para Muitos
  • Você se comunica com várias entidades ao mesmo tempo.
• N:N - Muitos para Muitos
  • Muitas entidades se comunicam com muitas outras ao mesmo tempo(simultaneamente).

 

 

Editado Setembro 10 por GrupoBw

[Leonardo Alves ツ]

@GrupoBw Olá meu amigo.
Entendi sua opinião, muito obrigado pelo comentário.

Sobre a exposição de rankings ou qualquer tipo de conexão com banco de dados, eu disse que seria um sistema vulnerável trabalhando com variáveis (fora do .env) para manipular dados sigilosos mas me referindo a uma integração 1:N (1-backEnd, N-possibilidades de banco de dados).

Agora se o caso é uma API(backend) com a integração 1:1 isso já está sendo feito dessa forma, sendo assim quanto a isso não haverá problemas.
E a questão de vários servidores com um mesmo layout é COMPLICADO não vou comparar meu projeto desenvolvido do 0 com cada linha escrita manualmente com projetos WORDPRESS que tem essa facilidade de edição visual e funcionamento no geral porém lá com suas vantagens e desvantagens né, é um tema polêmico na minha opinião, eu particularmente não uso, não conheço muito bem, não tenho nada contra e também não recomendo.

Mas, no caso aqui não é um layout que seja modificável com poucos clicks e knowledge 0, isso infelizmente não será possível.
Mas eu posso garantir que é fácil realizar modificações simples e complexas (basta ter vontade e ler os documentos das bibliotecas utilizadas), também eu vou auxiliar alguns caminhos para quem tiver interesse. E por fim facilitar com coisas como nome, rates e algumas configurações tudo em variáveis bem visíveis.

 

[Nattan Felipe]

Que desenvolvimento bacana, @Leonardo Alves ツ

Obrigado pela contribuição na comunidade!

[Thanos]

Show!

É isso mesmo, continue compartilhando a evolução do projeto 

[bazookaRPM]

 

É difícil encontrar um emprego com tanta dedicação, é um projeto com bom futuro. tremenda contribuição

 

[Leonardo Alves ツ]

16 horas atrás, Nattan Felipe disse:

Que desenvolvimento bacana, @Leonardo Alves ツ

Obrigado pela contribuição na comunidade!

Obrigado meu amigo, parabéns para ti também pela hierarquia que alcançou no fórum.

16 horas atrás, Thanos disse:

Show!

É isso mesmo, continue compartilhando a evolução do projeto 

Logo voltaremos com atualizações.

14 horas atrás, bazookaRPM disse:

É difícil encontrar um emprego com tanta dedicação, é um projeto com bom futuro. tremenda contribuição

Concordo esse projeto é de excelente qualidade, só espero que o povo faça bom proveito.

 

[GrupoBw]

18 hours ago, Leonardo Alves ツ said:

@GrupoBw Olá meu amigo.
Entendi sua opinião, muito obrigado pelo comentário.

Sobre a exposição de rankings ou qualquer tipo de conexão com banco de dados, eu disse que seria um sistema vulnerável trabalhando com variáveis (fora do .env) para manipular dados sigilosos mas me referindo a uma integração 1:N (1-backEnd, N-possibilidades de banco de dados).

Agora se o caso é uma API(backend) com a integração 1:1 isso já está sendo feito dessa forma, sendo assim quanto a isso não haverá problemas.
E a questão de vários servidores com um mesmo layout é COMPLICADO não vou comparar meu projeto desenvolvido do 0 com cada linha escrita manualmente com projetos WORDPRESS que tem essa facilidade de edição visual e funcionamento no geral porém lá com suas vantagens e desvantagens né, é um tema polêmico na minha opinião, eu particularmente não uso, não conheço muito bem, não tenho nada contra e também não recomendo.

Mas, no caso aqui não é um layout que seja modificável com poucos clicks e knowledge 0, isso infelizmente não será possível.
Mas eu posso garantir que é fácil realizar modificações simples e complexas (basta ter vontade e ler os documentos das bibliotecas utilizadas), também eu vou auxiliar alguns caminhos para quem tiver interesse. E por fim facilitar com coisas como nome, rates e algumas configurações tudo em variáveis bem visíveis.

Sim, estou contigo nisso, o projeto está lindo e parabéns pela iniciativa.

Só tentei explanar mais sobre o contexto do que o @pioneer disse, nem foi para se alterar algo no projeto ou mudar a direção para Wordpress.

Tmj irmão, estarei no aguardo de novidades!

[ZNetworks]

Seria ótimo se fosse compatível com essência crônica

 

[DEVELOPGAMESDEV]

Em 09/09/2024 at 22:28, Leonardo Alves ツ disse:

Tópico atualizado meus queridos, devido a interação 0 eu fechei a minha enquete e resolvi trabalhar em cima da revisão que eu tenho disponível aqui no meu computador.
Ideias? Vamos esticar trabalhar juntos, colocar o conhecimento em prática e partilhar com os demais.

Estou aberto à críticas, sugestões, ajudas, ideias, tudo será bem vindo!
POIS ESTAMOS DE VOLTA!  

{HELLO WORLD}
 

Boa noite tudo bem brow, o projeto está bacana e tudo, poderia acrescentar 2 páginas ai a mais do lado de download uma de vote e a outra de donates, ia ficar bacana se  tivesse também!

[Leonardo Alves ツ]

22 horas atrás, ZNetworks disse:

Seria ótimo se fosse compatível com essência crônica

Não conheço essência crônica mas meu amigo veja só.
Isso será muito simples, a questão de adaptação será somente com o BACKEND, poucos arquivos e eu vou ensinar o que fazer e onde fazer.

Será somente modificar as query de como o banco de dados é lido pelo sistema, bem simples mesmo!

Quanto a isso fique tranquilo.

21 horas atrás, DEVELOPGAMESDEV disse:

Boa noite tudo bem brow, o projeto está bacana e tudo, poderia acrescentar 2 páginas ai a mais do lado de download uma de vote e a outra de donates, ia ficar bacana se  tivesse também!

Boa noite!
Muito obrigado, eu posso acrescentar sim as duas páginas.
Essa de vote irá ser includa no FOOTER, sendo assim um componente que aparecerá em todas as páginas do site.

Eu estive pesquisando aqui uma API para top200 ou até mesmo do l2jbrasil top mas acho que free não existe, porque a minha ideia foi integrar diretamente com API.

Abaixo de Vote no servidor ali a ideia é por o banner dos tops com o direcionamento para os links do vote.

Agora ali aonde está leoz1995 é integrado com API do gitHub e isso vem diretamente da minha conta gitHub que são referente aos créditos.
Posso adicionar o componente de doação ali invés de ser um menu junto com os itens lá em cima no header.
Pois assim eu obrigatóriamente tornaria a página de doações também um componente que será visível em todas as páginas sendo eles:
Doações, Vote, Créditos.

Enfim damos continuidade, obrigado pela sugestão.

Editado Setembro 12 por Leonardo Alves ツ
Adicionando imagem

[DEVELOPGAMESDEV]

55 minutos atrás, Leonardo Alves ツ disse:

Não conheço essência crônica mas meu amigo veja só.
Isso será muito simples, a questão de adaptação será somente com o BACKEND, poucos arquivos e eu vou ensinar o que fazer e onde fazer.

Será somente modificar as query de como o banco de dados é lido pelo sistema, bem simples mesmo!

Quanto a isso fique tranquilo.

Boa noite!
Muito obrigado, eu posso acrescentar sim as duas páginas.
Essa de vote irá ser includa no FOOTER, sendo assim um componente que aparecerá em todas as páginas do site.

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

Eu estive pesquisando aqui uma API para top200 ou até mesmo do l2jbrasil top mas acho que free não existe, porque a minha ideia foi integrar diretamente com API.

Abaixo de Vote no servidor ali a ideia é por o banner dos tops com o direcionamento para os links do vote.

Agora ali aonde está leoz1995 é integrado com API do gitHub e isso vem diretamente da minha conta gitHub que são referente aos créditos.
Posso adicionar o componente de doação ali invés de ser um menu junto com os itens lá em cima no header.
Pois assim eu obrigatóriamente tornaria a página de doações também um componente que será visível em todas as páginas sendo eles:
Doações, Vote, Créditos.

Enfim damos continuidade, obrigado pela sugestão.

Mano  boa noite ficou dahora viu agora sim parabens ai mano, vou testar viu!

[Leonardo Alves ツ]

4 horas atrás, DEVELOPGAMESDEV disse:

Mano  boa noite ficou dahora viu agora sim parabens ai mano, vou testar viu!

Ficarei super grato com sua ajuda em testes, eu estou aqui disponível para resolver todos os bugs que aparecerem e deixamos um web leve, protegido, fácil editar e com bom desempenho para que todos possamos utilizar.

 

Tópico atualizado com novas imagens e o andamento do projeto.

Muito obrigado por todos que estão ajudando com ideias e comentários, isso é muito importante para mim e para a qualidade do web sendo desenvolvido.