Carlos Cañizares Estévez 8 years ago
parent
commit
7948b7dcbc
6 changed files with 21 additions and 20 deletions
  1. +4
    -4
      README.md
  2. BIN
      img/docker_settings.png
  3. +1
    -6
      src/Mobile/README.md
  4. +6
    -0
      src/Web/WebMVC/Models/Order.cs
  5. +3
    -3
      src/Web/WebMVC/Views/Order/Create.cshtml
  6. +7
    -7
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html

+ 4
- 4
README.md View File

@ -1,4 +1,4 @@
# eShopOnContainers - Microservices Architecture and Containers based Reference Application
# eShopOnContainers - Microservices Architecture and Containers based Reference Application (**ALPHA state**)
Sample .NET Core reference application, powered by Microsoft, based on a simplified microservices architecture and Docker containers. It is cross-platform thanks to .NET Core services capable of running on Linux or Windows containers depending on your Docker host.
<img src="img/eshop_logo.png">
@ -25,7 +25,7 @@ Finally, those microservices are consumed by multiple client web and mobile apps
<img src="img/xamarin-mobile-App.png">
> ### Note on tested Docker Containers/Images
> The development and testing of this project was (as of Dec. 2016) done <b>only on Docker Linux containers</b> running in development machines with "Docker for Windows" and the default Hyper-V Linux VM (MobiLinuxVM) installed by "Docker for Windows".
> The development and testing of this project was (as of January 2017) done <b>only on Docker Linux containers</b> running in development machines with "Docker for Windows" and the default Hyper-V Linux VM (MobiLinuxVM) installed by "Docker for Windows".
The <b>Windows Containers scenario has not been tested</b>, but the application should be able to run on Windows Containers, as well, as the .NET Core services have also been tested running on plain Windows (with no Docker).
The app was also partially tested on "Docker for Mac" using a development MacOS machine with .NET Core and VS Code installed. However, that is still a scenario using Linux containers running on the VM setup in the Mac by the "Docker for Windows" setup.
@ -49,8 +49,8 @@ MAC DEV MACHINE
### Installing and configuring Docker in your development machine
#### Set needed assigned Memory and CPU to Docker
In this application (Mid-December 2016 version) we run 3 instances of SQL Server running as containers plus 6 ASP.NET Core apps/services and 1 Redis server all of them running as Docker containers. So it's important to set Docker up properly with enough memory RAM and CPU assigned to it or you will get difficult errors when starting the containers with "docker-compose up".
Once Docker for Windows/Mac is installed in your machine, enter into its Settings and the Advanced menu option so you are able to adjust it to the new values (Memory: Around 7GB and CPU:4) as shown in the image. Usually you might need a 16GB or 12GB memory machine for this configuration. If you have a less powerful machine, you can try with a lower configuration and/or by not starting certain containers like the basket and Redis. But if you don't start all the containers, the application will not fully function properly, of course.
In this application (January 2017 version) we run 1 instance of SQL Server running as a container plus 6 ASP.NET Core apps/services and 1 Redis server all of them running as Docker containers. So, especially because of SQL Server requirements on memory, it is important to set Docker up properly with enough memory RAM and CPU assigned to it or you will get difficult errors when starting the containers with "docker-compose up".
Once Docker for Windows/Mac is installed in your machine, enter into its Settings and the Advanced menu option so you are able to adjust it to the new values (Memory: Around 6GB and CPU:4) as shown in the image. Usually you might need a 16GB or 12GB memory machine for this configuration. If you have a less powerful machine, you can try with a lower configuration and/or by not starting certain containers like the basket and Redis. But if you don't start all the containers, the application will not fully function properly, of course.
<img src="img/docker_settings.png">


BIN
img/docker_settings.png View File

Before After
Width: 1026  |  Height: 612  |  Size: 57 KiB Width: 1655  |  Height: 988  |  Size: 118 KiB

+ 1
- 6
src/Mobile/README.md View File

@ -4,16 +4,11 @@ eShopOnContainers is a reference app whose imagined purpose is to serve the mobi
<img src="Images/eShopOnContainers_Architecture_Diagram.png" alt="eShopOnContainers" Width="800" />
###Try it out:
You can download and build the app's source as-is, preconfigured to consume our Azure service instance.
###Supported platforms: iOS, Android and Windows
###The app architecture consists of two parts:
1. A Xamarin.Forms mobile app for iOS, Android and Windows.
2. A .NET Web API-backed Entity Framework based Azure Mobile Service for data.
**The Azure Mobile Service does not need to be deployed by you.** There is already an instance of the service up and running in Azure, and the mobile app is configured by default to consume that service instance. We've included the code for the service so that you may run your own service instance on Azure if you'd like.
2. Several .NET Web API microservices deployed as Docker containers.
##Xamarin.Forms App (eShopOnContainers)


+ 6
- 0
src/Web/WebMVC/Models/Order.cs View File

@ -1,6 +1,7 @@
using Microsoft.eShopOnContainers.WebMVC.Models.Annotations;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
@ -20,6 +21,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Models
public string Status { get; set; }
public decimal Total {get;set;}
[Required]
public string City { get; set; }
[Required]
@ -31,15 +33,19 @@ namespace Microsoft.eShopOnContainers.WebMVC.Models
public string ZipCode { get; set; }
[Required]
[DisplayName("Card number")]
public string CardNumber { get; set; }
[Required]
[DisplayName("Cardholder name")]
public string CardHolderName { get; set; }
public DateTime CardExpiration { get; set; }
[RegularExpression(@"(0[1-9]|1[0-2])\/[0-9]{2}", ErrorMessage = "Expiration should match a valid MM/YY value")]
[CardExpiration(ErrorMessage = "The card is expired"), Required]
[DisplayName("Card expiration")]
public string CardExpirationShort { get; set; }
[Required]
[DisplayName("Card security number")]
public string CardSecurityNumber { get; set; }
public int CardTypeId { get; set; }


+ 3
- 3
src/Web/WebMVC/Views/Order/Create.cshtml View File

@ -49,7 +49,7 @@
<div class="col-md-6">
<div class="form-group">
<label asp-for="CardNumber" class="esh-orders_new-title">Card number</label>
<input asp-for="CardNumber" class="form-control form-input" type="text" placeholder="000000000"/>
<input asp-for="CardNumber" class="form-control form-input" type="text" placeholder="000000000000000"/>
<span asp-validation-for="CardNumber" class="alert alert-danger" />
</div>
</div>
@ -63,14 +63,14 @@
<div class="col-md-6">
<div class="form-group">
<label asp-for="CardExpirationShort" class="esh-orders_new-title">Expiration date</label>
<input asp-for="CardExpirationShort" class="form-control form-input" type="text" placeholder="00/00"/>
<input asp-for="CardExpirationShort" class="form-control form-input form-input-medium" type="text" placeholder="MM/YY"/>
<span asp-validation-for="CardExpirationShort" class="alert alert-danger" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label asp-for="CardSecurityNumber" class="esh-orders_new-title">Security code</label>
<input asp-for="CardSecurityNumber" class="form-control form-input" type="text" placeholder="000"/>
<input asp-for="CardSecurityNumber" class="form-control form-input form-input-small" type="text" placeholder="000"/>
<span asp-validation-for="CardSecurityNumber" class="alert alert-danger" />
</div>
</div>


+ 7
- 7
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html View File

@ -45,7 +45,7 @@
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardnumber'].valid && newOrderForm.controls['cardnumber'].touched}">
<label class="esh-orders_new-title">Card number</label>
<input class="form-control form-input" type="text" placeholder="Card number" [formControl]="newOrderForm.controls['cardnumber']">
<input class="form-control form-input" type="text" placeholder="000000000000000" [formControl]="newOrderForm.controls['cardnumber']">
<div *ngIf="newOrderForm.controls['cardnumber'].hasError('required') && newOrderForm.controls['cardnumber'].touched" class="alert alert-danger">Required field.</div>
</div>
</div>
@ -56,17 +56,17 @@
<div *ngIf="newOrderForm.controls['cardholdername'].hasError('required') && newOrderForm.controls['cardholdername'].touched" class="alert alert-danger">Required field.</div>
</div>
</div>
<div class="col-md-3">
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['expirationdate'].valid && newOrderForm.controls['expirationdate'].touched}">
<label class="esh-orders_new-title">Expiration date</label>
<input class="form-control form-input form-input-medium" type="text" placeholder="Card expiration" [formControl]="newOrderForm.controls['expirationdate']">
<input class="form-control form-input form-input-medium" type="text" placeholder="MM/YY" [formControl]="newOrderForm.controls['expirationdate']">
<div *ngIf="newOrderForm.controls['expirationdate'].hasError('required') && newOrderForm.controls['expirationdate'].touched" class="alert alert-danger">Required field.</div>
</div>
</div>
<div class="col-md-3">
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['securitycode'].valid && newOrderForm.controls['securitycode'].touched}">
<label class="esh-orders_new-title">Security code</label>
<input class="form-control form-input form-input-small" type="text" placeholder="Card security Code" [formControl]="newOrderForm.controls['securitycode']">
<input class="form-control form-input form-input-small" type="text" placeholder="000" [formControl]="newOrderForm.controls['securitycode']">
<div *ngIf="newOrderForm.controls['securitycode'].hasError('required') && newOrderForm.controls['securitycode'].touched" class="alert alert-danger">Required field.</div>
</div>
</div>
@ -102,9 +102,9 @@
</section>
<section class="esh-orders_new-section">
<div class="form-group">
<div class="col-md-8">
<div class="col-md-9">
</div>
<div class="col-md-4">
<div class="col-md-2">
<button type="submit" class="btn esh-orders_new-placeOrder" [disabled]="!newOrderForm.valid">[ Place Order ]</button>
</div>
</div>


Loading…
Cancel
Save