What is the difference between SAPUI5 and Fiori apps technically?

Question

There is a lot of information about SAPUI5 and SAP Fiori. What's the difference, what's needed to build them?

Answer 1

SAP Fiori is a Design Guide for building Web-based App that are easy to use, responsive, delightful, etc.
The technology for SAP Fiori is based on SAP UI5.
A good start for information about the SAP Fiori Guidelines are open-sap courses.

To build a SAP UI5 Application and deploy it on the HANA XS Application server:

Prerequisites

• Eclipse
• SAP Plugins (for Eclipse Luna): from https://tools.hana.ondemand.com/luna (installed via Help -> Install New Software...
• SAP HANA (including configured XS Server)

Build a simple SAP UI5 Application and deploy on SAP HANA XS Server:

• In Eclipse
• Project Explorer -> Context Menu -> New -> Project... -> SAPUI5 Application Development -> Application Project -> Next -> <enter project name> -> Next -> <Enter Name> -> Finish
• Share Projrect: Right click on project -> Team -> Share Project -> SAP HANA Repository -> Next -> Choose desired Repository, choose Parent Package via Browse button
• add .xsaccess with content: { "exposed" : true, "authentication" : { "method" : "Form"}, "prevent_xsrf" : true } and .xsapp (empty file) to the WebContent folder
• Change within index.html <script src="resources/sap-ui-core.js" to <script src="/sap/ui5/1/resources/sap-ui-core.js"
• Activate all changes: Right Click on Project -> Team -> Activate All..
• Open URL in your browser http://sap-hana-xs-url:80<instance_number>/your/parent/packages/project/WebContent/index.html (Example: http://hana:8000/tests/app01/WebContent/index.html) Be aware that the URL is case sensitive.

Troubleshooting:

• If you get an Error 404 then either your URL path is wrong or you might have forgotten to create and activate the .xsapp, xsaccess files
• If the page is empty then you might have forgotten to change the library path within the index.html file.