SAP Hybris Commerce - Curso de desenvolvimento Front End

Name: SAP Hybris Commerce - Curso de desenvolvimento Front End
Rating: 5.0 (2 reviews)

Domine o Front End com SAP Hybris: Crie interfaces dinâmicas, acessíveis e otimizadas para e-commerce de alta performanc

Created byRodrigo Shiomi Shirota

Last updated 7/2024

Portuguese

What you'll learn

Aprender conceitos básico do Sap Hybris Commerce
Como fazer o front end de um ecommerce
Como criar cms components
Como fazer aplicações com alta performance

Course content

5 sections • 14 lectures • 59m total length

Introdução1:50
Introdução ao SAP Hybris Commerce
SAP Hybris Commerce é uma plataforma de comércio eletrônico robusta e flexível desenvolvida pela SAP, uma das maiores empresas de software do mundo. Ela oferece uma solução completa para gerenciar operações de e-commerce, incluindo gestão de produtos, pedidos, clientes e promoções. A plataforma é amplamente utilizada por empresas que buscam uma solução escalável e personalizável para suas necessidades de comércio eletrônico.
Desenvolvimento Front-End com SAP Hybris
O desenvolvimento front-end em SAP Hybris envolve a criação e personalização da interface do usuário que interage com a plataforma de e-commerce. Aqui estão alguns dos principais componentes e tecnologias que você encontrará:
SmartEdit:
Uma ferramenta WYSIWYG (What You See Is What You Get) que permite aos usuários empresariais editar e personalizar o conteúdo da loja online de forma intuitiva.
Accelerators:
SAP Hybris fornece aceleradores, que são pacotes de referência pré-construídos para diferentes indústrias (como B2C e B2B). Eles incluem templates, componentes e fluxos de trabalho que podem ser customizados.
Tecnologias de Front-End:
HTML/CSS: A estrutura básica da interface de usuário é construída usando HTML e CSS.
JavaScript: Utilizado para adicionar interatividade e dinamismo à interface. Frameworks como AngularJS e React podem ser integrados.
jQuery: Muitas vezes usado para simplificar o desenvolvimento JavaScript, embora frameworks modernos estejam substituindo jQuery em muitos projetos.
Bootstrap: Utilizado para criar layouts responsivos e estilizar componentes de interface.

AddOns e Extensions:
AddOns: Pacotes que adicionam funcionalidades específicas ao storefront.
Extensions: Módulos de código que estendem a funcionalidade da plataforma Hybris, podendo incluir tanto back-end quanto front-end.
Passos Iniciais no Desenvolvimento Front-End com SAP Hybris
Configuração do Ambiente de Desenvolvimento:
Instale o SAP Commerce Cloud (Hybris).
Configure o ambiente local, incluindo o servidor de aplicação (Tomcat) e o banco de dados.
Entendimento da Estrutura do Projeto:
Familiarize-se com a estrutura de diretórios do projeto Hybris, especialmente as pastas relacionadas ao front-end, como custom, bin, config, etc.
Customização do Storefront:
Comece personalizando um dos aceleradores fornecidos. Isso pode envolver a modificação de templates JSP/Thymeleaf, arquivos CSS e scripts JavaScript.
Uso do SmartEdit:
Utilize o SmartEdit para modificar e pré-visualizar mudanças no storefront sem a necessidade de alterar diretamente o código fonte.
Integração com Back-End:
Desenvolva componentes que interajam com os serviços back-end de Hybris para exibir dados dinâmicos, como produtos, preços e promoções.
Recursos de Aprendizado
Documentação Oficial: A documentação da SAP é um recurso crucial para entender as funcionalidades e APIs da plataforma.

Comunidades e Fóruns: Participar de comunidades como SAP Community Network (SCN) pode fornecer suporte e insights de outros desenvolvedores.
Com essas informações, você terá uma base sólida para começar seu curso de desenvolvimento front-end com SAP Hybris Commerce. Boa sorte!

Instalando o Grunt2:28
Aula: Utilizando Tarefas sync, less e watch com Grunt
Objetivo
Nesta aula, vamos aprender como usar as tarefas sync, less e watch no Grunt para otimizar o fluxo de trabalho de desenvolvimento.
Tarefa sync
A tarefa sync é usada para copiar arquivos de um diretório para outro, garantindo que os arquivos no diretório de destino estejam sempre sincronizados com os arquivos no diretório de origem. É útil para mover arquivos estáticos como imagens, fontes e outros ativos durante o processo de build.

Tarefa less
A tarefa less é usada para compilar arquivos .less em .css. LESS é um pré-processador CSS que permite usar variáveis, aninhamento, mixins e outras funcionalidades que tornam o CSS mais fácil de manter e reutilizar.

Tarefa watch
A tarefa watch monitora mudanças em arquivos e executa automaticamente outras tarefas quando esses arquivos são modificados. Isso é extremamente útil para desenvolvimento contínuo, onde você deseja compilar, minificar ou sincronizar arquivos sempre que eles mudarem.

Configuração Completa (OBS: este é um exemplo simples, na aula a implementação é diferente)
Aqui está um exemplo completo do Gruntfile.js com todas as tarefas (sync, less e watch) configuradas:
javascriptCopiar códigomodule.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

// Configuração da tarefa sync
sync: {
main: {
files: [{
cwd: 'src/assets',
src: '**',
dest: 'dist/assets',
}],
verbose: true
}
},

// Configuração da tarefa less
less: {
development: {
options: {
paths: ['src/less']
},
files: {
'dist/css/styles.css': 'src/less/styles.less'
}
}
},

// Configuração da tarefa watch
watch: {
scripts: {
files: ['src/js/**/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
},
},
styles: {
files: ['src/less/**/*.less'],
tasks: ['less'],
options: {
spawn: false,
},
},
assets: {
files: ['src/assets/**'],
tasks: ['sync'],
options: {
spawn: false,
},
}
},

// Outras tarefas (concat e uglify, por exemplo)
concat: {
options: {
separator: ';',
},
dist: {
src: ['src/js/*.js'],
dest: 'dist/js/bundle.js',
},
},

uglify: {
dist: {
files: {
'dist/js/bundle.min.js': ['<%= concat.dist.dest %>']
}
}
}
});

// Carregando os plugins necessários
grunt.loadNpmTasks('grunt-sync');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');

// Registrando tarefas padrão
grunt.registerTask('default', ['sync', 'less', 'concat', 'uglify', 'watch']);
};

Conclusão
Nesta aula, aprendemos sobre três tarefas importantes no Grunt: sync, less e watch. Vimos como cada uma delas pode ajudar a automatizar diferentes partes do fluxo de trabalho de desenvolvimento, tornando o processo mais eficiente e produtivo. Ao configurar corretamente essas tarefas, você pode garantir que seu projeto esteja sempre atualizado e pronto para ser usado ou distribuído.

Requirements

Conhecimento em HTML, CSS e javascript

Description

O curso SAP Hybris Commerce - Desenvolvimento Front End é uma oportunidade essencial para desenvolvedores que desejam se especializar na criação de interfaces de usuário dinâmicas e eficientes para plataformas de e-commerce. Durante o curso, os participantes aprendem a utilizar o SAP Hybris, uma das principais soluções de comércio eletrônico do mercado, focando nas técnicas e ferramentas necessárias para o desenvolvimento front end.

Os tópicos abordados incluem a estrutura e arquitetura do SAP Hybris, conceitos de design responsivo. Os alunos são capacitados a criar experiências de usuário intuitivas e envolventes, utilizando HTML5, CSS3, JavaScript e outras tecnologias de ponta.

O curso também enfatiza práticas recomendadas para otimização de desempenho , garantindo que os sites desenvolvidos sejam rápidos, acessíveis e compatíveis com diversos dispositivos. Os participantes aprendem a escrever código performático, seguindo princípios de eficiência e boas práticas de desenvolvimento para garantir que as aplicações funcionem de maneira suave e responsiva, mesmo sob alta demanda.

Ao concluir o curso, os participantes terão adquirido habilidades práticas e conhecimentos teóricos que os capacitam a contribuir efetivamente para projetos de desenvolvimento de comércio eletrônico, garantindo uma experiência de compra superior para os usuários finais. Este curso é ideal para desenvolvedores que buscam aprimorar suas competências e se destacar no competitivo mercado de tecnologia e e-commerce.

Who this course is for:

Desenvolvedores que queiram aprender como fazer front end usando SAP Hybris

SAP Hybris Commerce - Curso de desenvolvimento Front End

What you'll learn

Explore related topics

Course content

Introdução1 lecture • 2min

Configuração do Ambiente de Desenvolvimento1 lecture • 1min

Instalando grunt, automatizador de tarefas1 lecture • 2min

Conceitos fundamentais para desenvolver no SAP Hybris6 lectures • 31min

Criação de uma homepage5 lectures • 22min

Requirements

Description

Who this course is for: