/

Drum prüfe, wer sich bindet

Ob der Aufbau und Betrieb eines ISMS erfolgreich war, sollte geprüft und dann zertifiziert werden.

Der Aufbau und Betrieb eines ISMS ist nicht einfach. Darum ist es wichtig, dass fertige ISMS auf Herz und Nieren zu prüfen. Auch keine einfache Aufgabe. Hierbei hilft die Prüfung und Zertifizierung von externen Personen.

Overview of OpenUI5 Selecting transcript lines in this section will navigate to timestamp in the video - [Instructor] So, now we\'re going to get started. So, there are multiple methods to use OpenUI5. So, we\'re going to download the OpenUI5 SDK to our local machine, that is one option. You can access the OpenUI5 from a CDN, or a Content Delivery Network, and I\'ll speak about these in more detail further on. You can also use SAP Web IDE. You can install a local web sever to build, deploy, and host web apps. Now we\'ll look at the different ways that we can leverage OpenUI5. So, you can download the SDK from openui5.org, and this can be deployed to your webserver. The script that you see here is our bootstrap code, and we\'ll point out a bit more detail further on as to what the different line items mean. So, this script, you will use to bootstrap your OpenUI5 core. So, to use the SDK that you\'d have downloaded, you install the unzipped content in the same location where your application will be hosted. Second to this, look at how we access OpenUI5 via a Content Delivery Network, or CDN. You can access OpenUI5 via a CDN using a URL that points to openui5.hana.ondemand.com. This is the script that you would use, similar to the bootstrap code before, and this is what the CDN bootstrap code looks like. As you can see, you have the source pointing to the link that I mentioned before. The version is also included here, and it is optional, so the recommendation is that if you are testing, you can use the latest version, however, for production, you want to ensure that you\'re using the most stable version of OpenUI5, and not the latest as you would use for testing. So, you can also access OpenUI5 with a Web IDE. So, there\'s the SAP Web IDE. An IDE, if you\'re not familiar with the terminology, it is the Integrated Development Environment that you can use to build apps, and it is a web-based development environment and it is optimized for developing complex OpenUI5 apps. So, if you have access to SAP Web IDE, this is an option that you can use to build your OpenUI5 apps. So, developers have access to the latest releases to create Fiori and mobile hybrid apps. So, now we\'ll look at installing a local webserver. So, I recommend XAMPP, which is an open-source packaged Apache environment that comes with MySQL, PHP, and Perl. It is free and easy to install, with downloads for Windows, Linux, and a Mac if you so happen to be using that for development. So, a local development environment enables seamless execution of your web app. So, for this course, we\'ll be using a local webserver. So, we have four different steps that we\'re going to complete. Firstly, you need to download XAMPP, so you go to apachefriends.org to download and you choose which operating system you\'ll be using, and you download. Then you\'re going to install and launch XAMPP so you can access the control panel. Next we\'re going to start the Apache and Tomcat servers. So, we\'re just going to pretty much install the software and then start the servers on our local machine, and then we\'ll browse to a local host just to validate that the install was done correctly. So, when your accessing OpenUI5 on a local webserver, we\'re going to put the OpenUI5 SDK into the XAMPP htdocs. So, the XAMPP installation comes with a folder called htdocs, and we\'ll be placing our OpenUI5 SDK in that folder for development of our web apps. Next, we\'re going to type localhost/openui5-sdk and include the version as well, the version number, in the browser just to ensure that we can bring up our local webserver. Then we\'re going to create a folder under htdocs called myApp, and then we\'re going to copy the resources folder from our SDK under the myApp, and we\'ll be using myApp to build the app for this course. So, I\'m going to actually show you on my machine how I do that, how I download the SDK, how I download XAMPP as well, and the configurations with installations, and then we go ahead and start building our apps. The concepts Selecting transcript lines in this section will navigate to timestamp in the video - [Woman] So now we\'re going to look at the MVC concept. This is the model, the view and controller, and this is the core concept that drives OpenUI5. So firstly, MVC is an Open UI5 concept that allows the separation of information from user interaction. It allows for collaborative development and facilitates independent code changes which is very important when you\'re building apps. SAP uses a modified version of MVC, which allows dependency reversal, data binding and multiple view types. So data binding is also used to bind controls to the model and allows for automatically updating the control, once the application data is modified. which is very important when we are building our apps. So just to give a little bit more breakdown of the model, the view and the controller. Your model manages the behavior and application data. For example, your JSON file, your Odata connection, XML. The view, it defines and renders the user interface which is your display. So you can have XML views. You can have HTML views. Those are examples of use that are possible. The controller reacts to the view events and user interaction. So your mouse clicks, your keyboard, whatever it is that you\'re doing, it is reacting to those and it then modifies the view and model. There are at least four files that will be needed for standalone SAP OpenUI5 mobile application. So because we are getting our web server and we are installing locally on machine and building the apps as standalone apps, there are at least four files that we\'ll need to build this. For Fiori Launchpad, we need at least three files. So HTML files are typically required. Sorry, the files that are required are your HTML page and we\'re going to use this in the standalone. When you\'re building for Fiori, it\'s not really needed. You have the Manifest.json, the component.js and we\'re going to use our App.view.xml. So our view will be in XML. We\'ll build our component file using JavaScript. And our Manifest will be in Json. Well actually, I\'m not going to cover the Manifest in this course. I\'ll just give a little overview of it. So we\'re really going to be actually using the HTML file or HTML page, or component.js and we\'ll be having our view. So next we\'re going to look at setting up our environment, right? So we need to set up an environment on our machines for development. So previously, we downloaded the SDK and we placed it on the htdocs folder in our XAMPP installation. So we have that for our local server. We validated that our install was fine and everything worked. Then we created our folder that we\'ll be using to create this app for this course, the myApp folder and we copied our resources folder there. We created a view sub folder. Sorry, we will be creating a view sub folder on the myApp folder to host App.view.xml. So that will be the next step that we\'ll be moving on to. And we\'re going to build our Component.js and the manifest.json will be under myApp. As I mentioned before, we won\'t be covering the Manifest in this when we\'ll building that on here. But just so you know, that would be where it would be placed. MVC demo in OpenUI5 Selecting transcript lines in this section will navigate to timestamp in the video - [Instructor] So next we\'re going to just view the environment and see how we\'re building what we need to do to start building our app. To our web development area on our machine or laptop, whatever it is that you\'re using. So as you see here, the Apache Web Server is running and what I have here is my folder view for XAMPP where everything is installed. So I\'m just going to go to my hddocs folder, go to myApp, and as you can see here I have resources up, I did a view folder that will host my App.view, my xml view and we\'ll go through that in more detail shortly in the course. But I\'ve just put a placeholder file and also a placeholder format, index.html, which we\'re going to look at shortly as well. So if we\'ve set up our development environment, we should have something that looks like what is on the right side. You should have your myApp folder, which is your root folder for your app. You have your index.html file. You have a sub-folder called view and under that folder you have your view.xml for your app and resources folder that you\'d have copied from your htk also fits under your myApp as a sub-folder for myApp. And so this should be the folder setting that you have. Next, we\'re going to look at building our index.html. So we\'re going to break apart everything that we need to do for this course and we\'re going to start with our index.html. So you\'ve been building your index file first, then you\'ll be looking at how do you build your view, how do you build your component file? And then we\'ll bring it all together to build the app. So we\'re going to break it down into pieces. So we want to bootstrap our OpenUI5 code. And if you remember I showed you the bootstrap code previously, where we looked at the different ways that we can interact with OpenUI5. So we have our doctype declaration. If you\'re familiar with web development, then this should be familiar to you. Otherwise, this is just a standard, basic skeleton for a website. So we\'re using index.html which will be used to render our webpage. That\'ll be the first thing that\'ll be displayed when we launch our site. Whatever is put place in this code. So, as standard, we have our doctype declaration, then we have our HTML and header tag. So when you\'re using HTML, you have tags, typically opening and closing tags, that you use to define what you\'re doing. So we have a head tag, a HTML tag, and there\'s a particular structure that you follow. So this index.html is already following that structure. Next that we have is a meta tag in our code, in our index.html and then the code that I\'ve highlighted here with a box around it is our bootstrap code and this sits within script tag. So you see we have an opening and a closing script tag for this. So we have a sap-ui-core.js and this allows the use of embedded jQuery functionality. Remember we said that OpenUI5 is built on top of jQuery as one of the foundation platforms. So this is our bootstrap code and this goes into a little bit more detail explaining the different line items in our bootstrap. So we are using sap belize plus, that is a theme that we\'re using. You see we\'re pointing to that theme. We\'re pointing to the sap.m library. We\'re using that to get the majority of the controls that we\'ll be using. For the data-sap-ui-compactVersion="edge", this code allows us to enforce the latest OpenUI5 functionality. And for data-sap-ui-preload="async", this is allowing for the asynchronous loading of our webpage, right? So we want the processes to be loaded, to run, asynchronously. Then, we have our data-sap-ui-resourceroots, and this is pointing to the core location of the sap ui namespace resources. Right, so this is standard bootstrapping for our OpenUI5 code. So you don\'t have to worry too much about what sits inside of here, right? I just want you to have an understanding of what each item is doing. So this is pretty standard. There are a few things that you can omit, for example, if you could omit the preloading, I think you could do that as well. But for this version we want to ensure that it is optimized so you include that to ensure for optimization. So we will leave our bootstrap code as is. So we have our sap.ui.getcore execution and this executes anonymous callback function within our OpenUI5 resources, right? This will help to load our core functionality, the anonymous callback function. So then we have the sap.ui.xmlview and this construct creates a new mvc and xml view. So we can\'t figure out everything in our index.html file so this page, as it stands now, will not work. So if you were to go to local hosts/myApp, you would not really be seeing anything being displayed as yet because we have other steps that we need to complete before this makes sense. So we have our sap.ui.demo and this is uniquely identifying the resource. So we\'ll be prefixing our resource with sap.ui.demo. You see that throughout when we\'re creating our control. Building the view Selecting transcript lines in this section will navigate to timestamp in the video - All right, so now we are going to move on to Building the View. And this is just a sample basic code of a view. So this is the view that we\'ll be creating for our app. So, we want to ensure that we have an app that is robust, that does what we want it to do and so, we want to start building out the view, right? So remember you have your model, your view, your controller. So now we\'re building our view. So we start off with standard XML definition. So this is a specification for the XML version and encoding that will be used. Then we have our XML name space and we prefix with MVC for the "sapuicore.mvc" library. So what we\'re pretty much saying here is that we\'re pointing to the MVC library in the core for UI5. This here that is hightlighted with the red box, which is our controller name, we haven\'t created our controller as yet, so we were just created our index for HTML, now we\'re at the view. And this is our controller, this is the code, and this is the name that we\'ll give to the controller when we actually do create it, so everything will be connected. So we reference the controller with "sapui.demo.controller.app" in the view root tag. So you see here we have our MVC view which is referencing our MVC library here and this is the view. And within this tag we\'ve defined the controller name, we\'re pointing to the "sap.m" library, right? And we\'re using a default name space here and we\'re specifying that we\'re using the SAPUI core MVC. And we\'re including all of this in our root tag. Next what we\'re doing is we\'re referencing the "sap.m" app, right? And this is in our "sap.m" library, and this control is used for the XML view, right? So we have a structure here for XML code. We started with our root tag here, our MVC root tag. Next thing that we\'re doing is we\'re specifying that structure. So we\'ll have an app that we\'re building out, and we give it an ID, we just call it tracker. And you\'ll see it will make sense a little later on when you see exactly what we\'ll be doing. Then we have our page title. So under an app we can have a page and this has a title of "Fitness Wearable Tracker", right? So you see here the page control is within our app and we add it with a title. Next we have within the page we have content. And I just put a sample text there just to say we\'re pointing to page one. So we have the content that sits there and the text is included in a content tag which will hold the container later on. So later on we\'ll be replacing the text with something else that we\'ll be building. If you remember the course objectives, we spoke about the "sap.m" standard tell construct. So we\'ll be using that, but for now we\'ll just have a place holder of text in our content tags. Then we close our page tag, we close our app tag, and we close our MVC view root tag. And this is it for a simple view that we\'ve created in XML. Building the JSON Selecting transcript lines in this section will navigate to timestamp in the video - [Instructor] Now we get to the fun part we\'ll all be doing. So you see inss your index are html. You\'ve created your view. And now we\'re going to actually look at the model. So we\'re going to be using fitness tracker data, which is pretty much data from any wearable device that you\'d have. Also data they could get from your phone if you use your phone to track your steps. So, I\'ve been looking at sample data from my Fitbit for a particular week, and that\'s pretty much what is looks like. That\'s a sample dashboard of what it looks like for a particular week. So you see the average steps. You see the total miles, average daily calories burnt, the total active minutes, number of days that I\'ve exercised for that week, my average sleep for the week, and also the average number of hours that I\'ve had 250 steps or more. And so for our app that we will be creating here, we\'ll actually be building a third app with some of the metrics that are here. So we have six metrics that we going to focus on, we going to focus on the total miles, total steps, the average calories burned, total active minutes, the number of days that you\'ve been exercising, and average restful sleep. And so this is a sample of our model data we\'re using JSON to pull this data in. And this is a sample of what the data will look like. So we create a app tiles object, and this will hold the data and metadata that we\'ll be using for our tiles. And we could give it any name, I gave it the name app tiles. Next we have, the standard tile control will support the data that fits in here. Right? So our standard tile, if we look at the structure of it if you go to the API on OpenUI5, we can use an icon, a number, a number unit, a title, the info, and infoState, and so our Fitbit data that will sit in our JSON file will mimic that. So, we have the icons. So we\'re looking at different icons that are available, and these icons are available for OpenUI5, or just UI5 in general. So I went through and I selected the most suitable icon for the metric that we\'ll be looking at from our wearable. So I have a map, for example, to look at the total miles, and this, when we move on to building out the standard tile construct, you see how everything ties together, and you see how data binding works in OpenUI5. So, we use icons as I mentioned before that correspond to the metric, and there\'s a link here that you can go to, or you can just type in OpenUI5 or UI5 icons, and you should get them, right? You should get a list of all that consider available that you can use. So I\'m using the meal icon, for example, to represent the number of calories that I\'ve burned. So, we also have the property ids for our name view that appears, and simpler data binding, right? So, we\'re going to look at data binding for the down when we start to connect our model to the data that we have, right?s Creating the controller Selecting transcript lines in this section will navigate to timestamp in the video - [Instructor] So, we have updated our development environment. So previously, we had much less files and folders than we have here. So what we\'re doing now is we\'re going to look at our controller. So you\'ve seen your view. We\'ve created our view xml and we have our content tab that we put our placeholder text in until we add in our tiles And you just saw the model, our json model that we\'ll be connecting to the tiles. So the next thing that\'s left is our controller. Remember, we\'re talking about mvc concept here. So we create a subfolder on the myApp called controller and we\'re going to create a file called App.controller.js so we\'ll be using JavaScript to build this controller. So this is our very simple, basic code for controller. Very simple, yet powerful code. So if you remember, when we had our view, we pointed or reconnected the view to our controller even though our controller did not yet exist. And the name that we had was sapui.demo.controller.App. So this is now the name of the controller that now exists. So we\'re pointing to the controller name here and we put this in quotes. Then we have our open curly brackets. And the next thing that we have is our onInit function. And we just give it a name. We call this appevent. And this is added to the controller and JSONModel is instantiated to read our json file. Next, we call the set model function on the view to pass the newly created model. So we have our data.json here. So we create our model. Create our variable called oModel. And we create a new JSONModel and we point it to our data.json file that you just saw previously that holds our web of data. And then we pretty much set the model to the view. So what we\'re doing here now is connecting all the dots together so our app can work. So we created our index.html first and we bootstrapped our open ui file. Next, we created our view in xml, pointed it to the controller and we put our placeholder for content that we want to put our tiles in. Then after that, we looked at our model and we built, or we created our json file that will hold data for our tiles. And now, we\'ve just create our controller that will handle everything.