**** read the spanish version below ****
Recently, I joined a new team and I was explaining different ways to create ui5 prototypes (hopefully, eventually, real applications; using build , the on-premise web workbench <host>:<port>/sap/web/ide/editor, and now via the SAP Cloud Platform ) based on experience from prior engagements. On this blog, I wanted to showcase some steps to create a custom application from the SAP Cloud Platform (SCP) WEB IDE. Same blog can be found en español
The SCP offers several services. The one I am going to write about today is about the WEB IDE. Some of these services are available to use but disabled by default. The initial step is to make sure this service, SAP WEB IDE, is enabled.
Once you log in to the SCP, look on the left navigation panel, and select Services. Then, find SAP WEB IDE, amongst others, and select it.
You may need to wait a few minutes if it was not enabled and you just enabled it - You will see its status turn to green. Once enabled, click on Go To Service link.
There are several ways to create a UI5 application, or more formally known as a Fiori app (whether it is custom or an extension). In my example, I will showcase how to start and get you going to create a simple application.
When you first come to the WEB IDE, you will have a Workspace folder as your starting point. You can right click on it, then New à Project à from Template (other options are: to deploy, to create a Fiori mobile plug in, an extension, Git (clone repository), etc.)
Follow the steps on the wizard. * one thing I noticed here is that one of the options given to me is to use version 1.48 (todays is 8/30/17), however, version 1.48 is not available on sapui5 yet, it is available on openui5, so I wonder how this will end up (if I got your attention, keep reading)
The nice thing about using a template, is that you can see what your app could look like once you are almost completed with it. After all, a template is just that (someone else already created something and you are using the boilerplate code for your implementation/ put your flavor to it). Next I show one of the available templates
Once you select the type of template, please follow the wizard steps:
Give it a name, and optionally a namespace
You can also name your initial view (View1 below)
Once finished with the wizard, you should get the project template code on your WEB IDE Workspace, as shown next
*** however… Notice the ui5 version did not match between what I had originally selected ***
And what showed on my manifest.json file (1.40.12) *** on the plus side, this tells me that it is possible and it allows us to change the ui5 version provided by the template, however, we have to make sure that also the boostrapped version is available. (look at the script tag where the ui5 version is referenced on your index.html file and make adjustments accordingly)
If and when you run your index.html file for the first time (click on the Green Play button to run), make sure you have popups blocked enabled, otherwise you need to allow them by clicking on the icon below and accepting the prompt.
SO now that SCP has done the hardest part (app set up and configuration) … next is to make sure you can put additional content into your application.
Prior to adding content (such as views, controllers, and any other files), it is important to know what and how to develop an application on this framework:
I normally go about this by having a mix approach as I will probably need to use an OData model (server side) to retrieve some data and use on my application, however, when I know that there is client side interaction and maybe some logic that would alter the behavior or my UI, then I use a JSON model.
Benefits and Advantages of using SCP WEB IDE:
I have been using my trial account for a while and I have been able to learn a bunch from it. Additionally, I have created several blogs by using this (free) medium. One of my mentors told me once that the only way to learn programming is by programming and SCP has allowed me to accomplish this goal. Of course, there are other ways to supplement my learning such as openSAP, scn, youtube, code jam events, books (my least favorite way of learning programming) but ultimately, coding can be achieved via SCP.
Thank you again for reading this blog. Please share your experiences and any road blocks if you had any while developing your custom application on the SCP WEB IDE
Recientemente me uni a un equipo de trabajo nuevo y comparti diferentes formas para crear prototipos de aplicaciones UI5 (esperemos que eventualmente se conviertan en aplicaciones reales) usando herramientas como BUILD, el WorkBench <host>:<port>/sap/web/ide/editor y ahora por este medio en la Plataforma SAP en la nuve - basado en experiencia anteriomente de otros proyectos. En este blog, quiero mostrar algunos pasos para crear aplicaciones Fiori usando la herramienta conocida como el WEB IDE de la Plataforma de SAP (SCP). (Acceso a la plataforma es gratuito y solo necesitas un correo eletronico para obtener una cuenta)
La SCP ofrece varios servicios en la nuve. El servicio del cual voy a escribir hoy se llama WEB IDE. Algunos de estos servicios estan disponibles para usarse pero desactivados por default. El primer paso es asegurarse que este servicio, WEB IDE, este activado.
Una vez que estes dentro de la plataforma (SCP), mira en el panel de navegación de la izq y selecciona la opcion Services (Servicios) Despues, encuentra el servicio que mencioné y dale click.
Por lo regular este proceso de activación se lleva un par de minutos. Espera a que el status cambie a color verde. Una vez activado, dale click en el link Go To Service.
como mencioné anteriormente, hay varias formas de desarrollar una aplicación UI5, también conocida como Custom Fiori. En mi ejemplo, mostraré los pasos desde como empezar a desarrollar esta aplicacion.
Cuando primeramente entras al WEB IDE, tendras un folder llamado Workspace. Dale click on el lado derecho, depues selecciona New --> Project --> From Template (otra opciones incluyen: deploy, create un plug in para una aplicacion mobile, una extension o clonar un espacio de GIT)
sigue los pasos del wizard * una cosa que note aqui es que dentro de las opciones que me dieron estaba la version 1.48 (hoy 30/8/2017), solo que la version 1.48 no esta disponible en el ui5 (la mas reciente es 1.46) solo en la version open source del openui5. me pregunto que ira a pasar - si todavia tengo tu atención continue leyendo 🙂
algo bueno que pasa cuando usamos templates, es que anteriormente a empezar a desarrollar una aplicacion ya sabemos mas o menos como se va a ver casi al final de nuestro proyecto. Después de todo un template es lo que es (alguien mas ya hizo el codigo y solo lo adaptaremos a nuestro requerimiento) aqui les muestro una de las templates disponibles
una vez que selecciones el tipo de template, sigue los pasos. Dale un nombre y namespace(opcional)
tambien puedes dar el nombre de la vista inicial. Una vez finalizado el wizard, puedes ver como se generó el proyecto en tu espacio de desarrollo (workspace)
** sin embargo... fijate que la versión de la libreria ui5 no concuerda con la version original que seleccioné en un paso anteriormente ***
y la version que aparece en mi archivo manifest.json
cuando corras tu aplicación para ver como se muestra en tu browser (dale click al boton play verde) asegurate que los popups esten activados, de otra manera activalos al darle click al icono de la parte superior derecha y acepta el prompt
ahora que SCP ha hecho la parte mas dificil (el set up y configuracion de los archivos del proyecto) lo siguiente es que añadas contenido a tu app.
Anteriormente a añadir contenido (vistas, controladores, archivos js, entre otros) es importante comprender y saber donde, cuando, y como desarrollar en este framework:
Beneficios y ventajas de usar el SAP WEB IDE:
He usado mi cuenta gratis de la plataforma por un buen tiempo y he aprendido muchisimo. Añado tambien que con esta cuenta he podido desarrollar suficientemente para escribir otros blogs. Uno de mis mentores siempre me dijo que para aprender a desarrollar tienes que desarrollar - el esta en lo cierto y pues SCP me ha dado la oportunidad de aprender y compartir cierto conocimiento. Se que tambien hay otras formas de aprender y suplementar el conocimiento como lo es el opensap, scn, youtube, eventos del code jam y libros (mi metodo menos preferido para aprender a programar) pero SCP me ha dado esta oportunidad y hay que aprovecharla.
por favor compartan su conocimiento y sus experiencias!
Recently, I joined a new team and I was explaining different ways to create ui5 prototypes (hopefully, eventually, real applications; using build , the on-premise web workbench <host>:<port>/sap/web/ide/editor, and now via the SAP Cloud Platform ) based on experience from prior engagements. On this blog, I wanted to showcase some steps to create a custom application from the SAP Cloud Platform (SCP) WEB IDE. Same blog can be found en español
The SCP offers several services. The one I am going to write about today is about the WEB IDE. Some of these services are available to use but disabled by default. The initial step is to make sure this service, SAP WEB IDE, is enabled.
Once you log in to the SCP, look on the left navigation panel, and select Services. Then, find SAP WEB IDE, amongst others, and select it.
You may need to wait a few minutes if it was not enabled and you just enabled it - You will see its status turn to green. Once enabled, click on Go To Service link.
There are several ways to create a UI5 application, or more formally known as a Fiori app (whether it is custom or an extension). In my example, I will showcase how to start and get you going to create a simple application.
When you first come to the WEB IDE, you will have a Workspace folder as your starting point. You can right click on it, then New à Project à from Template (other options are: to deploy, to create a Fiori mobile plug in, an extension, Git (clone repository), etc.)
Follow the steps on the wizard. * one thing I noticed here is that one of the options given to me is to use version 1.48 (todays is 8/30/17), however, version 1.48 is not available on sapui5 yet, it is available on openui5, so I wonder how this will end up (if I got your attention, keep reading)
The nice thing about using a template, is that you can see what your app could look like once you are almost completed with it. After all, a template is just that (someone else already created something and you are using the boilerplate code for your implementation/ put your flavor to it). Next I show one of the available templates
Once you select the type of template, please follow the wizard steps:
Give it a name, and optionally a namespace
You can also name your initial view (View1 below)
Once finished with the wizard, you should get the project template code on your WEB IDE Workspace, as shown next
*** however… Notice the ui5 version did not match between what I had originally selected ***
And what showed on my manifest.json file (1.40.12) *** on the plus side, this tells me that it is possible and it allows us to change the ui5 version provided by the template, however, we have to make sure that also the boostrapped version is available. (look at the script tag where the ui5 version is referenced on your index.html file and make adjustments accordingly)
If and when you run your index.html file for the first time (click on the Green Play button to run), make sure you have popups blocked enabled, otherwise you need to allow them by clicking on the icon below and accepting the prompt.
SO now that SCP has done the hardest part (app set up and configuration) … next is to make sure you can put additional content into your application.
Prior to adding content (such as views, controllers, and any other files), it is important to know what and how to develop an application on this framework:
- MVC – Model-View-Controller (Explained on this blog) https://blogs.sap.com/2016/05/26/using-hcp-to-develop-a-custom-fiori-app/
- JSON vs OData Data models. It is very important to understand the difference between client side model and server side model, when to use each and how to decide which one to use (or use a hybrid approach)
I normally go about this by having a mix approach as I will probably need to use an OData model (server side) to retrieve some data and use on my application, however, when I know that there is client side interaction and maybe some logic that would alter the behavior or my UI, then I use a JSON model.
- What is (and is not) available on the framework. In some of my other apps, I have used libraries like momentjs (parse, validate, manipulate dates), d3js (js charting library)
- Where to see some control examples: however, possibilities are endless
Benefits and Advantages of using SCP WEB IDE:
- App project set up (using templates, folders within project, even all the configuration files needed such as the Component, manifest.json, etc.)
- Ease of use of WEB IDE (navigation, coding, syntax, easy to follow wizard, messages)
- Ease of deployment to GIT (huge!)
- Ease of unit testing (Google dev tools, also you can set up a folder within your project for your unit testing)
- Immediate able to switch between projects (if you have more than 1)
I have been using my trial account for a while and I have been able to learn a bunch from it. Additionally, I have created several blogs by using this (free) medium. One of my mentors told me once that the only way to learn programming is by programming and SCP has allowed me to accomplish this goal. Of course, there are other ways to supplement my learning such as openSAP, scn, youtube, code jam events, books (my least favorite way of learning programming) but ultimately, coding can be achieved via SCP.
Thank you again for reading this blog. Please share your experiences and any road blocks if you had any while developing your custom application on the SCP WEB IDE
----- SPANISH VERSION -----
Recientemente me uni a un equipo de trabajo nuevo y comparti diferentes formas para crear prototipos de aplicaciones UI5 (esperemos que eventualmente se conviertan en aplicaciones reales) usando herramientas como BUILD, el WorkBench <host>:<port>/sap/web/ide/editor y ahora por este medio en la Plataforma SAP en la nuve - basado en experiencia anteriomente de otros proyectos. En este blog, quiero mostrar algunos pasos para crear aplicaciones Fiori usando la herramienta conocida como el WEB IDE de la Plataforma de SAP (SCP). (Acceso a la plataforma es gratuito y solo necesitas un correo eletronico para obtener una cuenta)
La SCP ofrece varios servicios en la nuve. El servicio del cual voy a escribir hoy se llama WEB IDE. Algunos de estos servicios estan disponibles para usarse pero desactivados por default. El primer paso es asegurarse que este servicio, WEB IDE, este activado.
Una vez que estes dentro de la plataforma (SCP), mira en el panel de navegación de la izq y selecciona la opcion Services (Servicios) Despues, encuentra el servicio que mencioné y dale click.
Por lo regular este proceso de activación se lleva un par de minutos. Espera a que el status cambie a color verde. Una vez activado, dale click en el link Go To Service.
como mencioné anteriormente, hay varias formas de desarrollar una aplicación UI5, también conocida como Custom Fiori. En mi ejemplo, mostraré los pasos desde como empezar a desarrollar esta aplicacion.
Cuando primeramente entras al WEB IDE, tendras un folder llamado Workspace. Dale click on el lado derecho, depues selecciona New --> Project --> From Template (otra opciones incluyen: deploy, create un plug in para una aplicacion mobile, una extension o clonar un espacio de GIT)
sigue los pasos del wizard * una cosa que note aqui es que dentro de las opciones que me dieron estaba la version 1.48 (hoy 30/8/2017), solo que la version 1.48 no esta disponible en el ui5 (la mas reciente es 1.46) solo en la version open source del openui5. me pregunto que ira a pasar - si todavia tengo tu atención continue leyendo 🙂
algo bueno que pasa cuando usamos templates, es que anteriormente a empezar a desarrollar una aplicacion ya sabemos mas o menos como se va a ver casi al final de nuestro proyecto. Después de todo un template es lo que es (alguien mas ya hizo el codigo y solo lo adaptaremos a nuestro requerimiento) aqui les muestro una de las templates disponibles
una vez que selecciones el tipo de template, sigue los pasos. Dale un nombre y namespace(opcional)
tambien puedes dar el nombre de la vista inicial. Una vez finalizado el wizard, puedes ver como se generó el proyecto en tu espacio de desarrollo (workspace)
** sin embargo... fijate que la versión de la libreria ui5 no concuerda con la version original que seleccioné en un paso anteriormente ***
y la version que aparece en mi archivo manifest.json
cuando corras tu aplicación para ver como se muestra en tu browser (dale click al boton play verde) asegurate que los popups esten activados, de otra manera activalos al darle click al icono de la parte superior derecha y acepta el prompt
ahora que SCP ha hecho la parte mas dificil (el set up y configuracion de los archivos del proyecto) lo siguiente es que añadas contenido a tu app.
Anteriormente a añadir contenido (vistas, controladores, archivos js, entre otros) es importante comprender y saber donde, cuando, y como desarrollar en este framework:
- MVC - Model- View-Controller (lo explique en otro blog) https://blogs.sap.com/2016/05/26/using-hcp-to-develop-a-custom-fiori-app/
- JSON vs OData Data Models - es una parte critica y debe entenderse la diferencia entre modelos del lado del cliente y del servidor y cuando usar cada uno o usar una version hybrida. Normalmente, yo uso una version hybrida de caso a que uso un OData model (del servidor) para leer datos y usar en mi app si no hay que modificar del lado del cliente (tablas por ejemplo. SIn embargo, cuando se que del lado del cliente habrá interacciones entre el usuario y la applicacion, entonces uso un JSON Data model.
- Que esta (y que no) disponible en cierto framework. en otros proyectos en los que he trabajado anteriormente tuve que usar librerias como momentjs (para hacer parse, validacion y syntax de fechas), d3js (libreria de graficas)
- Donde ver controles que se pueden utilizar en mi app https://sapui5.hana.ondemand.com/demoapps.html - las posibilidades son infinitas
Beneficios y ventajas de usar el SAP WEB IDE:
- set up del proyecto (usando templates, folders dentro del proyecto, y todos los archivos de configuracion como el Component, manifest.json, etc)
- Facilidad de uso del WEB IDE (navegacion, codigo, syntax, pasos faciles de seguir, mensajes)
- Facilidad de deployment al GIT
- Facilidad de hacer testeo de unidades (Google chrome browser tambien)
- Facilidad de cambiar entre proyectos (si tienes mas de 1)
He usado mi cuenta gratis de la plataforma por un buen tiempo y he aprendido muchisimo. Añado tambien que con esta cuenta he podido desarrollar suficientemente para escribir otros blogs. Uno de mis mentores siempre me dijo que para aprender a desarrollar tienes que desarrollar - el esta en lo cierto y pues SCP me ha dado la oportunidad de aprender y compartir cierto conocimiento. Se que tambien hay otras formas de aprender y suplementar el conocimiento como lo es el opensap, scn, youtube, eventos del code jam y libros (mi metodo menos preferido para aprender a programar) pero SCP me ha dado esta oportunidad y hay que aprovecharla.
por favor compartan su conocimiento y sus experiencias!
- SAP Managed Tags:
