You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: tutorials/yaas-create-project-backing-storefront/yaas-create-project-backing-storefront.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
-
title: Use Your Own YaaS Project to Back your Storefront.
3
-
description: By default, the StoreFront is wired to the YaaS Project default project (created by the StoreFront's own Team). This default project has already been wired up and populated with the Products (and Services) that you can browse. You will now use our own YaaS Project which you created earlier instead of the default one.
2
+
title: Use Your Own YaaS Project to Back your Storefront
3
+
description: By default, your StoreFront communicates with a default YaaS Project in the backend (created by the StoreFront's own Team). This contains the products that you have seen, banner images and much more. In this step you will point your StoreFront to your own YaaS Project instead, giving you more control of back end logistics.
In this tutorial you will use our own YaaS Project which you created earlier instead of the default one.
19
+
In this tutorial you will use your own YaaS Project which you created earlier to serve as the backend of your StoreFront, rather than the default YaaS Project. You will then have complete control over the contents of your Storefront, allowing you to populate its products, its banners, and many more features.
20
20
21
21
### Time to Complete
22
22
**20 Min**.
@@ -25,7 +25,7 @@ In this tutorial you will use our own YaaS Project which you created earlier ins
25
25
26
26
1. If you have not completed the Getting Started with YaaS tutorial, please do it now. This is necessary in order to follow the next steps.
27
27
28
-
2. Take note of the YaaS **Project's identifier** and the YaaS **Client's identifier** and place these as the `PROJECT_ID` and `CLIENT_ID` values in the `gruntfile.js` in the `folder(1)` directory which you created in the previous tutorials. This is the root directory of your `yaas-storefront` project.
28
+
2.Open your YaaS Project in the YaaS Builder. Take note of the YaaS **Project's identifier** and the YaaS **Client's identifier** and place these as the `PROJECT_ID` and `CLIENT_ID` values in the `gruntfile.js`that already exists in the top level of your storefront`folder(1)` directory which you created in the previous tutorials. This is the root directory of your `yaas-storefront` project.
29
29
- You Can find **Project's identifier** in the **Builder** under the **Administration** tab when you open your project.
30
30
31
31
@@ -38,7 +38,7 @@ In this tutorial you will use our own YaaS Project which you created earlier ins
38
38
39
39
40
40
41
-
3. Rebuild the Storefront by running the `grunt build` command from `folder(1)` directory.
41
+
3.Your `Gruntfile.js` should now contain lines similar to `PROJECT_ID = 'yb0160913',` and `CLIENT_ID = 'vBji2FMBBvKVYlGn8ZZ2b4E6xFKpHhNi',`. Note the commas and the single quotes around each variable. Rebuild the Storefront by running the `grunt build` command from `folder(1)` directory.
42
42
43
43
4. Rerun your Storefront by running the `npm start` command from `folder(1)` directory. The client will now be talking with your YaaS Project.
44
44
@@ -59,14 +59,14 @@ In this tutorial you will use our own YaaS Project which you created earlier ins
59
59
> NOTE: It is important to set your products as **active**, otherwise they will not appear in your online store.
60
60
61
61
### Summary
62
-
In this tutorial, you replaced the default storefront project credentials with your own YaaS project credentials. You added customized products to your storefront.
62
+
In this tutorial, you modified your storefront to talk with your own YaaS Project in the backend rather than the default YaaS Project. This gave you complete control over the content of the Storefront, such as its products and banners, and much more that you have yet to explore.
63
63
64
64
## Next Steps
65
-
-[Deploy a Micro Service Built on YaaS on the SAP HCP](http://go.sap.com/developer/tutorials/yaas-deploy-run-microservice-cloud.html)P
65
+
-[Deploy a Micro Service Built on YaaS on the SAP HCP](http://go.sap.com/developer/tutorials/yaas-deploy-run-microservice-cloud.html)
66
66
67
67
### Optional
68
68
6. Create a category and assign your products to it.
69
69
- Go back to the Builder and open Categories.
70
-
- Create a category and you can add image for it.
70
+
- Create a category and you can add an image for it.
Copy file name to clipboardExpand all lines: tutorials/yaas-deploy-run-microservice-cloud/yaas-deploy-run-microservice-cloud.md
+18-7Lines changed: 18 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,14 +18,14 @@ tags: [ tutorial>intermediate, topic>cloud, products>sap-hana-cloud-platform, p
18
18
19
19
## Details
20
20
### You will learn
21
-
In this tutorial you will learn how to deploy a micro service to the SAP HCP. As an example you will use the Tips micro service created in [Extend the YaaS Storefront's Functionality](http://go.sap.com/developer/tutorials/yaas-extend-storefront-functionality-webservice.html) tutorial. In order to deploy a micro service you will need to set up your Cloud Foundry Command Line interface and create a SAP HCP account. In the end you will run the micro service on the cloud.
21
+
You will learn how to deploy a micro service to the SAP HCP. As an example you will use the Tips micro service created in the[Extend the YaaS Storefront's Functionality](http://go.sap.com/developer/tutorials/yaas-extend-storefront-functionality-webservice.html) tutorial. In order to deploy a micro service you will need to set up your Cloud Foundry Command Line interface and create a SAP HCP account. In the end you will run the micro service on the cloud.
22
22
23
23
### Time to Complete
24
24
**20 Min**.
25
25
26
26
---
27
27
28
-
1.Download the **Cloud Foundry CLI**: Go to https://docs.cloudfoundry.org/cf-cli/install-go-cli.html, and install Cloud Foundry's CLI. Run `cf` commands from your command line to verify your installation.
28
+
1.Run cf -v to see if you have the Cloud Foundry CLI installed. If not, download the **Cloud Foundry CLI**: Go to https://docs.cloudfoundry.org/cf-cli/install-go-cli.html, and install Cloud Foundry's CLI. Run `cf` from your command line to verify your installation.
29
29
30
30
31
31
@@ -37,7 +37,7 @@ In this tutorial you will learn how to deploy a micro service to the SAP HCP. As
37
37
- Open your YaaS Projects **Administration** page.
38
38
- Click **Subscription**, select **+ Subscription**, select the *Beta Worldwide* tab, and subscribe to the package called **HCP, STARTER EDITION FOR CLOUD FOUNDRY SERVICES (BETA)** in there.
39
39
40
-
4. Wait 10 seconds and your package will appear in **Builder***. If your package did not appear, log out and back in to the YaaS Builder, find your project, and you should see **SAP HANA Cloud Platform** in your YaaS Project's Menu on the left side of the page.
40
+
4. Wait 10 seconds and your package will appear in **Builder in your YaaS Project***. If your package did not appear, log out and back in to the YaaS Builder, find your project, and you should see **SAP HANA Cloud Platform** in your YaaS Project's Menu on the left side of the page. Select the **SAP HANA Cloud Platform** menu and click **Create** to activate your HCP account. This will trigger the email mentioned in the next step.
41
41
42
42
5. You should now get an email from **HCP**, guiding you through steps to **activate** your HCP account.
43
43
@@ -57,10 +57,10 @@ In this tutorial you will learn how to deploy a micro service to the SAP HCP. As
57
57
58
58
10. Push the war file to the cloud, by running `cf push` from the same location. This will use the information in `manifest.yml` to guide the deployment.
59
59
60
-
11. Run `cf apps` to check whether the war file was successfully deployed and started and note the URL where it is running. It should be something like `yourAppsName.cfapps.us10.hana.ondemand.com`.
61
-
62
60
> NOTE: The default HCP settings require the secure, https protocol. Therefore you must use https for all calls to your deployed services and when accessing your website in the cloud @ https://
63
61
62
+
11. Run `cf apps` to check whether the war file was successfully deployed and started and note the URL where it is running. It should be something like `yourAppsName.cfapps.us10.hana.ondemand.com`.
63
+
64
64
65
65
66
66
12. Now that your service has been deployed to the cloud, you could access it directly from your StoreFront. However, YaaS is all about security, so instead we should register this service in the YaaS Builder, so that instead, we can access it via the YaaS Security Proxy. To register your service on YaaS:
@@ -74,8 +74,19 @@ In this tutorial you will learn how to deploy a micro service to the SAP HCP. As
74
74
75
75
> NOTE: In order to access your service at the **Generated Proxy URL** you will need to acquire an **Access Token**. This is because all calls to a service on YaaS are secured. If you are interested to learn more about this please refer to [YaaS Dev Portal](https://devportal.yaas.io/).
76
76
77
-
###Summary
78
-
In this tutorial you learned how to deploy a micro service based on YaaS on HANA Cloud Platform and run the service.
77
+
13. Now that you have deployed your service to the cloud, you need to tell your StoreFront about it. Open the file `(1) site-config.js` in `yaas-storefront/public/js/app/shared` and modify the `baseUrl` of the `tipsEndpoint` to point to the Generated Proxy URL found given in the previous step, giving you something like the code below. Rebuild your storeFront with `grunt build`, and restart the storefront with `npm start`. Your storeFront should now be communicating with your deployed service. Open your Chrome developer tools to observe the REST traffic and confirm that this is the case.
78
+
79
+
```
80
+
tipsEndpoint: {
81
+
// NEEDS_ADJUSTING : Define the end-point of your Tips Service e.g. http://localhost:8080
In this tutorial you learned how to deploy a micro service based on YaaS to the HANA Cloud Platform, and how to modify your storefront to communicate with it.
79
90
80
91
## Next Steps
81
92
- Select a tutorial from the [Tutorial Navigator](http://go.sap.com/developer/tutorial-navigator.html) or the [Tutorial Catalog](http://go.sap.com/developer/tutorials.html)
In this tutorial you will learn how to create your own e-commerce shop in minutes with the YaaS Storefront.
19
+
You will learn how to create your own e-commerce shop in minutes with the YaaS Storefront.
20
20
21
21
### Time to Complete
22
22
**10 Min**.
@@ -25,7 +25,7 @@ In this tutorial you will learn how to create your own e-commerce shop in minute
25
25
26
26
1. Confirm that you have **Node.js** and **Git** installed:
27
27
- run the command `node -v` to see if you have **Node.js** installed. If not, download it from <https://nodejs.org/en/download/>, and confirm that the command `node -v` runs okay.
28
-
- run the command `git`to see if you have **Git** installed. If not, download it from <https://git-scm.com/book/en/v2/Getting-Started-Installing-Git>, and confirm that the command `git` runs okay.
28
+
- run the command `git`to see if you have **Git** installed. If not, download it from <https://git-scm.com/book/en/v2/Getting-Started-Installing-Git>, and confirm that the command `git` runs okay.
29
29
30
30
2. Clone the YaaS StoreFront:
31
31
- Create a folder which we will refer to as `(1)` in the following steps, and `cd` into it.
@@ -34,7 +34,7 @@ In this tutorial you will learn how to create your own e-commerce shop in minute
34
34
35
35
3. Use Node's package manager to download the dependencies:
36
36
- The YaaS StoreFront includes `npm`, **Node.js**'s package manager, for downloading dependent packages.
37
-
- Run `npm install` to download all the packages the Storefront depends on. The console should show `npm` downloading many dependencies; confirm this is the case.
37
+
- Run `npm install` to download all the packages the Storefront depends on. The console should show `npm` downloading many dependencies; confirm this is the case and that you have no error messages.
38
38
39
39
4. Start a local web server
40
40
- Run the command `npm start` to start a local web server. If your command prompt looks like the following image, you will know that the server is running.
Copy file name to clipboardExpand all lines: tutorials/yaas-extend-storefront-functionality-webservice/yaas-extend-storefront-functionality-webservice.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
2
title: Extend the YaaS Storefront's Functionality with a Micro Service
3
-
description: In this tutorial you will extend the Storefront using a micro service. The aim is to give helpful Tips to the undecided purchaser. You will run the Tips micro service locally and connect it to YaaS Storefront. The tips are communicated via REST calls to YaaS Storefront.
3
+
description: In this tutorial you will extend the functionality of the Storefront to include Tips for the undecided purchaser. The logic will be implemented with a Tips REST based micro service.
You will learn how to customize your Storefront using a micro service. The Storefront is structured around [Angular Modules](https://docs.angularjs.org/guide/module). The aim of this tutorial is to include a button in your Storefront's Product Details page that gives helpful Tips to the undecided purchaser, such as "This would add to your overall coolness", and "One word: No". To achieve this, you will run a new micro service locally to provide the tips, and add a button to your StoreFront that calls this. The tips are communicated via REST calls to your YaaS Storefront.
20
+
You will learn how to extend your Storefront using a micro service. The Storefront is structured around [Angular Modules](https://docs.angularjs.org/guide/module). The aim of this tutorial is to include a button in your Storefront's Product Details page that gives helpful Tips to the undecided purchaser, such as "This would add to your overall coolness", and "One word: No". To achieve this, you will run a new micro service locally to provide the tips, and add a button to your StoreFront that calls this. The tips are communicated via REST calls to your YaaS Storefront.
21
21
22
22
### Time to Complete
23
23
**20 Min**.
@@ -28,9 +28,9 @@ Locate your `yaas-storefront` folder which we will refer to below as (1).
28
28
29
29
1. View the default Angular Modules that are included in your Storefront @ `(1)/public/js/app`. You can extend the Storefront's functionality by adding your own Angular Modules to these. In this tutorial you will add a new Angular Module to support the "Mr Tip" functionality.
30
30
31
-
> NOTE: Each Angular Module provides the support for a specific piece of business functionality such as Products, Customers, Cart etc. Each Angular Module contains all the different parts required for that in your application, such as controllers, services, filters, etc.
31
+
> NOTE: Each Angular Module provides the support for a specific piece of business functionality such as Products, Customers, Cart etc. Each contains all the different parts required for that particular logic in your application, such as controllers, services, filters, etc.
32
32
33
-
2. Create a folder `(2)` somewhere outside of your `yaas-storefront` folder, and `cd` into it. Run `git clone https://github.com/SAP/yaas-getting-started-yaasbites.git`, to give you two new folders:
33
+
2. Create a folder `(2)` somewhere outside of your `yaas-storefront` folder, and `cd` into it. Run `git clone https://github.com/SAP/yaas-getting-started-yaasbites.git`, to give you several new folders, two of which are relevant to us:
34
34
-`(2)/yaasbite200` which contains a "Mr Tip" micro service and front-end-client for populating it, and
35
35
-`(2)/yaasbitestorefrontdeltas` which contains changes that you will make to the Storefront to call it.
36
36
@@ -48,7 +48,7 @@ Locate your `yaas-storefront` folder which we will refer to below as (1).
48
48
> NOTE: Please keep the micro service running. You will use this in the next steps.
49
49
50
50
4. With the Tips micro service running locally, you can now extend your StoreFront to include a button on its product detail page, that calls this service, and thus provide tips to the undecided purchaser. To do this you need to modify some files in the `yaas-storefront` folder `(1)`. Place **all** the files that are in `(2)/yaasbitestorefrontdeltas/two` into their respective locations in the `yaas-storedfront` folder `(1)`, overwriting the original files:
51
-
- For example: file `file product-detail-ctrl.js` located in `(2)/yaasbitestorefrontdeltas/two/public/js/app/products/controllers/product-detail-ctrl.js` should replace the one in `(1)/yaas-storefront/two/public/js/app/products/controllers/product-detail-ctrl.js`.
51
+
- For example: file `file product-detail-ctrl.js` located in `(2)/yaasbitestorefrontdeltas/two/public/js/app/products/controllers/product-detail-ctrl.js` should replace the one in `(1)/yaas-storefront/public/js/app/products/controllers/product-detail-ctrl.js`.
52
52
53
53
5. Next we want to compile the modified code.
54
54
- We will compile the code using the build tool grunt, which we first need to download with the help of the node package manager: run the command: `npm install -g grunt-cli` from within folder `(1)`.
0 commit comments