tag:blogger.com,1999:blog-90357524642396806612024-03-12T20:50:48.683-07:00VisionforTechVisionfortech contains only Technological Blogs.And this posts are already executed by its author Mohini Soni.So for that this solution is trustworthy.Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.comBlogger58125tag:blogger.com,1999:blog-9035752464239680661.post-49747921460277804682022-04-15T01:29:00.009-07:002022-04-26T23:09:49.203-07:00[Solution] How to create Angular app as Progressive web App (PWA)<div style="text-align: center;"><b style="font-size: 16px;"><u style="background-color: #fcff01;"><span style="color: #2b00fe; font-family: verdana;">[Solution] How to make exe(executable) from Angular App</span></u></b></div><div style="text-align: center;"><span style="font-family: verdana; font-size: 16px;"><span style="background-color: #fcff01;"><span style="color: white;"><br /></span></span></span></div><div style="text-align: center;"><span><span style="font-family: verdana;">In this article we are going to discuss about how we can convert existing app into progressive web app (PWA App) or how we can create Angular PWA app which will run without internet connectivity in other words from cache how that application work.</span></span></div><div style="text-align: center;"><span><span style="font-family: verdana;"><br /></span></span></div><div style="text-align: center;"><span style="font-family: verdana;"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwU3oIvyAPXmdT3DaB_XqM7xjBMEeYDxHS13jkaCypic2CibXh_DEK9Ew0ohKuXxYUUzkig3gxZa5UcY6sYmh_sgZ6ujhJfqhQPFu32PgXeDvJ-KBfNuwUeu4xRMNCcWpKVjanfqfHzuwyu39AwJEgUxVQf1fo7GiT-cJnZF6z9ecDrFM1nZsXSzGBYg/s400/PWA_visionfortech.gif" style="margin-left: auto; margin-right: auto;"><img alt="How to create Angular app as Progressive web App (PWA) by visionfortech" border="0" data-original-height="229" data-original-width="400" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwU3oIvyAPXmdT3DaB_XqM7xjBMEeYDxHS13jkaCypic2CibXh_DEK9Ew0ohKuXxYUUzkig3gxZa5UcY6sYmh_sgZ6ujhJfqhQPFu32PgXeDvJ-KBfNuwUeu4xRMNCcWpKVjanfqfHzuwyu39AwJEgUxVQf1fo7GiT-cJnZF6z9ecDrFM1nZsXSzGBYg/w483-h263/PWA_visionfortech.gif" title="How to create Angular app as Progressive web App (PWA)" width="483" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">How to create Angular app as Progressive web App (PWA)</td></tr></tbody></table><div style="text-align: left;"><br /></div><div style="text-align: left;"><div><pre class="literal-block" style="background-color: white; border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #1f1f1f; font-size: 14.85px; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><b>Want to download source code ?</b> : <a href="https://github.com/visionfortech/angular-pwademo" style="color: black; font-weight: 600;" target="_blank">angular-pwademo-visionfortech</a></div></pre></div><div></div></div><div style="text-align: left;"><br /></div><div style="text-align: left;">So Finally let's start with PWA ( Progressive web App) in Angular.</div><h4 style="text-align: left;"><u><span style="color: #fcff01;">Steps to create Angular PWA App / Add PWA in existing Application.</span></u></h4><div style="text-align: left;">1) Create an Angular Application ( Ignore if you are adding PWA in your existing Application)</div><div style="text-align: left;">2) Add @angular/pwa Package.</div><div style="text-align: left;">3) Brief Understanding of the file added/modified after addition of @angular/pwa package.</div><div style="text-align: left;">4) Run the application</div><h4 style="text-align: left;"><span style="color: #fcff01;">1) Create an Angular Application ( Ignore if you are adding in existing App)</span></h4><div style="text-align: left;"><div><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><span>ng new angular-pwademo</span></pre></div></div><div style="text-align: left;"><h4><span style="color: #fcff01;">2) Add @angular/pwa package</span></h4><div><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><span>ng add @angular/pwa</span></pre></div><div>After execution of above command it will add some icons into assets/icon folder and along with that it will modify few of the existing files as well like app.module.ts , package.json , angular.json , index.html.</div><div><br /></div><div>So in below step let us walk through the changes made after we have added @angular/pwa package.</div><div><span style="color: #fcff01;"><br /></span></div><div><span style="color: #fcff01;">3) Overview of the changes after addition of @angular/pws Package.</span></div><div>first it will add diff .png files with different resolution as showed in below image</div><div><br /></div><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4wO41HWxF8E3PtlBC0iew3ghAdS4Nmog1_ampNv9pd5GFPU4gonSkBH6VVviGOnsedkAAxpLDPE9dVSsj7ZhalSSS7ZL6L2vJ-KTHWG3nZ74j96pq1_TFfoiiH56rVxTDt-aTVEftQt0ZKDbxWdmPE_eiaDoKVTIHNZU-ajzN0UDdlE8fjTVn_JY3gw/s445/icon_pwa_visionfortech.PNG"><img alt="icon_pwa_visionfortech" border="0" data-original-height="403" data-original-width="445" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4wO41HWxF8E3PtlBC0iew3ghAdS4Nmog1_ampNv9pd5GFPU4gonSkBH6VVviGOnsedkAAxpLDPE9dVSsj7ZhalSSS7ZL6L2vJ-KTHWG3nZ74j96pq1_TFfoiiH56rVxTDt-aTVEftQt0ZKDbxWdmPE_eiaDoKVTIHNZU-ajzN0UDdlE8fjTVn_JY3gw/w320-h290/icon_pwa_visionfortech.PNG" title="icon_pwa_visionfortech" width="320" /></a></div><br /><div>After this it will add ngsw-config.json and manifest.webmanifest for configurations and it will also modifies package.json , app.module.ts , angular.json , index. html</div><div><br /></div><div>For changes in index.html and package.json are self explanatory so i am not going in that but in case if any doubt we are happy to give you solution in comment section.</div><h4 style="text-align: left;"><span style="color: #fcff01;">ngsw-config.json</span></h4><div>A developer does not need to do any kind of coding into this file. this is just for the configuration and we are good to go for PWA.</div><div><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPK29gIJbCW9hSb1CBEDgxENak8wF-G7xXOhFv6E-miGLVt6B-OAKTmuTE2k_2vKjJ0eqNc9qcW7-Z_GuT_8TbyjRZCGs0ugR2CLBTTOPZNuCYPaOk45y1uyk82WP2UTBC-zI3cgTHSpIE9jy24fuQEBZknS41EZteZ9sYBPTu0Gnihssgw7d0DNq-iA/s1312/ngsw.png" style="margin-left: auto; margin-right: auto;"><img alt="ngsw.json - visionfortech" border="0" data-original-height="915" data-original-width="1312" height="329" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPK29gIJbCW9hSb1CBEDgxENak8wF-G7xXOhFv6E-miGLVt6B-OAKTmuTE2k_2vKjJ0eqNc9qcW7-Z_GuT_8TbyjRZCGs0ugR2CLBTTOPZNuCYPaOk45y1uyk82WP2UTBC-zI3cgTHSpIE9jy24fuQEBZknS41EZteZ9sYBPTu0Gnihssgw7d0DNq-iA/w473-h329/ngsw.png" title="ngsw.json - visionfortech" width="473" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">ngsw.json - visionfortech</td></tr></tbody></table><div><br /></div><div><h4><span style="color: #fcff01;">angular.json</span></h4></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutVgKZW5aRHraBiEg6WB4KXLOO6UyabSszOcC9ABu6xaczn195KgPO-wQq82W-7S6oHVKnglTJrFtA6b8KZK_G7i_-Zn0zbLySPPROvuLOA5x6AZIExiqZJpb_PRfK37_ApUf65rWX7W4OtKSR_QdO9buICgH98_amM4X0lrJbANIj0CeK3wX7Ajs7A/s1295/angular.png" style="margin-left: auto; margin-right: auto;"><img alt="angular.json-visionfortech" border="0" data-original-height="997" data-original-width="1295" height="331" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutVgKZW5aRHraBiEg6WB4KXLOO6UyabSszOcC9ABu6xaczn195KgPO-wQq82W-7S6oHVKnglTJrFtA6b8KZK_G7i_-Zn0zbLySPPROvuLOA5x6AZIExiqZJpb_PRfK37_ApUf65rWX7W4OtKSR_QdO9buICgH98_amM4X0lrJbANIj0CeK3wX7Ajs7A/w431-h331/angular.png" title="angular.json-visionfortech" width="431" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">angular.json-visionfortech</td></tr></tbody></table><br /><div><br /></div><div>index.html changes will have reference of manifest file.</div><div><br /></div><div>Package.json will have changes related to installed dependencies for pwa package.</div><div><br /></div><div><span style="color: #fcff01;">4) Run the Application</span></div><div><br /></div><div>In this final step we are going to see how to see whether actually service worker is running of what ?</div><div><br /></div><div>Please refer to the git repo and download the code and check it's readme.md file for the steps to run PWA app</div><div><br /></div><div><div><span>In case if you are facing any kind of issue/problem please feel free to post it in comment. i will try to resolved as soon as i can.</span></div><div><span><br /></span></div><div><span>Hope you enjoyed the article and it got added something new to your knowledge.</span></div><div><u><br /></u></div><div><div style="box-sizing: border-box; color: #24292e; font-size: 14px; margin-bottom: 16px;"><span><span style="color: white;">To Learn more about Javascript </span><a href="http://www.visionfortech.com/p/javascript.html" style="color: yellow; font-size: 14.85px; text-decoration-line: none;" target="_blank">Javascript Treasure</a> <span style="color: white;">and </span> </span><a href="http://www.visionfortech.com/p/angularjs_18.html" style="color: yellow; font-size: 14.85px; text-decoration-line: none;" target="_blank">Angular</a>.</div><div><span>To add something new every-time into your mind stay tuned to <a href="http://www.visionfortech.com/" style="color: yellow; text-decoration-line: none;" target="_blank">visionfortech</a>.</span></div></div></div></div></span></div>Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-39866972477983167392021-01-30T03:31:00.004-08:002021-10-25T23:19:12.703-07:00[Solution] How to generate/make exe(executables) from Angular App<p style="text-align: center;"><span style="font-family: verdana;"><span> </span><span style="text-align: left;"><span style="background-color: #fcff01; color: #2b00fe;"><b><u>[Solution] How to make exe(executable) from Angular App</u></b></span></span></span></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-2F8TY2J89lo/YBVCRsre21I/AAAAAAAAOhY/5yDPwJptBQUrMIZj5V54tt8YUXTlni3HwCLcBGAsYHQ/s532/generate_exe_from_angular_visionfortech.png" style="margin-left: auto; margin-right: auto;"><img alt="generate_exe_from_angular_visionfortech" border="0" data-original-height="304" data-original-width="532" height="229" src="https://1.bp.blogspot.com/-2F8TY2J89lo/YBVCRsre21I/AAAAAAAAOhY/5yDPwJptBQUrMIZj5V54tt8YUXTlni3HwCLcBGAsYHQ/w400-h229/generate_exe_from_angular_visionfortech.png" title="generate_exe_from_angular_visionfortech" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">generate exe from Angular App by Visonfortech</td></tr></tbody></table><p style="text-align: center;"><br /></p><span>In this article we will </span><b>solve</b><span > your all </span><b >questions</b><span > Like </span><b >How to generate exe out of Angular App</b><span> or in other words</span><b > Is it possible to generate exe out of Angular App code</b><span > or i will say </span><b>make windows executable out of Angular App (code)</b><p><span style="font-family: verdana;"><br />let's get started with this article in which we are going to discuss how we can generate exe or we can say windows executable using Angular App.</span></p><p><span style="font-family: verdana;">To achieve this, there are lot of npm packages are available but in this article we will go ahead and use <b>node-windows npm package.</b></span></p><p><span style="font-family: verdana;">Below are the steps to generate exe from nodejs app source code.</span></p><p><span style="font-family: verdana;">1) <b>Download nodejs and install nodejs and npm (Skip if you have npm already installed)</b></span></p><p><span style="font-family: verdana;">2) Into your project root directory execute below command.</span></p><div><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><span style="font-family: verdana;"><b>npm install node-windows</b>
or
npm i node -windows</span></pre></div><div ><span style="font-family: verdana;"><br /></span></div><div><span style="font-family: verdana;">3)<b> create one file</b> into your project's root directory named <b>service.js</b> and copy below code</span></div><div ><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><span style="font-family: verdana;"><span><span style="font-size: 14.85px;">var Service = require('node-windows').Service;
var svc = new Service({
name:'visionfortech_angular_app',
description: 'visionfortech Angular App',
script: <runAngularApp.js>,
execPath: <Node exe path>
});
svc.on('install',function(){
log.info("Service starting ...")
svc.start();
log.info("Service started ...")
});
svc.on('uninstall',function(){
log.info('Uninstall complete.');
log.info('The service exists: ',svc.exists);
});</span></span><span><span style="font-size: 14.85px;">
</span></span></span></pre><div><span style="font-family: verdana;"><b>Above code will create deamon directory into your project's root directory and into that it will create visionfortechangularapp.exe and two log files.</b></span></div><div><span style="font-family: verdana;"><br /></span></div></div><div><span style="font-family: verdana;">In case if you are facing any kind of issue/problem please feel free to post it in comment. i will try to resolved as soon as i can.</span></div><div><span style="font-family: verdana;"><br /></span></div><div><span style="font-family: verdana;">Hope you enjoyed the article and it got added something new to your knowledge.</span></div><div><u><br /></u></div><div ><div style="box-sizing: border-box; color: #24292e; font-size: 14px; margin-bottom: 16px;"><span style="font-family: verdana;color:white;"><span>To Learn more about Javascript </span><a href="http://www.visionfortech.com/p/javascript.html" style="font-size: 14.85px; text-decoration-line: none;" target="_blank">Javascript Treasure</a><span>.</span></span></div><div><span style="font-family: verdana;">To add something new every-time into your mind stay tuned to <a href="http://www.visionfortech.com/" style="text-decoration-line: none;" target="_blank">visionfortech</a>.</span></div></div>Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com1tag:blogger.com,1999:blog-9035752464239680661.post-70662808016716405922021-01-09T08:25:00.007-08:002021-10-27T01:33:44.997-07:00[Solution] How to make exe(executable) from NodeJS App<p style="text-align: center;"><span style="font-family: verdana;"><span> </span><span style="text-align: left;"><span style=><b><u>[Solution] How to generate/make exe(executable) from NodeJS App</u></b></span></span></span></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><img alt="[Solution] How to make exe(executable) from NodeJS App" border="0" data-original-height="274" data-original-width="480" height="229" src="https://1.bp.blogspot.com/-PZLgA5WU5Uc/X_mb8qlIb-I/AAAAAAAAOf8/fQJQaJoGVuk0gz4rMnn7rMbIJpGbDvNMgCLcBGAsYHQ/w400-h229/generate_exe_from_nodejs_visionfortech.png" style="margin-left: auto; margin-right: auto;" title="[Solution] How to make exe(executable) from NodeJS App" width="400" /></td></tr><tr><td class="tr-caption" style="text-align: center;">Make exe(executable) from NodeJS App</td></tr></tbody></table><span>In this article we will </span><b>solve</b><span> your all </span><b>questions</b><span > Like </span><b>How to generate exe out of NodeJS App</b><span> or in other words</span><b> Is it possible to generate exe out of NodeJS code</b><span> or i will say </span><b>make windows executable out of NodeJS App (code)</b><p style="text-align: start;"><span style="font-family: verdana;"><br />let's get started with this article in which we are going to discuss how we can generate exe or we can say windows executable using NodeJS App.</span></p><p style="text-align: start;"><span style="font-family: verdana;">To achieve this, there are lot of npm packages are available but in this article we will go ahead and use <b>node-windows npm package.</b></span></p><p style="text-align: start;"><span style="font-family: verdana;">Below are the steps to generate exe from nodejs app source code.</span></p><p style="text-align: start;"><span style="font-family: verdana;">1) <b>Download nodejs and install nodejs and npm (Skip if you have npm already installed)</b></span></p><p style="text-align: start;"><span style="font-family: verdana;">2) Into your project root directory execute below command.</span></p><div><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><span style="font-family: verdana;"><b>npm install node-windows</b>
or
npm i node -windows</span></div></pre></div><div><span style="font-family: verdana;"><br /></span></div><div><span style="font-family: verdana;">3)<b> create one file</b> into your project's root directory named <b>service.js</b> and copy below code</span></div><div><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><span style="font-family: verdana;"><span><span style="font-size: 14.85px;">var Service = require('node-windows').Service;
var svc = new Service({
name:'visionfortech_node_app',
description: 'visionfortech nodejs App',
script: <entry point of your application [app.js or index.js]>,
execPath: <Node exe path>
});
svc.on('install',function(){
log.info("Service starting ...")
svc.start();
log.info("Service started ...")
});
svc.on('uninstall',function(){
log.info('Uninstall complete.');
log.info('The service exists: ',svc.exists);
});</span></span><span><span style="font-size: 14.85px;">
</span></span></span></pre><div><span style="font-family: verdana;"><b>Above code will create deamon directory into your project's root directory and into that it will create visionfortechnodeapp.exe and two log files.</b></span></div><div><span style="font-family: verdana;"><br /></span></div></div><div><span style="font-family: verdana;">In case if you are facing any kind of issue/problem please feel free to post it in comment. i will try to resolved as soon as i can.</span></div><div><span style="font-family: verdana;"><br /></span></div><div><span style="font-family: verdana;">Hope you enjoyed the article and it got added something new to your knowledge.</span></div><div><u><br /></u></div><div><div style="box-sizing: border-box; color: #24292e; font-size: 14px; margin-bottom: 16px;"><span style="font-family: verdana;"><span style="color:white">To Learn more about Javascript </span><a href="http://www.visionfortech.com/p/javascript.html" style="color: yellow; font-size: 14.85px; text-decoration-line: none;" target="_blank">Javascript Treasure</a><span>.</span></span></div><div><span style="font-family: verdana;">To add something new every-time into your mind stay tuned to <a href="http://www.visionfortech.com/" style="color: yellow; text-decoration-line: none;" target="_blank">visionfortech</a>.</span></div></div><p style="text-align: start;"><br /></p>Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-52660461231672255772020-12-12T01:57:00.007-08:002021-11-01T03:58:09.155-07:00ECMAScript (ES6) Features with Example (Part -1)<p style="text-align: center;"><span style="font-family: verdana; font-size: large;"><b> <span style="background-color: #fcff01; color: #2b00fe;"><u>ECMAScript (ES6) Features with Example (Part -1)</u></span></b></span></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><img alt="ECMAScript (ES6) Features Part 1 By Visionfortech" border="0" data-original-height="306" data-original-width="535" height="229" src="https://1.bp.blogspot.com/-7GhZL9Ssto8/X9RcYJaAliI/AAAAAAAAOec/ZRdi675_NAswfFNMaQrfiV4xd1w0zcGfgCLcBGAsYHQ/w400-h229/es6%2Bfeatures%2Bpart-1%2Bby%2Bvisionfortech.png" style="margin-left: auto; margin-right: auto;" title="ECMAScript (ES6) Features Part 1 By Visionfortech" width="400" /></td></tr><tr><td class="tr-caption" style="text-align: center;">ECMAScript (ES6) Features Part 1 By Visionfortech</td></tr></tbody></table><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-7GhZL9Ssto8/X9RcYJaAliI/AAAAAAAAOec/ZRdi675_NAswfFNMaQrfiV4xd1w0zcGfgCLcBGAsYHQ/s535/es6%2Bfeatures%2Bpart-1%2Bby%2Bvisionfortech.png" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: verdana;"></span></a></div><div><span style="font-family: verdana;"><br /></span></div><span style="font-family: verdana;">In this article we will see some of the fantastic features of ES6 with examples so that it will be easy to understand each and every features.<br /><br />In this article we will discuss about some major features about ECMAScript (ES6). Since there are lot many features of into ES6 We will cover few of them in part 1 and rest of them we will cover it in out next article. So let' start with some coolest features of ES6 now.</span><div><span style="font-family: verdana;"><br /></span></div><div><span style="font-family: verdana;">Below are the list of ES6 Features.</span></div><div><span style="font-family: verdana;"><br /></span></div><div><span style="font-family: verdana;"><br /></span></div><div><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><h2 style="color: #626262; font-size: 13px; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal; margin: unset; position: relative; text-transform: uppercase;"><u style="color: yellow;"><span style="font-family: verdana;">ES6 FEATURES</span></u></h2><span style="font-family: verdana;"><span style="font-size: 14.85px;">
</span></span><ol style="display: grid; margin: unset; text-align: left;"><li style="margin: 0px 0px 0.25em; padding: 0px;"><span><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>let vs var</b></span></span></li><li style="margin: 0px 0px 0.25em; padding: 0px;"><span><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Declaring Variable as Constant</b></span></span></li><li style="margin: 0px 0px 0.25em; padding: 0px;"><span><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Template Literals</b></span></span></li><li style="margin: 0px 0px 0.25em; padding: 0px;"><span><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Spread Operator</b></span></span></li><li style="margin: 0px 0px 0.25em; padding: 0px;"><span><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Function default parameters</b></span></span></li><li style="margin: 0px 0px 0.25em; padding: 0px;"><span><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Arrow functions</b></span></span></li><li style="margin: 0px 0px 0.25em; padding: 0px;"><span><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Shorthand Properties</b></span></span></li><li style="margin: 0px 0px 0.25em; padding: 0px;"><span><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>This keyword</b></span></span></li><li style="margin: 0px 0px 0.25em; padding: 0px;"><span><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Destructuring</b></span></span></li><li style="margin: 0px 0px 0.25em; padding: 0px;"><span ><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Class Inheritance</b></span></span></li><li style="margin: 0px 0px 0.25em; padding: 0px;"><span><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Promise</b></span></span></li><ol><li style="margin: 0px 0px 0.25em; padding: 0px;"><span><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Define and Use of Promise</b></span></span></li><li style="margin: 0px 0px 0.25em; padding: 0px;"><span><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Promise Chaining</b></span></span></li><li style="margin: 0px 0px 0.25em; padding: 0px;"><span><b style="font-size: 14.4px; letter-spacing: 0.4px;">Error </b><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Handling</b></span><b style="font-size: 14.4px; letter-spacing: 0.4px;"> into Promise Chain</b></span></li></ol></ol></pre><p style="text-align: left;"><b><span style="font-family: verdana;">In this article we are going to discuss about let vs var, Declaring Variable as Constant, Template Literals, Spread Operator, Function default parameters, Arrow functions features of ES6</span></b></p><p style="text-align: left;"><b><span style="font-family: verdana;"><br /></span></b></p><h3 style="text-align: left;"><u><span style="font-family: verdana;">1. Let vs Var</span></u></h3></div><div><div style=""><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><span style="font-family: verdana;"><span style="font-size: 14.85px;"><b>Var : </b></span></span></div><div><span style="font-family: verdana;"><span style="font-size: 14.85px;"><b><br /></b></span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;">var visionfortech_x = 5;</span></span></div><div><span style="font-family: verdana;"><span style=""><span style="font-size: 14.85px;">if(</span></span>visionfortech_x<span style=" font-size: 14.85px;">){</span></span></div><div><span style="font-family: verdana;"><span style=""><span style="font-size: 14.85px;"><span> var </span></span></span>visionfortech_x = 10</span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;">}</span></span></div><div><span style="font-family: verdana;"><span style=""><span style="font-size: 14.85px;">console.log(</span></span>visionfortech_x <span style=" font-size: 14.85px;">) </span><span style="font-size: 14.85px;"><span style="">// The output will be 10</span></span></span></div><div><span style="font-size: 14.85px;"><span style="font-family: verdana;"><br /></span></span></div><div><span style="font-size: 14.85px;"><b><span style="font-family: verdana;">Let :</span></b></span></div><div><span style="font-size: 14.85px;"><span style="font-family: verdana;"> </span></span></div><div><span style="font-family: verdana;"><span style="font-size: 14.85px;">var visionfortech_x = 5;
if(visionfortech_x){
let visionfortech_x = 10
}
console.log(visionfortech_x ) </span><span style=" font-size: 14.85px;">// The output will be 5</span></span></div><div><span style="font-size: 14.85px;"><span style="font-family: verdana;"><br /></span></span></div><div></div></pre></div><div style=""><h3 style=" font-size: 14.85px; margin: 0px; position: relative;"><u style="font-size: medium; font-weight: 400;"><span style="font-family: verdana;">for detail understanding please visit <a href="http://www.visionfortech.com/2018/08/let-vs-var-in-javascript.html" target="_blank">let vs var by visionfortech</a> or <a href="http://www.visionfortech.com/2018/09/javascript-global-variable-and-local-variable.html" target="_blank">Global VS local Variable into JS</a></span></u></h3><div><div><h3><u><span style="font-family: verdana;"><br /></span></u></h3><h3><u><span style="font-family: verdana;">2. Declaring variable as Constant</span></u></h3></div><div><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><b>Const:</b></span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><br /></span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;">1) const car = "Honda";</span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><span> </span>car = "BMW";</span></span></div><div><span style="font-family: verdana;"><span style="font-size: 14.85px;"><span style=""> console.log(car)</span><span style="color: white;"> // It will give you an Error</span><span style=""><br /></span></span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><span><br /></span></span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><span>2) </span>const cars = ['Honda', 'BMW'];</span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><span> </span>cars.push('Ferrari');</span></span></div><div><span style="font-family: verdana;"><span style="font-size: 14.85px;"><span style=""> </span><span style="">console.log(cars); </span><span style="color: yellow;">// Output will be ['Honda','BMW','Ferrari']</span></span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><br /></span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;">3) const car = {</span></span></div><div><span style=" font-family: verdana; font-size: 14.85px;"><span> </span><span> </span>brand: 'BMW',</span></div><span style="font-family: verdana;"><span style="font-size: 14.85px;"><span style=""> doors: 2,
engine: 3.0
</span><span style=""> </span><span style="">}
</span><span style=""> </span><span style="">car.brand = "Ferrari";
</span><span style=""> </span><span style="">console.log(car); </span><span style="color: yellow;">// Output will be {brand: 'Ferrari',doors: 2,engine: 3.0</span></span></span><span style="color: yellow;">}</span></pre></div></div><div style=" font-size: 14.85px;"></div></div></div><div><u><span style="font-family: verdana;"><br /></span></u></div><div><div style=""><h3><span style="font-family: verdana;"><u>3. Template Literals</u></span></h3></div><div style=""><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><span style=" font-family: verdana; font-size: 14.85px;">1) </span><span style=" font-family: verdana;"><span style="font-size: 14.85px;">let name = "Pratik";</span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><span> </span>let message = `Hello Mr. ${name}</span></span><span style=" font-family: verdana; font-size: 14.85px;">`;</span></div><div><span style="font-family: verdana;"><span style="font-size: 14.85px;"><span style=""> console.log(</span></span></span><span style=" font-family: verdana; font-size: 14.85px;">message </span><span style="font-family: verdana;"><span style="font-size: 14.85px;"><span style="">)</span><span style="color: white;"> // Hello Mr. Pratik</span><span style=""><br /></span></span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><br /></span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;">2) let number1 = 10;</span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><span> </span>let number2 = 20;</span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><span> </span>let results = `Total is $${number1 + number2}`;</span></span></div><div><span style="font-family: verdana;"><span style=" font-size: 14.85px;"> </span><span style=""><span style="font-size: 14.85px;">console.log(results); </span></span><span style="color: yellow; font-size: 14.85px;">// Total is 30</span></span></div></pre></div></div><div><u><span style="font-family: verdana;"><br /></span></u></div><div><div style=""><h3><span style="font-family: verdana;"><u>4. Spread Operator</u></span></h3></div><div style=""><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;">var topics= ["Javascript", "Angular", "VueJS"];</span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;">var author_topics = ["visionfortech", "JS", "MongoDB"];</span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;">var author_likes= ["Mongodb Certifications",...topics, ...author_topics];</span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><span>console.log(...author_likes) </span><br /></span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><span><br /></span></span></span></div><div><span style="color: white; font-family: verdana;"><span style="font-size: 14.85px;">Above will print below thing on browser console.</span></span></div><div><span style="color: white; font-family: verdana;"><span style="font-size: 14.85px;">Mongodb Certifications,Javascript,Angular,VueJS,visionfortech,js,MongoDB</span></span></div></pre></div></div><div><u><span style="font-family: verdana;"><br /></span></u></div><div><div style=""><h3><span style="font-family: verdana;"><u>5. Function Default Parameter</u></span></h3></div><div style=""><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;">function website(sitename="Visionfortech", sitetype="Blog"){</span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><span> </span>console.log(car1, car2);
}
</span></span></div><div><span style=" font-family: verdana; font-size: 14.85px;">console.log(website())</span></div><div><br /></div><div><span style="color: white; font-family: verdana;"><span style="font-size: 14.85px;">Above will print below thing on browser console.</span></span></div><div><span style="color: white; font-family: verdana;"><span style="font-size: 14.85px;">Visionfortech Blog</span></span></div><div><span style="color: white; font-family: verdana;"><span style="font-size: 14.85px;"><br /></span></span></div><div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;">function website(sitename="Visionfortech", sitetype="Blog"){</span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"> console.log(car1, car2);
}
</span></span></div><div><span style=" font-family: verdana; font-size: 14.85px;">console.log(website("Visionfortech Javascript"))</span></div><div><br /></div><div><span style="color: white; font-family: verdana;"><span style="font-size: 14.85px;">Above will print below thing on browser console.</span></span></div><div><span style="color: white; font-family: verdana;"><span style="font-size: 14.85px;">Visionfortech Javascript Blog</span></span></div></div></pre></div></div><div><br /></div><div><div style=""><h3><span style="font-family: verdana;"><u>6. Arrow Function</u></span></h3></div><div style=""><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;">var cal = (number1, numbe2) => number1 + numbe2;</span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;">console.log(cal(3, 12));</span></span></div><div><span style=" font-family: verdana;"><span style="font-size: 14.85px;"><br /></span></span></div><div><span style="color: white; font-family: verdana;"><span style="font-size: 14.85px;">Above will print below thing on browser console.</span></span></div><div><span style="color: white; font-family: verdana;"><span style="font-size: 14.85px;">15</span></span></div></pre></div></div><div><u><br /></u></div><div><span style=""><span style=" font-family: verdana;"><span style="font-size: 14.85px;">For More ES6 features stay tuned to </span></span><a href="https://www.visionfortech.com" style=" font-family: verdana; font-size: 14.85px;" target="_blank">visionfortech</a></span></div><div><br /></div><div><span style=" font-family: verdana; font-size: 14.85px;">Hope you enjoyed the article and it got added something new to your knowledge.</span></div><div><u><br /></u></div><div><div style="box-sizing: border-box;font-family: Verdana, Geneva, sans-serif; font-size: 14px; margin-bottom: 16px;"><span style="font-family: verdana;"><span style=" font-size: 14.85px;">To Learn more about Javascript </span><a href="http://www.visionfortech.com/p/javascript.html" style="color: yellow; font-size: 14.85px; text-decoration-line: none;" target="_blank">Javascript Treasure</a><span style=" font-size: 14.85px;">.</span></span></div><div style="font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;"><span style="font-family: verdana;">To add something new every-time into your mind stay tuned to <a href="http://www.visionfortech.com/" style="color: yellow; text-decoration-line: none;" target="_blank">visionfortech</a>.</span></div></div><div><br /></div>Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com1tag:blogger.com,1999:blog-9035752464239680661.post-44817584693675147732020-10-24T02:14:00.008-07:002021-11-14T21:56:40.763-08:00Cache API in JavaScript<h1 style="margin: 0px; position: relative; text-align: center;"><span style=""><span style=""><u>Cache API in Javascript</u></span></span></h1><div><span style="color: #3367d6; font-family: verdana; font-size: small;"><span style="background-color: #fce8b2;"><u><br /></u></span></span></div><div><span style="color: #3367d6; font-family: verdana; font-size: small;"><span style="background-color: #fce8b2;"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-y_9gAArd5lc/X5PfSQUUDYI/AAAAAAAAOa4/F9xR9GvUOG4H6REAbua5BILu5Ux23d__gCLcBGAsYHQ/s474/cache_api_using_javascript_visionfortech.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="cache-api-in-javascript-by-visionfortech-pratik-soni" border="0" data-original-height="278" data-original-width="474" height="267" src="https://1.bp.blogspot.com/-y_9gAArd5lc/X5PfSQUUDYI/AAAAAAAAOa4/F9xR9GvUOG4H6REAbua5BILu5Ux23d__gCLcBGAsYHQ/w455-h267/cache_api_using_javascript_visionfortech.png" title="cache-api-in-javascript-by-visionfortech-pratik-soni" width="455" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Cache API using JavaScript By Visionfortech</td></tr></tbody></table><div><span style="color: #3367d6; font-family: verdana; font-size: small;"><span style="background-color: #fce8b2;"><br /></span></span></div></span></span><span style="font-family: verdana; font-size: 14.85px;">In this article i am going to show that how we can add,update,delete,retrive (CRUD operations) api urls and it's responses into cache so that our application will execute in more faster manner.</span><span style="color: #3367d6; font-family: verdana; font-size: small;"><span style="background-color: #fce8b2;"><u><br /></u></span></span></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div><div><span style="font-family: verdana; font-size: 14.85px;">First step is we have to check weather our browser is supporting cache API or not. So now everyone will have a question like how we can check that ? So below is the answer for that.</span></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div><h4 style="text-align: left;"><span style="font-family: verdana; font-size: 14.85px;"><u>Detect whether browser supports Cache API or not </u></span></h4><div><div style=""><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;">if ('caches' in window) {</span><span style="font-size: 14.85px;"><span style="">
</span><span style=""> // Means your browser is supporting cache API</span><span style="">
}else{
</span><span style="color: #76a5af;"> </span><span style="">// Please upgrade your browser because cache APIs are not supported</span><span style="">
}</span></span></span></div><div></div></pre></div><div style=""><h3 style="font-family: Verdana, Geneva, sans-serif; font-size: 14.85px; margin: 0px; position: relative;"><span style="font-weight: 400; white-space: pre;"><span style="font-family: verdana, geneva, sans-serif; font-size: small;"><br /></span></span></h3><div><div><span style="font-family: verdana; font-size: 14.85px;">If your browser has suppor of cache API then let's go ahead and create cache</span></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div><h4 style="text-align: left;"><span style="font-family: verdana; font-size: 14.85px;"><b><u>Create a Cache </u></b></span></h4></div><div><div><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;"><span style="">caches.open('visionfortech-cache').then(function(cacheInJS) {
</span><span style="">// It will return a promise and a object of cache which was either existed or created
// before caches.open JS call</span><span style="">
});</span></span></span></div><div></div></pre></div><div></div></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div><div><span style="font-family: verdana; font-size: 14.85px;">Since we have created a cache now let's go ahead and try to add one or all URLs to cache.</span></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div><div><div><h4><span style="font-family: verdana; font-size: 14.85px;"><b><u>Adding API URLs and it's response into Cache </u></b></span></h4></div><div><div><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;">let URLs_to add = [ "/api/visionfortech_cache_api_Test1","api/visionfortech_cache_api2"]</span></span></div><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;">let single_url = "api/visionfortech_cache_api1";</span></span></div><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;"><br /></span></span></div><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;">// Adding a single URL to cache</span></span></div><div><span style="color: #76a5af; font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;"><br /></span></span></div><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;">caches.open('visionfortech-cache').then(function(cacheInJS) {
cacheInJS.add(single_url ); <span style="">// URL will be fetched and cached</span>
});</span></span></div><div><span style="color: #76a5af; font-family: verdana, geneva, sans-serif; font-size: 14.85px;"><br /></span></div><div><span style="font-family: verdana, geneva, sans-serif; font-size: 14.85px;"><span style="">// Adding multiple URL to cache</span></span></div><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;"><br /></span></span></div><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;">caches.open('visionfortech-cache').then(function(cacheInJS) {
cacheInJS.addAll(URLs_to add)
.then(function() {
<span style="">// Multiple URLs will be fetched and cached</span>
});
});</span></span></div><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;"><br /></span></span></div><div><span style="color: #76a5af; font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;"><br /></span></span></div><div></div></pre></div><div></div></div></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div><div><span style="font-family: verdana; font-size: 14.85px;">Since we have created a cache and added some URLs now let's go ahead and try to update the response of particular URL's response.</span></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div><div><div><h4><span style="font-family: verdana; font-size: 14.85px;"><b><u>Update response of URL into Cache</u></b></span></h4></div><div><div><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><span style="font-family: verdana, geneva, sans-serif;"><span style=""><span style="font-size: 14.85px;">fetch('api/visionfortech_cache_api1').then(function(response) {
return caches.open('visionfortech-cache').then(function(cacheInJS) {
return cacheInJS.put('api/visionfortech_cache_api1', response);</span></span></span></div><div><span style="font-family: verdana, geneva, sans-serif; font-size: 14.85px;"><span> </span>// It will update the response for api/visionfortech_cache_api1 URL.</span></div><div><span style="font-family: verdana, geneva, sans-serif;"><span style=""><span style="font-size: 14.85px;"> });
});</span></span></span></div></pre></div></div></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div><div><span style="font-family: verdana;"><span style="font-size: 14.85px;">Till now we have seen how to create a cache and how to add API URLs and it's responses and how to update API response into Cache in case of change. So now let's go ahead and look at how we can retrieve the URLs which are cached and it's respective reponse object.</span></span></div><div><div><h4 style="text-align: left;"><span style="font-family: verdana; font-size: 14.85px;"><b><u><br /></u></b></span></h4><h4 style="text-align: left;"><span style="font-family: verdana; font-size: 14.85px;"><b><u>Retrive URLs and it's response from Cache</u></b></span></h4></div><div><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;">// Retrieve API URLs from cache like how many APIs we have stored in cache</span></span></div><div><span style="color: #76a5af; font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;"><br /></span></span></div><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;">caches.open('visionfortech-cache').then(function(cacheInJS) {
cacheInJS.keys().then(function(cached_requests) {
console.log(cached_requests);
<span style="">// It will return array of cache API URLs</span>
});
});</span></span></div><div><span style="color: #76a5af; font-family: verdana, geneva, sans-serif; font-size: 14.85px;"><br /></span></div><div><span style="font-family: verdana, geneva, sans-serif; font-size: 14.85px;"><span style="">// Retrieve particular API response from Cache</span></span></div><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;"><br /></span></span></div><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;">caches.open('visionfortech-cache').then(function(cacheInJS) {
cacheInJS.match('api/visionfortech_cache_api1').then(function(response) {
console.log(response);
});
});</span></span></div></pre></div></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div><div><span style="font-family: verdana; font-size: 14.85px;">So Now let's see how we can delete/clear our cache.</span></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div><div><div><h4><span style="font-family: verdana; font-size: 14.85px;"><b><u>Delete a Cache </u></b></span></h4></div><div><div><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;"><span style="">caches.</span></span></span><span style="">delete</span><span style="font-family: verdana, geneva, sans-serif; font-size: 14.85px;">('visionfortech-cache').then(function(cacheInJS) {</span><br /><span style="font-family: verdana, geneva, sans-serif;"><span style="font-size: 14.85px;"><span style=""> </span><span style="">// It will delete/clear the visionfortech-cache</span><span style="">
});</span></span></span></div><div></div></pre></div><div></div></div></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div><div><div style="box-sizing: border-box; font-family: Verdana, Geneva, sans-serif; font-size: 14px; margin-bottom: 16px;"><span style="font-family: verdana; font-size: 14.85px;">Hope you enjoyed the article and it got added something new to your knowledge.</span></div><div style="box-sizing: border-box; font-family: Verdana, Geneva, sans-serif; font-size: 14px; margin-bottom: 16px;"><span style="font-family: verdana;"><span style="font-size: 14.85px;">To Learn more about Javascript </span><a href="http://www.visionfortech.com/p/javascript.html" style="font-size: 14.85px; text-decoration-line: none;" target="_blank">Javascript Treasure</a><span style="font-size: 14.85px;">.</span></span></div><div style="font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;"><span style="font-family: verdana;">To add something new every-time into your mind stay tuned to <a href="http://www.visionfortech.com/" style="text-decoration-line: none;" target="_blank">visionfortech</a>.</span></div></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div><div><span style="font-family: verdana; font-size: 14.85px;"><br /></span></div></div></div>Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-25284967832431282962020-10-10T03:32:00.000-07:002020-10-10T03:32:28.165-07:00Speech to Text using Javascript<h1 style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; margin: 0px; position: relative; text-align: center;"><span style="background-color: #fce8b2;"><span style="font-size: medium;"><span style="color: #3367d6; font-family: verdana;"><u>Speech to text using </u></span><span style="color: #3367d6; font-family: verdana;"><u>JavaScript</u></span></span></span></h1><div><span style="background-color: #fce8b2;"><span style="font-size: medium;"><span style="color: #3367d6; font-family: verdana;"><u><br /></u></span></span></span></div><div><span style="background-color: #fce8b2;"><span style="font-size: medium;"><span style="color: #3367d6; font-family: verdana;"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-2pCmd5QjI00/X4GICnNnx6I/AAAAAAAAOZE/iyu9vWbOqPsHCOkBhNs6MX_27OT5qPNLQCLcBGAsYHQ/s1167/visionfortect_speech_to_text_1.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="518" data-original-width="1067" height="253" src="https://1.bp.blogspot.com/-2pCmd5QjI00/X4GICnNnx6I/AAAAAAAAOZE/iyu9vWbOqPsHCOkBhNs6MX_27OT5qPNLQCLcBGAsYHQ/w568-h253/visionfortect_speech_to_text_1.PNG" width="568" /></a></div></span></span></span></div><div style="text-align: left;"><span style="font-size: medium;"><span style="background-color: #f1efef; color: #3367d6; font-family: verdana;"><br /></span></span></div><div style="text-align: left;"><span style="color: #1f1f1f; font-family: verdana;"><span style="font-size: 14.85px;">In this article i am going to show that how we can convert speech to text using JavaScript with it's browser API.</span></span></div><div style="text-align: left;"><span style="color: #1f1f1f; font-family: verdana;"><span style="font-size: 14.85px;"><br /></span></span></div><div style="text-align: left;"><span style="color: #1f1f1f; font-family: verdana;"><span style="font-size: 14.85px;">As you seen in above image, <b>the output/outcome of this example/program is user will be able to get spoken words into text/string and his/her confidence level(in %)</b> while speaking those words.</span></span></div><div style="text-align: left;"><span style="color: #1f1f1f; font-family: verdana;"><span style="font-size: 14.85px;"><br /></span></span></div><div style="text-align: left;"><span style="color: #1f1f1f; font-family: verdana;"><span style="font-size: 14.85px;">with the user of inbuilt web api of browser we can achieve above program,</span></span><span style="color: #1f1f1f; font-family: verdana; font-size: 14.85px;">we can recognize speech using JavaScript. It is very easy to recognize speech in a browser using JavaScript and then getting the text from the speech to use as user input. We havecovered How to convert Text to Speech using Javascript.</span></div><div style="text-align: left;"><br /></div><div style="text-align: left;"><div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;"><pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div style="font-family: verdana, geneva, sans-serif;"><b>Want to download source code ?</b> : <a href="https://github.com/visionfortech/speech_to_text_using_javascript" style="color: #1c005f; text-decoration-line: none;" target="_blank">Speech-to-text-using-Javascript</a></div></pre></div><div style="background-color: white;"><h3 style="color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px; margin: 0px; position: relative;"><span style="color: #1f1f1f; font-family: verdana; font-size: medium; font-weight: 400;"><span style="font-size: 14.85px;"><br /></span></span></h3><h3 style="margin: 0px; position: relative;"><span style="color: #1f1f1f; font-family: verdana;"><span style="font-size: 14.85px; font-weight: 400;">We have used the </span><span style="font-size: 14.85px;">SpeechRecognition </span><span style="font-size: 14.85px; font-weight: 400;">object. We haven't used too many properties. We have a simple HTML webpage in the example, where we have a button control to initiate the speech recognition action.</span></span></h3><div><span style="color: #1f1f1f; font-family: verdana;"><span style="font-size: 14.85px; font-weight: 400;"><br /></span></span></div><h3 style="color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px; margin: 0px; position: relative;"><b><u><span style="color: #3367d6; font-family: verdana;">Output of this Application : </span></u></b></h3><div style="color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;"><b><u><span style="color: #3367d6; font-family: verdana;"><br /></span></u></b></div><div style="color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;"><b><u><span style="color: #3367d6; font-family: verdana;"><br /></span></u></b></div><div style="color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;"><b><u><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-NTZMsV7oAOM/X4GMIPF6Z5I/AAAAAAAAOZQ/dR7R4rHsH8wj-rbB0NNad320xF5XRh27wCLcBGAsYHQ/s1167/visionfortect_speech_to_text_1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="518" data-original-width="1167" height="235" src="https://1.bp.blogspot.com/-NTZMsV7oAOM/X4GMIPF6Z5I/AAAAAAAAOZQ/dR7R4rHsH8wj-rbB0NNad320xF5XRh27wCLcBGAsYHQ/w530-h235/visionfortect_speech_to_text_1.PNG" width="530" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div></u></b></div></div></div><div style="text-align: left;"><div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;"><div style="box-sizing: border-box; color: #24292e; font-size: 14px; margin-bottom: 16px;"><b style="color: #1f1f1f; font-family: verdana; font-size: 14.85px;">Note: It will work only in Google Chrome browser</b></div><div style="box-sizing: border-box; color: #24292e; font-size: 14px; margin-bottom: 16px;"><span style="color: #1f1f1f; font-size: 14.85px;"><span style="font-family: verdana;">While running the code into<b> </b></span></span><span style="color: #333333; font-family: "noto sans", sans-serif; font-size: 16px;">the browser will ask for </span><span style="box-sizing: border-box; color: #333333; font-family: "noto sans", sans-serif; font-size: 16px; font-weight: 700;">permission to use your Microphone</span><span style="color: #333333; font-family: "noto sans", sans-serif; font-size: 16px;">, so please click on </span><span style="box-sizing: border-box; color: #333333; font-family: "noto sans", sans-serif; font-size: 16px; font-weight: 700;">Allow</span><span style="color: #333333; font-family: "noto sans", sans-serif; font-size: 16px;"> and then speak anything to see the program in action.</span></div><div style="box-sizing: border-box; color: #24292e; font-size: 14px; margin-bottom: 16px;"><span style="color: #1f1f1f; font-family: verdana; font-size: 14.85px;">Hope you enjoyed the article and it got added something new to your knowledge.</span></div><div style="box-sizing: border-box; color: #24292e; font-size: 14px; margin-bottom: 16px;"><span style="font-family: verdana;"><span style="color: #1f1f1f; font-size: 14.85px;">To Learn more about Javascript </span><a href="http://www.visionfortech.com/p/javascript.html" style="color: #1c005f; font-size: 14.85px; text-decoration-line: none;" target="_blank">Javascript Treasure</a><span style="color: #1f1f1f; font-size: 14.85px;">.</span></span></div><div><span style="font-family: verdana;">To add something new every-time into your mind stay tuned to <a href="http://www.visionfortech.com/" style="color: #1c005f; text-decoration-line: none;" target="_blank">visionfortech</a>.</span></div></div><div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;"><span style="font-family: verdana;"><br /></span></div><div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;"><span style="font-family: verdana;">Enjoy......!!!<br />Happy Learning.....!!!</span></div></div><div dir="ltr" style="text-align: left;" trbidi="on">
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-60599376022875985532020-05-30T03:30:00.006-07:002020-05-30T03:51:35.751-07:00Face Recognition using JavaScript<h1 style="text-align: center;"><span style="background-color: #fce8b2;"><font size="4"><font color="#3367d6" face="verdana"><u>Face recognition using </u></font><font color="#3367d6" face="verdana"><u>JavaScript<span></span></u></font></font></span></h1><div><font face="verdana"><br />Into this article i am going to describe How we can <b><u>calculate age, gender detection, and his/her expression by just detecting his/he face</u></b>.</font></div><div><font face="verdana"><br /></font></div><div><font face="verdana">Surprised. I was too.... Now face detection is possible using java script which is one of the most common applications of Artificial Intelligence</font></div><div><font face="verdana"><br /></font></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-GTndJgWqhGo/XtI6YP749OI/AAAAAAAAOH8/KMoZMv8bzJgrohn0ZwXzj5H4inAsunXLgCK4BGAsYHg/face_recognition_visionfortech.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="code structure of face recognition using javascript : By visionfortech" border="0" data-original-height="330" data-original-width="700" src="https://1.bp.blogspot.com/-GTndJgWqhGo/XtI6YP749OI/AAAAAAAAOH8/KMoZMv8bzJgrohn0ZwXzj5H4inAsunXLgCK4BGAsYHg/s320/face_recognition_visionfortech.gif" title="code structure of face recognition using javascript : By visionfortech" width="550" /></a></div><pre style="text-align: center;"><br /></pre><div><font face="verdana">In Javascript world face-api.js came up with JavaScript API for face detection and face recognition in the browser implemented on top of the tensorflow.js core APIs</font></div><div><font face="verdana"><br /></font></div><div><pre class="literal-block" style="background-color: white; border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #1f1f1f; font-size: 14.85px; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div style="font-family: verdana, geneva, sans-serif;"><b>Want to download source code ?</b> : <a href="https://github.com/visionfortech/face-recognition-using-javascript" target="_blank">face-recognition-using-javascript</a></div></pre></div><div><h3 style="text-align: left;"><b><u><font color="#3367d6" face="verdana"><br />Output of this Application : <br /><br /></font></u></b></h3><div><b><u><font face="verdana"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-iONJkcfFBpw/XtIxmIOXPJI/AAAAAAAAOHA/ra0uU6qgcDQwauV8j98gHcO4P9bZwVYJwCK4BGAsYHg/face_recognition_visionfortech.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="code structure of face recognition using javascript : By visionfortech" border="0" data-original-height="848" data-original-width="1873" src="https://1.bp.blogspot.com/-iONJkcfFBpw/XtIxmIOXPJI/AAAAAAAAOHA/ra0uU6qgcDQwauV8j98gHcO4P9bZwVYJwCK4BGAsYHg/s320/face_recognition_visionfortech.PNG" title="code structure of face recognition using javascript : By visionfortech" width="520" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><font color="#3367d6"><br /></font></font></u></b></div><font face="verdana">In this article we will provide the information that how we can detect expression of a human being, Age of a person and his/her Gender</font></div><div><font face="verdana"><br /></font></div><div><b><font face="verdana">Below will be the project structure.</font></b></div><div><b><font face="verdana"><br /></font></b></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-Cg547GhClOU/XtI03UMms6I/AAAAAAAAOHg/awIj0YXeSYUWk8oY--zFFjWym60Y045KQCK4BGAsYHg/code_structure_face_recognition_visionfortech.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="code structure of face recognition using javascript : By visionfortech" border="0" data-original-height="747" data-original-width="534" height="320" src="https://1.bp.blogspot.com/-Cg547GhClOU/XtI03UMms6I/AAAAAAAAOHg/awIj0YXeSYUWk8oY--zFFjWym60Y045KQCK4BGAsYHg/w229-h320/code_structure_face_recognition_visionfortech.PNG" title="code structure of face recognition using javascript : By visionfortech" width="229" /></a></div><br /></div><div><font face="verdana"><br /></font></div><div><font face="verdana">Or You can download the code from <a href="https://github.com/visionfortech/face-recognition-using-javascript" target="_blank">face-recognition-using-javascript</a><br /><br /></font><div style="background-color: white; color: #1f1f1f; font-size: 14.85px;"><div style="box-sizing: border-box; color: #24292e; font-size: 14px; margin-bottom: 16px;"><span style="color: #1f1f1f; font-size: 14.85px;"><font face="verdana">Hope you enjoyed the article and it got added something new to your knowledge.</font></span></div><div style="box-sizing: border-box; color: #24292e; font-size: 14px; margin-bottom: 16px;"><font face="verdana"><span style="color: #1f1f1f; font-size: 14.85px;">To Learn more about Javascript </span><a href="http://www.visionfortech.com/p/javascript.html" style="color: #1c005f; font-size: 14.85px; text-decoration-line: none;" target="_blank">Javascript Treasure</a><span style="color: #1f1f1f; font-size: 14.85px;">.</span></font></div><div><font face="verdana">To add something new every-time into your mind stay tuned to <a href="http://www.visionfortech.com/" style="color: #1c005f; text-decoration-line: none;" target="_blank">visionfortech</a>.</font></div></div><div style="background-color: white; color: #1f1f1f; font-size: 14.85px;"><font face="verdana"><br /></font></div><div style="background-color: white; color: #1f1f1f; font-size: 14.85px;"><font face="verdana">Enjoy......!!!<br />Happy Learning.....!!!</font></div></div>Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-33568541308055638532020-03-29T04:58:00.001-07:002020-03-29T05:00:07.588-07:00Steps to update Angular from Angular 8 to Angular 9 <div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<span style="background-color: yellow; color: blue;"><u>Update application from Angular 8 -> Angular 9</u></span></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-2y921lq4qCA/XoCIXqG_YfI/AAAAAAAAOAE/5cgMQ8Kj4FETBBhw24zQF9EpQGFoz3AVwCLcBGAsYHQ/s1600/update_from_angular_8_to_angular_9.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="310" data-original-width="819" height="186" src="https://1.bp.blogspot.com/-2y921lq4qCA/XoCIXqG_YfI/AAAAAAAAOAE/5cgMQ8Kj4FETBBhw24zQF9EpQGFoz3AVwCLcBGAsYHQ/s640/update_from_angular_8_to_angular_9.PNG" width="550" /></a></div>
<div>
<span style="background-color: yellow; color: blue;"><u><br /></u></span></div>
<div>
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">Though we have angular9 released so in this article i would like to discuss how we can update our Angular App from Angular8 to Angular 9. In other words i would like to say Migrate existing angular application to angular9 from angular8</span></div>
<div>
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white; font-size: 14.85px;"><br /></span></span>
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white; font-size: 14.85px;">To know what are the new features into Angular 9 <a href="http://www.visionfortech.com/2020/03/angular-9-features-or-what-is-new-in-angular9.html" target="_blank">Angular 9 Features</a>.</span></span><br />
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white; font-size: 14.85px;"><br /></span></span>
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white; font-size: 14.85px;">So to upgrade it to angular 9 follow below steps.</span></span><br />
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white; font-size: 14.85px;"><br /></span></span>
<br />
<ul style="text-align: left;">
<li><b>Make sure you will have node version 10.13 or later version</b>. I would advice use latest version that is Node 12.</li>
<li>Make sure you will have your angular-cli at 8 ( You can <b>check angular version by ng --version</b> command).</li>
<li>After that update your angular-cli to latest version using <b>ng update @angular/cli</b></li>
<li>After upgradation of angular-cli please update your angular/core package using <b>ng update @angular/core </b>command</li>
<li>Now you can check that you will have angular9 installed using ng--version.</li>
</ul>
<div>
<div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;">
<div style="box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; margin-bottom: 16px;">
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">Hope you enjoyed the article and it got added something new to your knowledge.</span></div>
<div style="box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; margin-bottom: 16px;">
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">To Learn more about Javascript </span><a href="http://www.visionfortech.com/p/javascript.html" style="color: #1c005f; font-family: verdana, geneva, sans-serif; font-size: 14.85px; text-decoration-line: none;" target="_blank">Javascript Treasure</a><span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">.</span></div>
<div>
<span style="font-family: "verdana" , "geneva" , sans-serif;">To add something new every-time into your mind stay tuned to <a href="http://www.visionfortech.com/" style="color: #1c005f; text-decoration-line: none;" target="_blank">visionfortech</a>.</span></div>
</div>
<div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><br /></span></div>
<div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;">
<span style="font-family: "verdana" , "geneva" , sans-serif;">Enjoy......!!!<br />Happy Learning.....!!!</span></div>
</div>
</div>
<div>
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white; font-size: 14.85px;"><br /></span></span></div>
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-89106771105956149362020-03-21T04:02:00.003-07:002020-03-28T03:59:56.309-07:00 Top New Features introduced into Angular 9 / What's majorly new in Angular 9<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal; margin: 0.5em 0px; position: relative; text-align: center; text-transform: uppercase;">
<span style="color: blue;"><span style="background-color: yellow;"><u>what's new into Angular 9 or Features into Angular 9</u></span></span></h2>
<div>
<span style="color: blue;"><span style="background-color: yellow;"><u><br /></u></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-7Niyg10pRlk/XnXSPTlAJ0I/AAAAAAAAN_w/9yf1lc2a4zQboV3YLKn__DZ5a-cZ4ZaswCLcBGAsYHQ/s1600/angular_9_visionfortech.com.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="694" data-original-width="1147" height="241" src="https://1.bp.blogspot.com/-7Niyg10pRlk/XnXSPTlAJ0I/AAAAAAAAN_w/9yf1lc2a4zQboV3YLKn__DZ5a-cZ4ZaswCLcBGAsYHQ/s400/angular_9_visionfortech.com.PNG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<span style="color: blue;"><span style="background-color: yellow;"><u><br /></u></span></span></div>
<div>
<span style="color: blue;"><span style="background-color: yellow;"><u><br /></u></span></span></div>
<div>
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">If you would like to know the features or new things which got introduced into Angular 9 then you are at the right place. Here into this article we are going to discuss what are the new things got introduced into Angular 9 or what are the features got introduced into Angular 9</span></div>
<div>
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;"><br /></span></div>
<div>
<pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><h2 style="margin: unset; text-align: left;">
<u style="background-color: white; color: blue;">Angular Features</u></h2>
<ol style="background-color: white; display: grid; margin: unset; text-align: left;">
<li><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace;"><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Default Ivy Compiler</b></span></span></li>
<li><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace;"><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Smaller Bundles and Performance</b></span></span></li>
<li><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace;"><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Typescript 3.7 Support</b></span></span></li>
<li><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace;"><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Service Worker Updates </b></span></span></li>
<li><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace;"><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Enables the AOT compiler on by default</b></span></span></li>
<li><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace;"><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>i18n Improvements</b></span></span></li>
<li><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace;"><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Need for Faster Mobile Apps</b></span></span></li>
<li><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace;"><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Changes with Angular Forms</b></span></span></li>
<li><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace;"><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Dependency Injection Changes in Core</b></span></span></li>
<li><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace;"><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Lazy load Angular components</b></span></span></li>
<li><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace;"><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>Angular Component Updates</b></span></span></li>
<li><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace;"><span style="font-size: 14.4px; letter-spacing: 0.4px;"><b>API Extractor Updates</b></span></span></li>
</ol>
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px; white-space: normal;"><b><span style="background-color: white;">
</span><span style="background-color: white;"></span></b></span></span></pre>
<h4 style="text-align: left;">
<span style="color: blue;"><span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;"><br /></span></span></span></h4>
<h4 style="text-align: left;">
<span style="color: blue;"><span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="color: blue; font-size: 14.85px;">Default Ivy Compiler</span></span></span></h4>
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">The more awaited very big new feature Ivy compiler is available default for Angular 9, which will make sure to make your angular apps built with Ivy are faster and more efficient. So user won't require to add any compiler options in tsconfig.json file to enable Ivy like Angular 8.</span></div>
<h4 style="text-align: left;">
<span style="color: blue;"><span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;"><br /></span></span></span></h4>
<h4 style="text-align: left;">
<span style="color: blue;"><span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="color: blue; font-size: 14.85px;">Smaller Bundles and Performance</span></span></span></h4>
<div>
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;">Into Angular 9 IVY complier make sure that you Angular Application production bundle will have lower size in result we can faster build generation and the performance for the same application will get increased</span></span></div>
<h4 style="text-align: left;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;"><br /></span></span></h4>
<h4 style="text-align: left;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white; color: blue; font-size: 14.85px;">Service Worker Updates</span></span></h4>
<div>
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">In current version of Angular 9, for service workers the deprecated versioned files option in the service worker asset group config has been removed. This means that your new ngsw-config.json file that looked like below file:</span></span></div>
<div>
<pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div style="font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px; text-align: left;">
<span style="font-size: 11.85px;">"assetGroups": [ </span></div>
<span style="font-size: 11.85px font-family: "verdana" , "geneva" , sans-serif;"> {
"name": "visionfortech",
"resources": {
"versionedFiles": [
"/**/*.txt"
]
}
}
]<span style="background-color: white; font-size: 11.85px;"> </span><span style="font-size: 11.85px;">
</span></span></pre>
<span style="font-family: "verdana" , "geneva" , sans-serif;">
</span></div>
<h4 style="text-align: left;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px; font-weight: normal;">will now look something like below</span></span></h4>
<div>
<pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><div style="font-family: verdana, geneva, sans-serif;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;"><span style="font-size: 11.85px;">"assetGroups": [ </span></span></span></div>
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;"><span style="font-size: 11.85px font-family: "verdana" , "geneva" , sans-serif;"> {
"name": "visionfortech",
"resources": {
"files": [
"/**/*.txt"
]
}
}
]<span style="background-color: white; font-size: 11.85px;"> </span></span></span></span></pre>
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;">
</span></span></div>
<h4 style="text-align: left;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;"></span></span></h4>
<h4 style="text-align: left;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="color: blue; font-size: 14.85px;"><br /></span></span></h4>
<h4 style="text-align: left;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="color: blue; font-size: 14.85px;">i18n Improvements</span></span></h4>
<div>
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">Angular a JavaScript framework is supporting internationalization, and with the Angular CLI you can generate standard codes that will help create translator files so that your angular application can be published in multiple languages. This process has been even further refactored by the Angular team on Ivy to make it easier by adding compile-time inlining.</span></span></div>
<div>
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;"><br /></span></span></div>
<h4 style="text-align: left;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;"></span></span></h4>
<h4 style="text-align: left;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="color: blue; font-size: 14.85px;">Changes with Angular Forms</span></span></h4>
<div>
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">Into Angular 9 there are some more changes related to Angular Form. First change is <b><ngForm></ngForm> is no longer supported</b> for Angular Form instead you need to <b>use <ng-form></ng-form></b>.Second, <b>the FormsModule.withConfig is no longer supported</b> instead you have to<b> use FormsModule directly</b>.</span></span></div>
<div>
<br />
<span style="font-family: "verdana" , "geneva" , sans-serif;"></span>
<span style="font-family: "verdana" , "geneva" , sans-serif;">
</span>
<br />
<h4 style="font-family: "Times New Roman";">
<span style="font-family: "verdana" , "geneva" , sans-serif;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="color: blue; font-size: 14.85px;">Angular Component Updates</span></span></span></h4>
<span style="font-family: "verdana" , "geneva" , sans-serif;">
</span>
<br />
<div style="font-family: verdana, geneva, sans-serif;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;">There is an upgrade for the @angular/cdk on Hammer.js, which allows to include gesture support and was needed if you chose to use the CDK. It's possible now. You can import it with this below command optionally:</span></span></div>
<span style="font-family: "verdana" , "geneva" , sans-serif;">
</span>
<br />
<div style="font-family: verdana, geneva, sans-serif;">
<pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><span style="font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;"><b>import "HammerModule" from [@angular/platform-browser]</b>
</span></pre>
</div>
<span style="font-family: "verdana" , "geneva" , sans-serif;">
</span>
<br />
<div>
<div style="font-family: verdana, geneva, sans-serif; font-size: 14.85px;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;"></span></span></span></div>
<h4 style="font-family: "Times New Roman"; font-size: medium;">
<span style="font-family: "verdana" , "geneva" , sans-serif;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;"><span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;"><br /></span></span></span></span></span></h4>
<h4 style="font-family: "Times New Roman"; font-size: medium;">
<span style="font-family: "verdana" , "geneva" , sans-serif;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="color: blue; font-size: 14.85px;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;">Dependency Injection Changes in Core</span></span></span></span></span></h4>
<div>
<div style="font-family: verdana, geneva, sans-serif; font-size: 14.85px;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;"></span></span></span></div>
<h4 style="font-family: "Times New Roman"; font-size: medium;">
<span style="font-family: "verdana" , "geneva" , sans-serif;">
<span style="font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px; font-weight: normal;">The new version of Angular has minor improved for dependency injections. This is not a big change but some support.functionality has been added for the providedIn value section of dependency injections.</span></span></h4>
<div>
<pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><span style="font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;"><b>@Injectable({ providedIn: 'platform' }) class VisionfortechService {...}</b></span></pre>
</div>
<div style="font-family: verdana, geneva, sans-serif;">
<ol style="text-align: left;"><span style="font-family: "verdana" , "geneva" , sans-serif;">
<li><span style="font-family: "verdana" , "geneva" , sans-serif;"><div>
<b style="font-size: 14.85px;">Platform : </b><span style="font-size: 14.85px;">Specifying providedIn: 'platform' makes the service available on a special singleton platform injector that is used by all applications on the page.</span><span style="font-family: "verdana" , "geneva" , sans-serif;"></span><br />
<span style="font-family: "verdana" , "geneva" , sans-serif;">
</span></div>
</span></li>
<li><span style="font-family: "verdana" , "geneva" , sans-serif;"><div>
<span style="font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;"><b>Any : </b></span><span style="font-size: 14.85px;">Provides a unique instance in each module (including lazy modules) that injects the token.</span><span style="font-family: "verdana" , "geneva" , sans-serif;"></span><br />
<span style="font-family: "verdana" , "geneva" , sans-serif;">
</span></div>
</span></li>
</span></ol>
</div>
<h4 style="font-family: "Times New Roman"; font-size: medium;">
<span style="font-family: "verdana" , "geneva" , sans-serif;">
<span style="color: blue; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;"><br /></span></span></h4>
<h4 style="font-family: "Times New Roman"; font-size: medium;">
<span style="font-family: "verdana" , "geneva" , sans-serif;">
<span style="color: blue; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">Enables the AOT(Ahead-of-time) compiler on by default</span></span></h4>
</div>
</div>
<span style="font-family: "verdana" , "geneva" , sans-serif;">
</span></div>
<div>
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">In the current IVY architecture, we see a so many changes in the compiler's performance. This means that the AOT(Ahead-of-time) builds will be noticeably faster. The change in the compiler and runtime, will no longer require entryComponents. and ng serve. These components in latest version of Angular 9 will compile automatically depending on their usage.</span></span></div>
<h4 style="font-family: "Times New Roman"; font-size: medium;">
</h4>
<h4 style="text-align: left;">
<span style="font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;"><div style="font-family: "Times New Roman"; font-size: medium; font-weight: 400;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;"><span style="font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;"><span style="font-size: 14.85px;"></span></span></span></span><br />
<div style="font-family: verdana, geneva, sans-serif; font-size: 14.85px;">
</div>
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;">
</span></span>
<br />
<div style="font-family: verdana, geneva, sans-serif; font-size: 14.85px;">
</div>
</div>
<div style="font-weight: 400;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;"></span></span></div>
</span></h4>
<h4 style="font-family: "Times New Roman"; font-size: medium;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="color: blue; font-size: 14.85px;"><span style="font-family: "verdana" , "geneva" , sans-serif;"><span style="font-size: 14.85px;">Need for Faster Mobile Apps</span></span></span></span></h4>
<div style="font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">
Now a days mobile usage is rapidly growing around the quarter of the website traffic is made up of phones and other mobile devices. Some percentage of these mobile devices is going to access web pages from slow internet connections. Its important to decrease downloadable resources and increase mobile user experience,to get that Ivy helps in speed application startup by reducing the size of JavaScript classes.<br />
<br />
<div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif;">
<div style="box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; margin-bottom: 16px;">
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">Hope you enjoyed the article and it got added something new to your knowledge.</span></div>
<div style="box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; margin-bottom: 16px;">
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">To Learn more about Javascript </span><a href="http://www.visionfortech.com/p/javascript.html" style="color: #1c005f; font-family: verdana, geneva, sans-serif; font-size: 14.85px; text-decoration-line: none;" target="_blank">Javascript Treasure</a><span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">.</span></div>
<div>
<span style="font-family: "verdana" , "geneva" , sans-serif;">To add something new every-time into your mind stay tuned to <a href="http://www.visionfortech.com/" style="color: #1c005f; text-decoration-line: none;" target="_blank">visionfortech</a>.</span></div>
</div>
<div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif;">
<span style="font-family: "verdana" , "geneva" , sans-serif;"><br /></span></div>
<div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif;">
<span style="font-family: "verdana" , "geneva" , sans-serif;">Enjoy......!!!<br />Happy Learning.....!!!</span></div>
</div>
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-55014235496945343692020-02-21T05:44:00.000-08:002020-02-21T05:44:30.441-08:00[Solution] Invoking generator for vue-cli-plugin-nativescript-vue... ERROR Error: Cannot find module '@vue/cli-service/generator/template/src/main.js'<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<span style="background-color: yellow; color: blue;"><u>[Solution] Invoking generator for vue-cli-plugin-nativescript-vue... ERROR Error: Cannot find module '@vue/cli-service/generator/template/src/main.js'</u></span></h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-lK-EH2v--p4/Xk_eJOPzKtI/AAAAAAAANRM/hwYNEBakEOYIjktIqCmTOK5SPGQUc2oYwCLcBGAsYHQ/s1600/nativescript-vue-generator-error.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="visionfortech nativescript-vue" border="0" data-original-height="164" data-original-width="307" src="https://1.bp.blogspot.com/-lK-EH2v--p4/Xk_eJOPzKtI/AAAAAAAANRM/hwYNEBakEOYIjktIqCmTOK5SPGQUc2oYwCLcBGAsYHQ/s1600/nativescript-vue-generator-error.jpg" title="[Solution] Invoking generator for vue-cli-plugin-nativescript-vue... ERROR Error: Cannot find module '@vue/cli-service/generator/template/src/main.js'" /></a></div>
<span style="background-color: yellow; color: blue;"><u><br /></u></span></div>
<div>
If you are facing "Invoking generator for vue-cli-plugin-nativescript-vue... ERROR Error: Cannot find module '@vue/cli-service/generator/template/src/main.js" error while working with vue-cli-nativescriot-vue plugin So you are at the correct place.<br /><br />I have found a solution for the same and below is the solution.<br />
<br />
<div style="background-color: white; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; margin-bottom: 16px;">
Please follow below steps to get it resolved.<br style="box-sizing: border-box;" />Please <span style="box-sizing: border-box; font-weight: 600;">remove npm and npm-cache folder</span> from your computer's below location.</div>
<div style="background-color: white; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; margin-bottom: 16px;">
<span style="box-sizing: border-box; font-weight: 600;">Windows :</span><br style="box-sizing: border-box;" />C:\Users\AppData\Roaming.</div>
<div style="background-color: white; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; margin-bottom: 16px;">
<span style="box-sizing: border-box; font-weight: 600;">Linux/Ubuntu:</span><br style="box-sizing: border-box;" />/usr/local</div>
<div style="background-color: white; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; margin-bottom: 16px;">
Then Follow below steps<br style="box-sizing: border-box;" /><span style="box-sizing: border-box; font-weight: 600;">1) npm install -g @vue/cli@3.10.0<br style="box-sizing: border-box;" />2) Go to code sharing project Directory's root folder location where you have package.json<br style="box-sizing: border-box;" />3)npm install --save-dev @vue/cli-service@3.5.0<br style="box-sizing: border-box;" />4)npm install --save-dev vue-cli-plugin-nativescript-vue@0.0.12<br style="box-sizing: border-box;" />5)vue invoke vue-cli-plugin-nativescript-vue</span> after that it will ask you for some user input and i provided below inputs.</div>
<div style="background-color: white; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; margin-bottom: 16px;">
? Enter a unique application identifier: org.nativescript.application<br style="box-sizing: border-box;" />? Use HTML5 history mode? (Default: hash mode) No<br style="box-sizing: border-box;" />? Is this a brand new project? (Default: Yes) Yes<br style="box-sizing: border-box;" />? Dual Native AND Web development experience or a Native only? (Default: Dual) Dual Native AND Web<br style="box-sizing: border-box;" />? What type of template do you want to start with? (Default: Simple) Simple.<br /><br />So by following above steps you will be able to resolve the above error..<br /><br />If anyone is still facing the same issue please comment that into the post i will happy to help them to get that resolved.</div>
<div style="background-color: white; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; margin-bottom: 16px;">
<span style="color: #1f1f1f; font-family: verdana, geneva, sans-serif; font-size: 14.85px;">Hope you enjoyed the article and it got added something new to your knowledge.</span></div>
<div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;">
<span style="font-family: verdana, geneva, sans-serif;">To add something new every-time into your mind stay tuned to <a href="http://www.visionfortech.com/" style="color: #1c005f; text-decoration-line: none;" target="_blank">visionfortech</a>.</span></div>
</div>
<div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;">
<span style="font-family: verdana, geneva, sans-serif;"><br /></span></div>
<div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;">
<span style="font-family: verdana, geneva, sans-serif;">Enjoy......!!!<br />Happy Learning.....!!!</span></div>
<div style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;">
<span style="font-family: verdana, geneva, sans-serif;"><br /></span></div>
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-80564827708693920072019-01-24T07:05:00.001-08:002019-01-24T07:05:32.741-08:00Angularjs forms and models<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<u><span style="background-color: yellow; color: blue;">forms and models</span></u></h2>
<br />
now into review i want to insert a review form to get review from users so lets start to insert form into review tab<br />
<br />
Into the form of review tab we are going get how much starts user want to give for our product and what are the reviews and what author gives the review.i want all above information.<br />
<br />
Into HTML<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><form name="reviewForm><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><blockquote><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><b>Stars : {{review.stars}}</b><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>{{review.body}}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><author>by : {{review.author}}</author><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></blockquote><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><select ng-model="review.stars"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="1">1 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="2">2 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="3">3 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="4">4 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="5">5 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></select><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><textarea ng-model="review.body"></textarea><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><label>by : </label><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><input ng-model="review.author" type="email" /><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></form><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>so in above code we can't define review variable anywhere so better coding prctise we need to define that so for that we need to intialize that and commonly intialization can be done into the controller so lets create the Controller.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>App.js<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>app.controller("reviewController",function(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>this.review={}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>So,now we need to bind this review Controller into our form so for that we need to do the Following.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Into HTML<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><form name="reviewForm ng-controller="reviewController as reviewCtrl"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><blockquote><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><b>Stars : {{review.stars}}</b><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>{{reviewCtrl.review.body}}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><author>by : {{reviewCtrl.review.author}}</author><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></blockquote><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><select ng-model="reviewCtrl.review.stars"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="1">1 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="2">2 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="3">3 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="4">4 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="5">5 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></select><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><textarea ng-model="reviewCtrl.review.body"></textarea><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><label>by : </label><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><input ng-model="reviewCtrl.review.author" type="email" /><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></form><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>So after filling needed information we need to submit the form and into Angular we have a ng-submit directive<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>ng-submit allows us to call a function when the form is submitted and after that we need to define that function into our ReviewController.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>So into HTML :<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><form name="reviewForm ng-controller="reviewController as reviewCtrl" ng-submit="reviewCtrl .addReview(product)"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><blockquote><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><b>Stars : {{review.stars}}</b><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>{{reviewCtrl.review.body}}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><author>by : {{reviewCtrl.review.author}}</author><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></blockquote><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><select ng-model="reviewCtrl.review.stars"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="1">1 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="2">2 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="3">3 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="4">4 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><option value="5">5 Star </option><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></select><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><textarea ng-model="reviewCtrl.review.body"></textarea><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><label>by : </label><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><input ng-model="reviewCtrl.review.author" type="email" /><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></form><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>So now we have to define this addReview function into ReviewController.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>So Into app.js<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>app.controller("ReviewController",function(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>this.review={};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>this.addReview=function(product)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>product.review.push(this.review); <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>But when we went to browser and input our review and after submitting the form container which has all the input controller are not getring blank or we can say resetted so for that we just need to add one line into the addReview function of reviewController.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>So Into app.js<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>app.controller("ReviewController",function(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>this.review={};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>this.addReview=function(product)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>product.review.push(this.review);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>this.review={};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>So what it can do is when this form is getting submitted and when this function got called so after pushing review into array we can assign a new javascript object to the review object which is blank.So after getting submitted the element's values will get reset.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
form<br />
1)You need to create multiple li's for each review that exists.<br />
2)Set the blockquote stars ( strong tag) to the review stars.<br />
3)Add the review body between the strong & cite tags.<br />
4)Set the cite to the review author.<br />
5)Use ng-model for review.stars select form field.<br />
6)Use ng-model for review.body for the forms textarea.<br />
7)Use ng-model for review.author – the email field.<br />
8)In the strong tag, before Stars, put in the right expression to display review.stars. Keep the space prior to Stars<br />
9)On the blank line with no tags put in the right expression to display review.body<br />
10)In the cite tag, immediately after the -, put in the right expression to display review.author. </div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-50793415784542105802018-10-16T11:31:00.000-07:002018-10-17T23:02:22.239-07:00Javascript JSON to string<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<span style="background-color: yellow; color: blue;"><u>Javascript JSON to string</u></span></h2>
<div>
<span style="background-color: yellow; color: blue;"><u><br /></u></span></div>
<div>
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">Into this post we are going to discuss how to convert Javascript JSON ( Javascript Object Notation ) to string or javascript json to string.</span></div>
<div>
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;"><br /></span></div>
<div style="orphans: 2; widows: 2;">
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white;"><span style="font-size: 15px;">Into this kind real IT world we can say Javascript is everywhere like front end and BackEnd both so we can say Javascript is going to rule everywhere.</span></span></span></div>
<div style="orphans: 2; widows: 2;">
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white;"><span style="font-size: 15px;"><br /></span></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-Hm86_o0-zcw/W8YmgtKbOcI/AAAAAAAAJ0Q/kRU3PMAHeXMQo9M8nmITst_uJ5XGRhrbgCLcBGAs/s1600/json-to-string-visionfortech.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Javascript JSON to String by visionfortech , Javascript blog" border="0" data-original-height="256" data-original-width="256" height="320" src="https://2.bp.blogspot.com/-Hm86_o0-zcw/W8YmgtKbOcI/AAAAAAAAJ0Q/kRU3PMAHeXMQo9M8nmITst_uJ5XGRhrbgCLcBGAs/s320/json-to-string-visionfortech.jpg" title="Javascript JSON to String" width="320" /></a></div>
<div style="orphans: 2; widows: 2;">
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white;"><span style="font-size: 15px;"><br /></span></span></span></div>
<div style="orphans: 2; widows: 2;">
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white;"><span style="font-size: 15px;">So in today's article we are going to discuss JSON which generally uses to pass data from one end to another end.</span></span></span></div>
<div style="orphans: 2; widows: 2;">
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white;"><span style="font-size: 15px;"><br /></span></span></span></div>
<div style="orphans: 2; widows: 2;">
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white;"><span style="font-size: 15px;">Let start understanding of that using below simple examples.</span></span></span></div>
<div style="orphans: 2; widows: 2;">
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white;"><span style="font-size: 15px;"><br /></span></span></span></div>
<div style="orphans: 2; widows: 2;">
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white;"><span style="font-size: 15px;">So into Javascript we can do that easily using JSON.stringify().</span></span></span></div>
<div style="orphans: 2; widows: 2;">
<span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><span style="background-color: white;"><span style="font-size: 15px;"><br /></span></span></span></div>
<div style="orphans: 2; widows: 2;">
<pre class="literal-block" style="background-color: white; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: menlo, monaco, consolas, 'courier new', monospace; font-size: 0.9em; font-variant-ligatures: normal; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><b>First let's take and example of Object
</b>
let json_to_string = <span style="font-size: 0.9em; letter-spacing: 0.4px;">JSON.stringify({ javascript_json: 5, json_to_string: 6 })</span>
console.log(<span style="font-size: 0.9em; letter-spacing: 0.4px;">json_to_string</span><span style="font-size: 0.9em; letter-spacing: 0.4px;">);
</span>//output: "{"<span style="font-size: 0.9em; letter-spacing: 0.4px;">javascript_json</span><span style="font-size: 0.9em; letter-spacing: 0.4px;">":5,"</span><span style="font-size: 0.9em; letter-spacing: 0.4px;">json_to_string</span><span style="font-size: 0.9em; letter-spacing: 0.4px;">":6}"</span></pre>
</div>
<div style="orphans: 2; widows: 2;">
<pre class="literal-block" style="background-color: white; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: menlo, monaco, consolas, 'courier new', monospace; font-size: 0.9em; font-variant-ligatures: normal; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><b>Now let's take an example of run time creation of Array of Object
</b>let json_to_string = JSON.stringify([new String('visiofortech'),new Boolean(false),new Number(7)])
console.log(json_to_string);
//output: "["<span style="font-size: 0.9em; letter-spacing: 0.4px;">visiofortech</span><span style="font-size: 0.9em; letter-spacing: 0.4px;">",false,7}"</span></pre>
</div>
<div style="orphans: 2; widows: 2;">
<pre class="literal-block" style="background-color: white; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: menlo, monaco, consolas, 'courier new', monospace; font-size: 0.9em; font-variant-ligatures: normal; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow-wrap: normal; overflow: auto; padding: 6px 10px; word-break: break-all;"><b>Now let's take an example of Date object
</b>let json_to_string = JSON.stringify(new Date(2018, 10, 16, 15, 4, 5))
console.log(json_to_string);
//output: ""2018-11-16T09:34:05.000Z""</pre>
</div>
<div style="orphans: 2; widows: 2;">
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 15.600000381469727px;"><br /></span></div>
<div style="orphans: 2; widows: 2;">
<span style="background-color: white;"><span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;">Hope you enjoyed the article and it got added something new to your knowledge.</span></span></div>
<div style="orphans: 2; widows: 2;">
<span style="background-color: white;"><span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;">To add something new every-time into your mind stay tuned to <a href="http://www.visionfortech.com/" target="_blank">visionfortech</a>.</span></span></div>
<div style="orphans: 2; widows: 2;">
<span style="background-color: white;"><span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><br /></span></span></div>
<div style="orphans: 2; widows: 2;">
<span style="background-color: white;"><span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;">To Learn more about Javascript <a href="http://www.visionfortech.com/p/javascript.html" target="_blank">Javascript Treasure</a>.</span></span></div>
<div style="orphans: 2; widows: 2;">
<span style="background-color: white;"><span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><br /></span></span></div>
<div style="orphans: 2; widows: 2;">
<span style="background-color: white;"><span style="color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;">Please comment below if you have something doubts or some questions.</span></span></div>
<div style="orphans: 2; widows: 2;">
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;"><br /></span></div>
<div style="orphans: 2; widows: 2;">
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;">Enjoy...!!!</span></div>
<div style="orphans: 2; widows: 2;">
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif;">Happy Learning....!!!</span></div>
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-87993496272822299412018-09-13T07:22:00.000-07:002018-11-20T06:49:45.263-08:00Javascript Global and Local Variables<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<span style="background-color: yellow; color: blue;"><u>Javascript Global and Local Variables</u></span></h2>
<div>
<br /></div>
<div>
Into this post we are going to discuss difference between how to declare javascript global variable and javascript local variable and its scope<br />
<br /></div>
<div>
we are going to discuss how can we declare global variable and local varible into Javascript with example.<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-cuIuuGCjjJk/W8Lkm4mIk-I/AAAAAAAAJy8/LZgJ7YWwCNU7qWFODd5hElffouGsom75QCLcBGAs/s1600/Javascript_global_variable_vs_local_variable_visionfortech.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Javascript global variable vs local variable by visionfortech" border="0" data-original-height="378" data-original-width="770" height="196" src="https://4.bp.blogspot.com/-cuIuuGCjjJk/W8Lkm4mIk-I/AAAAAAAAJy8/LZgJ7YWwCNU7qWFODd5hElffouGsom75QCLcBGAs/s400/Javascript_global_variable_vs_local_variable_visionfortech.png" title="Javascript global variable vs local variable" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Javascript global variable vs local variable by visionfortech</td></tr>
</tbody></table>
<br />
<br />
<div>
<b><u><span style="background-color: yellow; color: blue;">Javascript Global Variable:</span></u></b><br />
<b><br /></b>If we define var and let variable same globally then let variable will not get added into global window object while var variable will get added to global window object.<br />
<div style="background-color: white; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<br /></div>
<div style="background-color: white; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px; white-space: pre;">
So let's declare two variables at the time of window loaded</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 1em; margin-top: 1em;">
<pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;"><span style="background-color: white;">let Visionfortech_global = "Visionfortech is defined as Global variable"
var Visionfortech_local = "Visionfortech is defined as Local variable"
console.log(Visionfortech_global);
o/p : undefined
console.log(Visionfortech_local);
o/p : Visionfortech is defined as Local variable
</span></pre>
</div>
<br />
<b><u><span style="background-color: yellow; color: blue;">Javascript Local </span></u></b><b><u><span style="background-color: yellow; color: blue;">Variable</span></u></b><b><u><span style="background-color: yellow; color: blue;"> : </span></u></b></div>
<div style="box-sizing: border-box; margin-bottom: 1em; margin-top: 1em;">
<pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;"><span style="background-color: white;">let js_local_variable = 1;
if (js_local_variable === 1) {
let js_local_variable = 2;
console.log(js_local_variable);
// output: 2
}
console.log(js_local_variable);
// output: 1
</span><span style="background-color: #f8f8f8;">
</span></pre>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Now let see the scope example of <span style="color: blue;"><span style="background-color: yellow;"><b><u>Javascript global and Local variable</u></b></span></span>.<br />
<br />
<pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;"><div style="font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px;">
<div style="color: black;">
<span style="background-color: white;">var global_variable = <span style="color: #09885a;">1</span>;</span></div>
<div style="color: black;">
<span style="background-color: white;">var javascript_global_variable = <span style="color: #09885a;">2</span>;</span></div>
<div style="color: black;">
<span style="background-color: white;"> </span></div>
<div style="color: black;">
<span style="background-color: white;">if (a === 1) {</span></div>
<div>
<span style="background-color: white;"> <span style="color: blue;">var</span> </span><span style="background-color: white; letter-spacing: 0.4px;">global_variable</span><span style="background-color: white;"> = <span style="color: #09885a;">11</span>; <span style="color: green;">// the scope is global</span></span></div>
<div style="color: black;">
<span style="background-color: white;"> <span style="color: blue;">let</span> </span><span style="background-color: white; letter-spacing: 0.4px;">javascript_global_variable</span><span style="background-color: white;"> = <span style="color: #09885a;">22</span>; <span style="color: green;">// the scope is inside the if-block</span></span></div>
<div style="color: black;">
<span style="background-color: white;"> </span></div>
<div style="color: black;">
<span style="background-color: white;"> console.log(</span><span style="background-color: white; letter-spacing: 0.4px;">global_variable</span><span style="background-color: white;">); <span style="color: green;">// 11</span></span></div>
<div style="color: black;">
<span style="background-color: white;"> console.log(</span><span style="background-color: white; letter-spacing: 0.4px;">javascript_global_variable</span><span style="background-color: white;">); <span style="color: green;">// 22</span></span></div>
<div style="color: black;">
<span style="background-color: white; letter-spacing: 0.4px;">} </span><span style="background-color: white; letter-spacing: 0.4px;"> </span></div>
<div style="color: black;">
<span style="background-color: white;">console.log(</span><span style="background-color: white; letter-spacing: 0.4px;">global_variable</span><span style="background-color: white;">); <span style="color: green;">// 11</span></span></div>
<div style="color: black;">
<span style="background-color: white;">console.log(</span><span style="background-color: white; letter-spacing: 0.4px;">javascript_global_variable</span><span style="background-color: white;">); <span style="color: green;">// 2</span></span><span style="background-color: white; color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace; font-size: 0.9em; letter-spacing: 0.4px;"> </span></div>
</div>
</pre>
<br />
Enjoy....!!!!<br />
<br />
Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.<br />
<br />
If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to <a href="http://www.visionfortech.com/" target="_blank">Visionfortech</a></div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-72814807886691156382018-08-10T00:20:00.000-07:002018-09-20T00:34:38.394-07:00Javascript let vs var<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h2 style="text-align: center;">
<span style="background-color: yellow; color: blue;"><u>
Javascript Let vs Var</u></span></h2>
<div>
<br /></div>
<div>
Into this post we are going to discuss difference between <b>Javascript var and Let.</b></div>
<div>
<b><br /></b></div>
<div>
we are going to discuss about Javascipt variable declaration method like where user can declare variable with var and where user can declare variable with let.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-tkYynNxRzmg/W21E_gOrPiI/AAAAAAAAHFY/s3_3e_d9pDAAW6Db4LqrQxNHAqLrkRMHgCLcBGAs/s1600/javascript_let_vs_var_by_visionfortech.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1056" data-original-width="706" height="389" src="https://4.bp.blogspot.com/-tkYynNxRzmg/W21E_gOrPiI/AAAAAAAAHFY/s3_3e_d9pDAAW6Db4LqrQxNHAqLrkRMHgCLcBGAs/s400/javascript_let_vs_var_by_visionfortech.png" width="350" /></a></div>
<br />
<br />
<div>
<b><u><span style="background-color: yellow; color: blue;">Global Variable Declaration:</span></u></b><br />
<b><br /></b>
If we define var and let variable same globally then let variable will not get added into global window object while var variable will get added to global window object.<br />
<div style="background-color: white; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<br /></div>
<div style="background-color: white; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px; white-space: pre;">
So let's declare two variables at the time of window loaded</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 1em; margin-top: 1em;">
<pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;"><span style="background-color: white;">let Visionfortech_let = "Visionfortech is defined as let variable"
var Visionfortech_var = "Visionfortech is defined as var variable"
console.log(Visionfortech_let);
o/p : undefined
console.log(Visionfortech_var);
o/p : Visionfortech is defined as var variable
</span></pre>
</div>
<b><br /><span style="background-color: yellow;"><span style="color: blue;"><u>Redeclare Variable:</u></span></span></b><br />
<br />
So Here let's discuss about one more example of let vs var into Javascript.You can not declare let variable but you can redeclare var variable<br />
<br />
<br />
<pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;"><div style="color: black; font-family: menlo, monaco, "courier new", monospace; font-size: 12px; line-height: 18px;">
<div>
<span style="background-color: white;"><span style="color: #a31515;">'use strict'</span>;</span></div>
<div>
<span style="background-color: white;">var let_vs_var = <span style="color: #a31515;">"Javascript let vs var"</span>;</span></div>
<div>
<span style="background-color: white;">var <span style="letter-spacing: 0.4px;">let_vs_var</span> = <span style="color: #a31515;">"Difference Between let and var Javascript"</span>;
//replaced easily</span></div>
</div>
<span style="background-color: white;">
</span><div style="color: black; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; letter-spacing: 0.4px;">
<span style="background-color: white;"><span style="color: #a31515;">'use strict'</span>;</span></div>
<div style="color: black; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; letter-spacing: 0.4px;">
<span style="background-color: white;">let let_vs_var = <span style="color: #a31515;">"Javascript let vs var"</span>;</span></div>
<div style="color: black; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; letter-spacing: 0.4px;">
<span style="background-color: white;">let <span style="letter-spacing: 0.4px;">let_vs_var</span> = <span style="color: #a31515;">"Difference Between let and var Javascript"</span>;
// Error: <span style="letter-spacing: 0.4px;">let_vs_var is already declared</span></span></div>
<span style="background-color: #f8f8f8;">
</span></pre>
<br />
<b><u><span style="background-color: yellow; color: blue;">Javascript Let Example : </span></u></b></div>
<div style="box-sizing: border-box; margin-bottom: 1em; margin-top: 1em;">
<pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;"><span style="background-color: white;">let vision = 1;
if (vision === 1) {
let vision = 2;
console.log(vision);
// output: 2
}
console.log(vision);
// output: 1
</span><span style="background-color: #f8f8f8;">
</span></pre>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Now let see the scope example of <span style="background-color: yellow;"><span style="color: blue;"><u><b>Javascript let vs var</b></u></span></span>.<br />
<br />
<pre class="literal-block" style="border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;"><div style="font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px;">
<div style="color: black;">
<span style="background-color: white;">var let_vs_var = <span style="color: #09885a;">1</span>;</span></div>
<div style="color: black;">
<span style="background-color: white;">var javascript_var = <span style="color: #09885a;">2</span>;</span></div>
<div style="color: black;">
<span style="background-color: white;"> </span></div>
<div style="color: black;">
<span style="background-color: white;">if (a === 1) {</span></div>
<div>
<span style="background-color: white;"> <span style="color: blue;">var</span> </span><span style="background-color: white; letter-spacing: 0.4px;">let_vs_var</span><span style="background-color: white;"> = <span style="color: #09885a;">11</span>; <span style="color: green;">// the scope is global</span></span></div>
<div style="color: black;">
<span style="background-color: white;"> <span style="color: blue;">let</span> </span><span style="background-color: white; letter-spacing: 0.4px;">javascript_var</span><span style="background-color: white;"> = <span style="color: #09885a;">22</span>; <span style="color: green;">// the scope is inside the if-block</span></span></div>
<div style="color: black;">
<span style="background-color: white;"> </span></div>
<div style="color: black;">
<span style="background-color: white;"> console.log(</span><span style="background-color: white; letter-spacing: 0.4px;">let_vs_var</span><span style="background-color: white;">); <span style="color: green;">// 11</span></span></div>
<div style="color: black;">
<span style="background-color: white;"> console.log(</span><span style="background-color: white; letter-spacing: 0.4px;">javascript_var</span><span style="background-color: white;">); <span style="color: green;">// 22</span></span></div>
<div style="color: black;">
<span style="background-color: white; letter-spacing: 0.4px;">} </span><span style="background-color: white; letter-spacing: 0.4px;"> </span></div>
<div style="color: black;">
<span style="background-color: white;">console.log(</span><span style="background-color: white; letter-spacing: 0.4px;">let_vs_var</span><span style="background-color: white;">); <span style="color: green;">// 11</span></span></div>
<div style="color: black;">
<span style="background-color: white;">console.log(</span><span style="background-color: white; letter-spacing: 0.4px;">javascript_var</span><span style="background-color: white;">); <span style="color: green;">// 2</span></span><span style="background-color: white; color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace; font-size: 0.9em; letter-spacing: 0.4px;"> </span></div>
</div>
</pre>
<br />
Enjoy....!!!!<br />
<br />
Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.<br />
<br />
If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to <a href="http://www.visionfortech.com/" target="_blank">Visionfortech</a><br />
<br />
<h3 style="text-align: left;">
<div style="font-size: medium; font-weight: normal;">
<div style="font-size: medium; font-weight: normal;">
</div>
</div>
</h3>
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com2tag:blogger.com,1999:blog-9035752464239680661.post-62610654755340806482017-09-07T02:47:00.002-07:002017-09-07T02:47:52.128-07:00How to prevent remote access of mognodb in windows and linux<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<span style="background-color: yellow; color: blue;"><u>How to prevent remote access of mognodb in windows and linux</u></span></h2>
<div>
This post is all about how to protect your mongodb server of windows or linux from ransomeware attack or we can say mongodb server is accessible only to localhost or 127.0.0.1 not any other location.</div>
<div>
<br /></div>
<div>
Please see the below solution.Hope you will get what you want..!!</div>
<br />
<h4 style="text-align: left;">
<u style="background-color: yellow;"><span style="color: blue;">Into Linux :</span></u></h4>
<span style="white-space: pre;"> </span>To prevent access of mongodb remotelly user need to do some changes into mongodb.conf.So to do that follow below steps.<br />
<br />
<span style="white-space: pre;"> </span>1) Open /etc/mongodb.conf using below command<br />
<span style="white-space: pre;"> </span><b>vi /etc/mongodb.conf</b><br />
<br />
<span style="white-space: pre;"> </span>2) find all the statments which starts with bind_ip.Delete all the sentences.<br />
<br />
<span style="white-space: pre;"> </span>3) Enter Below statment only into /etc/mongodb.conf<br />
<span style="white-space: pre;"> </span><b>bind_ip=12.0.0.1</b><br />
<br />
If user want to give access to some machines or we can say some IP addresses for Application so user can do that by adding below line to /etc/mongod.conf<br />
<b><br /></b>
<b> bind_ip=<ip address></b><br />
<h4 style="text-align: left;">
<span style="background-color: yellow;"><span style="color: blue;"><b><u>Into windows :</u></b></span></span></h4>
<span style="white-space: pre;"> </span>1) First of all user need to turn of the firewall.<br />
<br />
<span style="white-space: pre;"> </span>2) To turn on the firewall follow below steps.<br />
<br />
<span style="white-space: pre;"> </span>*) Open command prompt using CMD<br />
<br />
<span style="white-space: pre;"> </span>*) Run Below command and if it has 0.0.0.0:27017 then any user can access your database remotely.<br />
<span style="white-space: pre;"> </span><b>netstat -a</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-yexqJeBGTH0/WbEQl7bw2aI/AAAAAAAADpQ/BPej198pvScnmX7twiQ3HjOzE5IWKeRdwCLcBGAs/s1600/mognodb_connection_localhost_only.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="554" data-original-width="731" height="300" src="https://2.bp.blogspot.com/-yexqJeBGTH0/WbEQl7bw2aI/AAAAAAAADpQ/BPej198pvScnmX7twiQ3HjOzE5IWKeRdwCLcBGAs/s400/mognodb_connection_localhost_only.png" width="400" /></a></div>
<b><br /></b>
<span style="white-space: pre;"> </span>*) Open Run using start -> Run or press windows+R Key to open Run prompt.<br />
<br />
<span style="white-space: pre;"> </span>*) Write control into run prompt<br />
<br />
<span style="white-space: pre;"> </span>*) It will open Control Pannel.<br />
<br />
<span style="white-space: pre;"> </span>*) Go to Network and sharing center<br />
<br />
<span style="white-space: pre;"> </span>*) Go to Windows firewall<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-_AikiX6ly0o/WbESVGPkl1I/AAAAAAAADpc/HRM2DHU4-twNuDO_fhclrsYKwHBGM5ndACLcBGAs/s1600/mongodb_prevent_access_windows_by_visionfortech.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="701" data-original-width="885" height="300" src="https://1.bp.blogspot.com/-_AikiX6ly0o/WbESVGPkl1I/AAAAAAAADpc/HRM2DHU4-twNuDO_fhclrsYKwHBGM5ndACLcBGAs/s320/mongodb_prevent_access_windows_by_visionfortech.png" width="400" /></a></div>
<br />
<br />
<span style="white-space: pre;"> </span>*) Go to Advance setting<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-9URF8XwuR-Y/WbETY9mfExI/AAAAAAAADpo/Mz-XIBfbnr4v6CQHbgeXOVv17zy7388DQCLcBGAs/s1600/mongodb_prevent_access__for_localhost_windows_by_visionfortech.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="693" data-original-width="1053" height="300" src="https://1.bp.blogspot.com/-9URF8XwuR-Y/WbETY9mfExI/AAAAAAAADpo/Mz-XIBfbnr4v6CQHbgeXOVv17zy7388DQCLcBGAs/s400/mongodb_prevent_access__for_localhost_windows_by_visionfortech.png" width="450" /></a></div>
<br />
<span style="white-space: pre;"> </span>*) Select Inbound Rules and delete all rules related to Mongodb<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/--lxiE6XKnJw/WbEUNBNtxHI/AAAAAAAADpw/NO8ZCSB9NUU4jCmCTWldR3vXa0u9OIhMgCLcBGAs/s1600/delete_firewall_rule_by_visionfortech.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="513" data-original-width="1050" height="250" src="https://1.bp.blogspot.com/--lxiE6XKnJw/WbEUNBNtxHI/AAAAAAAADpw/NO8ZCSB9NUU4jCmCTWldR3vXa0u9OIhMgCLcBGAs/s320/delete_firewall_rule_by_visionfortech.png" width="400" /></a></div>
<br />
*) Again please apply below command to command prompt and you won't be able to see 0.0.0.0:27017 instead of that you will see 127.0.0.1:27017<br />
<br />
So now no outside user will be able to access your mongodb server.Because you have grant access of only localhost or 127.0.0.1 to mongodb server only.<br />
<br />
<br style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;" />
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">Cheers...!!!Enjoy...!!!</span><br />
<br style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;" />
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.</span><br />
<br style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;" />
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to</span><a href="https://visionfortech.blogspot.com/" style="background-color: white; color: #1c005f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px; text-decoration-line: none;"> Visionfortech</a></div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-17103317250311520302017-07-25T07:49:00.000-07:002018-11-20T07:07:13.214-08:00[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: center;">
<u><span style="background-color: yellow; color: blue;">[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive</span></u></h3>
<br />
In this post i am going to discuss about how to remove a jQuery violation "<b>[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive</b>" from chrome console.<br />
<br />
Basically user can remove all the basic violations from just changing the type of log from "Verbose" to "Info".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-37C7o-Md12I/WWNOrwJOqII/AAAAAAAADT4/fMSE_4-LyPAI7qf7SR78qhnORX3M0ekEgCLcBGAs/s1600/console.log.type.by.visionfortech.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="visionfortech,javascript,Pratik Soni" border="0" data-original-height="346" data-original-width="1011" height="217" src="https://1.bp.blogspot.com/-37C7o-Md12I/WWNOrwJOqII/AAAAAAAADT4/fMSE_4-LyPAI7qf7SR78qhnORX3M0ekEgCLcBGAs/s640/console.log.type.by.visionfortech.png" title="change console log type from console" width="580" /></a></div>
<br />
<br />
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b>But what if user want to remove above violation from "Verbose" log Type ?</b><br />
<b>So Here is the solution.</b><br />
<b><br /></b>
<b>Problem : </b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-b6U-6lS5SyI/WWNUkyG_xqI/AAAAAAAADUI/vc43rGfNnzgbU0TRsGQI9caZS5Y7Wb4iwCLcBGAs/s1600/console.violation.visionfortech.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="247" data-original-width="1339" height="118" src="https://2.bp.blogspot.com/-b6U-6lS5SyI/WWNUkyG_xqI/AAAAAAAADUI/vc43rGfNnzgbU0TRsGQI9caZS5Y7Wb4iwCLcBGAs/s640/console.violation.visionfortech.png" width="580" /></a></div>
<b><br /></b>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
The above violation is occur because e.preventDefault() will take much time and it will not passively load the component or we can say DOM.<br />
<br />
So to remove that please include below code on top of your javascript.<br />
<b><br /></b>
<b>Solution :</b><br />
<b><br /></b>
<b>{passive:true}</b><br />
<b><br /></b>
<b>// To remove the violation jquery-1.11.1.min.js:3 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.</b><br />
<br />
jQuery.event.special.touchstart = {<br />
<span style="white-space: pre;"> </span>setup: function( _, ns, handle ){<br />
<span style="white-space: pre;"> </span>if ( ns.includes("noPreventDefault") ) {<br />
<span style="white-space: pre;"> </span> this.addEventListener("touchstart", handle, { passive: false });<br />
<span style="white-space: pre;"> </span>} else {<br />
<span style="white-space: pre;"> </span> this.addEventListener("touchstart", handle, { passive: true });<br />
<span style="white-space: pre;"> </span>}<br />
<span style="white-space: pre;"> </span>}<br />
};<br />
<br />
<b>//Remove violation code End</b><br />
<b><br /></b>
So now run your application and above violation will not appear into console.<br />
<br />
Cheers...!!!Enjoy...!!!<br />
<br />
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.</span><br />
<br style="background-color: white; color: #1f1f1f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px;" />
<span style="color: #1f1f1f; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 14.85px;">I hope this article will provided you solution which you are expecting. If you want to know more about Javascript check out </span><a href="http://www.visionfortech.com/p/javascript.html" style="font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 14.85px;" target="_blank">Javascript World</a><br />
<br />
<span style="background-color: white; color: #1f1f1f; font-family: "verdana" , "geneva" , sans-serif; font-size: 14.85px;">If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to</span><a href="https://visionfortech.blogspot.com/" style="background-color: white; color: #1c005f; font-family: Verdana, Geneva, sans-serif; font-size: 14.85px; text-decoration-line: none;"> Visionfortech</a><br />
<b><br /></b></div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com6Vadodara, Gujarat, India22.3071588 73.18121870000004522.0721388 72.85849520000005 22.5421788 73.50394220000004tag:blogger.com,1999:blog-9035752464239680661.post-45407236968954533612017-06-13T22:03:00.000-07:002017-06-13T22:07:53.042-07:00Bootstrap search drop down list or list with [X] sign to delete element<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<u style="background-color: yellow;"><span style="color: blue;">Bootstrap search drop down list or list with [X] sign to delete element</span></u></h2>
<div>
This post is all about a bootstrap drop down list or we can say list with search facility and delete functionality as well.</div>
<div>
<br /></div>
<div>
In this post we are going to discuss about a component through which user can show the drop down list with search option facility and user also can delete the option by just clicking [X] sign besides every option.So let's see how we can achieve that.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-TQ49gKIkt4A/WUDAZOQ1msI/AAAAAAAADNM/hQG-NuJs3VoeJX2qMsoxzlfVJ4avzgPZQCLcBGAs/s1600/bootstrap%2Bsearch.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bootstrap search drop down list or list with [X] sign to delete element,visionfortech,visionfortech latest blog,visionfortech latest post" border="0" data-original-height="432" data-original-width="567" height="255" src="https://3.bp.blogspot.com/-TQ49gKIkt4A/WUDAZOQ1msI/AAAAAAAADNM/hQG-NuJs3VoeJX2qMsoxzlfVJ4avzgPZQCLcBGAs/s400/bootstrap%2Bsearch.png" title="Bootstrap search drop down list or list with [X] sign to delete element,visionfortech" width="500" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You can see the live demo at <a href="https://jsfiddle.net/visionfortech/99b6an98/">live Demo</a></div>
<div class="separator" style="clear: both; text-align: left;">
Jsfiddle URL : <a href="https://jsfiddle.net/visionfortech/99b6an98/">JSfiddle URL</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h4 style="clear: both; text-align: left;">
<u>The HTML file : </u></h4>
<div class="separator" style="clear: both;">
<div class="dropdown" id="option_dropdown" style="margin-left:20px;margin-top:20px"></div>
<div class="separator" style="clear: both;">
<button class="btn btn-default btn-filter" type="button" id="savedSearch"</div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"> </span>data-toggle="dropdown" data-submenu="" aria-expanded="true" style="word-wrap: break-word;"></div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"> </span><span id="filter_name">Select Language</span> <span class="caret"></span></div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"> </span></button></div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"> </span><ul class="dropdown-menu" id="saveLanguageUl" style="max-height: 315px;overflow-y: scroll;"></ul></div>
<div class="separator" style="clear: both;">
<span class="Apple-tab-span" style="white-space: pre;"> </span></div></div>
<div class="separator" style="clear: both;">
<br /></div>
<h4 style="clear: both; text-align: left;">
JavaScript code :</h4>
<div>
var pra="";<br />
$(document).ready(function(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> $("#saveLanguageUl").empty();<br />
$("#saveLanguageUl").append('<li><input type="text" id="searchFilterInput" placeholder="Search for Language.." title="Type in to searcg language option">');<br />
var language = ["angular.js","backbone.js","d3.js","amcharts.js","jquery.js","bootstrap.js","bootstrap.css","mabbox.js","python","php","ajax","json"];<br />
<br />
for(var i = 0; i < language.length; i++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> $("#saveLanguageUl").append('<li style="height:35px" class=""><a href="#" id='+language[i]+' name='+language[i]+'>'+language[i] +' <span style="float:right;" class="deleteOptionBtn glyphicon glyphicon-remove-sign" title="Delete '+language[i]+' Filter" id='+language[i]+'><br></span></a></li>');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
$("#searchFilterInput").keyup(function(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var input, filter, ul, li, a, i;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>input = document.getElementById("searchFilterInput");<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>filter = input.value.toUpperCase();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>ul = document.getElementById("saveLanguageUl");<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>li = ul.getElementsByTagName("li");<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for (i = 1; i < li.length; i++) {<br />
a = li[i].getElementsByTagName("a")[0];<br />
if(a.name.toUpperCase().includes(filter)){<br />
li[i].style.display = "";<br />
} else {<br />
li[i].style.display = "none";<br />
<br />
}<br />
}<br />
})<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('#saveLanguageUl').on('click', 'a', function(event) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var filterId = $(this).attr('id');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(pra == ""){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$("#filter_name").text(filterId);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>pra = "";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$("#searchFilterInput").val("");<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('#saveLanguageUl').on('click', 'span.deleteOptionBtn', function(event) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var filterId = $(this).attr('id');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>pra = filterId;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).closest("li").remove();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$("#filter_name").text($(this).attr('Select Saved Filter'));<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
});<br />
<h4 style="text-align: left;">
<u><br />CSS Code:</u></h4>
#searchFilterInput {<br />
background-position: 10px 12px;<br />
background-repeat: no-repeat;<br />
width: 100%;<br />
font-size: 16px;<br />
padding: 12px 20px 12px 15px;<br />
border: 1px solid #ddd;<br />
margin-bottom: 12px;<br />
}<br />
<br />
You can see the live demo at <a href="https://jsfiddle.net/visionfortech/99b6an98/">live Demo</a><br />
Jsfiddle URL : <a href="https://jsfiddle.net/visionfortech/99b6an98/">JSfiddle URL</a><br />
<br />
Enjoy...!!!<br />
<br />
Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.<br />
<br />
If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to<a href="https://visionfortech.blogspot.com/"> Visionfortech</a></div>
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-55982938306448985312017-05-10T05:06:00.000-07:002017-05-10T05:06:23.571-07:00Create E commerce website for free in 5 minutes | (with images)<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<b><span style="background-color: yellow; color: blue;"><u>Create E commerce website for free in 5 minutes | (with images)</u></span></b></h2>
<br />
Into this post i am going to discuss some points which are:<br />
How to create E commerce website in 5 minutes.<br />
How user can create a E commerce website in which he/she can do whatever he/she want.<br />
How easy to create a website in few minutes.<br />
<br />
By using opencart you can create your create your own website and most important thing that it is open-source.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-Qo1Jd4I4sLs/WRL_b7h_flI/AAAAAAAADE0/k7tUfLOMZCEWRM-_yILf9qAcuFfB_w3ngCLcB/s1600/opencart-visionfortech.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="visionfortech,best technical blog" border="0" height="255" src="https://1.bp.blogspot.com/-Qo1Jd4I4sLs/WRL_b7h_flI/AAAAAAAADE0/k7tUfLOMZCEWRM-_yILf9qAcuFfB_w3ngCLcB/s320/opencart-visionfortech.PNG" title="visionfortech" width="555" /></a></div>
<br />
<br />
So by following below steps you can create a E Commerce website in few minutes.<br />
1) Install any server(apache,tomcat) and Mysql database.<br />
You can install both of this by just installing one software which is XAMPP.<br />
You can download XAMPP from <a href="https://www.apachefriends.org/download.html" target="_blank">Here</a>.<br />
<br />
2) Download the opencart from <a href="https://github.com/opencart/opencart" target="_blank">Here</a>.or you can download that from opencart website as well.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-nKg-i974dY0/WRL2dOfLBXI/AAAAAAAADEE/N9LuyV3ynZsEjIwiEq1dOSgn0qoS_6sUgCLcB/s1600/opencart-visionfortech-step2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Visionfortech,Latest technological blog,Create E commerce website in few minutes" border="0" height="255" src="https://3.bp.blogspot.com/-nKg-i974dY0/WRL2dOfLBXI/AAAAAAAADEE/N9LuyV3ynZsEjIwiEq1dOSgn0qoS_6sUgCLcB/s320/opencart-visionfortech-step2.png" title="opencart-visionfortech" width="555" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
3) Put that downloaded files into the root directory of your server here i user XAMPP so iam going to put all the files into <b>htdocs </b>directory which is root directory for apache in xampp.<br />
<br />
4) Rename config-dist.php to config.php and admin/config-dist.php to admin/config.php.<br />
<br />
5) Open xampp control pannel and start the apache as well as mysql server.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-aaxk2jjKz7g/WRL55DO-UxI/AAAAAAAADEQ/i__0aMMzotAWYHgfYhRoowsKGv9gloeoQCLcB/s1600/xampp-visionfortech.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Visionfortech,Latest technological blog,Create E commerce website in few minutes" border="0" height="300" src="https://4.bp.blogspot.com/-aaxk2jjKz7g/WRL55DO-UxI/AAAAAAAADEQ/i__0aMMzotAWYHgfYhRoowsKGv9gloeoQCLcB/s320/xampp-visionfortech.PNG" title="xampp-visionfortech" width="555" /></a></div>
<br />
<br />
6) Then open you browser and type <b>http://localhost:opencart</b> and you can see the below screen<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-GtiDDOwcKpE/WRL6Xj-yHwI/AAAAAAAADEY/1x0SJuYBr14nhGZhWsvnzeod_WC_Wb_eQCLcB/s1600/opencart-visionfortech-step3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Visionfortech,Latest technological blog,Create E commerce website in few minutes" border="0" height="255" src="https://1.bp.blogspot.com/-GtiDDOwcKpE/WRL6Xj-yHwI/AAAAAAAADEY/1x0SJuYBr14nhGZhWsvnzeod_WC_Wb_eQCLcB/s320/opencart-visionfortech-step3.png" title="step-1 opencart visionfortech" width="555" /></a></div>
<br />
<br />
7) Press Continue.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-6beASnSkjzw/WRL6vjcLUjI/AAAAAAAADEc/l9ybTLV4pss0sxBxWD37gpAuYHHHTT2LwCLcB/s1600/opencart-visionfortech-step4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="255" src="https://1.bp.blogspot.com/-6beASnSkjzw/WRL6vjcLUjI/AAAAAAAADEc/l9ybTLV4pss0sxBxWD37gpAuYHHHTT2LwCLcB/s320/opencart-visionfortech-step4.png" width="555" /></a></div>
<br />
<br />
8) Press Continue.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-DJuTSbm6BZ4/WRL61hWl9-I/AAAAAAAADEg/W0CUjUdXfz8vTUWRIaeUgR5Fok14bkK3ACLcB/s1600/opencart-visionfortech-step5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Visionfortech,Latest technological blog,Create E commerce website in few minutes" border="0" height="255" src="https://1.bp.blogspot.com/-DJuTSbm6BZ4/WRL61hWl9-I/AAAAAAAADEg/W0CUjUdXfz8vTUWRIaeUgR5Fok14bkK3ACLcB/s320/opencart-visionfortech-step5.png" title="step-2-opencart,visionfortech" width="555" /></a></div>
Enter username and password for your admin pannel using which you can manage your shopping website and do everything what you want.<br />
<br />
9) After that delete the install folder from your root directory of server.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-AWrfAZZSQDs/WRL7kI9EHEI/AAAAAAAADEo/qxwB1yG49rgpxteMH9x9BHdAnqWJ6hWSgCLcB/s1600/opencart-visionfortech-step6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Visionfortech,Latest technological blog,Create E commerce website in few minutes" border="0" height="255" src="https://1.bp.blogspot.com/-AWrfAZZSQDs/WRL7kI9EHEI/AAAAAAAADEo/qxwB1yG49rgpxteMH9x9BHdAnqWJ6hWSgCLcB/s320/opencart-visionfortech-step6.png" title="opencart,visionfortech" width="555" /></a></div>
<br />
Enjoy....!!!!<br />
<br />
Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.<br />
<br />
If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to Visionfortech<br />
<br /></div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com3tag:blogger.com,1999:blog-9035752464239680661.post-54098764148301816132017-03-12T06:11:00.000-07:002017-03-12T06:17:35.133-07:00 [Solution] Week 6 :Aggregation Framework : M101P: MongoDB for Developers<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<u style="background-color: yellow;"><span style="color: blue;"> [Solution] Week 5 :Aggregation Framework : M101P: MongoDB for Developers</span></u></h2>
<div>
<u style="background-color: yellow;"><span style="color: blue;"><br /></span></u></div>
<h3 style="text-align: left;">
<span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 6.1 : </u></b></span></span></h3>
<div>
Which of the following statements are true about replication in MongoDB? Check all that apply.</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b><br /></b></span></div>
<div style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b>Solution : </b></span><br />
<span style="background-color: yellow; color: blue;"><b><br /></b></span></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-YpZ8Bc8lUOQ/WMTx0BGBBdI/AAAAAAAACrY/XqHqyA6vEDEeV5N-JevVFY1XkG52okx5QCLcB/s1600/Homework%2B6.1_mongodb_for_developers.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Homework 6.1 MongoDb for Developers M101p,visionfortech" border="0" height="255" src="https://2.bp.blogspot.com/-YpZ8Bc8lUOQ/WMTx0BGBBdI/AAAAAAAACrY/XqHqyA6vEDEeV5N-JevVFY1XkG52okx5QCLcB/s320/Homework%2B6.1_mongodb_for_developers.JPG" title="Homework 6.1 MongoDb for Developers M101p" width="555" /></a></div>
<br />
<h3 style="text-align: left;">
<span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 6.2 : </u></b></span></span></h3>
<div>
<div style="text-align: center;">
<div style="background-color: white; box-sizing: border-box; margin-bottom: 1em; margin-top: 1em; text-align: left;">
Let's suppose you have a five member replica set and want to assure that writes are committed to the journal and are acknowledged by at least 3 nodes before you proceed forward. What would be the appropriate settings for w and j?</div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<div style="text-align: center;">
<div style="text-align: left;">
<span style="background-color: yellow;"><span style="color: blue;"><b><b>Solution : </b></b></span></span></div>
</div>
</div>
</div>
<div style="text-align: center;">
<span style="background-color: yellow;"><span style="color: blue;"><span style="text-align: left;"><b><br /></b></span></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-rVZfYTf7s48/WMTydFhDn-I/AAAAAAAACrg/lLFBT7eotnwOqw3XVymNbUcNcBIN6nMzgCEw/s1600/Homework%2B6.2_mongodb_for_developers.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Homework 6.2 MongoDb for Developers M101p,visionfortech" border="0" height="255" src="https://4.bp.blogspot.com/-rVZfYTf7s48/WMTydFhDn-I/AAAAAAAACrg/lLFBT7eotnwOqw3XVymNbUcNcBIN6nMzgCEw/s320/Homework%2B6.2_mongodb_for_developers.JPG" title="Homework 6.2 MongoDb for Developers M101p" width="555" /></a></div>
<br /></div>
</div>
<h3 style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b><u>Homework 6.3 :</u></b></span></h3>
<div style="text-align: center;">
<div class="line-block" style="background-color: white; box-sizing: border-box; text-align: left;">
<div class="line" style="box-sizing: border-box;">
Which of the following statements are true about choosing and using a shard key?</div>
</div>
<div>
<span style="background-color: yellow;"><br /></span></div>
</div>
<div style="text-align: center;">
<div style="text-align: center;">
<div style="text-align: left;">
<span style="background-color: yellow;"><span style="background-color: yellow;"><span style="color: blue;"><b>Solution : </b></span></span></span></div>
</div>
<div style="text-align: center;">
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-sO4UOjMRHRc/WMTygtwiE6I/AAAAAAAACro/RglnYEVd2SgLiyGw7iF9vwLGp6sY8RdtgCEw/s1600/Homework%2B6.3_mongodb_for_developers.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Homework 6.3 MongoDb for Developers M101p,visionfortech" border="0" height="255" src="https://2.bp.blogspot.com/-sO4UOjMRHRc/WMTygtwiE6I/AAAAAAAACro/RglnYEVd2SgLiyGw7iF9vwLGp6sY8RdtgCEw/s320/Homework%2B6.3_mongodb_for_developers.JPG" title="Homework 6.3 MongoDb for Developers M101p" width="555" /></a></div>
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b><u>Homework 6.4 :</u></b></span></h3>
<div style="background-color: white; box-sizing: border-box; margin-bottom: 1em; margin-top: 1em;">
You have a sharded system with three shards and have sharded the collections "students" in the "school" database across those shards. The output of sh.status() when connected to mongos looks like this:<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">mongos> sh.status()
--- Sharding Status ---
sharding version: {
"_id" : 1,
"minCompatibleVersion" : 5,
"currentVersion" : 6,
"clusterId" : ObjectId("5531512ac723271f602db407")
}
shards:
{ "_id" : "s0", "host" : "s0/localhost:37017,localhost:37018,localhost:37019" }
{ "_id" : "s1", "host" : "s1/localhost:47017,localhost:47018,localhost:47019" }
{ "_id" : "s2", "host" : "s2/localhost:57017,localhost:57018,localhost:57019" }
balancer:
Currently enabled: yes
Currently running: yes
Balancer lock taken at Fri Apr 17 2015 14:32:02 GMT-0400 (EDT) by education-iMac-2.local:27017:1429295401:16807:Balancer:1622650073
Collections with active migrations:
school.students started at Fri Apr 17 2015 14:32:03 GMT-0400 (EDT)
Failed balancer rounds in last 5 attempts: 0
Migration Results for the last 24 hours:
2 : Success
1 : Failed with error 'migration already in progress', from s0 to s1
databases:
{ "_id" : "admin", "partitioned" : false, "primary" : "config" }
{ "_id" : "school", "partitioned" : true, "primary" : "s0" }
school.students
shard key: { "student_id" : 1 }
chunks:
s0 1
s1 3
s2 1
{ "student_id" : { "$minKey" : 1 } } -->> { "student_id" : 0 } on : s2 Timestamp(3, 0)
{ "student_id" : 0 } -->> { "student_id" : 2 } on : s0 Timestamp(3, 1)
{ "student_id" : 2 } -->> { "student_id" : 3497 } on : s1 Timestamp(3, 2)
{ "student_id" : 3497 } -->> { "student_id" : 7778 } on : s1 Timestamp(3, 3)
{ "student_id" : 7778 } -->> { "student_id" : { "$maxKey" : 1 } } on : s1 Timestamp(3, 4)
</pre>
<div>
<br /></div>
<b style="background-color: yellow; color: blue; text-align: center;"><br /></b>
<b style="background-color: yellow; color: blue; text-align: center;">Solution :298016</b></div>
<div style="box-sizing: border-box; margin-bottom: 1em; margin-top: 1em;">
<div style="background-color: white;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-VYa9juPpvOw/WMTyhHNLKLI/AAAAAAAACrw/m_gfYKKVW0kFfWeQo6oDhro0kmyzgVR_wCEw/s1600/Homework%2B6.4_mongodb_for_developers.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Homework 6.4 MongoDb for Developers M101p,visionfortech" border="0" height="255" src="https://3.bp.blogspot.com/-VYa9juPpvOw/WMTyhHNLKLI/AAAAAAAACrw/m_gfYKKVW0kFfWeQo6oDhro0kmyzgVR_wCEw/s320/Homework%2B6.4_mongodb_for_developers.JPG" title="Homework 6.4 MongoDb for Developers M101p" width="555" /></a></div>
<br /></div>
</div>
<h3 style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b><u>Homework 6.5 :</u></b></span></h3>
<div style="background-color: white; box-sizing: border-box; margin-bottom: 1em; margin-top: 1em;">
In this homework you will build a small replica set on your own computer. We will check that it works with validate.py, which you should download from the Download Handout link.<br />
Create three directories for the three mongod processes. On unix, this could be done as follows:<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">mkdir -p /data/rs1 /data/rs2 /data/rs3</pre>
<br />
Now start three mongo instances as follows. Note that are three commands. The browser is probably wrapping them visually.<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">mongod --replSet m101 --logpath "1.log" --dbpath /data/rs1 --port 27017 --smallfiles --oplogSize 64 --fork
mongod --replSet m101 --logpath "2.log" --dbpath /data/rs2 --port 27018 --smallfiles --oplogSize 64 --fork
mongod --replSet m101 --logpath "3.log" --dbpath /data/rs3 --port 27019 --smallfiles --oplogSize 64 --fork</pre>
<b>Windows users</b>: Omit -p from mkdir. Also omit --fork and use start mongod with Windows compatible paths (i.e. backslashes "\") for the --dbpath argument (e.g; C:\data\rs1).<br />
Now connect to a mongo shell and make sure it comes up<br />
<br />
Now you will create the replica set. Type the following commands into the mongo shell:<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">config = { _id: "m101", members:[
{ _id : 0, host : "localhost:27017"},
{ _id : 1, host : "localhost:27018"},
{ _id : 2, host : "localhost:27019"} ]
};
rs.initiate(config);</pre>
At this point, the replica set should be coming up. You can type<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">rs.status()</pre>
to see the state of replication.<br />
Now run validate.py to confirm that it works.<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">python validate.py</pre>
Validate connects to your local replica set and checks that it has three nodes. It has been tested under Pymongo 2.3 and 2.4. Type the validation code below.<br />
<br />
<b style="background-color: yellow; color: blue; text-align: center;"><br /></b>
<b style="background-color: yellow; color: blue; text-align: center;">Solution : kjvjkl3290mf0m20f2kjjv</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-3hXF1NBokbs/WMTyhGVnb6I/AAAAAAAACr4/ee39U_dwKsscrZ1HV_7dbsZJyWMUgzU9QCEw/s1600/Homework%2B6.5_mongodb_for_developers.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Homework 6.5 MongoDb for Developers M101p,visionfortech" border="0" height="255" src="https://1.bp.blogspot.com/-3hXF1NBokbs/WMTyhGVnb6I/AAAAAAAACr4/ee39U_dwKsscrZ1HV_7dbsZJyWMUgzU9QCEw/s320/Homework%2B6.5_mongodb_for_developers.JPG" title="Homework 6.5 MongoDb for Developers M101p" width="555" /></a></div>
<br />
Enjoy....!!!!<br />
<br />
Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.<br />
<br />
If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to <a href="http://visionfortech.blogspopt.com/" target="_blank">Visionfortech</a><br />
<br />
<br />
<div style="font-weight: bold;">
<span style="background-color: yellow; color: blue;">Related Post :</span></div>
<h3 style="text-align: left;">
<div style="font-size: medium; font-weight: normal;">
<div style="font-size: medium; font-weight: normal;">
<b><span style="background-color: white; color: blue; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><span style="font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.in/2017/01/solution-week-1-introduction-m101p-MongoDB-for-Developer.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank"><span style="color: blue;">Week 1 : Introduction : M101P: MongoDB for Developers</span></a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<span style="color: blue;"><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><br /></span></b><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.in/2017/01/solution-week-2-CRUD-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 2 : CRUD : M101P: MongoDB for Developers</a></span></b></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="color: blue;"><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><br /></span></b><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.com/2017/01/solution-for-week-3-schema-design-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 3 : Schema Design : M101P: MongoDB for Developers</a></span></b></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="color: blue;"><br /></span><b><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="http://visionfortech.blogspot.com/2017/02/solution-or-answer-for-week-4-performance-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 4 : Performance : M101P: MongoDB for Developers</a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><br /></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="https://visionfortech.blogspot.in/2017/02/solution-week-five-aggregation-framework-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 5 : Aggregation Framework: M101P: MongoDB for Developers</a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><br /></span></b></div>
<b style="font-size: medium;"><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="http://visionfortech.blogspot.com/2017/03/solution-week-6-aggregation-framework-mongodb-for-developers-m101p.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 6 :Aggregation Framework : M101P: MongoDB for Developers</a></span></span></b></div>
</div>
</h3>
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com2tag:blogger.com,1999:blog-9035752464239680661.post-24981478506715001012017-02-13T22:11:00.000-08:002017-03-12T06:18:15.011-07:00[Solution] Week 5 :Aggregation Framework : M101P: MongoDB for Developers<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<u style="background-color: yellow;"><span style="color: blue;"> [Solution] Week 5 :Aggregation Framework : M101P: MongoDB for Developers</span></u></h2>
<div>
<u style="background-color: yellow;"><span style="color: blue;"><br /></span></u></div>
<h3 style="text-align: left;">
<span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 5.1 : </u></b></span></span></h3>
<div>
Finding the most frequent author of comments on your blog<br />
<br />
In this assignment you will use the aggregation framework to find the most frequent author of comments on your blog. We will be using a data set similar to ones we've used before.<br />
<br />
Start by downloading the handout zip file for this problem. Then import into your blog database as follows:<br />
<br /></div>
<div>
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">mongoimport --drop -d blog -c posts posts.json</pre>
</div>
<div>
<br />
Now use the aggregation framework to calculate the author with the greatest number of comments.<br />
<br />
To help you verify your work before submitting, the author with the fewest comments is Mariela Sherer and she commented 387 times.<br />
<br />
Please choose your answer below for the most prolific comment author:</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b><br /></b></span></div>
<div style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b>Solution : </b></span><br />
<span style="background-color: yellow; color: blue;"><b><br /></b></span></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-9w3yUYEPJzc/WKKbaiKAdzI/AAAAAAAAClA/aQ8JEd8M1bkf16Hs8_1FISNpqVzD5Ph4QCLcB/s1600/5.1_Mongodb_For_developers.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Homework 5.1 m101p Mongodb for Developer,visionfortech" border="0" height="255" src="https://3.bp.blogspot.com/-9w3yUYEPJzc/WKKbaiKAdzI/AAAAAAAAClA/aQ8JEd8M1bkf16Hs8_1FISNpqVzD5Ph4QCLcB/s320/5.1_Mongodb_For_developers.JPG" title="Homework 5.1 m101p Mongodb for Developer" width="555" /></a></div>
<br />
<h3 style="text-align: left;">
<span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 5.2 : </u></b></span></span></h3>
<div>
<div style="text-align: center;">
<div style="background-color: white; box-sizing: border-box; margin-bottom: 1em; margin-top: 1em; text-align: left;">
Crunching the Zipcode dataset<br />
Please calculate the average population of cities in California (abbreviation CA) and New York (NY) (taken together) with populations over 25,000.<br />
For this problem, assume that a city name that appears in more than one state represents two separate cities.<br />
Please round the answer to a whole number.<br />
Hint: The answer for CT and NJ (using this data set) is 38177.<br />
Please note:<br />
Different states might have the same city name.<br />
A city might have multiple zip codes.<br />
<br />
For this problem, we have used a subset of the data you previously used in zips.json, not the full set. For this set, there are only 200 documents (and 200 zip codes), and all of them are in New York, Connecticut, New Jersey, and California.<br />
You can download the handout and perform your analysis on your machine with<br />
<br />
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">mongoimport --drop -d test -c zips small_zips.json</pre>
Note<br />
<br />
This is raw data from the United States Postal Service. If you notice that while importing, there are a few duplicates fear not, this is expected and will not affect your answer.<br />
<br />
Once you've generated your aggregation query and found your answer, select it from the choices below.<br />
Please use the Aggregation pipeline to solve this problem.</div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<div style="text-align: center;">
<span style="background-color: yellow;"><span style="color: blue;"><b><b>Solution : 44805</b></b></span></span></div>
</div>
</div>
<div style="text-align: center;">
<span style="background-color: yellow;"><span style="color: blue;"><span style="text-align: left;"><b><br /></b></span></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-Po0NwCrQVOY/WKKbpynunJI/AAAAAAAAClE/gREi8sw43tshaMIiqRq9jAiQM4FMHrHxgCLcB/s1600/5.2_Mongodb_For_developers.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Homework 5.2 m101p Mongodb for Developer,visionfortech" border="0" height="255" src="https://1.bp.blogspot.com/-Po0NwCrQVOY/WKKbpynunJI/AAAAAAAAClE/gREi8sw43tshaMIiqRq9jAiQM4FMHrHxgCLcB/s320/5.2_Mongodb_For_developers.JPG" title="Homework 5.2 m101p Mongodb for Developer" width="555" /></a></div>
<br /></div>
</div>
<h3 style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b><u>Homework 5.3 :</u></b></span></h3>
<div style="text-align: center;">
<div class="line-block" style="background-color: white; box-sizing: border-box; text-align: left;">
<div class="line" style="box-sizing: border-box;">
<b>Who's the easiest grader on campus?</b><br />
Download the handout and mongoimport.<br />
The documents look like this:<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">{
"_id" : ObjectId("50b59cd75bed76f46522c392"),
"student_id" : 10,
"class_id" : 5,
"scores" : [
{
"type" : "exam",
"score" : 69.17634380939022
},
{
"type" : "quiz",
"score" : 61.20182926719762
},
{
"type" : "homework",
"score" : 73.3293624199466
},
{
"type" : "homework",
"score" : 15.206314042622903
},
{
"type" : "homework",
"score" : 36.75297723087603
},
{
"type" : "homework",
"score" : 64.42913107330241
}
]
}</pre>
There are documents for each student (student_id) across a variety of classes (class_id). Note that not all students in the same class have the same exact number of assessments. Some students have three homework assignments, etc.<br />
<br />
Your task is to calculate the class with the best average student performance. This involves calculating an average for each student in each class of all non-quiz assessments and then averaging those numbers to get a class average. To be clear, each student's average includes only exams and homework grades. Don't include their quiz scores in the calculation.<br />
<br />
What is the class_id which has the highest average student performance?<br />
Hint/Strategy: You need to group twice to solve this problem. You must figure out the GPA that each student has achieved in a class and then average those numbers to get a class average. After that, you just need to sort. The class with the lowest average is the class with class_id=2. Those students achieved a class average of 37.6<br />
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">mongoimport --drop -d test -c grades grades.json</pre>
Below, choose the class_id with the highest average student average.</div>
</div>
<div>
<span style="background-color: yellow;"><br /></span></div>
</div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="background-color: yellow;"><span style="background-color: yellow;"><span style="color: blue;"><b>Solution : 1</b></span></span></span></div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-O7OX7-5TEXM/WKKb0otJngI/AAAAAAAAClI/QojerVhlJ1Uvfucaor5Xe11H9fcObPX1QCLcB/s1600/5.3_Mongodb_For_developers.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Homework 5.3 m101p Mongodb for Developer,visionfortech" border="0" height="255" src="https://2.bp.blogspot.com/-O7OX7-5TEXM/WKKb0otJngI/AAAAAAAAClI/QojerVhlJ1Uvfucaor5Xe11H9fcObPX1QCLcB/s320/5.3_Mongodb_For_developers.JPG" title="Homework 5.3 m101p Mongodb for Developer" width="555" /></a></div>
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b><u>Homework 5.4 :</u></b></span></h3>
<div style="background-color: white; box-sizing: border-box; margin-bottom: 1em; margin-top: 1em;">
<b>Removing Rural Residents</b><br />
<br />
In this problem you will calculate the number of people who live in a zip code in the US where the city starts with a digit. We will take that to mean they don't really live in a city. Once again, you will be using the zip code collection, which you will find in the 'handouts' link in this page. Import it into your mongod using the following command from the command line:<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">mongoimport --drop -d test -c zips zips.json</pre>
</div>
<div style="box-sizing: border-box; margin-bottom: 1em; margin-top: 1em;">
<div style="background-color: white;">
This is raw data from the United States Postal Service. If you notice that while importing, there are a few duplicates fear not, this is expected and will not affect your answer.</div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
If you imported it correctly, you can go to the test database in the mongo shell and conform that</div>
<div style="background-color: white;">
<br /></div>
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">> db.zips.count()</pre>
<div style="background-color: white;">
yields 29,467 documents.</div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
The project operator can extract the first digit from any field. For example, to extract the first digit from the city field, you could write this query:</div>
<div style="background-color: white;">
<br /></div>
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">db.zips.aggregate([
{$project:
{
first_char: {$substr : ["$city",0,1]},
}
}
])</pre>
<div style="background-color: white;">
Using the aggregation framework, calculate the sum total of people who are living in a zip code where the city starts with a digit. Choose the answer below.</div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
You will need to probably change your projection to send more info through than just that first character. Also, you will need a filtering step to get rid of all documents where the city does not start with a digital (0-9).</div>
<div style="background-color: white;">
<br /></div>
<div style="text-align: left;">
<b style="background-color: white; color: blue; text-align: center;"> </b><b style="background-color: yellow; color: blue; text-align: center;">Solution :298016</b></div>
<div style="background-color: white;">
<b style="background-color: yellow; color: blue; text-align: center;"><br /></b>
</div>
<div class="separator" style="background-color: white; clear: both; text-align: center;">
</div>
<div class="separator" style="background-color: white; clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-FDos3s0e3q4/WKKcDZS6RJI/AAAAAAAAClM/cn5NXnl0tY4IvMmvm9IYOWUs31u7N7IzgCLcB/s1600/5.4_Mongodb_For_developers.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Homework 5.4 m101p Mongodb for Developer,visionfortech" border="0" height="255" src="https://1.bp.blogspot.com/-FDos3s0e3q4/WKKcDZS6RJI/AAAAAAAAClM/cn5NXnl0tY4IvMmvm9IYOWUs31u7N7IzgCLcB/s320/5.4_Mongodb_For_developers.JPG" title="Homework 5.4 m101p Mongodb for Developer" width="555" /></a></div>
<div style="background-color: white;">
<br /></div>
</div>
Enjoy....!!!!<br />
<br />
Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.<br />
<br />
If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to <a href="http://visionfortech.blogspopt.com/" target="_blank">Visionfortech</a><br />
<br />
<br />
<div style="font-weight: bold;">
<span style="background-color: yellow; color: blue;">Related Post :</span><br />
<span style="background-color: yellow; color: blue;"><br /></span></div>
<div style="font-size: medium; font-weight: normal;">
<b><span style="background-color: white; color: blue; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><span style="font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.in/2017/01/solution-week-1-introduction-m101p-MongoDB-for-Developer.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank"><span style="color: blue;">Week 1 : Introduction : M101P: MongoDB for Developers</span></a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<span style="color: blue;"><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><br /></span></b><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.in/2017/01/solution-week-2-CRUD-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 2 : CRUD : M101P: MongoDB for Developers</a></span></b></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="color: blue;"><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><br /></span></b><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.com/2017/01/solution-for-week-3-schema-design-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 3 : Schema Design : M101P: MongoDB for Developers</a></span></b></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="color: blue;"><br /></span><b><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="http://visionfortech.blogspot.com/2017/02/solution-or-answer-for-week-4-performance-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 4 : Performance : M101P: MongoDB for Developers</a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><br /></span></b></div>
<div style="font-size: 18.72px; font-weight: bold;">
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="https://visionfortech.blogspot.in/2017/02/solution-week-five-aggregation-framework-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 5 : Aggregation Framework: M101P: MongoDB for Developers</a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><br /></span></b></div>
<b style="font-size: medium;"><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="http://visionfortech.blogspot.com/2017/03/solution-week-6-aggregation-framework-mongodb-for-developers-m101p.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 6 :Aggregation Framework : M101P: MongoDB for Developers</a></span></span></b></div>
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com6tag:blogger.com,1999:blog-9035752464239680661.post-11657835799215907932017-02-05T00:16:00.000-08:002017-03-12T06:18:34.543-07:00 [Solution] Week 4 :Performance : M101P: MongoDB for Developers<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<u style="background-color: yellow;"><span style="color: blue;"> [Solution] Week 4 :Performance : M101P: MongoDB for Developers</span></u></h2>
<div>
<u style="background-color: yellow;"><span style="color: blue;"><br /></span></u></div>
<h3 style="text-align: left;">
<span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 4.1 : </u></b></span></span></h3>
<div>
<span style="color: blue;"><span style="background-color: yellow;"><span style="background-color: white; color: #31302f; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif; font-size: 16px; letter-spacing: 0.4px;">Suppose you have a collection with the following indexes:</span></span></span></div>
<div>
<span style="color: blue;"><span style="background-color: yellow;"><span style="background-color: white; color: #31302f; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif; font-size: 16px; letter-spacing: 0.4px;"><br /></span></span></span></div>
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;"><pre class="literal-block" style="border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">> db.products.getIndexes()
[
{
"v" : 1,
"key" : {
"_id" : 1
},
"ns" : "store.products",
"name" : "_id_"
},
{
"v" : 1,
"key" : {
"sku" : 1
},
"unique" : true,
"ns" : "store.products",
"name" : "sku_1"
},
{
"v" : 1,
"key" : {
"price" : -1
},
"ns" : "store.products",
"name" : "price_-1"
},
{
"v" : 1,
"key" : {
"description" : 1
},
"ns" : "store.products",
"name" : "description_1"
},
{
"v" : 1,
"key" : {
"category" : 1,
"brand" : 1
},
"ns" : "store.products",
"name" : "category_1_brand_1"
},
{
"v" : 1,
"key" : {
"reviews.author" : 1
},
"ns" : "store.products",
"name" : "reviews.author_1"
}
]</pre>
</pre>
<div>
Which of the following queries can utilize at least one index to find all matching documents, or to sort? Check all that apply.<br />
<br />
Note: the text for some answers may wrap; you can ignore the wrapping.</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b><br /></b></span></div>
<div style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b>Solution : </b></span></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-Uu0slV33H9w/WJbVW1D1XII/AAAAAAAACec/-fR0MlKDBysgqJ1T0cxpC_Mw02sQNiJUQCEw/s1600/4.1_Mongodb_For_developers.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Solutions for Homework 4.1-M101p Mongodb For Develoeprs,Answers for Homework 4.1-M101p Mongodb For Develoeprs,visionfortech" border="0" height="255" src="https://4.bp.blogspot.com/-Uu0slV33H9w/WJbVW1D1XII/AAAAAAAACec/-fR0MlKDBysgqJ1T0cxpC_Mw02sQNiJUQCEw/s320/4.1_Mongodb_For_developers.JPG" title="Solutions for Homework 4.1-M101p Mongodb For Develoeprs" width="555" /></a></div>
<br />
<h3 style="text-align: left;">
<span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 4.2 : </u></b></span></span></h3>
<div>
<div style="text-align: center;">
<div style="background-color: white; box-sizing: border-box; margin-bottom: 1em; margin-top: 1em; text-align: left;">
Suppose you have a collection called tweets whose documents contain information about the created_at time of the tweet and the user's followers_count at the time they issued the tweet. What can you infer from the following explain output?</div>
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; text-align: left; word-break: break-all; word-wrap: normal;">> db.tweets.explain("executionStats").find( { "user.followers_count" : { $gt : 1000 } } ).limit(10).skip(5000).sort( { created_at : 1 } )
{
"queryPlanner" : {
"plannerVersion" : 1,
"namespace" : "twitter.tweets",
"indexFilterSet" : false,
"parsedQuery" : {
"user.followers_count" : {
"$gt" : 1000
}
},
"winningPlan" : {
"stage" : "LIMIT",
"limitAmount" : 0,
"inputStage" : {
"stage" : "SKIP",
"skipAmount" : 0,
"inputStage" : {
"stage" : "FETCH",
"filter" : {
"user.followers_count" : {
"$gt" : 1000
}
},
"inputStage" : {
"stage" : "IXSCAN",
"keyPattern" : {
"created_at" : -1
},
"indexName" : "created_at_-1",
"isMultiKey" : false,
"direction" : "backward",
"indexBounds" : {
"created_at" : [
"[MinKey, MaxKey]"
]
}
}
}
}
},
"rejectedPlans" : [ ]
},
"executionStats" : {
"executionSuccess" : true,
"nReturned" : 10,
"executionTimeMillis" : 563,
"totalKeysExamined" : 251120,
"totalDocsExamined" : 251120,
"executionStages" : {
"stage" : "LIMIT",
"nReturned" : 10,
"executionTimeMillisEstimate" : 500,
"works" : 251121,
"advanced" : 10,
"needTime" : 251110,
"needFetch" : 0,
"saveState" : 1961,
"restoreState" : 1961,
"isEOF" : 1,
"invalidates" : 0,
"limitAmount" : 0,
"inputStage" : {
"stage" : "SKIP",
"nReturned" : 10,
"executionTimeMillisEstimate" : 500,
"works" : 251120,
"advanced" : 10,
"needTime" : 251110,
"needFetch" : 0,
"saveState" : 1961,
"restoreState" : 1961,
"isEOF" : 0,
"invalidates" : 0,
"skipAmount" : 0,
"inputStage" : {
"stage" : "FETCH",
"filter" : {
"user.followers_count" : {
"$gt" : 1000
}
},
"nReturned" : 5010,
"executionTimeMillisEstimate" : 490,
"works" : 251120,
"advanced" : 5010,
"needTime" : 246110,
"needFetch" : 0,
"saveState" : 1961,
"restoreState" : 1961,
"isEOF" : 0,
"invalidates" : 0,
"docsExamined" : 251120,
"alreadyHasObj" : 0,
"inputStage" : {
"stage" : "IXSCAN",
"nReturned" : 251120,
"executionTimeMillisEstimate" : 100,
"works" : 251120,
"advanced" : 251120,
"needTime" : 0,
"needFetch" : 0,
"saveState" : 1961,
"restoreState" : 1961,
"isEOF" : 0,
"invalidates" : 0,
"keyPattern" : {
"created_at" : -1
},
"indexName" : "created_at_-1",
"isMultiKey" : false,
"direction" : "backward",
"indexBounds" : {
"created_at" : [
"[MinKey, MaxKey]"
]
},
"keysExamined" : 251120,
"dupsTested" : 0,
"dupsDropped" : 0,
"seenInvalidated" : 0,
"matchTested" : 0
}
}
}
}
},
"serverInfo" : {
"host" : "generic-name.local",
"port" : 27017,
"version" : "3.0.1",
"gitVersion" : "534b5a3f9d10f00cd27737fbcd951032248b5952"
},
"ok" : 1
}</pre>
</div>
<div style="text-align: center;">
<span style="background-color: yellow;"><span style="color: blue;"><b><br /></b></span></span>
<br />
<div style="text-align: left;">
<span style="background-color: yellow;"><span style="color: blue;"><b><b>Solution : </b></b></span></span></div>
</div>
<div style="text-align: center;">
<span style="background-color: yellow;"><span style="color: blue;"><span style="text-align: left;"><b><br /></b></span></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-wk-O-n92a8Y/WJbWd-oguJI/AAAAAAAACek/RQ6LEu9OynYoULeAP8ROp_0ecD485hAKACLcB/s1600/4.2_Mongodb_For_developers.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Solutions for Homework 4.2-M101p Mongodb For Develoeprs,Answers for Homework 4.2-M101p Mongodb For Develoeprs,visionfortech" border="0" height="255" src="https://3.bp.blogspot.com/-wk-O-n92a8Y/WJbWd-oguJI/AAAAAAAACek/RQ6LEu9OynYoULeAP8ROp_0ecD485hAKACLcB/s320/4.2_Mongodb_For_developers.JPG" title="Solutions for Homework 4.2-M101p Mongodb For Develoeprs" width="555" /></a></div>
<br /></div>
</div>
<h3 style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b><u>Homework 4.3 :</u></b></span></h3>
<div style="text-align: center;">
<div class="line-block" style="background-color: white; box-sizing: border-box; text-align: left;">
<div class="line" style="box-sizing: border-box;">
Making the Blog fast<br />
Please download hw4-3.zip from the Download Handout link to get started. This assignment requires Mongo 3.0 or above.<br />
<br />
In this homework assignment you will be adding some indexes to the post collection to make the blog fast.<br />
<br />
We have provided the full code for the blog application and you don't need to make any changes, or even run the blog. But you can, for fun.<br />
<br />
We are also providing a patriotic (if you are an American) data set for the blog. There are 1000 entries with lots of comments and tags. You must load this dataset to complete the problem.<br />
<br />
From the mongo shell:<br />
<div style="color: #31302f; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 16px; letter-spacing: 0.4px;">
<br /></div>
</div>
</div>
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; text-align: left; word-break: break-all; word-wrap: normal;">use blog
db.posts.drop()
</pre>
<div style="background-color: white; box-sizing: border-box; margin-bottom: 1em; margin-top: 1em; text-align: left;">
<div style="color: #31302f; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 16px; letter-spacing: 0.4px;">
<br /></div>
From the mac or PC terminal window<br />
<div style="color: #31302f; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 16px; letter-spacing: 0.4px;">
<br /></div>
</div>
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; text-align: left; word-break: break-all; word-wrap: normal;">mongoimport --drop -d blog -c posts posts.json</pre>
<div style="background-color: white; box-sizing: border-box; margin-bottom: 1em; margin-top: 1em; text-align: left;">
The blog has been enhanced so that it can also display the top 10 most recent posts by tag. There are hyperlinks from the post tags to the page that displays the 10 most recent blog entries for that tag. (run the blog and it will be obvious)<br />
<br />
Your assignment is to make the following blog pages fast:<br />
<br />
The blog home page<br />
The page that displays blog posts by tag (http://localhost:8082/tag/whatever)<br />
The page that displays a blog entry by permalink (http://localhost:8082/post/permalink)<br />
By fast, we mean that indexes should be in place to satisfy these queries such that we only need to scan the number of documents we are going to return.<br />
<br />
To figure out what queries you need to optimize, you can read the blog.py code and see what it does to display those pages. Isolate those queries and use explain to explore.<br />
<br />
Once you have added the indexes to make those pages fast run the following</div>
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; text-align: left; word-break: break-all; word-wrap: normal;"><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace; font-size: 0.9em; letter-spacing: 0.4px;">python validate.py</span><span style="font-family: "times new roman";"><span style="white-space: normal;">
</span></span></pre>
<div style="background-color: white; box-sizing: border-box; margin-bottom: 1em; margin-top: 1em; text-align: left;">
(note that for folks who are using MongoLabs or MongoHQ there are some command line options to validate.py to make it possible to use those services) Now enter the validation code below.</div>
<div>
<span style="background-color: yellow;"><br /></span></div>
</div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="background-color: yellow;"><span style="background-color: yellow;"><span style="color: blue;"><b>Solution : </b></span></span><span style="color: blue;"><b>893jfns29f728fn29f20f2</b></span></span></div>
<div style="text-align: center;">
<span style="background-color: yellow;"><span style="color: blue;"><b><br /></b></span></span></div>
</div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-qlg7m1U_yPc/WJbZJ5G-hyI/AAAAAAAACew/PO7yWhVkouMvUOQRDMlcsY1ik_fg89LAACLcB/s1600/4.3_Mongodb_For_developers.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Solutions for Homework 4.3-M101p Mongodb For Develoeprs,visionfortech" border="0" height="155" src="https://2.bp.blogspot.com/-qlg7m1U_yPc/WJbZJ5G-hyI/AAAAAAAACew/PO7yWhVkouMvUOQRDMlcsY1ik_fg89LAACLcB/s320/4.3_Mongodb_For_developers.JPG" title="Solutions for Homework 4.3-M101p Mongodb For Develoeprs" width="555" /></a></div>
<span style="background-color: yellow;"><span style="color: blue;"><span style="text-align: left;"><b><br /></b></span></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b><u>Homework 4.4 :</u></b></span></h3>
<div style="background-color: white; box-sizing: border-box; margin-bottom: 1em; margin-top: 1em;">
In this problem you will analyze a profile log taken from a different mongoDB instance and you will import it into a collection named sysprofile. To start, please download sysprofile.json from Download Handout link and import it with the following command:</div>
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;"><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace; font-size: 0.9em; letter-spacing: 0.4px;">mongoimport --drop -d m101 -c profile sysprofile.json</span><span style="font-family: "times new roman";"><span style="white-space: normal;">
</span></span></pre>
<div style="background-color: white; box-sizing: border-box; margin-bottom: 1em; margin-top: 1em;">
Now query the profile data, looking for all queries to the students collection in the database school2, sorted in order of decreasing latency. What is the latency of the longest running operation to the collection, in milliseconds?<br />
<br />
<b style="background-color: yellow; color: blue; text-align: center;">Solution :</b><br />
<b style="background-color: yellow; color: blue; text-align: center;"><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-nnybnj74O_o/WJbd8tv8oNI/AAAAAAAACe8/nueseK3AmoYHxsm-ft4kveQDJ31do968wCLcB/s1600/4.4_Mongodb_For_developers.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Solutions for Homework 4.4-M101p Mongodb For Develoeprs,visionfortech" border="0" height="255" src="https://3.bp.blogspot.com/-nnybnj74O_o/WJbd8tv8oNI/AAAAAAAACe8/nueseK3AmoYHxsm-ft4kveQDJ31do968wCLcB/s320/4.4_Mongodb_For_developers.JPG" title="Solutions for Homework 4.4-M101p Mongodb For Develoeprs" width="555" /></a></div>
<br /></div>
Enjoy....!!!!<br />
<br />
Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.<br />
<br />
If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to <a href="http://visionfortech.blogspopt.com/" target="_blank">Visionfortech</a><br />
<br />
<br />
<div style="font-weight: bold;">
<span style="background-color: yellow; color: blue;">Related Post :</span><br />
<span style="background-color: yellow; color: blue;"><br /></span>
<div style="font-weight: normal;">
<b><span style="background-color: white; color: blue; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><span style="font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.in/2017/01/solution-week-1-introduction-m101p-MongoDB-for-Developer.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank"><span style="color: blue;">Week 1 : Introduction : M101P: MongoDB for Developers</span></a></span></span></b></div>
<div style="font-weight: normal;">
<span style="color: blue;"><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><br /></span></b><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.in/2017/01/solution-week-2-CRUD-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 2 : CRUD : M101P: MongoDB for Developers</a></span></b></span></div>
<div style="font-weight: normal;">
<span style="color: blue;"><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><br /></span></b><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.com/2017/01/solution-for-week-3-schema-design-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 3 : Schema Design : M101P: MongoDB for Developers</a></span></b></span></div>
<div style="font-weight: normal;">
<span style="color: blue;"><br /></span><b><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="http://visionfortech.blogspot.com/2017/02/solution-or-answer-for-week-4-performance-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 4 : Performance : M101P: MongoDB for Developers</a></span></span></b></div>
<div style="font-weight: normal;">
<b><span style="color: blue;"><br /></span></b></div>
<div style="font-size: 18.72px;">
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="https://visionfortech.blogspot.in/2017/02/solution-week-five-aggregation-framework-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 5 : Aggregation Framework: M101P: MongoDB for Developers</a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><br /></span></b></div>
<b style="font-size: medium;"><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="http://visionfortech.blogspot.com/2017/03/solution-week-6-aggregation-framework-mongodb-for-developers-m101p.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 6 :Aggregation Framework : M101P: MongoDB for Developers</a></span></span></b></div>
</div>
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com4tag:blogger.com,1999:blog-9035752464239680661.post-35338605437001088872017-01-30T20:33:00.000-08:002017-03-12T06:19:29.364-07:00[Solution] Week 3 :Schema Design : M101P: MongoDB for Developers<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<u style="background-color: yellow;"><span style="color: blue;"> [Solution] Week 3 :Schema Design : M101P: MongoDB for Developers</span></u></h2>
<div>
<u style="background-color: yellow;"><span style="color: blue;"><br /></span></u></div>
<h3 style="text-align: left;">
<span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 3.1 : </u></b></span></span></h3>
<div>
<span style="color: blue;"><span style="background-color: yellow;"><b><u><br /></u></b></span></span></div>
Download the students.json file from the Download Handout link and import it into your local Mongo instance with this command:<br />
<br />
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">mongoimport --drop -d school -c students students.json</pre>
<br />
This dataset holds the same type of data as last week's grade collection, but it's modeled differently. You might want to start by inspecting it in the Mongo shell.<br />
<br />
Write a program in the language of your choice that will remove the lowest homework score for each student. Since there is a single document for each student containing an array of scores, you will need to update the scores array and remove the homework.<br />
<br />
Remember, just remove a homework score. Don't remove a quiz or an exam!<br />
<br />
Hint/spoiler: With the new schema, this problem is a lot harder and that is sort of the point. One way is to find the lowest homework in code and then update the scores array with the low homework pruned.<br />
<br />
To confirm you are on the right track, here are some queries to run after you process the data with the correct answer shown:<br />
<br />
Let us count the number of students we have:<br />
<br />
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">use school
db.students.count()</pre>
The answer will be 200.<br />
<br />
Let's see what Tamika Schildgen's record looks like once you have removed the lowest score:<br />
<br />
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">db.students.find( { _id : 137 } ).pretty( )</pre>
This should be the output:<br />
<br />
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;"><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace; font-size: 0.9em; letter-spacing: 0.4px;">{
"_id" : 137,
"name" : "Tamika Schildgen",
"scores" : [
{
"type" : "exam",
"score" : 4.433956226109692
},
{
"type" : "quiz",
"score" : 65.50313785402548
},
{
"type" : "homework",
"score" : 89.5950384993947
}
]
}</span><span style="color: #31302f; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="font-size: 16px; letter-spacing: 0.4px; white-space: normal;">
</span></span></pre>
<div style="background-color: white; box-sizing: border-box; margin-bottom: 1em; margin-top: 1em;">
To verify that you have completed this task correctly, provide the identity (in the form of their _id) of the student with the highest average in the class with following query that uses the aggregation framework. The answer will appear in the _id field of the resulting document.</div>
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">db.students.aggregate( [
{ '$unwind': '$scores' },
{
'$group':
{
'_id': '$_id',
'average': { $avg: '$scores.score' }
}
},
{ '$sort': { 'average' : -1 } },
{ '$limit': 1 } ] )
</pre>
<div>
<br /></div>
<b><br /></b>
<br />
<div style="text-align: center;">
<span style="background-color: yellow; color: blue;"><b>Solution : 13</b></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-QDTdoE7anI4/WJAPEQSGIJI/AAAAAAAACdU/4e3TkskTnqoUeM9hoAyNXiK7Cl0HJBKLACLcB/s1600/3.1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Homework 3.1 week-3 Mongodb For Developers,m101p,visionfortech" border="0" height="155" src="https://3.bp.blogspot.com/-QDTdoE7anI4/WJAPEQSGIJI/AAAAAAAACdU/4e3TkskTnqoUeM9hoAyNXiK7Cl0HJBKLACLcB/s320/3.1.JPG" title="Homework 3.1 week-3 Mongodb For Developers" width="555" /></a></div>
<br />
<h3 style="text-align: left;">
<span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 3.2 : </u></b></span></span></h3>
<div>
In this homework you will be enhancing the blog project to insert entries into the posts collection. After this, the blog will work. It will allow you to add blog posts with a title, body and tags and have it be added to the posts collection properly.<br />
<br />
We have provided the code that creates users and allows you to login (the assignment from last week). To get started, please download hw3-2and3-3.zip from the Download Handout link and unpack. You will be using these files for this homework, and for HW 3.3.<br />
<br />
The areas where you need to add code are marked with XXX. You need only touch the BlogPostDAO.py file. There are three locations for you to add code for this problem. Scan that file for XXX to see where to work.<br />
<br />
As a reminder, to run your blog you type<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">python blog.py</pre>
<br />
To play with the blog you can navigate to the following URLs<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">http://localhost:8082/
http://localhost:8082/signup
http://localhost:8082/login
http://localhost:8082/newpost</pre>
You will be proving that it works by running our validation script as follows:<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">python validate.py</pre>
You need to run this in a separate terminal window while your blog is running and while the database is running. It makes connections to both to determine if your program works properly. Validate connects to localhost:8082 and expects that mongod is running on localhost on port 27017.<br />
<br />
As before, validate will take some optional arguments if you want to run mongod on a different host or a use an external webserver.<br />
<br />
This project requires Python 2.7. The code is not 3.X compliant.<br />
<br />
Ok, once you get the blog posts working, validate.py will print out a validation code for HW 3.2.<br />
Please enter it below, exactly as shown with no spaces.<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="background-color: yellow;"><span style="color: blue;"><b>Solution : </b><span style="text-align: left;"><b>89jklfsjrlk209jfks2j2ek</b></span></span></span></div>
<div style="text-align: center;">
<span style="background-color: yellow;"><span style="color: blue;"><span style="text-align: left;"><b><br /></b></span></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-vSbUAx8gmi8/WJAQnJBGJ8I/AAAAAAAACdg/6yK02gie_Xwf5A7Z5SdIgIcc7tzaITwlQCLcB/s1600/3.2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Homework 3.2 week-3 Mongodb For Developers,visionfortech" border="0" height="155" src="https://3.bp.blogspot.com/-vSbUAx8gmi8/WJAQnJBGJ8I/AAAAAAAACdg/6yK02gie_Xwf5A7Z5SdIgIcc7tzaITwlQCLcB/s320/3.2.JPG" title="Homework 3.2 week-3 Mongodb For Developers" width="555" /></a></div>
<div style="text-align: center;">
<span style="background-color: yellow;"><span style="color: blue;"><span style="text-align: left;"><b><br /></b></span></span></span></div>
<br /></div>
<h3 style="text-align: left;">
<span style="background-color: yellow; color: blue;"><b><u>Homework 3.3 :</u></b></span></h3>
<div style="text-align: left;">
<br /></div>
In this homework you will add code to your blog so that it accepts comments. You will be using the same code as you downloaded for HW 3.2.<br />
<br />
Once again, the area where you need to work is marked with an XXX in the blogPostDAO.py file. There is just one location that you need to modify. You don't need to figure out how to retrieve comments for this homework because the code you did in 3.2 already pulls the entire blog post (unless you specifically projected to eliminate the comments) and we gave you the code that pulls them out of the JSON document.<br />
<br />
This assignment has fairly little code, but it's a little more subtle than the previous assignment because you are going to be manipulating an array within the Mongo document. For the sake of clarity, here is a document out of the posts collection from a working project.<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">{
"_id" : ObjectId("509df76fbcf1bf5b27b4a23e"),
"author" : "erlichson",
"body" : "This is a blog entry",
"comments" : [
{
"body" : "This is my comment",
"author" : "Andrew Erlichson"
},
{
"body" : "Give me liberty or give me death.",
"author" : "Patrick Henry"
}
],
"date" : ISODate("2012-11-10T06:42:55.733Z"),
"permalink" : "This_is_a_blog_post_title",
"tags" : [
"cycling",
"running",
"swimming"
],
"title" : "This is a blog post title"
}</pre>
where post_slug is the permalink. For the sake of eliminating doubt, the permalink for the example blog post above is http://localhost:8082/post/This_is_a_blog_post_title<br />
<br />
You will run validation.py to check your work, much like the last problem. Validation.py will run through and check the requirements of HW 3.2 and then will check to make sure it can add blog comments, as required by this problem, HW 3.3. It checks the web output as well as the database documents.<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">python validate.py</pre>
Once you have the validation code, please copy and paste in the box below, no spaces.<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="background-color: yellow;"><span style="color: blue;"><b>Solution : </b><span style="text-align: left;"><b>jk1310vn2lkv0j2kf0jkfs</b></span></span></span></div>
<div style="text-align: center;">
<span style="background-color: yellow;"><span style="color: blue;"><span style="text-align: left;"><b><br /></b></span></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-Bfq6vr8FoQ8/WJASAcIWuoI/AAAAAAAACds/8maH2Nf-vskUrYIsEH6_Eqa0tiHYy0kQwCLcB/s1600/3.3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Homework 3.3 week-3 Mongodb For Developers,visionfortech" border="0" height="155" src="https://2.bp.blogspot.com/-Bfq6vr8FoQ8/WJASAcIWuoI/AAAAAAAACds/8maH2Nf-vskUrYIsEH6_Eqa0tiHYy0kQwCLcB/s320/3.3.JPG" title="Homework 3.3 week-3 Mongodb For Developers" width="555" /></a></div>
<h3 style="text-align: left;">
</h3>
Enjoy....!!!!<br />
<br />
Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.<br />
<br />
If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to <a href="http://visionfortech.blogspopt.com/" target="_blank">Visionfortech</a><br />
<br />
<br />
<div style="font-weight: bold;">
<span style="background-color: yellow; color: blue;">Related Post :</span><br />
<span style="background-color: yellow; color: blue;"><br /></span>
<div style="font-weight: normal;">
<b><span style="background-color: white; color: blue; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><span style="font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.in/2017/01/solution-week-1-introduction-m101p-MongoDB-for-Developer.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank"><span style="color: blue;">Week 1 : Introduction : M101P: MongoDB for Developers</span></a></span></span></b></div>
<div style="font-weight: normal;">
<span style="color: blue;"><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><br /></span></b><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.in/2017/01/solution-week-2-CRUD-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 2 : CRUD : M101P: MongoDB for Developers</a></span></b></span></div>
<div style="font-weight: normal;">
<span style="color: blue;"><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><br /></span></b><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.com/2017/01/solution-for-week-3-schema-design-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 3 : Schema Design : M101P: MongoDB for Developers</a></span></b></span></div>
<div style="font-weight: normal;">
<span style="color: blue;"><br /></span><b><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="http://visionfortech.blogspot.com/2017/02/solution-or-answer-for-week-4-performance-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 4 : Performance : M101P: MongoDB for Developers</a></span></span></b></div>
<div style="font-weight: normal;">
<b><span style="color: blue;"><br /></span></b></div>
<div style="font-size: 18.72px;">
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="https://visionfortech.blogspot.in/2017/02/solution-week-five-aggregation-framework-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 5 : Aggregation Framework: M101P: MongoDB for Developers</a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><br /></span></b></div>
<b style="font-size: medium;"><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="http://visionfortech.blogspot.com/2017/03/solution-week-6-aggregation-framework-mongodb-for-developers-m101p.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 6 :Aggregation Framework : M101P: MongoDB for Developers</a></span></span></b></div>
</div>
<h3>
</h3>
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com2tag:blogger.com,1999:blog-9035752464239680661.post-7207962507831694012017-01-22T23:44:00.000-08:002017-03-12T06:19:57.674-07:00[Solution] Week 1 : Introduction : M101P: MongoDB for Developers<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<u style="background-color: yellow;"><span style="color: blue;">[Solution] Week 1 : Introduction : M101P: MongoDB for Developers</span></u></h2>
<div>
<h3 style="text-align: left;">
<u style="background-color: yellow;"><span style="color: blue;"><b><br /></b></span></u><span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 1.1 : </u></b></span></span></h3>
</div>
<div style="text-align: left;">
Install MongoDB on your computer and run it on the standard port.<br />
<br />
Download the HW1-1 from the Download Handout link and uncompress it.<br />
<br />
Use mongorestore to restore the dump into your running mongod. Do this by opening a terminal window (mac) or cmd window (windows) and navigating to the directory so that you are in the parent directory of the dump directory (if you used the default extraction method, it should be hw1/). Now type:<br />
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">mongorestore dump</pre>
<div style="text-align: center;">
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Note you will need to have your path setup correctly to find mongorestore.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Next, go into the Mongo shell, perform a findOne on the collection called hw1 in the database m101. That will return one document. Please provide the value corresponding to the "answer" key from the document returned.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
hint: if you got back a document that looks like { "_id": 1234, "answer": 2468 }, you would put in 2468 (with no spaces) for your answer. This is not the correct number; you should get a different number.<span style="text-align: left;"> </span></div>
<b><u><span style="background-color: yellow; color: blue;"><br /></span></u></b></div>
<div style="text-align: center;">
<span style="background-color: yellow; color: blue;"><b>Answer : 42</b></span></div>
<div style="text-align: center;">
<span style="background-color: yellow; color: blue;"><b><br /></b></span></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-oB8tm3kg62M/WIGjw-eqy8I/AAAAAAAACLk/NKptYYmP2UEfNx1lBlcqwy6XJBZjbk8QQCLcB/s1600/1.1_MongoDB_for_Developer.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Homework 1.1 : Introduction : M101P: MongoDB for Developers,visionfortech,mongodb m101p solutions" border="0" height="185" src="https://4.bp.blogspot.com/-oB8tm3kg62M/WIGjw-eqy8I/AAAAAAAACLk/NKptYYmP2UEfNx1lBlcqwy6XJBZjbk8QQCLcB/s400/1.1_MongoDB_for_Developer.JPG" title="Homework 1.1 : Introduction : M101P: MongoDB for Developers" width="555" /></a></div>
<br />
<div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<h3 style="text-align: left;">
<span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 1.2 : </u></b></span></span></h3>
Get PyMongo installed on your computer. To prove its installed, run the program:<br />
<br />
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">python hw1-2.py</pre>
Note that you will need to get MongoDB installed and the homework dataset imported from the previous homework before attempting this problem.<br />
<br />
This program will print a numeric answer. Please put just the 4-digit number into the box below (no spaces).<br />
<br />
<div style="text-align: center;">
<span style="background-color: yellow;"><b style="color: blue;">Answer : </b><span style="text-align: left;"><span style="color: blue;"><b>1815</b></span></span></span><br />
<span style="background-color: yellow;"><span style="text-align: left;"><span style="color: blue;"><b><br /></b></span></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-dc-U31-dIe4/WIDjeNZa52I/AAAAAAAACLE/duCwuzsWausyOmb6jHs1h7EDaQ5WyAGHwCLcB/s1600/1.2_MongoDB_for_Developer.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Homework 1.2 : Introduction : M101P: MongoDB for Developers,visionfortech,mongodb m101p solutions" border="0" height="185" src="https://2.bp.blogspot.com/-dc-U31-dIe4/WIDjeNZa52I/AAAAAAAACLE/duCwuzsWausyOmb6jHs1h7EDaQ5WyAGHwCLcB/s400/1.2_MongoDB_for_Developer.JPG" title="Homework 1.2 : Introduction : M101P: MongoDB for Developers" width="555" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<h3 style="text-align: left;">
<span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 1.3 : </u></b></span></span></h3>
</div>
<div>
<span style="color: blue;"><span style="background-color: yellow;"><br /></span></span></div>
<div>
<div style="text-align: left;">
We are now going to test that you have bottle installed correctly and can run a bottle-based project. Download the handout and run it as follows:<br />
<br />
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">python hw1-3.py</pre>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
It requires that:<br />
<br />
bottle be installed correctly<br />
your mongodb to be running<br />
you have run mongorestore properly<br />
<br />
From a different terminal window type the following from the command line: curl<br />
<br />
http://localhost:8080/hw1/50<br />
<br />
Alternatively, you can put the url above into your web browser.<br />
<br />
Type the two-digit answer into the box below (no spaces).</div>
<span style="color: blue;"><span style="background-color: yellow;">
</span></span>
<br />
<div style="color: blue;">
<span style="color: blue;"><span style="background-color: yellow;"><span style="background-color: white;"><br /></span></span></span></div>
<span style="color: blue;"><span style="background-color: yellow;">
</span></span>
<br />
<div style="text-align: center;">
<span style="color: blue;"><span style="background-color: yellow;"><span style="background-color: yellow; color: blue;"><b>Answer : 53</b></span></span></span></div>
<span style="color: blue;"><span style="background-color: yellow;">
</span></span>
<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<div style="color: blue;">
<div class="separator" style="clear: both; text-align: center;">
<span style="color: blue;"><span style="background-color: yellow;"><a href="https://1.bp.blogspot.com/-X4hq4-uY8Cc/WIDk3T78XCI/AAAAAAAACLQ/OgnnlY_ZkRwuEr-p0cfDVFnOVy9gbgfWgCLcB/s1600/1.3_MongoDB_for_Developer.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Homework 1.3 : Introduction : M101P: MongoDB for Developers,visionfortech,mongodb m101p solutions" border="0" height="185" src="https://1.bp.blogspot.com/-X4hq4-uY8Cc/WIDk3T78XCI/AAAAAAAACLQ/OgnnlY_ZkRwuEr-p0cfDVFnOVy9gbgfWgCLcB/s400/1.3_MongoDB_for_Developer.JPG" title="Homework 1.3 : Introduction : M101P: MongoDB for Developers" width="555" /></a></span></span></div>
<span style="color: blue;"><span style="background-color: yellow;"><br /></span></span></div>
<div style="color: blue; text-align: left;">
<span style="color: blue;"><span style="background-color: yellow;"><br /></span></span></div>
<div style="text-align: left;">
<div style="color: blue;">
<span style="color: blue;"><span style="background-color: yellow;"><b><br /></b></span></span></div>
<div style="color: blue;">
<span style="color: blue;"><span style="background-color: yellow;"><b><br /></b></span></span></div>
<div style="color: blue;">
<span style="color: blue;"><span style="background-color: yellow;"><b><br /></b></span></span></div>
<div style="color: blue;">
<span style="color: blue;"><span style="background-color: yellow;"><b><br /></b></span></span></div>
<div style="color: blue;">
<span style="color: blue;"><span style="background-color: yellow;"><b><br /></b></span></span></div>
<div style="color: blue;">
<span style="color: blue;"><span style="background-color: yellow;"><b><br /></b></span></span></div>
<div style="color: blue;">
<span style="color: blue;"><span style="background-color: yellow;"><b><br /></b></span></span></div>
<div style="color: blue;">
<span style="color: blue;"><span style="background-color: yellow;"><b><br /></b></span></span></div>
<div style="color: blue;">
<span style="color: blue;"><span style="background-color: yellow;"><b><br /></b></span></span></div>
<div style="color: blue;">
<span style="color: blue;"><span style="background-color: yellow;"><b style="background-color: white;"><br /></b></span></span></div>
<span style="color: blue;"><span style="background-color: white;"><b style="color: blue;"><br /></b>
<b>Enjoy....!!!!</b></span></span></div>
<div style="text-align: left;">
<span style="color: blue;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: left;">
<span style="color: blue;"><span style="background-color: white;">Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.</span></span></div>
<div style="text-align: left;">
<span style="color: blue;"><span style="background-color: white;"><br /></span></span></div>
<div style="text-align: left;">
<span style="color: blue;"><span style="background-color: white;"> If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to<span style="color: blue;"> </span><a href="http://visionfortech.blogspot.com/" style="color: blue;" target="_blank">Visionfortech</a></span></span><br />
<div style="color: blue;">
<span style="color: blue;"><span style="background-color: yellow;"><b><br /></b></span></span></div>
<div style="color: blue;">
<span style="color: blue;"><span style="background-color: yellow;"><b>Related Post :</b></span></span><br />
<br />
<div style="color: black;">
<div style="font-size: medium; font-weight: normal;">
<b><span style="background-color: white; color: blue; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><span style="font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.in/2017/01/solution-week-1-introduction-m101p-MongoDB-for-Developer.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank"><span style="color: blue;">Week 1 : Introduction : M101P: MongoDB for Developers</span></a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<span style="color: blue;"><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><br /></span></b><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.in/2017/01/solution-week-2-CRUD-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 2 : CRUD : M101P: MongoDB for Developers</a></span></b></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="color: blue;"><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><br /></span></b><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.com/2017/01/solution-for-week-3-schema-design-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 3 : Schema Design : M101P: MongoDB for Developers</a></span></b></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="color: blue;"><br /></span><b><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="http://visionfortech.blogspot.com/2017/02/solution-or-answer-for-week-4-performance-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 4 : Performance : M101P: MongoDB for Developers</a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><br /></span></b></div>
<div style="font-size: 18.72px; font-weight: bold;">
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="https://visionfortech.blogspot.in/2017/02/solution-week-five-aggregation-framework-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 5 : Aggregation Framework: M101P: MongoDB for Developers</a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><br /></span></b></div>
<b style="font-size: medium;"><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="http://visionfortech.blogspot.com/2017/03/solution-week-6-aggregation-framework-mongodb-for-developers-m101p.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 6 :Aggregation Framework : M101P: MongoDB for Developers</a></span></span></b></div>
</div>
</div>
<div style="color: black;">
</div>
</div>
</div>
<span style="color: blue;"><span style="background-color: yellow;">
</span></span></div>
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-86200449080906914142017-01-22T23:43:00.001-08:002017-03-12T06:19:48.076-07:00[Solution] Week 2 : CRUD: M101P: MongoDB for Developers<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<u style="background-color: yellow;"><span style="color: blue;">[Solution] Week 2 : CRUD : M101P: MongoDB for Developers</span></u></h2>
<h3 style="text-align: left;">
<span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 2.1 : </u></b></span></span></h3>
<h2 style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: small;"><span style="font-weight: normal;">In this problem, you will be using a collection of student scores that is similar to what we used in the lessons. Please download grades.json from the Download Handout link and import it into your local mongo database as follows:</span></span></div>
<div style="text-align: left;">
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span></div>
</h2>
<h2 style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; font-weight: 300; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; text-align: left; word-break: break-all; word-wrap: normal;">
mongoimport --drop -d students -c grades grades.json</h2>
The dataset contains 4 scores for 200 students.<br />
<br />
First, let's confirm your data is intact; the number of documents should be 800.<br />
<br />
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">use students
db.grades.count()</pre>
<div style="font-size: medium; text-align: left;">
<b><br /></b></div>
You should get 800.<br />
<br />
<br />
This next query, which uses the aggregation framework that we have not taught yet, will tell you the student_id with the highest average score:<br />
<br />
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;"><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace; font-size: 0.9em; letter-spacing: 0.4px;">db.grades.aggregate({'$group':{'_id':'$student_id', 'average':{$avg:'$score'}}}, {'$sort':{'average':-1}}, {'$limit':1})</span><span style="font-family: "times new roman";"><span style="white-space: normal;">
</span></span></pre>
<div>
<div>
The answer should be student_id 164 with an average of approximately 89.3.</div>
<div>
<br /></div>
<div>
Now it's your turn to analyze the data set. Find all exam scores greater than or equal to 65, and sort those scores from lowest to highest.</div>
<div>
<br /></div>
<div>
What is the student_id of the lowest exam score above 65?</div>
</div>
<b><br /></b>
<br />
<div style="font-size: medium; text-align: left;">
<b>Solution :</b></div>
<div style="font-size: medium; font-weight: normal; text-align: left;">
<br /></div>
<div style="font-size: medium; font-weight: normal; text-align: left;">
Query : db.grades.find( { score : { $gte : 65 } } ).sort( { score : 1 } )</div>
<div style="font-size: medium; font-weight: normal; text-align: left;">
<br /></div>
<div style="font-size: medium; font-weight: normal; text-align: left;">
<b><span style="color: blue;"> Answer : 22</span></b></div>
<div style="font-size: medium; font-weight: normal; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; font-size: medium; font-weight: normal;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-RKvkshiCMB8/WIGnyaUvLFI/AAAAAAAACL0/p7tleiVelOUlKvJY3CcwgaOIjgxEZn4TwCLcB/s1600/2.1_MongoDB_for_Developer.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="2.1_MongoDB_for_Developer,visionfortech,Latest Technological Blog" border="0" height="255" src="https://3.bp.blogspot.com/-RKvkshiCMB8/WIGnyaUvLFI/AAAAAAAACL0/p7tleiVelOUlKvJY3CcwgaOIjgxEZn4TwCLcB/s320/2.1_MongoDB_for_Developer.JPG" title="2.1_MongoDB_for_Developer" width="555" /></a></div>
<div style="font-size: medium; font-weight: normal; text-align: left;">
<br /></div>
<div style="text-align: left;">
<h3 style="font-size: medium; font-weight: normal;">
<span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 2.2 : </u></b></span></span></h3>
<h2 style="text-align: center;">
<div style="text-align: left;">
<div style="font-size: medium; font-weight: normal;">
<span style="font-size: small;"><span style="font-weight: normal;"></span></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span></div>
<span style="font-size: small;"><span style="font-weight: normal;">Write a program in the language of your choice that will remove the grade of type "homework" with the lowest score for each student from the dataset in the handout. Since each document is one grade, it should remove one document per student. This will use the same data set as the last problem, but if you don't have it, you can download and re-import.</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: normal;">The dataset contains 4 scores each for 200 students.</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: normal;">First, let's confirm your data is intact; the number of documents should be 800.</span></span></div>
</h2>
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 0.9em; font-weight: normal; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">use students
db.grades.count()</pre>
<div style="font-size: medium; font-weight: normal;">
<b><br /></b></div>
Hint/spoiler: If you select homework grade-documents, sort by student and then by score, you can iterate through and find the lowest score for each student by noticing a change in student id. As you notice that change of student_id, remove the document.<br />
<br />
To confirm you are on the right track, here are some queries to run after you process the data and put it into the grades collection:<br />
<br />
Let us count the number of grades we have:<br />
<span style="background-color: #f8f8f8;"><br /></span>
<br />
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">db.grades.count()</pre>
The result should be 600. Now let us find the student who holds the 101st best grade across all grades:<br />
<br />
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">db.grades.find().sort( { 'score' : -1 } ).skip( 100 ).limit( 1 )</pre>
<div>
<div>
The correct result will be:<br />
<div style="font-size: medium; font-weight: normal;">
<br /></div>
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; font-weight: normal; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">{ "_id" : ObjectId("50906d7fa3c412bb040eb709"), "student_id" : 100, "type" : "homework", "score" : 88.50425479139126 }
</pre>
</div>
<div style="font-size: medium; font-weight: normal;">
<br /></div>
<div>
<div style="font-size: medium; font-weight: normal;">
Now let us sort the students by student_id , and score, while also displaying the type to then see what the top five docs are:</div>
<div style="font-size: medium; font-weight: normal;">
<br /></div>
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;"><span style="color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace; font-size: 0.9em; font-weight: normal; letter-spacing: 0.4px;">db.grades.find( { }, { 'student_id' : 1, 'type' : 1, 'score' : 1, '_id' : 0 } ).sort( { 'student_id' : 1, 'score' : 1, } ).limit( 5 )</span><span style="font-family: "times new roman";"><span style="white-space: normal;">
</span></span></pre>
<div>
The result set should be:</div>
</div>
</div>
<div>
<br /></div>
<div>
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">{ "student_id" : 0, "type" : "quiz", "score" : 31.95004496742112 }
{ "student_id" : 0, "type" : "exam", "score" : 54.6535436362647 }
{ "student_id" : 0, "type" : "homework", "score" : 63.98402553675503 }
{ "student_id" : 1, "type" : "homework", "score" : 44.31667452616328 }
{ "student_id" : 1, "type" : "exam", "score" : 74.20010837299897 }</pre>
</div>
<div style="font-size: medium;">
<br /></div>
To verify that you have completed this task correctly, provide the identity of the student with the highest average in the class with following query that uses the aggregation framework. The answer will appear in the _id field of the resulting document.<br />
<br />
<pre class="code literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">db.grades.aggregate( { '$group' : { '_id' : '$student_id', 'average' : { $avg : '$score' } } }, { '$sort' : { 'average' : -1 } }, { '$limit' : 1 } )
</pre>
<div>
<br /></div>
Enter the student ID below. Please enter just the number, with no spaces, commas or other characters.<br />
<div style="font-size: medium; font-weight: normal;">
<b><br /></b></div>
<div style="font-size: medium; font-weight: normal;">
<div style="text-align: center;">
<b>Solution :</b> <b><span style="color: blue;"> Answer : 54</span></b></div>
</div>
</div>
<h2 style="text-align: center;">
<div style="font-size: medium; font-weight: normal; text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-JGOQtov-abM/WIGq9xjnyzI/AAAAAAAACMA/MmhQiPaKxvky0R74HTb-ihCtfhEQ31fSQCLcB/s1600/2.2_MongoDB_for_Developer.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="2.2_MongoDB_for_Developer,visionfortech,Latest Technological blog" border="0" height="185" src="https://2.bp.blogspot.com/-JGOQtov-abM/WIGq9xjnyzI/AAAAAAAACMA/MmhQiPaKxvky0R74HTb-ihCtfhEQ31fSQCLcB/s320/2.2_MongoDB_for_Developer.JPG" title="2.2_MongoDB_for_Developer" width="555" /></a></div>
<br /></div>
</h2>
<h3 style="text-align: left;">
<span style="color: blue;"><span style="background-color: yellow;"><b><u>Homework 2.3 : </u></b></span></span></h3>
<h2 style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: small;"><span style="font-weight: normal;">Blog User Sign-up and Login</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: normal;">Download the handout and unpack it.</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: normal;">You should see three files at the highest level: blog.py, userDAO.py and sessionDAO.py. There is also a views directory which contains the templates for the project.</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: normal;">The project roughly follows the model/view/controller paradigm. userDAO and sessionDAO.py comprise the model. blog.py is the controller. The templates comprise the view.</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: normal;">If everything is working properly, you should be able to start the blog by typing:</span></span></div>
</h2>
<h3 style="text-align: left;">
<span style="background-color: yellow;"><div style="color: black; font-size: medium; font-weight: normal;">
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; font-weight: normal; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">python blog.py
</pre>
<div style="color: black; font-size: medium; font-weight: normal;">
<br /></div>
<span style="font-size: small;"><span style="font-weight: normal;">Note that this project requires the following python modules be installed on your computer: cgi, hmac, datetime, json, sys, string, hashlib, urllib, urllib2, random, re, pymongo, and bottle. If you have python installed at all, you probably already have most of these installed except pymongo and bottle.</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: normal;">If you have python-setuptools installed, the command "pip" makes this simple. Any other missing packages will show up when validate.py is run, and can be installed in a similar fashion. As of this recording, we are still using the beta version of PyMongo so we will install directly from GitHub. Note that this directions are identical to what we taught you within the lessons and you should already have PyMongo 3.x and bottle installed. If not, use the following commands.s.</span></span></div>
<div style="color: black; font-size: medium; font-weight: normal;">
<br /></div>
<div style="color: black; font-size: medium; font-weight: normal;">
First, let's confirm your data is intact; the number of documents should be 800.</div>
<div style="color: black; font-size: medium; font-weight: normal;">
<b><br /></b></div>
<div style="color: black; font-size: medium; font-weight: normal;">
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; font-weight: normal; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">$ pip install https://github.com/mongodb/mongo-python-driver/archive/3.0b1.tar.gz
$ pip install bottle</pre>
<span style="font-size: small;"><span style="font-weight: normal;">If you go to http://localhost:8082 you should see a message, "this is a placeholder for the blog"</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: normal;">Here are some URLs that must work when you are done.</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<br />
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; font-weight: 300; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">http://localhost:8082/signup
http://localhost:8082/login
http://localhost:8082/logout</pre>
</div>
<div style="color: black; font-size: medium; font-weight: normal;">
<br /></div>
<div style="color: black; font-size: medium; font-weight: normal;">
This next query, which uses the aggregation framework that we have not taught yet, will tell you the student_id with the highest average score:</div>
<div style="color: black; font-size: medium; font-weight: normal;">
<div style="text-align: center;">
<br /></div>
</div>
<div style="color: black; font-size: medium; font-weight: normal;">
<div style="text-align: center;">
<b style="color: black; font-size: medium; font-weight: normal;">Solution :</b><span style="font-size: small;"><span style="font-weight: normal;"> </span></span><span style="text-align: left;"><span style="color: blue; font-size: small;">jkfds5834j98fnm39njf0920f02</span></span></div>
<div style="text-align: center;">
<span style="text-align: left;"><span style="color: blue; font-size: small;"><br /></span></span></div>
</div>
<div style="color: black; font-size: medium; font-weight: normal;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-DK13TgtRpRs/WIGtVNg2TSI/AAAAAAAACMI/zb5MvPzSGkwqJmtJt_3JdDkesF4tUq-DwCLcB/s1600/2.3_MongoDB_for_Developer.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="2.3_MongoDB_for_Developer,visionfortech" border="0" height="185" src="https://1.bp.blogspot.com/-DK13TgtRpRs/WIGtVNg2TSI/AAAAAAAACMI/zb5MvPzSGkwqJmtJt_3JdDkesF4tUq-DwCLcB/s400/2.3_MongoDB_for_Developer.JPG" title="2.3_MongoDB_for_Developer" width="555" /></a></div>
<br /></div>
<div class="separator" style="clear: both; color: black; font-size: medium; font-weight: normal;">
</div>
<div class="separator" style="clear: both; color: black; font-size: medium; font-weight: normal; text-align: center;">
</div>
<div style="color: black; font-size: medium; font-weight: normal;">
</div>
</span></h3>
<h2 style="text-align: center;">
<div style="font-size: medium; font-weight: normal; text-align: left;">
<u style="background-color: yellow; color: blue;"><b>Homework 2.4 :</b></u></div>
</h2>
<h2 style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: small;"><span style="font-weight: normal;">Which of the choices below is the title of a movie from the year 2013 that is rated PG-13 and won no awards? Please query the video.movieDetails collection to find the answer.</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: normal;">NOTE: There is a dump of the video database included in the handouts for the "Creating Documents" lesson. Use that data set to answer this question.</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-mjFHGdYNUWA/WIWq27aSZmI/AAAAAAAACQk/6YYY2F1Mm0AhUIdJrl3LBExCUDUN75oDgCLcB/s1600/2.4_MongoDB_for_Developer.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="2.4_MongoDB_for_Developer,visionfortech,Latest Technological Blog" border="0" height="255" src="https://3.bp.blogspot.com/-mjFHGdYNUWA/WIWq27aSZmI/AAAAAAAACQk/6YYY2F1Mm0AhUIdJrl3LBExCUDUN75oDgCLcB/s400/2.4_MongoDB_for_Developer.JPG" title="2.4_MongoDB_for_Developer" width="555" /></a></div>
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span></div>
<div style="font-size: medium; font-weight: normal; text-align: left;">
<br /></div>
</h2>
<h3 style="text-align: left;">
<span style="background-color: yellow;"><span style="color: blue;"><b><u>Homework 2.5 :</u></b></span></span></h3>
<h2 style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: small;"><span style="font-weight: normal;">Using the video.movieDetails collection, how many movies list "Sweden" second in the the list of countries.</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: normal;">NOTE: There is a dump of the video database included in the handouts for the "Creating Documents" lesson. Use that data set to answer this question.</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-wzdpgtLUjbA/WIWra8LxN-I/AAAAAAAACQo/iJPmB2DgzP47jB7PcJyZe1jtPC1g3vWJQCLcB/s1600/2.5_MongoDB_for_Developer.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="2.5_MongoDB_for_Developer,visionfortech,Latest Technological Blog" border="0" height="255" src="https://2.bp.blogspot.com/-wzdpgtLUjbA/WIWra8LxN-I/AAAAAAAACQo/iJPmB2DgzP47jB7PcJyZe1jtPC1g3vWJQCLcB/s640/2.5_MongoDB_for_Developer.JPG" title="2.5_MongoDB_for_Developer" width="555" /></a></div>
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span></div>
</h2>
<h2 style="text-align: center;">
<div style="font-size: medium; font-weight: normal; text-align: left;">
<br /></div>
<div style="font-size: medium; font-weight: normal; text-align: left;">
Enjoy....!!!!</div>
<div style="font-size: medium; font-weight: normal; text-align: left;">
<br /></div>
<div style="font-size: medium; font-weight: normal; text-align: left;">
Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.</div>
<div style="font-size: medium; font-weight: normal; text-align: left;">
<br /></div>
<div style="font-size: medium; text-align: left;">
<div style="font-weight: normal;">
If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to <a href="http://visionfortech.blogspopt.com/" target="_blank">Visionfortech</a></div>
<div style="font-weight: normal;">
<br /></div>
<span style="background-color: yellow; color: blue;">Related Post :</span><br />
<div style="font-weight: normal;">
<br /></div>
<div style="font-weight: normal;">
<div style="font-size: medium; font-weight: normal;">
<b><span style="background-color: white; color: blue; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><span style="font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.in/2017/01/solution-week-1-introduction-m101p-MongoDB-for-Developer.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank"><span style="color: blue;">Week 1 : Introduction : M101P: MongoDB for Developers</span></a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<span style="color: blue;"><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><br /></span></b><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.in/2017/01/solution-week-2-CRUD-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 2 : CRUD : M101P: MongoDB for Developers</a></span></b></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="color: blue;"><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"><br /></span></b><b><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">- <a href="https://visionfortech.blogspot.com/2017/01/solution-for-week-3-schema-design-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 3 : Schema Design : M101P: MongoDB for Developers</a></span></b></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="color: blue;"><br /></span><b><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="http://visionfortech.blogspot.com/2017/02/solution-or-answer-for-week-4-performance-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 4 : Performance : M101P: MongoDB for Developers</a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><br /></span></b></div>
<div style="font-size: 18.72px; font-weight: bold;">
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="https://visionfortech.blogspot.in/2017/02/solution-week-five-aggregation-framework-m101p-mongodb-for-developers.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 5 : Aggregation Framework: M101P: MongoDB for Developers</a></span></span></b></div>
<div style="font-size: medium; font-weight: normal;">
<b><span style="color: blue;"><br /></span></b></div>
<b style="font-size: medium;"><span style="color: blue;"><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">-</span><span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;"> <a href="http://visionfortech.blogspot.com/2017/03/solution-week-6-aggregation-framework-mongodb-for-developers-m101p.html" style="font-size: 14.85px; line-height: 20.79px; text-decoration: none;" target="_blank">Week 6 :Aggregation Framework : M101P: MongoDB for Developers</a></span></span></b></div>
</div>
</div>
</h2>
<div>
<div style="text-align: center;">
<div style="text-align: left;">
<h3 style="color: black;">
<span style="color: blue;"><span style="background-color: yellow;"></span></span></h3>
<div style="color: black;">
<div>
</div>
</div>
</div>
</div>
</div>
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com0tag:blogger.com,1999:blog-9035752464239680661.post-24194258381854075112017-01-09T05:18:00.001-08:002021-10-29T03:16:08.000-07:00[Solution] Draw Flowchart with drag and drop facility using HTML and JavaScript(Flowchart Builder)<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<span style="background-color: yellow;"><span style="color: blue;"><u>Draw Flowchart with drag and drop facility using HTML and JavaScript(Flowchart Builder)</u></span></span></h2>
<div>
<span style="background-color: yellow;"><span style="color: blue;"><u><br /></u></span></span></div>
<div>
In this post we are going to provide a solution how a developer can embed his/her own flowchart builder into their application.</div>
<div>
<br /></div>
<div style="text-align: left;">
This post contains the source code for that.You can download that code from <a href="https://github.com/visionfortech/Draw-flowchart-with-drag-and-drop-in-HTML-and-JavaScript"><b>Download code from GitHub</b></a></div>
<div>
<br /></div>
<div>
At some point of time all developers want to Embed flowchart builder into their application.But they may not know how can they do that so here is the solution how they can embed flowchart into their own application.By using this code End user can draw their own flowchart with just simple drag and drop and simply connect those nodes to make it better understandable.</div>
<div>
<br /></div>
<div>
Every Developer,programmer or student knows what the flowchart is so we are not going to discuss here what flowchart is.</div>
<div>
<br /></div>
<div>
So for Brief Flowchart is a diagram which shows user that what is the flow of the program or an application </div>
<div>
<br /></div>
<div>
So for that you just need to write a small HTML code for that and below is the code.</div>
<div>
<br /></div>
<div>
<b><u>HTML File</u></b></div>
<div>
<br /></div>
<div>
You just need to include the <b>flowchart.js</b> library into your HTML application and you can <b>download </b>that from <a href="https://github.com/visionfortech/Draw-flowchart-with-drag-and-drop-in-HTML-and-JavaScript"><b>flowhchart.js</b></a></div>
<div>
<br /></div>
<div>
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;"><<span class="pl-ent" style="background-color: white; box-sizing: border-box; color: #63a35c; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 12px; letter-spacing: normal;">script</span><span style="background-color: white; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 12px; letter-spacing: normal;"> </span><span class="pl-e" style="background-color: white; box-sizing: border-box; color: #795da3; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 12px; letter-spacing: normal;">type</span><span style="background-color: white; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 12px; letter-spacing: normal;">=</span><span class="pl-s" style="background-color: white; box-sizing: border-box; color: #183691; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 12px; letter-spacing: normal;"><span class="pl-pds" style="box-sizing: border-box;">'</span>text/javascript<span class="pl-pds" style="box-sizing: border-box;">'</span></span><span style="background-color: white; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 12px; letter-spacing: normal;"> </span><span class="pl-e" style="background-color: white; box-sizing: border-box; color: #795da3; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 12px; letter-spacing: normal;">src</span><span style="background-color: white; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 12px; letter-spacing: normal;">=</span><span class="pl-s" style="background-color: white; box-sizing: border-box; color: #183691; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 12px; letter-spacing: normal;"><span class="pl-pds" style="box-sizing: border-box;">"</span>js/flowchart.js<span class="pl-pds" style="box-sizing: border-box;">"</span></span><span style="background-color: white; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 12px; letter-spacing: normal;">></span></pre>
</div>
<div>
<span style="background-color: white; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 12px; letter-spacing: normal;"><br /></span></div>
<div>
<b>Output : </b></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-fH6ZdbT4_ok/WHHe-dOR1wI/AAAAAAAAB8Y/AZD0KRK-vQEtpe2mIUQQSCH6GTKSSHKgwCLcB/s1600/flowchart_visionfortech.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Latest Technological Blog,draw flowchart using html and javascript with drag and drop" border="0" height="372" src="https://1.bp.blogspot.com/-fH6ZdbT4_ok/WHHe-dOR1wI/AAAAAAAAB8Y/AZD0KRK-vQEtpe2mIUQQSCH6GTKSSHKgwCLcB/s640/flowchart_visionfortech.JPG" title="flochart_visionfortech" width="585" /></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>
You can also get your drawn chart data into json format.</div>
<div>
<br /></div>
<div>
<b>Get chart into JSON Format : </b></div>
<div>
<br /></div>
<div>
<pre class="literal-block" style="background-color: #f8f8f8; border-radius: 0px !important; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.9em; letter-spacing: 0.4px; line-height: 1.4; margin-bottom: 10px; overflow: auto; padding: 6px 10px; word-break: break-all; word-wrap: normal;">console.log(myDiagram.model.toJson());</pre>
</div>
<div>
<span style="background-color: white; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 12px; letter-spacing: normal;"><br /></span></div>
<div>
<span style="background-color: white; color: #1f1f1f; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px;">Enjoy....!!!!</span><br />
<br style="background-color: white; color: #1f1f1f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.85px;" />
<span style="background-color: white; color: #1f1f1f; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px;">Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.</span><br />
<span style="color: #1f1f1f; font-family: arial, tahoma, helvetica, freesans, sans-serif;"><span style="font-size: 14.85px;"><br /></span></span>
<span style="color: #1f1f1f; font-family: arial, tahoma, helvetica, freesans, sans-serif;"><span style="font-size: 14.85px;">I hope this article will help to understand the Javascript Concept. If you want to know more about Javascript check out <a href="http://www.visionfortech.com/p/javascript.html" target="_blank">Javascript World</a></span></span><br />
<span style="color: #1f1f1f; font-family: arial, tahoma, helvetica, freesans, sans-serif;"><span style="font-size: 14.85px;"><br /></span></span>
<span style="background-color: white; color: #1f1f1f; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px;"> If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to </span><a href="http://visionfortech.blogspopt.com/" style="background-color: white; color: #1c005f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.85px; text-decoration: none;" target="_blank">Visionfortech</a></div>
<div>
<br /></div>
</div>
Mohini Sonihttp://www.blogger.com/profile/08765265278757093131noreply@blogger.com8