tag:blogger.com,1999:blog-20386688796696857342024-02-19T04:09:10.530-08:00Virtual Notepad :::: Being Rendered ::::Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.comBlogger54125tag:blogger.com,1999:blog-2038668879669685734.post-21558043342156691052018-10-24T09:55:00.000-07:002018-10-29T03:44:40.281-07:00Let's build clean and Fast Angular application<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">The wait is over and Angular 7 is out, finally time has come to write about some tips to build fast angular application.In this blog i will share my experience with practices that you need to follow when you are starting a new project.</span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">There are three primary things important when you are starting to build an application with Angular.</span></div>
<ol style="text-align: left;">
<li style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">Project Architecture</span></li>
<li style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">Application Infrastructure</span></li>
<li style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">Conventions,Formating and Tooling</span></li>
</ol>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: justify;">
<div>
<div style="text-align: justify;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><u>CONVENTIONS,FORMATTING AND TOOLING : </u></span></b></div>
</div>
<div>
<div style="text-align: justify;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b></div>
</div>
<div>
<div style="text-align: justify;">
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;">Always place the Angular application outside your backend code</span></h3>
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-weight: normal;">Keep the application in its own repository so that can be deployed/versioned separately. It will also help in tooling. One key rule is to treat it as a real application.</span></span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div>
<div style="text-align: justify;">
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;">Use VS Code for best experience </span></h3>
<span style="font-weight: normal;"><span style="font-family: "georgia" , "times new roman" , serif;">Encourage your team to switch to VS Code which has immense support for development with Angular. It has strong support for extensions used in Angular projects and well regarded by front end community.</span></span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div>
<div style="text-align: justify;">
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;">Use Tooling</span></h3>
</div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">It will kill all the disagreements. Use VS Code extensions such as <a href="https://palantir.github.io/tslint/">TSLint</a>,<a href="https://marketplace.visualstudio.com/items?itemName=Angular.ng-template"> Angular Language service</a>, <a href="https://github.com/prettier/prettier">Prettier</a>, <a href="https://editorconfig.org/">EditorConfig </a>and <a href="https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss">SCSS </a>intellisence. </span></div>
</div>
<div>
<div style="text-align: justify;">
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span><span style="font-family: "georgia" , "times new roman" , serif;"><b>Naming and Syntax Conventions</b></span></h3>
</div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Always use Singular for Modules and Singular or Plural for components/services/directives and pipes</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;">Use Angular style commit messages</span></h3>
</div>
</div>
<div>
<div style="text-align: justify;">
<a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit"><span style="font-family: "georgia" , "times new roman" , serif;">Examples :</span></a></div>
</div>
<div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">'feat(notification.service): add display param'</span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">'refactor(order models): rename couponId to couponCodeId</span></div>
</div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div>
<div style="text-align: justify;">
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Use <a href="https://github.com/mgechev/codelyzer">Codelyzer </a>to do statistical analysis on Angular/Typescript code</b></span></h3>
</div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">It's a set of tslint rules for static code analysis of Angular TypeScript projects. If you are doing Continous deployment configure with your pipeline.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;">Follow Consistent component/directive/service/module</span></h3>
<h3>
<span style="font-weight: normal;">If you are using Angular-Cli always follow the same pattern to generate the necessary files so that it will be consistent throughout the application.</span></h3>
</div>
</div>
<div>
<div style="text-align: justify;">
<h3>
<b style="font-family: georgia, "times new roman", serif;"><br /></b><b style="font-family: georgia, "times new roman", serif;">Absolute path for ES Modules</b></h3>
</div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Alwasy use absolute path that would help in refactoring(moving files around or renaming) and very easy to organize files.</span></div>
</div>
<div>
<div style="text-align: justify;">
<b style="font-family: georgia, "times new roman", serif;"><br /></b>
<br />
<h3>
<b style="font-family: georgia, "times new roman", serif;">Do not use null and assign default values </b></h3>
</div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">In the templates always use safe navigation type operator which can help in preventing the following annoying erros "cannot read property "name" of undefined"</span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div>
<div>
<div style="text-align: justify;">
<h3>
<b><span style="font-family: "georgia" , "times new roman" , serif;">Choose intelligent defaults and be consistent with them </span></b></h3>
</div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>''</b> for string - declare string with default value ""</span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>0</b> for number - declare numbe with default value 0</span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>[]</b> for arrays - declare array with default value []</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;">Build small reusable components</span></h3>
</div>
</div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Dont make your component code go more than <i><b>300 lines</b></i>. Split the pieces that can be reused in a component and make them as a new component. The component should be made as dumb as possible. It should not dependent on any inputs or outputs provided it , it should work simple. General rule of thumb is to make the last child in the component tree to be the dumbest. Reusable components reduce the duplication of code and you can make changes easily.</span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">Components should deal only with the presentation logic Dont have logic other than the presentation logic. Components are designed for presentational purposes and only should focus on what the view should do.Business logics should be separated out to services/methods from the presentation/view logic.</span><br />
<h3>
<b><br /></b><span style="font-family: "georgia" , "times new roman" , serif;"><b>Use trackBy in ngFor Loops </b></span></h3>
</div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">DOM manipulations are always expensive, immutable practices always generate a new collection which will result in bad performance. When your array changes, Angular will be rendering the whole DOM tree, when you use <b>trackBy</b>, it will know which elements has changed and will make changes only to those particular elements.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;">const vs let </span></h3>
<span style="font-family: "georgia" , "times new roman" , serif;">Make use of let and const wherever its appropriate. It will help a lot in identifying issues when a value is resassigned to a constant accidently with a compile error and it improves the readability of the code.</span><br />
<br />
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;">Pipeable operators </span></h3>
<span style="font-family: "georgia" , "times new roman" , serif;">With Angular version above 5.5 , you can use pipeable operators which are tree-shakable (only the code need to execute will be included when they are imported) and it will be easy to identify unsed code in the component files.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;">Subscribe in template </span></h3>
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">Rather than subscribe in service or async popes unsubscribe themself automatically it will make the code simpler by stopping the need to manually manage subscriptions which could cause a memory leak. When using subscribe, the risks can be eliminated by using a lint rule to detect unsubscribed observables.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;">Clean up subscriptions </span></h3>
<span style="font-family: "georgia" , "times new roman" , serif; font-weight: normal;">When you subscribe in the component to observables, make sure you unsubscribe from them completely with operators like take,takeUntil,Unsubscribe etc</span><br />
<span style="font-family: "georgia" , "times new roman" , serif; font-weight: normal;"><br /></span>
<br />
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Use appropriate Operators </b></span></h3>
<b style="font-family: Georgia, "Times New Roman", serif;">switchMap:</b><span style="font-family: "georgia" , "times new roman" , serif;"> when you want to ignore the previous emissions when there is a new emission</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span><span style="font-family: "georgia" , "times new roman" , serif;"><b>mergeMap:</b> when you want to concurrently handle all the emissions</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span><span style="font-family: "georgia" , "times new roman" , serif;"><b>concatMap:</b> when you want to handle the emissions one after the other as they are emitted</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span><span style="font-family: "georgia" , "times new roman" , serif;"></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>exhaustMap:</b> when you want to cancel all the new emissions while processing a previous emisssion</span><br />
<div style="text-align: justify;">
<b style="font-family: georgia, "times new roman", serif;"><i><br /></i></b>
<br />
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;">Stop using any:type everything in the code</span></h3>
</div>
</div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Always declare variables or constants with a type other than any. This is the advantage that you have with Typescript when you have good typings in your application which makes refactoring easier and safe and also avoid unintented issues.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;">Use lint rules as you need</span></h3>
<span style="font-family: "georgia" , "times new roman" , serif;">TSLINT has various options built in already like no-any, no-magic-numbers, no-console, etc that you can configure in your </span><b style="font-family: georgia, "times new roman", serif;">tslint.json to</b><span style="font-family: "georgia" , "times new roman" , serif;"> enforce certain rules in your code base</span><br />
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span><span style="font-family: "georgia" , "times new roman" , serif;">Dont Repeat Yourself </span></h3>
<span style="font-family: "georgia" , "times new roman" , serif;">One of the common mistake that i did as a developer was copy paste the same code in all components. Do not repeat or have the same code in different places in the code base. Extract the repeating code and make them as a generic method which could be used in diferent components.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<h3>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Avoid Logic in component templates</b></span></h3>
<span style="font-family: "georgia" , "times new roman" , serif;">Place the logic in the component file rather than on the template such as && condition since it cannot be possible to unit test also it is prone to more bugs when changing template code</span><br />
<div>
<br /></div>
</div>
</div>
</div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<div style="text-align: justify;">
<b style="font-family: georgia, "times new roman", serif;"><u>APPLICATION INFRASTRUCTURE</u></b></div>
</div>
<div>
<div style="text-align: justify;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b></div>
</div>
<div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Lazy load everything</b> - When you are building application with large number of modules always do lazy loading which could improve your application performance by large margin. Angular CLI makes this easy and helps break up your app into logical bundles. With Lazy loading users only pay for what they want. For example, Sensitive (admin only) code will not be downloaded for users that don't have access.</span></div>
</div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Analyze your bundle</b> - If you are using any bundling mechanism always analyze the size of the bundle generated. You can use webpack-bundle-analyzer for example and you can improve the performance there on.</span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Install source map explorer</span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: justify;">
<b><span style="font-family: "georgia" , "times new roman" , serif;">npm install -g source-map-explorer</span></b></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Build with source map</span></div>
<div style="text-align: justify;">
<b><span style="font-family: "georgia" , "times new roman" , serif;">ng build --prod -sm</span></b></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Inspect your bundle</span></div>
<div style="text-align: justify;">
<b><span style="font-family: "georgia" , "times new roman" , serif;">source-map-explorer dist/vendor*.js</span></b></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Debug.Service.ts - </b>It is always good to have a common debug service to assist with the development. This service could replace the calls to <b>console.log.</b> You can use Visual studio extension <a href="https://docs.microsoft.com/en-us/visualstudio/ide/find-code-changes-and-other-history-with-codelens?view=vs-2017">codelens </a>to track down the calls with console.log.This service can be toggled at run time with local storage value and needs to be switched off with production builds.</span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>RxJs Operators:</b> When using it becomes handy to handle so many operations with Rxjs operators. Always remember to include/import only the things you need. Also make sure to add <b>noUnusedLocals</b> in the tsconfig.</span></div>
</div>
<div>
<div style="text-align: justify;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Use ES Modules for helper functions: </b>With ES Modules it is really easy to import only available when thy are needed.</span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Keep environment values in environment files: </b>It becomes really easy and very helpful to manage environment values when it comes to continous improvement and continous deployment. </span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Avoid Bas classes / Inheritance:</b> Even though Angular is build with Typescript, many of the developers tend to use services from a base class. This should be only if necessary. It will result in restricting the flexibility as when your app grows and use cases changes.</span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Also create a utility.services.ts to contain all the base helper services. For ex: <b>debug.service.ts , notification.service.ts session.service.ts can be placed within utility.service.ts </b>which helps in preventing app wide changes to base constructor.</span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Use Obseravable/State Management Patterns: </b>It is really important to follow Redux patern (RxJS) to have a better state management in application. Also in components use <b>ngUnsubscribe </b>for complex Observable management in Components. Use <b>shareReplay </b>operator and/or<b> async pipe</b> for simpler cases</span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>More things to consider on Application </b>: Always consier browser caching and application versioning. Test the update process and the experience across browsers. Always figure out user experience and continously work on it. Use <a href="http://sajeetharan.blogspot.com/2017/08/angular-2-exception-handler.html">global error handler</a> to store repor errors to API and do not access Document or Window Objects manually.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div>
<div style="text-align: justify;">
<b>ARCHITECTURAL THOUGHTS & PROJECT STRUCTURE </b></div>
</div>
<div>
<div style="text-align: justify;">
<div style="text-align: left;">
<ul style="text-align: left;">
<li style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">One of the primary thing that you need to consider before starting a project is the architecture on how to build flexible,simple,fast application. It needs lot of planning and consistency to get the basement correct. Building things is really hard enough. When it comes to building Angular application i would recommend to follow the following Guidelines</span></li>
<li style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">One best place to start with good practices is by following the recommended <a href="https://angular.io/guide/styleguide">style guide</a>. You need to take what works for your team and skip what does not work. Also try to learn from others mistakes or any other projects that you've already worked with. </span></li>
<li style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">While designing module,s it is really important to know about how to structure your modules and what should go under <b>Feature/Core/Shared</b> Modules.</span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlUa5iNqZRCb5bIFH0EsMDM79UjUmDGzUHZVxEzZ4XRpGoQpKKtigZ7mevH7WETQsmEO3-x-6fio0XZ-9Y8Jz1XRH6ThdUXNusAqBKIYEpo6423sThyphenhyphenC9fqEnN0HbCO3yU_IEK3jz6-0xg/s1600/68747470733a2f2f692e696d6775722e636f6d2f794b4e345a36572e706e67.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="581" data-original-width="661" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlUa5iNqZRCb5bIFH0EsMDM79UjUmDGzUHZVxEzZ4XRpGoQpKKtigZ7mevH7WETQsmEO3-x-6fio0XZ-9Y8Jz1XRH6ThdUXNusAqBKIYEpo6423sThyphenhyphenC9fqEnN0HbCO3yU_IEK3jz6-0xg/s320/68747470733a2f2f692e696d6775722e636f6d2f794b4e345a36572e706e67.png" width="320" /></a></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<ul style="text-align: left;">
<li style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">Keep a <b>flat file structure</b> as long as possible which means you should not add hierarchy with less than 20 files and you can always move files as the app grows larger.</span></li>
<li style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">Maintain your application version using the <b>package.json</b> which could be embeded in your app.</span></li>
<li style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">Use package management toolingto guarantee reproducible dev environment and builds.</span></li>
<li style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">Set custom host for the application by changing the default url.</span></li>
<li style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">Use proxies if you are integrating with an API. </span></li>
<li style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">Lets look at what you can do while implementing the above architecture in your application</span></li>
</ul>
</div>
<span style="font-family: "georgia" , "times new roman" , serif;"></span><br />
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Follow this <a href="https://github.com/sajeetharan/Angular-Structure">repository </a>in order to get started</span></div>
</div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">The above are the some of the most important practices that you need to follow when you are starting a new project with Angular. Hope this helps someone out there. </span></div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com0tag:blogger.com,1999:blog-2038668879669685734.post-27142708048186156312018-10-20T21:31:00.001-07:002018-10-20T21:31:25.926-07:00Resolve Issue : ASP.NET Core 2.1 runs fine locally but when publishing to Azure says “An error occurred while starting the application.”<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; border: 0px; box-sizing: inherit; clear: both; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; text-align: left; vertical-align: baseline;">
<span style="color: #242729; font-family: Georgia, Times New Roman, serif;"><span style="font-size: 15px;">After building my first production ready application with ASP.NET Core 2.1 and tested locally when i tried to deploy for the first time on Azure, i was stuck with the following page.</span></span></div>
<div style="background-color: white; border: 0px; box-sizing: inherit; clear: both; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; text-align: left; vertical-align: baseline;">
<span style="color: #242729; font-size: 15px;"><span style="font-family: Georgia, Times New Roman, serif;">Since many different problems can cause this error page, I would strongly recommend the following in order to determine the root cause quickly and easily, without meddling with Azure.</span></span></div>
<div style="background-color: white; border: 0px; box-sizing: inherit; clear: both; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; text-align: left; vertical-align: baseline;">
<span style="color: #242729; font-family: Georgia, Times New Roman, serif;"><span style="font-size: 15px;">You can enable extremely helpful developer friendly error messages at startup by setting the <b>.UseSetting("detailedErrors", "true")</b> and<b> .CaptureStartupErrors(true)</b> actions in your <b>Program.cs </b>file.</span></span></div>
<pre class="lang-cs prettyprint prettyprinted" style="background-color: #eff0f1; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto; word-wrap: normal;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">class</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Program</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">static</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">void</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Main</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">string</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">[]</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> args</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">BuildWebHost</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">args</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">).</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Run</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">();</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">static</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">IWebHost</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">BuildWebHost</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">string</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">[]</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> args</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">WebHost</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">CreateDefaultBuilder</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">args</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">CaptureStartupErrors</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">true</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">UseSetting</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"detailedErrors"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"true"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">UseStartup</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Startup</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">>()</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Build</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">();</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></code></pre>
<div style="background-color: white; border: 0px; box-sizing: inherit; clear: both; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="background-color: white; border: 0px; box-sizing: inherit; clear: both; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; text-align: left; vertical-align: baseline;">
<span style="font-family: Georgia, Times New Roman, serif;">With the above settings publish your application to Azure.</span><span style="font-family: Georgia, "Times New Roman", serif;">Once you identify the rootcause and resolve your issue, </span><span style="color: #242729; font-family: Georgia, "Times New Roman", serif; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit;">Thes above settings should be removed as soon as your troubleshooting is complete so as not to expose your application to malicious attacks. </span></div>
<div style="background-color: white; border: 0px; box-sizing: inherit; clear: both; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; text-align: left; vertical-align: baseline;">
<span style="font-family: Georgia, Times New Roman, serif;">Hope this helps someone out there.</span></div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com0tag:blogger.com,1999:blog-2038668879669685734.post-85160465095700894912018-09-15T03:36:00.001-07:002018-09-15T04:00:28.314-07:00Ace Angular Interview in 20 minutes - PART1<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">This should help all the Angular developers out there to test yourself on the knowledge on Angular. I have listed down the concepts/questions from various sources such as Stackoverflow,Medium etc. Will be continuing this with 2 more posts.</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /><b>1. What's new in Angular 6</b></span></div>
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;"><b style="font-weight: bold;"><span style="color: #0a0a0a; font-family: "palatino linotype" , serif; font-size: 12.0pt;">Angular
Elements</span></b><span style="color: #0a0a0a;"><b> - </b>Angular Elements is a project that lets you wrap your
Angular components as Web Components and embed them in a non-Angular
application.</span></span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-weight: bold;"><span style="color: #0a0a0a;">New Rendering
Engine: I<span style="font-weight: normal;">vy</span></span></span><span style="color: #0a0a0a;"> - increases in speed and decreases in application size.</span></span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;"><b style="font-weight: bold;"><span style="color: #0a0a0a; font-family: "palatino linotype" , serif; font-size: 12.0pt;">Tree-shakeable
providers</span></b><span style="color: #0a0a0a;"><b> - </b>a new, recommended, way to register a provider, directly
inside the @Injectable() decorator, using the new </span><span style="background: rgb(249 , 249 , 250); color: #333842;">providedIn</span><span style="color: #0a0a0a;"> attribute</span></span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;"><b style="font-weight: bold;"><span style="color: #0a0a0a; font-family: "palatino linotype" , serif; font-size: 12.0pt;">RxJS 6</span></b><span style="color: #0a0a0a;"><b> -
</b>Angular 6 now uses RxJS 6 internally, and requires you to update your application
also. RxJS released a library called rxjs-compat, that allows you to bump RxJS
to version 6.0 even if you, or one of the libraries you’re using, is still
using one of the “old” syntaxes.</span></span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;"><b style="font-weight: bold;"><span style="color: #0a0a0a; font-family: "palatino linotype" , serif; font-size: 12.0pt;">ElementRef</span></b><b style="font-weight: bold;"><span style="background: rgb(249 , 249 , 250); color: #333842;"><t></t></span></b><span style="color: #0a0a0a;"><b> - </b>in Angular 5.0 or older,
is that the said ElementRef had its nativeElement property typed as any. In
Angular 6.0, you can now type ElementRef more strictly.</span></span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;"><span style="color: #0a0a0a; font-weight: bold;"><span style="font-stretch: normal; line-height: normal;"> </span></span><b style="font-weight: bold;"><span style="color: #0a0a0a; font-family: "palatino linotype" , serif; font-size: 12.0pt;">Animations</span></b><span style="color: #0a0a0a;"><b> -</b> The
polyfill web-animations-js is not necessary anymore for animations in Angular
6.0, except if you are using the AnimationBuilder.</span></span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;"><b style="font-weight: bold;"><span style="color: #0a0a0a; font-family: "palatino linotype" , serif; font-size: 12.0pt;">i18n</span></b><span style="color: #0a0a0a;"><b> -
</b>possibility to have “runtime i18n”, without having to build the application
once per locale</span></span></li>
</ul>
<div>
<span style="color: #0a0a0a; font-family: georgia, times new roman, serif;"><br /></span></div>
</div>
<div class="MsoNormal" style="line-height: normal; margin: 0.05in 8.4pt 0.05in 22.8pt; text-align: left; text-indent: -0.25in;">
<span style="color: #0a0a0a; font-family: "georgia" , "times new roman" , serif; text-indent: -0.25in;"><b>2. </b></span><span style="text-indent: -0.25in;"><span style="color: #0a0a0a; font-family: "georgia" , "times new roman" , serif;"><b>Difference between "Constructor" and "ngOnInit</b></span></span></div>
<div style="padding-left: 6px; padding-right: 6px; text-align: left;">
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;">The <b style="color: #0a0a0a;">Constructor </b><span style="color: #0a0a0a;">is a default method of the class that is executed when the class is instantiated and ensures proper initialization of fields in the class and its subclasses.</span></span></li>
</ul>
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;"><b style="color: #0a0a0a;">ngOnInit </b><span style="color: #0a0a0a;">is a life cycle hook called by Angular to indicate that Angular is done creating the component. We have to import OnInit in order to use like this (actually implementing OnInit is not mandatory but considered good practice).</span></span></li>
</ul>
<div>
<span style="color: #0a0a0a; font-family: georgia, times new roman, serif;"><br /></span></div>
<b><span style="font-family: "georgia" , "times new roman" , serif;">3. Difference between "declarations", "providers" and "import" in NgModule</span></b><br />
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;"><b>imports </b>makes the exported declarations of other modules available in the current module. It is also used to import supporting modules likes FormsModule, RouterModule, CommonModule, or any other custom-made feature module.</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;"><b>declarations </b>are to make directives (including components and pipes) from the current module available to other directives in the current module. Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported.</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;"><b>providers </b>are to make services and values known to DI. They are added to the root scope and they are injected to other services or directives that have them as dependency.</span></li>
</ul>
<br />
<div style="color: #0a0a0a; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">A special case for </span><b style="font-family: georgia, "times new roman", serif;"><code style="background: rgb(249, 249, 250); border-radius: 2px; color: #333842; line-height: 1.6em; margin: auto; max-width: 100%; padding: 0.1em 0.3em 0px; vertical-align: 0em;">providers</code> </b><span style="font-family: "georgia" , "times new roman" , serif;">are lazy loaded modules that get their own child injector. </span><b style="font-family: georgia, "times new roman", serif;"><code style="background: rgb(249, 249, 250); border-radius: 2px; color: #333842; line-height: 1.6em; margin: auto; max-width: 100%; padding: 0.1em 0.3em 0px; vertical-align: 0em;">providers</code> </b><span style="font-family: "georgia" , "times new roman" , serif;">of a lazy loaded module are only provided to this lazy loaded module by default (not the whole application as it is with other modules).</span></div>
<div style="color: #0a0a0a; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div style="text-align: left;">
<b>Example : </b></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<pre style="background-color: #eff0f1; border: 0px; box-sizing: inherit; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto; word-wrap: normal;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import { UserComponent } from './components/user/user.component';
import { StateService } from './services/state.service';
@NgModule({
declarations: [
AppComponent,
UserComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [ StateService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }</code></pre>
</div>
<div style="text-align: left;">
<b><br /></b>
<b><br /></b>
<b>4. Ahead Of Time Compilation (AOT)</b><br />
<br />
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"> Angular Ahead-of-Time compiler pre-compiles application components and their templates during the build process.Apps compiled with AOT launch faster for several reasons</span></div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;">Application components execute immediately, without client-side compilation.</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Templates are embedded as code within their components so there is no client-side request for template files.</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">You don't download the Angular compiler, which is pretty big on its own.</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">The compiler discards unused Angular directives that a tree-shaking tool can then exclude.</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Also has small bundle size and faster load time.</span></li>
</ul>
<div>
<span style="font-family: georgia, times new roman, serif;"><br /></span></div>
</div>
<div style="text-align: left;">
<ul style="text-align: left;">
</ul>
<div>
<b><span style="font-family: "georgia" , "times new roman" , serif;">5. Need of lazy loading modules in Angular.</span></b></div>
<div>
<b><br /></b></div>
<div style="text-align: left;">
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="background-color: white; color: #0a0a0a;">Lazy loading is useful when the application size is growing. In lazy loading, feature module will be loaded on demand and hence application start will be faster.</span><span style="background-color: white; color: #0a0a0a;">To load a feature module lazily we need to load it using </span><code style="background: rgb(249, 249, 250); border-radius: 2px; color: #333842; line-height: 1.6em; margin: auto; max-width: 100%; padding: 0.1em 0.3em 0px; vertical-align: 0em;"><b>loadChildren</b></code><span style="background-color: white; color: #0a0a0a;">property in route configuration and that feature module must not be imported in application module. </span></span></div>
</div>
<div style="text-align: left;">
<span style="background-color: white; color: #0a0a0a; font-family: "palatino" , "palatino linotype" , "palatino lt std" , "book antiqua" , "georgia" , serif;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; color: #0a0a0a; font-family: "palatino" , "palatino linotype" , "palatino lt std" , "book antiqua" , "georgia" , serif;"><br /></span></div>
<div style="text-align: left;">
<br /></div>
<div>
<br /></div>
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com1tag:blogger.com,1999:blog-2038668879669685734.post-74522000484502982242018-08-04T06:47:00.000-07:002018-08-12T01:03:55.703-07:00 A checklist for building Angular web applications in the correct way<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #24292e; font-family: "georgia" , "times new roman" , serif; font-size: 12pt;">Hey guys, There has not been a proper resource to have a checklist to make sure that applicaiton is flawless.I decided to write a simple tips on checklist items needed before you deploy your app to production.Following are a
few Angular Code Review Checklists useful while doing a peer review of Angular
code. Make sure to check these when you are building a production ready
application</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="background-color: white; color: #24292e;"></span></span><br /></span>
<br />
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><b><span style="font-family: "georgia" , "times new roman" , serif;">#1 - Code
Modularity </span></b></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;">Layered Code with good Modularity.</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><b><span style="font-family: "georgia" , "times new roman" , serif;">#2 - Component
per File </span></b></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;"> Each file must not contain more than one Component/Controller, etc.</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><b><span style="font-family: "georgia" , "times new roman" , serif;">#3 - Routing</span></b></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background-color: white;"><span style="font-family: "georgia" , "times new roman" , serif;">Always configure routing with lazy loading</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><b><span style="font-family: "georgia" , "times new roman" , serif;">#4 - Shared
Resources at Centralized Location</span></b></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background-color: white;"><span style="font-family: "georgia" , "times new roman" , serif;">Store images/language translations under assets</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><b><span style="font-family: "georgia" , "times new roman" , serif;">#5 - 3rd Party
Libraries </span></b></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background-color: white; font-size: 12pt;"><span style="font-family: "georgia" , "times new roman" , serif;"> If you are integrating with any 3rd party libraries make sure to check for Security Flaws</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;"><b>#6 - Data
Security</b> </span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;">Use Encryption of Sensitive Data </span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><b><span style="font-family: "georgia" , "times new roman" , serif;">#7 - Offline
Data Security</span></b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="background-color: white;">Consider security if you are storing Data in localstorage or session storage.</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;"><b>#8 - Cookies
Data and Handwiring of Secrets</b></span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background-color: white; font-size: 12pt;"><span style="font-family: "georgia" , "times new roman" , serif;"> Security Flaws</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;"><b>#9 - Do not use pipe / functions in the template</b></span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background-color: white; font-size: 12pt;"><span style="font-family: "georgia" , "times new roman" , serif;">Calling function binding in the template will lead to performance issue</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><b><span style="font-family: "georgia" , "times new roman" , serif;">#10 - Change
Detection + State Management & Reactive Extensions </span></b></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;">Use RxJS, NgRx/Store (or
Redux)</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><b><span style="font-family: "georgia" , "times new roman" , serif;">#11 - JavaScript
or TypeScript</span></b></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;"> Stick to ONE & Avoid Hybrid</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><b><span style="font-family: "georgia" , "times new roman" , serif;">#12 -
Building/Packaging with WebPack (or similar)</span></b></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;"> Bundling, Chunking, Treeshaking,
Minification, Uglification, Compression</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><b><span style="font-family: "georgia" , "times new roman" , serif;">#13 - ECMAScript
Compatibility - ES7 (2016)</span></b></span></div>
<div style="font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white; color: #24292e;"><span style="font-family: "georgia" , "times new roman" , serif;"><b>#14 - Angular
Style Guide (Official Reference)</b> </span></span></div>
<div style="font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="background: white; color: #24292e;"> </span><a href="https://angular.io/guide/styleguide"><span style="background: white;">https://angular.io/guide/styleguide</span></a></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><b><span style="font-family: "georgia" , "times new roman" , serif;">#15 -
AsyncService </span></b></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;"> Adequate and Appropriate use of it.</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><b><span style="font-family: "georgia" , "times new roman" , serif;">#16 -
Hierarchical Components, Models, Interfaces, etc. (Inheritance Approach)</span></b></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;"><b>#17 - Constants</b></span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;">No-Scattered Hard-Coded constants data but must be at one place.</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;"><b>#18 - Images,
Fonts, Other Static Files </b>-</span></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white;"><span style="font-family: "georgia" , "times new roman" , serif;">Place them in respective directories and not scattered
across.</span></span></div>
<div style="font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="background: white; color: #24292e;"><b><span style="font-family: "georgia" , "times new roman" , serif;">#19 -
TSLint.json </span></b></span></div>
<div style="font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="background: white; color: #24292e;">To follow Angular Style Guide in order to run SonarQube or
Codelyzer. Follow </span><a href="https://github.com/Angular-Projects-V-1-to-X/codelyzer"><span style="background: white;">https://github.com/Angular-Projects-V-1-to-X/codelyzer</span></a></span></div>
<div style="color: #24292e; font-size: 12pt; margin-bottom: 12pt; margin-top: 0pt;">
</div>
<div style="font-size: 11pt; margin: 0in;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>#20 Finally if you need to improve Performance</b> - <a href="https://github.com/mgechev/angular-performance-checklist">https://github.com/mgechev/angular-performance-checklist</a></span></div>
<div style="font-size: 11pt; margin: 0in;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="font-size: 11pt; margin: 0in;">
<span style="font-family: "georgia" , "times new roman" , serif;">Hope it helps all the developers out there.</span></div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com12tag:blogger.com,1999:blog-2038668879669685734.post-91846375987099358802018-05-27T01:05:00.000-07:002018-05-28T01:10:02.583-07:00Streaming Live Tweets from Twitter to CosmosDB<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;">This is time for another blog on cosmosdb explaining how to stream tweets from twitter using hashtags and store them in cosmosdb in real time. You should be able to setup and run this demo within 15 minutes.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><br />
</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<b><span style="background: white; color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;"><u>Pre-Requisites Needed:</u></span><span style="font-family: "georgia" , serif; font-size: 12.0pt;"><o:p></o:p></span></b></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">I have the following in my local environment , hope you guys have already have</span><span style="color: #333333; font-family: "segoe ui emoji" , sans-serif; font-size: 12.0pt;">😊</span><span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">, if not start setting up.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;"><br />
</span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: 3.0pt; margin-left: 0in; margin-right: 0in; margin-top: 0in; mso-list: l0 level1 lfo1; tab-stops: list .5in; text-indent: 0in;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "symbol"; font-size: 10.0pt;"><span style="mso-list: Ignore;">·<span style="font: 7.0pt "Times New Roman";"> </span></span></span><!--[endif]--><span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">Windows 10 OS<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: 3.0pt; margin-left: 0in; margin-right: 0in; margin-top: 0in; mso-list: l0 level1 lfo1; tab-stops: list .5in; text-indent: 0in;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "symbol"; font-size: 10.0pt;"><span style="mso-list: Ignore;">·<span style="font: 7.0pt "Times New Roman";"> </span></span></span><!--[endif]--><span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">Python 2.7<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: 3.0pt; margin-left: 0in; margin-right: 0in; margin-top: 0in; mso-list: l0 level1 lfo1; tab-stops: list .5in; text-indent: 0in;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "symbol"; font-size: 10.0pt;"><span style="mso-list: Ignore;">·<span style="font: 7.0pt "Times New Roman";"> </span></span></span><!--[endif]--><span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">Visual Studio Code or PyCharm (Any editor)<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: 3.0pt; margin-left: 0in; margin-right: 0in; margin-top: 0in; mso-list: l0 level1 lfo1; tab-stops: list .5in; text-indent: 0in;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "symbol"; font-size: 10.0pt;"><span style="mso-list: Ignore;">·<span style="font: 7.0pt "Times New Roman";"> </span></span></span><!--[endif]--><span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">Azure subscription<o:p></o:p></span></div>
<br />
<br />
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">Ok folks let’s get started.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;"><b><u>Step 1: Install Python</u></b><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;"><b><br />
</b></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">Hope you have already installed Python in your system , if not download and install from <b><a href="https://www.python.org/downloads/release/python-365/">here</a></b>. Once you install run the following command and see if its properly installed.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;"><b><u>Step 2: Install Tweepy and PyDocumentDB</u></b><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;"><b><br />
</b></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">Install the following libraries needed.<span style="mso-spacerun: yes;"> </span><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;"><b>Tweepy:</b><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;"><b><br />
</b></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;"><b><a href="http://docs.tweepy.org/en/v3.5.0/api.html">Tweepy </a></b>is a python package which is easy to use for accessing the twitter api.</span><span style="background: #fcfcfc; color: #404040; font-family: "georgia" , serif; font-size: 12.0pt;"> he API class provides access to the entire twitter RESTful API methods. Each method can accept various parameters and return responses.</span> Install it with the following command,<o:p></o:p></div>
<br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> Pip install tweepy
</code></pre>
<br />
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12pt;">If you get an error 'pip' is not recognized as an internal or external command. You should set the path as follows,</span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="nx">C</span><span class="o" style="color: #666666;">:\></span><span class="kd" style="color: #007020; font-weight: bold;">set</span> <span class="nx">PATH</span><span class="o" style="color: #666666;">=%</span><span class="nx">PATH</span><span class="o" style="color: #666666;">%;</span><span class="nx">C</span><span class="o" style="color: #666666;">:\</span><span class="nx">Python27</span><span class="o" style="color: #666666;">\</span><span class="nx">Scripts</span></pre>
</div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">Now you should be able to install it without any issue,<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;"><b>Pydocumentdb:</b><o:p></o:p></span><br />
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;"><b><br /></b></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">As mentioned above we will be storing the tweets in Azure’s cosmosdb , In order to do that we need the python package for cosmosdb which is pydocumentdb. Install it with the following command. </span><br />
<span style="background-color: transparent;"><br /></span>
<br />
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="nx">Pip</span> <span class="nx">install</span> <span class="nx">pydocumentdb</span></pre>
<br />
<span style="background-color: transparent;">Now we have everything needed. </span><span style="background-color: transparent; font-family: "georgia" , serif; font-size: 12pt;">Lets dive into coding.</span><br />
<span style="background-color: transparent; font-family: "georgia" , serif; font-size: 12pt;"><br /></span>
<br />
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><b><u>Step 3: Creating Listener to invoke the cosmosdb client</u></b></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12pt;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12pt;">Create a listener named CosmosDBListener with the following methods</span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12pt;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><b>__init__</b> Initializes the client to make sure the connection is
available.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><b>On_data</b> will load the data retrieved from the stream and write
to the Cosmosdb.<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><b>On_error </b>will throw if there is any network/key issues on
console.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"></span></div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="kn" style="color: #007020; font-weight: bold;">from</span> <span class="nn" style="color: #0e84b5; font-weight: bold;">config</span> <span class="kn" style="color: #007020; font-weight: bold;">import</span> <span class="o" style="color: #666666;">*</span>
<span class="kn" style="color: #007020; font-weight: bold;">import</span> <span class="nn" style="color: #0e84b5; font-weight: bold;">json</span>
<span class="kn" style="color: #007020; font-weight: bold;">from</span> <span class="nn" style="color: #0e84b5; font-weight: bold;">tweepy.streaming</span> <span class="kn" style="color: #007020; font-weight: bold;">import</span> <span class="n">StreamListener</span>
<span class="k" style="color: #007020; font-weight: bold;">class</span> <span class="nc" style="color: #0e84b5; font-weight: bold;">CosmosDBListener</span><span class="p">(</span><span class="n">StreamListener</span><span class="p">):</span>
<span class="k" style="color: #007020; font-weight: bold;">def</span> <span class="fm" style="color: #06287e;">__init__</span><span class="p">(</span><span class="bp" style="color: #007020;">self</span><span class="p">,</span> <span class="n">client</span><span class="p">,</span> <span class="n">collLink</span><span class="p">):</span>
<span class="bp" style="color: #007020;">self</span><span class="o" style="color: #666666;">.</span><span class="n">client</span> <span class="o" style="color: #666666;">=</span> <span class="n">client</span>
<span class="bp" style="color: #007020;">self</span><span class="o" style="color: #666666;">.</span><span class="n">collLink</span> <span class="o" style="color: #666666;">=</span> <span class="n">collLink</span>
<span class="k" style="color: #007020; font-weight: bold;">def</span> <span class="nf" style="color: #06287e;">on_data</span><span class="p">(</span><span class="bp" style="color: #007020;">self</span><span class="p">,</span> <span class="n">data</span><span class="p">):</span>
<span class="k" style="color: #007020; font-weight: bold;">try</span><span class="p">:</span>
<span class="n">dictData</span> <span class="o" style="color: #666666;">=</span> <span class="n">json</span><span class="o" style="color: #666666;">.</span><span class="n">loads</span><span class="p">(</span><span class="n">data</span><span class="p">)</span>
<span class="n">dictData</span><span class="p">[</span><span class="s2" style="color: #4070a0;">"id"</span><span class="p">]</span> <span class="o" style="color: #666666;">=</span> <span class="nb" style="color: #007020;">str</span><span class="p">(</span><span class="n">dictData</span><span class="p">[</span><span class="s2" style="color: #4070a0;">"id"</span><span class="p">])</span>
<span class="bp" style="color: #007020;">self</span><span class="o" style="color: #666666;">.</span><span class="n">client</span><span class="o" style="color: #666666;">.</span><span class="n">CreateDocument</span><span class="p">(</span><span class="bp" style="color: #007020;">self</span><span class="o" style="color: #666666;">.</span><span class="n">collLink</span><span class="p">,</span> <span class="n">dictData</span><span class="p">)</span>
<span class="k" style="color: #007020; font-weight: bold;">return</span> <span class="bp" style="color: #007020;">True</span>
<span class="k" style="color: #007020; font-weight: bold;">except</span> <span class="ne" style="color: #007020;">BaseException</span> <span class="k" style="color: #007020; font-weight: bold;">as</span> <span class="n">e</span><span class="p">:</span>
<span class="k" style="color: #007020; font-weight: bold;">print</span><span class="p">(</span><span class="s2" style="color: #4070a0;">"Error on data: </span><span class="si" style="color: #70a0d0; font-style: italic;">%s</span><span class="s2" style="color: #4070a0;">"</span> <span class="o" style="color: #666666;">%</span> <span class="nb" style="color: #007020;">str</span><span class="p">(</span><span class="n">e</span><span class="p">))</span>
<span class="k" style="color: #007020; font-weight: bold;">return</span> <span class="bp" style="color: #007020;">True</span>
<span class="k" style="color: #007020; font-weight: bold;">def</span> <span class="nf" style="color: #06287e;">on_error</span><span class="p">(</span><span class="bp" style="color: #007020;">self</span><span class="p">,</span> <span class="n">status</span><span class="p">):</span>
<span class="k" style="color: #007020; font-weight: bold;">print</span><span class="p">(</span><span class="n">status</span><span class="p">)</span>
<span class="k" style="color: #007020; font-weight: bold;">return</span> <span class="bp" style="color: #007020;">True</span></pre>
</div>
</div>
<br />
<br />
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><b><u>Step 4: Stream data from twitter to cosmosDB</u></b><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><b><br /></b></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;">Lets create the real code to connect to twitter and get the
related tweets for several hashtags. We will need to authenticate with tweepy
to get the twets, so pass the consumer secret and access secret to the api as
follows.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"></span></div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="n"> auth</span> <span class="o" style="color: #666666;">=</span> <span class="n">OAuthHandler</span><span class="p">(</span><span class="n">consumer_key</span><span class="p">,</span> <span class="n">consumer_secret</span><span class="p">)</span>
<span class="n">auth</span><span class="o" style="color: #666666;">.</span><span class="n">set_access_token</span><span class="p">(</span><span class="n">access_token</span><span class="p">,</span> <span class="n">access_secret</span><span class="p">)</span>
<span class="n">api</span> <span class="o" style="color: #666666;">=</span> <span class="n">tweepy</span><span class="o" style="color: #666666;">.</span><span class="n">API</span><span class="p">(</span><span class="n">auth</span><span class="p">)</span></pre>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;">Set the connection policy for cosmosdb and create a client as
follows,<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"></span></div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="n"> connectionPolicy</span> <span class="o" style="color: #666666;">=</span> <span class="n">documents</span><span class="o" style="color: #666666;">.</span><span class="n">ConnectionPolicy</span><span class="p">()</span>
<span class="n">connectionPolicy</span><span class="o" style="color: #666666;">.</span><span class="n">EnableEndpointDiscovery</span>
<span class="n">connectionPolicy</span><span class="o" style="color: #666666;">.</span><span class="n">PreferredLocations</span> <span class="o" style="color: #666666;">=</span> <span class="n">preferredLocations</span></pre>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;">Next step is to read the tweets as follows , we are using
.filter method to get tweets related to particular hashtags.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"></span></div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="n">client</span> <span class="o" style="color: #666666;">=</span> <span class="n">document_client</span><span class="o" style="color: #666666;">.</span><span class="n">DocumentClient</span><span class="p">(</span><span class="n">host</span><span class="p">,</span> <span class="p">{</span><span class="s1" style="color: #4070a0;">'masterKey'</span><span class="p">:</span> <span class="n">masterKey</span><span class="p">},</span> <span class="n">connectionPolicy</span><span class="p">)</span>
<span class="n">dbLink</span> <span class="o" style="color: #666666;">=</span> <span class="s1" style="color: #4070a0;">'dbs/'</span> <span class="o" style="color: #666666;">+</span> <span class="n">databaseId</span>
<span class="n">collLink</span> <span class="o" style="color: #666666;">=</span> <span class="n">dbLink</span> <span class="o" style="color: #666666;">+</span> <span class="s1" style="color: #4070a0;">'/colls/'</span> <span class="o" style="color: #666666;">+</span> <span class="n">collectionId</span>
<span class="n">twitter_stream</span> <span class="o" style="color: #666666;">=</span> <span class="n">Stream</span><span class="p">(</span><span class="n">auth</span><span class="p">,</span> <span class="n">CosmosDBListener</span><span class="p">(</span><span class="n">client</span><span class="p">,</span> <span class="n">collLink</span><span class="p">))</span>
<span class="n">twitter_stream</span><span class="o" style="color: #666666;">.</span><span class="n">filter</span><span class="p">(</span><span class="n">track</span><span class="o" style="color: #666666;">=</span><span class="p">[</span><span class="s1" style="color: #4070a0;">'#CosmosDB'</span><span class="p">,</span> <span class="s1" style="color: #4070a0;">'#Microsoft'</span><span class="p">,</span> <span class="s1" style="color: #4070a0;">'#MVP'</span><span class="p">,</span> <span class="s1" style="color: #4070a0;">'#BigData'</span><span class="p">,</span> <span class="s1" style="color: #4070a0;">'#DataScience'</span><span class="p">,</span> <span class="s1" style="color: #4070a0;">'#Mongo'</span><span class="p">,</span> <span class="s1" style="color: #4070a0;">'#Graph'</span><span class="p">],</span> <span class="n">async</span><span class="o" style="color: #666666;">=</span><span class="bp" style="color: #007020;">True</span><span class="p">)</span></pre>
<br />
<br />
<div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><u><b>Step 5: Creating configuration file</b><o:p></o:p></u></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><b><br /></b></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;">Create the config file with the following values,<o:p></o:p></span></div>
</div>
<div>
<br /></div>
<div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="c1" style="color: #60a0b0; font-style: italic;"># Enter CosmosDB config details below.</span>
<span class="n">masterKey</span> <span class="o" style="color: #666666;">=</span> <span class="s1" style="color: #4070a0;">' '</span>
<span class="n">host</span> <span class="o" style="color: #666666;">=</span> <span class="s1" style="color: #4070a0;">' '</span>
<span class="c1" style="color: #60a0b0; font-style: italic;">#Enter your database, collection and preferredLocations here.</span>
<span class="n">databaseId</span> <span class="o" style="color: #666666;">=</span> <span class="s1" style="color: #4070a0;">'tweepyDemo'</span>
<span class="n">collectionId</span> <span class="o" style="color: #666666;">=</span> <span class="s1" style="color: #4070a0;">'tweets'</span>
<span class="n">preferredLocations</span> <span class="o" style="color: #666666;">=</span> <span class="s1" style="color: #4070a0;">''</span>
<span class="c1" style="color: #60a0b0; font-style: italic;"># Enter twitter OAuth keys here.</span>
<span class="n">consumer_key</span> <span class="o" style="color: #666666;">=</span> <span class="s1" style="color: #4070a0;">''</span>
<span class="n">consumer_secret</span> <span class="o" style="color: #666666;">=</span> <span class="s1" style="color: #4070a0;">''</span>
<span class="n">access_token</span> <span class="o" style="color: #666666;">=</span> <span class="s1" style="color: #4070a0;">''</span>
<span class="n">access_secret</span> <span class="o" style="color: #666666;">=</span> <span class="s1" style="color: #4070a0;">''</span></pre>
</div>
<div>
<br /></div>
<div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif;"> You need to have CosmosDB account on azure to get the master key and host values, if you are stuck , read my previous blog on <b><a href="http://sajeetharan.blogspot.com/2018/03/setting-up-azure-cosmos-db-with-visual.html">How to setup cosmosdb account</a></b></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;">You also need to register the script as a new application at <a href="http://apps.twitter.com/">twitter developer portal</a>. After choosing a name and application for
your app, you will be provided with a <b>consumer key</b> , <b>Consumer secret</b>, <b>access token</b> and <b>access token secret</b> - which need to be filled into the above config.py to provide the app programmatic access to Twitter.<o:p></o:p></span><br />
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZjmLeRK1lEciXcXGSPCj-5yYEHFfH6Ryr0Hjt2mrJyIE2F__JSRcuVOQCQI2voju0mC6_b9PzdlqxCNYjbvIoFd4S2YJA-HYDLPVzrQKcjJkMVfrk8i0I7ijPoFtMBbqPwtANnai-nQRS/s1600/2018-05-28_13-34-49.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="828" data-original-width="1079" height="490" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZjmLeRK1lEciXcXGSPCj-5yYEHFfH6Ryr0Hjt2mrJyIE2F__JSRcuVOQCQI2voju0mC6_b9PzdlqxCNYjbvIoFd4S2YJA-HYDLPVzrQKcjJkMVfrk8i0I7ijPoFtMBbqPwtANnai-nQRS/s640/2018-05-28_13-34-49.png" width="640" /></a></div>
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><b><u>Step 6: Run the script</u></b><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;">That’s it folks now if you goto command prompt and run the
following command,<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="n">py</span> <span class="n">cosmosdbdriver</span><span class="o" style="color: #666666;">.</span><span class="n">py</span></pre>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><br /></span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;">You should see the tweets coming into your cosmosdb collection
as follows.<o:p></o:p></span></div>
<div class="MsoNormal">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlSSpjgwH_7IDenFrUqNAHEd7cmesmIrWjTIPmm4i7WakBMRepSJFcX38AslijTNoCp4ufmL4ufZyyc2zIiROMVSXiqlh9sCgd_c32jBmANqE8NR7M89qvRrC3RjPZrDU7R8CV09Ekk-LA/s1600/2018-05-28_13-39-29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="788" data-original-width="1371" height="366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlSSpjgwH_7IDenFrUqNAHEd7cmesmIrWjTIPmm4i7WakBMRepSJFcX38AslijTNoCp4ufmL4ufZyyc2zIiROMVSXiqlh9sCgd_c32jBmANqE8NR7M89qvRrC3RjPZrDU7R8CV09Ekk-LA/s640/2018-05-28_13-39-29.png" width="640" /></a></div>
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNormal">
<span style="font-family: "georgia" , serif; font-size: 12.0pt; line-height: 107%;"><br /></span></div>
</div>
<div>
<br /></div>
<div>
Tweets you need are now in your cosmosdb and use them for further analysis as you need. Hope it helps someone out there. If you are stuck at anypoint, look at the complete code from <a href="https://github.com/sajeetharan/CosmosdbTweetsStream">here</a>.</div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com2tag:blogger.com,1999:blog-2038668879669685734.post-43174109615440309922018-04-05T11:17:00.002-07:002018-04-05T11:17:44.774-07:00How to Import database from SQL Azure to local environment<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, Times New Roman, serif;">One of the most frequent thing that developers always wanted to have a copy of the development database in local. In this blog i will pen down the steps on how to export and import a database from SQL azure instance to local machine and restore it on SQL server.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<b><span style="font-family: Georgia, Times New Roman, serif;">Prerequisites:</span></b><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="background-color: white; color: #242729; font-size: 15px;"><span style="font-family: Georgia, Times New Roman, serif;">You will need an Azure account and get the credentials from Azure web portal. </span></span><br />
<br />
<div style="background-color: white; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; font-size: 14px; padding: 0px;">
<strong>Step 1:</strong></div>
<br />
<div style="background-color: white; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; font-size: 14px; margin-top: 10px; padding: 0px;">
<span class="confluence-embedded-file-wrapper confluence-embedded-manual-size" resolved="" style="display: inline-block; max-width: 100%; position: relative;"></span></div>
<br />
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; font-size: 14px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 10px 0px 0px; orphans: 2; padding: 0px; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
Get the backup from the azure instance as follows, Select the<span> </span><strong>database → Right click → Tasks → Export Data Tier Application.</strong></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWTTD-6JJzKys8p15AheKs4iSCqCJXz2jGv13KJ_T7TYuWE1H2CmUy1B6h94zYoMGzY3tdwFpa6POcY844TOoXCMdLkLtsmyQJ5tXM_sJgkMdcw5ZvV8KVo-_mjZL5smdVPEpNd4B5Grij/s1600/2018-02-07_11-45-17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="841" data-original-width="1600" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWTTD-6JJzKys8p15AheKs4iSCqCJXz2jGv13KJ_T7TYuWE1H2CmUy1B6h94zYoMGzY3tdwFpa6POcY844TOoXCMdLkLtsmyQJ5tXM_sJgkMdcw5ZvV8KVo-_mjZL5smdVPEpNd4B5Grij/s640/2018-02-07_11-45-17.png" width="640" /></a></div>
<div style="background-color: white; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; font-size: 14px; margin-top: 10px; padding: 0px;">
<strong><br /></strong></div>
<div style="background-color: white; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; font-size: 14px; margin-top: 10px; padding: 0px;">
<strong>Step 2:</strong></div>
<div style="background-color: white; color: #333333; font-size: 14px; margin-top: 10px; padding: 0px;">
<span style="font-family: Georgia, Times New Roman, serif;">Give a specific name for the backup file and save it in your desired location as follows,</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMHzEpZK5xTGJ5fHZIWaCr2trN3o7aS-BzE8NrUMXPsWbJSpe7H8RBhKDD7Uk-p5qeAO8r8ZrmfJGra3WuaqkFYwCvqLdaj9ojyb7zEqwLEKsVfw3EKAUY4NwVCUIgqXHw_i8jLpCTGdWl/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1028" data-original-width="1469" height="446" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMHzEpZK5xTGJ5fHZIWaCr2trN3o7aS-BzE8NrUMXPsWbJSpe7H8RBhKDD7Uk-p5qeAO8r8ZrmfJGra3WuaqkFYwCvqLdaj9ojyb7zEqwLEKsVfw3EKAUY4NwVCUIgqXHw_i8jLpCTGdWl/s640/2.jpg" width="640" /></a></div>
<div style="background-color: white; color: #333333; font-size: 14px; margin-top: 10px; padding: 0px;">
<span style="font-family: Georgia, Times New Roman, serif;"><strong>Step 3: </strong>That's it you have taken a backup of the database from sql instance to your local. Lets restore it to the local. Copy the backed up database to your C drive. Now open the</span></div>
<div style="background-color: white; color: #333333; font-size: 14px; margin-top: 10px; padding: 0px;">
<span style="font-family: Georgia, Times New Roman, serif;"><strong>PowerShell</strong> with administrator rights and navigate to C drive</span></div>
<div style="background-color: white; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; font-size: 14px; margin-top: 10px; padding: 0px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxvWPKfWoCn7tL-ye3SV19_aq3F6g5_BieZiln4XtYQzth9r9nvTZ8B2uszP4wlsW8V2nLizQ4IM3rxabFUya5woMNJyUNioIQ0f93poXzkLui494jM2KwqoNVvqI-kFWfSzRICdtdULIT/s1600/2018-02-07_11-51-19+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="789" data-original-width="1103" height="456" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxvWPKfWoCn7tL-ye3SV19_aq3F6g5_BieZiln4XtYQzth9r9nvTZ8B2uszP4wlsW8V2nLizQ4IM3rxabFUya5woMNJyUNioIQ0f93poXzkLui494jM2KwqoNVvqI-kFWfSzRICdtdULIT/s640/2018-02-07_11-51-19+%25281%2529.png" width="640" /></a></div>
<div style="background-color: white; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; font-size: 14px; margin-top: 10px; padding: 0px;">
<br /></div>
<div style="background-color: white; color: #333333; font-size: 14px; margin-top: 10px; padding: 0px;">
<span style="font-family: Georgia, Times New Roman, serif;"><strong>Step 4: </strong>Lets download the powershell script to remove the master key<strong><a data-linked-resource-container-id="327647301" data-linked-resource-container-version="6" data-linked-resource-content-type="application/octet-stream" data-linked-resource-default-alias="RemoveMasterKey.ps1" data-linked-resource-id="356515966" data-linked-resource-type="attachment" data-linked-resource-version="1" href="https://adramatch.jira.com/wiki/download/attachments/327647301/RemoveMasterKey.ps1?version=1&modificationDate=1517984577463&cacheVersion=1&api=v2" style="color: #3572b0; text-decoration-line: none;">RemoveMasterKey.ps1</a></strong>have the script on the same drive in this case its C.</span></div>
<div style="background-color: white; color: #333333; font-size: 14px; margin-top: 10px; padding: 0px;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="background-color: white; color: #333333; font-size: 14px; margin-top: 10px; padding: 0px;">
<span style="font-family: Georgia, Times New Roman, serif;"><strong>Step 5 : </strong>Run the script as follows,</span></div>
<div style="background-color: white; color: #333333; font-size: 14px; margin-top: 10px; padding: 0px;">
<strong><span style="font-family: Georgia, Times New Roman, serif;"> .\RemoveMasterKey.ps1 -bacpacPath "C:\identity.bacpac"</span></strong></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwY04ZpROuQz2zG2OcihOmP7NeEH6N9uJFQZ2qLkXhr6saQz_Wrx3QuX2tj0ZTsLsYuVE9ylJPE_Q5TScejCIYwWuK00zuRSHz9T0DFhMd0fMlESO1_PfTMtUSzTzCFP9XfRbK37UE3-JV/s1600/2018-02-07_11-56-47.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="789" data-original-width="1103" height="457" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwY04ZpROuQz2zG2OcihOmP7NeEH6N9uJFQZ2qLkXhr6saQz_Wrx3QuX2tj0ZTsLsYuVE9ylJPE_Q5TScejCIYwWuK00zuRSHz9T0DFhMd0fMlESO1_PfTMtUSzTzCFP9XfRbK37UE3-JV/s640/2018-02-07_11-56-47.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="background-color: white; color: #333333; font-size: 14px; margin-top: 10px; padding: 0px;">
<span style="font-family: Georgia, "Times New Roman", serif;">That's it, now you can restore it on MSSQL 2017 in your local environment.</span></div>
<div style="background-color: white; color: #333333; font-size: 14px; margin-top: 10px; padding: 0px;">
<span style="font-family: Georgia, Times New Roman, serif;"><strong>Step 6: </strong>Connect to your local server<strong>,</strong> and click<strong> Databases → Import-Data-Tier-Application</strong></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5qjgLC5WEAv-dC4ZBskE4yo9XErEWaV-ZJpVAMZLFTuE8UpC-u34Bd36jdvh5lzhg5jJF2W7IrDcoO3MS9I6EX4zgrModo-jGdHcfzrtodwaoPcv_moqLiTbFX62YUqwXpy6jReyspji0/s1600/ewes.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="533" data-original-width="420" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5qjgLC5WEAv-dC4ZBskE4yo9XErEWaV-ZJpVAMZLFTuE8UpC-u34Bd36jdvh5lzhg5jJF2W7IrDcoO3MS9I6EX4zgrModo-jGdHcfzrtodwaoPcv_moqLiTbFX62YUqwXpy6jReyspji0/s400/ewes.jpg" width="315" /></a></div>
<div style="background-color: white; color: #333333; font-size: 14px; margin-top: 10px; padding: 0px;">
<span style="font-family: Georgia, Times New Roman, serif;"><strong>Step 7 : </strong>Give a name for your database to restore. </span></div>
<br />
<div style="background-color: white; color: #333333; font-size: 14px; margin-top: 10px; padding: 0px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEyAiljIRvf5bshN330bCpZbYjzT6kM6oIw3p91IiPgeOqfvyZF65a_KiFWiJDXf0gOipktsCLDR_pq5E_cd4JCZVTTBZ9Dy_cgFuHthWFa-4SQCcOXn8UPwhJq44u84yWW-QtNcN-VrEA/s1600/2018-02-07_12-00-48.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="981" data-original-width="954" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEyAiljIRvf5bshN330bCpZbYjzT6kM6oIw3p91IiPgeOqfvyZF65a_KiFWiJDXf0gOipktsCLDR_pq5E_cd4JCZVTTBZ9Dy_cgFuHthWFa-4SQCcOXn8UPwhJq44u84yWW-QtNcN-VrEA/s640/2018-02-07_12-00-48.png" width="620" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white; color: #333333; font-family: Georgia, "Times New Roman", serif; font-size: 14px; text-align: left;">Now you will see everything in</span><span style="background-color: white; color: #333333; font-family: Georgia, "Times New Roman", serif; font-size: 14px; text-align: left;"> </span><span style="background-color: white; color: lime; font-family: Georgia, "Times New Roman", serif; font-size: 14px; text-align: left;">green</span><span style="background-color: white; color: #333333; font-family: Georgia, "Times New Roman", serif; font-size: 14px; text-align: left;">!</span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white; color: #333333; font-family: Georgia, "Times New Roman", serif; font-size: 14px; text-align: left;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyvmE1XN7-cBdDy_CtqyIxem-UeFerv30Xd2Bq-RTYlO85wdDQiZvBUEaKpNApkT1FSbNl1i7nlfR21xeCoYFb3rzaQpKMpD3A0e1VN-6FIOYVpg0FM66ZIXFHXEOc8qh0KakD9iYmM0np/s1600/2018-02-07_12-01-40.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="981" data-original-width="954" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyvmE1XN7-cBdDy_CtqyIxem-UeFerv30Xd2Bq-RTYlO85wdDQiZvBUEaKpNApkT1FSbNl1i7nlfR21xeCoYFb3rzaQpKMpD3A0e1VN-6FIOYVpg0FM66ZIXFHXEOc8qh0KakD9iYmM0np/s640/2018-02-07_12-01-40.jpg" width="622" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white; color: #333333; font-family: Georgia, "Times New Roman", serif; font-size: 14px; text-align: left;"><br /></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white; color: #333333; font-family: Georgia, "Times New Roman", serif; font-size: 14px; text-align: left;">That's it folks, now you should be easily able to restore your development database in your local environment.</span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white; color: #333333; font-family: Georgia, "Times New Roman", serif; font-size: 14px; text-align: left;"><br /></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background-color: white; color: #333333; font-family: Georgia, "Times New Roman", serif; font-size: 14px; text-align: left;"><br /></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com1tag:blogger.com,1999:blog-2038668879669685734.post-83813029443118573472018-03-25T19:08:00.006-07:002018-03-25T19:22:25.524-07:00Wear out the features of Azure CosmosDB with AspNetCore application<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="color: #333333;">Azure CosmosDB (</span><span class="qlinkcontainer"><a data-qt-tooltip="microsoft.com" data-tooltip="attached" href="https://azure.microsoft.com/en-us/services/cosmos-db/" target="_blank"><span style="-webkit-text-stroke-width: 0px; font-variant-caps: normal; font-variant-ligatures: normal; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; widows: 2; word-spacing: 0px;"><span style="color: #2b6dad; text-decoration: none;">Azure Cosmos DB – Globally Distributed Database Service (formerly DocumentDB) | Microsoft Azure</span></span></a></span><span style="-webkit-text-stroke-width: 0px; float: none; font-variant-caps: normal; font-variant-ligatures: normal; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; widows: 2; word-spacing: 0px;">) is a super set of the service once known as “Azure Document Db”.</span> In short: “Azure <span style="color: #333333;">CosmosDB </span>” = “Azure Document Db” + new data types + new APIs.<o:p></o:p></span></div>
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <span style="font-family: "georgia" , "times new roman" , serif;"><span style="color: #333333;">You can try </span><span style="color: #333333;">CosmosDB </span><span style="color: #333333;"> for free on Azure or you can setup the </span></span><span style="color: #333333; font-family: "georgia" , "times new roman" , serif;">CosmosDB </span><span style="font-family: "georgia" , "times new roman" , serif;"><span style="color: #333333;">on your local environment by following my previous <a href="http://sajeetharan.blogspot.com/2018/03/setting-up-azure-cosmos-db-with-visual.html">blog</a>. I am becoming a fan of .NET Core with all the features and it is getting better day by day . In this blog post i just wanted to take that initial steps of how to work with CosmosDB from .NET Core Client context. After reading this blog, you should be able to do the following with CosmosDB programmatically,</span></span><br />
<br />
<div class="MsoNormal">
</div>
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;">Create Database</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Create Collection</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Create Documents <span style="color: #333333;"> </span></span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Query a Document <span style="color: #333333;"> </span></span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Delete Database <span style="color: #333333;"> </span></span></li>
</ul>
<b style="color: #333333; font-family: georgia, "times new roman", serif;">Pre-Requisities Needed:</b><br />
<div class="MsoNormal">
<span style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;"><b><br />
</b></span></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="color: #333333;">I have the following in my local environment , hope you guys have already have</span><span style="color: #333333;">😊, if not start setting up.</span></span></div>
<div class="MsoNormal">
</div>
<ul>
<li>Windows 10 OS</li>
<li>Azure CosmosDB Emulator</li>
<li>Visual Studio Code editor with C# plugin</li>
<li>.NET Core 2.0</li>
</ul>
<div>
<span style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;">Ok folks, lets get started.</span></span></div>
<div>
<span style="color: #333333;"><b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b></span></div>
<b style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;">Step 1: Create .Net Core Console Application : </span></b><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="color: #333333;">As other tutorials, to make it simple I will be creating a dotnetcore console app to work with </span></span><span style="color: #333333; font-family: "georgia" , "times new roman" , serif;">CosmosDB </span><span style="font-family: "georgia" , "times new roman" , serif;"><span style="color: #333333;">. With </span><b style="color: #333333;">Net Core </b></span><span style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;">, we now have a <b>CLI</b>. Lets create the new app with the following steps. (I’ve mentioned in the previous <a href="http://sajeetharan.blogspot.com/2018/01/build-web-api-with-net-core-using-cli.html">blog</a>)</span></span><br />
<div style="text-align: left;">
<ol>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Open command prompt or poweshell (Administrator Mode)</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Navigate to your folder where you need to create the app</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Execute the following command</span></li>
</ol>
<div>
</div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;">dotnet new console -n CosmosCoreClient -o CosmosCoreClient</pre>
</div>
<div class="MsoNormal">
</div>
<div style="text-align: left;">
<br /></div>
<div class="MsoNormal">
<span style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;">here <b>-n</b> denotes the name of the application, and -<b>o</b> tells the CLI to create a <b>folder </b>with that name and create the application inside the folder</span><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></span></div>
<div class="MsoNormal">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdT82dbw7A1Ac0vRBnGcBm-qArZHTTmmd153OLqrXwwG8ainQY4W-bwIOqunH74IwD7KYp6vMDmtl8XEtnqchw3MzDbhxi6S2JJZtqcTAVsQpOUf7b7Zq9Dt8JD6t-oNr_T9FbjxNpnhTP/s1600/2018-03-25_22-31-18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="639" data-original-width="1103" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdT82dbw7A1Ac0vRBnGcBm-qArZHTTmmd153OLqrXwwG8ainQY4W-bwIOqunH74IwD7KYp6vMDmtl8XEtnqchw3MzDbhxi6S2JJZtqcTAVsQpOUf7b7Zq9Dt8JD6t-oNr_T9FbjxNpnhTP/s640/2018-03-25_22-31-18.png" width="640" /></a></div>
<div>
<span style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></span></div>
<span style="color: #333333; font-family: "georgia" , "times new roman" , serif;">Open the newly created project in Visual Studio Code. Execute the following command</span><br />
<div class="MsoNormal">
<span style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;">Code.</span></span></div>
<div style="text-align: left;">
<span style="color: #333333; font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcvPj2ZBkyvhRjW4L01n-Iue0Xhj_NwwMmQOCO17jRxmf4NFOeL1EfCWL84j-YQ7DAW8P9rYEZtcOyoUi1Hm7qs1Vsl1mxeSsRXNBEs3xIkDRXoz9adVM-MZeetQ1KF58OvecHkzLRelEf/s1600/2018-03-25_22-32-18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="41" data-original-width="1106" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcvPj2ZBkyvhRjW4L01n-Iue0Xhj_NwwMmQOCO17jRxmf4NFOeL1EfCWL84j-YQ7DAW8P9rYEZtcOyoUi1Hm7qs1Vsl1mxeSsRXNBEs3xIkDRXoz9adVM-MZeetQ1KF58OvecHkzLRelEf/s640/2018-03-25_22-32-18.png" width="640" /></a></div>
<div class="MsoNormal">
<span style="color: #333333;"><br /></span>
<span style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;">Here is a screenshot of how it should look on your end:</span></span></div>
<div style="text-align: left;">
<span style="color: #333333; font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_RYaQ5spywV9Edzc5Nf3vir45mzUPqTnmSE15xP-dUJEJGsloWnsVk0TU5c2A68apFX-EZaJuZQ61hu8YAD0rePckCYaDa-N9BIJODdX31JYhTPBWTH-C2Fce2WOGiGdqqvU8P2siMU3u/s1600/2018-03-25_22-33-22.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="279" data-original-width="843" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_RYaQ5spywV9Edzc5Nf3vir45mzUPqTnmSE15xP-dUJEJGsloWnsVk0TU5c2A68apFX-EZaJuZQ61hu8YAD0rePckCYaDa-N9BIJODdX31JYhTPBWTH-C2Fce2WOGiGdqqvU8P2siMU3u/s640/2018-03-25_22-33-22.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">I am using C# 7.1 feature to create a async Main method in my console app. For that, we will need to make a small change in our project file a little. Open <b>CosmosDBClient.csproj</b> file to edit. Add the following <b>XML</b> node to <b>PropertyGroup </b>node.</span><o:p></o:p></div>
<div class="MsoNormal">
<br />
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="p"><</span><span class="n">LangVersion</span><span class="p">></span><span class="n">latest</span><span class="p"></</span><span class="n">LangVersion</span><span class="p">></span></pre>
</div>
<div style="text-align: left;">
</div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">After changes, your csproj file should look like below: </span><o:p></o:p></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTyduAwcPZ1lvtdTtH7xh7urqHxHrRq4pP46lA3vnedsftemW4eJm4duhy36sDUM9Co5dkCuOA8oOuzeDFKNRTvDBIqkhzkz8npuixheR6L1VRpb0PJNw6zEIiO8MY4d6WA1CoFgM5Krlz/s1600/2018-03-25_22-35-59.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="320" data-original-width="769" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTyduAwcPZ1lvtdTtH7xh7urqHxHrRq4pP46lA3vnedsftemW4eJm4duhy36sDUM9Co5dkCuOA8oOuzeDFKNRTvDBIqkhzkz8npuixheR6L1VRpb0PJNw6zEIiO8MY4d6WA1CoFgM5Krlz/s640/2018-03-25_22-35-59.png" width="640" /></a></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Lets move to the core part of integrating CosmosDB with .netCore application and start building the features.</span><o:p></o:p></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="MsoNormal">
<b><span style="font-family: "georgia" , "times new roman" , serif;">Step 2: Add CosmosDB Nuget Package</span></b><o:p></o:p></div>
<div class="MsoNormal">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">If you have followed the above steps, we have successfully created the application, next is to add reference to <b>CosmosDB </b>nuget package to get the client libraries. Advantage of these packages/libraries are, they make it easy to work with Cosmosdb.</span></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
</div>
<ol style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;">Open a command prompt and navigate to root of your project.</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Execute the following command</span></li>
</ol>
<div class="MsoNormal">
<o:p></o:p></div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;">dotnet add package Microsoft.Azure.DocumentDB.Core</pre>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgDYNkRP5JSqxhF_3sKjKASMcPz8I3RvJnYbWNQirzC9YdvTRKXhx55PrIQ1Nd5Cj6Ib7ViVR3i_rdU-difKr2lEvq5SKn-jpfLfriQ2e0yBWaQI8P9dDceOb_GeZZZI8pnsixhzCkt0Vx/s1600/2018-03-25_22-37-20.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="417" data-original-width="1081" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgDYNkRP5JSqxhF_3sKjKASMcPz8I3RvJnYbWNQirzC9YdvTRKXhx55PrIQ1Nd5Cj6Ib7ViVR3i_rdU-difKr2lEvq5SKn-jpfLfriQ2e0yBWaQI8P9dDceOb_GeZZZI8pnsixhzCkt0Vx/s640/2018-03-25_22-37-20.png" width="640" /></a></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div style="text-align: left;">
</div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">You might wonder the namespace has DocumentDB in it. In fact DocumetDB is where the whole journey started and hence the name sticks in Cosmos world too. If you now look at the project file a new reference for DocumentDB would have been added. Here is the screenshot of my project file.</span><o:p></o:p></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ_Chm40Zk6IKU9JKH_sj3D6doFehDkXrVP843ksE-UH6lYY5R6FoLWNyu4MtmPqDWazDK5KBnFG_-5jzj-xZhm7Dj3CRu5dYg0hsp6gKnuzYcDJ8jaxJLEoOEwTWWg5HASl9p4sr_99op/s1600/2018-03-26_07-16-50.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="410" data-original-width="918" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ_Chm40Zk6IKU9JKH_sj3D6doFehDkXrVP843ksE-UH6lYY5R6FoLWNyu4MtmPqDWazDK5KBnFG_-5jzj-xZhm7Dj3CRu5dYg0hsp6gKnuzYcDJ8jaxJLEoOEwTWWg5HASl9p4sr_99op/s640/2018-03-26_07-16-50.png" width="640" /></a></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br />
</b></span></div>
<div class="MsoNormal">
<b><span style="font-family: "georgia" , "times new roman" , serif;">Step 3: Creating Model for CosmosDB</span></b><o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Lets build the database. If you are new to CosmosDB you should know that CosmosDB has a query playground here <a href="https://www.documentdb.com/sql/demo">https://www.documentdb.com/sql/demo</a>. It is a sandboxed environment with couple of databases and you can try around with different queries you can write against the database. For this post, lets create the database named <b>Course </b>locally.</span><o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Since we our application is to deal with the Courses we need 4 Models here.</span></div>
<div class="MsoNormal" style="text-align: left;">
</div>
<ol>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Course</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Session</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Teacher</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Student</span></li>
</ol>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">Here are the Models of the above 4.</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br />
</b></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Course.cs</b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span></div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="k" style="color: #007020; font-weight: bold;">using</span> <span class="nn" style="color: #0e84b5; font-weight: bold;">Microsoft.Azure.Documents</span><span class="p">;</span>
<span class="k" style="color: #007020; font-weight: bold;">using</span> <span class="nn" style="color: #0e84b5; font-weight: bold;">Newtonsoft.Json</span><span class="p">;</span>
<span class="k" style="color: #007020; font-weight: bold;">using</span> <span class="nn" style="color: #0e84b5; font-weight: bold;">System</span><span class="p">;</span>
<span class="k" style="color: #007020; font-weight: bold;">using</span> <span class="nn" style="color: #0e84b5; font-weight: bold;">System.Collections.Generic</span><span class="p">;</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="k" style="color: #007020; font-weight: bold;">class</span> <span class="nc" style="color: #0e84b5; font-weight: bold;">Course</span> <span class="p">:</span> <span class="n">Document</span>
<span class="p">{</span>
<span class="na" style="color: #4070a0;"> [JsonProperty(PropertyName = "CourseId")]</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="n">Guid</span> <span class="n">CourseId</span> <span class="p">{</span> <span class="k" style="color: #007020; font-weight: bold;">get</span><span class="p">;</span> <span class="k" style="color: #007020; font-weight: bold;">set</span><span class="p">;</span> <span class="p">}</span>
<span class="na" style="color: #4070a0;"> [JsonProperty(PropertyName = "Name")]</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="kt" style="color: #902000;">string</span> <span class="n">Name</span>
<span class="p">{</span>
<span class="k" style="color: #007020; font-weight: bold;">get</span>
<span class="p">{</span>
<span class="k" style="color: #007020; font-weight: bold;">return</span> <span class="n">GetPropertyValue</span><span class="p"><</span><span class="kt" style="color: #902000;">string</span><span class="p">>(</span><span class="s" style="color: #4070a0;">"Name"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k" style="color: #007020; font-weight: bold;">set</span>
<span class="p">{</span>
<span class="n">SetPropertyValue</span><span class="p">(</span><span class="s" style="color: #4070a0;">"Name"</span><span class="p">,</span> <span class="k" style="color: #007020; font-weight: bold;">value</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="na" style="color: #4070a0;"> [JsonProperty(PropertyName = "Sessions")]</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="n">List</span><span class="p"><</span><span class="n">Session</span><span class="p">></span> <span class="n">Sessions</span> <span class="p">{</span> <span class="k" style="color: #007020; font-weight: bold;">get</span><span class="p">;</span> <span class="k" style="color: #007020; font-weight: bold;">set</span><span class="p">;</span> <span class="p">}</span>
<span class="na" style="color: #4070a0;"> [JsonProperty(PropertyName = "Teacher")]</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="n">Teacher</span> <span class="n">Teacher</span> <span class="p">{</span> <span class="k" style="color: #007020; font-weight: bold;">get</span><span class="p">;</span> <span class="k" style="color: #007020; font-weight: bold;">set</span><span class="p">;</span> <span class="p">}</span>
<span class="na" style="color: #4070a0;"> [JsonProperty(PropertyName = "Students")]</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="n">List</span><span class="p"><</span><span class="n">Student</span><span class="p">></span> <span class="n">Students</span> <span class="p">{</span> <span class="k" style="color: #007020; font-weight: bold;">get</span><span class="p">;</span> <span class="k" style="color: #007020; font-weight: bold;">set</span><span class="p">;</span> <span class="p">}</span>
<span class="p">}</span></pre>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="MsoNormal" style="text-align: justify;">
<b><span style="font-family: "georgia" , "times new roman" , serif;">Session.cs</span></b></div>
<div class="MsoNormal" style="text-align: justify;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b></div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="k" style="color: #007020; font-weight: bold;">using</span> <span class="nn" style="color: #0e84b5; font-weight: bold;">System</span><span class="p">;</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="k" style="color: #007020; font-weight: bold;">class</span> <span class="nc" style="color: #0e84b5; font-weight: bold;">Session</span>
<span class="p">{</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="n">Guid</span> <span class="n">SessionId</span> <span class="p">{</span> <span class="k" style="color: #007020; font-weight: bold;">get</span><span class="p">;</span> <span class="k" style="color: #007020; font-weight: bold;">set</span><span class="p">;</span> <span class="p">}</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="kt" style="color: #902000;">string</span> <span class="n">Name</span> <span class="p">{</span> <span class="k" style="color: #007020; font-weight: bold;">get</span><span class="p">;</span> <span class="k" style="color: #007020; font-weight: bold;">set</span><span class="p">;</span> <span class="p">}</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="kt" style="color: #902000;">int</span> <span class="n">MaterialsCount</span> <span class="p">{</span> <span class="k" style="color: #007020; font-weight: bold;">get</span><span class="p">;</span> <span class="k" style="color: #007020; font-weight: bold;">set</span><span class="p">;</span> <span class="p">}</span>
<span class="p">}</span></pre>
<span style="color: #333333; font-family: "georgia" , "times new roman" , serif;"></span></div>
<br />
<b><span style="font-family: "georgia" , "times new roman" , serif;">Teacher.cs</span></b><br />
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b> <br />
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="k" style="color: #007020; font-weight: bold;">using</span> <span class="nn" style="color: #0e84b5; font-weight: bold;">System</span><span class="p">;</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="k" style="color: #007020; font-weight: bold;">class</span> <span class="nc" style="color: #0e84b5; font-weight: bold;">Teacher</span>
<span class="p">{</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="n">Guid</span> <span class="n">TeacherId</span> <span class="p">{</span> <span class="k" style="color: #007020; font-weight: bold;">get</span><span class="p">;</span> <span class="k" style="color: #007020; font-weight: bold;">set</span><span class="p">;</span> <span class="p">}</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="kt" style="color: #902000;">string</span> <span class="n">FullName</span> <span class="p">{</span> <span class="k" style="color: #007020; font-weight: bold;">get</span><span class="p">;</span> <span class="k" style="color: #007020; font-weight: bold;">set</span><span class="p">;</span> <span class="p">}</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="kt" style="color: #902000;">int</span> <span class="n">Age</span> <span class="p">{</span> <span class="k" style="color: #007020; font-weight: bold;">get</span><span class="p">;</span> <span class="k" style="color: #007020; font-weight: bold;">set</span><span class="p">;</span> <span class="p">}</span>
<span class="p">}</span></pre>
<b><br />
</b> <b><span style="font-family: "georgia" , "times new roman" , serif;">Student.cs</span></b><br />
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b> <br />
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="k" style="color: #007020; font-weight: bold;">using</span> <span class="nn" style="color: #0e84b5; font-weight: bold;">System</span><span class="p">;</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="k" style="color: #007020; font-weight: bold;">class</span> <span class="nc" style="color: #0e84b5; font-weight: bold;">Student</span>
<span class="p">{</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="n">Guid</span> <span class="n">StudentId</span> <span class="p">{</span> <span class="k" style="color: #007020; font-weight: bold;">get</span><span class="p">;</span> <span class="k" style="color: #007020; font-weight: bold;">set</span><span class="p">;</span> <span class="p">}</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="kt" style="color: #902000;">string</span> <span class="n">FullName</span> <span class="p">{</span> <span class="k" style="color: #007020; font-weight: bold;">get</span><span class="p">;</span> <span class="k" style="color: #007020; font-weight: bold;">set</span><span class="p">;</span> <span class="p">}</span>
<span class="p">}</span></pre>
</div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <span style="font-family: "georgia" , "times new roman" , serif;">Lets create the Client as the next step.</span><br />
<br />
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Step 4: Creating the Client</b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Next step you will need to instantiate the CosmosDb client before we do anything with the database. In order to connect to the local instance of the cosmosDb, we need to configure 2 things,<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="MsoNormal">
</div>
<ol style="text-align: left;">
<li>URL of the CosmosDb instane</li>
<li>Authentication key needed to authenticate.</li>
</ol>
<span style="font-family: "georgia" , "times new roman" , serif;">As stated above, When you start the </span><span style="font-family: "times new roman";">CosmosDb </span><span style="font-family: "georgia" , "times new roman" , serif;"> local emulator, the db instance is available at </span><a href="https://localhost:8081/" style="font-family: georgia, "times new roman", serif;">https://localhost:8081</a><span style="font-family: "georgia" , "times new roman" , serif;">. The </span><b style="font-family: georgia, "times new roman", serif;">authkey </b><span style="font-family: "georgia" , "times new roman" , serif;">for local emulator is a static key and you can find it here in this article(</span><a href="https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator#authenticating-requests" style="font-family: georgia, "times new roman", serif;">https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator#authenticating-requests</a><span style="font-family: "georgia" , "times new roman" , serif;">). This key works only with the local emulator and wont work with your Azure instance, you can find the key if you are using azure instance from the portal as mentioned in the </span><a href="https://stackoverflow.com/questions/49320441/where-is-accountkey-for-cosmosdb-in-azure-portal" style="font-family: georgia, "times new roman", serif;">answer</a><span style="font-family: "georgia" , "times new roman" , serif;">. Here is the code snippet to instantiate the client:</span><br />
<br />
<br />
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="k" style="color: #007020; font-weight: bold;">static</span> <span class="kt" style="color: #902000;">string</span> <span class="n">endpointUri</span> <span class="p">=</span> <span class="s" style="color: #4070a0;">"https://localhost:8081"</span><span class="p">;</span>
<span class="k" style="color: #007020; font-weight: bold;">static</span> <span class="kt" style="color: #902000;">string</span> <span class="n">authKey</span> <span class="p">=</span> <span class="s" style="color: #4070a0;">"C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw=="</span><span class="p">;</span>
<span class="kt" style="color: #902000;">string</span> <span class="n">dbName</span> <span class="p">=</span> <span class="s" style="color: #4070a0;">"CourseDB"</span><span class="p">;</span>
<span class="kt" style="color: #902000;">string</span> <span class="n">collectionName</span> <span class="p">=</span> <span class="s" style="color: #4070a0;">"Courses"</span><span class="p">;</span>
<span class="k" style="color: #007020; font-weight: bold;">static</span> <span class="k" style="color: #007020; font-weight: bold;">void</span> <span class="nf" style="color: #06287e;">Main</span><span class="p">(</span><span class="kt" style="color: #902000;">string</span><span class="p">[]</span> <span class="n">args</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">Console</span><span class="p">.</span><span class="n">WriteLine</span><span class="p">(</span><span class="s" style="color: #4070a0;">"Press any key to run"</span><span class="p">);</span>
<span class="n">Console</span><span class="p">.</span><span class="n">ReadLine</span><span class="p">();</span>
<span class="n">Run</span><span class="p">();</span>
<span class="n">Console</span><span class="p">.</span><span class="n">ReadLine</span><span class="p">();</span>
<span class="p">}</span>
<span class="k" style="color: #007020; font-weight: bold;">private</span> <span class="k" style="color: #007020; font-weight: bold;">static</span> <span class="k" style="color: #007020; font-weight: bold;">async</span> <span class="k" style="color: #007020; font-weight: bold;">void</span> <span class="nf" style="color: #06287e;">Run</span><span class="p">()</span>
<span class="p">{</span>
<span class="n">DocumentClient</span> <span class="n">documentClient</span> <span class="p">=</span> <span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="n">DocumentClient</span><span class="p">(</span><span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="n">Uri</span><span class="p">(</span><span class="n">endpointUri</span><span class="p">),</span>
<span class="n">authKey</span><span class="p">);</span>
<span class="p">}</span></pre>
</div>
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">When the method Run is exectued the Client is instantiated with the local CosmosDB emulator. </span><br />
<br />
<br />
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Step 5: Lets start building the features</b></span><o:p></o:p></div>
<br />
<span style="font-family: "georgia" , "times new roman" , serif; text-align: justify;">Next step is to build the features as listed above. Lets add the methods inside the Async method.</span><br />
<div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b><u>Creating Database:</u></b><o:p></o:p></span></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br />
</b></span></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">To create a new database programmatically, we make use of <b>CreateDatabaseAsync()</b> or <b>CreateDatabaseIfNotExistsAsync()</b>. When creating the database we pass the database name. Here is the code snippet:</span><o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="k" style="color: #007020; font-weight: bold;">private</span> <span class="k" style="color: #007020; font-weight: bold;">static</span> <span class="k" style="color: #007020; font-weight: bold;">async</span> <span class="n">Task</span><span class="p"><</span><span class="n">Database</span><span class="p">></span> <span class="n">CreateDatabase</span><span class="p">(</span><span class="n">DocumentClient</span> <span class="n">documentClient</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">Database</span> <span class="n">database</span> <span class="p">=</span> <span class="n">documentClient</span><span class="p">.</span><span class="n">CreateDatabaseQuery</span><span class="p">().</span><span class="n">Where</span><span class="p">(</span><span class="n">c</span> <span class="p">=></span> <span class="n">c</span><span class="p">.</span><span class="n">Id</span> <span class="p">==</span> <span class="s" style="color: #4070a0;">"courseDatabase"</span><span class="p">).</span><span class="n">AsEnumerable</span><span class="p">().</span><span class="n">FirstOrDefault</span><span class="p">();</span>
<span class="k" style="color: #007020; font-weight: bold;">if</span> <span class="p">(</span><span class="n">database</span> <span class="p">==</span> <span class="k" style="color: #007020; font-weight: bold;">null</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">database</span> <span class="p">=</span> <span class="k" style="color: #007020; font-weight: bold;">await</span> <span class="n">documentClient</span><span class="p">.</span><span class="n">CreateDatabaseAsync</span><span class="p">(</span><span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="n">Database</span><span class="p">()</span>
<span class="p">{</span>
<span class="n">Id</span> <span class="p">=</span> <span class="s" style="color: #4070a0;">"courseDatabase"</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="k" style="color: #007020; font-weight: bold;">return</span> <span class="n">database</span><span class="p">;</span>
<span class="p">}</span></pre>
</div>
<div>
When you refresh the URL of local CosmosDB emulator, You should see the database created in your local db emulator as follows,</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1AKFZZR6NL2mbXSJdnWdPF2MCF5iVhedPI6Mxe-xU1-kll9h7JwPegiNLSqD2ZEROOGlfMNQpb__0FNVqcfa3WfVOS05rs4Gw1zsxir3m3DrGmYT_o3DCDpCERCjNic484vFUD39cGFYD/s1600/2018-03-26_06-43-15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="216" data-original-width="855" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1AKFZZR6NL2mbXSJdnWdPF2MCF5iVhedPI6Mxe-xU1-kll9h7JwPegiNLSqD2ZEROOGlfMNQpb__0FNVqcfa3WfVOS05rs4Gw1zsxir3m3DrGmYT_o3DCDpCERCjNic484vFUD39cGFYD/s640/2018-03-26_06-43-15.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<b><span style="font-family: "georgia" , "times new roman" , serif;"><u>Creating Collection:</u></span></b></div>
<div>
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b></div>
<div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Once the database is created, we can then create a collection. We make use of <b>CreateDocumentCollectionAsync() </b>or <b>CreateDocumentCollectionIfNotExistsAsync()</b>. </span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">We will need to provide what is known as the database link (basically the URI at which the db can be reached) and the collection name to the create method. Here is the code snippet:</span><o:p></o:p></div>
</div>
<div>
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b></div>
<div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="k" style="color: #007020; font-weight: bold;">private</span> <span class="k" style="color: #007020; font-weight: bold;">static</span> <span class="k" style="color: #007020; font-weight: bold;">async</span> <span class="n">Task</span><span class="p"><</span><span class="n">DocumentCollection</span><span class="p">></span> <span class="n">CreateDocumentCollection</span><span class="p">(</span><span class="n">DocumentClient</span> <span class="n">documentClient</span><span class="p">,</span> <span class="n">Database</span> <span class="n">database</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">DocumentCollection</span> <span class="n">documentCollection</span> <span class="p">=</span> <span class="n">documentClient</span><span class="p">.</span><span class="n">CreateDocumentCollectionQuery</span><span class="p">(</span><span class="n">database</span><span class="p">.</span><span class="n">CollectionsLink</span><span class="p">).</span><span class="n">Where</span><span class="p">(</span><span class="n">c</span> <span class="p">=></span> <span class="n">c</span><span class="p">.</span><span class="n">Id</span> <span class="p">==</span> <span class="s" style="color: #4070a0;">"courseDocumentCollection"</span><span class="p">).</span><span class="n">AsEnumerable</span><span class="p">().</span><span class="n">FirstOrDefault</span><span class="p">();</span>
<span class="k" style="color: #007020; font-weight: bold;">if</span> <span class="p">(</span><span class="n">documentCollection</span> <span class="p">==</span> <span class="k" style="color: #007020; font-weight: bold;">null</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">documentCollection</span> <span class="p">=</span> <span class="k" style="color: #007020; font-weight: bold;">await</span> <span class="n">documentClient</span><span class="p">.</span><span class="n">CreateDocumentCollectionAsync</span><span class="p">(</span><span class="n">database</span><span class="p">.</span><span class="n">SelfLink</span><span class="p">,</span> <span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="n">DocumentCollection</span><span class="p">()</span>
<span class="p">{</span>
<span class="n">Id</span> <span class="p">=</span> <span class="s" style="color: #4070a0;">"courseDocumentCollection"</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="k" style="color: #007020; font-weight: bold;">return</span> <span class="n">documentCollection</span><span class="p">;</span>
<span class="p">}</span></pre>
</div>
</div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <span style="font-family: "georgia" , "times new roman" , serif;">Now you should the the Collection for Course is created as follows,</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7W-6otQKtLFZ7iPXEzN678_vS1MyBuWc2nCvI2la8W3UnHhwjWItGYg7oyAdUPSqifi86wRh3DCZdakSb-wZqJCV-kyxM_odu1tnUHvS-uq7tIutfrlg3fH4RkQSP7TcJvGMldGhX-hKF/s1600/2018-03-26_06-48-57.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="418" data-original-width="877" height="304" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7W-6otQKtLFZ7iPXEzN678_vS1MyBuWc2nCvI2la8W3UnHhwjWItGYg7oyAdUPSqifi86wRh3DCZdakSb-wZqJCV-kyxM_odu1tnUHvS-uq7tIutfrlg3fH4RkQSP7TcJvGMldGhX-hKF/s640/2018-03-26_06-48-57.png" width="640" /></a></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <br />
<div class="MsoNormal">
<u><span style="font-family: "georgia" , "times new roman" , serif;"><b>Creating Document : </b></span><o:p></o:p></u></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <br />
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">After creating the database and collection, we can now create the documents. We make use of <b>CreateDocumentAsync() </b>for this purpose. We will need to pass the URI of the collection under which we want to create the document and the document data itself. In this example we make use of the <b>Course </b>data mode i showed earlier and pass it to the create method. Here is the code snippet: </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <span style="font-family: "georgia" , "times new roman" , serif;"></span><br />
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="k" style="color: #007020; font-weight: bold;">private</span> <span class="k" style="color: #007020; font-weight: bold;">static</span> <span class="k" style="color: #007020; font-weight: bold;">async</span> <span class="n">Task</span> <span class="nf" style="color: #06287e;">CreateCourse</span><span class="p">(</span><span class="n">DocumentClient</span> <span class="n">documentClient</span><span class="p">,</span> <span class="n">DocumentCollection</span> <span class="n">documentCollection</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">Course</span> <span class="n">course</span> <span class="p">=</span> <span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="n">Course</span><span class="p">()</span>
<span class="p">{</span>
<span class="n">CourseId</span> <span class="p">=</span> <span class="n">Guid</span><span class="p">.</span><span class="n">NewGuid</span><span class="p">(),</span>
<span class="n">Name</span> <span class="p">=</span> <span class="s" style="color: #4070a0;">"En"</span><span class="p">,</span>
<span class="n">Teacher</span> <span class="p">=</span> <span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="n">Teacher</span><span class="p">()</span>
<span class="p">{</span>
<span class="n">TeacherId</span> <span class="p">=</span> <span class="n">Guid</span><span class="p">.</span><span class="n">NewGuid</span><span class="p">(),</span>
<span class="n">FullName</span> <span class="p">=</span> <span class="s" style="color: #4070a0;">"Scott Hanselman"</span><span class="p">,</span>
<span class="n">Age</span> <span class="p">=</span> <span class="m" style="color: #40a070;">44</span>
<span class="p">},</span>
<span class="n">Students</span> <span class="p">=</span> <span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="n">List</span><span class="p"><</span><span class="n">Student</span><span class="p">>()</span>
<span class="p">{</span>
<span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="nf" style="color: #06287e;">Student</span><span class="p">(){</span>
<span class="n">FullName</span> <span class="p">=</span> <span class="s" style="color: #4070a0;">"Trump"</span><span class="p">,</span>
<span class="n">StudentId</span> <span class="p">=</span> <span class="n">Guid</span><span class="p">.</span><span class="n">NewGuid</span><span class="p">()</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="n">Sessions</span> <span class="p">=</span> <span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="n">List</span><span class="p"><</span><span class="n">Session</span><span class="p">>(){</span>
<span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="nf" style="color: #06287e;">Session</span><span class="p">(){</span>
<span class="n">SessionId</span> <span class="p">=</span> <span class="n">Guid</span><span class="p">.</span><span class="n">NewGuid</span><span class="p">(),</span>
<span class="n">Name</span> <span class="p">=</span> <span class="s" style="color: #4070a0;">"CosmosDB"</span><span class="p">,</span>
<span class="n">MaterialsCount</span> <span class="p">=</span> <span class="m" style="color: #40a070;">10</span>
<span class="p">},</span>
<span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="nf" style="color: #06287e;">Session</span><span class="p">(){</span>
<span class="n">SessionId</span> <span class="p">=</span> <span class="n">Guid</span><span class="p">.</span><span class="n">NewGuid</span><span class="p">(),</span>
<span class="n">Name</span> <span class="p">=</span> <span class="s" style="color: #4070a0;">"Ch1"</span><span class="p">,</span>
<span class="n">MaterialsCount</span> <span class="p">=</span> <span class="m" style="color: #40a070;">3</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="n">Document</span> <span class="n">document</span> <span class="p">=</span> <span class="k" style="color: #007020; font-weight: bold;">await</span> <span class="n">documentClient</span><span class="p">.</span><span class="n">CreateDocumentAsync</span><span class="p">(</span><span class="n">documentCollection</span><span class="p">.</span><span class="n">DocumentsLink</span><span class="p">,</span> <span class="n">course</span><span class="p">);</span>
<span class="p">}</span></pre>
</div>
</div>
<br />
<br />
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">You should see the document inserted in localdb Emulator as follows.</span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br />
</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDatePKbmbOJv8RSWf7Pgegy7H3mGaXyOFE6BiY9McRvMPDfRmlQpZYE31pl72oOdLzFSL-hbs9ZULttNBmDUiCxlxgqs0AQX0zBsrLY6k6wXgAHxMV-_DBzvVSQyLjSZELLYtSm59pm2i/s1600/2018-03-26_06-52-09.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="573" data-original-width="1360" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDatePKbmbOJv8RSWf7Pgegy7H3mGaXyOFE6BiY9McRvMPDfRmlQpZYE31pl72oOdLzFSL-hbs9ZULttNBmDUiCxlxgqs0AQX0zBsrLY6k6wXgAHxMV-_DBzvVSQyLjSZELLYtSm59pm2i/s640/2018-03-26_06-52-09.png" width="640" /></a></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br />
</b></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br />
</b></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><b><u>Querying Document:</u></b><o:p></o:p></span></div>
<div class="MsoNormal">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Now that we have created a document, we can see how to query it. We can make use of <b>CreateDocumentQuery() </b>method for this purpose. We will need to pass the collection link on which we need to query. We can then build the query as a<b> LINQ </b>expression and the client library does the rest. This is the best part of the client library. It has the ability to translate your LINQ expression to cosmos REST URIs without me having to crack my head in constructing those URIs. Here is the code snippet: </span><o:p></o:p></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="k" style="color: #007020; font-weight: bold;">private</span> <span class="n">Course</span> <span class="nf" style="color: #06287e;">QueryCourse</span><span class="p">(</span><span class="n">Guid</span> <span class="n">guid</span><span class="p">,</span> <span class="n">String</span> <span class="n">dbName</span><span class="p">,</span> <span class="n">DocumentClient</span> <span class="n">documentClient</span><span class="p">,</span> <span class="kt" style="color: #902000;">string</span> <span class="n">collectionName</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">Course</span> <span class="n">selectedCourse</span> <span class="p">=</span> <span class="n">documentClient</span><span class="p">.</span><span class="n">CreateDocumentQuery</span><span class="p"><</span><span class="n">Course</span><span class="p">>(</span>
<span class="n">UriFactory</span><span class="p">.</span><span class="n">CreateDocumentCollectionUri</span><span class="p">(</span><span class="n">dbName</span><span class="p">,</span> <span class="n">collectionName</span><span class="p">))</span>
<span class="p">.</span><span class="n">Where</span><span class="p">(</span><span class="n">v</span> <span class="p">=></span> <span class="n">v</span><span class="p">.</span><span class="n">Name</span> <span class="p">==</span> <span class="s" style="color: #4070a0;">"CosmosDB"</span><span class="p">)</span>
<span class="p">.</span><span class="n">AsEnumerable</span><span class="p">()</span>
<span class="p">.</span><span class="n">FirstOrDefault</span><span class="p">();</span>
<span class="k" style="color: #007020; font-weight: bold;">return</span> <span class="n">selectedCourse</span><span class="p">;</span>
<span class="p">}</span></pre>
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span><br />
<div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Note that you will need to import System.Linq for the LINQ expression to work.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="MsoNormal">
<u><b><span style="font-family: "georgia" , "times new roman" , serif;">Deleting Database:</span></b><o:p></o:p></u></div>
<div class="MsoNormal">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Finally, we can make use of <b>DeleteDatabaseAsync() </b>method to delete the database programmatically. We will need to provide the database link to the delete method. We can use the <b>UriFactory.CreateDatabaseUri()</b> helper method to create the database link. Here is the code snippet: </span><o:p></o:p></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
<br /></div>
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em;"><span class="k" style="color: #007020; font-weight: bold;">await</span> <span class="n">documentClient</span><span class="p">.</span><span class="n">DeleteDatabaseAsync</span><span class="p">(</span><span class="n">UriFactory</span><span class="p">.</span><span class="n">CreateDatabaseUri</span><span class="p">(</span><span class="n">dbName</span><span class="p">));</span> </pre>
</div>
</div>
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">Well, those are the main features that Azure CosmosDB client provides and if you are stuck with any of the steps above , you can check out the <a href="https://github.com/sajeetharan/AspNetCoreCosmosDB">repository </a>i have added with the samples.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Happy Coding! Lets spread Azure's CosmosDB to the world.</span></div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com1tag:blogger.com,1999:blog-2038668879669685734.post-22580854876029209902018-03-24T21:57:00.000-07:002018-03-25T01:12:38.426-07:00How to configure localization on Asp.Net Core project<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">In this post I'll walk through the process of adding localization to an <b>ASP.NET Core </b>application. Localization in ASP.NET Core is almost similar to the way it works in the ASP.NET 4.X. You have to define a number of .resx resource files in your application, one for each culture you support. You then reference resources via a key, and depending on the current culture, the appropriate value is selected from the closest matching resource file.<o:p></o:p></span></div>
<div class="MsoNormal" style="text-align: justify;">
<br /></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">As I stated above, concept of a .resx file per culture remains in ASP.NET Core, the way resources are used has changed quite a lot. In the previous version, when you added a .resx file to your solution, a designer file would be created, providing static strongly typed access to your resources through calls such as Resources.LoginString. In ASP.NET Core, resources are accessed through two abstractions, IStringLocalizer and IStringLocalizer<t>, which are injected where needed via dependency injection. These interfaces have an indexer, that allows you to access resources by a string key. If no resource exists for the key (i.e. you haven't created an appropriate .resx file containing the key), then the key itself is used as the resource. ASP.NET Core introduced two interfaces namely <b>IStringLocalizer</b> and <b>IStringLocalizer<t></t></b> for implementing or developing localized applications. IStringLocalizer interface uses the ResourceManager and ResourceReader to provide user defined culture-specific resources at run time. This simple interface contains an indexer and an IEnumerable for returning localized strings to the application. IStringLocalizer doesn't require we to store the default language strings in a resource file.<o:p></o:p></t></span></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Lets see how to add localization to your application step by step.<o:p></o:p></span></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; margin-top: 7.5pt;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b><span style="color: #333333;">Step 1: </span></b><span style="color: #333333;">As first step, add the<b> Microsoft.AspNetCore.Localization</b> NuGet package. <o:p></o:p></span></span></div>
<ul>
<li><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span><i style="text-indent: -18pt;"><span style="color: #333333;"><b>Microsoft.AspNetCore.Localization.Routing</b></span></i><span style="color: #333333; text-indent: -18pt;">: Localization with routes, e.g. <a href="http://mysite.com/en-us/Home/Index"><span style="color: #3572b0;">mysite.com/en-us/Home</span></a></span></span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span><i style="text-indent: -18pt;"><span style="color: #333333;"><b>Microsoft.AspNetCore.Mvc.Localization</b></span></i><span style="color: #333333; text-indent: -18pt;">: MVC Core Localization components, e.g. view localization, data annotation localization (Included in <i>Microsoft.AspNetCore.Mvc)</i></span></span></li>
</ul>
<!--[if !supportLists]--><br />
<div class="MsoNormal" style="text-align: justify;">
</div>
<div style="text-align: left;">
</div>
<div style="text-align: justify;">
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; margin-top: 7.5pt;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b><span style="color: #333333;">Step 2: </span></b><span style="color: #333333;">Lets configure the<b> Startup.cs</b></span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="color: #333333;"><b><br /></b></span></span></div>
<table border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="mso-cellspacing: 0cm; mso-padding-alt: 0cm 0cm 0cm 0cm; mso-yfti-tbllook: 1184; width: 681px;"><tbody> </tbody></table>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; margin-top: 7.5pt;">
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em; text-align: left;"><span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="k" style="color: #007020; font-weight: bold;">void</span> <span class="nf" style="color: #06287e;">ConfigureServices</span><span class="p">(</span><span class="n">IServiceCollection</span> <span class="n">services</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">services</span><span class="p">.</span><span class="n">AddLocalization</span><span class="p">(</span><span class="n">o</span> <span class="p">=>;</span>
<span class="p">{</span>
<span class="n">o</span><span class="p">.</span><span class="n">ResourcesPath</span> <span class="p">=</span> <span class="s" style="color: #4070a0;">"Resources"</span><span class="p">;</span>
<span class="p">});</span>
<span class="n">services</span><span class="p">.</span><span class="n">AddMvc</span><span class="p">();</span>
<span class="p">}</span></pre>
</div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; margin-top: 7.5pt;">
<span style="color: #333333; font-family: "georgia" , "times new roman" , serif;">The above configuration adds the necessary services for localization to the service container. It also specifies that we will use a folder called </span><i style="color: #333333; font-family: georgia, "times new roman", serif;">Resources</i><span style="color: #333333; font-family: "georgia" , "times new roman" , serif;"> to put our translation resources in.</span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; margin-top: 7.5pt;">
<b style="font-family: georgia, "times new roman", serif;"><span style="color: #2c3e50;"><br /></span></b>
<b style="font-family: georgia, "times new roman", serif;"><span style="color: #2c3e50;">Step 3:</span></b><span style="color: #2c3e50; font-family: "georgia" , "times new roman" , serif;"> Let's add the request localization middleware to </span><span style="color: #333333; font-family: "georgia" , "times new roman" , serif;">Configure</span><span style="color: #2c3e50; font-family: "georgia" , "times new roman" , serif;"> in </span><span style="color: #333333; font-family: "georgia" , "times new roman" , serif;">Startup</span><span style="color: #2c3e50; font-family: "georgia" , "times new roman" , serif;">:</span></div>
<br />
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em; text-align: left;"><span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="k" style="color: #007020; font-weight: bold;">void</span> <span class="nf" style="color: #06287e;">Configure</span><span class="p">(</span><span class="n">IApplicationBuilder</span> <span class="n">app</span><span class="p">,</span> <span class="n">IHostingEnvironment</span> <span class="n">env</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">app</span><span class="p">.</span><span class="n">UseStaticFiles</span><span class="p">();</span>
<span class="n">IList<</span><span class="n">CultureInfo</span><span class="p">></span> <span class="n">supportedCultures</span> <span class="p">=</span> <span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="n">List</span><span class="p"><</span><span class="n">CultureInfo></span><span class="p">;</span>
<span class="p">{</span>
<span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="nf" style="color: #06287e;">CultureInfo</span><span class="p">(</span><span class="s" style="color: #4070a0;">"en-US"</span><span class="p">),</span>
<span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="nf" style="color: #06287e;">CultureInfo</span><span class="p">(</span><span class="s" style="color: #4070a0;">"no"</span><span class="p">),</span>
<span class="p">};</span>
<span class="n">app</span><span class="p">.</span><span class="n">UseRequestLocalization</span><span class="p">(</span><span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="n">RequestLocalizationOptions</span>
<span class="p">{</span>
<span class="n">DefaultRequestCulture</span> <span class="p">=</span> <span class="k" style="color: #007020; font-weight: bold;">new</span> <span class="n">RequestCulture</span><span class="p">(</span><span class="s" style="color: #4070a0;">"en-US"</span><span class="p">),</span>
<span class="n">SupportedCultures</span> <span class="p">=</span> <span class="n">supportedCultures</span><span class="p">,</span>
<span class="n">SupportedUICultures</span> <span class="p">=</span> <span class="n">supportedCultures</span>
<span class="p">});</span>
<span class="n">app</span><span class="p">.</span><span class="n">UseMvc</span><span class="p">(</span><span class="n">routes</span> <span class="p">=></span>
<span class="p">{</span>
<span class="n">routes</span><span class="p">.</span><span class="n">MapRoute</span><span class="p">(</span>
<span class="n">name</span><span class="p">:</span> <span class="s" style="color: #4070a0;">"default"</span><span class="p">,</span>
<span class="n">template</span><span class="p">:</span> <span class="s" style="color: #4070a0;">"{controller=Home}/{action=Index}/{id?}"</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span></pre>
<br />
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; margin-top: 7.5pt;">
<span style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;">The three options we specify for the middleware are all important:The above step is necessary so that the culture for the request is set correctly. Note that it must be before any middleware that depends on the culture, such as MVC.<o:p></o:p></span></span></div>
<ul>
<li><span style="color: #333333; font-family: "georgia" , "times new roman" , serif; text-indent: -18pt;"><b>DefaultRequestCulture</b>: This is the fallback that is used if we can't figure out which one should be used</span></li>
<li><span style="color: #333333; font-family: "georgia" , "times new roman" , serif; text-indent: -18pt;"><b>SupportedCultures </b>& <b>SupportedUICultures</b>: The cultures we wish to support</span></li>
</ul>
<span style="background-color: white; color: #333333; font-family: "georgia" , "times new roman" , serif;">The above middleware adds 3 providers for the request culture by default:</span><br />
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; margin-top: 7.5pt;">
<ul>
<li><b>QueryStringRequestCultureProvider</b>: Gets the culture from query string values</li>
<li><b>CookieRequestCultureProvider</b>: Gets the culture from a cookie</li>
<li><b>AcceptLanguageHeaderRequestCultureProvider</b>: Gets the culture from the Accept-Language request header</li>
</ul>
</div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; margin-top: 7.5pt;">
<span style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;">Most browsers send the<b> Accept-Language</b> header by default to all pages. </span><span style="font-family: "segoe ui" , sans-serif; font-size: 10.5pt;"><o:p></o:p></span></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; margin-top: 7.5pt;">
<b style="font-family: Georgia, "Times New Roman", serif;"><span style="color: #333333;"><br />
</span></b></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; margin-top: 7.5pt;">
<b style="font-family: Georgia, "Times New Roman", serif;"><span style="color: #333333;">Step 4: </span></b><span style="color: #333333; font-family: "georgia" , "times new roman" , serif;">Adding the <b>resource</b> file</span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; margin-top: 7.5pt;">
<span style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;">Last thing we need before we get to actually using the localization is <i>a </i><b>resource </b><i>file</i>.All we need to do is:<o:p></o:p></span></span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-left: 0cm; mso-list: l0 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-indent: -18.0pt;">
</div>
<ul>
<li><span style="font-family: "georgia" , "times new roman" , serif; text-indent: -18pt;"><span style="color: #333333;"><span style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span></span><span style="text-indent: -18pt;"><span style="color: #333333; font-family: "georgia" , "times new roman" , serif;">Create a folder called Resources(Can be any name) in the project.</span></span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;"> Add a Resources file called SharedResources.en.resx .</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;"> Add a line in the resource file with the <b style="color: #333333; text-indent: -18pt;">Name </b><span style="color: #333333; text-indent: -18pt;">set to Login and the </span><b style="color: #333333; text-indent: -18pt;">Value </b><span style="color: #333333; text-indent: -18pt;">to "Login To My System"</span></span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEyucbnvv1Nmt1_if_jiNYgKkmOQCa-SMBhbv4IS8saY6OxcgLHqg7p5zZCUHDAKOeXwI0HwYp9Fxf0PhQhbzBxxIujpC6WE1WO4uO5DQZc2JFtX6Uckf1NoD5d1N2w6p3jqI_4ObvMo1/s1600/2018-03-25_10-55-09.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="311" data-original-width="1400" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEyucbnvv1Nmt1_if_jiNYgKkmOQCa-SMBhbv4IS8saY6OxcgLHqg7p5zZCUHDAKOeXwI0HwYp9Fxf0PhQhbzBxxIujpC6WE1WO4uO5DQZc2JFtX6Uckf1NoD5d1N2w6p3jqI_4ObvMo1/s640/2018-03-25_10-55-09.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<!--[if !supportLists]--><br />
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; margin-top: 7.5pt;">
<b><span style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;">Step 5: <i> </i></span></span></b><span style="color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;">Create a file named <b>SharedResources.cs</b> to configure the type of Resource </span></span><br />
<br />
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em; text-align: left;"><span class="k" style="color: #007020; font-weight: bold;">namespace</span> <span class="nn" style="color: #0e84b5; font-weight: bold;">SharedResourcesExample</span>
<span class="p">{</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="k" style="color: #007020; font-weight: bold;">class</span> <span class="nc" style="color: #0e84b5; font-weight: bold;">SharedResources</span>
<span class="p">{</span>
<span class="p">}</span>
<span class="p">}</span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Step 6: </b>Modify the constuctor of your controller say "HomeController" give us an <b>IStringLocalizer<sharedresources></sharedresources></b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span>
<span style="font-family: "georgia" , "times new roman" , serif;"></span><br />
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em; text-align: left;"><span class="k" style="color: #007020; font-weight: bold;">private</span> <span class="n">IStringLocalizer</span><span class="p"><</span><span class="n">SharedResources</span><span class="p">></span> <span class="n">_sharedLocalizer</span><span class="p">;</span>
<span class="k" style="color: #007020; font-weight: bold;">public</span> <span class="nf" style="color: #06287e;">HomeController</span><span class="p">(</span><span class="n">IStringLocalizer</span><span class="p"><</span><span class="n">SharedResources</span><span class="p">></span> <span class="n">sharedLocalizer</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">_sharedLocalizer</span> <span class="p">=</span> <span class="n">sharedLocalizer</span><span class="p">;</span>
<span class="p">}</span></pre>
</div>
<br />
<b>Step 7</b>: <span style="font-family: "georgia" , "times new roman" , serif;"><span style="color: #333333;">To make the <b>localization</b> reflects on the HTML , you need to add the following on the view</span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="color: #333333;"><br /></span></span>
<br />
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em; text-align: left;"><span class="n">@inject</span> <span class="n">IStringLocalizer</span><span class="p"><</span><span class="n">SharedResourcesExample</span><span class="p">.</span><span class="n">SharedResources</span><span class="p">></span> <span class="n">SharedLocalizer</span><span class="p">;</span></pre>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">and the corresponding view as,</span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"></span>
<br />
<pre style="background: rgb(240, 240, 240); border-radius: 2px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 13px; letter-spacing: 0.015em; line-height: 15.6px; overflow-x: auto; overflow-y: hidden; padding: 0.5em; text-align: left;"><span class="p"><</span><span class="n">h1</span><span class="p">></span><span class="n">@SharedLocalizer</span><span class="p">[</span><span class="s" style="color: #4070a0;">"Login"</span><span class="p">]<</span><span class="n">br</span><span class="p">></span></pre>
<br />
<table border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="mso-cellspacing: 0cm; mso-padding-alt: 0cm 0cm 0cm 0cm; mso-yfti-tbllook: 1184; width: 681px;"><tbody> </tbody></table>
<b style="background-color: white; font-family: georgia, "times new roman", serif; text-align: left;"><span style="color: #333333;">NOTE: </span></b><span style="background-color: white; color: #333333; font-family: "georgia" , "times new roman" , serif; text-align: left;">I was stuck in an issue that localization worked on controller but not on the view. The fix is to check the namespace of SharedResource in the view, it should be the one that corresponds to the class we added.</span><br />
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; margin-top: 7.5pt;">
<span style="color: #333333; font-family: "georgia" , "times new roman" , serif;">If you are stuck with any of the steps, find the code in the <a href="https://github.com/sajeetharan/AspNetCoreLocalization">sample project.</a> </span><span style="color: #333333; font-family: "georgia" , "times new roman" , serif;">That's all about setting up localization on an ASP.NET CORE project.</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b style="background-color: white; color: #333333; font-family: "Segoe UI", sans-serif; font-size: 10.5pt;">References :</b></div>
<div style="background: white; margin: 7.5pt 0cm 0.0001pt;">
<span style="color: #333333; font-family: "segoe ui" , sans-serif; font-size: 10.5pt;"><a href="https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization"><span style="color: #3572b0; text-decoration-line: none;">https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization</span></a><o:p></o:p></span></div>
<div style="background: white; margin: 7.5pt 0cm 0.0001pt;">
<span style="color: #333333; font-family: "segoe ui" , sans-serif; font-size: 10.5pt;"><a href="https://github.com/aspnet/Localization"><span style="color: #3572b0; text-decoration-line: none;">https://github.com/aspnet/Localization</span></a><o:p></o:p></span></div>
<div class="MsoNormal">
<o:p> </o:p></div>
<div style="background: white; margin: 7.5pt 0cm 0.0001pt;">
<span style="color: #333333; font-family: "segoe ui" , sans-serif; font-size: 10.5pt;"><a href="https://stackoverflow.com/questions/49424452/aspnetcore2-0-localization-not-working-on-html"><span style="color: #3572b0; text-decoration-line: none;">https://stackoverflow.com/questions/49424452/aspnetcore2-0-localization-not-working-on-html</span></a><o:p></o:p></span></div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com0Colombo, Sri Lanka6.9270786 79.8612430000000596.8009751 79.69988150000006 7.0531821 80.022604500000057tag:blogger.com,1999:blog-2038668879669685734.post-29188036223596184352018-03-18T04:18:00.001-07:002018-03-18T11:28:53.394-07:00Setting up Azure CosmosDB with Visual Studio Code in Local Environment<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal" style="text-align: left;">
</div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Recently I started experimenting with Azure's CosmosDB and developed
few applications using the same. To start with it this blog will help all the Azure/CosmosDB
developers out there to easily setup with visual studio code. I will be sharing
how to connect to Azure CosmosDB without using the portal in local machine.</span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">To start with it, You should have visual studio code
installed on your machine. If not download it from <a href="https://code.visualstudio.com/download">here</a>.</span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">We need to setup an extension with visual studio code as a
initial step. Azure CosmosDB extension for visual studio code gives developers
set of cool commands to work with CosmosDB. With the help of Azure CosmosDB extension
developers can easily do the actions which could be done on the azure portal
such as Create,delete,modify databases,Collections,views
and documents. Also the hierarchical representation will provide a better way
to understand the structure of database.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<b>Step 1:</b></div>
<div style="text-align: justify;">
<br /></div>
<div class="MsoNormal" style="text-align: left;">
<o:p></o:p></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">To start with, you must install the Azure CosmosDB from the
market place. So, search for Azure Cosmos DB extension in the market place and
click on install<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="MsoNormal">
<b><span style="font-family: "georgia" , "times new roman" , serif;">Go to View - > Extensions or press Ctrl + Shift + X</span></b><o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOgL9yRWrEyPjqnwBlNjRPhAnytc_nfkQuDZe6fyttdagPYZVtMVX-16GEhIX7KuLtXIGUJbIee2c8G2W3K0epmcpCWOutzPGyCGHDKxa9DMVrht8Bz2-lR9TkSO2Uzi2O_DW6kbkh_xgI/s1600/2018-03-18_14-54-29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="445" data-original-width="1600" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOgL9yRWrEyPjqnwBlNjRPhAnytc_nfkQuDZe6fyttdagPYZVtMVX-16GEhIX7KuLtXIGUJbIee2c8G2W3K0epmcpCWOutzPGyCGHDKxa9DMVrht8Bz2-lR9TkSO2Uzi2O_DW6kbkh_xgI/s640/2018-03-18_14-54-29.png" width="640" /></a></div>
<div class="MsoNormal">
<b><br /></b></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Once the extension is installed, you can find Azure CosmosDB
in explore section of visual studio code.</span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxPHCsnXq4weXSnLFU9LZoOeTzs1cyUfnIn8m3iqsYxf9noTU_9ZeqYGtxpbXcRbzFQ_iLKvWPEK-qJhjQ21CZDw_OxaYy8mlNA4dWbn82zTm0y6j-IDk91SrVAWvCilR6Auo0MXasAPW/s1600/2018-03-18_14-57-18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="637" data-original-width="747" height="544" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxPHCsnXq4weXSnLFU9LZoOeTzs1cyUfnIn8m3iqsYxf9noTU_9ZeqYGtxpbXcRbzFQ_iLKvWPEK-qJhjQ21CZDw_OxaYy8mlNA4dWbn82zTm0y6j-IDk91SrVAWvCilR6Auo0MXasAPW/s640/2018-03-18_14-57-18.png" width="640" /></a></div>
<br />
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<b>Step 2:</b><o:p></o:p></div>
<div class="MsoNormal">
<b><br /></b></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">To explore the different types of commands with Azure Cosmos
DB, open show all command palate and search for Cosmos. It will list down a
different set of commands that you can play with,<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="MsoNormal">
<b><span style="font-family: "georgia" , "times new roman" , serif;">Go to View - > Extensions or press Ctrl + Shift + P</span><span style="font-family: "georgia" , "times new roman" , serif;"> </span> </b><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSj-jxhwuduu9l6wsTd6XkpYWbu4H9qF7ZkFq5KTxeDCmwcyJ80iBH0n5QlQJRt1-3f2m4mJCI5H9aMLgRJgrAulBBNwmCLu7GtN5hwlQhla2LpzQzdlE7kd0Jso4JlLk3cIh0Pe_ICDDZ/s1600/2018-03-18_15-16-40.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="435" data-original-width="1350" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSj-jxhwuduu9l6wsTd6XkpYWbu4H9qF7ZkFq5KTxeDCmwcyJ80iBH0n5QlQJRt1-3f2m4mJCI5H9aMLgRJgrAulBBNwmCLu7GtN5hwlQhla2LpzQzdlE7kd0Jso4JlLk3cIh0Pe_ICDDZ/s640/2018-03-18_15-16-40.png" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<b>Step 3:</b><o:p></o:p></div>
<div class="MsoNormal">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Now the extension is installed successfully. Lets see how to
connect to Azure CosmosDB <span style="mso-spacerun: yes;"> </span>in local machine.
Move back to Azure CosmosDB extension section in the explorer panel.<b> Sign in to
Azure </b>account to view the CosmosDB accounts inside the visual studio code alternatively
you can select <b>“Attach Database Account”</b></span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQZZEkiDsN5LEt70_D_fT2B5P_ZkHPlS5IZDfRa6ANSorn4AIy2H3jPoNWDGOo7rbeDtZZeUXsNZ_sueX9A_M58iyl0WUY8EiJ5qyC3mwEHchGP-mpwjiTp8sWxIzrQkR74ElnefosIzBz/s1600/2018-03-18_15-16-40.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="435" data-original-width="1350" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQZZEkiDsN5LEt70_D_fT2B5P_ZkHPlS5IZDfRa6ANSorn4AIy2H3jPoNWDGOo7rbeDtZZeUXsNZ_sueX9A_M58iyl0WUY8EiJ5qyC3mwEHchGP-mpwjiTp8sWxIzrQkR74ElnefosIzBz/s640/2018-03-18_15-16-40.png" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Select the specific Database Account API, in this case it is
<b>DocumentDB </b>and enter the connection string copied from the portal</span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhijhkDDJnG1WSHwha2nj-pV-ukljeUYLaRhddPEZKsYWRM5D8B4xZna87vflCdCezdA4up1Rmhby63JAXR-6AcCHzNOoSUAnoQWpXu2e2tF5fWgX3PLToQITpsVa188Dxnr2tC4X1Cx4g4/s1600/2018-03-18_15-57-40.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="157" data-original-width="1334" height="74" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhijhkDDJnG1WSHwha2nj-pV-ukljeUYLaRhddPEZKsYWRM5D8B4xZna87vflCdCezdA4up1Rmhby63JAXR-6AcCHzNOoSUAnoQWpXu2e2tF5fWgX3PLToQITpsVa188Dxnr2tC4X1Cx4g4/s640/2018-03-18_15-57-40.png" width="640" /></a></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">\</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">To get the connection string from the Azure Portal, navigate
to the respective CosmosDB <span style="mso-spacerun: yes;"> </span>Resource, and
from the left side panel <b>Settings –> Keys -> Connection String</b> Copy the
Primary Connection String.</span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuqK7m79oRmIDllKfxA_GXUoTJl0F4lUP6kPMZalA2SnR2YYcxFTWJbZmLm7qZ9CoBr4X7RX5K1WqE9rslKFi7gtj34YmcKd30BaIEqMhFjhVmtCzJO0z83aVsFJLm6Mp9mwZiyQ6IkyvJ/s1600/2018-03-18_15-59-41.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="429" data-original-width="1600" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuqK7m79oRmIDllKfxA_GXUoTJl0F4lUP6kPMZalA2SnR2YYcxFTWJbZmLm7qZ9CoBr4X7RX5K1WqE9rslKFi7gtj34YmcKd30BaIEqMhFjhVmtCzJO0z83aVsFJLm6Mp9mwZiyQ6IkyvJ/s640/2018-03-18_15-59-41.png" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Now you can see the database displayed with the account
provided in the azure CosmosDB explorer pane.<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5J-Oy3ezRytCHL6LaLnxJqq4bzcOd2xdM93kUg1EWC9K4ou3Rg6zzjj7S_WKP6YJUbE6l49V_9Css8NfcC7Dc5IoqRpNVQ2Kqj7VA28bWyBje6fj1-EXhdG7w3jDDMMJefPlnXgseg2Iu/s1600/2018-03-18_16-03-44.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="344" data-original-width="739" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5J-Oy3ezRytCHL6LaLnxJqq4bzcOd2xdM93kUg1EWC9K4ou3Rg6zzjj7S_WKP6YJUbE6l49V_9Css8NfcC7Dc5IoqRpNVQ2Kqj7VA28bWyBje6fj1-EXhdG7w3jDDMMJefPlnXgseg2Iu/s640/2018-03-18_16-03-44.png" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">That’s it Now you can Add, Modify Database, collection, and
documents within Visual Studio Code. Play around with all the commands and
features of the extension.<o:p></o:p></span></div>
</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><span style="font-family: "georgia" , "times new roman" , serif;">Step 4: Installing Azure Cosmos DB Emulator</span></b></div>
<div class="MsoNormal">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><o:p></o:p></span></div>
<div class="MsoNormal">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Azure Cosmos DB Emulator provides a local environment that
emulates the Azure CosmosDB service for your development. With the Azure Cosmos
DB Emulator, you can develop and test your application locally, without
creating an Azure subscription and without internet connection. With the
extension we installed already you can connect with Local Emulator as well.</span><o:p></o:p></div>
</div>
<div style="background: white; margin-bottom: 12.0pt; margin-left: 0in; margin-right: 0in; margin-top: 12.0pt;">
<span style="color: #212121; font-family: "arial" , sans-serif;"><span style="font-size: 14px;"><b><u>Download Azure CosmosDB emulator:</u></b></span></span></div>
<div style="background: white; box-sizing: border-box; margin: 12pt 0in;">
<span style="color: #212121; font-family: "georgia" , "times new roman" , serif;"><span style="font-size: 14px;">You can download emulator from<a href="https://aka.ms/cosmosdb-emulator"> Microsoft Download Center.</a></span></span></div>
<div style="background: white; box-sizing: border-box; margin: 12pt 0in;">
</div>
<ol style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;">Extract setup and run emulator exe.</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Once you completed the setup, type Azure Cosmos DB Emulator in Start menu.</span></li>
</ol>
<br />
<div style="background: white; box-sizing: border-box; margin: 12pt 0in;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="background-color: transparent;">Start the local Azure CosmosDB Emulator, and make
sure it’s running.</span><span style="background-color: transparent;"> </span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcOjZH3UUaoun-iwVL_xdZpiQ4lZPyRW5lvLOyfk8SKFkwE2Luoi4fwe0csl9I1RdLQLZ-1g_lhhywjEZFDYt-sNjxpJVwnLfk8EVfQ0SMPMzr9xUwDLe4w2RPGHLZbRWdiQzGIzxfsLGu/s1600/2018-03-18_16-17-51.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="774" data-original-width="497" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcOjZH3UUaoun-iwVL_xdZpiQ4lZPyRW5lvLOyfk8SKFkwE2Luoi4fwe0csl9I1RdLQLZ-1g_lhhywjEZFDYt-sNjxpJVwnLfk8EVfQ0SMPMzr9xUwDLe4w2RPGHLZbRWdiQzGIzxfsLGu/s640/2018-03-18_16-17-51.png" width="409" /></a></div>
<div style="background: white; box-sizing: border-box; margin: 12pt 0in;">
<span style="background-color: transparent;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Verify the access by exploring the local emulator on this
address.</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<a href="https://localhost:8081/_explorer/index.html">https://localhost:8081/_explorer/index.html</a> and you should see a screen as follows.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLnw_qJHAMpRiWJT-arBnXPiP0fj4o1aBFU3LvQSqeD4odMntfn_3iqD6uTT8J-dOMjWYQiBWxURPRLDc6ZQQxZyeP50Ct_n83Mr3LESmLDJ8c4xpS37sNjwXehzDae8xGQq0yzdolpJHB/s1600/2018-03-18_16-16-56.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="682" data-original-width="1363" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLnw_qJHAMpRiWJT-arBnXPiP0fj4o1aBFU3LvQSqeD4odMntfn_3iqD6uTT8J-dOMjWYQiBWxURPRLDc6ZQQxZyeP50Ct_n83Mr3LESmLDJ8c4xpS37sNjwXehzDae8xGQq0yzdolpJHB/s640/2018-03-18_16-16-56.png" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Step 5:</b><o:p></o:p></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Once you verify your Azure Cosmos DB Emulator is running,
you can go back to Visual Studio Code and try to<b> attach the emulator</b> by
selecting Connected with Azure Cosmos DB Emulator option<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis0XAd1u8kt23VGqzgS9kHS7-7bMmTVARHKn3iyR9dXeKnQCxp4xxnkU4-62-QKoEOkeX-pGSZai_u3OobA5wRx9zRrqxWXInvHelLvRvAu6qjCAtu5oPMxkVMZkQ5yx81aRGjRADyv2tu/s1600/2018-03-18_16-19-48.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="216" data-original-width="680" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis0XAd1u8kt23VGqzgS9kHS7-7bMmTVARHKn3iyR9dXeKnQCxp4xxnkU4-62-QKoEOkeX-pGSZai_u3OobA5wRx9zRrqxWXInvHelLvRvAu6qjCAtu5oPMxkVMZkQ5yx81aRGjRADyv2tu/s640/2018-03-18_16-19-48.png" width="640" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<o:p><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></o:p></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">After 1 or 2 minutes, you can find your local Cosmos DB data
also mapped in Visual Studio Code</span><span style="font-family: "georgia" , "times new roman" , serif;">.</span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8EZAihO4zplhKeb-hGENh7i6dQR-8xgbMF7Y8Tz-4IQjvtaw0UKqNXHICz72nhCi37MSoQ7GDiDna-eaQ5OK7awK9HaGBjUqjF-qroi7u6T91QfWEGQs-InBsrEgbs2Oarnvm5YloDOL1/s1600/2018-03-18_16-47-23.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="245" data-original-width="683" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8EZAihO4zplhKeb-hGENh7i6dQR-8xgbMF7Y8Tz-4IQjvtaw0UKqNXHICz72nhCi37MSoQ7GDiDna-eaQ5OK7awK9HaGBjUqjF-qroi7u6T91QfWEGQs-InBsrEgbs2Oarnvm5YloDOL1/s640/2018-03-18_16-47-23.png" width="640" /></a></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">As a developer I found this extension is
very powerful and if you are developing Azure based solution with Visual Studio
code, you must start exploring this.</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "georgia" , "times new roman" , serif;">Start building application with cosmosdb today 😊
Cheers! </span><o:p></o:p></div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com1tag:blogger.com,1999:blog-2038668879669685734.post-12033850947899697362018-01-30T22:06:00.001-08:002018-01-31T02:55:45.977-08:00Build a web API with .NET Core using CLI Tools<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
In this blog i will start with an introduction to .NET Core CLI tools with an example of how to create a web API using the CLI tools provided with .NET Core. At the end we will set up a solution grouping an API project and a test project. Let's dive into the steps,<br />
<br />
<b>Step 1 : Installing the tools</b><br />
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="background-color: white;">Need to install <a href="https://www.microsoft.com/net/learn/get-started/windows?utm_expid=.-Fmi9Q05Ry2oXQgdtPElHw.0&utm_referrer=https%3A%2F%2Fwww.google.lk%2F">.NET Core</a> and <a href="https://code.visualstudio.com/">Visual Studio Code</a> that are supported on Mac, Unix and Windows. You can read more on how it works on <a href="https://blogs.msdn.microsoft.com/dotnet/2016/09/26/introducing-net-standard/">multi-platform/framework</a>.</span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br />
</span></div>
<div style="text-align: justify;">
<b style="text-align: left;">Step 2 : Creating the solution</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: left;">
Let's open the terminal/Powershell as a administrator to create our solution. Lets create a solution named <span style="background-color: #f9f2f4; color: #c7254e; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace; font-size: 14.4px; text-align: justify;">DotNetCoreDemoApi</span></div>
<div style="text-align: left;">
<br /></div>
</div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> dotnet new sln -o DotNetCoreDemoApi
</code></pre>
</div>
<br />
The above command will create a new folder and DotNetCoreDemoApi a solution file with the name DotNetCoreDemoApi sln .<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk7LS2RJAcIJ05DeQgJVa4nGeQOwqWJzhMO3tauAiNFCJT3BO_2QLZUlhJeN7GqXS_Aur76XFRt2w-RUIRu2ixrOIp4wUHFETfTrZlPBKk2XhHXuHEBFAVwVNldnt7d8yEvYKPv93sQto6/s1600/2018-01-31_10-54-54_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="709" data-original-width="1103" height="409" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk7LS2RJAcIJ05DeQgJVa4nGeQOwqWJzhMO3tauAiNFCJT3BO_2QLZUlhJeN7GqXS_Aur76XFRt2w-RUIRu2ixrOIp4wUHFETfTrZlPBKk2XhHXuHEBFAVwVNldnt7d8yEvYKPv93sQto6/s640/2018-01-31_10-54-54_1.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Lets get into that folder.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<b>Step 3: Creating the web API project</b><br />
<br />
Run the following command,</div>
<br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> cd DotNetCoreDemoApi
</code></pre>
</div>
<br />
Now that the solution is here, we can create our API project. Lets name the web API as <b>DotNetCoreDemoApi</b>. Run the following command to create the project.<br />
<br /></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">dotnet new webapi -o DotNetCoreDemoApi
</code></pre>
<br />
That command will create a sub folder named <b>DotNetCoreDemoApi </b> inside the solution <b>DotNetCoreDemoApi</b> and the ouput is as follows.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCxqLe7xa43z3i-Ov7UffBRfC8XRfhZAwVKNub4mWcTz63ia85VdGNEmP8dKk7vqfUOsvTPGrrkZZB9ZXVU1SKkrrpPnZPtUS-sjwDPSWB5CqZckEeBzSnSBbEmAbd3BriWvm_eAJTRmsz/s1600/2018-01-31_11-11-34_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="265" data-original-width="1102" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCxqLe7xa43z3i-Ov7UffBRfC8XRfhZAwVKNub4mWcTz63ia85VdGNEmP8dKk7vqfUOsvTPGrrkZZB9ZXVU1SKkrrpPnZPtUS-sjwDPSWB5CqZckEeBzSnSBbEmAbd3BriWvm_eAJTRmsz/s640/2018-01-31_11-11-34_2.png" width="640" /></a></div>
<br />
The web API folder should contain a few files generated as above but what we require right now is <b>DotNetCoreDemoApi.csproj</b>. We will add a reference to it in our solution. To do so, run the following command:<br />
<br /></div>
</div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> dotnet sln add ./DotNetCoreDemoApi/DotNetCoreDemoApi.csproj
</code></pre>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-j21OpTz7ESlsHh4uPuj_evrPRqtzNvw26g6DTdufa9VB76ALSR43h5JlvUY6ypggRSu-eXb_bnPNQ3xZBfkL_zRbotp3fPc3LLotYwq8El2uVr5izzo4s7altDlvKyGOgPrZz3ZmWgt/s1600/2018-01-31_11-21-30_3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="63" data-original-width="1103" height="34" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-j21OpTz7ESlsHh4uPuj_evrPRqtzNvw26g6DTdufa9VB76ALSR43h5JlvUY6ypggRSu-eXb_bnPNQ3xZBfkL_zRbotp3fPc3LLotYwq8El2uVr5izzo4s7altDlvKyGOgPrZz3ZmWgt/s640/2018-01-31_11-21-30_3.png" width="640" /></a></div>
<br /></div>
<br />
<b>Step 4: Run the Web API</b><br />
After getting a confirmation message as above , lets start the API by running that command:<br />
<br /></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> dotnet run --project DotNetCoreDemoApi
</code></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi288Grsp7dMb5qFmoxiAveEdbL7z8pgdSNqFLCfnr66-kfTwLKZn4LO5Lz9bME0h76r3opEryFUJnCfUQ4PyIOdis79EYOorPFrOMBUym91SebamvGinseWrQMyFLYP6ATi8JOQvepaTz6/s1600/2018-01-31_11-25-50_4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="81" data-original-width="1101" height="46" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi288Grsp7dMb5qFmoxiAveEdbL7z8pgdSNqFLCfnr66-kfTwLKZn4LO5Lz9bME0h76r3opEryFUJnCfUQ4PyIOdis79EYOorPFrOMBUym91SebamvGinseWrQMyFLYP6ATi8JOQvepaTz6/s640/2018-01-31_11-25-50_4.png" width="640" /></a></div>
<br />
After a few seconds, it should display a message that the API is now running locally as above. You may access it at <a href="http://localhost:5000/api/values">http://localhost:5000/api/values</a> which is the Values API default endpoint.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFSG3OBvnYwyp4vNuhjqL74xY5Mf6NVuZ5p5n7f1TCMfrxeq5W_-yHTRelGhT1eeHNzVioRHCwYwukd1rvBwRcHIdk_WmEO7t5SBKjjFyfuS-2s70QTdXrlai9PYw1Dty8iCR73q41NVX5/s1600/2018-01-31_11-27-55_5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="216" data-original-width="1600" height="86" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFSG3OBvnYwyp4vNuhjqL74xY5Mf6NVuZ5p5n7f1TCMfrxeq5W_-yHTRelGhT1eeHNzVioRHCwYwukd1rvBwRcHIdk_WmEO7t5SBKjjFyfuS-2s70QTdXrlai9PYw1Dty8iCR73q41NVX5/s640/2018-01-31_11-27-55_5.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
That's all , API is ready and it is up and running locally. I will continue setting up the <b>TestProject </b>in the same solution in the upcoming blog. With the DotNet core it is very feasible to get your web api setup and running in 5 minutes. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com0tag:blogger.com,1999:blog-2038668879669685734.post-27128645710210415882018-01-01T18:15:00.000-08:002018-01-02T04:54:49.820-08:00Build Web Applications With Angular 5 Using Visual Studio Code<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;">My first post for the year 2018 and i wanted to write something about a technology in which i have vast experience and passionate about. This blog will be very useful for those who want to start with angular for developing web applications.</span><span style="font-family: "verdana" , sans-serif;">In this blog i am going to set up Angular 5 app using Visual Studio Code. I will be using Angular CLI for our sample application. The following are the steps needed to create your first angular application using angular5.</span><span style="font-family: "verdana" , sans-serif;"><br /></span><span style="font-family: "verdana" , sans-serif;"><br /></span><b><span style="font-family: "verdana" , sans-serif;">Steps</span></b></div>
<ul style="text-align: left;">
<li><b><span style="font-family: "verdana" , sans-serif;">Install Node.js.</span></b></li>
<li><b><span style="font-family: "verdana" , sans-serif;">Install Angular CLI.</span></b></li>
<li><b><span style="font-family: "verdana" , sans-serif;">Design our Angular App.</span></b></li>
<li><b><span style="font-family: "verdana" , sans-serif;">Launch App in the browser.</span></b></li>
<li><b><span style="font-family: "verdana" , sans-serif;">Displaying our custom information on a page.</span></b></li>
</ul>
<br />
<div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em; text-align: left;">
<span style="color: #212121; font-family: "verdana" , sans-serif;"><b>1. Install Node.js</b></span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em; text-align: left;">
<span style="color: #212121; font-family: "verdana" , sans-serif;">In this approach, the first step is to install Node.js. If you have not installed nodejs in your machine visit the website and download according to your OS. You will see the following display.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM-5WxOisyEfQHYkNcGyDt880HaMQursPRJ8n3ozqLUzht_Ce4jJUipq9-RU28rOfbvRI_UzAzSHmr8ZvYLpNMF0eqoTu_exkRpXDczHJxLBFEASUJNSNiSdMIHG113BERK5ccHR2X7_UX/s1600/Node_install.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "verdana" , sans-serif;"><img border="0" data-original-height="338" data-original-width="950" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM-5WxOisyEfQHYkNcGyDt880HaMQursPRJ8n3ozqLUzht_Ce4jJUipq9-RU28rOfbvRI_UzAzSHmr8ZvYLpNMF0eqoTu_exkRpXDczHJxLBFEASUJNSNiSdMIHG113BERK5ccHR2X7_UX/s640/Node_install.png" width="640" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em; text-align: left;">
<span style="color: #212121; font-family: "verdana" , sans-serif;">Download and install the latest LTS version as per the configuration of your machine. The current version of Node LTS is 8.9.3. Installing node.js will also install <b>npm </b>(node package manager) on your system.</span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em; text-align: left;">
<span style="color: #212121;"><span style="font-family: "verdana" , sans-serif;">Next step is to make sure everything related to node is installed, To check the version of node and npm installed on your machine, run the following command in command prompt.</span></span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em; text-align: left;">
</div>
<ul style="text-align: left;">
<li><b style="color: #212121;"><span style="font-family: "verdana" , sans-serif;">node -v </span></b></li>
<li><b style="color: #212121;"><span style="font-family: "verdana" , sans-serif;">npm -v</span></b></li>
</ul>
<br />
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em; text-align: left;">
<span style="font-family: "verdana" , sans-serif;">which will be as follows,</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYA9dHVy2qS1KBrL_EwWX5LQ_5ekAsw4dgfJGPPnTu-FXS5ZVPwrL0dZh6qLGboaU5Pug2GMlybX8FAO1xtaSOFe9AafKq5q3SgeMjYzIp2kfLkVON-6HSIn7JL8n3NIs-tvoI3hmTGuYT/s1600/npm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "verdana" , sans-serif;"><img border="0" data-original-height="638" data-original-width="1100" height="369" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYA9dHVy2qS1KBrL_EwWX5LQ_5ekAsw4dgfJGPPnTu-FXS5ZVPwrL0dZh6qLGboaU5Pug2GMlybX8FAO1xtaSOFe9AafKq5q3SgeMjYzIp2kfLkVON-6HSIn7JL8n3NIs-tvoI3hmTGuYT/s640/npm.png" width="640" /></span></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em; text-align: left;">
<strong style="box-sizing: border-box; color: #212121;"><span style="font-family: "verdana" , sans-serif;">2. Install Angular CLI</span></strong></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em; text-align: left;">
<span style="color: #212121; font-family: "verdana" , sans-serif;">We are done with the step1, next is to install angular cli. For those who are very new to angular , <a href="http://ngcli.github.io/">angular cli</a> is a command line interface for angular applications. After installing node and npm, the next step is to install Angular CLI. Run the following command in a command window.</span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
</div>
<ul style="text-align: left;">
<li><b style="color: #212121;"><span style="font-family: "verdana" , sans-serif;">npm install -g @angular/cli</span></b></li>
</ul>
<br />
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="color: #212121; font-family: "verdana" , sans-serif;">The above command will start Angular CLI installation on your machine. This might take bit of time based on the internet connectivity.</span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyfrh2KplQmKa8JvvOlRjp3g8mzq73Tppr0VNYyLH_FJDKiJM1ETC8oRXL18TMB5gQU9kPVPQIHuWKxX2cDu4xnK3L-bNuCu9fGdjuIcFmxc9SHBLt4FSD2mtHpcb_AFhFgEJW8d3qPsu7/s1600/angular.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "verdana" , sans-serif;"><img border="0" data-original-height="246" data-original-width="1099" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyfrh2KplQmKa8JvvOlRjp3g8mzq73Tppr0VNYyLH_FJDKiJM1ETC8oRXL18TMB5gQU9kPVPQIHuWKxX2cDu4xnK3L-bNuCu9fGdjuIcFmxc9SHBLt4FSD2mtHpcb_AFhFgEJW8d3qPsu7/s640/angular.png" width="640" /></span></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;"><b><span style="color: #212121;"> 3. </span><span style="background-color: transparent;"><span style="color: #212121;">Design our Angular App.</span></span></b></span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="background-color: transparent;"><span style="color: #212121; font-family: "verdana" , sans-serif;">That's all folks, we have setup the necessary environment to start coding. Lets create our application in a folder named Angular5Demo. Run the following command to create a folder for our application.</span></span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
</div>
<ul style="text-align: left;">
<li><b style="font-family: Verdana, sans-serif;"><span style="background-color: transparent;"><span style="color: #212121;">mkdir Angular5De</span></span><span style="background-color: transparent; color: #212121;">mo</span></b></li>
</ul>
<br />
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="background-color: transparent;"><span style="color: #212121; font-family: "verdana" , sans-serif;">lets navigate to our created folder, so run the following command.</span></span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
</div>
<ul style="text-align: left;">
<li><b style="font-family: Verdana, sans-serif;"><span style="background-color: transparent;"><span style="color: #212121;">cd Angular5De</span></span><span style="background-color: transparent; color: #212121;">mo</span></b></li>
</ul>
<br />
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;">we are in the same folder where our application resides, so lets create our template/structure for our application using angular cli. run the following command</span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
</div>
<ul style="text-align: left;">
<li><b style="font-family: Verdana, sans-serif;">ng new myFirstApp</b></li>
</ul>
<br />
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;">if you have missed anything the following screen shows the steps and the output.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrr1X2lJsCc32yEpoqkfCjqXUxAHKSkDSrL2O_tS9Gt9uFTROEl4L9qxeq7YfZt28b_W7gqA70XF41YPtF18phpBWfMKo7gTohwgGzCwfnQptuK6pG1LkXGE6P3VC06Q5hE7kWkum8hCQM/s1600/angular2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "verdana" , sans-serif;"><img border="0" data-original-height="803" data-original-width="1134" height="451" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrr1X2lJsCc32yEpoqkfCjqXUxAHKSkDSrL2O_tS9Gt9uFTROEl4L9qxeq7YfZt28b_W7gqA70XF41YPtF18phpBWfMKo7gTohwgGzCwfnQptuK6pG1LkXGE6P3VC06Q5hE7kWkum8hCQM/s640/angular2.png" width="640" /></span></a></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;">Lets see the code in visual studio code editor. Type code. in the command prompt.</span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
</div>
<ul style="text-align: left;">
<li><b style="font-family: Verdana, sans-serif;">code . </b></li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbY-YWJnwmBIny-d9zvjfXV2XGWhc_2vYM4NznqzPAhKT7uLTrx4sxXulQEzd-HWtpUeFA3Q1xXuwrUpxUhyRBh88Y9J4mrHbIdu0IXxreyJeCa-Oc-DUhgYb8FvL7_8iQ5tSHRHkCZefS/s1600/2018-01-01_16-37-43.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "verdana" , sans-serif;"><img border="0" data-original-height="50" data-original-width="1113" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbY-YWJnwmBIny-d9zvjfXV2XGWhc_2vYM4NznqzPAhKT7uLTrx4sxXulQEzd-HWtpUeFA3Q1xXuwrUpxUhyRBh88Y9J4mrHbIdu0IXxreyJeCa-Oc-DUhgYb8FvL7_8iQ5tSHRHkCZefS/s640/2018-01-01_16-37-43.png" width="640" /></span></a></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;">Which will open up the code in the visual studio code. <span style="color: #212121;">And that’s it. </span><span style="color: #212121;">You can see the following file structure in Solution Explorer. </span><span style="color: #212121;">We have created our first Angular app using VS Code and Angular CLI.</span></span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;">4. <b style="background-color: transparent;">Launch App in the browser</b></span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;"><span style="color: #212121;"> To launch the application and to start the web server run the following command </span></span></div>
<div style="background-color: white; box-sizing: border-box; color: #212121;">
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;"><span style="font-family: "verdana" , sans-serif;"><b>ng serve </b></span></li>
</ul>
</div>
<div>
<span style="font-family: "verdana" , sans-serif;"><span style="background-color: white; color: #212121;"><b>After running this command, </b>you can see that it is asking to open </span><em style="background-color: white; box-sizing: border-box; color: #212121;"><b>http://localhost:4200</b></em><span style="background-color: white; color: #212121;"> in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.</span></span></div>
<div>
<span style="background-color: white; color: #212121;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqkg5n-IRSEuk7jybOvsJB46blRuYM8V3G1akA5IdudHHIhLI9KpjEW4JJoZpiGvEGl9G7Gp6jXfVR2Zgdaavb6tFzfA5TtGDQjh86m-C3W3Zz_bpE2tVvO4qV3XjLOa-mSYjj9fs_FGyX/s1600/demo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "verdana" , sans-serif;"><img border="0" data-original-height="681" data-original-width="1600" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqkg5n-IRSEuk7jybOvsJB46blRuYM8V3G1akA5IdudHHIhLI9KpjEW4JJoZpiGvEGl9G7Gp6jXfVR2Zgdaavb6tFzfA5TtGDQjh86m-C3W3Zz_bpE2tVvO4qV3XjLOa-mSYjj9fs_FGyX/s640/demo.png" width="640" /></span></a></div>
<div>
<span style="background-color: white; color: #212121;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="color: #212121;"><span style="font-family: "verdana" , sans-serif;">We'll leave the web server as it is while we look into the code of this application. Again open the code inside the path by typing the foolwoing command.</span></span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="color: #212121;"><b><span style="font-family: "verdana" , sans-serif;"> code .</span></b></span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;"><span style="color: #212121;">5.<b> D</b></span><b style="background-color: transparent;">isplaying our custom information on a page.</b></span></div>
<div style="background-color: white; box-sizing: border-box; color: #212121; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;">Now, Let's display a message saying "" using JSON data on the page instead of the message “Welcome to app!”. To achieve this, open <b><em style="box-sizing: border-box;">/src/app/app.component.ts</em> file. Change it as follows or according to the data you want to see on the page.</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNyicCxdCtiyXjQFigPe6G0ac9OGtYxC3hy5TEs5FnxZYzPq_wI106Bl5XwgTMTp-UKr6Rj8rJIQR0bh7PEKwoMbpiy2UD1tgGFtqquayv68Z9jEmnQTS-0HVymjx67Bq4cTG9YInZRBVc/s1600/code-component.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "verdana" , sans-serif;"><img border="0" data-original-height="422" data-original-width="1600" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNyicCxdCtiyXjQFigPe6G0ac9OGtYxC3hy5TEs5FnxZYzPq_wI106Bl5XwgTMTp-UKr6Rj8rJIQR0bh7PEKwoMbpiy2UD1tgGFtqquayv68Z9jEmnQTS-0HVymjx67Bq4cTG9YInZRBVc/s640/code-component.png" width="640" /></span></a></div>
<div style="background-color: white; box-sizing: border-box; color: #212121; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;">and HTML template as,</span></div>
<div style="background-color: white; box-sizing: border-box; color: #212121; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div style="background-color: white; box-sizing: border-box; color: #212121; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div style="background-color: white; box-sizing: border-box; color: #212121; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;">Change the value of title property to a JSON object as shown above. You can see the updated web page as shown below.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRVYohrephfdKFAV84jw1W3p17NHO91tkg7ronAnXZcvT-i7WbKgAhYcErBD_KZbCp0T_WUVysrwe82s1yZMhUTpoQdBuZLldzkRRDw94LMLWsbkCrPL0FLDscPqa3cP6GmW3pElO3Omx5/s1600/demo2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "verdana" , sans-serif;"><img border="0" data-original-height="648" data-original-width="1600" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRVYohrephfdKFAV84jw1W3p17NHO91tkg7ronAnXZcvT-i7WbKgAhYcErBD_KZbCp0T_WUVysrwe82s1yZMhUTpoQdBuZLldzkRRDw94LMLWsbkCrPL0FLDscPqa3cP6GmW3pElO3Omx5/s640/demo2.png" width="640" /></span></a></div>
<div style="background-color: white; box-sizing: border-box; color: #212121;">
<span style="font-family: "verdana" , sans-serif;">With angular cli If the web server is running and you make any changes in the Angular application, then you don’t need to refresh the web page. It will automatically update itself as you save the application code file. You can now play with the appellation by using various JSON objects also by making requests.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #212121;">
<div style="box-sizing: border-box; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<span style="font-family: "verdana" , sans-serif;">That's it folks, we have learned about creating our first Angular 5 app using VS Code and Angular CLI. Please post your valuable feedback in comments section. </span></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com2tag:blogger.com,1999:blog-2038668879669685734.post-52563326011884563012017-12-21T03:13:00.001-08:002017-12-29T09:12:10.827-08:00Fix : Could not load file or assembly “System.Net.Http, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a”<div dir="ltr" style="text-align: left;" trbidi="on">
Even though there are several answers on stackoverflow, nothing helped me to solve this issue and found the solution as follows,<br />
<br />
<div style="background-color: white; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; font-size: 14px; padding: 0px;">
<div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; padding: 0px;">
1. Update Visual studio if you have older version to 15.5.4 <em>(Optional)</em></div>
<div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; margin-top: 10px; padding: 0px;">
2. Remove all binding redirects from web.config</div>
<div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; margin-top: 10px; padding: 0px;">
3. Add this to the csproj file:</div>
<pre style="margin-top: 10px; padding: 0px;"> <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ96vqO9Yam7cMQZrysxfDDHkW-m0qFuU1l-KweceEl5AvlIO1sxO-7Y1NHAt8rVKF0t1SynStUePRzkb316kYAU_hJYWe6iGmhL-obwjyq0lGe3CvYoSEjPXX0u0Uy6hv07wTyiLSLcEV/s1600/Capture.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="105" data-original-width="852" height="76" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ96vqO9Yam7cMQZrysxfDDHkW-m0qFuU1l-KweceEl5AvlIO1sxO-7Y1NHAt8rVKF0t1SynStUePRzkb316kYAU_hJYWe6iGmhL-obwjyq0lGe3CvYoSEjPXX0u0Uy6hv07wTyiLSLcEV/s640/Capture.JPG" width="640" /></a></div>
<propertygroup>
</propertygroup></pre>
<div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; margin-top: 10px; padding: 0px;">
4. Build.</div>
<div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; margin-top: 10px; padding: 0px;">
5. In the bin folder, there should be a <strong>`(WebAppName).dll.config`</strong> file.</div>
<div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; margin-top: 10px; padding: 0px;">
6. It should have redirects in it. Copy these to the web.config</div>
<div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; margin-top: 10px; padding: 0px;">
7. Remove the above snipped from the csproj file again</div>
<div style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; margin-top: 10px; padding: 0px;">
8. It should work</div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com0tag:blogger.com,1999:blog-2038668879669685734.post-49494354288092616212017-12-19T00:49:00.000-08:002017-12-19T00:50:07.908-08:00Angular2 - DatePipe period in lower case.<div dir="ltr" style="text-align: left;" trbidi="on">
There are several occasions customer would have requested to change the date format in your application to be in small case as follows.<br />
<br />
<pre style="background-color: #eff0f1; border: 0px; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">Tuesday, December 19, 7:00 am </code></pre>
Since the date format does not support the above format, either we can display entire thing in small case with the <span style="background-color: #eff0f1; color: #242729; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; font-size: 13px; font-style: inherit; font-weight: inherit; white-space: inherit;">lowercase </span>pipe<br />
<br />
Since it converts the whole format in lowercase, you can split it in two and apply the lowercase only for the period as follows<br />
<br />
<pre style="background-color: #eff0f1; border: 0px; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">{1234567 | date:'EEEE, MMMM d, h:mm '} {1234567 l date:' a' | lowercase }</code></pre>
<br />
that's it, it is easier rather than using a custom pipe! Here is the working <a href="https://stackblitz.com/edit/angular-fr614c?file=app/app.component.html">demo</a></div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com0tag:blogger.com,1999:blog-2038668879669685734.post-52437970710120646642017-12-12T23:36:00.002-08:002017-12-12T23:53:34.113-08:00Start using Azure Logic apps and save your time<div dir="ltr" style="text-align: left;" trbidi="on">
This is my first blog and Azure and i am inspired to write this one after attending the Microsoft's workshop "App innovation day".<br />
<br />
There was a cool technology <b>"Windows Workflow Foundation"</b> provided by Microsoft with dot net framework to create workflows to cater business logic in dot net applications. With Azure, The Logic Apps service fulfill the purpose to have business processes or workflows take shape of an app. It required no coding just simple logic that needs to placed in a right way to have right business flow. It was also meant for the purpose of integrating 3rd party apps like Facebook,YouTube, Twitter and Evernote etc. All we need to have is the dynamic work flow.<br />
<br />
There are different benefits and different use cases in which we can apply azure logic apps. Let's discuss some of the benefits when using logic apps!<br />
<br />
<b>Rapid development</b><br />
<br />
Logic Apps is great for rapid development.With ever growing list of connectors, we can easily create a workflow to monitor invoice, send for approval to a admin, upload to dropbox and send email notification in matter of few seconds.<br />
<br />
<b>Solutions with Hybrid cloud</b><br />
<br />
5 years back ,Lot of businesses have invested heavily in on premises solutions and hardware, so it’s not possible to move everything to the cloud. With Logic Apps, it’s easy to have a hybrid cloud during this transition. With its on premises data gateway, you can easily connect your on premises database, file share, BizTalk server to Azure cloud.<br />
<br />
It is the new way of Automating business process. You can build long running business process, that orchestrate data and services across all cloud services and not just Azure. It's not only for the developers but for everyone. The best bit you need to write code , you can use Visual editor to build your orchestration.<br />
<br />
<b>Lets Dive into Simple Demo</b><br />
<b><br /></b>
<b>Use Case: </b>Filter twitter feeds with specific hashtags and post the specific tweets on the Facebook wall.<br />
<b><br /></b>
In this example , i just created a process that repeats every few minutes to pull some data from twitter feed and post it on your Facebook wall. Even though this feature is already supported with Facebook, here its slightly different since it is filtering only the specific keywords which is a custom filtering.<br />
<br />
The entire flow i described about is composted of 3 simple steps , that you can build using a Visual UI.<br />
<br />
<b>Step 1: Select Logic App click "Create" and give a specific name ,resource </b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9_c_7Gm-tPTONWcaOSfGqMkG7e4RmtHbV6j0ZJalu0EQd258082soKRlLyUqa7jUwK6ec1DcCkEVW458Fwnt4kFRJ3gYKiNI_DSThKOENa6oWihPkuOfgZNSYm3IyFBY1B_5IQxrh9fGB/s1600/step1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="698" data-original-width="1600" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9_c_7Gm-tPTONWcaOSfGqMkG7e4RmtHbV6j0ZJalu0EQd258082soKRlLyUqa7jUwK6ec1DcCkEVW458Fwnt4kFRJ3gYKiNI_DSThKOENa6oWihPkuOfgZNSYm3IyFBY1B_5IQxrh9fGB/s400/step1.JPG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7oEg2AM5m74Y6ZmroiTkp8TwVK7rBNXJNOZZvXCwgFcf394MYHlF6Ex-8wwFzxqkeyBAG5_zP5dCRGxVsWTE9y20y8VrmeLGj7xpkmLkQWf1jsldwkOB__AQBab_Fq4KfeAPx52gVr2dO/s1600/step2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="842" data-original-width="1057" height="317" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7oEg2AM5m74Y6ZmroiTkp8TwVK7rBNXJNOZZvXCwgFcf394MYHlF6Ex-8wwFzxqkeyBAG5_zP5dCRGxVsWTE9y20y8VrmeLGj7xpkmLkQWf1jsldwkOB__AQBab_Fq4KfeAPx52gVr2dO/s400/step2.JPG" width="400" /></a></div>
<br />
<b> Step 2: There are number of workflow templates will be shown as below and select the appropriate one , in this case i will use "when a new tweet is posted"</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd-F2IGyvcEwFf1yh79Uo202pMaWJTVrEHKVbyG5oGJEU8NcyrMiP4963Ni3_IK6G5tW0yOtwim5o9oUipM8v_qQN2_0R0paKV1VQPtOk2mvitB2anY8GTLZfTaCIvAvH5qBh3jxE8s0az/s1600/step3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="700" data-original-width="1600" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd-F2IGyvcEwFf1yh79Uo202pMaWJTVrEHKVbyG5oGJEU8NcyrMiP4963Ni3_IK6G5tW0yOtwim5o9oUipM8v_qQN2_0R0paKV1VQPtOk2mvitB2anY8GTLZfTaCIvAvH5qBh3jxE8s0az/s400/step3.JPG" width="400" /></a></div>
<br />
also authorize with your twitter account from which you want to fetch the feeds<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3wXi65BGRhV7HSBfZyWImKlWeD372VJFpQ_DbkLahN__EjfsQIjW8j-XElCRooh5Vz5rmOkqjg3qdKVt7GPyJcVJRcOwr9obqc6EtaiQxUWstFTACLWIscHPJvZ29dSIsFeHE7PqS-LeT/s1600/step4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="701" data-original-width="1600" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3wXi65BGRhV7HSBfZyWImKlWeD372VJFpQ_DbkLahN__EjfsQIjW8j-XElCRooh5Vz5rmOkqjg3qdKVt7GPyJcVJRcOwr9obqc6EtaiQxUWstFTACLWIscHPJvZ29dSIsFeHE7PqS-LeT/s400/step4.JPG" width="400" /></a></div>
<br />
Also configure the conditions by mentioning the filters and the timeline you want to trigger the action.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSYgXzhH-LUJcH6T8T0nTKjhQ6q6SN_cYoZvK_q5ufj6n0qNGdX6ecKx24Yh0oJBlE3-wtQO0LRU-IxYS8AERZ69iEH2gZUdIMVG9EtjqZBa6QeeMcI-Xh8lix0JatM2M0UcR9APksqoYO/s1600/step6.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="707" data-original-width="1600" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSYgXzhH-LUJcH6T8T0nTKjhQ6q6SN_cYoZvK_q5ufj6n0qNGdX6ecKx24Yh0oJBlE3-wtQO0LRU-IxYS8AERZ69iEH2gZUdIMVG9EtjqZBa6QeeMcI-Xh8lix0JatM2M0UcR9APksqoYO/s400/step6.JPG" width="400" /></a></div>
<br />
<b>Step 3: Next step is to post on facebook wall , click "Add step" </b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi58krGgGhNk9YPV7Q-SZaEiqDUYwHdOYi7L7HleJbWX2WAlSpcU-vnOTGAQur0tswj26PchNq9avlzfYHNrEei9D0v9X4vKWlT6BtISnfSbYWXqyFmf5ZI1RXJPjAb29Zu7Q_LYyE50F32/s1600/step7.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="698" data-original-width="1600" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi58krGgGhNk9YPV7Q-SZaEiqDUYwHdOYi7L7HleJbWX2WAlSpcU-vnOTGAQur0tswj26PchNq9avlzfYHNrEei9D0v9X4vKWlT6BtISnfSbYWXqyFmf5ZI1RXJPjAb29Zu7Q_LYyE50F32/s400/step7.JPG" width="400" /></a></div>
<br />
Search for Facebook and authenticate will your Facebook account as follows,<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuIkZDvYrSTsWh84OP_nFVW1T6qyQhGeC8xOawyAiJHXiskrUwnYKFKIpfGuZUvKiU4tQsIfPdhubPydHUtZ6ePkbZiurp9ZxZdtZQkQT0EeDy_KwT3bALhwRfsVofywGG5DMja0ChlRiu/s1600/step8.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="701" data-original-width="1600" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuIkZDvYrSTsWh84OP_nFVW1T6qyQhGeC8xOawyAiJHXiskrUwnYKFKIpfGuZUvKiU4tQsIfPdhubPydHUtZ6ePkbZiurp9ZxZdtZQkQT0EeDy_KwT3bALhwRfsVofywGG5DMja0ChlRiu/s400/step8.JPG" width="400" /></a></div>
<br />
Click post to my timeline<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAeOAZiBZnGcv9FG466M5bYzD_Hy-DIHr45R4Zvtn1G4hsnmfRmNQsDUG9eITr7RHv_koT3er6wAl12_K1_cGXpclqfzzECheCevbX69j9I6kLvl9vgWPa58ntrYH1VaGpMLLunpQiLHzY/s1600/step9.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="735" data-original-width="1600" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAeOAZiBZnGcv9FG466M5bYzD_Hy-DIHr45R4Zvtn1G4hsnmfRmNQsDUG9eITr7RHv_koT3er6wAl12_K1_cGXpclqfzzECheCevbX69j9I6kLvl9vgWPa58ntrYH1VaGpMLLunpQiLHzY/s400/step9.JPG" width="400" /></a></div>
<br />
Also you can map the fields that you want to fetch from the feed and post it on the wall as below,<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSozwKgy1I7CGF1KbQ5vePy2-wpMZRx5BachuCOD8AA_hlhidRIMjQn8N_rhqCSezPrqv4bKGVIfZS3mJmnPmmhWAfgUPETBsjJ4gNIEiE2OEhey6n-oLFbEMBPe4LTcKVdetoFh3IEg1V/s1600/step10.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="655" data-original-width="1600" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSozwKgy1I7CGF1KbQ5vePy2-wpMZRx5BachuCOD8AA_hlhidRIMjQn8N_rhqCSezPrqv4bKGVIfZS3mJmnPmmhWAfgUPETBsjJ4gNIEiE2OEhey6n-oLFbEMBPe4LTcKVdetoFh3IEg1V/s400/step10.JPG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
That's it folks, once all fields are mapped you need to save the Logic app with the save button.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNtqK2gOZgiPXkAwQSAdBxqPDu0SPAE7CkG6ZaL6wOI_fm2Y4lgfqj_7MsFXUtI8hkU8Flh5nQA4GaK0xQNvRLAzDZID_oZVWthdyN_GJ-FJjlsXHxlHoq9MK8BMhI54tEOytiYzSGVVBC/s1600/step12.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1600" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNtqK2gOZgiPXkAwQSAdBxqPDu0SPAE7CkG6ZaL6wOI_fm2Y4lgfqj_7MsFXUtI8hkU8Flh5nQA4GaK0xQNvRLAzDZID_oZVWthdyN_GJ-FJjlsXHxlHoq9MK8BMhI54tEOytiYzSGVVBC/s400/step12.JPG" width="400" /></a></div>
<br />
<div>
<br /></div>
<div>
With the above 3 steps posting a filtered tweet on Facebook wall is configured and can be scheduled as you need. If the above particular feature needs to be developed without azure means it will need a huge development time and cost, which can be avoided using the Logic app as shown above.</div>
<div>
<br /></div>
<div>
That's the demo. You can explore several steps and several templates provided in the portal without </div>
<div>
writing a single line of code. I will be writing a separate blog on how to configure custom logic app </div>
<div>
in the upcoming blog posts. Happy connecting with app logic!</div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com0tag:blogger.com,1999:blog-2038668879669685734.post-14173876422016896342017-11-10T10:20:00.000-08:002017-11-10T10:50:24.002-08:00Angular Language Service - A handy extension for angular developers<div dir="ltr" style="text-align: left;" trbidi="on">
Even though there have been plenty of tools/extension to check the typescript/javascript code, but there have not been any extension to validate the HTML code or related features to it. <a href="https://marketplace.visualstudio.com/items?itemName=Angular.ng-template">Angular Language Service</a> was released to make the developers more productive and reduce the errors by offering better code completion. This service is available in the market place for installation for the Visual Studio as well as other code editors that support Type Script. Errors can be detected at the time of code creation . Hints are also provided for code completion. This effectively allows us to use the Intellisence for variables defined and used in the template. The navigation service is provided to link properties and their definition. This extension provides a rich editing experience for Angular templates, both inline and external templates including:<br />
<br />
<br />
<ul style="text-align: left;">
<li>Completions lists</li>
<li>AOT Diagnostic messages</li>
<li>Quick info</li>
<li>Go to definition</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9NSLYhWOMsV6oGhyKnEQPfV-Q698fkegFECLaLLLviC1evLpKGtN7VxA4bdYT08Hgqk-g_zfJOE4tOJV1ecG_G-Zjfjp567FoSxXSXhVuwTVtLN7_wgxtwPNVqVp7kE_TkN3iyWGWSZG_/s1600/language-service.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="431" data-original-width="824" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9NSLYhWOMsV6oGhyKnEQPfV-Q698fkegFECLaLLLviC1evLpKGtN7VxA4bdYT08Hgqk-g_zfJOE4tOJV1ecG_G-Zjfjp567FoSxXSXhVuwTVtLN7_wgxtwPNVqVp7kE_TkN3iyWGWSZG_/s400/language-service.gif" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div>
The language service is developed by the Angular core team. At the time of writing, it is ready to use in VSCode, Sublime Text and WebStorm.</div>
<div>
<br /></div>
<div>
Language service uses the Angular compiler for parsing our application and producing diagnostics. It decorates the TypeScript language service in and uses its logic again. The coolest feature about the service is that it is not coupled to a specific Angular version and can be used in any text editor and IDE as soon as there’s an available plugin.</div>
</div>
<div>
<br /></div>
<div>
More about the language service can be found in the ng-conf talk by Chuck Jazdzewski (the creator of the language service) <a href="https://www.youtube.com/watch?v=ez3R0Gi4z5A">“Using the Angular Template Language Service”.</a></div>
<div>
<br /></div>
<div>
Start using in your angular projects and be more productive. Cheers!</div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com0tag:blogger.com,1999:blog-2038668879669685734.post-68478390935979055642017-09-08T21:30:00.002-07:002018-05-28T11:27:30.057-07:00Into the world of stackoverflow - Tips and tricks<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: georgia, "times new roman", serif;">It's been so long since i wanted to write a blog on how to contribute on stackoverflow. Recently me and one of my colleague had a small session on the same topic and i decided to share the experience in this post and this is a good opportunity to address some misconceptions about Stack Overflow.</span></div>
</div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">let's dive into the world of stack overflow.</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;">Programming became a lot easier these days when you could just type a question into Google and it would find that someone asked the same question in stack overflow. Stack overflow offers helping hand to all developers out there. When it was started in 2008 by </span></span></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;">Jeff Atwood and Joel Spolsky one of the aim was to have a repository of great questions and answers. It revolutionized the way of quesitioning and answering should be. The main reason for success of stack overflow is </span><b style="white-space: pre-wrap;">accountability</b><span style="white-space: pre-wrap;">. It's managed by the community and community keeps the environment. For example, if you post some bad video on youtube it still spreads over the world and even if you want to remove it it takes number of days and you have to go through lot of process. In case of stackoverflow there is always a guarantee that good content is always delivered and maintained.</span></span></div>
</div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;">
</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;">It has multiple features embedded. It has the various concepts which are similar to,</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;">
</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;"><b>Wikipedia </b>- Answers/questions are editable by anyone once you reach level of repuation</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;"><b>Digg/Reddit </b>- It has the same ranking system in the form of reputation so that the best content rises to the top</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;"><b>Forum </b>- Similar to any kind of forum, it has the feature to comment on someone's question or answer.</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;"><b>Blog</b> - Blogs can be embeded as links inside the answers so that you could get more visitors to your blog.</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;">
</span></span></div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;">There have been around 7 million active programmers ask and answer the queries related to programming on stack overflow. It is a better reflection of what you do professionally. For any programmer answering and asking questions on stack overflow is a great learning method.</span></span></div>
</div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif; white-space: pre-wrap;"><br /></span>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif; white-space: pre-wrap;">Lets see why do you want to contribute to the community via stack overflow. As a programmer you have the responsibility to give something back to the community. You got to learn from everyone everyday which makes you a better programmer. How do you make you a better with the help of stack overflow</span></div>
</div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;">
</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;"> (i) You read awesome code by others</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;">(ii) You get the feedback from other awesome developers on your code</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;">(iii) Competition factor (reputation and ranking) which automatically drives you to learn.</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;">Being an awesome programmer will automatically make people to have an eye on you. </span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;"><br />
</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;"><b>How to start if you are new to stackoverflow?</b></span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Starting with stack overflow is once again a bit of hard task which is similar to owning a startup where reputation that you earn is the investment. <span style="background-color: white; font-size: 15px;">Initially it is very hard to find questions you can answer and you can't ask clarification without comment rights. </span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;"><br />
</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;"><b>Tips:</b> </span></span></div>
<div style="text-align: left;">
<strong style="background-color: white; border: 0px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></strong></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="background-color: white; border: 0px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">(i)</span><strong style="background-color: white; border: 0px; font-stretch: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Set up a good but short list of Interesting and Ignored tags.</strong><strong style="background-color: white; border: 0px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> :</strong></span></div>
<div style="text-align: left;">
<span style="color: #242729; font-family: "georgia" , "times new roman" , serif;"><span style="background-color: white;">It is one simple tactic that you could follow to start answering questions, say if you are interested in answering angular questions, you can filter the questions with the tag angular and it keeps getting updated in the time line.</span></span></div>
<div style="text-align: left;">
<span style="color: #242729;"><span style="background-color: white;"><br />
</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihvYJ4T9jkQKw_LlYdm24CD1XlihoNUT18z-hwuzbQu7zMB6BSUqvaq9lRMFVX7mou31xXRa5QsRTq51M4wWFYmJsJrBbHfPi4zA6QepwqL1dQkLr9KlgI9v9n9eY6PBjoOSw3urP1Y8Vt/s1600/filter.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-left: 1em;"><span style="color: black;"><img border="0" data-original-height="610" data-original-width="1600" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihvYJ4T9jkQKw_LlYdm24CD1XlihoNUT18z-hwuzbQu7zMB6BSUqvaq9lRMFVX7mou31xXRa5QsRTq51M4wWFYmJsJrBbHfPi4zA6QepwqL1dQkLr9KlgI9v9n9eY6PBjoOSw3urP1Y8Vt/s640/filter.JPG" width="640" /></span></a></div>
<div style="text-align: left;">
<span style="color: #242729;"><span style="background-color: white;"><br />
</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;"><br />
</span></span></div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="white-space: pre-wrap;"> </span></span><b><span style="font-family: "georgia" , "times new roman" , serif;">(ii)T<span style="background-color: white; font-size: 15px;">ry answering at a time of day or day of week when there are fewer users on Stack Overflow and presumably less competition for answering questions.</span><span style="background-color: white; font-size: 15px;"> </span></span></b></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><span style="background-color: white; font-size: 15px;"><br />
</span></span></b></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="color: #242729;"><span style="background-color: white;">According to the following graph, </span></span><span style="background-color: white;">It appears that heaviest users on stack overflow are from North America as seen </span><a href="https://meta.stackexchange.com/questions/25598/where-in-the-world-do-stack-overflow-users-say-they-are-from?lq=1" style="background-color: white; border-bottom-color: rgb(59, 64, 69); border-bottom-style: dotted; border-width: 0px 0px 1px; cursor: pointer; font-stretch: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">here</a><span style="background-color: white;"> so the lightest times are when North Americans are sleeping. Try answering the questions at that time. </span></span></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica neue" , "helvetica" , sans-serif; font-size: 15px;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOvxsQNQVBnqASjKG5GaLjdghf0msPX-7zLEIDAiB6ADkS1F5Fu3UU2v2TFsmhnHhNDtLI-63QyBA2HCY5cP5n4eE2tF_vSuZq52dijIV3saq5yZAddofG1U97OIcgpF-Mw1j98xj2cSkS/s1600/2l7XH.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-left: 1em;"><span style="color: black;"><img border="0" data-original-height="723" data-original-width="508" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOvxsQNQVBnqASjKG5GaLjdghf0msPX-7zLEIDAiB6ADkS1F5Fu3UU2v2TFsmhnHhNDtLI-63QyBA2HCY5cP5n4eE2tF_vSuZq52dijIV3saq5yZAddofG1U97OIcgpF-Mw1j98xj2cSkS/s320/2l7XH.png" width="224" /></span></a></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "arial" , "helvetica neue" , "helvetica" , sans-serif; font-size: 15px;"><br />
</span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br />
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="color: #242729; font-family: "georgia" , "times new roman" , serif;"><span style="background-color: white; font-size: 15px;"><b> (iii) Earn your initial reputation by asking question:</b></span></span><br />
<span style="background-color: white; color: #242729; font-family: georgia, "times new roman", serif; text-align: justify;">One simplest way to earn your initial reputation by asking question and accepting the answers which would give you a reputation of 2 and if the question is really good you will be earning a reputation of minimum 15. One common mistake the newbies tends to do is not accepting answers. Always make sure to mark the correct answers.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPvG08GHIQY0UQXkGjx6APptnesItwOljI9j4t-7ltF5iwu6c3v4fjXPPtgf2Q6i80RGDzU3OtvVTOP6ijmytnEtnseGSSnA8rt_MYPsFw8FKM_k4XHVfc_BbVUiz6au3FimslcF69pukN/s1600/accept.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-left: 1em;"><span style="color: black;"><img border="0" data-original-height="354" data-original-width="1142" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPvG08GHIQY0UQXkGjx6APptnesItwOljI9j4t-7ltF5iwu6c3v4fjXPPtgf2Q6i80RGDzU3OtvVTOP6ijmytnEtnseGSSnA8rt_MYPsFw8FKM_k4XHVfc_BbVUiz6au3FimslcF69pukN/s640/accept.JPG" width="640" /></span></a></div>
<div style="text-align: left;">
<span style="color: #242729; font-family: "arial" , "helvetica neue" , "helvetica" , sans-serif;"><span style="background-color: white;"><span style="font-size: 15px;"><br />
</span></span></span></div>
<div style="text-align: left;">
<b><br />
</b></div>
<div style="text-align: left;">
<b><br />
</b></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="color: #242729; font-family: "arial" , "helvetica neue" , "helvetica" , sans-serif;"><span style="background-color: white;"><span style="font-size: 15px;"><br />
</span></span></span></div>
<div style="text-align: left;">
<span style="color: #242729; font-family: "arial" , "helvetica neue" , "helvetica" , sans-serif;"><span style="background-color: white;"><span style="font-size: 15px;"><br />
</span></span></span></div>
<div style="text-align: left;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>(iv)Rubber duck debugging</b> - Asking question and answering yourself is one of the best way to start your initial account on stack overflow.</span></div>
<div style="text-align: left;">
<span style="color: #242729; font-family: "arial" , "helvetica neue" , "helvetica" , sans-serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></span></div>
<div style="text-align: left;">
<span style="color: #242729; font-family: "arial" , "helvetica neue" , "helvetica" , sans-serif;"><span style="font-family: "georgia" , "times new roman" , serif;">Lets see, <b>How to ask good questions?</b></span></span></div>
<div style="text-align: left;">
<span style="color: #242729; font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">There is already <a href="https://stackoverflow.com/help/how-to-ask">FAQ</a> section, but i would like to share my experiences on how to ask a good question.</span></div>
<div style="text-align: left;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>It should be precise</b> - The questions should not be too broad or too small. It should be very precise. A good question for example,</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div style="background-color: white; border: 0px; font-stretch: inherit; line-height: 1.3; margin: 0px 0px 10px; padding: 0px; text-align: left; vertical-align: baseline;">
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<span style="font-family: "georgia" , "times new roman" , serif;">i tried x and here is my code it does not work and i cant figure out why, here is a piece of code you can reproduce the problem which makes a great question.</span></blockquote>
</blockquote>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Proof-read before posting a question - <span style="font-weight: normal;">Do a little bit of research on the question that you are going to post if it already exists in the site and be clear on it.</span></span></div>
</div>
<ul style="text-align: left;">
<li><a href="https://codepen.io/"><span style="color: black; font-family: "georgia" , "times new roman" , serif;">Codepen</span></a></li>
</ul>
<ul style="text-align: left;">
<li><a href="http://jsfiddle.net/"><span style="color: black; font-family: "georgia" , "times new roman" , serif;">JSFiddle</span></a></li>
</ul>
<ul style="text-align: left;">
<li><a href="https://dotnetfiddle.net/"><span style="color: black; font-family: "georgia" , "times new roman" , serif;">DotNetFiddle</span></a></li>
</ul>
<ul style="text-align: left;">
<li><a href="https://plnkr.co/"><span style="color: black; font-family: "georgia" , "times new roman" , serif;">Plunker</span></a></li>
</ul>
<br />
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Include all the relevant tags: </b>Always include the relevant tags with the questions which makes to get answers easily and to filter.</span></div>
<div style="text-align: left;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b> Don't post a question and run away</b> - One of the common mistakes i see with the new users is that there is no response if there is any further clarification, it is always better to wait for the first interaction which makes answers to come easily. </span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b> Format Question - </b>Always format your question with the for matter so it is easy for others to get a clear idea.</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Next, we will see on <b>How to Write a better answer for the question?</b></span></div>
<div style="text-align: left;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Writing answers is the best way to earn your quick reputation on stack overflow. </span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">(i)<b>Minimum viable answer </b>- To earn your reputation fast, start with a minimum viable answer it should be working and properly formatted.</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">(ii) <b>Iterate it</b> : Always try to iterate the answer by adding step by step instruction , explain what does the code do. Also attach a working example code snippet with high level description of concepts. You can also use some of the following tools to attach the demo with the answer. </span><span style="font-family: "georgia" , "times new roman" , serif;">Best way is to use the </span><b style="font-family: georgia, "times new roman", serif;">existing code editor</b><span style="font-family: "georgia" , "times new roman" , serif;"> to show the demo or proposed solution. I will be writing a detailed blog on the same. </span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"> </span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">(iii) <b>Give credits to the author: </b>Whenever taking an answer from blog or an existing stack overflow answers, give credits to the author by adding the link. Always include the content inside the link rather than just adding the link, which would stay forever even if the link is removed later.</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Lets see about <b>earning reputation and badges </b></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Reputation is rough measure of how much community trusts you, communication skills, quality of your questions and answers. The more reputation you earn the more the privileges you get. </span></div>
<br />
<b>Up votes and Down votes:</b><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br />
</b> </span><br />
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">If you want to thank someone up vote, mark as answer. If you see good questions that really helps others up vote them. You can read more about <a href="https://meta.stackexchange.com/questions/7237/how-does-reputation-work">reputaiton </a>and how it works. Always try to upvote the best answers so that it goes to the top.</span></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Always take down votes in a sportive manner, down votes are not for demotivating or stopping you from answering, it's a hint for you to make the answer/question better and don't take it personally.</span></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">You should not specicically try for getting the badges, because it comes with the reputation which you gain from your experience. Even though there are some badges which you can try intentionally.</span></div>
</div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Self learner</b> - Answering your own question</span></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Autobigographer</b> - When you fill all your details in your profile. Here is an <a href="https://stackoverflow.com/users/1749403/sajeetharan">example</a>.</span></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Analytical </b>- Visit all fields of site FAQ</span></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Critic, Supporter , Editor </b>- when you first down vote up vote and do your first edit</span></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>student or teacher</b> - Simply answer and get 1 up vote</span></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>commentator </b>- After you leave 10 comments</span></div>
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>promoter and investor </b>- when you offer some reputation to other users</span></div>
</div>
<br />
<b>Best practices to do: </b><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br />
</b> <b>Don't be in a hurry</b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">Onne suggestion is to start in the list at between 6 hours to a day old questions if you are looking for particular questions on specific technology using filters. Questions that are old, that shouldn't be answered, have likely already been downvoted. So that can help you filter what to answer until you get more experience.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <b><span style="font-family: "georgia" , "times new roman" , serif;">Pick questions that will stretch you.</span></b><br />
<span style="font-family: "georgia" , "times new roman" , serif;">In general you will not get as much reputation on older unanswered questions, but you can get practice answering questions, and since there is little rush to answer, you can pick a question that will take more research, and you have the time to go figure it out.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <b><span style="font-family: "georgia" , "times new roman" , serif;">Don't answer poor-quality questions.</span></b><br />
<span style="font-family: "georgia" , "times new roman" , serif;">In general Before answering a question, do a quick search on the title of the question, and then using other related search terms that might turn up an identical question. Too often, a question is asked which has already been answered before, sometimes many times before. Vote to close or flag such questions using the "duplicate" reason, rather than posting yet another answer.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <span style="font-family: "georgia" , "times new roman" , serif;">Make sure the question is clear and unambiguous, concisely stated, and contains a useful code example (most questions really should have a full Minimal, Complete, and Verifiable code example). If you have enough reputation, edit the question to improve it so that it meets those standards. If not down vote it.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <span style="font-family: "georgia" , "times new roman" , serif;">It's always helpful to post a comment under the question to encourage the question's author to improve their question, explaining precisely how they can do so. Sometimes, this can be all it takes to help a question poster get their question on the right track.If this doesn't help, then you can flag posts that need to be closed, an ability you unlock at 15 rep. This is a great way for low rep users to help get questions closed. For example, if you find a duplicate, even if you can't vote to close you can still flag the question. This will leave a comment linking to the other post and will put the question in the Close Vote review queue for others to see.If you don't have enough reputation to post a comment, focus on other activities that will garner you the necessary reputation points (for example, answering other, high quality questions or editing posts that could use some help).</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br />
</b> <b>Things To Avoid:</b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br />
</b> We have seen how to do things in the right way, In eager to gain more reputation lets see what are the things that you should not do. Here are a few things that could quickly get you into hot water, but are common mistakes:</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <b><span style="font-family: "georgia" , "times new roman" , serif;">Do not undo useful edits.</span></b><br />
<span style="font-family: "georgia" , "times new roman" , serif;">You would be surprised how many users get angry when their posts are edited! If you don't agree with an edit, you can undo it.However, if someone edits your post to completely change the wording, change your coding style, or otherwise change what your answer says, you are more than welcome to undo that edit.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <b><span style="font-family: "georgia" , "times new roman" , serif;">Do not post a comment in the answer box.</span></b><br />
<span style="font-family: "georgia" , "times new roman" , serif;">This may seem self-explanatory, but a lot of people do this. Writing any form of "I don't have the rep to comment, so I'm posting this as an answer" does not excuse this act.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">Long story short, just don't do it. If you don't have the rep to do something, then don't try to workaround it please. Your post will be deleted at best, and you'll have angry users to deal with at worst.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span> <b><span style="font-family: "georgia" , "times new roman" , serif;">Don't post just a link to answer a question.</span></b><br />
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;">Stack Overflow is meant to be a high-quality repository of problems and their solutions. To accomplish this, we like to have posts be as self-contained as possible.If you link to a tool/plugin/library that will solve a user's problems, great! But please, explain why or how that tool helps. Even better, show how, if possible, to use the tool to solve the problem. A brief code snippet showing how to use a library, for example, or the function the user needs to call and how to incorporate it takes a low-quality or average answer and helps make it a good answer.If you're linking instead to documentation or a blog or such to help explain something, quote the relevant part of the page and explain in your own words how it answers the question. If the relevant part is the entire linked page, summarize it as best you can and explain how this helps.</span></div>
<div style="text-align: justify;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></b></div>
<b><span style="font-family: "georgia" , "times new roman" , serif;">Don't plagiarize.</span></b><br />
<span style="font-family: "georgia" , "times new roman" , serif;">To meet the last point, you might decide to just copy and paste large parts of pages to your answer. Don't do this! If the section you're copying is large, try to summarize. Always provide a source to the page and give proper attribution. Put anything you quote this way in a blockquote. Hit the quote key on the toolbar, or insert a > before each line of the quote. If you are quoting another answer on Stack Overflow, check if the questions might be a duplicate of each other. If yes, flag one of them as duplicate of the better one.</span><br />
<br />
<b>Don't post images of code or text.</b><br />
This might also seem like a no-brainer, but a lot of people do this.Posting images of your code, error message, console output, etc. make it harder for your post to be found through searches, or for readers to paste what you have presented into their editor window. It also makes things much more difficult for users with screen readers.If you can't copy and paste, it's far more preferable to hand-type anything you can. If an error is long, try to post the most relevant part of the error and not the whole thing.<br />
<br />
<b>Don't try to be the fastest gun in the west</b><br />
A well thought-out answer that takes longer to write is better than "Try this" followed by a code dump. Posting an incomplete answer so it gets seen first can lead to down votes from users who don't find it useful, even if you intend to improve it with later edits.<br />
<br />
<br />
<div style="text-align: left;">
<span style="color: #242729; font-family: "georgia" , "times new roman" , serif;"><span style="font-size: 15px;"><b>What is #SOAReadyToHelp?</b></span></span></div>
<div style="text-align: left;">
<br /></div>
Most of the high reputation profiles in Stack overflow will have the above tagline.It was a contest from 2015 to celebrate the <a href="https://meta.stackoverflow.com/questions/303045/10-million-questions-lets-share-some-stories-that-the-number-doesnt-convey">10 million questions </a>in Stack Overflow.Users were asked to share the experience about Stack Overflow in Twitter with the #SOreadytohelphashtag. So if you are new to stack overflow add it in your profile.<br />
<br />
Finally here is the video on the session<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/Pf9rWCwRTrY/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/Pf9rWCwRTrY?feature=player_embedded" width="320"></iframe></div>
<br />
<br />
I will be writing a separate blog on advantages of being an active user on stack overflow and its benefits. Well those are some of the tricks that you can take from this blog to gain more reputation on stack overflow and more importantly you got to learn and share your experience and contribute to the community. Happy contributing!<br />
<div>
<br /></div>
<br />
<br />
<b><br />
</b> <span style="color: #242729; font-family: "arial" , "helvetica neue" , "helvetica" , sans-serif;"><span style="font-size: 15px;"><b><br />
</b></span></span></div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com2Colombo, Sri Lanka6.9270786 79.8612430000000596.8009751 79.69988150000006 7.0531821 80.022604500000057tag:blogger.com,1999:blog-2038668879669685734.post-87648993571631494322017-08-09T18:39:00.002-07:002018-08-05T06:35:41.666-07:00Angular — Exception Handling Mechanism<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="graf graf--p graf-after--figure" id="4aaa" name="4aaa" style="background-color: white; color: rgba(0, 0, 0, 0.8); letter-spacing: -0.003em; line-height: 1.58; margin-top: 38px; text-align: left;">
<span style="font-family: inherit;">One of the main issue which i came across with angular was exception handling. When you are developing an application, you are in full control, and you will be able to see the errors and handle them accordingly.</span></div>
<div class="graf graf--p graf-after--p" id="6606" name="6606" style="background-color: white; color: rgba(0, 0, 0, 0.8); letter-spacing: -0.003em; line-height: 1.58; margin-top: 29px; text-align: left;">
<span style="font-family: inherit;">But as you soon deploy it in the production, you can’t see what your user is seeing and experiencing and you not capable of knowing about errors unless you find a way to be notified about the exceptions.</span></div>
<div class="graf graf--p graf-after--p" id="1939" name="1939" style="background-color: white; color: rgba(0, 0, 0, 0.8); letter-spacing: -0.003em; line-height: 1.58; margin-top: 29px; text-align: left;">
<span style="font-family: inherit;">This solution i have implemented recently and it worked pretty well. Angular 2 has his own way to catch and handle errors. The default implementation of <span class="markup--strong markup--p-strong" style="font-weight: 700;">ErrorHandler</span> prints errors messages to the console. You can intercept the default error handling and write a custom exception handler that replaces this default as appropriate for your app.</span></div>
<div class="graf graf--p graf-after--p" id="58d2" name="58d2" style="background-color: white; color: rgba(0, 0, 0, 0.8); letter-spacing: -0.003em; line-height: 1.58; margin-top: 29px; text-align: left;">
<span style="font-family: inherit;">If you have a production server and you want to send the errors to the server, Let’s see how we can do it.</span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><span style="background-color: white; color: rgba(0 , 0 , 0 , 0.8); letter-spacing: -0.003em;"><br />
</span> </span></div>
<span style="font-family: inherit;"><span style="background-color: white; letter-spacing: -0.003em;">you need to create your own ErrorHandler class that implements the default ErrorHandler. The only method that required is the</span><span style="background-color: white; letter-spacing: -0.003em;"> </span><span class="markup--strong markup--p-strong" style="background-color: white; letter-spacing: -0.003em;">handleError</span><span style="background-color: white; letter-spacing: -0.003em;"> </span><span style="background-color: white; letter-spacing: -0.003em;">method that takes the error as an argument.</span></span><br />
<br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> import { ErrorHandler } from '@angular/core';
export default class MyErrorHandler implements ErrorHandler {
handleError(error) {
// send the error to the server
}
}
</code></pre>
<br />
<br />
<span style="font-family: inherit;">The next step you can go is to <span style="background-color: white; letter-spacing: -0.063px;">change your injector to use your implementation instead of the default. So code will be something like this,</span></span><br />
<span style="background-color: white; color: rgba(0 , 0 , 0 , 0.8); font-family: , "georgia" , "cambria" , "times new roman" , "times" , serif; font-size: 21px; letter-spacing: -0.063px;"><br />
</span></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> import { ErrorHandler } from '@angular/core';
export default class MyErrorHandler implements ErrorHandler {
handleError(error) {
// send the error to the server
}
}
</code></pre>
<span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit;"><span style="background-color: white; letter-spacing: -0.063px;">That’s all folks. If you don’t want to ignore the Angular default handler, you can extend the </span><span class="markup--strong markup--p-strong" style="background-color: white; letter-spacing: -0.063px;">ErrorHandler</span><span style="background-color: white; letter-spacing: -0.063px;"> class and also call the default handler like this:</span></span><br />
<br /></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> import { ErrorHandler } from '@angular/core';
export default class MyErrorHandler implements ErrorHandler {
handleError(error) {
// send the error to the server
}
}
</code></pre>
</div>
<span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit;">That's it guys!. You can apply this method on your application and make it error free on production. </span><br />
<span style="font-family: inherit;">You can check the sample on <a href="https://plnkr.co/edit/844kqsn11xysAavRShru?p=preview">plunker </a>and play with it!</span></div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com2tag:blogger.com,1999:blog-2038668879669685734.post-53646581345968809312017-08-07T19:24:00.002-07:002017-08-09T18:40:02.145-07:00Google search tip for angular<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="background-color: white; line-height: 1.04; margin: 0px 0px 0px -2.5px; text-align: left;">
<div style="text-align: left;">
<div style="text-align: left;">
<span style="font-weight: normal;"><span style="font-family: inherit;">This tip is for Angular enthusiasts, whenever you search something on google for angular, it will end up showing the results with angularjs(1.x) aswell. To avoid this, you could simply do the followin</span>g</span></div>
<div style="text-align: left;">
<span style="font-weight: normal;"><br /></span></div>
</div>
</h3>
<h3 style="background-color: white; line-height: 1.04; margin: 0px 0px 0px -2.5px; text-align: left;">
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small;"><span style="font-family: "georgia" , "times new roman" , serif; font-weight: normal; letter-spacing: -1.12px;"><br /></span></span></div>
</h3>
<h3 style="background-color: white; line-height: 1.04; margin: 0px 0px 0px -2.5px; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">
add “ -AngularJS “ to your search query</span></h3>
<h3 style="background-color: white; line-height: 1.04; margin: 0px 0px 0px -2.5px; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></h3>
<h3 style="background-color: white; line-height: 1.04; margin: 0px 0px 0px -2.5px; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span><span style="font-family: "georgia" , "times new roman" , serif;">For example,</span></h3>
<h3 style="background-color: white; line-height: 1.04; margin: 0px 0px 0px -2.5px; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span><span style="font-family: "georgia" , "times new roman" , serif;">https://www.google.com/search?q=Angular+components+with+%40Input%28%29+-angularJS</span></h3>
<h3 style="background-color: white; line-height: 1.04; margin: 0px 0px 0px -2.5px; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></h3>
<h3 style="background-color: white; line-height: 1.04; margin: 0px 0px 0px -2.5px; text-align: left;">
<div style="text-align: left;">
<span style="font-family: inherit; font-weight: normal;">Will return only the results which matches angular. This will seriously improve the productivity and help rapid development. Spread this tip across your friends.</span></div>
</h3>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com1tag:blogger.com,1999:blog-2038668879669685734.post-89913777704213226072017-07-31T22:59:00.001-07:002017-08-09T18:40:44.648-07:00Running Python Inside SQL Server<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: x-small;"><span style="background-color: white;">One of the valuable addition to data analytics by Microsoft was adding python into SQL server.Now SQL Server will support the two primary languages of Data Science within SQL Server R and Python. I am a fan of Python and <a href="http://spectrum.ieee.org/computing/software/the-2017-top-programming-languages">Python </a>is near the top of the most popular programming language charts, many people are interested in learning more about it. As many professionals are unfamiliar with Python, i wanted to this post about the same.</span></span><br />
<br />
<b>Installing Python in SQL Server</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYfV4gd9pVniR5CxrA8A9d5b487P82jAOjD76O0M3L90d-MZ2AgVac0TBk70_fAWVoct8gJFPW1TX877ljavXRRM8vwrQPf1LudKK642Za-Q2qtX5Th2mFlR24SYDuCYd5qm9BN9UWK0Ws/s1600/PythonInstallSQLServer.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="928" data-original-width="811" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYfV4gd9pVniR5CxrA8A9d5b487P82jAOjD76O0M3L90d-MZ2AgVac0TBk70_fAWVoct8gJFPW1TX877ljavXRRM8vwrQPf1LudKK642Za-Q2qtX5Th2mFlR24SYDuCYd5qm9BN9UWK0Ws/s400/PythonInstallSQLServer.png" width="348" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div>
If you have already used R with SQL server then the process for using Python in SQL Server is very similar to it. Microsoft renamed R Services to Machine Learning Services, and now allows both R and Python to be installed, as shown in the screen. Microsoft’s version of Python uses Anaconda, which is an open source analytics platform created by Continuum. This is where Python differs from other open source languages, as Continuum is providing the version of Python as it contains data science components which are not included in the standard distribution of Python. Continuum also sells an enterprise version of Anaconda, with of course more features than come with the free version. Also it is mandatory and important to remember the python environment as you will need select the same distribution when running Python code outside of SQL Server.</div>
<div>
<br /></div>
<div>
<b>Configuration Changes for Python</b></div>
<div>
<br /></div>
<div>
The last thing needed to run Python is to configure and restart the SQL Server Services. In a new query type the following command</div>
<div>
<br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> sp_configure 'external scripts enabled', 1
GO
Reconfigure
GO
</code></pre>
<br /></div>
<div>
After restarting the SQL Server Service, SQL Server will now run Python code. Since Python is easy to learn for even a novice developer. Code is easy to read and you can do a lot of things just by looking at it. Lets dig into python with sql server and do wonders with data analytics.</div>
</div>
<div>
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com0tag:blogger.com,1999:blog-2038668879669685734.post-46873203430520045162017-07-15T02:01:00.004-07:002017-07-15T02:01:37.748-07:00Angular 4.3 Now released<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="graf graf--p" name="5bf8" style="background-color: white; color: #666666; font-family: "Trebuchet MS", Trebuchet, Verdana, sans-serif; font-size: 13.2px;">
Angular version 4.3 has been released. This is a very minor release.</div>
<div class="graf graf--p" name="5bf8" style="background-color: white; color: #666666; font-family: "Trebuchet MS", Trebuchet, Verdana, sans-serif; font-size: 13.2px;">
<b><br /></b></div>
<div class="graf graf--p" name="9d0f" style="background-color: white; color: #666666; font-family: "Trebuchet MS", Trebuchet, Verdana, sans-serif; font-size: 13.2px;">
<b>What’s new?</b></div>
<ul class="postList" style="background-color: white; color: #666666; font-family: "Trebuchet MS", Trebuchet, Verdana, sans-serif; font-size: 13.2px; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li class="graf graf--li" name="8dd1" style="margin: 0px 0px 0.25em; padding: 0px;">It has <strong class="markup--strong markup--li-strong">HttpClient</strong>, a smaller, easier to use, and more powerful library for making HTTP Requests. <span style="color: #0b5394; text-decoration-line: none;"><a href="https://angular.io/guide/http" style="color: #888888; text-decoration-line: none;">Learn more about it from the docs</a></span></li>
<li class="graf graf--li" name="39e6" style="margin: 0px 0px 0.25em; padding: 0px;">New router life cycle events for Guards and Resolvers. Four new events: <strong class="markup--strong markup--li-strong">GuardsCheckStart</strong>, <strong class="markup--strong markup--li-strong">GuardsCheckEnd</strong>, <strong class="markup--strong markup--li-strong">ResolveStart</strong>, <strong class="markup--strong markup--li-strong">ResolveEnd</strong> join the existing set of life cycle event such as <strong class="markup--strong markup--li-strong">NavigationStart</strong></li>
<li class="graf graf--li" name="852d" style="margin: 0px 0px 0.25em; padding: 0px;"><a href="https://github.com/angular/angular/issues/16483" style="color: #888888; text-decoration-line: none;"><span style="color: #0b5394;">Conditionally disable animations</span></a> via a new attribute, <strong class="markup--strong markup--li-strong">[@.disabled]</strong></li>
<li class="graf graf--li" name="502d" style="margin: 0px 0px 0.25em; padding: 0px;">Support for the emulated <strong class="markup--strong markup--li-strong">/deep/</strong> CSS Selector (the Shadow-Piercing descendant combinator aka <strong class="markup--strong markup--li-strong">>>></strong>) has been deprecated to match browser implementations and <a class="markup--anchor markup--li-anchor" data-href="https://www.chromestatus.com/features/6750456638341120" href="https://www.chromestatus.com/features/6750456638341120" rel="noopener" style="color: #888888; text-decoration-line: none;" target="_blank"><span style="color: #0b5394;">Chrome</span></a>’s intent to remove.<strong class="markup--strong markup--li-strong"> ::ng-deep</strong> has been added to provide a temporary workaround for developers currently using this feature. </li>
</ul>
<div class="graf graf--p" name="7684" style="background-color: white; color: #666666; font-family: "Trebuchet MS", Trebuchet, Verdana, sans-serif; font-size: 13.2px;">
Wondering what have changed ? For the complete list of features and bugfixes check <a href="https://github.com/angular/angular/blob/master/CHANGELOG.md" style="color: #888888; text-decoration-line: none;">t<span style="color: #0b5394;">he changelog</span></a>.</div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com0tag:blogger.com,1999:blog-2038668879669685734.post-40396037016464782522017-06-11T01:16:00.002-07:002017-06-11T01:16:20.988-07:00Build a select dropdown with *ngFor in Angular 2<div dir="ltr" style="text-align: left;" trbidi="on">
One of the most repeated questions with angular2 i have come across Stack overflow is "how to generate a select dropdown with an array or object". Hence, i decided to write a sample post with sample code to ease the search.<br />
<br />
I will be posting two samples with one simple array and other with object.<br />
<br />
Assume you want to generate a dropdown select by having an array with years.<br />
<br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> years = ['2016','2015','2014'];
</code></pre>
<div>
<br />
The app.component.ts code will look like,<br />
<br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> import {Component} from '@angular/core';
import {Http} from '@angular/http'
import {bootstrap} from '@angular/platform-browser-dynamic';
import { Component } from './Component';
@Component({
selector: 'material-app',
templateUrl: 'app.component.html'
})
export class AppComponent {
years = ['2016','2015','2014'];
selectedyear = '2015' ;
onChange(year) {
alert(year);
}
}
</code></pre>
<br />
In the above cocde <b>selectedyear</b> indicates the default value of the dropdown whenever the app is loaded. onChange is the event gets fired whenever a option is changed, you can capture the selected value with the event.<br />
<br />
And the template app.component.html will look as follows,<br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> <select event="" ngmodel="" ngmodelchange="" onchange="" selectedyear="">;
<option c="" ngfor="let c of years" ngvalue=""> {{c}} </option>;
</select>
</code></pre>
<br />
*ngFor is being used to repeat the items as options. It's simple as above.<br />
<br />
<a href="https://plnkr.co/edit/dYowSFfMUy6uCwAvtyGJ?p=preview">DEMO USING ARRAY</a><br />
<br />
Next we will see how to bind a object using *ngFor . Assume if you have a object and want to bind the keys as drop down values,<br />
<br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> currencyList = {
"USD": {
"symbol": "$",
"name": "US Dollar",
"symbol_native": "$",
"decimal_digits": 2,
"rounding": 0,
"code": "USD",
"name_plural": "US dollars"
},
"CAD": {
"symbol": "CA$",
"name": "Canadian Dollar",
"symbol_native": "$",
"decimal_digits": 2,
"rounding": 0,
"code": "CAD",
"name_plural": "Canadian dollars"
}
};
</code></pre>
<br />
to get the keys of object you can use <b>Object.keys(this.currencyList); </b>and the rest is same as above sample.<br />
<br />
<a href="https://plnkr.co/edit/jwXs374LmYYsq4GxCGka?p=preview">DEMO USING OBJECT</a><br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com0tag:blogger.com,1999:blog-2038668879669685734.post-21515257578128839762017-06-04T12:25:00.000-07:002017-06-04T12:25:02.842-07:00ESLint with Visual Studio Code (vscode)<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="background-color: white; color: #333333;">Poor code quality application can lead to many serious problems when the size of code grows. </span><strong style="background-color: white; border: 0px; color: #242729; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Linting</strong><span style="background-color: white; color: #242729;"> is the process of checking the source code for Programmatic as well as Stylistic errors. This is most helpful in identifying some common and uncommon mistakes that are made during coding. </span></span><span style="background-color: white; color: #333333; font-family: "georgia" , "times new roman" , serif;">To do this process many linters are out there like eslint, jshint, jslint etc. </span><br />
<span style="background-color: white; color: #333333; font-family: "georgia" , "times new roman" , serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjluxrENCBtObf3qCejzFwFrmnME-gMFSQFueYWl34VYYmq0HBJ1gZULuWbj7h5GfLwZQwNCusILUqc2BjxluKoKe5TKYtcEdHAkpK_DOgbSMgvIRAaVi4wrfGlv_IajSQr93IkzDrCe_sC/s1600/f590050bbc2c4fe4d26e7d02dfa48666.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjluxrENCBtObf3qCejzFwFrmnME-gMFSQFueYWl34VYYmq0HBJ1gZULuWbj7h5GfLwZQwNCusILUqc2BjxluKoKe5TKYtcEdHAkpK_DOgbSMgvIRAaVi4wrfGlv_IajSQr93IkzDrCe_sC/s400/f590050bbc2c4fe4d26e7d02dfa48666.jpg" width="400" /></a></div>
<span style="background-color: white; color: #333333; font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="background-color: white; color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></span> <span style="background-color: white;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="color: #333333;">All the above helps us to be consistent in semicolons, quotes & code formatting etc. In this blog post i will be showing you how you can setup ESLint with visual studio code which is my favorite code editor.</span></span></span><br />
<span style="background-color: white; color: #333333;"><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></span> <br />
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-size: 32px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px;">
<span style="font-family: "georgia" , "times new roman" , serif;">Install ESLint global</span></h2>
<div>
<span style="background-color: white; color: #333333; font-size: 15px;"><span style="font-family: "georgia" , "times new roman" , serif;"><br />
</span></span></div>
<div>
<span style="background-color: white; color: #333333; font-size: 15px;"><span style="font-family: "georgia" , "times new roman" , serif;">Install it globally by using NPM by this command:</span></span><br />
<span style="background-color: white; color: #333333; font-size: 15px;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></span></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> npm install -g eslint
</code></pre>
<br />
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-size: 32px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px;">
<span style="font-family: Georgia, Times New Roman, serif;">Download ESLint extension </span></h2>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Install the ESLint by downloading the extension, as shown below,</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6w8UyuYxbqiM4jyGIv2Vqjt4PjKUxcryh6zw5njCpumoCV2SnguyfrXY05RmtW2uXR__R0bQMnStzY2uZuvKbd5vL76bGE4bjO6dFhZHk1u2qkuQdBIdjIHhGGvCye6Z3cyWf4RrrfeEx/s1600/99add48da3077d681f1de9a0685ee0b2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="448" data-original-width="732" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6w8UyuYxbqiM4jyGIv2Vqjt4PjKUxcryh6zw5njCpumoCV2SnguyfrXY05RmtW2uXR__R0bQMnStzY2uZuvKbd5vL76bGE4bjO6dFhZHk1u2qkuQdBIdjIHhGGvCye6Z3cyWf4RrrfeEx/s400/99add48da3077d681f1de9a0685ee0b2.gif" width="400" /></a></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<br /></div>
<div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
After downloading we need to initialize the ESLint.<br />
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: Quicksand, sans-serif; font-size: 32px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px;">
Initialize ESLint in project</h2>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Next is to initialize ESLint by using <em style="background-color: white; box-sizing: border-box; color: #333333; font-size: 15px;">Ctrl + `</em><span style="background-color: white; color: #333333; font-size: 15px;"> to open the terminal in Visual Studio Code</span></span></div>
<div>
<span style="background-color: white; color: #333333; font-family: "Segoe UI", "Source Sans Pro", Calibri, Candara, Arial, sans-serif; font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-f-NyKrGdiPdubsIyAF8sNnhXHbMIFJB31Hmb5ZQeeMBC6fG2-eO_g7nU_Uyp-U_PBwwTxrtVtk224wg3Uz7RZHASxihYkfsCooPj5N5_b_k3uCvuS5XSGeZjkrBoDS7FBSw9bXtjVixt/s1600/3eff01cda9df7245a12ce7a1d7c4cfe8.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="448" data-original-width="732" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-f-NyKrGdiPdubsIyAF8sNnhXHbMIFJB31Hmb5ZQeeMBC6fG2-eO_g7nU_Uyp-U_PBwwTxrtVtk224wg3Uz7RZHASxihYkfsCooPj5N5_b_k3uCvuS5XSGeZjkrBoDS7FBSw9bXtjVixt/s400/3eff01cda9df7245a12ce7a1d7c4cfe8.gif" width="400" /></a></div>
<div>
<span style="background-color: white; color: #333333; font-family: "Segoe UI", "Source Sans Pro", Calibri, Candara, Arial, sans-serif; font-size: 15px;"><br /></span></div>
<div>
<span style="background-color: white; color: #333333; font-family: "Segoe UI", "Source Sans Pro", Calibri, Candara, Arial, sans-serif; font-size: 15px;"><br /></span></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
That's all folks, now your project is setup with ESLint, from now on it will be very easy to catch lint errors and fix them even if you had missed it. Let's see ESLint in action.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKr8Me0M7hdckoBeaMwv-8TUE-QmAfe50W3vqv5lvR5bbgi1YjUnoEqhQNxcgCqlg9FZsjTcDbuEpUpom51Wo2mPnN30dzjZik2-Q-j_h9Ashwca6ZPpXslzhexMNzxV96YlwxzQgIn_nf/s1600/184eb5e4f9eb5a99338390ebe0e033f3.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="448" data-original-width="732" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKr8Me0M7hdckoBeaMwv-8TUE-QmAfe50W3vqv5lvR5bbgi1YjUnoEqhQNxcgCqlg9FZsjTcDbuEpUpom51Wo2mPnN30dzjZik2-Q-j_h9Ashwca6ZPpXslzhexMNzxV96YlwxzQgIn_nf/s400/184eb5e4f9eb5a99338390ebe0e033f3.gif" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
And if you want to explore more on ESLint you can explore it on the website http://eslint.org/</div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com5tag:blogger.com,1999:blog-2038668879669685734.post-75051189540882209772017-06-03T22:57:00.002-07:002017-06-03T22:57:31.203-07:00How to copy a Database from a MongoDB instance to another?<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: "georgia" , serif; font-size: 12pt;">While recently i was working in an application i had to copy the database from a mongoDB hosted in an mlab instance to my local. I will share an easy step in MongoDB Shell which support to copy database from remote instance to current one with a single command.<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<b><span style="font-family: "georgia" , serif; font-size: 12pt;">DEMO with steps :</span></b><span style="font-family: "georgia" , serif; font-size: 12pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="background: white; color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">I made two instances of MongoDB from following commands.</span><span style="font-family: "georgia" , serif; font-size: 12pt;"><o:p></o:p></span></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> //Instance 1
mongod --port 9998 --dbpath /data/db1
//Instance 2
mongod --port 9999 --dbpath /data/db2
</code></pre>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12pt;">In instance 1 there is a database called "<b>dsampledb1</b>".</span></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">and i started the instance with the following command,</span><br />
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;"><br />
</span></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> mongo localhost:9998
</code></pre>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">I create a database with one collection with the following command,<o:p></o:p></span></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> use dsampledb1
db.users.save({id:1, name:"sample name"})
</code></pre>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12pt;">Then I log in to next MongoDB instance using MongoDB Shell.</span></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> mongo localhost:9999
</code></pre>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12pt;">Now to copy the database from the instance 1 to instance 2 , we can simply use the following command,</span></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> db.copyDatabase("dsampledb1","dsampledb2","localhost:9999")
</code></pre>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="color: #333333; font-family: "georgia" , serif; font-size: 12.0pt;">Syntax is as follows,<o:p></o:p></span></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> db.copyDatabase(sourcedb, destinationdb, fromhost, username, password)
</code></pre>
<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<br /></div>
<br />
<div class="MsoNormal">
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com0tag:blogger.com,1999:blog-2038668879669685734.post-21369702092394781972017-06-03T10:51:00.001-07:002017-06-03T10:51:42.293-07:00A first-timer’s experience of Microsoft’s MVP Community Connection (MCC) <div dir="ltr" style="text-align: left;" trbidi="on">
<div style="margin-bottom: .0001pt; margin: 0in;">
<span style="font-family: Georgia, serif; font-size: 11pt;">It was my first ever experience to
participate in Microsoft's event outside Sri Lanka. My experience as a
“first-timer” attending the South East Asia's MVP community connection, along
with few other MVPs from my country. MVP Community Connection is a day to
connect, learn, inspire and celebrate the local MVP community and MS employees.<o:p></o:p></span></div>
<div style="margin: 0in 0in 0.0001pt;">
<br /></div>
<div style="margin: 0in 0in 0.0001pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesezg5GtmGv5SeeNP50DUTC0Ihw3ZLYUKsxScyXDjFXC2UOVUvnvCQEFbIQdcBNVnOILT_0GBLBAeum_kUTepCZDhE9x5ZnnEFtXc2IsMMvt1ia84C_AJPbwNVdel5XUJZ8niRoJKcUxA/s1600/IMG_20170526_100306.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesezg5GtmGv5SeeNP50DUTC0Ihw3ZLYUKsxScyXDjFXC2UOVUvnvCQEFbIQdcBNVnOILT_0GBLBAeum_kUTepCZDhE9x5ZnnEFtXc2IsMMvt1ia84C_AJPbwNVdel5XUJZ8niRoJKcUxA/s400/IMG_20170526_100306.jpg" width="400" /></a></div>
<div align="center" class="separator" style="margin: 0in 0in 0.0001pt; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjASthCdA1oFuC_C8NbX8qj2wW0K9J-hzTVmv8tWwif1ViNOdIT5A425ymufMy_oqHSCjD8qCV3_9Ti_fX-AyywL8CCdXG8Pd27qbK_2ESKl1IzGWeBUjyNiV9F5PuLrRe-2UP6p5hUbY3U/s1600/IMG_20170526_100306.jpg" imageanchor="1"><span style="color: blue; font-family: Georgia, serif; font-size: 11pt; text-decoration-line: none;"><!--[if gte vml 1]><v:shapetype
id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t"
path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
<v:stroke joinstyle="miter"/>
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/>
<v:f eqn="sum @0 1 0"/>
<v:f eqn="sum 0 0 @1"/>
<v:f eqn="prod @2 1 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/>
<v:f eqn="prod @3 21600 pixelHeight"/>
<v:f eqn="sum @0 0 1"/>
<v:f eqn="prod @6 1 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/>
<v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/>
<v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="Picture_x0020_3" o:spid="_x0000_i1027" type="#_x0000_t75"
alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjASthCdA1oFuC_C8NbX8qj2wW0K9J-hzTVmv8tWwif1ViNOdIT5A425ymufMy_oqHSCjD8qCV3_9Ti_fX-AyywL8CCdXG8Pd27qbK_2ESKl1IzGWeBUjyNiV9F5PuLrRe-2UP6p5hUbY3U/s400/IMG_20170526_100306.jpg"
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjASthCdA1oFuC_C8NbX8qj2wW0K9J-hzTVmv8tWwif1ViNOdIT5A425ymufMy_oqHSCjD8qCV3_9Ti_fX-AyywL8CCdXG8Pd27qbK_2ESKl1IzGWeBUjyNiV9F5PuLrRe-2UP6p5hUbY3U/s1600/IMG_20170526_100306.jpg"
style='width:300pt;height:168.5pt;visibility:visible;mso-wrap-style:square'
o:button="t">
<v:imagedata src="file:///C:/Users/SAJEET~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.jpg"
o:title="IMG_20170526_100306"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: Georgia, serif; font-size: 11pt;"><o:p></o:p></span></div>
<div align="center" class="separator" style="margin: 0in 0in 0.0001pt; text-align: center;">
<br /></div>
<div align="center" class="separator" style="margin: 0in 0in 0.0001pt; text-align: center;">
<br /></div>
<div style="margin: 0in 0in 0.0001pt;">
<span style="background: white; color: #333333; font-family: "Georgia",serif; font-size: 11.0pt;">It was an exclusive event especially organized for Asia
pacific MVPs. The intention is to have all MVPs from different region join
there and have a great time with others. There were some interesting sessions
and networking between each other. </span><span style="font-family: Georgia, serif; font-size: 11pt;"><o:p></o:p></span></div>
<div style="margin: 0in 0in 0.0001pt;">
<br /></div>
<div style="margin: 0in 0in 0.0001pt;">
<span style="font-family: Georgia, serif; font-size: 11pt;">From
the moment I got off the plane at the Soekarno–Hatta International Airport
Airport, I was very excited about the event. I was the first to
arrive AYANA Midplaza JAKARTA 2 hours prior to the event. From the
registration, greeted by Microsoft mvp tshirt and I was escorted to pick
up my personal registration badge and Wahoo!. <o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidwvDbVUaVFw57KY5wkUuAyQRHvCzN4f44aXakti7bTDgeVPIBNXb6CvjTALHCVriRDRuB7l9EuXug7zQv1DefQyjrdCLB5aDGHtQNo5k-qbRgd-5LR04p58fyJCOYBYRdU_W4TviDY8kV/s1600/IMG_20170526_150004.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="900" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidwvDbVUaVFw57KY5wkUuAyQRHvCzN4f44aXakti7bTDgeVPIBNXb6CvjTALHCVriRDRuB7l9EuXug7zQv1DefQyjrdCLB5aDGHtQNo5k-qbRgd-5LR04p58fyJCOYBYRdU_W4TviDY8kV/s400/IMG_20170526_150004.jpg" width="225" /></a></div>
<div align="center" class="separator" style="margin: 0in 0in 0.0001pt; text-align: center;">
<br /></div>
<div align="center" class="separator" style="margin: 0in 0in 0.0001pt; text-align: center;">
<br /></div>
<div style="margin: 0in 0in 0.0001pt;">
<br /></div>
<div style="margin: 0in 0in 0.0001pt;">
<br /></div>
<div style="margin: 0in 0in 0.0001pt;">
<span style="background: white; color: #333333; font-family: "Georgia",serif; font-size: 11.0pt;">First day started with lunch at the Hotel. Everyone had a
very good time introducing ourselves in 1 minute with other MVPs. There
were totally around 50 MVPs from various countries in south east Asia and we
were snuffled and divided into 7 teams for various activities and sessions. It
was really awesome to meet with other MVPs and get some inputs, their works and
other things related to personal and professional life. Later with a key
note from Soyoung Lee, </span><span style="color: #333333; font-family: "Georgia",serif; font-size: 11.0pt;">Community Program Manager on "MVPs for the
year 2017 and latest updates".<span style="background: white;"> Then we
had hack a plan session on various topics such as "</span>Emerging
Technologies<span style="background: white;">", "Developer Field
Presentation" etc andone of the best moment was the group photo .</span></span><span style="font-family: Georgia, serif; font-size: 11pt;"><o:p></o:p></span></div>
<div style="margin: 0in 0in 0.0001pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyage2hHHG4liH2CNVVAMHjuANDoIjkog7vPJurUszv7P2QSIo-Ht0d4pkoLzPxPVI7DSeID6h4beVTrRRIpiMlDDSnvN7-bc6oV38XFJ1nYqoN6N2E7rAxa3My0r5Lf1BM3IFjCfgDkFv/s1600/IMG_20170526_175139.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyage2hHHG4liH2CNVVAMHjuANDoIjkog7vPJurUszv7P2QSIo-Ht0d4pkoLzPxPVI7DSeID6h4beVTrRRIpiMlDDSnvN7-bc6oV38XFJ1nYqoN6N2E7rAxa3My0r5Lf1BM3IFjCfgDkFv/s400/IMG_20170526_175139.jpg" width="400" /></a></div>
<div align="center" class="separator" style="margin: 0in 0in 0.0001pt; text-align: center;">
<br /></div>
<div align="center" class="separator" style="margin: 0in 0in 0.0001pt; text-align: center;">
<br /></div>
<div style="margin: 0in 0in 0.0001pt;">
<span style="font-family: Georgia, serif; font-size: 11pt;"> </span><span style="font-family: Georgia, serif; font-size: 11pt;"> </span></div>
<div style="margin: 0in 0in 0.0001pt;">
<span style="background: white; color: #333333; font-family: "Georgia",serif; font-size: 11.0pt;"> Later in the evening we were out for dinner where we
had Indonesian varieties of food and MVPs were involved in presenting
their culture in various ways. Finally everyone had a great time and fun
on the first day. Second day, it started with a fantastic breakfast and a
team activity , later there were </span><span style="color: #333333; font-family: "Georgia",serif; font-size: 11.0pt;">very productive intense discussions
to improve MVP engagement within the Partner network. The day ended with a
award ceremony where everyone who attended the session was given away with a
cool gift. <span style="background: white;">It was a tremendous experience I
had at MVP community connect event at Jakarta,Indonesia. There were lots of
things that i could learn from various MVPs. Also it created a very good
channel with all other MVPs. </span></span><span style="font-family: Georgia, serif; font-size: 11pt;"><o:p></o:p></span></div>
<div style="margin: 0in 0in 0.0001pt;">
<span style="color: #333333; font-family: "Georgia",serif; font-size: 11.0pt;"><span style="background: white;"> </span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFRma6Wn-kGiroEW1r1rNvD8DLHVF2ukP_3xbnq4HRML_E_9d_jEN-KohPnUr6Trxzt0rYD3KYEgIABXZEy6OFob2dRK6gMJ_IrT653tWQ8cp5SXP4tAhu8IWcjnpEnj2s8dm9og1jfyvn/s1600/IMG_20170527_125437.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="900" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFRma6Wn-kGiroEW1r1rNvD8DLHVF2ukP_3xbnq4HRML_E_9d_jEN-KohPnUr6Trxzt0rYD3KYEgIABXZEy6OFob2dRK6gMJ_IrT653tWQ8cp5SXP4tAhu8IWcjnpEnj2s8dm9og1jfyvn/s320/IMG_20170527_125437.jpg" width="180" /></a></div>
<div style="margin: 0in 0in 0.0001pt;">
<span style="color: #333333; font-family: "Georgia",serif; font-size: 11.0pt;"><span style="background: white;"><br /></span></span></div>
<div style="margin: 0in 0in 0.0001pt;">
<br /></div>
<br />
<div class="MsoNormal">
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com0tag:blogger.com,1999:blog-2038668879669685734.post-12765116939623519552017-03-18T01:35:00.002-07:002017-03-18T01:43:39.294-07:00Microsoft - A Big Thank You<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
<br />
1/03/2017 was a huge day in my career as I was awarded my first (and hopefully not the last) Microsoft Most Valuable Professional award under the category Visual Studio and Development Technologies. It was such a Indescribable honor, and i have to give a shout out here to the Microsoft community for their support. There have been so many great mentors/supporters in my career over the past 6 years.Thank you MVP Community Program Manager, my friends, colleagues, my company,followers and supporters for helping me to get my Microsoft MVP Award for this year.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6jVKLxHogOKBO4xAkAIygGjYu0gBVBKpwUKKJClE7Z5Q8B5FuVhRvSETQpkur1zl06ntO9Bq16n-yL8wb4QTEzU33bXCwgzt_HlEB3JtvJQ9EvzxAtl6UC-pOc83C-MlziXR6VY4mTWo/s1600/C60Vo0BU4AAYWiY.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6jVKLxHogOKBO4xAkAIygGjYu0gBVBKpwUKKJClE7Z5Q8B5FuVhRvSETQpkur1zl06ntO9Bq16n-yL8wb4QTEzU33bXCwgzt_HlEB3JtvJQ9EvzxAtl6UC-pOc83C-MlziXR6VY4mTWo/s320/C60Vo0BU4AAYWiY.jpg" width="320" /></a></div>
<br />
<br />
I hope this marks only the beginning of this new phase of my professional life and I feel so very lucky to be among the 6 technology leaders under the same category in Sri Lanka. Microsoft has always been a great supporter of the community, and a real partner in our ongoing efforts. I will make sure to work extra hard to give back (even more) to the community and I will be more glad to do it every day! Thank you Microsoft!Thank you to the MVPs who welcomed me and others have helped me throughout the years!<br />
<br />
<br />
<br />
<br /></div>
Anonymoushttp://www.blogger.com/profile/10621110298825716347noreply@blogger.com1