Aprende en Comunidad
Avalados por :
Como configurar o Visual Studio Code para desenvolver aplicativos UI5 da SAP
- Creado 01/03/2024
- Modificado 01/03/2024
- 6 Vistas
0
Cargando...
Last year around November, the free trial of SAP Web IDE was discontinued and developers were encouraged to start using SAP Business Application Studio (BAS). I set up the development environment on SAP BAS and migrated all my existing projects. However, I faced a lot of challenges with this new IDE. Then I came across Visual Studio Code which is widely used by developers across the globe. In this blog post for absolute beginners, I shall cover how to set up Visual Studio Code step by step and develop UI5 apps.
Visual Studio Code (VSCode) é um editor de código-fonte poderoso e leve disponível para Windows, macOS e Linux. Vem com suporte integrado para muitas linguagens como JavaScript, TypeScript, NodeJS, etc. Por estar instalado localmente em seu sistema, carrega rapidamente e os desenvolvedores podem se concentrar nos problemas em vez de se preocuparem com os erros.
Características:
Instalar Visual Studio Code
Você pode baixar e instalar o Visual Studio Code no seguinte URL:
https://code.visualstudio.com/
O Visual Studio Code usa muitos pacotes e módulos NodeJS, até mesmo para o desenvolvimento de UI da SAP, então recomendaria instalar o NodeJS junto com ele.
Você pode baixar e instalar o NodeJS no seguinte URL:
https://nodejs.org/en/
Instalar módulos Node
O Visual Studio Code usa vários módulos Node para executar o aplicativo UI5/Fiori.
Precisamos garantir que todos os módulos Node relevantes estejam instalados para executar nosso aplicativo.
Execute o seguinte comando no Terminal abaixo para instalar todos os módulos Node.
Esta é uma configuração única.
Abra o Visual Studio Code. Na aba esquerda, há um ícone chamado 'Extensões' (circulado em azul). Clique nele.
Você poderá ver todos os pacotes de extensões disponíveis para o VSCode.
Estaremos usando SAP Fiori Tools: uma extensão disponível para o SAP Business Application Studio e o Visual Studio Code que nos ajuda a desenvolver aplicativos UI5/Fiori.
Procure por fiori e instale os pacotes marcados em vermelho na imagem abaixo. Para instalar, clique no botão azul "Instalar". Como já está instalado no meu sistema, não é mostrado. Uma vez que um pacote esteja instalado, o botão "Instalar" desaparecerá.
Depois que todos os pacotes forem instalados corretamente, pressione Ctrl + Shift + P. Isso abrirá a Paleta de Comandos com a ajuda da qual você pode executar muitos comandos facilmente disponíveis.
Selecione Fiori: Abrir Gerador de Aplicativos
O Visual Studio Code possui muitos geradores que não são mais do que assistentes para criar seus aplicativos. Permita-me demonstrar como usá-lo.
A tela parecerá como mostrado abaixo. No início, você pode não ver nenhum gerador disponível. Precisamos instalar o gerador apropriado.
Visual Studio Code
Visual Studio Code (VSCode) é um editor de código-fonte poderoso e leve disponível para Windows, macOS e Linux. Vem com suporte integrado para muitas linguagens como JavaScript, TypeScript, NodeJS, etc. Por estar instalado localmente em seu sistema, carrega rapidamente e os desenvolvedores podem se concentrar nos problemas em vez de se preocuparem com os erros.
Características:
- Autocompletar código automaticamente com Intellisense
- Opções de depuração
- Funções de edição poderosas
- Navegação e refatoração de código
Passos para criar um aplicativo básico de UI5 usando o VSCode
Instalar Visual Studio Code
Você pode baixar e instalar o Visual Studio Code no seguinte URL:
https://code.visualstudio.com/
O Visual Studio Code usa muitos pacotes e módulos NodeJS, até mesmo para o desenvolvimento de UI da SAP, então recomendaria instalar o NodeJS junto com ele.
Você pode baixar e instalar o NodeJS no seguinte URL:
https://nodejs.org/en/
Instalar módulos Node
O Visual Studio Code usa vários módulos Node para executar o aplicativo UI5/Fiori.
Precisamos garantir que todos os módulos Node relevantes estejam instalados para executar nosso aplicativo.
Execute o seguinte comando no Terminal abaixo para instalar todos os módulos Node.
npm install Instalar extensões de UI5 e Fiori para o VSCode
Esta é uma configuração única.
Abra o Visual Studio Code. Na aba esquerda, há um ícone chamado 'Extensões' (circulado em azul). Clique nele.
Tela Inicial do VSCode
Você poderá ver todos os pacotes de extensões disponíveis para o VSCode.
Extensões
Estaremos usando SAP Fiori Tools: uma extensão disponível para o SAP Business Application Studio e o Visual Studio Code que nos ajuda a desenvolver aplicativos UI5/Fiori.
Procure por fiori e instale os pacotes marcados em vermelho na imagem abaixo. Para instalar, clique no botão azul "Instalar". Como já está instalado no meu sistema, não é mostrado. Uma vez que um pacote esteja instalado, o botão "Instalar" desaparecerá.
Extensões de Ferramentas SAP Fiori
Depois que todos os pacotes forem instalados corretamente, pressione Ctrl + Shift + P. Isso abrirá a Paleta de Comandos com a ajuda da qual você pode executar muitos comandos facilmente disponíveis.
Selecione Fiori: Abrir Gerador de Aplicativos
Abrir Gerador de Aplicativos
O Visual Studio Code possui muitos geradores que não são mais do que assistentes para criar seus aplicativos. Permita-me demonstrar como usá-lo.
A tela parecerá como mostrado abaixo. No início, você pode não ver nenhum gerador disponível. Precisamos instalar o gerador apropriado.
Pedro Pascal
Se unió el 07/03/2018
Facebook
Twitter
Pinterest
Telegram
Linkedin
Whatsapp
Sin respuestas
No hay respuestas para mostrar
Se el primero en responder
contacto@primeinstitute.com
(+51) 1641 9379
(+57) 1489 6964
© 2024 Copyright. Todos los derechos reservados.
Desarrollado por Prime Institute
Hola ¿Puedo ayudarte?