5
5
< meta content ="text/html; charset=utf-8 " http-equiv ="Content-Type " />
6
6
< link type ="text/css " rel ="stylesheet " href ="bootstrap.min.css " />
7
7
< title > Development Guide</ title >
8
+ < style type ="text/css ">
9
+ .auto-style1 {
10
+ font-weight : bold;
11
+ }
12
+ </ style >
8
13
</ head >
9
14
10
15
< body >
@@ -21,6 +26,12 @@ <h4>About This Document</h4>
21
26
< a href ="https://aspnetboilerplate.com/Pages/Documents "> documentation</ a > .</ p >
22
27
< p > Before reading this document, it's suggested to run the application and explore
23
28
the user interface. This will help you to have a better understanding of concepts defined here.</ p >
29
+ < div class ="bs-callout bs-callout-warning ">
30
+ < p class ="auto-style1 "> About Server Side</ p >
31
+ < p > This document is only for the < strong > Angular</ strong > application. For
32
+ < strong > server side</ strong > , see < a href ="Development-Guide-Core.html "> ASP.NET
33
+ Core documentation</ a > too.</ p >
34
+ </ div >
24
35
< h4 > Pre Requirements</ h4 >
25
36
< p > Following tools are needed in order to use the solution:</ p >
26
37
< ul >
@@ -29,7 +40,7 @@ <h4>Pre Requirements</h4>
29
40
< li > < a href ="https://yarnpkg.com/lang/en/ " target ="_blank "> Yarn</ a > </ li >
30
41
</ ul >
31
42
< p > In addition, see < a href ="Development-Guide-Core.html "> AspNet Core</ a >
32
- documentation for server side requirements.</ p >
43
+ documentation for server side requirements and other server side features .</ p >
33
44
< h5 > IDE</ h5 >
34
45
< p > It's suggested to use an IDE to develop your project. We used
35
46
< a href ="https://www.visualstudio.com "> Visual Studio 2017</ a > ,
@@ -250,7 +261,7 @@ <h3>AppModule</h3>
250
261
will mostly work on this application to add your business requirements. A
251
262
screenshot from the application:</ p >
252
263
< p >
253
- < img class ="img-thumbnail " alt ="Dashboard " height ="870 " src ="images/dashboard .png " width ="1339 " /> </ p >
264
+ < img class ="img-thumbnail " alt ="Dashboard " height ="965 " src ="images/dashboardV2 .png " width ="1235 " /> </ p >
254
265
< p > Folder structure of the source code is like that:</ p >
255
266
< p >
256
267
< img class ="img-thumbnail " alt ="Angular app module files " height ="450 " src ="images/ng2-app-module.png " width ="223 " /> </ p >
@@ -281,18 +292,19 @@ <h4>Edition Management</h4>
281
292
< p >
282
293
< img class ="img-thumbnail " alt ="Editions page " src ="images/editions-page-core-2.png " /> </ p >
283
294
< p > Editions are used to group feature values and assign to tenants. When we
284
- click Actions/Edit for an edition, we can see it's assigned features:</ p >
295
+ click Actions/Edit for an edition, we can see it's poperties:</ p >
296
+ < p >
297
+ < img class ="img-thumbnail " alt ="Edit Edition " height ="882 " src ="images/edition-edit.png " width ="595 " /> </ p >
298
+ < p >
299
+ An edition can be free or paid. If it's a paid edition then you should enter
300
+ monthly and annual prices. You can allow tenants to use trial version of this
301
+ edition for a specified days. Then you can determine an expire strategy: How
302
+ many days to allow a tenant to use the application after subscription expires.
303
+ And finally, you can deactivate tenant or assign to a free edition if they don't
304
+ extend their subscription.</ p >
305
+ < p > Features tab is used to determing features available for the edition:</ p >
285
306
< p >
286
307
< img class ="img-thumbnail " alt ="Edit edition features " height ="343 " src ="images/edition-feature-editing-core.png " width ="615 " /> </ p >
287
- < p > Startup project only contains Chat feature (and it's 2 sub-features) that can
288
- be enabled/disabled per edition/tenant. All features are defined in < strong >
289
- AppFeatureProvider</ strong > class in the < a href ="Development-Guide-Core.html ">
290
- server side</ a > and automatically rendered here. Feature values are stored in < strong >
291
- AbpFeatures</ strong > table in the database. Features are not restricted to boolean
292
- (enabled/disabled) values and can contain different type of values as shown
293
- below: </ p >
294
- < p >
295
- < img class ="img-thumbnail " alt ="Edition feature editing " height ="317 " src ="images/edition-feature-editing.png " width ="613 " /> </ p >
296
308
< p > See
297
309
< a href ="https://aspnetboilerplate.com/Pages/Documents/Feature-Management ">
298
310
feature management</ a > and
@@ -320,7 +332,7 @@ <h4>Tenant Management</h4>
320
332
< p > When we
321
333
click the "< strong > Create New Tenant</ strong > " button, a dialog is shown:</ p >
322
334
< p >
323
- < img class ="img-thumbnail " alt ="Creating tenant " height ="667 " src ="images/create- tenant-4 .png " width ="615 " /> </ p >
335
+ < img class ="img-thumbnail " alt ="Tenant Creation Modal " height ="771 " src ="images/tenant-create-modal .png " width ="596 " /> </ p >
324
336
< p > < strong > Tenancy name</ strong > should be unique and can not contain spaces or
325
337
other special chars since it may be used as subdomain name (like
326
338
tenancyname.mydomain.com). < strong > Name</ strong > can be anything. < strong > Admin email</ strong >
@@ -336,6 +348,9 @@ <h4>Tenant Management</h4>
336
348
That means you can use host database for some tenants and create dedicated
337
349
databases for some other tenants. Even you can < strong > group </ strong > some
338
350
tenants in a separated database.</ p >
351
+ < p > Once you assign an edition to the tenant, you can select an expiration date
352
+ (see edition management section to know what happens after subscription
353
+ expiration).</ p >
339
354
< h5 > Tenant Edition and Features</ h5 >
340
355
< p > An < strong > edition</ strong > can be < strong > assigned</ strong > to a tenant
341
356
(while creating or editing). Tenant will inherit all features of the assigned
@@ -356,6 +371,13 @@ <h5>Using Tenancy Name As Subdomain</h5>
356
371
< strong > tenant1</ strong > .mydomain.com, < strong > tenant2</ strong > .mydomain.com and
357
372
so on. ASP.NET Zero automatically identify and get tenant name from subdomain.
358
373
See application configuration section.</ p >
374
+ < h4 > Host Dashboard</ h4 >
375
+ < p > Host dashboard is used to show some statistics about tenants, editions and
376
+ income:</ p >
377
+ < p >
378
+ < img class ="img-thumbnail " alt ="Host dashboard " height ="495 " src ="images/host-dashboard%20-%20Copy.jpg " width ="600 " /> </ p >
379
+ < p > This is a fully implemented dashboard except two sample statistics (sample
380
+ statistics 1 & 2) those are placeholders for your own statistics.</ p >
359
381
< h4 > Organization Units</ h4 >
360
382
< p > Organization units (OU) are used to hierarchically group user and entities.
361
383
Then you can get user or entities based on their OUs. When we click
@@ -497,6 +519,12 @@ <h4>Audit Logs</h4>
497
519
< img class ="img-thumbnail " alt ="Audit Log " height ="827 " src ="images/audit-logs-detail.png " width ="620 " /> </ p >
498
520
< p >
499
521
Audit log report is provided by < strong > AuditLogAppService</ strong > class.</ p >
522
+ < h4 >
523
+ Subscription</ h4 >
524
+ < p >
525
+ Tenants can manage (show, extend or upgrade) their edition/plan subscriptions using this page:</ p >
526
+ < p >
527
+ < img class ="img-thumbnail " alt ="Subscription " height ="300 " src ="images/subscription.png " width ="413 " /> </ p >
500
528
< h4 > Host Settings</ h4 >
501
529
< p > Host settings page is used to configure some system settings:</ p >
502
530
< p >
@@ -554,10 +582,8 @@ <h4>Tenant Dashboard</h4>
554
582
your actual dashboard. It's implemented with app/main/< strong > dashboard.component</ strong >
555
583
in < strong > main.module</ strong > .</ p >
556
584
< p >
557
- < img class ="img-thumbnail " alt ="Dashboard " height ="870 " src ="images/dashboard.png " width ="1339 " /> </ p >
558
- < p > In this dashboard, only < strong > Member Activity</ strong > graph data is retrieved from
559
- server. You can click the refresh button to generate random
560
- graphs.</ p >
585
+ < img class ="img-thumbnail " alt ="Dashboard " height ="965 " src ="images/dashboardV2.png " width ="1235 " /> </ p >
586
+ < p > Client gets all data from server, server generates random data.</ p >
561
587
< h4 > Notifications</ h4 >
562
588
< p > Notification icon is located next to the language selection button. The number in the red circle shows unread notification count.</ p >
563
589
< p > < img alt ="notifications " src ="images/notifications-icon.png " width ="189 " class ="img-thumbnail "/> </ p >
@@ -823,7 +849,7 @@ <h3>Used Library & Frameworks</h3>
823
849
< p > Many open source frameworks and libraries are used to build ASP.NET Zero
824
850
project. Here, a list of all libraries:</ p >
825
851
< ul >
826
- < li > < a href ="https://angular.io/ " target ="_blank "> Angular (v2+) </ a > </ li >
852
+ < li > < a href ="https://angular.io/ " target ="_blank "> Angular</ a > </ li >
827
853
< li > < a href ="https://cli.angular.io/ " target ="_blank "> Angular-cli</ a > </ li >
828
854
< li > < a href ="http://typescriptlang.org/ " target ="_blank "> Typescript</ a > </ li >
829
855
< li > < a href ="http://asp.net/signalr " target ="_blank "> SignalR</ a > </ li >
0 commit comments