April 1, 2020
ERP ECommerce Assignment 4 on Weather App

ERP ECommerce Assignment 4 on Weather App

Hi all I will walk you over SAP assignment 4 on weather service application And GIT Repository in this assignment we will learn how to create An app thatUses a destination to access a
RESTful service it also Covers deployment the act to the GIT depository and the app versioning Ok before we can do anything we have to get an API key In order to open weather map so i have to
get this url From page number four of the assignment and then i have To come here sign in account page for you
guys you have to Set up an account since i have already signed up for an account I will use my account for you you can not
sign in You just have to sign now create an account ok so Here put in user name email full name and
i save and Then for API keys click on here and just you can whatever The default key is you can just delete it
ok and then create A new key and to create a new key you just
have to put Your first name and then API and then ask
to generate ok And so this is the key that has been generated for you And copy and paste this key in your word document and this Is your first screenshot so your first screenshot is on the API key That you have created ok next you have to
log in to HANA cloud platform cockpit to create the
application so in order to Do that we have to go to the cockpit log in
go to Destination so i will be creating a new destination i
practiced it Before so i had one already created and i
removed That for you you just come here and then click on New destination ok so click on new destination and then for name You put in openweather this is a HTTP and
then for URL take the URL from your assignment so copy and paste the URL form your Assignment here at page 6 and then you have to save it Ok after that you need to go to web IDE so
we have To go to service and from the service i have to choose SAP web IDE ok then open it
i would be creating A SAP UI5 application ok so in order to do
that I need to home new project from template UI5 application This innovation recommended version is fine and i go to Next here the project name is your name_weather same Here for name space ok go to next actually
you can Just finish so finish so at this point your
project is created And then i have to deploy the project so i
will go here Deploy and i have to deploy using SAP HANA Cloud platform ok and I will click i have to log in and i have to
just deploy and it Would give me ok since i have tried it before it says that I already have it for you you just deploy
a new application i Am updating the existing application and the applicant name Is this and i will just deploy the existing
application but you Do the new application remember you have to do the new application Ok now i have to click on the second link
over here in order to Run it but i
come here at this point take a screenshot Of this and paste it to your word document
and this is going To be your second screenshot ok now i have to update the Application in order to update the application i have to go to SAP web IDE again close this come to wrokspace click on this And from here i have to click on web app and then i take the View viewxml file here i have to do a little
bit of coding Just follow the instructions little bit of
coding here and There will let us get to the application development ok So here after the caret i will type in st
then i will press Control bar together and i choose standardtile ok now i do not Need so many attributes these are all attributes if you look At it id title info and icon i do not need
so many attributes I will pick and choose the attributes as in
page no 11 ok So i go to page no 11 of the assignment so
you see i will Just Keep id title info icon so select id
title info icon I do not need active icon number numberunit press so numberunit I do not need all of these just press ok also
i do not need these Three ok so after that i need to put in some
data binding IN order to do that within these two i will
put in id Then for title i have to put in within curly
bracket name For info i will copy and paste ok so for info
i have to put IN this this is i am just binding for icon
for number Number unit is Celsius ok let me check i
do not need this IN front of the content i need a caret here
ok and then I save it now i will run the application ok so after this Fixing just run the application choose the
index file html from Here say ok ok at this point you will see
that it does Not let you have any data this is because
we have not provided Any data source yet ok so we have to move
on and then you Will open the view1 controller js file so
from here We will go back here and then open from the controller the View1controller js file and we have to add
some code here Too so and this one the highlighted one and add this after Controller so here
ok and then further after controller command Comma you need to add JSONmodel ok and after that we just Save it ok then another few items we need
to add here and That we add after return so
after the return line so come Here after the return line we add that ok
here in your your ID i have to replace that with the API Key
that i Have from here so if You have not save this
tab you Have a screenshot in your word document so take it From there so i go back and i will put that
Api key Here and after that i will save my file ok then the last One i need to do is open the new app JSON
file and then i need To add these code below routes so here ok
and then i save my File so i go back to my application i run
it using index HTML And you will get because Singapore was in
the code ok then we In the view controller you will see that we
have added we have Code in Singapore so it pulls up Singapores weather so take A screenshot and paste in your word document which will be Your screenshot number 3 but at this point
please note that There is some problem here 300 degree Celsius water boils at 100 degree Celsius so 300 degree is too much so there is a Actually problem with the unit of measurement this is showing You 300 in Kelvin not in Celsius so you have to code it to Fix it so lets go back then and we have to
do Some formatting so in order to do the formatting i have To open the view file again ok its here and
then in Order to fix it and change it to celsius i
have to Take it copy and put it in icon so come here
and replace The icon ok and i put that code over here
and then I save it in the controller JS file similarly
i have to add A code after i
insert a comma after the online only function So here i believe no here i add a comma here when the function Ends and then i have to copy the code which is given here in Order for it to reflex Celsius properly this
is the code To change Kelvin to Celsius ok so you see
the math Is given here so i come here and then i add
that Code ok and then i just save my file now you run Your application again so come here i run
the Index HTML And now you will see it will show you the
right temperature Sorry go back to view on page and we need
to remove This number from here ok sorry about that
just remove the number From here and then i think we are good and
save it and then i Come back here and run it i did the number
twice so that was The problem so now i have weather in Celsius actually in Singapore and this would be your screenshot number 4 and paste It in your word document ok so this is for
Singapore but I want to add a search field where i can find
out any City that i would like to find out ok so then
again i Have to fix something in the view file so
copy this code Ok i am just trying to put in a search field
now ok so Copy this code and in the view file just before the content Add that ok then after the content delete
and put this so i Have a standard tile remove the content panel sorry standard Tile then content you do not need to remove the content panel Content lets see if there is any problem here so after content After page title i have the panel there is
a content here Ok then panel and after the tool bar i have a
content standard Tile and finish the standard tile then content panel content Again ok so this is my final one save this
now i have to Make little bit of change in the view1controller file here The same thing i am just making changes everywhere to add The city ok
so i will copy this code and i will paste it After png ok so comma and then the code here your id is to be Replaced with the api key then save it ok
now run the application I will go here and i run the application
type in the city i Type in Beaumont enter then click on here
and it changes to Beaumont 34 degree Celsius light rain ok so take a screenshot Of this and paste it to your word document
this is your screen Shot number 5 ok now deploy the application to HCP again so now Come here web ide and then right click deploy deploy to SAP HANAcloud platform ok here i am updating an existing application You will be updating existing application
too ok so go the Second Page click on the versioning click on the
version below history You will see that the latest version is active
and all the other Versions are created before ok so take a screenshot of this You will not have that many versions you will have three i believe I have these many because i practiced it before so take a Screenshot of this and paste it in a word
document and this is Your last screenshot and we are done with
this assignment so Here you prepared a weather app ok which will let you type in Any city and you can see the temperature of that city and the Weather condition of that particular day ok Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *