|
1 | 1 | # [Liquid Prep - App](https://liquid-prep-app.s3-web.us-east.cloud-object-storage.appdomain.cloud/) |
2 | 2 |
|
3 | | -[](https://liquid-prep-app.s3-web.us-east.cloud-object-storage.appdomain.cloud/) |
| 3 | +[](https://liquid-prep-app.s3-web.us-east.cloud-object-storage.appdomain.cloud/) |
4 | 4 |
|
5 | 5 | Liquid Prep App is an user interface that is accessed on your mobile device to get water advise for the selected crop. It is a [Progressive Web App (PWA)](https://web.dev/progressive-web-apps/) developed with [Angular](https://angular.io/) web framework. |
6 | 6 |
|
7 | | -The Liquid Prep App gets the Weather and Crops data from the [Liquid Prep Backend](https://github.com/Liquid-Prep/Liquid-Prep/tree/master/backend) service and the soil moisture data from the [Soil Sensor Module](https://github.com/Liquid-Prep/Liquid-Prep/tree/master/soilSensor). With all three weather, crop and soil moisture data the app computes and provides water advise for the selected crop. |
| 7 | +The Liquid Prep App gets the Weather and Crops data from the [Liquid Prep Backend](https://github.com/Liquid-Prep/LiquidPrep-Backend) service and the soil moisture data from the [Liquid Prep Hardware](https://github.com/Liquid-Prep/LiquidPrep-Hardware). After analysis of the weather, crop and soil moisture data the app computes and provides water advise for the selected crop. |
8 | 8 |
|
9 | 9 | The Liquid Prep App can be run on your local machine for development and testing purpose. And it is deployed on [IBM Cloud Object Storage](https://www.ibm.com/ca-en/cloud/object-storage) for production to be accessed globally. |
10 | 10 |
|
11 | 11 | **[Click to access Liquid Prep App](https://liquid-prep-app.s3-web.us-east.cloud-object-storage.appdomain.cloud/)** |
12 | 12 |
|
| 13 | +## Get Started |
| 14 | + |
13 | 15 | Instructions on how to run the App, |
14 | 16 |
|
15 | 17 | - [Liquid Prep - App](#liquid-prep---app) |
| 18 | + - [Get Started](#get-started) |
16 | 19 | - [Pre-requisites](#pre-requisites) |
17 | | -- [Run App Locally:](#run-app-locally) |
18 | | -- [Deploy App in IBM Cloud Object Storage](#deploy-app-in-ibm-cloud-object-storage) |
19 | | - - [Important Notes:](#important-notes) |
| 20 | + - [Run App Locally](#run-app-locally) |
| 21 | + - [Configure and Deploy App in IBM Cloud Object Storage](#configure-and-deploy-app-in-ibm-cloud-object-storage) |
| 22 | + - [Contributing](#contributing) |
| 23 | + - [License](#license) |
20 | 24 |
|
21 | 25 | ## Pre-requisites |
22 | 26 |
|
23 | | -1. Node and NPM: |
24 | | - - [Install Node and NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) |
25 | | -2. Angular CLI |
26 | | - - [Install Angular CLI](https://cli.angular.io/) |
27 | | -3. Git: |
28 | | - - [Install Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git/) |
29 | | - - [Configure Git](https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup) |
30 | | - - [Git account setup and configuration](https://git-scm.com/book/en/v2/GitHub-Account-Setup-and-Configuration) |
31 | | -4. Liquid Prep project: |
32 | | - - [Git clone Liquid Prep project](https://github.com/Liquid-Prep/Liquid-Prep) |
33 | | -5. IBM Cloud account: |
34 | | - - [Create an IBM Cloud account](https://cloud.ibm.com/registration) |
35 | | -6. Liquid Prep Backend Service Endpoint: |
36 | | - - [Deploy Liquid Prep Backend in IBM Cloud Functions](https://github.com/Liquid-Prep/Liquid-Prep/tree/master/backend#deploy-liquid-prep-backend-service) and note down the `CLOUD_FUNCTIONS_URL` which is the Backend service endpoint. This endpoint will be required later for deploying the App. |
37 | | - |
38 | | -# Run App Locally: |
39 | | - |
40 | | -1. **Build the App** |
41 | | - |
42 | | - - Start a terminal/CMD in `Liquid-Prep/liquid-prep-app` folder. |
43 | | - - Run `npm install`. |
44 | | - |
45 | | -2. **Config.json** |
46 | | - |
47 | | - - Rename the file `src/config-sample.json` to `src/config.json`. |
48 | | - - Update the `src/config.json` with Liquid Prep Backend Service Endpoint noted down in the [Pre-requisites](#pre-requisites) 6th point. |
49 | | - |
50 | | -3. **Run the App** |
51 | | - - Run `npm start`. |
52 | | - - Open the browser and enter `http://localhost:4200/`. The app will automatically reload if you change any of the source files. |
53 | | - |
54 | | -**NOTE:** - You can also run the App by executing Angular CLI command `ng serve` too. |
55 | | - |
56 | | -# [Deploy App in IBM Cloud Object Storage](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-getting-started-cloud-object-storage) |
57 | | - |
58 | | -1. **Config.json** |
59 | | - |
60 | | - - Rename the file `src/config-sample.json` to `src/config.json`. |
61 | | - - Update the `src/config.json` with Liquid Prep Backend Service Endpoint noted down in the [Pre-requisites](#pre-requisites) 6th point. |
62 | | - |
63 | | -2. **Build the App for production** |
64 | | - - Start a terminal/CMD in `Liquid-Prep/liquid-prep-app` folder. |
65 | | - - Run `npm install`. |
66 | | - - Run `npm run build-prod`. |
67 | | - - The build artifacts will be created and stored in the `dist/liquid-prep-app` directory. |
68 | | - |
69 | | -**NOTE:** - You can also build the App by executing Angular CLI command `ng build --prod` too. |
70 | | - |
71 | | -3. **Deploy App in IBM Cloud Object Storage** |
72 | | - |
73 | | - - Log into your [IBM Cloud account](https://cloud.ibm.com/login). |
74 | | - - Enter **Object Storage** in the search bar and select **Object Storage** from the results. |
75 | | - <p align="left"> |
76 | | - <img src="../images/App/COS/cosSelect.PNG" width ="30%" height="30%"> |
77 | | - </p> |
78 | | - |
79 | | - - Select **Cloud Object Storage Lite** or **Cloud Object Storage Classic** based on your requirement and click **Create** button in bottom right. |
80 | | - <p align="left"> |
81 | | - <img src="../images/App/COS/cosOption.PNG" width ="30%" height="30%"> |
82 | | - </p> |
83 | | - |
84 | | - - Next configure the Object Storage by selecting the right plan for your requirement, enter a service name, select a resource group and optionally enter a tag. |
85 | | - <p align="left"> |
86 | | - <img src="../images/App/COS/cosConfig.PNG" width ="30%" height="30%"> |
87 | | - </p> |
88 | | - |
89 | | - - Now your Object Storage will be created and you will be routed to its dashboard. Select **Create bucket** tab and click on **Create Bucket** button. |
90 | | - <p align="left"> |
91 | | - <img src="../images/App/COS/cosCreateBucket.PNG" width ="30%" height="30%"> |
92 | | - </p> |
93 | | - |
94 | | - - Configure the bucket by entering a **Unique bucket name**, select the required **Resiliency**, **Location** and **Storage class** options. Then configure **Static website hosting** by clicking **Add rule**, turn on the **Public access** switch and enter `index.html` for **Index document**. Finally click **Create Bucket** button end of the page. |
95 | | - <p align="left"> |
96 | | - <img src="../images/App/COS/cosBucketConfig1.PNG" width ="30%" height="30%"> |
97 | | - </p> |
98 | | - <p align="left"> |
99 | | - <img src="../images/App/COS/cosBucketConfig3.PNG" width ="30%" height="30%"> |
100 | | - </p> |
101 | | - <p align="left"> |
102 | | - <img src="../images/App/COS/cosBucketConfig2.PNG" width ="30%" height="30%"> |
103 | | - </p> |
104 | | - |
105 | | - - Now a bucket will be created and shown in your Cloud Object Storage dashboard. Click on the bucket created. |
106 | | - <p align="left"> |
107 | | - <img src="../images/App/COS/cosBucketCreated.PNG" width ="30%" height="30%"> |
108 | | - </p> |
109 | | - |
110 | | - - Click on the **Upload** button and upload all the contents in `dist/liquid-prep-app` directory which was created when you built the app. |
111 | | - <p align="left"> |
112 | | - <img src="../images/App/COS/cosUpload.PNG" width ="30%" height="30%"> |
113 | | - </p> |
114 | | - - Contents being uploaded from nested directories will need to prefixed with a path in the **Prefix for objects** field to create equivalent folders in object storage. |
115 | | - E.g. **assets/crops-images/** for contents located in the crops-images directory. |
116 | | - |
117 | | - - Once uploading is complete, select **Configuration** for the bucket. |
118 | | - <p align="left"> |
119 | | - <img src="../images/App/COS/cosAppURL1.PNG" width ="30%" height="30%"> |
120 | | - </p> |
121 | | - |
122 | | - - Scroll down to the very bottom of the page and you will find the URL endpoints for the App that can be shared to access the Liquid Prep App in the browser |
123 | | - <p align="left"> |
124 | | - <img src="../images/App/COS/cosAppURL2.PNG" width ="30%" height="30%"> |
125 | | - </p> |
126 | | - |
127 | | -### Important Notes: |
128 | | - |
129 | | -- Once a Bucket is created for a Cloud Object Storage, don't delete it. You can build your App with new changes and upload the `dist/liquid-prep-app` contents for the same Bucket. If you delete the Bucket you won't be able create another with the same name and you will have to wait for 7 days for the same name. Learn more about the [Cloud Object Storage delete bucket](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-compatibility-api-bucket-operations#compatibility-api-delete-bucket). |
| 27 | +1. Node and NPM: |
| 28 | + - [Install Node and NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) |
| 29 | +2. Angular CLI |
| 30 | + - [Install Angular CLI](https://cli.angular.io/) |
| 31 | +3. Git: |
| 32 | + - [Install Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git/) |
| 33 | + - [Configure Git](https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup) |
| 34 | + - [Git account setup and configuration](https://git-scm.com/book/en/v2/GitHub-Account-Setup-and-Configuration) |
| 35 | +4. Liquid Prep project: |
| 36 | + - [Git clone Liquid Prep project](https://github.com/Liquid-Prep/Liquid-Prep) |
| 37 | +5. IBM Cloud account: |
| 38 | + - [Create an IBM Cloud account](https://cloud.ibm.com/registration) |
| 39 | +6. Liquid Prep Backend Service Endpoint: |
| 40 | + - [Deploy Liquid Prep Backend in IBM Cloud Functions](https://github.com/Liquid-Prep/Liquid-Prep/tree/master/backend#deploy-liquid-prep-backend-service) and note down the `CLOUD_FUNCTIONS_URL` which is the Backend service endpoint. This endpoint will be required later for deploying the App. |
| 41 | + |
| 42 | +## Run App Locally |
| 43 | + |
| 44 | +1. **Build the App** |
| 45 | + |
| 46 | + - Start a terminal/CMD in `LiquidPrep-App/liquid-prep-app` folder. |
| 47 | + - Run `npm install`. |
| 48 | + |
| 49 | +2. **Config.json** |
| 50 | + |
| 51 | + - In the `LiquidPrep-App/liquid-prep-app/src/` folder, rename the file `config-sample.json` to `config.json`. |
| 52 | + - Update the `config.json` with Liquid Prep Backend Service Endpoint noted down in the [Pre-requisites](#pre-requisites) 6th point. |
| 53 | + |
| 54 | +3. **Run the App** |
| 55 | + |
| 56 | + - Run `npm start`. |
| 57 | + - Open the browser and enter `http://localhost:4200/`. The app will automatically reload if you change any of the source files. |
| 58 | + |
| 59 | + **NOTE:** You can also run the App by executing Angular CLI command `ng serve` too. |
| 60 | + |
| 61 | +## Configure and Deploy App in IBM Cloud Object Storage |
| 62 | + |
| 63 | +The Liquid Prep App can be built and deployed in production for accessing the endpoint URL in any browser (recommended Chrome) to spin up the App in the browser. |
| 64 | + |
| 65 | +Please follow the step wise instructions in the [IBM Cloud Deployment Documentation](IBM-CLOUD-SETUP.md). |
| 66 | + |
| 67 | +## Contributing |
| 68 | + |
| 69 | +Please read [CONTRIBUTING.md](https://github.com/Liquid-Prep/Liquid-Prep/blob/main/CONTRIBUTING.md) for details on our code of conduct, areas where we'd like to see community contributions, and the process for submitting pull requests to the project. |
| 70 | + |
| 71 | +## License |
| 72 | + |
| 73 | +Unless otherwise noted, this project is licensed under the Apache 2 License - see the [LICENSE](https://github.com/Liquid-Prep/Liquid-Prep/blob/main/LICENSE) file for details. |
0 commit comments