Skip to content

Commit dc981d5

Browse files
committed
Update README, add readme template
1 parent 9789e98 commit dc981d5

File tree

2 files changed

+62
-29
lines changed

2 files changed

+62
-29
lines changed

README.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,44 @@
11
The repository consists of samples using the [Ignite UI For Javascript](https://www.infragistics.com/products/ignite-ui) library in a context of ASP.NET Core Web Application.
22

3+
This repository consists of different ASP.NET Core applications. The idea is to demonstrate examples of real world scenarios, and how easy is the integration between the server and a web application, built using any modern UI framework such as `Angular`, `React`, `Web Components`, `jQuery`, etc.
4+
5+
Each ASP.NET Core application refers a client application built using any of Ignite UI frameworks - [`Ignite UI for Angular`](https://www.infragistics.com/products/ignite-ui-angular), [`Ignite UI for jQuery`](https://www.infragistics.com/products/ignite-ui-jquery), [`Ignite UI for React`](https://www.infragistics.com/products/ignite-ui-react), [`Ignite UI for Web Components`](https://www.infragistics.com/products/ignite-ui-web-components).
6+
7+
The examples in this repository have the server and client parts configured to run together - the server application refers the client in the `ClientApp` dir by a submodule. However, each application has its own purpose and is agnostic to the other part, meaning that they are easily replaceable.
8+
9+
For example, you as a developer may create a client application to consume the same endpoint. In order to use different client application, open the .csproj file and edit the URL of repository, where the client application lives:
10+
```xml
11+
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug'">
12+
<Exec Condition="!Exists('$(SpaRoot)')" WorkingDirectory="$(SolutionDir)" Command="git clone -j8 https://github.com/IgniteUI/TaskPlanner.git ClientApp "/>
13+
<Exec Condition="Exists('$(SpaRoot)')" WorkingDirectory="$(SpaRoot)" Command="git pull origin master" />
14+
<Exec Condition="!Exists('$(SpaRoot)node_modules')" WorkingDirectory="$(SpaRoot)" Command="npm install" />
15+
</Target>
16+
```
17+
18+
The `Exec` commands are needed to:
19+
1) Clone the client app repository
20+
2) Pull changes
21+
3) Execute `npm install`
22+
23+
24+
### Applications
25+
326
* [Scheduler CRUD operations](https://github.com/IgniteUI/ASP.NET-Core-Samples/tree/master/Scheduler-Core-CRUD) - The sample demonstrates how the user could execute and perform CRUD operations with [Scheduler](https://www.igniteui.com/scheduler/overview) component.
427
* [Dock Manager with Data Analysis](https://github.com/IgniteUI/ASP.NET-Core-Samples/tree/master/DockManager-DataAnalysis#dock-manager-with-data-analysis) - The sample demonstrates how the user can analyse selected data from a [data grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid.html) component through a [data chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/data-chart.html) representation or [conditional cell formatting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/framework-and-features/data-analysis.html#conditional-cell-formatting).
528
For more information check out the [README.md](https://github.com/IgniteUI/ASP.NET-Core-Samples/tree/master/DockManager-DataAnalysis#dock-manager-with-data-analysis) file.
629
* [Marketing Dashboard](https://github.com/IgniteUI/ASP.NET-Core-Samples/tree/master/MarketingDashboard) -
730
The **Angular Marketing Dashboard** application makes use of the [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting_started.html) [data chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/datachart.html), [map](https://www.infragistics.com/products/ignite-ui-angular/angular/components/map_overview.html), [doughnut chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/doughnutchart.html), [bullet graph](https://www.infragistics.com/products/ignite-ui-angular/angular/components/bulletgraph.html), [date picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date_picker.html), [list](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list.html), [dialog](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog.html) and [card](https://www.infragistics.com/products/ignite-ui-angular/angular/components/card.html) controls, styled with **Ignite UI for Angular** [theming engine](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/index.html) to tackle specific analytical challenges. The dashboard view brings together different data points a marketing expert would want to track like sessions, conversions and conversion costs.
8-
* [Task Planner API Application](https://github.com/IgniteUI/ASP.NET-Core-Samples/tree/master/TaskPlannerAPI) - The sample demonstrates how to use the [Github API](https://octokit.github.io/rest.js/v18) with [Octo Kit](https://octokit.github.io/rest.js/v18) in order to load Ignite UI for Angular Issues and Pull requests into different visual elements like List and Grid. This app can be used to easily track our work and tasks progress.
31+
* [Task Planner API Application](https://github.com/IgniteUI/ASP.NET-Core-Samples/tree/master/TaskPlannerAPI) - The sample demonstrates how to use the [Github API](https://octokit.github.io/rest.js/v18) with [Octo Kit](https://octokit.github.io/rest.js/v18) in order to load Ignite UI for Angular Issues and Pull requests into different visual elements like List and Grid. This app can be used to easily track our work and tasks progress.
32+
33+
### Adding new application
34+
35+
When adding new application
36+
37+
1. Use this template for the application [`README`](https://github.com/IgniteUI/ASP.NET-Core-Samples/wiki/Template-for-application-README-file.) file.
38+
2. Update the list with applications above.
39+
40+
41+
### Useful links
42+
- [Create web APIs with ASP.NET Core](https://docs.microsoft.com/en-us/aspnet/core/web-api/?view=aspnetcore-3.1)
43+
- [Use the Angular project template with ASP.NET Core](https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-3.1&tabs=visual-studio)
44+
- [Use the React project template with ASP.NET Core](hhttps://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-3.1&tabs=visual-studio)

TaskPlannerAPI/README.md

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,42 @@
1-
# TaskPlanner application
1+
### TaskPlanner Sample for ASP.NET Core
22

3-
### Starting the Application
3+
The `TaskPlanner` is a RESTful API application, consisting of a server, built on `ASP.NET Core` and a client web application, built on `Angular`. This model allows for easy integration between the server and any modern UI frameworks such as `Angular`, `React`, `Web Components`, `jQuery`, etc.
44

5-
TaskPlannerAPI is created with **ASP.NET Core 3.0+**. It depends on the [TaskPlanner](https://github.com/IgniteUI/TaskPlanner) application as a submodule added to the `ClientApp` dir.
5+
While the `TaskPlanner` server and client parts are configured to run together, each application has its own purpose and is agnostic to the other part, meaning that they are easily replaceable.
66

7-
- Press `CTRL + F5` to run the project or press `F5` to start run it in debug mode.
7+
### Starting the Application
8+
9+
- Press `CTRL + F5` to run the project or press `F5` to run it in debug mode.
810

911
> If you get the "*The Angular CLI process did not start listening for requests within the timeout period of 0 seconds*" message, you will need to run the client app separately. Just open a new command prompt in the `ClientApp` dir and execute `npm run start`.
1012
1113
### Application Structure
1214

13-
- REST API server. The [`IssuesController`](https://github.com/IgniteUI/ASP.NET-Core-Samples/tree/master/TaskPlannerAPI/Controllers/IssuesController.cs) demonstrates how to use Octokit library to fetch issues/PRs from a GitHub repository.
14-
- [`TaskPlanner`](https://github.com/IgniteUI/TaskPlanner) client application provides an effective means for managing projects and related tasks. Thus, it loads data from the REST API enabling the user to start managing - filtering and sorting tasks, editing tasks, adding new tasks. Built using Ignite UI for Angular, it shows nice UX UI perks like ability to Drag and Drop items from and to the List and Data Grid.
15+
- The `TaskPlannerAPI` is a basic Web API created with `ASP.NET Core` 3.0+. It has logic for fetching, manipulating and serving the data in an appropriate format. It also demonstrates how to use [`Octokit`](https://octokitnet.readthedocs.io/en/latest/) library to fetch issues/PRs from a GitHub repository.
16+
17+
- The [TaskPlanner](https://github.com/IgniteUI/TaskPlanner) client is an Angular web application. It provides an effective means for managing projects and related tasks. Thus, it loads data from the Web API endpoint, enabling the user to start managing - filtering and sorting tasks, editing tasks, adding new tasks. Built using Ignite UI for Angular, it shows nice UX UI perks like ability to Drag and Drop items from and to the List and Data Grid.
1518

16-
In order to use different client application, go ahead and open the .csproj file and edit the execution commands:
19+
The server application refers the client in the `ClientApp` dir by a submodule. This enables the two to run together, while making it easy to change either part. For example, you as a developer may create a client application on React in order to consume the same endpoint.
20+
21+
In order to use different client application, open the .csproj file and edit the URL of repository, where the client application lives:
1722
```xml
1823
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug'">
19-
<!-- Ensure Node.js is installed -->
20-
<Exec Command="node --version" ContinueOnError="true">
21-
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
22-
</Exec>
23-
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
24-
<Message Importance="high" Text="Custom message: SpaRoot is $(SpaRoot) and Root is $(SolutionDir)" />
25-
<Exec Condition="!Exists('$(SpaRoot)')" WorkingDirectory="$(SolutionDir)" Command="git clone -j8 https://github.com/IgniteUI/TaskPlanner.git ClientApp "/>
26-
<Exec Condition="Exists('$(SpaRoot)')" WorkingDirectory="$(SpaRoot)" Command="git pull origin master" />
27-
<Message Importance="high" Text="Custom message: Restoring dependencies using 'npm'. This may take several minutes..." />
28-
<Exec Condition="!Exists('$(SpaRoot)node_modules')" WorkingDirectory="$(SpaRoot)" Command="npm install" />
24+
<Exec Condition="!Exists('$(SpaRoot)')" WorkingDirectory="$(SolutionDir)" Command="git clone -j8 https://github.com/IgniteUI/TaskPlanner.git ClientApp "/>
25+
<Exec Condition="Exists('$(SpaRoot)')" WorkingDirectory="$(SpaRoot)" Command="git pull origin master" />
26+
<Exec Condition="!Exists('$(SpaRoot)node_modules')" WorkingDirectory="$(SpaRoot)" Command="npm install" />
2927
</Target>
3028
```
3129

32-
The first `Exec` command is performed in order to fetch the submodule (the repository where the client app lives) if it is not already fetched
33-
The second `Exec` command is used to pull the changes if it the remote client app is already fetched
34-
The third `Exec` command is used to perform `npm install`
30+
The `Exec` commands are needed to:
31+
1) Clone the client app repository
32+
2) Pull changes
33+
3) Execute `npm install`
3534

3635
### Framework(s)
3736

38-
`ASP.NET Core`, `Angular`
37+
- `Ignite UI for Angular`
38+
- `Angular`
39+
- `ASP.NET Core`
3940

4041

4142
### Components Used
@@ -45,10 +46,6 @@ The third `Exec` command is used to perform `npm install`
4546

4647
### Industry
4748

48-
Task Manager Tooling
49-
Project Manager Tooling
50-
Data manipulation
51-
52-
53-
### TaskPlanner Sample for ASP.NET Core
54-
ASP.NET Core web framework provides rich integration with Modern UI frameworks such as Angular, React, Web Components, jQuery etc. The TaskPlanner client application provides an effective means for managing projects and related tasks. Thus, it loads data from the REST API enabling the user to start managing - filtering and sorting tasks, editing tasks, adding new tasks. Built using Ignite UI for Angular, it shows nice UX UI perks like ability to Drag and Drop items from and to the List and Data Grid.
49+
- Task Manager Tooling
50+
- Project Manager Tooling
51+
- Data manipulation

0 commit comments

Comments
 (0)