tag:blogger.com,1999:blog-30473643084764733222024-03-13T06:05:00.002+05:30i-visionblog A Personal Tech Blog shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.comBlogger100125tag:blogger.com,1999:blog-3047364308476473322.post-28952465831680735302022-06-01T07:22:00.005+05:302022-06-01T07:23:03.168+05:30Setting up Tizen App Development Environment - All about Installation, Emulator, Remote Watch Device Setup - Part 1<p>Using and building applications for Android Wearables has always been a dream for me since 2015. Unfortunately, the cost and access to such watches 5 years back made them impossible to explore and debug in real-time. Luckily, around 2021 I got my first <b>Samsung Wearable Watch 4</b> model in Canada 🍁 with my employer's wellness benefits. However, I used them to track calories burnt, alarms, & alerts. Samsung Health is one of my favorite applications, which creates a competitive environment to challenge people online.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh50w0KnrrSizeVPRuGrQpyut7q_Ym3i-MzDbRMX9iT5-PZRcXXVNT_WPKO2_RpjzYJaB4MJn0TL7H9K7GYZuKJi5O5I-pZI_Tigjmic67yRqZ0dq4_CUzAxwTEf7si_Q9k-iMil1Aq6GCU1lodiK0nm9XLu_YNWqyxT1g_dRckkpSX3a9ocmeUJIZjsw/s1280/IMG-20211129-WA0003.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Setting up Tizen Development Environment - All about Installation, Emulator, Remote Watch Device Setup" border="0" data-original-height="853" data-original-width="1280" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh50w0KnrrSizeVPRuGrQpyut7q_Ym3i-MzDbRMX9iT5-PZRcXXVNT_WPKO2_RpjzYJaB4MJn0TL7H9K7GYZuKJi5O5I-pZI_Tigjmic67yRqZ0dq4_CUzAxwTEf7si_Q9k-iMil1Aq6GCU1lodiK0nm9XLu_YNWqyxT1g_dRckkpSX3a9ocmeUJIZjsw/w400-h266/IMG-20211129-WA0003.jpg" title="Setting up Tizen Development Environment - All about Installation, Emulator, Remote Watch Device Setup" width="400" /></a></div><div><br /></div>After a while, I was curious about Samsung App development and started reading through docs and wiki to learn the basics quickly. Fortunately, Tizen App development is similar to Android app development with its own IDE interface. <i>Let's explore them one by one to set up the environment for building a stock ticker application on a watch in a series of a blog posts.</i><div><br /></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinLvxeNjYAw7af3B8BzVilDXxsYqwFTzH3votwXU1-ZiD5gStqsGRSaABw9Y5I6rSk6nQs1DVedyreTT2yajQ5dWIRCnA3_Q8BpqXJErqFTPmdR8of3vItqsNxMO49mI3GO38Ug05BxPAzQ3hsovtgmunUW55ih1anRAqla9e5xP9gw29yPxPgr7VX3A/s803/emulator_window_w.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Setting up Tizen App Development Environment - All about Installation, Emulator, Remote Watch Device Setup" border="0" data-original-height="803" data-original-width="800" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinLvxeNjYAw7af3B8BzVilDXxsYqwFTzH3votwXU1-ZiD5gStqsGRSaABw9Y5I6rSk6nQs1DVedyreTT2yajQ5dWIRCnA3_Q8BpqXJErqFTPmdR8of3vItqsNxMO49mI3GO38Ug05BxPAzQ3hsovtgmunUW55ih1anRAqla9e5xP9gw29yPxPgr7VX3A/w319-h320/emulator_window_w.png" title="Setting up Tizen App Development Environment - All about Installation, Emulator, Remote Watch Device Setup" width="319" /></a></div></div><h3 style="text-align: left;">Requirements:</h3><div>- Preferably 8 Gb RAM machine comparing Android Studio, which requires tons of RAM.</div><div>- < 5 Gb of Storage</div><div>- Samsung Watch to have live debugging enabled. (optional)</div><div>- Virtualization is enabled on the laptop to run the emulator.</div><h3 style="text-align: left;">Installation:</h3><div>Head over to the <a href="https://developer.tizen.org/development/tizen-studio/download" rel="nofollow" target="_blank">Tizen </a>site to grab the IDE application and make sure to install them.</div><div><ul style="text-align: left;"><li>Install Watch Development SDK 3+</li><li>Mobile SDK is optional</li><li>From extras > choose Certificate Manager Addon</li></ul><div>Install the relevant SDK to have them offline to build quickly and deploy.</div></div><h3 style="text-align: left;">Certificate Profile Manager:</h3><div><b><span style="color: red;">Make sure to create your own signing certificate by choosing "Samsung" as your primary way. This has been discussed in <a href="https://stackoverflow.com/questions/63761236/tizen-watch-app-shows-signing-error-when-trying-to-install-on-galaxy-watch" rel="nofollow" target="_blank">Stackoverflow</a> as none of the developer sites talks about the issue.</span></b></div><div><b><br /></b></div><div>- Create a new certificate and sign in to your Samsung account to accept the terms.</div><div><br /></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIyvTg8JxItypae35mPJE8PyJoejCreYpadVzKxVS5kZdkCkz5XWcFWkwq4ep1E3uSebwNckI8crUAlmAyVCcvFZQ9RSc2Ff6bsuUNiOKAUgwOQtuOruC8iak3YkJe6GGbkqAenImYtL1ThN5CYxLIL-zo0xP9pvR0IxjqW2tzLknNzPBqAp_PtET2Q/s686/cert_reg_manage_cert.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Setting up Tizen App Development Environment - All about Installation, Emulator, Remote Watch Device Setup" border="0" data-original-height="553" data-original-width="686" height="323" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIyvTg8JxItypae35mPJE8PyJoejCreYpadVzKxVS5kZdkCkz5XWcFWkwq4ep1E3uSebwNckI8crUAlmAyVCcvFZQ9RSc2Ff6bsuUNiOKAUgwOQtuOruC8iak3YkJe6GGbkqAenImYtL1ThN5CYxLIL-zo0xP9pvR0IxjqW2tzLknNzPBqAp_PtET2Q/w400-h323/cert_reg_manage_cert.png" title="Setting up Tizen App Development Environment - All about Installation, Emulator, Remote Watch Device Setup" width="400" /></a></div></div><div><br /></div><div><a href="https://docs.tizen.org/application/tizen-studio/common-tools/certificate-registration/" rel="nofollow" target="_blank">Here</a> is the complete step-by-step way to create and save the certificate profile.</div><h3 style="text-align: left;">Emulator and Watch Setup:</h3><div>Now that we have successfully set the Tizen SDK with signing certificates, We'll next pivot to develop a sample hello world app that successfully deploys on both emulator and actual watch device in less than 10 minutes. And, that will be covered in the next blog post.</div><div><br /></div><div>Until then, stay tuned. For bugs/hugs feel free to comment below. Share is care.</div>shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0Canada56.130366 -106.34677127.820132163821157 -141.503021 84.440599836178848 -71.190521tag:blogger.com,1999:blog-3047364308476473322.post-3247493077020431882022-05-31T08:40:00.001+05:302022-05-31T08:40:28.969+05:30Odometer.js Animated Number Counter From Zero To Value - JavaScript Animation Part 2<p>The last time when I wrote <a href="https://www.i-visionblog.com/2014/11/jquery-animated-number-counter-from-zero-to-value-jquery-animation.html" target="_blank">Animated Number Counter From Zero To Value</a> post around 2014, there was a substantial unexpected appreciation for this post as it was one of the first blog posts describing the methodology to animate numbers. However, It lacks a few formating and configurations for modern currency usage, number formatting in finance, and other sectors. So, this time I had to either add them as a feature or find some great library to do that. Fortunately, Hubspot (NYSE: HUBS) has open-sourced one of its implementation similar to an <a href="https://www.i-visionblog.com/2014/11/jquery-animated-number-counter-from-zero-to-value-jquery-animation.html" target="_blank">animated number counter from zero to value</a>. I'm explaining the odometer.js library in this blog post with a small demo.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRiMpb1SjlKjA6MkS1a1yrQiGzcFtPzUBEZE54v2rjyCQIQfLMiXcBY5028EJSFdI5tmdTodOgOYSPZooVJvEoU2eUczeKDCzuIiSHHNI5kSl8mYZGG-_cB794qK9HfWYbYE7Rn88sqc5eytoF68QPfRQLo14jyDAhy5kZcYOgqeXJB_Lkx8Z8iAj7Rg/s738/anim.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Odometer.js Animated Number Counter From Zero To Value - JavaScript Animation Part 2" border="0" data-original-height="397" data-original-width="738" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRiMpb1SjlKjA6MkS1a1yrQiGzcFtPzUBEZE54v2rjyCQIQfLMiXcBY5028EJSFdI5tmdTodOgOYSPZooVJvEoU2eUczeKDCzuIiSHHNI5kSl8mYZGG-_cB794qK9HfWYbYE7Rn88sqc5eytoF68QPfRQLo14jyDAhy5kZcYOgqeXJB_Lkx8Z8iAj7Rg/w400-h215/anim.png" title="Odometer.js Animated Number Counter From Zero To Value - JavaScript Animation Part 2" width="400" /></a></div><h3 style="text-align: left;"><u>Install</u></h3><div>In the traditional way, contrary to npm install nowadays just include script tag and CSS stylesheet import for theme support.</div><p><span style="font-family: Nunito Sans;"><b><link rel="stylesheet" href="<span style="color: red;">http://github.hubspot.com/odometer/themes/odometer-theme-default.css</span>" /></b></span></p><p><span style="font-family: Nunito Sans;"><b><script src="<span style="color: red;">http://github.hubspot.com/odometer/odometer.js</span>"></script></b></span></p><p><span style="font-family: Nunito Sans;"><b><br /></b></span></p><h3 style="text-align: left;"><u>Animated Number Counter from Zero to Value</u></h3><div>As simple as JQuery API, this time find the reference in the DOM and set up a few configurations to start the animation rolling.</div><div><br /></div><div><div><b><span style="font-family: helvetica;">var odometerRef = document.querySelector(".odometer");</span></b></div><div><b><span style="font-family: helvetica;"><br /></span></b></div><div><b><span style="font-family: helvetica;">od = new <span style="color: red;">Odometer</span>({</span></b></div><div><b><span style="font-family: helvetica;"> el: </span></b><b><span style="font-family: helvetica;">odometerRef</span></b><b><span style="font-family: helvetica;">,</span></b></div><div><span style="font-family: helvetica;"><b> value: 0, // initial value</b></span></div><div><b><span style="font-family: helvetica;"> format: "(,ddd)",</span></b></div><div><b><span style="font-family: helvetica;"> theme: "default"</span></b></div><div><b><span style="font-family: helvetica;">});</span></b></div></div><div><b><span style="font-family: helvetica;"><br /></span></b></div><div><span style="font-family: inherit;">This time we have theme and format support to customize the numbers displayed in the DOM. Feel free to play with the configuration and themes listed <a href="https://github.hubspot.com/odometer/" rel="nofollow" target="_blank">here</a>. </span></div><div><span style="font-family: inherit;"><b><i><br /></i></b></span></div><div><span style="font-family: inherit;"><b><i>Finally, time to update the values:</i></b></span></div><div><span style="font-family: inherit;"><br /></span></div><div><div><b><span style="font-family: helvetica;">setInterval(function () {</span></b></div><div><b><span style="font-family: helvetica;"> qty = qty + 15000;</span></b></div><div><b><span style="font-family: helvetica;"> <span style="color: red;"> odometer.innerHTML = qty++;</span></span></b></div><div><b><span style="font-family: helvetica;">}, 3000);</span></b></div></div><div><b><span style="font-family: helvetica;"><br /></span></b></div><div><span style="font-family: inherit;">to simulate the value updation, I have utilized setInterval from core javascript to run the function on a defined interval to update the odometer value. </span></div><h3 style="text-align: left;"><span style="font-family: inherit;"><a href="https://codepen.io/shivasurya/pen/PoQRqrd" rel="nofollow" target="_blank">Demo</a>:</span></h3><div><p class="codepen" data-default-tab="html,result" data-height="512.9629516601562" data-slug-hash="PoQRqrd" data-user="shivasurya" style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 512.963px; justify-content: center; margin: 1em 0px; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/shivasurya/pen/PoQRqrd">
Odometer.js Animated Number Counter From Zero To Value - JavaScript Animation Part 2 - i-visionblog</a> by s.shivasurya (<a href="https://codepen.io/shivasurya">@shivasurya</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></div><div><span style="font-family: inherit;"><br /></span></div><div><span style="font-family: inherit;">Whenever there is a change in the value, the odometer observes the change and reflects with ease animation. <i>Thus, we have more control now and with a lot of formating and theming options. </i>Imagine building a Stock ticker with an odometer with fluctuation in prices, and a Gasoline meter which odometer.js comes in handy with a few API calls.</span></div><div><span style="font-family: inherit;"><br /></span></div><div><span style="font-family: inherit;">Kudos to the <b>Hubspot </b>team 💗and the fantastic CRM product they have built.</span></div><div><span style="font-family: inherit;"><br /></span></div><div><span style="font-family: inherit;">That's all for now, meet you soon in the next blog post. Bugs & Hugs, feel free to comment below. Share is care.</span></div>shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0Toronto, ON, Canada43.653226 -79.383184315.342992163821151 -114.5394343 71.963459836178842 -44.226934299999996tag:blogger.com,1999:blog-3047364308476473322.post-19028132353710327192022-01-04T07:05:00.007+05:302022-01-04T07:06:34.707+05:30LRU Cache Implementation LeetCode Solution<p>Idea</p><p>To implement an LRU Cache data structure to store and retrieve data in constant time i.e., O(1). However, We'll have to look for an existing data structure that can perform both store and retrieval processes in almost constant time. HashMap or Hashing generally can help here to efficiently store and retrieve them but with a caveat of not storing them in the least recently used order.</p><p>If you're new to LRU Cache, I would suggest you check out <a href="https://www.youtube.com/watch?v=d7C1YxD5Fsc" rel="nofollow" target="_blank">this video</a> first.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiPUkEB_rSdAf1P757HMNi1t2Dg8EC3-hNev6TSS6AaG98Bn9Y6z0zYYDCQCDBZk--LDJSIcvKNnULwjZbG9UBbbVtDplm33QFIQCRVZpcuqyl1mr9vHPhhnqTV0DTCge-IlrDTDS8iO6SZSZyjpCqKUPvHzK_kIMvQnd7LwKqEyAv7X-dEg4GGOPQdrw=s1200" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1192" height="320" src="https://blogger.googleusercontent.com/img/a/AVvXsEiPUkEB_rSdAf1P757HMNi1t2Dg8EC3-hNev6TSS6AaG98Bn9Y6z0zYYDCQCDBZk--LDJSIcvKNnULwjZbG9UBbbVtDplm33QFIQCRVZpcuqyl1mr9vHPhhnqTV0DTCge-IlrDTDS8iO6SZSZyjpCqKUPvHzK_kIMvQnd7LwKqEyAv7X-dEg4GGOPQdrw=s320" width="318" /></a></div><br /><p><br /></p><p><b>Explanation</b></p><p>Before jumping into the code snippet, The general idea behind this implementation will require DoublyLinkedList and HashMap internally to make this magic happen.</p><p>1. DoublyLinkedList is capable of managing the usage order in almost constant time.</p><p> - Move to Head</p><p> - Remove Object</p><p> - Add Object </p><p>2. HashMap is capable of serving the get and putting a request in almost constant time.</p><p>Why not merge them and form an LRU data structure.</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div>class LRUCache {</div><div><br /></div><div> <span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">DoublyLinkedListNode</span> {</div><div> <span style="color: #4ec9b0;">int</span> <span style="color: #9cdcfe;">key</span>;</div><div> <span style="color: #4ec9b0;">int</span> <span style="color: #9cdcfe;">value</span>;</div><div> <span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #9cdcfe;">previous</span>;</div><div> <span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #9cdcfe;">next</span>;</div><div> }</div><div> </div><div> <span style="color: #569cd6;">private</span> <span style="color: #4ec9b0;">void</span> <span style="color: #dcdcaa;">addNode</span>(<span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #9cdcfe;">node</span>) {</div><div> <span style="color: #9cdcfe;">node</span>.<span style="color: #9cdcfe;">previous</span> = <span style="color: #9cdcfe;">head</span>;</div><div> <span style="color: #9cdcfe;">node</span>.<span style="color: #9cdcfe;">next</span> = <span style="color: #9cdcfe;">head</span>.<span style="color: #9cdcfe;">next</span>;</div><div> </div><div> <span style="color: #9cdcfe;">head</span>.<span style="color: #9cdcfe;">next</span>.<span style="color: #9cdcfe;">previous</span> = <span style="color: #9cdcfe;">node</span>;</div><div> <span style="color: #9cdcfe;">head</span>.<span style="color: #9cdcfe;">next</span> = <span style="color: #9cdcfe;">node</span>;</div><div> }</div><div> </div><div> <span style="color: #569cd6;">private</span> <span style="color: #4ec9b0;">void</span> <span style="color: #dcdcaa;">removeNode</span>(<span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #9cdcfe;">node</span>) {</div><div> <span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #9cdcfe;">previousNode</span> = <span style="color: #9cdcfe;">node</span>.<span style="color: #9cdcfe;">previous</span>;</div><div> <span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #9cdcfe;">nextNode</span> = <span style="color: #9cdcfe;">node</span>.<span style="color: #9cdcfe;">next</span>;</div><div> </div><div> <span style="color: #9cdcfe;">previousNode</span>.<span style="color: #9cdcfe;">next</span> = <span style="color: #9cdcfe;">nextNode</span>;</div><div> <span style="color: #9cdcfe;">nextNode</span>.<span style="color: #9cdcfe;">previous</span> = <span style="color: #9cdcfe;">previousNode</span>;</div><div> }</div><div> </div><div> <span style="color: #569cd6;">private</span> <span style="color: #4ec9b0;">void</span> <span style="color: #dcdcaa;">moveToHead</span>(<span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #9cdcfe;">node</span>) {</div><div> <span style="color: #dcdcaa;">removeNode</span>(<span style="color: #9cdcfe;">node</span>);</div><div> <span style="color: #dcdcaa;">addNode</span>(<span style="color: #9cdcfe;">node</span>);</div><div> }</div><div> </div><div> <span style="color: #569cd6;">private</span> <span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #dcdcaa;">popTail</span>() {</div><div> <span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #9cdcfe;">node</span> = <span style="color: #9cdcfe;">tail</span>.<span style="color: #9cdcfe;">previous</span>;</div><div> <span style="color: #dcdcaa;">removeNode</span>(<span style="color: #9cdcfe;">node</span>);</div><div> <span style="color: #c586c0;">return</span> <span style="color: #9cdcfe;">node</span>;</div><div> }</div><div> </div><div> <span style="color: #569cd6;">private</span> <span style="color: #4ec9b0;">Map</span><<span style="color: #4ec9b0;">Integer</span>, <span style="color: #4ec9b0;">DoublyLinkedListNode</span>> <span style="color: #9cdcfe;">cache</span> = <span style="color: #c586c0;">new</span> <span style="color: #dcdcaa;">HashMap</span><>();</div><div> <span style="color: #569cd6;">private</span> <span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #9cdcfe;">head</span>, <span style="color: #9cdcfe;">tail</span>;</div><div> <span style="color: #569cd6;">private</span> <span style="color: #4ec9b0;">int</span> <span style="color: #9cdcfe;">capacity</span>;</div><div> <span style="color: #569cd6;">private</span> <span style="color: #4ec9b0;">int</span> <span style="color: #9cdcfe;">size</span>;</div><br /><div> <span style="color: #569cd6;">public</span> <span style="color: #dcdcaa;">LRUCache</span>(<span style="color: #4ec9b0;">int</span> <span style="color: #9cdcfe;">capacity</span>) {</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">size</span> = <span style="color: #b5cea8;">0</span>;</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">capacity</span> = <span style="color: #9cdcfe;">capacity</span>;</div><div> </div><div> <span style="color: #9cdcfe;">head</span> = <span style="color: #c586c0;">new</span> <span style="color: #dcdcaa;">DoublyLinkedListNode</span>();</div><div> <span style="color: #9cdcfe;">tail</span> = <span style="color: #c586c0;">new</span> <span style="color: #dcdcaa;">DoublyLinkedListNode</span>();</div><div> </div><div> <span style="color: #9cdcfe;">head</span>.<span style="color: #9cdcfe;">next</span> = <span style="color: #9cdcfe;">tail</span>;</div><div> <span style="color: #9cdcfe;">tail</span>.<span style="color: #9cdcfe;">previous</span> = <span style="color: #9cdcfe;">head</span>;</div><div> }</div><div> </div><div> <span style="color: #569cd6;">public</span> <span style="color: #4ec9b0;">int</span> <span style="color: #dcdcaa;">get</span>(<span style="color: #4ec9b0;">int</span> <span style="color: #9cdcfe;">key</span>) {</div><div> <span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #9cdcfe;">cacheNode</span> = <span style="color: #9cdcfe;">cache</span>.<span style="color: #dcdcaa;">get</span>(<span style="color: #9cdcfe;">key</span>);</div><div> </div><div> <span style="color: #c586c0;">if</span>(<span style="color: #9cdcfe;">cacheNode</span> == <span style="color: #569cd6;">null</span>) <span style="color: #c586c0;">return</span> -<span style="color: #b5cea8;">1</span>;</div><div> </div><div> <span style="color: #dcdcaa;">moveToHead</span>(<span style="color: #9cdcfe;">cacheNode</span>);</div><div> </div><div> <span style="color: #c586c0;">return</span> <span style="color: #9cdcfe;">cacheNode</span>.<span style="color: #9cdcfe;">value</span>;</div><div> }</div><div> </div><div> <span style="color: #569cd6;">public</span> <span style="color: #4ec9b0;">void</span> <span style="color: #dcdcaa;">put</span>(<span style="color: #4ec9b0;">int</span> <span style="color: #9cdcfe;">key</span>, <span style="color: #4ec9b0;">int</span> <span style="color: #9cdcfe;">value</span>) {</div><div> <span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #9cdcfe;">cacheNode</span> = <span style="color: #9cdcfe;">cache</span>.<span style="color: #dcdcaa;">get</span>(<span style="color: #9cdcfe;">key</span>);</div><div> </div><div> <span style="color: #c586c0;">if</span>(<span style="color: #9cdcfe;">cacheNode</span> == <span style="color: #569cd6;">null</span>) {</div><div> <span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #9cdcfe;">newNode</span> = <span style="color: #c586c0;">new</span> <span style="color: #dcdcaa;">DoublyLinkedListNode</span>();</div><div> <span style="color: #9cdcfe;">newNode</span>.<span style="color: #9cdcfe;">value</span> = <span style="color: #9cdcfe;">value</span>;</div><div> <span style="color: #9cdcfe;">newNode</span>.<span style="color: #9cdcfe;">key</span> = <span style="color: #9cdcfe;">key</span>;</div><div> </div><div> <span style="color: #dcdcaa;">addNode</span>(<span style="color: #9cdcfe;">newNode</span>);</div><div> <span style="color: #9cdcfe;">cache</span>.<span style="color: #dcdcaa;">put</span>(<span style="color: #9cdcfe;">key</span>, <span style="color: #9cdcfe;">newNode</span>);</div><div> </div><div> ++<span style="color: #9cdcfe;">size</span>;</div><div> </div><div> <span style="color: #c586c0;">if</span>(<span style="color: #9cdcfe;">size</span> > <span style="color: #9cdcfe;">capacity</span>) {</div><div> <span style="color: #4ec9b0;">DoublyLinkedListNode</span> <span style="color: #9cdcfe;">lruNode</span> = <span style="color: #dcdcaa;">popTail</span>();</div><div> <span style="color: #9cdcfe;">cache</span>.<span style="color: #dcdcaa;">remove</span>(<span style="color: #9cdcfe;">lruNode</span>.<span style="color: #9cdcfe;">key</span>);</div><div> --<span style="color: #9cdcfe;">size</span>;</div><div> }</div><div> } <span style="color: #c586c0;">else</span> {</div><div> <span style="color: #9cdcfe;">cacheNode</span>.<span style="color: #9cdcfe;">value</span> = <span style="color: #9cdcfe;">value</span>;</div><div> <span style="color: #dcdcaa;">moveToHead</span>(<span style="color: #9cdcfe;">cacheNode</span>);</div><div> }</div><div> }</div><div>}</div><br /><div><span style="color: #6a9955;">/**</span></div><div><span style="color: #6a9955;"> * Your LRUCache object will be instantiated and called as such:</span></div><div><span style="color: #6a9955;"> * LRUCache obj = new LRUCache(capacity);</span></div><div><span style="color: #6a9955;"> * int param_1 = obj.get(key);</span></div><div><span style="color: #6a9955;"> * obj.put(key,value);</span></div><div><span style="color: #6a9955;"> */</span></div></div>shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-23551553164642724722021-03-08T05:24:00.001+05:302021-03-08T05:24:27.603+05:30Mitigate ExpressJS CSRF using csurf npm module tutorial<p><span style="font-family: Nunito Sans;">Cross-Site Request Forgery attack is a prominent and classic web-based attack where you can request sensitive actions on behalf of the users and that may cause severe damage to the user data. To overcome such request forgery issues, a CSRF token is added explicitly to the request header or in the cookie or post request body which is then decoded on the server-side and validated against the session.</span></p><p></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://lh3.googleusercontent.com/-_HDqAxGo_Lw/YEVkXdWuv9I/AAAAAAAAiIg/vyVbjXcDWC0hKQEp2lDN2kGJ10xDgVX7wCLcBGAsYHQ/image.png" style="margin-left: auto; margin-right: auto;"><img alt="Mitigate ExpressJS CSRF using csurf npm module tutorial" data-original-height="900" data-original-width="1600" height="360" src="https://lh3.googleusercontent.com/-_HDqAxGo_Lw/YEVkXdWuv9I/AAAAAAAAiIg/vyVbjXcDWC0hKQEp2lDN2kGJ10xDgVX7wCLcBGAsYHQ/w640-h360/image.png" title="Mitigate ExpressJS CSRF using csurf npm module tutorial" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Mitigate ExpressJS CSRF using csurf npm module tutorial</td></tr></tbody></table><div class="separator" style="clear: both; text-align: center;"><span style="font-family: Nunito Sans; margin-left: 1em; margin-right: 1em;"></span></div><p></p><h4 style="text-align: left;"><span style="font-family: Nunito Sans;">Install</span></h4><p><span style="background-color: #f7f7f7; font-family: monospace, monospace; font-size: 16px; white-space: pre;">> npm install csurf</span></p><h4 style="text-align: left;">Initialize</h4><div>We've imported csrf module and initialized the csurf module with a cookie as a false option by default. This would start accepting the Anti-CSRF tokens either via header or request body which effectively prevents csrf attacks instead of sending cookies.</div><p><span class="storage type js" style="background-color: #f7f7f7; box-sizing: border-box; color: #222222; font-family: monospace, monospace; font-size: 16px; white-space: pre;"><span style="box-sizing: border-box;">var</span></span><span style="background-color: #f7f7f7; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; white-space: pre;"> csurf </span><span class="keyword operator assignment js" style="background-color: #f7f7f7; box-sizing: border-box; color: #222222; font-family: monospace, monospace; font-size: 16px; font-weight: bold; white-space: pre;"><span style="box-sizing: border-box;">=</span></span><span style="background-color: #f7f7f7; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; white-space: pre;"> </span><span class="meta function-call js" style="background-color: #f7f7f7; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; white-space: pre;"><span class="support function js" style="box-sizing: border-box; color: #445588;"><span style="box-sizing: border-box;">require</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="string quoted single js" style="box-sizing: border-box; color: #dd1144;"><span class="punctuation definition string begin js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span><span style="box-sizing: border-box;">csurf</span><span class="punctuation definition string end js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span></p><p><span class="meta function-call js" style="background-color: #f7f7f7; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; white-space: pre;"><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"><span class="storage type js" style="box-sizing: border-box; color: #222222;"><span style="box-sizing: border-box;">var</span></span><span style="box-sizing: border-box;"> csrfProtection </span><span class="keyword operator assignment js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">=</span></span><span style="box-sizing: border-box;"> </span><span class="meta function-call js" style="box-sizing: border-box;"><span class="entity name function js" style="box-sizing: border-box; color: #990000;"><span style="box-sizing: border-box;">csrf</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="meta brace curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">{</span></span><span style="box-sizing: border-box;"> cookie</span><span class="keyword operator assignment js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">:</span></span><span style="box-sizing: border-box;"> <span style="color: #606aa1;">false </span></span><span class="meta brace curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">}</span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span></span></span></span></span></p><h4 style="text-align: left;">CSRF Token Generation</h4><div>As the client-side API requires attaching the ant-csrf token, We need to send out the csrf token by generating it and responding via GET API. Either one can respond with render function or directly with JSON/XML based response to the frontend client.</div><div><br /></div><div><pre class="editor editor-colors" style="background: rgb(247, 247, 247); border-radius: 2px; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; margin-bottom: 24px; margin-top: 0px; overflow-x: auto; padding: 13px 15px;"><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">app</span></span><span class="meta js" style="box-sizing: border-box;"><span class="meta delimiter method period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="support function dom js" style="box-sizing: border-box; color: #445588;"><span style="box-sizing: border-box;">get</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="string quoted single js" style="box-sizing: border-box; color: #dd1144;"><span class="punctuation definition string begin js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span><span style="box-sizing: border-box;">/form</span><span class="punctuation definition string end js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span></span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="meta function js" style="box-sizing: border-box;"><span class="storage type function js" style="box-sizing: border-box; color: #222222;"><span style="box-sizing: border-box;">function</span></span><span style="box-sizing: border-box;"> </span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">req</span></span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">res</span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span style="box-sizing: border-box;"> </span><span class="punctuation definition function begin curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">{</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="comment line double-slash js" style="box-sizing: border-box; color: #999988; font-style: italic;"><span class="punctuation definition comment js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">//</span></span><span style="box-sizing: border-box;"> pass the csrfToken to the view</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">res</span></span><span class="meta js" style="box-sizing: border-box;"><span class="meta delimiter method period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="entity name function js" style="box-sizing: border-box; color: #990000;"><span style="box-sizing: border-box;">render</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="string quoted single js" style="box-sizing: border-box; color: #dd1144;"><span class="punctuation definition string begin js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span><span style="box-sizing: border-box;">send</span><span class="punctuation definition string end js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span></span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><b><span class="meta brace curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">{</span></span><span style="box-sizing: border-box;"> csrfToken</span><span class="keyword operator assignment js" style="box-sizing: border-box; color: #222222;"><span style="box-sizing: border-box;">:</span></span><span style="box-sizing: border-box;"> </span><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">req</span></span><span class="meta js" style="box-sizing: border-box;"><span class="meta delimiter method period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="entity name function js" style="box-sizing: border-box; color: #990000;"><span style="box-sizing: border-box;">csrfToken</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span style="box-sizing: border-box;"> </span><span class="meta brace curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">}</span></span></b><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition function end curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">}</span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span></span></div></pre></div><h4 style="text-align: left;">CSRF Validation Middleware</h4><div>As the validation of the CSRF token happens in the server, ensure to install body-parser to parse any tokens passed via body part or access the token directly via header. Add the middleware above all request routes to have seamless verification of the token before executing the actual route.</div><div><br /></div><div><span class="variable other object js" style="background-color: #f7f7f7; box-sizing: border-box; color: teal; font-family: monospace, monospace; font-size: 16px; white-space: pre;"><span style="box-sizing: border-box;">app</span></span><span class="meta js" style="background-color: #f7f7f7; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; white-space: pre;"><span class="meta delimiter method period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="entity name function js" style="box-sizing: border-box; color: #990000;"><span style="box-sizing: border-box;">use</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span></span></span><span style="background-color: #f7f7f7; font-family: monospace, monospace; font-size: 16px; white-space: pre;">csrfProtection</span><span style="background-color: #f7f7f7; font-family: monospace, monospace; font-size: 16px; white-space: pre;">)</span></div><h4 style="text-align: left;">Error Handling</h4><div>To efficiently respond to the API client or frontend service, I would strongly recommend adding an error handling layer before the request route with a specific format response by which clients can easily parse and understand the error message thrown from the server.</div><div><br /></div><div><pre class="editor editor-colors" style="background: rgb(247, 247, 247); border-radius: 2px; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; margin-bottom: 24px; margin-top: 0px; overflow-x: auto; padding: 13px 15px;"><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">app</span></span><span class="meta js" style="box-sizing: border-box;"><span class="meta delimiter method period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="entity name function js" style="box-sizing: border-box; color: #990000;"><span style="box-sizing: border-box;">use</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="meta function js" style="box-sizing: border-box;"><span class="storage type function js" style="box-sizing: border-box; color: #222222;"><span style="box-sizing: border-box;">function</span></span><span style="box-sizing: border-box;"> </span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">err</span></span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">req</span></span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">res</span></span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">next</span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span style="box-sizing: border-box;"> </span><span class="punctuation definition function begin curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">{</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="keyword control js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">if</span></span><span style="box-sizing: border-box;"> </span><span class="meta brace round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">err</span></span><span class="meta delimiter period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="support variable dom js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">code</span></span><span style="box-sizing: border-box;"> </span><span class="keyword operator comparison js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">!==</span></span><span style="box-sizing: border-box;"> </span><span class="string quoted single js" style="box-sizing: border-box; color: #dd1144;"><span class="punctuation definition string begin js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span><span style="box-sizing: border-box;">EBADCSRFTOKEN</span><span class="punctuation definition string end js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span></span><span class="meta brace round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span><span style="box-sizing: border-box;"> </span><span class="keyword control js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">return</span></span><span style="box-sizing: border-box;"> </span><span class="meta function-call js" style="box-sizing: border-box;"><span class="entity name function js" style="box-sizing: border-box; color: #990000;"><span style="box-sizing: border-box;">next</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span style="box-sizing: border-box;">err</span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"> </span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="comment line double-slash js" style="box-sizing: border-box; color: #999988; font-style: italic;"><span class="punctuation definition comment js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">//</span></span><span style="box-sizing: border-box;"> handle CSRF token errors here</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">res</span></span><span class="meta delimiter period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="support variable dom js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">status</span></span><span class="meta brace round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="constant numeric decimal js" style="box-sizing: border-box; color: #dd1144;"><span style="box-sizing: border-box;">403</span></span><span class="meta brace round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">res</span></span><span class="meta js" style="box-sizing: border-box;"><span class="meta delimiter method period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="support function js" style="box-sizing: border-box; color: #445588;"><span style="box-sizing: border-box;">json</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(<span style="color: #dd1144;">{err: "CSRF ERROR"}</span></span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">) // respond with JSON response</span></span></span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition function end curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">}</span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span></span></div></pre></div><div>Thus, We have successfully added CSRF validation logic as middleware to verify the request before being executed. For bugs/hugs, feel free to comment below. Share is care.</div>shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-83614457219039226212021-03-07T12:32:00.003+05:302021-03-07T12:32:31.800+05:30Integrating Google Recaptcha with ExpressJS Fighting spam and bots over the internet is a never-ending problem and that's why companies like Cloudflare kick-off their journey from the building/contributing honeypot to IPO. However, there are other few ways to prevent spam API calls, brute force attacks and they are solving captchas, and Google is one of the pioneers in providing better user experience plus spam prevention techniques. There are other online services such as <a href="https://www.arkoselabs.com/" target="_blank">Funcaptcha</a> captcha as a service for SaaS companies.<div><br /></div><div>Today, let's see about implementing Google ReCaptcha with expressjs Node server as middleware and rendering them in forms.</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://1.bp.blogspot.com/-EOefKtFnQIE/XtCdlTHGdRI/AAAAAAAAcK8/z7x-7VXsnJkKhhnbaXIt2lVlfSl1sh1sACK4BGAsYHg/recaptcha.png" style="margin-left: auto; margin-right: auto;"><img alt="Integrating Google Recaptcha with ExpressJS" border="0" data-original-height="886" data-original-width="1699" height="334" src="https://1.bp.blogspot.com/-EOefKtFnQIE/XtCdlTHGdRI/AAAAAAAAcK8/z7x-7VXsnJkKhhnbaXIt2lVlfSl1sh1sACK4BGAsYHg/w640-h334/recaptcha.png" title="Integrating Google Recaptcha with ExpressJS" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Integrating Google Recaptcha with ExpressJS <br /><br /><h3 style="text-align: left;">Installation</h3><div style="text-align: left;"><span style="background-color: #f7f7f7; font-family: monospace, monospace; font-size: 16px; white-space: pre;">npm install express-recaptcha --save</span></div><div style="text-align: left;"><br /></div><h4 style="text-align: left;">Setup:</h4><div style="text-align: left;">Signup for Google Account and click <a href="https://www.google.com/recaptcha/admin/create" target="_blank">here</a> to create new Recaptcha keys and specific to Version 3. Enter the domain including localhost for testing purposes and grab the Site key and Secret key to access Recaptcha APIs from Nodejs backend.</div><div style="text-align: left;"><br /></div><div style="text-align: left;"><pre class="editor editor-colors" style="background: rgb(247, 247, 247); border-radius: 2px; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; margin-bottom: 24px; margin-top: 0px; overflow-x: auto; padding: 13px 15px;"><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="storage type js" style="box-sizing: border-box; color: #222222;"><span style="box-sizing: border-box;">var</span></span><span style="box-sizing: border-box;"> Recaptcha </span><span class="keyword operator assignment js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">=</span></span><span style="box-sizing: border-box;"> </span><span class="meta function-call js" style="box-sizing: border-box;"><span class="support function js" style="box-sizing: border-box; color: #445588;"><span style="box-sizing: border-box;">require</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="string quoted single js" style="box-sizing: border-box; color: #dd1144;"><span class="punctuation definition string begin js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span><span style="box-sizing: border-box;">express-recaptcha</span><span class="punctuation definition string end js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span class="meta delimiter period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="variable other js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">RecaptchaV3</span></span><span class="punctuation terminator statement js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">;</span></span></span></div><div class="line" style="box-sizing: border-box;"><br /></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="storage type js" style="box-sizing: border-box; color: #222222;"><span style="box-sizing: border-box;">var</span></span><span style="box-sizing: border-box;"> recaptcha </span><span class="keyword operator assignment js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">=</span></span><span style="box-sizing: border-box;"> </span><span class="meta class instance constructor js" style="box-sizing: border-box;"><span class="keyword operator js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">new</span></span><span style="box-sizing: border-box;"> </span><span class="entity name type instance js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">Recaptcha</span></span></span><span class="meta brace round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="string quoted single js" style="box-sizing: border-box; color: #dd1144;"><span class="punctuation definition string begin js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span><span style="box-sizing: border-box;">SITE_KEY</span><span class="punctuation definition string end js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span></span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="string quoted single js" style="box-sizing: border-box; color: #dd1144;"><span class="punctuation definition string begin js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span><span style="box-sizing: border-box;">SECRET_KEY</span><span class="punctuation definition string end js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span></span><span class="meta brace round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span><span class="punctuation terminator statement js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">;</span></span></span></div></pre></div></td></tr></tbody></table><h4 style="text-align: left;">Frontend Client setup</h4><div>As the client-side is so specialized and varies from ReactJS, Vue, or plain vanilla javascript, I recommend you to follow <a href="https://developers.google.com/recaptcha/docs/v3" rel="nofollow" target="_blank">Google docs</a> to implement them.</div><h4 style="text-align: left;">Server Validation</h4><div>As this blog post covers primarily server validation logic, ExpressJS provides excellent integration with middleware where the Recaptcha validation can be added to the routes before even route logic executes.</div><div><br /></div><div><pre class="editor editor-colors" style="background: rgb(247, 247, 247); border-radius: 2px; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; margin-bottom: 24px; margin-top: 0px; overflow-x: auto; padding: 13px 15px;"><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">app</span></span><span class="meta js" style="box-sizing: border-box;"><span class="meta delimiter method period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="entity name function js" style="box-sizing: border-box; color: #990000;"><span style="box-sizing: border-box;">post</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="string quoted single js" style="box-sizing: border-box; color: #dd1144;"><span class="punctuation definition string begin js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span><span style="box-sizing: border-box;">/</span><span class="punctuation definition string end js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">'</span></span></span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><b><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">recaptcha</span></span><span class="meta delimiter period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">middleware</span></span><span class="meta delimiter period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="variable other js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">verify</span></span></b><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="meta function js" style="box-sizing: border-box;"><span class="storage type function js" style="box-sizing: border-box; color: #222222;"><span style="box-sizing: border-box;">function</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">req</span></span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">res</span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span class="punctuation definition function begin curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">{</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="keyword control js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">if</span></span><span style="box-sizing: border-box;"> </span><span class="meta brace round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="keyword operator logical js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">!</span></span><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">req</span></span><span class="meta delimiter period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">recaptcha</span></span><span class="meta delimiter period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="variable other js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">error</span></span><span class="meta brace round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span><span style="box-sizing: border-box;"> </span><span class="meta brace curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">{</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="comment line double-slash js" style="box-sizing: border-box; color: #999988; font-style: italic;"><span class="punctuation definition comment js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">//</span></span><span style="box-sizing: border-box;"> success code</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="meta brace curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">}</span></span><span style="box-sizing: border-box;"> </span><span class="keyword control js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">else</span></span><span style="box-sizing: border-box;"> </span><span class="meta brace curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">{</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="comment line double-slash js" style="box-sizing: border-box; color: #999988; font-style: italic;"><span class="punctuation definition comment js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">//</span></span><span style="box-sizing: border-box;"> error code</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="meta brace curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">}</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition function end curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">}</span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span class="punctuation terminator statement js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">;</span></span></span></div></pre></div><div>As mentioned before, the middleware function that contains Recaptcha verification executes first and the results are attached to the request object for implementing the business logic. One could use the req.recaptcha.error object to verify if the Recaptcha request is successful.</div><div><br /></div><h4 style="text-align: left;">Req.recaptcha object</h4><div><pre class="editor editor-colors" style="background: rgb(247, 247, 247); border-radius: 2px; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; margin-bottom: 24px; margin-top: 0px; overflow-x: auto; padding: 13px 15px;"><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;">{</span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> error</span><span class="keyword operator assignment js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">:</span></span><span style="box-sizing: border-box;"> string</span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="comment line double-slash js" style="box-sizing: border-box; color: #999988; font-style: italic;"><span class="punctuation definition comment js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">//</span></span><span style="box-sizing: border-box;"> error code (see table below), null if success</span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> data</span><span class="keyword operator assignment js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">:</span></span><span style="box-sizing: border-box;"> </span><span class="meta brace curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">{</span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> hostname</span><span class="keyword operator assignment js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">:</span></span><span style="box-sizing: border-box;"> string</span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="comment line double-slash js" style="box-sizing: border-box; color: #999988; font-style: italic;"><span class="punctuation definition comment js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">//</span></span><span style="box-sizing: border-box;"> the site's hostname where the reCAPTCHA was solved</span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> score</span><span class="keyword operator assignment js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">:</span></span><span style="box-sizing: border-box;"> number</span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="comment line double-slash js" style="box-sizing: border-box; color: #999988; font-style: italic;"><span class="punctuation definition comment js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">//</span></span><span style="box-sizing: border-box;"> the score for this request (0.0 - 1.0)</span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> action</span><span class="keyword operator assignment js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">:</span></span><span style="box-sizing: border-box;"> string </span><span class="comment line double-slash js" style="box-sizing: border-box; color: #999988; font-style: italic;"><span class="punctuation definition comment js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">//</span></span><span style="box-sizing: border-box;"> the action name for this request (important to verify)</span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="meta brace curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">}</span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;">}</span></div></pre></div><div>Feel free to follow the <a href="https://www.npmjs.com/package/express-recaptcha" rel="nofollow" target="_blank">npm package</a> of Express Recaptcha for more details and customization logic.</div><div><br /></div><div>For bugs/hugs, feel free to comment below. Share is care.</div>shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com1tag:blogger.com,1999:blog-3047364308476473322.post-648169458789922892020-05-28T10:20:00.001+05:302020-05-28T10:20:30.562+05:30How to automate AWS SES E-mail Template UpdateAmazon Web Service Simple Email Service ( SES ) is a popular and considerably cheap service to send out bulk transactional & personalized promotional emails. However, when it comes to the Template-based emails which help to bind values and send HTML email, the most frustrating part is updating the template and testing them.<h4 style="text-align: left;">Problems:</h4><div>1. Creating a valid JSON file by escaping the HTML Email Text property</div><div>2. Updating the templated HTML file ( manual command-line task )</div><div>3. Testing the templated emails</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://1.bp.blogspot.com/-4gBrc1KaLaE/Xs869jLqATI/AAAAAAAAcJ8/6L1jeAjKCV4B8_drO-WAk699LhiDMyR7ACK4BGAsYHg/ses.png" style="margin-left: auto; margin-right: auto;"><img alt="How to automate AWS SES E-mail Template Update" border="0" data-original-height="1035" data-original-width="1699" height="390" src="https://1.bp.blogspot.com/-4gBrc1KaLaE/Xs869jLqATI/AAAAAAAAcJ8/6L1jeAjKCV4B8_drO-WAk699LhiDMyR7ACK4BGAsYHg/w640-h390/ses.png" title="How to automate AWS SES E-mail Template Update" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">How to automate AWS SES E-mail Template Update</td></tr></tbody></table><div><br /></div><div><br /></div><h4 style="text-align: left;">Solution:</h4><div><br /></div><div>I've come up with a normal update script written in Nodejs language with the help of AWS SDK that can help in scaling email template updates faster.</div><div><br /></div><div><script src="https://gist.github.com/shivasurya/85bb10bb501851d7ff231ed03bb50b77.js"></script><br /></div><h4 style="text-align: left;">Usage:</h4><div>> node template-creater.js emailtemplate.html emailtemplate.json false emailtemplate-unique-name "Subject for the email"</div><div><br /></div><div>This will automatically accept the templated HTML file and creates a valid JSON file and tries updating/creating templates in the AWS SES console based on configuration or command-line argument values.</div><div><br /></div><div><table class="highlight tab-size js-file-line-container" data-paste-markdown-skip="" data-tab-size="8"><tbody><tr><td class="blob-code blob-code-inner js-file-line" id="file-template-creator-js-LC7"><span class="pl-c"> 1st Argument => Templated HTML File</span></td>
</tr>
<tr>
</tr></tbody></table><table class="highlight tab-size js-file-line-container" data-paste-markdown-skip="" data-tab-size="8"><tbody><tr><td class="blob-code blob-code-inner js-file-line" id="file-template-creator-js-LC8"><span class="pl-c"> 2nd Argument => Name of the auto-generated template json file</span></td>
</tr>
<tr>
</tr></tbody></table><table class="highlight tab-size js-file-line-container" data-paste-markdown-skip="" data-tab-size="8"><tbody><tr><td class="blob-code blob-code-inner js-file-line" id="file-template-creator-js-LC9"><span class="pl-c"> 3rd Argument => Update or Create template ( boolean )</span></td>
</tr>
<tr>
</tr></tbody></table><table class="highlight tab-size js-file-line-container" data-paste-markdown-skip="" data-tab-size="8"><tbody><tr><td class="blob-code blob-code-inner js-file-line" id="file-template-creator-js-LC10"><span class="pl-c"> 4th Argument => Unique template name </span></td>
</tr>
<tr>
</tr></tbody></table><table class="highlight tab-size js-file-line-container" data-paste-markdown-skip="" data-tab-size="8"><tbody><tr><td class="blob-code blob-code-inner js-file-line" id="file-template-creator-js-LC11"><span class="pl-c"> 5th Argument => Subject of the email</span></td>
</tr>
<tr></tr></tbody></table></div><div><br /></div><h4 style="text-align: left;">Final Words:</h4><div><br /></div><div>Feel free to use the script ( No license Restrictions for personal/commercial projects and No Warranty from Author ) and for bugs/hugs do comment below. Share is care.</div><div><br /></div>shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-5662015043561136392020-05-25T10:15:00.002+05:302020-05-25T10:15:47.309+05:30Hashing with Bcrypt in NodejsPublishing tutorials on nodejs after a long time 😀😀 and additionally, quarantine made me productive to learn more about Nodejs core concepts and implementing server-side code.<div><br /></div><h3 style="text-align: left;">Background:</h3><div><br /></div><div>Learning cryptography is tricky and requires more patience to master those areas. Additionally, If you want to learn more about Bcrypt Algorithm and implementation, check out the link <a href="https://auth0.com/blog/hashing-in-action-understanding-bcrypt/" target="_blank">here</a>.</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://1.bp.blogspot.com/-0nvN58ARlyk/XstNG8plL0I/AAAAAAAAcHw/weyT50uR70wTV7i8jmllw6pzUA0g27XlQCK4BGAsYHg/ivb-bcrypt.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Hashing with Bcrypt in Nodejs" border="0" data-original-height="1035" data-original-width="1699" height="390" src="https://1.bp.blogspot.com/-0nvN58ARlyk/XstNG8plL0I/AAAAAAAAcHw/weyT50uR70wTV7i8jmllw6pzUA0g27XlQCK4BGAsYHg/w640-h390/ivb-bcrypt.png" title="Hashing with Bcrypt in Nodejs" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Hashing with Bcrypt in Nodejs</td></tr></tbody></table><div><br /></div><div><br /></div><h3 style="text-align: left;">Simple Steps to implement Bcrypt in Nodejs</h3><h4 style="text-align: left;">Installation:</h4><div>1. npm install bcrypt --save </div><div><br /></div><div>Start installing the bcrypt package into your nodejs apps which helps to implement the hashing function.</div><div><br /></div><h4 style="text-align: left;">Hashing Function ( Sync and Async ):</h4><div><br /></div><div>Hashing function with Salt Generation ( Sync )</div><div><br /></div><div><pre class="editor editor-colors" style="background: rgb(247, 247, 247); border-radius: 2px; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; margin-bottom: 24px; margin-top: 0px; overflow-x: auto; padding: 13px 15px;"><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="storage type js" style="box-sizing: border-box; color: #222222;"><span style="box-sizing: border-box;">const</span></span><span style="box-sizing: border-box;"> </span><span class="constant other js" style="box-sizing: border-box; color: #606aa1;"><span style="box-sizing: border-box;">salt</span></span><span style="box-sizing: border-box;"> </span><span class="keyword operator assignment js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">=</span></span><span style="box-sizing: border-box;"> </span><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">bcrypt</span></span><span class="meta js" style="box-sizing: border-box;"><span class="meta delimiter method period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="entity name function js" style="box-sizing: border-box; color: #990000;"><span style="box-sizing: border-box;">genSaltSync</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span style="box-sizing: border-box;">saltRounds</span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span class="punctuation terminator statement js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">;</span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="storage type js" style="box-sizing: border-box; color: #222222;"><span style="box-sizing: border-box;">const</span></span><span style="box-sizing: border-box;"> </span><span class="constant other js" style="box-sizing: border-box; color: #606aa1;"><span style="box-sizing: border-box;">hash</span></span><span style="box-sizing: border-box;"> </span><span class="keyword operator assignment js" style="box-sizing: border-box; color: #222222; font-weight: bold;"><span style="box-sizing: border-box;">=</span></span><span style="box-sizing: border-box;"> </span><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">bcrypt</span></span><span class="meta js" style="box-sizing: border-box;"><span class="meta delimiter method period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="entity name function js" style="box-sizing: border-box; color: #990000;"><span style="box-sizing: border-box;">hashSync</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span style="box-sizing: border-box;">myPlaintextPassword</span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> salt</span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span class="punctuation terminator statement js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">;</span></span></span></div></pre></div><div><div>Hashing function with Salt Generation ( Async )</div><div><br /></div><div><pre class="editor editor-colors" style="background: rgb(247, 247, 247); border-radius: 2px; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; margin-bottom: 24px; margin-top: 0px; overflow-x: auto; padding: 13px 15px;"><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">bcrypt</span></span><span class="meta js" style="box-sizing: border-box;"><span class="meta delimiter method period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="entity name function js" style="box-sizing: border-box; color: #990000;"><span style="box-sizing: border-box;">genSalt</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span style="box-sizing: border-box;">saltRounds</span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="meta function js" style="box-sizing: border-box;"><span class="storage type function js" style="box-sizing: border-box; color: #222222;"><span style="box-sizing: border-box;">function</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">err</span></span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">salt</span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span style="box-sizing: border-box;"> </span><span class="punctuation definition function begin curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">{</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">bcrypt</span></span><span class="meta delimiter period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="support variable dom js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">hash</span></span><span class="meta brace round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span style="box-sizing: border-box;">plainText</span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> salt</span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="meta function js" style="box-sizing: border-box;"><span class="storage type function js" style="box-sizing: border-box; color: #222222;"><span style="box-sizing: border-box;">function</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">err</span></span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">hash</span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span style="box-sizing: border-box;"> </span><span class="punctuation definition function begin curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">{</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="comment line double-slash js" style="box-sizing: border-box; color: #999988; font-style: italic;"><span class="punctuation definition comment js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">//</span></span><span style="box-sizing: border-box;"> Store hash in your password DB.</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="punctuation definition function end curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">}</span></span><span class="meta brace round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span><span class="punctuation terminator statement js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">;</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition function end curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">}</span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span class="punctuation terminator statement js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">;</span></span></span></div></pre></div><h4 style="text-align: left;">Verify Function ( Sync and Async ):</h4><div><br /></div><div>Hash verification function ( Sync )</div><div><br /></div><div><span class="variable other object js" style="background-color: #f7f7f7; box-sizing: border-box; color: teal; font-family: monospace, monospace; font-size: 16px; white-space: pre;"><span style="box-sizing: border-box;">bcrypt</span></span><span class="meta js" style="background-color: #f7f7f7; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; white-space: pre;"><span class="meta delimiter method period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="entity name function js" style="box-sizing: border-box; color: #990000;"><span style="box-sizing: border-box;">compareSync</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span style="box-sizing: border-box;">myPlaintextPassword</span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> hash</span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span class="punctuation terminator statement js" style="background-color: #f7f7f7; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; white-space: pre;"><span style="box-sizing: border-box;">;</span></span><span style="background-color: #f7f7f7; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; white-space: pre;"> </span><span class="comment line double-slash js" style="background-color: #f7f7f7; box-sizing: border-box; color: #999988; font-family: monospace, monospace; font-size: 16px; font-style: italic; white-space: pre;"><span class="punctuation definition comment js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">//</span></span><span style="box-sizing: border-box;"> true/false</span></span></div><div><br /></div><div><div>Hash verification function ( Async )</div><div><br /></div></div></div><div><pre class="editor editor-colors" style="background: rgb(247, 247, 247); border-radius: 2px; box-sizing: border-box; font-family: monospace, monospace; font-size: 16px; margin-bottom: 24px; margin-top: 0px; overflow-x: auto; padding: 13px 15px;"><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="variable other object js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">bcrypt</span></span><span class="meta js" style="box-sizing: border-box;"><span class="meta delimiter method period js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">.</span></span><span class="entity name function js" style="box-sizing: border-box; color: #990000;"><span style="box-sizing: border-box;">compare</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span style="box-sizing: border-box;">myPlaintextPassword</span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> hash</span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="meta function js" style="box-sizing: border-box;"><span class="storage type function js" style="box-sizing: border-box; color: #222222;"><span style="box-sizing: border-box;">function</span></span><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition begin round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">(</span></span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">err</span></span><span class="meta delimiter object comma js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">,</span></span><span style="box-sizing: border-box;"> </span><span class="variable function js" style="box-sizing: border-box; color: teal;"><span style="box-sizing: border-box;">result</span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span style="box-sizing: border-box;"> </span><span class="punctuation definition function begin curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">{</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span style="box-sizing: border-box;"> </span><span class="comment line double-slash js" style="box-sizing: border-box; color: #999988; font-style: italic;"><span class="punctuation definition comment js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">//</span></span><span style="box-sizing: border-box;"> result == true/false</span></span></span></span></span></div><div class="line" style="box-sizing: border-box;"><span class="source js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="meta js" style="box-sizing: border-box;"><span class="punctuation definition function end curly js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">}</span></span><span class="punctuation definition end round js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">)</span></span></span></span><span class="punctuation terminator statement js" style="box-sizing: border-box;"><span style="box-sizing: border-box;">;</span></span></span></div></pre></div><h3 style="text-align: left;">Final note:</h3><div>Bcrypt is safe as of now from timing attacks and other cryptographic reverse engineering or cryptanalysis. If you would like to check more about implementing using Async and Promises for Bcrypt Module, please check out the <a href="https://www.npmjs.com/package/bcrypt" rel="nofollow" target="_blank">documentation</a> of the bcrypt npm module.</div><div><br /></div><div>Finally, for Hugs/Bugs do comment below. Share is care.</div><div><br /></div><div><br /></div>shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-47424277798207020692020-03-22T09:20:00.004+05:302020-12-21T10:55:38.064+05:30Hassle free Appointment Scheduling Software for Business<div dir="ltr" style="text-align: left;" trbidi="on">
Last month while traveling to the SaaS conference, one of the business owners I used to do contract work for asked for a small recommendation of software tools that can be used to optimize and automate the business task. So, quickly I got into the requirements and suggested a bunch of tools from Zoho, Shopify, Google to automate tasks that included Google Calendar for GSuite that helps in scheduling, reminding events. But now the requirement came differently to allow clients to prebook appointments and getting paid online to prevent spam signups by which Google calendar is not the right solution for scheduling needs. Stepping back little I googled for potential solutions and recommendations for <a href="https://www.zealschedule.com" target="_blank">Online Appointment Scheduling software</a> by searching to Capterra, G2Crowd, FinanceOnline and even more. Fortunately, I met Guru from <a href="https://www.zealschedule.com" target="_blank">Zealschedule</a> who attended the event and when introduced to each other with current work and he was so much happy to invite me for Contract works related to Android. Meanwhile, to my surprise, he pitched his company and <a href="https://www.zealschedule.com" target="_blank">motive</a> behind his product that was an astonishing way about online appointment scheduling space where a lot of apps are behind lag and in need of a leader.<br />
<br /><a href="https://accounts.goschedule.io/signup?plan=starter" target="_blank"><br />Signup</a> | <a href="https://www.zealschedule.com" target="_blank">Pricing</a> | <a href="https://help.zealschedule.com/" target="_blank">Help Docs</a> | <a href="mailto:support@zealschedule.com" target="_blank">Support</a> | <a href="https://www.zealschedule.com">Free Appointment Scheduling Software</a><br />
<h4 style="text-align: left;">
Why <a href="https://www.zealschedule.com">Zealschedule</a>?</h4>
Prior to trying out Zealschedule, I've been trying out calendly, Acuity Scheduling, Zoho Bookings, and even more calendar-based scheduling apps. But every app I used and started customizing for the requirements, I literally found limitations in the product side or the lag in UI/UX and integrations with the other business application. Keeping that in mind, I have tried out Zealschedule and most of the business requirements were satisfied and the team was super flexible to support customization that can be generalized for all customers.<br />
<br />
<h4 style="text-align: left;">
Integrations</h4>
Zealschedule has extra-ordinary support for native integrations and zapier support to make the workflow easy for all types of business from SMB to Enterprise organizations. So that made our life easy to trigger workflows within the application based on realtime booking stats from the API and Zapier. Checkout <a href="https://zapier.com/app/login?next=/developer/public-invite/67009/84c3e9905bfe53e0711722b1fef94696/" target="_blank">zapier for Z</a>ealschedule which is available in private beta. Apart from Zapier, Microsoft calendar ( office 365 ), GSuite Calendar and zoom integrations are available in realtime that happens when the booking is done from Zealschedule apps.<br />
<br />
<h4 style="text-align: left;">
Payment Integrations</h4>
Additionally, We could collect online payments via integrated payment hosted solution pages such as Stripe, Square Checkout, Razorpay, Paytm and even more. Payments are additionally tracked within the Zealschedule reports to checkout for revenue, sales and booking reports from the dashboard.<br />
<br />
<h4 style="text-align: left;">
Tech Support</h4>
The team from Zealschedule is really enthusiastic <a href="https://www.goschedule.io/the-remote-team-culture-at-goschedule-corona-virus-update/" target="_blank">working from remote</a> while facing customers and tech support is super fast. They do support phone, chat, and email support and check out the options <a href="https://help.zealschedule.com" target="_blank">here</a><br />
<br />
Now that this product has excellent traction and minimal features, this can be a good start for any business organization to have an appointment scheduling application instead of hitting excel sheets or maintaining a separate calendar with Google or Microsoft. Let me add more features to this blog post once trying out different types of appointments and use cases that Zealschedule tries to solve for business organizations and professionals.<br />
<br />
Feel free to comment below. Share is care.<br />
<br />
<br />
<br /></div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-85001238728072220712018-07-08T09:35:00.000+05:302018-07-08T09:35:07.783+05:30DesignEvo Review- One of the Best Online Logo Maker for You<div dir="ltr" style="text-align: left;" trbidi="on">
<span id="docs-internal-guid-9cdc531c-7809-e80b-190f-a340c02bbf15"><span style="font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;">Essential elements of a successful business:</span></span></span><br />
<span style="font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;"><br />
</span></span> <br />
<h3 style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b><span style="font-family: "trebuchet ms" , sans-serif;">Attraction & Uniqueness </span></b></span></h3>
<span style="font-family: "trebuchet ms" , sans-serif;"><span id="docs-internal-guid-c6a6d296-780a-32c5-f01b-ab70191996cb"></span></span><br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;">A business needs something attractive to catch the clients’ eyes, and the most suitable thing is the logo. A logo plays a vital role in the business world, and it is important to have a unique one to distinguish between you and others. Although there are many professional designers to help you create logos, you know that no one can understand your business than yourself. On the other hand, if you run a small business, you may have the budget problem to hire a designer. Thus, the best logo should be designed by yourself with the help of DesignEvo logo maker.</span></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;"><br />
</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; margin-left: 1em; margin-right: 1em; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;"><img alt="DesignEvo Review- One of the Best Online Logo Maker for You" height="366" src="https://lh6.googleusercontent.com/d3V2ae-CCj760ktKXQTI2q-cE3TionIhovm8qq-WGt5MfAdItKI4HOMNbuVC7TXyHvcLegOM0XAwaUSpE4OROzws0bQh_i9lGAWA2XbiLA-riFtKyousPCUyf4cqKtpJj8ib8IXATIzdazfEGQ" style="border: none; transform: rotate(0rad);" title="DesignEvo Review- One of the Best Online Logo Maker for You" width="640" /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; margin-left: 1em; margin-right: 1em; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;"><br />
</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; margin-left: 1em; margin-right: 1em; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;"><br />
</span></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-family: "trebuchet ms" , sans-serif;"><a href="http://www.designevo.com/" rel="nofollow" style="text-decoration: none;" target="_blank"><span style="background-color: transparent; color: blue; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">DesignEvo logo maker</span></a><span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> is devoted to helping people create professional logos without spending much time or effort. Even you know nothing about design, you can use abundant resources of DesignEvo to create unique logos with a professional appearance in minutes.</span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; margin-left: 1em; margin-right: 1em; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-04ee4555-780b-b805-1df6-e5b5dcacfa78" style="font-weight: normal;"><span style="font-family: "trebuchet ms" , sans-serif;"><br />
</span></b></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;">Handy & Resourceful</span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; margin-left: 1em; margin-right: 1em; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><span style="font-family: "trebuchet ms" , sans-serif;"><br />
</span></b></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;">First, there is no registration or download requirement. </span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; margin-left: 1em; margin-right: 1em; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><span style="font-family: "trebuchet ms" , sans-serif;"><br />
</span></b></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;">Second, DesignEvo logo maker has prepared 5000+ well-designed logo templates to help you design. They cover many kinds of themes, such as animal & pet logos, photography logos, hipster logos and so on. Besides, all of them are fully customizable. If you have no idea how to make a logo, you can select a preferred template and adjust the elements to custom a unique logo at will.
</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; margin-left: 1em; margin-right: 1em; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;"><img alt="DesignEvo Review- One of the Best Online Logo Maker for You" height="263" src="https://lh6.googleusercontent.com/dR5euSsLpuvDZ4LrW0fKI1P0mEq0EDVj7nltbPsyAAqeTp1B5OuSllAK6122oAyBxuOd3BHIHQ-pt3fKvjgAjJCYSZvh-c7hQ1iQfy7xY4UcUkn0Ka6BfMwRnrdTPgnyV4im3zb_pQD2Gor1cw" style="border: none; transform: rotate(0rad);" title="DesignEvo Review- One of the Best Online Logo Maker for You" width="507" /></span></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
</div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;"><br /></span></span>
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;">Third, there are millions of icons, various shapes, and stylish fonts. In order to make it comfortable to meet users’ needs, DesignEvo allows you to search millions of icons with any themes and styles to create logos. All of them are vector graphics and will enable you to adjust the size without worrying about the sharpness. You can also choose right shapes and fonts to perfect your custom logo.</span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; margin-left: 1em; margin-right: 1em; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><span style="font-family: "trebuchet ms" , sans-serif;"><br />
</span></b></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;">Powerful </span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; margin-left: 1em; margin-right: 1em; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b style="font-weight: normal;"><span style="font-family: "trebuchet ms" , sans-serif;"><br />
</span></b></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;">DesignEvo offers you full edit features: change background and colors, rotate, adjust the effect, layout, layer, and duplicate, etc. When you have finished editing, preview it before saving and downloading. It shows six occasions of your logo, on a business card, on a book cover, on a wall, on a T-shirt and so on. When you ensure that everything is well done, then download it. There are three options for you, free package, basic package and plus package. The latter two are paid options but with many more features to meet your needs, so please feel free to select the suitable one to download your logo.</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; margin-left: 1em; margin-right: 1em; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;"><img alt="DesignEvo Review- One of the Best Online Logo Maker for You" height="246" src="https://lh3.googleusercontent.com/0ZxdQRe93u-pC63hXLI2f-uE17U6pkUP5cVqBG8jHqCNJWKU-YSlfqtWRLzwTi9QkG1hoQR2nkfdYfwfnEjra5IHQNFjzlkQKrwPXC8gDNb_2gY3mqckcPr3D1pNGMlb8UiaTYArv78dYq6Ulg" style="border: none; transform: rotate(0rad);" title="DesignEvo Review- One of the Best Online Logo Maker for You" width="553" /></span></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
</div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;"><br />
</span></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "trebuchet ms" , sans-serif;">Final words</span></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-family: "trebuchet ms" , sans-serif;"><span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br />
</span></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="font-family: "trebuchet ms" , sans-serif;"><span style="background-color: transparent; color: black; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Whether you need logos for your business or not, only if you want to try to create logos online by yourself, you can come to use DesignEvo to help you. It is born to help people who need logos. With all the brilliant features, you can design professional logos in minutes easily even if you are a newbie. By the way, all of the features are free to use. </span><a href="http://www.designevo.com/" rel="nofollow" style="font-size: 10.5pt; text-align: left; text-decoration-line: none; white-space: pre-wrap;" target="_blank"><span style="color: blue; font-size: 10.5pt; vertical-align: baseline;">DesignEvo</span></a><span style="font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-align: left; vertical-align: baseline; white-space: pre-wrap;"> is waiting for serving you.</span></span><br />
<span style="font-family: "trebuchet ms" , sans-serif;"><span style="font-size: 10.5pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-align: left; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<div style="text-align: left;">
<span style="font-family: trebuchet ms, sans-serif;"><span style="font-size: 14px; white-space: pre-wrap;">Feel free to comment below. If you would like to share your Guest/sponsored post in our blog, kindly write to my inbox/Google+ Hangout. Share is care.</span></span></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
</div>
</div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-64926976366560650472017-07-10T07:44:00.000+05:302017-07-10T07:44:17.244+05:30Gitlab Shared Runner CI with Docker Tutorial - Complete Guide on Building Android Studio Project in Gitlab<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "times" , "times new roman" , serif;">After a long break, writing a new post on building Android Studio Gradle project on Gitlab Pipelines with Docker without hassling about server charges or build time. <b>Gitlab Pipelines and Registry</b> is a boon for developers who need CI for their apps and additionally, Gitlab provides private repo. Today let's look at creating a pipeline with an environment where our app is built within Docker when you commit to Gitlab repository.</span><br />
<span style="font-family: "times" , "times new roman" , serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-oM29wzVfwB0/WWLUbsb4i-I/AAAAAAAAQvA/ayKfsoWEcoY4AdKyRF8zKGMP4aTuIBrfgCLcBGAs/s1600/cicd_pipeline_infograph.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Gitlab Shared Runner CI with Docker Tutorial - Build Android Studio Project in Gitlab" border="0" data-original-height="618" data-original-width="1600" height="246" src="https://3.bp.blogspot.com/-oM29wzVfwB0/WWLUbsb4i-I/AAAAAAAAQvA/ayKfsoWEcoY4AdKyRF8zKGMP4aTuIBrfgCLcBGAs/s640/cicd_pipeline_infograph.png" title="Gitlab Shared Runner CI with Docker Tutorial - Build Android Studio Project in Gitlab" width="640" /></a></div>
<span style="font-family: "times" , "times new roman" , serif;"><br />
</span><span style="font-family: "times" , "times new roman" , serif;"><span id="goog_1232629676"></span><span id="goog_1232629677"></span>One of the most hassling things is building the project and moving into production phase by testing the app on several devices. The thing is maintaining a private server to build your production ready apps will cost you high like Travis CI, Circle CI. For startup companies, Gitlab shared runner is more than enough for building the application and delivering it with artifacts on regular basis.</span><br />
<span style="font-family: "times" , "times new roman" , serif;"><br />
</span> <br />
<h3 style="text-align: left;">
<span style="font-family: "times" , "times new roman" , serif;">Getting Started:</span></h3>
<div>
<span style="font-family: "times" , "times new roman" , serif;">If you're familiar with Docker basics, It would be fine to continue with this tutorial. If not you can just learn about <a href="https://docs.docker.com/get-started/" rel="nofollow" target="_blank">Docker basics here</a>. Docker is an awesome environment where you virtualize your environment from the Host environment and run your specific test, build, commands. Since you virtualize your docker environment you won't be affected by external dependencies or prone to vulnerabilities while shipping your application. If you don't have Gitlab Account, signup now. It's completely free for individual developers.</span></div>
<div>
<ol style="text-align: left;">
<li><span style="font-family: "times" , "times new roman" , serif;">Create Gitlab Repo </span></li>
<li><span style="font-family: "times" , "times new roman" , serif;">Commit your Android Studio project in master branch</span></li>
</ol>
<h3 style="text-align: left;">
<span style="font-family: "times" , "times new roman" , serif;">Enabling Shared Runner and Pipeline in Gitlab:</span></h3>
</div>
<div>
<span style="font-family: "times" , "times new roman" , serif;">After creating the project, visit <b>Settings -> Pipelines</b> in your project repo and make sure Shared Runner is Enabled. You may get up to 4 Shared instance to build your project. Fortunately, Gitlab has collaborated with DigitialOcean to maintain servers for running such builds, test for users. so, you need not worry about scaling, downsizing the server size. </span><br />
<span style="font-family: "times" , "times new roman" , serif;"><br /></span>
<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://2.bp.blogspot.com/-ZuuuceLeLRM/WWLijT5hQcI/AAAAAAAAQvc/p-EsYBLLrv088o3vE8fFq368oAXyyTKmgCLcBGAs/s1600/Screen%2BShot%2B2017-07-10%2Bat%2B7.34.31%2BAM.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Gitlab Shared Runner CI with Docker Tutorial - Complete Guide on Building Android Studio Project in Gitlab" border="0" data-original-height="919" data-original-width="1600" height="366" src="https://2.bp.blogspot.com/-ZuuuceLeLRM/WWLijT5hQcI/AAAAAAAAQvc/p-EsYBLLrv088o3vE8fFq368oAXyyTKmgCLcBGAs/s640/Screen%2BShot%2B2017-07-10%2Bat%2B7.34.31%2BAM.png" title="Gitlab Shared Runner CI with Docker Tutorial - Complete Guide on Building Android Studio Project in Gitlab" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Enable Shared Runner for this Project</td></tr>
</tbody></table>
<span style="font-family: "times" , "times new roman" , serif;"><br /></span></div>
<h3 style="text-align: left;">
<span style="font-family: "times" , "times new roman" , serif;">Build Configuration File</span></h3>
<div>
<span style="font-family: "times" , "times new roman" , serif;">In order to trigger our build, we need to write some configuration file. First, let's build our Docker image using Dockerfile. Gitlab too provides private docker registry for users, where you can build the Docker image in the pipeline and upload it to Gitlab registry. So, this will reduce our build time in halfway because installing our build tools ( Android SDK ) and other tools earlier will reduce the time and concentrate on compiling the source code into APKs.</span></div>
<div>
<span style="font-family: "times" , "times new roman" , serif;"><br />
</span></div>
<div>
<span style="font-family: "times" , "times new roman" , serif;">Our Docker file looks like given below, it's just series of Linux commands where you process it and save it as Docker image. Whenever need you can deploy it as a container and make your desired process run inside the Docker container.</span></div>
<h4 style="text-align: left;">
<span style="font-family: "times" , "times new roman" , serif;">Prerequisites :</span></h4>
<div>
<ul style="text-align: left;">
<li>Create a new branch from existing master branch, remove all your application code. </li>
<li>Create new file named as <b>Dockerfile</b></li>
<li>Checkout docker file snippet below</li>
<li>Create new file named<b> .gitlab-ci.yml</b> </li>
<li>Checkout Gitlab-ci file below, customize it as per your repository name</li>
<li>Commit all your files, this will automatically trigger a build to create new Docker Image and upload it to Docker registry.</li>
</ul>
<div>
Dockerfile for creating Android environment image is given below,</div>
</div>
<div>
<script src="https://gist.github.com/shivasurya/12cbb3f314d39f098424eb36d673e4f0.js"></script><br /></div>
<div>
<span style="font-family: "times" , "times new roman" , serif;"><br />
</span></div>
<div>
<span style="font-family: "times" , "times new roman" , serif;"><br />
</span></div>
<div>
<span style="font-family: "times" , "times new roman" , serif;"><br />
</span></div>
gitlab-ci.yml file for instructing the pipeline to perform the job is also given below, kindly replace with your own repository registry name, branch name or else <b>build won't be triggered</b>.<br />
<script src="https://gist.github.com/shivasurya/db559d8c2c86ae4b245892c19248380b.js"></script><br /></div>
<br />
once you commit your code, Gitlab automatically triggers an Image Build in the pipeline. if everything goes smooth, your docker image will be uploaded to your Gitlab Docker registry. You can use the Docker image for further building the project without any hassle. Whenever you need to refresh or update your SDK tools, you can simply change and commit it, that will trigger an image building process and it'll be uploaded to your Gitlab Docker registry.<br />
<br />
<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/-XqW3mitR4KY/WWLh30JDZvI/AAAAAAAAQvQ/JGLHAEEQsTccf5Fke2-mCeuE3RHy35SXwCEwYBhgL/s1600/Screen%2BShot%2B2017-07-10%2Bat%2B7.32.40%2BAM.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Gitlab Shared Runner CI with Docker Tutorial - Complete Guide on Building Android Studio Project in Gitlab" border="0" data-original-height="756" data-original-width="1536" height="314" src="https://4.bp.blogspot.com/-XqW3mitR4KY/WWLh30JDZvI/AAAAAAAAQvQ/JGLHAEEQsTccf5Fke2-mCeuE3RHy35SXwCEwYBhgL/s640/Screen%2BShot%2B2017-07-10%2Bat%2B7.32.40%2BAM.png" title="Gitlab Shared Runner CI with Docker Tutorial - Complete Guide on Building Android Studio Project in Gitlab" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Building process after each commit</td></tr>
</tbody></table>
<br />
<h4 style="text-align: left;">
Build your Application:</h4>
<div>
Switch to your master branch, start writing similar gitlab-ci.yml file to instruct the build machine in order to trigger build and building the artifacts. It's going to be normal Gradle commands to build your application project and generate your APKs, AAR files and even more out of it. you can sign your application here with confidence by adding your Keystore file as Environment variable.</div>
<div>
<br /></div>
<div>
Let's look at our configuration file for building the application,</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/shivasurya/1ba07a3d2d579080ad7bf54c44ef32aa.js"></script><br /></div>
</div>
<br />
So, in before script, we added execution permission for gradlew executable file in user level (normally root/guest in terms of Docker). In build script, we simply added our Gradle command to build our application project. Since it's a sample I haven't added release build script here. After building process is over, you can specify your artifact folder, so that Gitlab can detect that folder and make it available for downloading. Normally it contains your project APK files, logs, Gradle profile report and even more if you have used custom tasks in Gradle.<br />
<br />
So, commit this code and Gitlab will automatically trigger a build. Now, Docker is launched in a shared runner and then your Gradle scripts will be running to produce APK. It's up to you to have some integration with Gitlab to deliver your APK artifacts into team e-mails, slack channel, chat or even more.<br />
<br />
<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://3.bp.blogspot.com/-yDD2mkXbU-c/WWLiWvENr2I/AAAAAAAAQvY/i4GmJsafE9APgtzxh1dzQAn9yW1S7z7hgCLcBGAs/s1600/Screen%2BShot%2B2017-07-10%2Bat%2B7.33.48%2BAM.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Gitlab Shared Runner CI with Docker Tutorial - Complete Guide on Building Android Studio Project in Gitlab" border="0" data-original-height="782" data-original-width="1600" height="312" src="https://3.bp.blogspot.com/-yDD2mkXbU-c/WWLiWvENr2I/AAAAAAAAQvY/i4GmJsafE9APgtzxh1dzQAn9yW1S7z7hgCLcBGAs/s640/Screen%2BShot%2B2017-07-10%2Bat%2B7.33.48%2BAM.png" title="Gitlab Shared Runner CI with Docker Tutorial - Complete Guide on Building Android Studio Project in Gitlab" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Application building in Docker Container</td></tr>
</tbody></table>
<br />
<h4 style="text-align: left;">
Skip triggering build for each commit</h4>
<div>
you can skip the triggering build by adding an extra commit message, such as [skip ci] or [ci skip]. This will be automatically understood by Gitlab and it won't be triggering build automatically.</div>
<div>
<br /></div>
<div>
I hope this was an awesome tool for Developers who don't need to write the script for building, launch Build server and run, test, build your source code into release files. You don't need to worry about infrastructure, deliver and testing it seamlessly.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<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/-u-FLAEZYeTU/WWLh-XWb9jI/AAAAAAAAQvU/WNu-tTTYpsI1gIbPWGTS9ZLi_OF5N-NqgCLcBGAs/s1600/Screen%2BShot%2B2017-07-10%2Bat%2B7.33.13%2BAM.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Gitlab Shared Runner CI with Docker Tutorial - Complete Guide on Building Android Studio Project in Gitlab" border="0" data-original-height="709" data-original-width="1600" height="282" src="https://4.bp.blogspot.com/-u-FLAEZYeTU/WWLh-XWb9jI/AAAAAAAAQvU/WNu-tTTYpsI1gIbPWGTS9ZLi_OF5N-NqgCLcBGAs/s640/Screen%2BShot%2B2017-07-10%2Bat%2B7.33.13%2BAM.png" title="Gitlab Shared Runner CI with Docker Tutorial - Complete Guide on Building Android Studio Project in Gitlab" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">pipeline containing previous Docker Image Build and Artifact build</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
<br /></div>
<div>
If you've any doubts, comment below or chat with me in Google+/Fb. Share is care.</div>
<div>
<br /></div>
</div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com1tag:blogger.com,1999:blog-3047364308476473322.post-1813202904693218252017-05-16T07:56:00.002+05:302017-05-17T20:30:37.345+05:30Google launches new Tools to help the developers for producing high performance Daydream Apps<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="https://play.google.com/store/apps/details?id=com.google.android.vr.home&hl=en">Daydream Apps</a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-weight: 500; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> will be striking feature in the Android Nougat release. Building this VR experience is mission critical task for all the developers involved. Because it’s like explaining the entire game of thrones story in an hour. There are lots of possibilities and corner cases.</span></span></div><div dir="ltr" style="line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;"><span style="color: black; font-size: 11pt; font-style: normal; font-weight: 500; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Building this VR apps process must be scalable, that is the apps developed must not consume the entire resource or the device must not get overheated.</span></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-gF_YJRHicHI/WRpagVC-cWI/AAAAAAAAQUs/rzwRDdLeUkUkTWofLTY3aVul90KVdOEowCEw/s1600/daydream1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><img alt="Google launches new Tools to help the developers for producing high performance Daydream Apps" border="0" height="360" src="https://1.bp.blogspot.com/-gF_YJRHicHI/WRpagVC-cWI/AAAAAAAAQUs/rzwRDdLeUkUkTWofLTY3aVul90KVdOEowCEw/s640/daydream1.png" title="Google launches new Tools to help the developers for producing high performance Daydream Apps" width="640" /></span></a></div><div dir="ltr" style="line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-weight: 500; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "helvetica" , sans-serif;"> </span></span><br />
<div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;">So to help the developers who are working on this Google has announced brand new tools for producing high performance Daydream apps. So to begin with, let's have a look on Daydream Renderer.</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Rendering is an important aspect when it comes for <br />
<a href="https://vr.google.com/cardboard/developers/">developing VR apps</a>. Because Rendering is the thing which makes the user to feel the impact. To produce the impact of rendering the secret is the art of producing light and shadows in the visuals at appropriate places. As per Google, this Daydream Renderer is a set of optimized tools that allows the user to produce dynamic lighting and shadowing in the visuals that gives an authentic impact to the users.</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-i2LmOxJ1m5Q/WRpiTQwwk1I/AAAAAAAAQVA/H_yj68XwoPQ1JN3SoI1fA3eZywmRkLMIACLcB/s1600/daydream2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><img border="0" height="360" src="https://2.bp.blogspot.com/-i2LmOxJ1m5Q/WRpiTQwwk1I/AAAAAAAAQVA/H_yj68XwoPQ1JN3SoI1fA3eZywmRkLMIACLcB/s640/daydream2.png" width="640" /></span></a></div><span style="color: black; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "helvetica" , sans-serif;"> </span></span> <br />
<div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span class="sd-abs-pos" style="left: -0.26cm; position: absolute; top: 0cm; width: 196px;"><span style="font-family: "arial" , "helvetica" , sans-serif;"> </span></span> <style type="text/css">
@page { margin: 2cm }
p { margin-bottom: 0.25cm; line-height: 120% }
a:link { so-language: zxx }
</style> </div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Developers who are constructing the games for the daydream platforms will be getting more benefitted from this Daydream Renderer. As the lighting and shadowing is very essential for making the user to stay intact with the game. This Tool will do that for sure as per the Google. Speaking about the VR for Games, Actually Roulette in Casino is my favourite Game, I used to play <a href="https://www.casino.com/ca/roulette/">online roulette at casino.com</a>. Roulette is an game in casino that actually stimulates one's brain to choose the exact option among the various possibilities. </span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Then moving on to next, Instant Preview</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Normally a Developer writing a mobile application follows the process of writing a code, then compile and upload the change to a mobile device and test whether the change works for it. So at the end of the day a developer will spend several minutes idle during the entire process. </span><span class="sd-abs-pos" style="left: 0cm; position: absolute; top: 0cm; width: 188px;"><span style="font-family: "arial" , "helvetica" , sans-serif;"> </span></span><span style="font-family: "arial" , "helvetica" , sans-serif;"> </span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;">But the Instant Preview now introduced by Google ensures that this process could be completed in seconds therefore saving the time of a developer increasing the productivity. It also ensures Quality allowing developers to do more iterations in less time.</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-vkfdmLBq9C8/WRpi7JoGZQI/AAAAAAAAQVI/xKNYuVxm29ciuYshWy4vEfPDLmxAfkK8gCLcB/s1600/daydream3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://1.bp.blogspot.com/-vkfdmLBq9C8/WRpi7JoGZQI/AAAAAAAAQVI/xKNYuVxm29ciuYshWy4vEfPDLmxAfkK8gCLcB/s640/daydream3.png" width="640" /></a></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Google has also introduced performance monitoring tools like GAPID and PerfHUD </span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span class="sd-abs-pos" style="left: -0.26cm; position: absolute; top: 0.26cm; width: 356px;"><span style="font-family: "arial" , "helvetica" , sans-serif;"> </span></span><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Though the VR Apps looks just great, it will reach wide range of users only when it performs in an optimized way. The device on which the VR apps runs must not get overheated and the VR apps must run with no dependence upon the device or the environmental condition. </span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="https://github.com/google/gapid/blob/master/BUILDING.md">gapid permits the developers</a> to perform deep GPU profiling providing ideas upon how the hardware and software interacts to drives performance. It also allows the developer to search for any other corner case that could bring the entire performance down.</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;">PerfHUD is an another extraordinary tool which helps the developers to rightly plot which areas of the games and apps push the hardware of the device too hard.</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div align="justify" style="line-height: 115%; margin-bottom: 0cm;"><span style="font-family: "arial" , "helvetica" , sans-serif;">So, looking through the future VR is going to be next big game changer for Game Industry and enables the user to use virtual reality from their smart phone devices.</span></div></div><style type="text/css">
@page { margin: 2cm }
p { margin-bottom: 0.25cm; line-height: 120% }
a:link { so-language: zxx }
</style></div>shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-69085166650132917572017-05-16T00:59:00.003+05:302018-12-12T17:10:16.446+05:30How to build an iOS App with the Xcode 8 and Swift 3<div dir="ltr" style="text-align: left;" trbidi="on">
Hello developers, In this tutorial I'm gonna show you how to build an iOS App with Xcode.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-bPtfy3WcJE8/WRoEPRID-PI/AAAAAAAAA8s/QnF_1-tkFc8iZBQVnH490dGssYa0aa1bgCLcB/s1600/thumb_IMG_3393_1024.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://3.bp.blogspot.com/-bPtfy3WcJE8/WRoEPRID-PI/AAAAAAAAA8s/QnF_1-tkFc8iZBQVnH490dGssYa0aa1bgCLcB/s640/thumb_IMG_3393_1024.jpg" width="640" /></a></div>
<br />
<h3 style="text-align: left;">
What is Xcode and Swift ?</h3>
<b> Xcode</b> is a integrated development environment which is developed by apple for developing iOS, macOS, watchOS and tvOS Apps. It comes with iOS SDK, compilers, debugging tools and simulators etc. Install the Xcode app from the Mac App Store itself or download it from <a href="https://developer.apple.com/xcode/" target="_blank">here</a>. Note: To install Xcode, you need to have Mac machine.<br />
<br />
<b> </b><b>Swift </b>is a new programming language developed by <b>Apple Inc </b>and it's release by <b>Chris Lattner </b>in 2010. Swift comes with <b>Playground </b>to write swift program and the outputs are displayed in right pane. It shows the results very fast and you no need to click any run buttons to execute the program. It is very interesting know ? Swift has a lot of features and it has a huge libraries too. The <b>extension </b>of swift program is <b>.swift </b><br />
<b><br /></b>
<b> </b>Okay now let's create our new project and start to build our first iOS App in Xcode.<br />
<h3 style="text-align: left;">
Creating a Project</h3>
<div>
<ul style="text-align: left;">
<li>Open Xcode and Create a new project from the file menu.</li>
<li>Select <b>Single View Application </b>template and click <b>Next.</b></li>
<li>Give name to product, organization and organization identifier. See below image for reference.</li>
</ul>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-Av98FItzgqQ/WRnyF3XqY_I/AAAAAAAAA7c/GsdtlFlJMDoWkqgox8NKwgl2FdjeZyDOACLcB/s1600/Screen%2BShot%2B2017-05-15%2Bat%2B11.51.35%2BPM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="456" src="https://3.bp.blogspot.com/-Av98FItzgqQ/WRnyF3XqY_I/AAAAAAAAA7c/GsdtlFlJMDoWkqgox8NKwgl2FdjeZyDOACLcB/s640/Screen%2BShot%2B2017-05-15%2Bat%2B11.51.35%2BPM.png" width="640" /></a></div>
</div>
<div>
<h3 style="text-align: left;">
Adding Views </h3>
<div>
<ul style="text-align: left;">
<li>Click the <b>Main.Storyboard</b> file.</li>
<li>Drag and drop the <b>Label and Button</b> from the <b>Object Library</b> into the <b>View. </b>Do like below image.</li>
</ul>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-SPoXtFcW2Mk/WRnztaMEH2I/AAAAAAAAA7g/EDOQnCP5U0Men0w55wLrirC9pFrlCL8LACLcB/s1600/Screen%2BShot%2B2017-05-15%2Bat%2B11.58.02%2BPM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="432" src="https://1.bp.blogspot.com/-SPoXtFcW2Mk/WRnztaMEH2I/AAAAAAAAA7g/EDOQnCP5U0Men0w55wLrirC9pFrlCL8LACLcB/s640/Screen%2BShot%2B2017-05-15%2Bat%2B11.58.02%2BPM.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<br /></div>
</div>
</div>
<div>
<ul>
<li style="text-align: left;">Now open the Assistant Editor in Xcode. Click the double circled icon in top right corner(See the image below) or Click <span style="font-family: "helvetica"; font-size: 16px;">CMD + OPTION + ENTER shortcut.</span></li>
</ul>
<div>
<span style="font-family: "helvetica";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-GEk3Kfk2THw/WRn07y3-akI/AAAAAAAAA7k/0nSI21BXTo8OC_2PxqC-b6FNjuFjTD5YQCLcB/s1600/Screen%2BShot%2B2017-05-16%2Bat%2B12.04.23%2BAM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="452" src="https://1.bp.blogspot.com/-GEk3Kfk2THw/WRn07y3-akI/AAAAAAAAA7k/0nSI21BXTo8OC_2PxqC-b6FNjuFjTD5YQCLcB/s640/Screen%2BShot%2B2017-05-16%2Bat%2B12.04.23%2BAM.png" width="640" /></a></div>
<div>
<span style="font-family: "helvetica";"><br /></span></div>
</div>
<div>
<ul>
<li style="text-align: left;">Then drag and drop the label and button into the view controller(viewcontroller.swift file)</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-UG1URcbqGms/WRn3bs3nJtI/AAAAAAAAA7o/-4z758irqeUTTDJd4uyYN6wVoA8GmUmWwCLcB/s1600/labelimg.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="434" src="https://4.bp.blogspot.com/-UG1URcbqGms/WRn3bs3nJtI/AAAAAAAAA7o/-4z758irqeUTTDJd4uyYN6wVoA8GmUmWwCLcB/s640/labelimg.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/--CYbdIvRmIo/WRn3cDlBKzI/AAAAAAAAA7s/LKiEZOZ18oo1pTrR1uNVFZMkXpNl_X8oQCLcB/s1600/buttonimg.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="428" src="https://2.bp.blogspot.com/--CYbdIvRmIo/WRn3cDlBKzI/AAAAAAAAA7s/LKiEZOZ18oo1pTrR1uNVFZMkXpNl_X8oQCLcB/s640/buttonimg.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<ul style="text-align: left;">
<li>Then it'll show you one tiny window, in that you've to change the connections and click connect. For button, change the connection from Outlet into Action. For Label, set the connection as Outlets(By default, it's Outlet only) </li>
</ul>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-bNjdrTL8P8I/WRn3-vJ-J_I/AAAAAAAAA7w/y8IPCCWydew2gZUouwMRNMelzoyJ13B4ACLcB/s1600/Screen%2BShot%2B2017-05-16%2Bat%2B12.09.26%2BAM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://2.bp.blogspot.com/-bNjdrTL8P8I/WRn3-vJ-J_I/AAAAAAAAA7w/y8IPCCWydew2gZUouwMRNMelzoyJ13B4ACLcB/s640/Screen%2BShot%2B2017-05-16%2Bat%2B12.09.26%2BAM.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-d06V4786nxQ/WRn3-Y4NbUI/AAAAAAAAA70/X9xl3d_y-R4sJG5sLHT3XxF2919CgXMowCLcB/s1600/Screen%2BShot%2B2017-05-16%2Bat%2B12.11.28%2BAM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="458" src="https://4.bp.blogspot.com/-d06V4786nxQ/WRn3-Y4NbUI/AAAAAAAAA70/X9xl3d_y-R4sJG5sLHT3XxF2919CgXMowCLcB/s640/Screen%2BShot%2B2017-05-16%2Bat%2B12.11.28%2BAM.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
</div>
<div>
<h3 style="text-align: left;">
View Controller Code</h3>
</div>
<div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">import</span><span style="font-variant-ligatures: no-common-ligatures;"> UIKit</span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal; min-height: 14px;">
<span style="font-variant-ligatures: no-common-ligatures;"></span><br /></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">class</span><span style="font-variant-ligatures: no-common-ligatures;"> ViewController: </span><span style="color: #703daa; font-variant-ligatures: no-common-ligatures;">UIViewController</span><span style="font-variant-ligatures: no-common-ligatures;"> {</span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal; min-height: 14px;">
<span style="font-variant-ligatures: no-common-ligatures;"></span><br /></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;"> </span><span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">@IBOutlet</span><span style="font-variant-ligatures: no-common-ligatures;"> </span><span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">var</span><span style="font-variant-ligatures: no-common-ligatures;"> helloWorldLabel: </span><span style="color: #703daa; font-variant-ligatures: no-common-ligatures;">UILabel</span><span style="font-variant-ligatures: no-common-ligatures;">!</span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal; min-height: 14px;">
<span style="font-variant-ligatures: no-common-ligatures;"> </span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal; min-height: 14px;">
<span style="font-variant-ligatures: no-common-ligatures;"> </span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;"> </span><span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">@IBAction</span><span style="font-variant-ligatures: no-common-ligatures;"> </span><span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">func</span><span style="font-variant-ligatures: no-common-ligatures;"> clickMeBtnPressed(</span><span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">_</span><span style="font-variant-ligatures: no-common-ligatures;"> sender: </span><span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">Any</span><span style="font-variant-ligatures: no-common-ligatures;">) {</span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal; min-height: 14px;">
<span style="font-variant-ligatures: no-common-ligatures;"> </span></div>
<div style="color: #008400; font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span style="font-variant-ligatures: no-common-ligatures;">//Setting hello world label into Welcome to iOS World</span></div>
<div style="color: #d12f1b; font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span style="color: #4f8187; font-variant-ligatures: no-common-ligatures;">helloWorldLabel</span><span style="color: black; font-variant-ligatures: no-common-ligatures;">.</span><span style="color: #703daa; font-variant-ligatures: no-common-ligatures;">text</span><span style="color: black; font-variant-ligatures: no-common-ligatures;"> = </span><span style="font-variant-ligatures: no-common-ligatures;">"Welcome to iOS World"</span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal; min-height: 14px;">
<span style="font-variant-ligatures: no-common-ligatures;"> </span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal; min-height: 14px;">
<span style="font-variant-ligatures: no-common-ligatures;"> </span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;"> }</span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal; min-height: 14px;">
<span style="font-variant-ligatures: no-common-ligatures;"> </span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal; min-height: 14px;">
<span style="font-variant-ligatures: no-common-ligatures;"> </span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;"> </span><span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">override</span><span style="font-variant-ligatures: no-common-ligatures;"> </span><span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">func</span><span style="font-variant-ligatures: no-common-ligatures;"> viewDidLoad() {</span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;"> </span><span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">super</span><span style="font-variant-ligatures: no-common-ligatures;">.</span><span style="color: #3e1e81; font-variant-ligatures: no-common-ligatures;">viewDidLoad</span><span style="font-variant-ligatures: no-common-ligatures;">()</span></div>
<div style="color: #008400; font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span style="font-variant-ligatures: no-common-ligatures;">// Do any additional setup after loading the view, typically from a nib.</span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal; min-height: 14px;">
<span style="font-variant-ligatures: no-common-ligatures;"> </span></div>
<div style="color: #d12f1b; font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span style="color: #3e1e81; font-variant-ligatures: no-common-ligatures;">print</span><span style="color: black; font-variant-ligatures: no-common-ligatures;">(</span><span style="font-variant-ligatures: no-common-ligatures;">"viewDidLoad function is called"</span><span style="color: black; font-variant-ligatures: no-common-ligatures;">)</span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;"> }</span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal; min-height: 14px;">
<span style="font-variant-ligatures: no-common-ligatures;"></span><br /></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;"> </span><span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">override</span><span style="font-variant-ligatures: no-common-ligatures;"> </span><span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">func</span><span style="font-variant-ligatures: no-common-ligatures;"> didReceiveMemoryWarning() {</span></div>
<div style="color: #3e1e81; font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span style="color: #ba2da2; font-variant-ligatures: no-common-ligatures;">super</span><span style="color: black; font-variant-ligatures: no-common-ligatures;">.</span><span style="font-variant-ligatures: no-common-ligatures;">didReceiveMemoryWarning</span><span style="color: black; font-variant-ligatures: no-common-ligatures;">()</span></div>
<div style="color: #008400; font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span style="font-variant-ligatures: no-common-ligatures;">// Dispose of any resources that can be recreated.</span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;"> }</span></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal; min-height: 14px;">
<span style="font-variant-ligatures: no-common-ligatures;"></span><br /></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal; min-height: 14px;">
<span style="font-variant-ligatures: no-common-ligatures;"></span><br /></div>
<div style="font-family: Menlo; font-size: 12px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;">}</span></div>
</div>
<div>
<div>
<h3 style="text-align: left;">
<span style="font-variant-ligatures: no-common-ligatures;">
<span style="font-variant-ligatures: no-common-ligatures;"><span style="font-variant-ligatures: no-common-ligatures;">Run the App</span></span></span></h3>
</div>
<div>
<span style="font-variant-ligatures: no-common-ligatures;"><span style="font-variant-ligatures: no-common-ligatures;"> Now build the project and run it. Then the app will open in <b>Simulator.</b></span></span><br />
<span style="font-variant-ligatures: no-common-ligatures;"><span style="font-variant-ligatures: no-common-ligatures;"><b><br /></b></span>
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-variant-ligatures: no-common-ligatures;"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/5pNGFWV9pB8/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/5pNGFWV9pB8?feature=player_embedded" width="320"></iframe></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-variant-ligatures: no-common-ligatures;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-variant-ligatures: no-common-ligatures;"><span style="font-size: large;"><b><a href="https://github.com/coderearth42/Hello-World" target="_blank">Download this Project</a></b></span></span></div>
<span style="font-variant-ligatures: no-common-ligatures;"><span style="font-variant-ligatures: no-common-ligatures;"><b><br /></b></span>
Boom!!! Just click the "<b>Click Me</b>" button then the label will changed from "<b>Hello World"</b> to "<b>Welcome to iOS World"</b>. We've completed our first hello world iOS app in Xcode using Swift 3. I hope you guys understand and if you've any doubts in this tutorial then just drop your comments. See you in the next tutorial...</span></div>
<span style="font-variant-ligatures: no-common-ligatures;">
</span></div>
</div>
Unknownnoreply@blogger.com0Thoothukudi, Tamil Nadu, India8.7641660999999988 78.134836100000038.5130831 77.812112600000034 9.0152490999999984 78.457559600000025tag:blogger.com,1999:blog-3047364308476473322.post-50265607461346363482017-04-28T09:39:00.000+05:302018-12-08T06:10:26.365+05:30Working with Pdf JS - Render PDF natively in Browser Tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Posting Web tutorial after a long time with a lot of energy and possibilities. There would be few things in life which would be life changing and support you even in worst times, yes of course, my blog and readers are my supporters who support me throughout my journey. </span><br>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br>
</span></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/-q2otGogtQ3g/WQIA_1zOqhI/AAAAAAAAQI4/LPyQbCQXDJ0ajl90EEqJnK_tgqG8xPoEgCLcB/s1600/pdfjstutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Working with Pdf JS - Render PDF natively in Browser Tutorial - i-visionblog" border="0" height="460" src="https://4.bp.blogspot.com/-q2otGogtQ3g/WQIA_1zOqhI/AAAAAAAAQI4/LPyQbCQXDJ0ajl90EEqJnK_tgqG8xPoEgCLcB/s640/pdfjstutorial.png" title="Working with Pdf JS - Render PDF natively in Browser Tutorial - i-visionblog" width="640"></a></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br>
</span> <br>
<h4 style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="https://app.box.com/s/o7u41ctszcbhqub2ifepf1f1xf0da7a0" rel="nofollow" target="_blank">Download</a> </span></h4>
<h3 style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Why Pdf.js? </span></h3>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Pdf Js is awesome javascript library supported by Mozilla and Individual contributors to make the web a beautiful place to visit and get work done. So, Every browser is capable of viewing Pdf files and what is so special about the pdf.js library is you can control the pdf with Javascript code rendering, switching pages and even more. So, Developer has the ultimate power to control the pdf loaded from the server and rendering part in the client. PDF are awesome documents that are daily shared between business for invoices and business payment processing documents, official agreements, documentations even more possibilities.</span></div>
<h3 style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Use cases:</span></h3>
</div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">When you're building an application that heavily depends on the pdf view to the customer and need to render as a part of the application, pdf js is right choice to go with it. Where you can control the contents of the pdfs with session maintenance (premium and free customers ), personalized pdf rendering.</span></div>
<h3 style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Getting Started:</span></h3>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Integrating pdf.js into your web/mobile web application is straightway easy but requires knowledge about javascript promises. To write clean and remove callback-style code, Promises are introduced.</span></div>
<h3 style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Integration:</span></h3>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Either you can use pre-build version or you can clone the source code from GitHub and try to build with gulp command. I prefer to build the Javascript library from source. If you want to use it directly you can refer <a href="http://jsfiddle.net/pdfjs/9engc9mw/" rel="nofollow" target="_blank">pastebin reference code</a>.</span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br>
</span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">building process commands:</span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Make sure you have <a href="http://www.i-visionblog.com/search/label/node.js" target="_blank">node.js</a> installed in your system with sudo access. Open the shell and try to execute the commands. First of all clone the <a href="https://github.com/mozilla/pdf.js" rel="nofollow" target="_blank">GitHub repo</a>.</span></div>
<div>
</div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"> </span><b><span style="font-family: "trebuchet ms" , sans-serif;">> cd <Pdf.js repo></span></b></div>
<div>
<b><span style="font-family: "trebuchet ms" , sans-serif;"> > npm install </span></b></div>
<div>
<b><span style="font-family: "trebuchet ms" , sans-serif;"> > gulp generic </span></b></div>
<div>
<br></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">By running above commands, you can successfully build the source code into distribution code (dist) in the build directory. You can use this as javascript library importing it as a script.</span></div>
<h3 style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Importing:</span></h3>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">You can simply include the pdf.js in your script tag along with the pdf.worker.js file. Once it has been setup you need to write application logic based on your web application.</span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br>
</span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b></b></span><br>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><head></b></span></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b> </b></span><br>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span><title>Pdf.js Example Application | i-visionblog</title></b></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span><script src="build/pdf.js"></script></b></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span><script src="build/pdf.worker.js"></script></b></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span><script src="js/app.js"></script></b></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b></head></b></span></div>
</div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br>
</span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">So, this will import the whole pdf.js and its recommended to go for minified version while moving into production mode.</span></div>
<h3 style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">PDF.js API to render pdf:</span></h3>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">pdf.js uses Ajax feature to load the pdf from the server. It reduces the memory footprint by loading the pdf by pagewise instead of loading all at a time. In fact, that's bad practice to load all pdf content at a time unless it is too important. PDF.js also uses a separate worker to download and render the content to Html DOM (document object model). We could getPage(index) method to load the page and use render() function to render the page in the Html DOM. It also uses Context to instruct the height, width, scale and element container to load. But it all works with promises to reduce the callback-style of coding. Here is sample javascript snippet to load all the pages into the canvas.</span><br>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br>
<script src="https://gist.github.com/shivasurya/d1f7ee5b2bac0323d9ea078a4bcbf5d4.js"></script><br>
</span> <br>
<h3 style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Final Words:</span></h3>
</div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">You can download the whole application project from <a href="https://app.box.com/s/o7u41ctszcbhqub2ifepf1f1xf0da7a0" rel="nofollow" target="_blank">here</a>. The above code simply loads the pdf from the local server and then renders all pages into Html DOM as canvas images. It's up to you to devise your own event click listeners to load next and previous pages as per your application logic.</span><br>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br></span>
<span style="font-family: arial, helvetica, sans-serif;">Hope you've liked this article. Subscribe for more tutorials and follow me in Google+/Facebook for updates. If you have any doubts chat with me or drop me a mail. Feel free to comment below. Share is care.</span></div>
</div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-78353588739851725332017-04-25T13:02:00.000+05:302017-04-25T13:04:20.266+05:30How to Make an Explainer Video<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="line-height: 108%; margin-bottom: 0.28cm;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span lang="en-US">Creating an explainer video is a great way to attract the attention of prospective customers. By giving people solutions to common problems, you build trust — which often translates to custom over time. Your company may be able to solve the problems or provide the solutions they need, but in order to get this message across, you need to explain exactly what your business is about. This is where </span><span lang="en-US"><b><a href="https://www.explainervideo24.com/" rel="nofollow" target="_blank">best explainer video</a></b></span><span lang="en-US"> comes in. </span> </span></div>
<div style="line-height: 108%; margin-bottom: 0.28cm;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;">Consumers are bombarded with information, and they have relatively short attention spans as a result. To explain what your company does using text might take 600 words or more, which would take up 10 minutes of a person’s precious time. But by creating a video, you can deliver the same information quickly and in a more engaging way.</span></span></div>
<div style="line-height: 108%; margin-bottom: 0.28cm;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;">In order to create the best explainer video you can, there are several steps you need to take.</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-k7WAFfaDwt0/WP76nozT0AI/AAAAAAAAQFs/89pU5n9O4Dc5u7EILko92Lh2izNB2mGyQCLcB/s1600/projectexplainer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="333" src="https://4.bp.blogspot.com/-k7WAFfaDwt0/WP76nozT0AI/AAAAAAAAQFs/89pU5n9O4Dc5u7EILko92Lh2izNB2mGyQCLcB/s640/projectexplainer.png" width="640" /></span></a></div>
<div lang="en-US" style="line-height: 108%; margin-bottom: 0.28cm;">
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="https://www.youtube.com/watch?v=UV7vvKEPF7k" rel="nofollow" target="_blank">Demo Video</a> | <a href="https://www.explainervideo24.com/" rel="nofollow" target="_blank">Best Explainer Video</a></span></div>
<h3 style="line-height: 108%; margin-bottom: 0.28cm; text-align: left;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;">Write a compelling script</span></span></h3>
<div style="line-height: 108%; margin-bottom: 0.28cm;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;">The video making process should start with a script. Your video should follow a logical, linear narrative, and it should contain all of the essential information you need to communicate in a way that will be engaging and informative. By writing a script, you can be sure that you’re creating the best explainer video possible from the very beginning of the process.</span></span></div>
<h3 style="line-height: 108%; margin-bottom: 0.28cm; text-align: left;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;">Create a storyboard</span></span></h3>
<div style="line-height: 108%; margin-bottom: 0.28cm;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;">Once you have a completed script, you can use it to start putting the visual aspects of your video in place — with a storyboard. Think of your storyboard as a visual sketch of what your video is going to look like. This gives you a tactile method of experimenting with different scenes and visuals before you start the video production process. Try out different movements, transitions and angles on your storyboard until you’re happy that what you’ve created will deliver the right message.</span></span></div>
<h3 style="line-height: 108%; margin-bottom: 0.28cm; text-align: left;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;">Enlist the services of a narrator or voice-over</span></span></h3>
<div style="line-height: 108%; margin-bottom: 0.28cm;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;">The narrator or voice-over tells the story to complement the visuals in your video. This is where your script comes to life, so it’s important that you choose someone with an engaging and clear voice. It’s definitely worth spending some money on hiring a professional voice-over, as the right voice will make your audience feel more engaged with the story — and your company.</span></span></div>
<h3 style="line-height: 108%; margin-bottom: 0.28cm; text-align: left;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;">Animate your video</span></span></h3>
<div style="line-height: 108%; margin-bottom: 0.28cm;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;">This is probably the most important task you will need to complete during the entire process. As videos on most social media platforms play on mute until they are clicked, your visuals need to be professional, visually engaging and interesting. You need to capture the attention of prospective customers within a few seconds, so what they see on the screen has to be impressive. Don’t cut corners here: hire a professional animator to create visuals that will stun your audience. A talented animator will take your script and transform it into a visual story that flows seamlessly. Music, sound effects and text will also add to the overall aesthetic — creating a video that will represent your brand in the best possible way.</span></span></div>
<h3 style="line-height: 108%; margin-bottom: 0.28cm; text-align: left;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;">Publish and track the results</span></span></h3>
<div style="line-height: 108%; margin-bottom: 0.28cm;">
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="https://www.blogger.com/null" name="_GoBack"></a> <span lang="en-US">Publish your video on your own website, relevant third-party websites and on all of the main social media platforms. It’s vital that you track how your video is performing — both in terms of click-through rates, conversion rates and the general feedback of your audience. Depending on the results, you might want to tweak your video slightly. Consider implementing A/B testing on two different videos in order to see which approach delivers the best results. </span> </span></div>
<style type="text/css"> @page { margin: 2cm } p { margin-bottom: 0.25cm; direction: ltr; line-height: 120%; text-align: left; orphans: 2; widows: 2 } a:link { color: #0563c1 } </style>
<br />
<div style="line-height: 108%; margin-bottom: 0.28cm;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;">If you can create an informative and engaging explainer video, you should be able to use it for driving high quality traffic to your website. This not only grows your business, it builds your brand.</span></span></div>
<div style="line-height: 108%; margin-bottom: 0.28cm;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></span></div>
<div style="line-height: 108%; margin-bottom: 0.28cm;">
<span lang="en-US"><span style="font-family: Arial, Helvetica, sans-serif;">Hope you've liked this post, if any doubts feel free to comment below or chat with me in Google+/ Facebook. Share is care.</span></span></div>
<div style="line-height: 108%; margin-bottom: 0.28cm;">
<br /></div>
</div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com1tag:blogger.com,1999:blog-3047364308476473322.post-31777996990763790352017-03-11T12:39:00.000+05:302017-03-11T12:39:14.153+05:30Android TabLayout Tutorial - Material Design Support Library<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Verdana, sans-serif;"><span style="font-family: "verdana" , sans-serif;">TabLayout is excellent user experience design component to arrange heterogeneous data in similar fashion aka categorization. Even Google Play store categorize Apps, Games, Magazines apps under tabs. Drilling down in depth Apps are categorized as Top Paid Apps, Free Apps, Trending Apps and even more as Sliding Tabs. Tabs became famous when they were introduced in Google I/O iosched application where it was implemented u</span><span style="font-family: "verdana" , sans-serif;">sing </span><a href="https://github.com/google/iosched/blob/master/android/src/main/java/com/google/samples/apps/iosched/ui/widget/SlidingTabLayout.java" rel="nofollow" style="font-family: Verdana, sans-serif;" target="_blank">SlidingTabLayout</a><span style="font-family: "verdana" , sans-serif;"> with help of </span>viewpager<span style="font-family: "verdana" , sans-serif;"> component, co-ordinating the both working TabLayout was born and brought to Support library as plug and play UI component.</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />
</span> </span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-185IwN5V3qk/WMN_4sPl84I/AAAAAAAAOw4/RBJPZ0cCbtY7Fn1ROKGS8tj5b0Wksc-NACLcB/s1600/addtext_com_MjMzMjI3MjIxNjk5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Verdana, sans-serif;"><img border="0" height="480" src="https://2.bp.blogspot.com/-185IwN5V3qk/WMN_4sPl84I/AAAAAAAAOw4/RBJPZ0cCbtY7Fn1ROKGS8tj5b0Wksc-NACLcB/s640/addtext_com_MjMzMjI3MjIxNjk5.png" width="640" /></span></a></div>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />
</span> </span><br />
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Download:</span></h3>
<div>
<span style="font-family: Verdana, sans-serif;">You can check out the source code from <a href="https://github.com/shivasurya/material-tab-layout" rel="nofollow" target="_blank">github repo</a>.</span><br />
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Use case:</span></h3>
</div>
<div>
<ol style="text-align: left;">
<li><span style="font-family: Verdana, sans-serif;">When you are able categorize different types of tag containing huge amount of similar data</span></li>
<li><span style="font-family: Verdana, sans-serif;">Manage different options as tabs under single activity</span></li>
</ol>
</div>
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Prerequisites:</span></h3>
<div>
<ol style="text-align: left;">
<li><span style="font-family: Verdana, sans-serif;">Android Studio with Appropriate SDK installed - <a href="http://www.i-visionblog.com/2017/03/how-to-install-and-use-android-studio-on-ubuntu-16.04.html" target="_blank">Installation Steps for Ubuntu 16.04</a></span></li>
<li><span style="font-family: Verdana, sans-serif;">Android Support Repository installed via SDK manager</span></li>
<li><span style="font-family: Verdana, sans-serif;">Create New Android Studio project</span></li>
</ol>
<div>
<span style="font-family: Verdana, sans-serif;">If you're interested check out <a href="http://www.i-visionblog.com/2017/03/bottom-navigation-drawer-view-android-example.html" target="_blank">Material Design Bottom Navigation tutorial</a>, <a href="http://www.i-visionblog.com/2017/03/android-bottom-sheet-example-android-support-library-tutorial.html" target="_blank">Bottom Sheets Tutorial</a>.</span></div>
</div>
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Getting Started:</span></h3>
<div>
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="color: #006600; font-family: "verdana" , sans-serif;"><span style="font-family: Verdana, sans-serif; font-size: 14.9999px;">compile 'com.android.support:appcompat-v7:25.2.0'
compile 'com.android.support:design:25.2.0'
compile 'com.android.support:support-v4:25.2.0' </span></span></pre>
</div>
</div>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">Add these dependencies to <b>buid.gradle</b> file and hit the <b>gradle sync</b> button. Once you've synced these libraries and methods are available for you in offline.</span></span><br />
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Adding XML layout:</span></h3>
<div>
<span style="font-family: Verdana, sans-serif;">Setting up Tablyout for your application is pretty simple and straight forward. open your main activity.xml file and start typing the sample code given below.</span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />
</span> </span><br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="color: #006600; font-family: "verdana" , sans-serif;"><span style="font-family: Verdana, sans-serif; font-size: 14.9999px;"><?xml version="1.0" encoding="utf-8"?>
<<b>LinearLayout</b> xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.ivisionblog.apps.materialtabsexample.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<b> <android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabIndicatorColor="@color/colorAccent"
app:tabGravity="fill"/>
</b> </android.support.design.widget.AppBarLayout>
<b> <android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="@android:color/white" />
</b></LinearLayout>
</span></span></pre>
</div>
</div>
<span style="font-family: Verdana, sans-serif;">Here AppBarLayout contains Toolbar and TabLayout which co-ordinates the scrolling behavior, and then Viewpager to help to manage different fragments corresponding to the tabs by managing memory efficiently.</span><br />
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Bind Fragments to Tabs:</span></h3>
<div>
<span style="font-family: Verdana, sans-serif;">After creating XML design layout, we need to bind layout to corresponding Fragments with Tabs using Adapter. So, we need to create TabAdapter to hold all our fragments which is used by viewpager to manage those fragments and its corresponding memory.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="color: #006600; font-family: Verdana, sans-serif;"><span style="font-size: 14.9999px;">public class </span><b style="font-size: 14.9999px;">MainActivity</b><span style="font-size: 14.9999px;"> extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
@Override
protected void </span><b style="font-size: 14.9999px;">onCreate</b><span style="font-size: 14.9999px;">(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar mtoolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mtoolbar);
getSupportActionBar().setTitle("Customer App");
</span><b style="font-size: 14.9999px;"> viewPager = (ViewPager) findViewById(R.id.viewpager);
addFragmentsToViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
</b><span style="font-size: 14.9999px;">
}
private void </span><b style="font-size: 14.9999px;">addFragmentsToViewPager</b><span style="font-size: 14.9999px;">(ViewPager viewPager) {
<b> TabAdapter adapter = new TabAdapter(getSupportFragmentManager());
adapter.addFragment(new CustomersFragment(), "Customers");
adapter.addFragment(new ContactsFragment(), "Contacts");
viewPager.setAdapter(adapter);
</b> }
}
</span></span></pre>
</div>
</div>
<h4 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">TabAdapter.java:</span></h4>
<div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="color: #006600; font-family: "verdana" , sans-serif;"><span style="font-family: Verdana, sans-serif; font-size: 14.9999px;">class <b>TabAdapter</b> extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public <b>TabAdapter</b>(FragmentManager manager) {
super(manager);
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
</span></span></pre>
</div>
</div>
<div>
<span style="font-family: Verdana, sans-serif;">Thus above code maintains fragment and title as List which is extended from FragmentPagerAdapter and override the getItem and getCount method to implement. Whenever Viewpager(While swipeing or changing the tabs) requires the Fragment it calls the getItem method and which returns the Fragment to inflate into the view.</span></div>
<h4 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Sample Fragment:</span></h4>
<div>
<span style="font-family: Verdana, sans-serif;">I've added sample Fragment containing Recyclerview which is populated with Contacts data with Contacts Adapter and bind the data into the Recyclerview single contact view. The most important thing is it's good to write the recyclerview implementation in onActivityCreated method inside the fragment.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="color: #006600; font-family: "verdana" , sans-serif;"><span style="font-size: 14.9999px;"><span style="font-family: Verdana, sans-serif; font-size: 14.9999px;">
public class <b>ContactsFragment</b> extends Fragment {
private RecyclerView mRecyclerview;
public <b>ContactsFragment</b>() {
// Required empty public constructor
}
public static ContactsFragment <b>newInstance</b>() {
ContactsFragment fragment = new ContactsFragment();
Bundle args = new Bundle();
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_contacts, container, false);
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
<b>mRecyclerview = (RecyclerView) getActivity().findViewById(R.id.contactlist);
ContactsAdapter contactsAdapter = new ContactsAdapter(generateData());
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getContext());
mRecyclerview.setLayoutManager(layoutManager);
mRecyclerview.setAdapter(contactsAdapter);</b>
}
private ArrayList<ContactsModal> <b>generateData</b>(){
ArrayList<ContactsModal> contactsModals = new ArrayList<>();
contactsModals.add(new ContactsModal("Midhun Vignesh S","987654321"));
contactsModals.add(new ContactsModal("Shivasurya S","987654321"));
contactsModals.add(new ContactsModal("Aswin Vayiravan","987654321"));
contactsModals.add(new ContactsModal("Muthu Alagappan M","987654321"));
contactsModals.add(new ContactsModal("SriramaMoorthy S","987654321"));
contactsModals.add(new ContactsModal("Puviyarasu V","987654321"));
contactsModals.add(new ContactsModal("Arun Kumar K R","987654321"));
contactsModals.add(new ContactsModal("Venkat Raman","987654321"));
return contactsModals;
}
}
</span></span></span></pre>
<div>
<h4>
<span style="font-family: Verdana, sans-serif;">Sample RecyclerView Adapter & Holder:</span></h4>
<div>
<span style="font-family: Verdana, sans-serif;">Check out the sample recyclerview adapter and holder class to support our recyclerview which is embedded in our fragment xml file.</span></div>
</div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="color: #006600; font-family: "verdana" , sans-serif;"><span style="font-family: Verdana, sans-serif; font-size: 14.9999px;">public class <b>ContactsAdapter</b> extends RecyclerView.Adapter<ContactsAdapter.ContactsHolder> {
private ArrayList<ContactsModal> mContactsModals;
private FragmentManager mFm;
public <b>ContactsAdapter</b>(ArrayList<ContactsModal> contactsModals){
mContactsModals = contactsModals;
}
@Override
public ContactsHolder <b>onCreateViewHolder</b>(ViewGroup parent, int viewType) {
Context context = parent.getContext();
LayoutInflater inflater = LayoutInflater.from(context);
View contactView = inflater.inflate(R.layout.single_contact, parent, false);
ContactsHolder viewHolder = new ContactsHolder(contactView);
return viewHolder;
}
@Override
public void onBindViewHolder(ContactsHolder holder, int position) {
ContactsModal contact = mContactsModals.get(position);
holder.mPhoneView.setText(contact.getmPhoneNumber());
holder.mContactsNameView.setText(contact.getmName());
}
@Override
public int getItemCount() {
return mContactsModals.size();
}
public static class <b>ContactsHolder</b> extends RecyclerView.ViewHolder{
TextView mContactsNameView;
TextView mPhoneView;
public <b>ContactsHolder</b>(View itemView) {
super(itemView);
mContactsNameView = (TextView) itemView.findViewById(R.id.nameView);
mPhoneView = (TextView) itemView.findViewById(R.id.phoneNumberView);
}
}
}
</span></span></pre>
</div>
</div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">And finally Fragment and single contact xml file code goes below,</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="color: #006600; font-family: "verdana" , sans-serif;"><span style="font-size: 14.9999px;"><span style="font-family: Verdana, sans-serif; font-size: 14.9999px;"><<b>FrameLayout</b> xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.ivisionblog.apps.materialtabsexample.fragments.ContactsFragment">
<b><android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:id="@+id/contactlist"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView></b>
</<b>FrameLayout</b>></span></span></span></pre>
</div>
</div>
<span style="font-family: Verdana, sans-serif;">Single Contact XMl file which used by contacts adapter to inflate inside recyclerview,<br /></span><br />
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="color: #006600; font-family: "verdana" , sans-serif;"><span style="font-family: Verdana, sans-serif; font-size: 14.9999px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="@+id/container"
android:layout_width="match_parent"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:background="?android:attr/selectableItemBackground"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="2"
android:layout_gravity="center"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:src="@mipmap/ic_launcher_round"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="8"
android:orientation="vertical"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:text="Shivasurya S"
android:textSize="18sp"
android:layout_marginTop="15dp"
android:layout_marginLeft="15dp"
android:textStyle="bold"
android:id="@+id/nameView"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:text="9788029400"
android:textSize="15sp"
android:layout_marginTop="10dp"
android:layout_marginLeft="15dp"
android:id="@+id/phoneNumberView"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:background="#e7e7e7"
android:layout_marginTop="5dp"
android:layout_height="3dp"/>
</LinearLayout>
</span></span></pre>
<span style="font-family: Verdana, sans-serif;">Thus, We have successfully integrated Tabs with Recyclerview inside fragments in our application. If you want customization of tabs in your application you can check the table and attribute into your TabLayout xml code as <b>app:attribute namespace</b></span><br />
<span style="font-family: Verdana, sans-serif;"><b><br /></b></span>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; font-size: 16px; margin-bottom: 16px;">
The most important properties available are listed below:</div>
<table style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #333333; display: block; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; font-size: 16px; margin-bottom: 16px; margin-top: 0px; max-width: 100%; overflow: auto; width: 894.109px; word-break: normal;"><thead style="box-sizing: border-box;">
<tr style="border-top: 1px solid rgb(204, 204, 204); box-sizing: border-box;"><th style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px; text-align: left;">Name</th><th style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px; text-align: left;">Options</th><th style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px; text-align: left;">Description</th></tr>
</thead><tbody style="box-sizing: border-box;">
<tr style="border-top: 1px solid rgb(204, 204, 204); box-sizing: border-box;"><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">tabBackground</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">@drawable/image</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;">Background applied to the tabs</td></tr>
<tr style="background-color: #f8f8f8; border-top: 1px solid rgb(204, 204, 204); box-sizing: border-box;"><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">tabGravity</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">center</code>, <code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">fill</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;">Gravity of the tabs</td></tr>
<tr style="border-top: 1px solid rgb(204, 204, 204); box-sizing: border-box;"><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">tabIndicatorColor</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">@color/blue</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;">Color of the tab indicator line</td></tr>
<tr style="background-color: #f8f8f8; border-top: 1px solid rgb(204, 204, 204); box-sizing: border-box;"><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">tabIndicatorHeight</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">@dimen/tabh</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;">Height of the tab indicator line</td></tr>
<tr style="border-top: 1px solid rgb(204, 204, 204); box-sizing: border-box;"><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">tabMaxWidth</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">@dimen/tabmaxw</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;">Maximum width of the tab</td></tr>
<tr style="background-color: #f8f8f8; border-top: 1px solid rgb(204, 204, 204); box-sizing: border-box;"><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">tabMode</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">fixed</code>, <code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">scrollable</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;">Small number of fixed tabs or scrolling list</td></tr>
<tr style="border-top: 1px solid rgb(204, 204, 204); box-sizing: border-box;"><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">tabTextColor</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;"><code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; margin: 0px; padding: 0.2em 0px;">@color/blue</code></td><td style="border: 1px solid rgb(221, 221, 221); box-sizing: border-box; padding: 6px 13px;">Color of the text on the tab</td></tr>
</tbody></table>
<br />
<span style="font-family: Verdana, sans-serif;">Hope you have enjoyed this post, checkout official Google Android documentation for further updates in forcoming support library versions. Feel free to comment below for doubts or chat with me in Google+/Facebook or drop me e-mail for replies. Share is care.</span><br />
<br /></div>
</div>
</div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-32712103950953493542017-03-10T12:08:00.002+05:302017-03-10T12:08:46.354+05:30Android Bottom Sheet Example - Android Support Library Tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Verdana, sans-serif;">Bottom Sheets is excellent user experience design component when comparing long press dialog pop-up box, context menu where the user can consume options easily from the bottom with attractive and meaningful user interface. So, let us dive into the implementation of Bottom Sheets in the Android application using official android support library.</span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><br />
</span> </span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-gGIr1Jl6X0g/WMJJzfYpT-I/AAAAAAAAOu0/alF35xg6JncUqE7YVGdZZ5wC8g7RlEJWQCLcB/s1600/bottomsheets.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Android Bottom Sheet Example - Android Support Library Tutorial" border="0" height="360" src="https://1.bp.blogspot.com/-gGIr1Jl6X0g/WMJJzfYpT-I/AAAAAAAAOu0/alF35xg6JncUqE7YVGdZZ5wC8g7RlEJWQCLcB/s640/bottomsheets.png" title="Android Bottom Sheet Example - Android Support Library Tutorial" width="640" /></a></div>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><br /></span></span>
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Prerequisites:</span></h3>
<div>
<ol style="text-align: left;">
<li><span style="font-family: Verdana, sans-serif;">Android Studio and SDK installed - <a href="http://www.i-visionblog.com/2017/03/how-to-install-and-use-android-studio-on-ubuntu-16.04.html" target="_blank">How to install android studio</a></span></li>
<li><span style="font-family: Verdana, sans-serif;"><a href="http://www.i-visionblog.com/2017/03/bottom-navigation-drawer-view-android-example.html" target="_blank">Bottom Navigation Drawer Tutorial</a> - If you're interested check out this article</span></li>
</ol>
</div>
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Getting Started:</span></h3>
<div>
<span style="font-family: Verdana, sans-serif;">Add support library dependency in <b>build.gradle</b> file and sync it via android studio</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br />
</span></div>
<div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #656e7f; font-size: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 0.83333em; font-stretch: normal; font-style: inherit; font-weight: inherit; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="border: 0px; box-sizing: border-box; color: #006600; font-size: 14.9999px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-family: Verdana, sans-serif;">compile 'com.android.support:design:25.2.0'
compile 'com.android.support:support-v4:25.2.0' </span></span></pre>
</div>
</div>
<div>
<span style="font-family: Verdana, sans-serif;">Use gradle sync to download all the support libraries and import to your project.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br />
</span></div>
<div>
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Adding Layout: </span></h3>
<div>
<span style="font-family: Verdana, sans-serif;">In order to add Bottom sheets to the activity, NestedScrollView is used with additionally bottom sheet behaviour with other options. check out the layout xml file below.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br />
</span></div>
<div>
<div style="background-color: white; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="font-family: Verdana, sans-serif;"><span style="color: #006600; font-family: Verdana, sans-serif;"><span style="font-size: 14.9999px;"><?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.ivisionblog.apps.bottomsheetexample.MainActivity">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:id="@+id/recyclerview"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
<android.support.v4.widget.NestedScrollView
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="350dp"
android:clipToPadding="true"
app:behavior_hideable="true"
android:elevation="14dp"
android:background="@android:color/holo_blue_light"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout></span></span><span style="color: #333333; font-size: 0.83333em; font-style: inherit; font-weight: inherit;">
</span></span></pre>
<div style="font-size: 18px;">
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Bottom Sheet behavior is adopted for the nested scroll view with attribute named as <b>app:layout_behavior </b>which implements the bottom sheet behavior.</span></span></div>
<h3 style="font-size: 18px; text-align: left;">
<span style="font-family: Verdana, sans-serif;">Java Implementation:</span></h3>
</div>
</div>
<div>
<span style="font-family: Verdana, sans-serif;">We'll try to add Bottom Sheet dialog box behavior in this tutorial, simply extend your fragment class with <b>BottomSheetDialogFragment </b>and start implementing the onCreateView method for building the fragment user interface, check the code below for understanding.</span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;"></span></span><br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
</div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<div style="orphans: 2; text-align: left; text-indent: 0px; widows: 2;">
<div style="background-color: white; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin: -2px 0px 1em; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="font-family: Verdana, sans-serif;"><span style="color: #006600;"><span style="font-size: 14.9999px;">public class <b>BottomDialogFragment</b> extends <b>BottomSheetDialogFragment</b> {
public static <b>BottomDialogFragment</b> getInstance() {
return new BottomDialogFragment();
}
@Nullable
@Override
public View <b>onCreateView</b>(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.<b>bottom_sheet_fragment</b>, container, false);
((TextView)view.findViewById(R.id.name)).setText("<b>Elon Musk</b>");
return view;
}
}</span></span><span style="color: #333333; font-size: 0.83333em; font-style: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px;">
</span></span></pre>
<div style="-webkit-text-stroke-width: 0px; color: #656e7f; font-size: 18px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px;">
<span style="font-family: Verdana, sans-serif;"><br />
</span></div>
</div>
</div>
<span style="font-family: Verdana, sans-serif;">Thus this will help in creating fragment and inflating into the bottom sheet view, now let us see how to control the bottom sheet from our activity by responding to user clicks. Since i've used Recyclerview added click event and binding the bottom sheet behavior with recyclerview click event.</span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><br />
</span> </span><br />
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="font-family: Verdana, sans-serif;"><span style="color: #006600;"><span style="font-size: 14.9999px;">public class MainActivity extends <b>AppCompatActivity</b> {
private RecyclerView mRecyclerView;
private BottomSheetBehavior mBottomSheetBehavior;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
mRecyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));
<b>View bottomSheet = findViewById( R.id.bottom_sheet );
mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
</b>mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
mBottomSheetBehavior.setPeekHeight(0);
}
}
@Override
public void onSlide(View bottomSheet, float slideOffset) {
}
});
ContactsAdapter contactsAdapter = new ContactsAdapter(generateData(),mBottomSheetBehavior,getSupportFragmentManager());
mRecyclerView.setAdapter(contactsAdapter);
<b>mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
</b>
}
</span></span>}</span></pre>
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Bottom Sheet behavior based on Recyclerview click Event:</span></h3>
</div>
</div>
<div>
<span style="font-family: Verdana, sans-serif;">Now let us map recyclerview click event with bottom sheet behavior event, so that whenever it is clicked bottom sheet opens up with transition from down. check the Recyclerview adapter code for detailed understanding.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br />
</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br />
</span></div>
<div>
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="font-family: Verdana, sans-serif;"><span style="color: #006600;"><span style="font-family: Verdana, sans-serif; font-size: 14.9999px;"> @Override
public void onBindViewHolder(ContactsHolder holder, int position) {
ContactsModal contact = mContactsModals.get(position);
holder.mPhoneView.setText(contact.getmPhoneNumber());
holder.mContactsNameView.setText(contact.getmName());
holder.mLinearLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
<b> BottomDialogFragment bottomSheetDialog = BottomDialogFragment.getInstance().getInstance();
bottomSheetDialog.show(mFm, "Custom Bottom Sheet");</b>
}
});
}</span></span></span></pre>
</div>
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Bottom Sheet Useful Methods:</span></h3>
<div>
<ol style="text-align: left;">
<li><span style="font-family: Verdana, sans-serif;"> <b>BottomSheetDialog.show()</b> - To open the Bottom sheet dialog from hidden state to expanded state</span></li>
<li><span style="font-family: Verdana, sans-serif;"><b> BottomSheetBehavior.setState() - </b>To set the state of the bottom sheet behavior from java code based on events.</span></li>
<li><span style="font-family: Verdana, sans-serif;"><b>BottomSheetBehavior.setPeekHeight(int)</b> - To set the Peek Height of the bottom sheet from the bottom. </span></li>
</ol>
</div>
</div>
<span style="font-family: Verdana, sans-serif;">For full working sample, follow the <a href="https://github.com/shivasurya/bottomsheets-android-materialdesign-support-library-tutorial" rel="nofollow" target="_blank">Github repo</a>. Just clone and open in android studio to execute the bottom navigation drawer view android example application. This Bottom Sheet view is bundled with Android support library officially and it's worth trying out in your application.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Hope you have enjoyed the post, post you own thoughts, additional points as comments. For complete code, projects, hugs/bugs just drop me mail/ chat in Facebook/Google+. share is care.</span></div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-51812504331283056082017-03-09T00:12:00.001+05:302017-03-09T00:12:10.659+05:30Bottom Navigation Drawer view Android Example - Android Support Library Tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "verdana" , sans-serif;">A few days back tried Bottom Navigation View from official support library for Android and </span><br />
<span style="font-family: "verdana" , sans-serif;">got some good impression over it and try to solve problems like lifecycle management while switching between fragments or bottom navigation view tabs. So, let us dive into the topic to configure <b>Bottom Navigation Drawer view </b>for android app.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-RYnwWGuhh2I/WMBQDU67VNI/AAAAAAAAOsQ/FDhrWDc2PWwzmZ6_uh4XcFQqyPwBNUlAwCLcB/s1600/Bottom-navigation-Google-Photos-840x473.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bottom Navigation Drawer view Android Example - Android Support Library Tutorial" border="0" height="326" src="https://4.bp.blogspot.com/-RYnwWGuhh2I/WMBQDU67VNI/AAAAAAAAOsQ/FDhrWDc2PWwzmZ6_uh4XcFQqyPwBNUlAwCLcB/s640/Bottom-navigation-Google-Photos-840x473.jpg" title="Bottom Navigation Drawer view Android Example - Android Support Library Tutorial" width="640" /></a></div>
<span style="font-family: "verdana" , sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;">Prerequisites :</span></h3>
<div>
<ol style="text-align: left;">
<li><span style="font-family: "verdana" , sans-serif;">Android Studio and SDK installed - <a href="http://www.i-visionblog.com/2017/03/how-to-install-and-use-android-studio-on-ubuntu-16.04.html">How to install android studio</a></span></li>
</ol>
<h4 style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;">Getting Started</span></h4>
</div>
<div>
<span style="font-family: "verdana" , sans-serif;">Note: If you're using <b>Android studio 2.3 latest version as of March 2017</b> you can create bottom navigation view directly from New => Activity Gallery.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">Add support library dependency in build.gradle file and sync it via android studio.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<div style="background-color: white; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="color: #006600; font-family: "courier pitch" , "courier" , monospace;">compile 'com.android.support:design:25.2.0'
compile 'com.android.support:support-v4:25.2.0' </span></pre>
</div>
<div>
<span style="font-family: "verdana" , sans-serif;">Use gradle sync to download all the support libraries and import to your project.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<h3 style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;">Adding Layout: </span></h3>
<span style="background-color: white; color: #656e7f; font-family: "pt serif" , "source sans pro" , "helvetica" , "arial" , sans-serif; font-size: 18px;"></span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">We need to wrap the bottom navigation view with the Linear layout and make it as a bottom with gravity option so that it can be meaningful as the name specifies.</span></div>
<div>
<br /></div>
<div>
<div style="background-color: white; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="color: #006600;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.ivisionblog.apps.bottomnavigationdrawer.MainActivity">
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/navigation" />
</LinearLayout></span></pre>
</div>
</div>
<div>
<br /></div>
<div>
<span style="font-family: "verdana" , sans-serif;">The above XML code contains <b>linear layout with Framelayout and bottom navigation view</b>. Frame layout contains the fragments which is yet to be replaced while clicking the bottom tabs.</span></div>
<h3 style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;">Adding menu navigation with Icon:</span></h3>
<div>
<span style="font-family: "verdana" , sans-serif;">Now we can add navigation icons with title via predefined xml file for the bottom navigation drawer view. </span></div>
<div>
<ol style="text-align: left;">
<li><span style="font-family: "verdana" , sans-serif;">android:icon represents the icon present in the navigation drawer</span></li>
<li><span style="font-family: "verdana" , sans-serif;">android:title represents the title below the icon in the bottom navigation drawer</span></li>
<li><span style="font-family: "verdana" , sans-serif;">android:checked represent the currently selected icon </span></li>
</ol>
<div>
<div style="background-color: white; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="color: #006600;"><?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:checked="true"
android:icon="@drawable/ic_home_black_24dp"
android:title="@string/title_home" />
<item
android:id="@+id/navigation_dashboard"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="@string/title_dashboard" />
<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="@string/title_notifications" />
</menu>
</span></pre>
</div>
</div>
</div>
<h3 style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;">Java code Implementation:</span></h3>
<div>
<span style="font-family: "verdana" , sans-serif;">Now take reference of the xml view and setting bottom navigation view with listener. check out the code below,</span></div>
<div>
<br /></div>
<div>
<div style="background-color: white; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="color: #006600; font-family: "courier pitch" , "courier" , monospace;"> </span><span style="color: #006600;">@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
<b>BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
changeFragment(new HomeFragment());</b>
}</span>
</pre>
<div>
<br /></div>
<div>
<pre class="prettyprint prettyprinted" data-codota-status="done" data-original-code="sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386" data-snippet-id="ext.933a3e026021f429dea080f7044ddb94" data-snippet-saved="false" style="background: rgb(247, 247, 247); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-stretch: normal; line-height: 18px; margin-bottom: 1em; margin-top: -2px; max-width: 100%; outline: 0px; overflow: auto; padding: 1em; vertical-align: baseline; word-break: break-all; word-wrap: break-word;"><span style="color: #006600; font-family: "courier pitch" , "courier" , monospace;"> </span><span style="color: #006600;">private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
<b> changeFragment(new HomeFragment());</b>
return true;
case R.id.navigation_dashboard:
<b> changeFragment(new ButtonFragment());</b>
return true;
case R.id.navigation_notifications:
<b> changeFragment(new ItemFragment());</b>
return true;
}
return false;
}
};
private void <b>changeFragment</b>(Fragment fm){
android.support.v4.app.FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.<b>replace</b>(R.id.content, fm);
ft.setTransition(FragmentTransaction.<b>TRANSIT_FRAGMENT_FADE</b>);
ft.addToBackStack(null);
ft.commit();
}</span></pre>
</div>
</div>
</div>
</div>
<br />
<span style="font-family: Verdana, sans-serif;">As you can check the above code in which, on Bottom Navigation Drawer clicks are handled and changed the fragment accordingly with Fragment manager replace methods.</span><br />
<br />
<span style="font-family: Verdana, sans-serif;">For Full working sample, follow the <a href="https://github.com/shivasurya/bottom-navigation-drawer/" rel="nofollow" target="_blank">Github repo</a>. Just clone and open in android studio to execute the bottom navigation drawer view android example application. This Bottom Navigation Drawer view is bundled with <b>Android support library officially</b> and it's worth trying out in your application.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Hope you have enjoyed the post, post you own thoughts, additional points as comments. For complete code, projects, hugs/bugs just drop me mail/ chat in Facebook/Google+. share is care.</span><br />
<br /></div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-50185598605744655342017-03-07T08:04:00.003+05:302017-03-07T08:04:55.763+05:30How To Install and Use Android Studio on Ubuntu 16.04<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Verdana, sans-serif;">This week started with frustrating incident my windows machine crashed and that result in complete loss of data. Thanks to <a class="g-profile" href="https://plus.google.com/113097501007938759378" target="_blank">+Aswin Vayiravan</a> for rescuing me and suggested me to go completely for ubuntu environment for productivity.</span><br />
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">Android Studio is complex software from Google for Android developers to build android apps for phone, tablet, wearables, glasses, TV and android things. So, let us see <b><a href="http://www.i-visionblog.com/2017/03/how-to-install-and-use-android-studio-on-ubuntu-16.04.html">how to install and use android studio on Ubuntu 16.04</a> machine</b>. Installing Android studio is'nt big task because the whole process has become simpler nowadays. Lets's dive into the step by step tutorial.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-Nm96NMZFrKU/WL4b0lzesEI/AAAAAAAAOpU/QRmSyESgpAA7auWq6_RK76wBH9Y7_lqDwCLcB/s1600/studio-hero.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Install and Use Android Studio on Ubuntu 16.04" border="0" src="https://4.bp.blogspot.com/-Nm96NMZFrKU/WL4b0lzesEI/AAAAAAAAOpU/QRmSyESgpAA7auWq6_RK76wBH9Y7_lqDwCLcB/s1600/studio-hero.jpg" title="How To Install and Use Android Studio on Ubuntu 16.04" /></a></div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Prerequisites : </span></h3>
<div>
<ul style="text-align: left;">
<li><span style="font-family: Verdana, sans-serif;">64 Bit Ubuntu Machine.</span></li>
<li><span style="font-family: Verdana, sans-serif;">Sudo user access and active network connection.</span></li>
</ul>
</div>
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Step 1 : Installing Dependencies</span></h3>
<div>
<div style="background-color: white; box-sizing: border-box; font-family: proxima-nova, sans-serif; font-size: 16px; line-height: 28px; margin-bottom: 22px; margin-left: auto; margin-right: auto; padding: 0px; width: 745px;">
<span style="font-family: Verdana, sans-serif;">But first, let's update the package database:</span></div>
<pre class="code-pre command" style="background-color: rgba(0, 0, 0, 0.0470588); border-radius: 3px; box-sizing: border-box; font-size: 14px; margin-bottom: 28px; margin-left: auto; margin-right: auto; overflow: auto; padding: 13px 17px; width: 745px; word-wrap: normal;"><code langs="" style="background-color: transparent; border-radius: 3px; box-sizing: border-box; color: #3a3a3a; line-height: 22px; margin: 0px; padding: 0px;"><ul class="prefixed" style="box-sizing: border-box; margin: 0px; padding: 0px; white-space: normal;"><span style="font-family: Verdana, sans-serif;">
<li class="line" prefix="$" style="box-sizing: border-box; line-height: 1.5 !important; list-style: disc outside none; margin-bottom: 3px; margin-left: 20px; margin-right: 0px !important; margin-top: 0px !important; padding: 0px !important; white-space: pre;">sudo apt-get update</li>
</span></ul>
</code></pre>
</div>
<div>
<span style="font-family: Verdana, sans-serif;">Open your terminal and start typing the command. remeber that you need sudo privildge to do so below command.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<pre class="prettyprint" style="background: rgb(247, 247, 247); border: 1px solid rgb(221, 221, 221); color: #006600; font-size: 13px; font-stretch: normal; line-height: 18px; margin-bottom: 1em; overflow: auto; padding: 1em;"><span style="font-family: Verdana, sans-serif;"><span class="pln" style="color: black;">sudo apt</span><span class="pun" style="color: #666600;">-</span><span class="kwd" style="color: #000088;">get</span><span class="pln" style="color: black;"> install libc6</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;">i386 libncurses5</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;">i386 libstdc</span><span class="pun" style="color: #666600;">++</span><span class="lit" style="color: #006666;">6</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;">i386 lib32z1 libbz2</span><span class="pun" style="color: #666600;">-</span><span class="lit" style="color: #006666;">1.0</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;">i386</span></span></pre>
</div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Step 2 : Download Android Studio</span></h3>
<div>
<span style="font-family: Verdana, sans-serif;">Visit Official Android Studio Developer page - <a href="https://developer.android.com/studio/index.html" rel="nofollow" target="_blank">Link</a> and start downloading Android Studio Zip file which will be around 400 - 500 MB.</span></div>
<div>
<ul style="text-align: left;">
<li><span style="font-family: Verdana, sans-serif;">Unzip the Android Studio Zip package and extract to your /home/username directory</span></li>
</ul>
<div>
<div style="background-color: #e7e7e7; font-size: 16px;">
<span style="font-family: Verdana, sans-serif;">Extract archive.</span></div>
<div class="top-box hide" style="background-color: #e7e7e7; font-size: 16px;">
<div class="alert-info">
</div>
</div>
<pre class="example" data-codota-status="done" data-original-code="$ unzip android-studio-ide-145.3360264-linux.zip -d ~/bin
$ ~/bin/android-studio/bin/studio.sh
" data-snippet-id="ext.f2fff797806bbf5ef17ad64661b43a9e" data-snippet-saved="false" style="background-color: #eeeeee; border: 1px solid gray; font-size: 16px; padding: 8px;"><span style="font-family: Verdana, sans-serif;">$ unzip android-studio-ide-145.3360264-linux.zip -d ~/bin
$ sudo ~/bin/android-studio/bin/studio.sh
</span></pre>
</div>
</div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">if necessary add <b>chmod u+x execute permission</b> for studio shell script file</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Step 3 : Android Studio Customization</span></h3>
</div>
<div>
<span style="font-family: Verdana, sans-serif;">After executing the above command now, Android studio automatically starts up and asks for customization of IDE and installing relevant android sdk for network.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">1) Click Next to start</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-mxoLhNnnz7U/WL4XqlWLoDI/AAAAAAAAOo0/omxeifoYyuY2iaQoMiYN7nqhHHfYVmUlgCLcB/s1600/first.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Verdana, sans-serif;"><img alt="Installation step - How To Install and Use Android Studio on Ubuntu 16.04" border="0" height="313" src="https://4.bp.blogspot.com/-mxoLhNnnz7U/WL4XqlWLoDI/AAAAAAAAOo0/omxeifoYyuY2iaQoMiYN7nqhHHfYVmUlgCLcB/s400/first.png" title="How To Install and Use Android Studio on Ubuntu 16.04" width="400" /></span></a></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<span style="font-family: Verdana, sans-serif;">2) Now select <b>Standard </b>in Install type while <b>installing android studio in ubuntu 16.04</b>. This will auto configure for you without wasting any time.</span></div>
<div>
<b><span style="font-family: Verdana, sans-serif;"><br />
</span></b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-XAvMjCnEQbk/WL4XtRfDrfI/AAAAAAAAOpA/M4gNng60sL4WGQsoalJKXkygiA3dUrlQgCEw/s1600/second.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Verdana, sans-serif;"><img alt="Installation step - How To Install and Use Android Studio on Ubuntu 16.04" border="0" height="313" src="https://2.bp.blogspot.com/-XAvMjCnEQbk/WL4XtRfDrfI/AAAAAAAAOpA/M4gNng60sL4WGQsoalJKXkygiA3dUrlQgCEw/s400/second.png" title="How To Install and Use Android Studio on Ubuntu 16.04" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;">3) Now this is to show a review of the Android SDK verification screen where you would be shown amount of SDK to be installed via internet. use some good network connection to download all those relevant SDK for development.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-dXJTUmU_lvs/WL4XuUHSMyI/AAAAAAAAOpE/q7yjlFUjDC4yD6TCPGnSot1EjETRsg4pwCEw/s1600/third.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Verdana, sans-serif;"><img alt="Installation Step - How To Install and Use Android Studio on Ubuntu 16.04" border="0" height="313" src="https://3.bp.blogspot.com/-dXJTUmU_lvs/WL4XuUHSMyI/AAAAAAAAOpE/q7yjlFUjDC4yD6TCPGnSot1EjETRsg4pwCEw/s400/third.png" title="How To Install and Use Android Studio on Ubuntu 16.04" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;">4) Android studio detects whether your machine and OS can run emulator for testing android apps and automatically checks the virtual device image file for download. I strongly recommend you to try latest virtual device 7.1 Android Nougat for very fast and speed emulator for testing.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-icB-lGFPE7c/WL4XtV3153I/AAAAAAAAOo4/-llwTVNprzY6MqCPaGwRxyelummSYdg2wCEw/s1600/fourth.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Verdana, sans-serif;"><img alt="Installation Step - How To Install and Use Android Studio on Ubuntu 16.04" border="0" height="313" src="https://1.bp.blogspot.com/-icB-lGFPE7c/WL4XtV3153I/AAAAAAAAOo4/-llwTVNprzY6MqCPaGwRxyelummSYdg2wCEw/s400/fourth.png" title="How To Install and Use Android Studio on Ubuntu 16.04" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;">5) Click Finish and now the download starts for you.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-rXmgUSEnYSI/WL4XtSkyRFI/AAAAAAAAOo8/gw33QxB-H5gIhcZIMSq8a5YoQ5Hs5FoDgCEw/s1600/fifth.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Verdana, sans-serif;"><img alt="Installation Step - How To Install and Use Android Studio on Ubuntu 16.04" border="0" height="313" src="https://4.bp.blogspot.com/-rXmgUSEnYSI/WL4XtSkyRFI/AAAAAAAAOo8/gw33QxB-H5gIhcZIMSq8a5YoQ5Hs5FoDgCEw/s400/fifth.png" title="How To Install and Use Android Studio on Ubuntu 16.04" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;">After downloading click finish and now Android Studio is set ready to use for Development purpose. Check for updates via Help -> check for updates in Android studio for regular updates. because improvised android studio versions are much speeder that older one which i felt in my own personal experience.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-4_s-gbmSfMg/WL4XubiCYaI/AAAAAAAAOpI/Jj3EkBKTxxQO9zDHcGsITtW9JU7JbdBqQCEw/s1600/sixth.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Verdana, sans-serif;"><img alt="Installation Step - How To Install and Use Android Studio on Ubuntu 16.04" border="0" height="306" src="https://2.bp.blogspot.com/-4_s-gbmSfMg/WL4XubiCYaI/AAAAAAAAOpI/Jj3EkBKTxxQO9zDHcGsITtW9JU7JbdBqQCEw/s400/sixth.png" title="How To Install and Use Android Studio on Ubuntu 16.04" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;">To make you more productive use these below plugins,</span></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ol style="text-align: left;">
<li><span style="font-family: Verdana, sans-serif;"> <b>Android Wifi Debugging</b> - <a href="https://github.com/pedrovgs/AndroidWiFiADB" rel="nofollow" target="_blank">Link</a> - This allows you to connect to Android phone without any USB connection for debugging, but connected in same network</span></li>
<li><span style="font-family: Verdana, sans-serif;"> <b>SVG2VectorDrawables</b> - <a href="https://plugins.jetbrains.com/plugin/8103" rel="nofollow" target="_blank">Link</a> - This plugin allows you to convert SVG to drawables without leaving Android studio</span></li>
</ol>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<h2 id="conclusion" style="background-color: white; box-sizing: border-box; color: #3a3a3a; font-family: proxima-nova, sans-serif; font-size: 28px; font-weight: 400; letter-spacing: 0.2px; margin: 10px auto; padding: 0px; width: 745px;">
<span style="font-family: Verdana, sans-serif;">Conclusion</span></h2>
<div style="background-color: white; box-sizing: border-box; font-family: proxima-nova, sans-serif; font-size: 16px; line-height: 28px; margin-bottom: 22px; margin-left: auto; margin-right: auto; padding: 0px; width: 745px;">
<span style="font-family: Verdana, sans-serif;">There's a whole lot more to Android studio than has been given in this article, but this should be enough to getting you started working with it on Ubuntu 16.04. Like most open source projects, Android studio is built from a fast-developing Android application, so make a habit of visiting the project's <a href="https://developer.android.com/" rel="nofollow" style="background-color: transparent; border-bottom: 1px dotted rgb(0, 0, 0); box-sizing: border-box; color: black; text-decoration: none;" target="_blank">blog page</a> for the latest information.</span></div>
</div>
<div>
<br /></div>
</div>
</div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-70886525808350249242016-11-29T11:58:00.000+05:302016-11-29T12:10:24.264+05:30Authenticate with a Backend server - Sign-in with Google For Android <div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "trebuchet ms" , sans-serif;">Finally, i'm <a href="https://www.instagram.com/p/BM2iFQuDKik/?taken-by=sshivasurya" rel="nofollow" target="_blank">Udacity Android Nanodegree Graduate</a> :) . Recently worked with Udacity final Capstone Android Project and dealt with problem to Authenticate with a Backend server (custom RESTful backend server).</span><br />
<span style="font-family: "trebuchet ms" , sans-serif;"><br /></span>
<span style="font-family: "trebuchet ms" , sans-serif;"> Sign-in with Google is most common nowadays and seamless way to create user account for Apps across platforms without dealing with username, password and other logic to protect the unauthorised access, cross platform support such as web using JavaScript, Android Java and even Desktop apps. But securing your backend in a stateless API (REST) is really difficult task to authenticate and identify the user. So, this article is for developers who try to integrate Google OAuth login in Android app and connecting the app to existing Backend server to store users data.</span><br />
<span style="font-family: "trebuchet ms" , sans-serif;"><br /></span>
<br />
<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://3.bp.blogspot.com/-QDGPYibXfmw/WD0BtZiOWKI/AAAAAAAAL3M/kyACtxnYN-wIwHj4TAsVABt8da-wimdugCLcB/s1600/signinwithgoogle.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: "trebuchet ms" , sans-serif;"><img alt="Authenticate with a Backend server - Sign-in with Google For Android " border="0" height="356" src="https://3.bp.blogspot.com/-QDGPYibXfmw/WD0BtZiOWKI/AAAAAAAAL3M/kyACtxnYN-wIwHj4TAsVABt8da-wimdugCLcB/s640/signinwithgoogle.png" title="Authenticate with a Backend server - Sign-in with Google For Android " width="640" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "trebuchet ms" , sans-serif;">Authenticate with a Backend server - Sign-in with Google For Android </span></td></tr>
</tbody></table>
<span style="font-family: "trebuchet ms" , sans-serif;"><br /></span>
<br />
<h4 style="text-align: left;">
<span style="font-family: "trebuchet ms" , sans-serif;">
Prerequisites :</span></h4>
<ul style="text-align: left;">
<li><span style="font-family: "trebuchet ms" , sans-serif;">1) PHP / Node.js Web server</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;">2) knowledge on making HTTP calls and handling</span></li>
</ul>
<h4 style="text-align: left;">
<span style="font-family: "trebuchet ms" , sans-serif;">
Concept :</span></h4>
<div>
<span style="font-family: "trebuchet ms" , sans-serif;">This post will guide you to authenticate users with a backend server after successfully generated access-token by google play-service in android.</span><br />
<ul>
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">1)</span> Your Android java code provides you Token after successful sign-in intent which is knows as JWT token</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">2)</span> post the JWT Access token to the Backend Server</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">3)</span> process the Access token by making HTTP get request to Google Token verification service</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">4)</span> If the Http response is successful and provides you with user-data in JSON format - verify the expiry time, iss, azp, aud which you have previously generated with Google API Developer console for Oauth login Android client</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">5</span>) Save the user info to Database/ persistent storage</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">6)</span> Then here goes your own Access token generation mechanism like JWT and send it to your client for upcoming request</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">7)</span> If Token service Http response fails - just discard the Request from client and send error message to client</span></li>
</ul>
</div>
<div>
<ul style="text-align: left;">
</ul>
<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://3.bp.blogspot.com/-yI3rV2SXYPg/WD0QZqN-QtI/AAAAAAAAL3c/hDXkSwkmGqc2j124jC60fX0s503zqugkACLcB/s1600/Google%2Bsign%2Bin%2Bwith%2BAndroid.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: "trebuchet ms" , sans-serif;"><img alt="Authenticate with a Backend server - Sign-in with Google For Android " border="0" height="300" src="https://3.bp.blogspot.com/-yI3rV2SXYPg/WD0QZqN-QtI/AAAAAAAAL3c/hDXkSwkmGqc2j124jC60fX0s503zqugkACLcB/s400/Google%2Bsign%2Bin%2Bwith%2BAndroid.jpg" title="Authenticate with a Backend server - Sign-in with Google For Android " width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "trebuchet ms" , sans-serif;">Authenticate with a Backend server - Sign-in with Google For Android </span></td></tr>
</tbody></table>
<h4 style="text-align: left;">
<span style="font-family: "trebuchet ms" , sans-serif;">
Code :</span></h4>
</div>
<div>
<span style="font-family: "trebuchet ms" , sans-serif;">This code snippet is generic function written in <b>PHP</b> and used as middleware function in slimframework which is useful for developing REST Apps in minutes.</span></div>
<div>
<script src="https://gist.github.com/shivasurya/008687a063a226b9be12c3fd2c92c3dc.js"></script><span style="font-family: "trebuchet ms" , sans-serif;"><br /></span></div>
<h4 style="text-align: left;">
<span style="font-family: "trebuchet ms" , sans-serif;">
Security Measures : </span></h4>
<div>
<span style="font-family: "trebuchet ms" , sans-serif;">Here are few measures to look into while developing secure backend. make sure follow these to prevent unauthorised access</span><br />
<span style="font-family: "trebuchet ms" , sans-serif;"><br /></span>
<br />
<ul style="text-align: left;">
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">1)</span> Make sure run your backend server in HTTPS (SSL) to prevent man-in-middle attack</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">2)</span> Authenticate secure REST API end points with middleware</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">3)</span> create strong Access token probably with JWT( JSON web tokens) and reasonable expiry time of token</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">4)</span> verify the token between every request and have refresh mechanism automatically( if needed )</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">5)</span> ensure data embedded in JSON web token is encrypted(AES). By default which is still visible in payload & don't attach any sensitive data with JWT token</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">6)</span> By default JWT token have no expiry time which is considered to be bad practice.(specify a time limit)</span></li>
<li><span style="font-family: "trebuchet ms" , sans-serif;"><span style="color: #e06666;">7)</span> Have a general authentication such as client-id(android unique id), Ip address, browser Agent to prevent fake dummy request.</span></li>
</ul>
<div>
<span style="font-family: "trebuchet ms" , sans-serif;">So, Follow above best practices to prevent any attacks and breaches in your API end points.</span></div>
<div>
<span style="font-family: "trebuchet ms" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "trebuchet ms" , sans-serif;">Hope you have enjoyed the post, post you own thoughts, additional points as comments. For complete code, projects, hugs/bugs just drop me mail/ chat in Facebook/Google+. share is care.</span></div>
</div>
</div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-86616396271559535332016-10-15T11:45:00.001+05:302016-10-15T11:45:05.435+05:30Getting Started with Android Wearable App Development - Basics<div dir="ltr" style="text-align: left;" trbidi="on">
The wearable device is really useful where you need to check updates on the go without unlocking your phone and swiping the notification at regular interval. But one may claim that it's too much to have a wearable and getting notifications instead checking your phone. The design and way it syncs with your handheld device are awesome and even more awesome when apps respond you based on contexts like location, temperature and other conditions.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-OTW5_HFb6q4/WAG5G3nG9tI/AAAAAAAAKho/-fUARhJPhmobQ2LmEM2fhuLCUKP85VbbgCEw/s1600/watch-640x399.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Getting Started with Android Wearable App Development - Basics" border="0" height="398" src="https://2.bp.blogspot.com/-OTW5_HFb6q4/WAG5G3nG9tI/AAAAAAAAKho/-fUARhJPhmobQ2LmEM2fhuLCUKP85VbbgCEw/s640/watch-640x399.jpg" title="Getting Started with Android Wearable App Development - Basics" width="640" /></a></div>
<br />
<h4 style="text-align: left;">
Scope :</h4>
Android wearable application development is really a broad topic where as it's growing drastically. Even now recently Google announced inbuilt android play store, the keyboard for wearable and last year they introduced emoji and WiFi support for wearable apps. we will see about basics of Android wearable development and types to support existing apps.<br />
<h4 style="text-align: left;">
Prerequisites : </h4>
1) Knowledge on Basics of Android development<br />
<h4 style="text-align: left;">
Design for wearable API :</h4>
<div>
Wearable is meant for checking updates on the go and quick replies. It's not same as your handheld device to show all available information to the user. It must be optimised to show the relevant and Updated data to the user in regular intervals.</div>
<div>
<br /></div>
<div>
For example : consider the Weather app, which shows you weather details for next seven days in single activity and it's data structure will be like </div>
<div>
<ul style="text-align: left;">
<li>Min temperature</li>
<li>Max temperature</li>
<li>Type of weather condition ( cloudy, sunny, rainy or moderate )</li>
<li>Atmospheric Pressure details</li>
</ul>
<div>
But your wearable app doesn't need such amount of data to be displayed on that small screen. so <b>choose wisely which is more relevant data for the user to adapt Round or square wearable devices</b>. In my opinion what I'll choose is</div>
</div>
<div>
<ul style="text-align: left;">
<li>Today's Min Temperature</li>
<li>Today's Max Temperature</li>
<li>Type of Weather condition as Drawable ( Bitmap )</li>
</ul>
<div>
with time and date.</div>
</div>
<div>
<br /></div>
<div>
So, It's important to focus more on design and relevant data to the end user based on context.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-fDnS-1X-JBg/WAHGhiLBrYI/AAAAAAAAKh8/e8sD_v7N2Y0HU90A_EdkvXCksTPh0g2FQCLcB/s1600/Screenshot_20160904-224336.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Getting Started with Android Wearable App Development - Basics" border="0" src="https://1.bp.blogspot.com/-fDnS-1X-JBg/WAHGhiLBrYI/AAAAAAAAKh8/e8sD_v7N2Y0HU90A_EdkvXCksTPh0g2FQCLcB/s1600/Screenshot_20160904-224336.png" title="Getting Started with Android Wearable App Development - Basics" /></a></div>
<div>
<br /></div>
<h4 style="text-align: left;">
Types of Wearable Development </h4>
<div>
Basically, whenever your app shows notification in your handheld device it will automatically push to the wearable device at no cost of coding it. But when you need to support it extensively with actions, paging additional information as slider you should support it via notification App compat support library.</div>
<div>
<br /></div>
<div>
1) Notifications App compat support library.</div>
<div>
2) Watch Face design and Data communication and syncing.</div>
<div>
3) Extensively designing UI and installing an app in wearable.</div>
<h4 style="text-align: left;">
Notification App compat : </h4>
<div>
Notification App compat is all about extending support for existing notification in wearable devices without writing additional code for wearable. with notification app compat library you can simply create a notification for your device and wearable devices with additional options such as Actions, Quick reply intents etc.</div>
<h4 style="text-align: left;">
Watch Face Design : </h4>
<div>
Basically, watch face is nothing but just like your home screen with widgets but it can run only one app at a time, showing multiple data such as temperature, steps your while jogging, the heartbeat can be obtained through content providers or sensors. There are tonnes of watch face in play store. Watch face is considered as a home screen where you can check regular and frequent updates.</div>
<div>
<br /></div>
<div>
It has two modes namely ,</div>
<div>
<b><br /></b></div>
<div>
<b>1) Ambient Mode</b></div>
<div>
<b>2) Normal Mode</b></div>
<div>
<br /></div>
<div>
In the Ambient mode, your watch tries to save battery by not allowing to update the screen frequently. you will get the chance to get updates in minutes basis. Most specifically your watch face should use Black and white pixel colour while in the Ambient mode to save energy by repainting the view now and then. you can't able to update second hand in the clock where it requires every second update.</div>
<div>
<br /></div>
<div>
In normal mode, you are allowed to use colours and drawable but that doesn't require high resource and frequent updates that make your watch face unresponsive sometimes.</div>
<div>
<br /></div>
<div>
When the user is using we can switch over to normal mode, where other times wearable will be going automatically to ambient mode after the speicific interval of time.( checked in Moto 360) </div>
<h4 style="text-align: left;">
Designing UI for wearable :</h4>
<div>
Designing extensively for Android wearable using layouts such box inset layout, grid view pager, Watch view stubs and a variety of layout is supported by support libraries. Data communication API, Message API is available with Wearable API that comes under google play services, which delivers and sync data between the handheld device and a wearable device.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-5LvC6bi5glE/WAHGT8DwzoI/AAAAAAAAKh4/IyX5MZpLmpwXwOnOnFA_SkBQlSdm2gkQgCLcB/s1600/wearable.JPG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://1.bp.blogspot.com/-5LvC6bi5glE/WAHGT8DwzoI/AAAAAAAAKh4/IyX5MZpLmpwXwOnOnFA_SkBQlSdm2gkQgCLcB/s400/wearable.JPG" width="400" /></a></div>
<div>
<br /></div>
<div>
So we just covered the basics of Android Wearable App development which is different from app development in terms of Design and types to support your app. I'll soon publish the post on these types to designing and work with these API for wearable apps.</div>
<div>
<br /></div>
<div>
Recently Google announced that Wearable major update 2.0 preview that doesn't require a phone to be connected always. you can use it wherever you go and sync via the cloud. we're eagerly waiting for stable SDK support and watch yet to be released early 2017. For now preview 2.0 is available at official Android developer site.</div>
<div>
<br /></div>
<div>
For bugs, hugs just comment below. in case any doubts drop me a mail, or chat wiht me in G+/ Facebook. share is care.</div>
</div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com1tag:blogger.com,1999:blog-3047364308476473322.post-30728064800481482572016-10-07T14:10:00.002+05:302016-10-07T14:10:27.830+05:30Facebook Account Kit Tutorial - Backend Verification using Node.js<div dir="ltr" style="text-align: left;" trbidi="on">
Recently I have been developing secure production app using Facebook account kit for seamless authentication across mobile and web platform. Account kit is widely used in many apps such as Saavn and many other. I found that backend verification in Account kit for every request from mobile/ SPA should be handled manually by developers and no libraries available till date. so, I'm writing this post for Indie Game and mobile developers as a reference guide.<br />
<h4 style="text-align: left;">
So what's Facebook Account kit all about ? </h4>
It's seamless authentication method via OTP way to verify the user with Mobile Number and login into App without any passwords. Whereas it provides access token to verify the authenticated user in backend server without worrying about the access token generation, revocation logics. It's all about securing the access token and using it over HTTPS connection while connecting between your app and backend.<br />
<br />
<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/-P3jxtcVJZ3E/V_c8ACGW2yI/AAAAAAAAKZ4/0MlOvgIJvQgDgfPTC-yHmqh16TnL3KS8wCLcB/s1600/facebook-account-kit.png" style="margin-left: auto; margin-right: auto;"><img alt="Facebook Account Kit Tutorial - Backend Verification using Node.js" border="0" height="346" src="https://4.bp.blogspot.com/-P3jxtcVJZ3E/V_c8ACGW2yI/AAAAAAAAKZ4/0MlOvgIJvQgDgfPTC-yHmqh16TnL3KS8wCLcB/s640/facebook-account-kit.png" title="Facebook Account Kit Tutorial - Backend Verification using Node.js" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Facebook Account Kit Tutorial - Backend Verification using Node.js</td></tr>
</tbody></table>
<h4 style="text-align: left;">
Prerequisites :</h4>
<div>
In this tutorial, we'll solely concentrate on Backend verification and authorising the legal request made by the apps.</div>
<div>
<ul style="text-align: left;">
<li>Facebook Developer Account </li>
<li>Good Knowledge on Node.js routeing</li>
<li>Rest API client</li>
<li>Good logical error handling skill</li>
</ul>
<h4 style="text-align: left;">
How Does Account Kit works ?</h4>
</div>
When the user signup using his mobile number, he would receive the OTP via SMS Carrier from facebook server. after authenticating OTP password, the account kit sdk gives you the long live Access token or Client side temporary exchange token(this depends on application).<br />
<br />
<ul style="text-align: left;">
<li>With the received access token, securely post it your Mobile backend server <b>(probably HTTPS to avoid man-in-the-middle attack)</b></li>
<li>with that access token you can call the Account Kit API end point to check that the access token is valid as well it provides you mobile number or E-mail</li>
<li>As response contains mobile number, you can identify the user and provide the user with the service appropriately.</li>
<li><b><span style="color: red;">Most important thing is you should pass the access token everytime from the client to the server in order to verify the authenticity of the user.</span></b></li>
</ul>
<h4 style="text-align: left;">
Getting Started :</h4>
<div>
You should have good knowledge in routeing technique since we are going to concentrate on Express.js, if you're beginner check out this <a href="http://www.i-visionblog.com/2014/07/node-js-with-express-js-framework-routing-techniques-with-name-space.html">link</a> to learn more.</div>
<h4 style="text-align: left;">
Concept :</h4>
<div>
Since we need to authenticate every request from the app that comes along with access token and others data we could write a <b>middleware</b> to authenticate the every request in the beginning before it executes the API code.</div>
<div>
<br /></div>
<div>
Middleware is nothing but a piece of code which is executed before each and every request entering our express routes. probably we need to write the Account kit verification code here and if it is a success we can make the request to propagate to the corresponding the function else just terminate the live request with authentication errors spitting.</div>
<h4 style="text-align: left;">
Sample code : </h4>
<div>
here is sample code to authenticate your mobile backend API end points. we use request module to send a get request to account kit server by providing the accesstoken in url param while if it responds with 200 status code, we are going to extract the mobile number else we are going to consider the request as failed on and informing to the client as error message. before trying this source code, <b>in Facebook Developer dashboard turn off the App-secret required option and enable client access token flow.</b></div>
<div>
<script src="https://gist.github.com/shivasurya/726ddf3ba54d69097c67404904a31f4e.js"></script><br />
<br /></div>
That's it. this is base tutorial on verifying the backend for facebook account kit integrated development.<br />
for any bugs/hugs comment below. For detailed source code and other information just comment below or mail me, chat with me in Google+ or facebook.share is care.</div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-8541273305294773832016-09-01T09:38:00.004+05:302016-09-01T09:38:49.985+05:30P1 Popular Movies App - Udacity Android Nanodegree Recap and Review<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "verdana" , sans-serif;">Recently, became Udacity project reviewer where I would be reviewing Android Nanodegree Basics Course student project works.so, Continuing exciting the Nanodegree journey with Udacity, the second project was building popular movies application.This was challenging one to build because we need to use the same source-code to build for the next upcoming project which concentrates on extending the user interface for tablets too.so,let's see what we learnt and implemented as project.</span><br />
<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://3.bp.blogspot.com/-Up7rbZC2Wss/V3_Hed7t2jI/AAAAAAAAJGE/IVPPg5Nk7-08itgmLghdik9SQ5PsAGSEgCPcB/s1600/nanos.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: "verdana" , sans-serif;"><img border="0" height="286" src="https://3.bp.blogspot.com/-Up7rbZC2Wss/V3_Hed7t2jI/AAAAAAAAJGE/IVPPg5Nk7-08itgmLghdik9SQ5PsAGSEgCPcB/s640/nanos.JPG" width="640" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "verdana" , sans-serif;">P1 Popular Movies App - Udacity Android Nanodegree Recap and Review</span></td></tr>
</tbody></table>
<div style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;">Project Repo : <a href="https://github.com/shivasurya/android/tree/popularMovie0/" rel="nofollow" target="_blank">link</a> </span></div>
<h4 style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;">Scope of this project :</span></h4>
<div>
<span style="font-family: "verdana" , sans-serif;">To understand & implement themoviedb.org api and performing networking operations in AsyncTask (background thread) and updating UI(main) thread.</span><br />
<h4 style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;">Process and Concepts :</span></h4>
<span style="font-family: "verdana" , sans-serif;">The ultimate aim of this project is</span><br />
<br />
<ul style="text-align: left;">
<li><span style="font-family: "verdana" , sans-serif;">Connect mobile app with Cloud</span></li>
<li><span style="font-family: "verdana" , sans-serif;">Performing Network operations in background thread</span></li>
<li><span style="font-family: "verdana" , sans-serif;">loading images from Internet and deciding optimised sizes for corresponding views.</span></li>
<li><span style="font-family: "verdana" , sans-serif;">Clear understanding with RecyclerView or ListView working</span></li>
<li><span style="font-family: "verdana" , sans-serif;">Intents to navigate between activities </span></li>
<li><span style="font-family: "verdana" , sans-serif;">Concentrating more on SavedInstance State Bundle</span></li>
</ul>
<h3 style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;">Concepts demystified :</span></h3>
<div>
<span style="font-family: "verdana" , sans-serif;">We'll look into the above mentioned concepts with few lines and reference links which i've used to learn while building the App.</span></div>
<h4 style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;">Connect mobile app with Cloud :</span></h4>
<div>
<span style="font-family: "verdana" , sans-serif;">The first thing about android app it should fetch data from cloud or API or server with updated details and making sure it works offline by caching it in Sqlite database or sharedpreferences.<b>This Google I/O session is the best session ever made to understand the networking operations coding approach while you build your app for the next billion users coming over online.</b></span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "verdana" , sans-serif;"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/xHXn3Kg2IQE/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/xHXn3Kg2IQE?feature=player_embedded" width="320"></iframe></span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">Developer reference : <a href="https://guides.codepath.com/android/Creating-and-Executing-Async-Tasks" rel="nofollow" target="_blank">link</a></span></div>
<h4 style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;">Loading Images from internet :</span></h4>
<div>
<span style="font-family: "verdana" , sans-serif;">One of the major nightmare of mobile developer is <b>out of memory error </b>in java,it means you have consumed the Heap memory in VM and having strong reference to the objects created.since, we have created strong reference to the object GC can't collect it to free the VM Heap memory.especially, when you're about to load Bitmap through JPEG image into the memory it's really nightmare for developers to manage the memory. </span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">So, here comes Jake Wharton to help us with his image loading library named as <a href="https://github.com/square/picasso" rel="nofollow" target="_blank">Picasso</a> and it also supports cache,recycling the images,animations and effects.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">there are few other libraries named <a href="https://github.com/facebook/fresco" rel="nofollow" target="_blank">Glide</a>,<a href="https://github.com/bumptech/glide" rel="nofollow" target="_blank">Fresco</a> from facebook.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">Developer reference : <a href="https://github.com/codepath/android_guides/wiki/Displaying-Images-with-the-Picasso-Library" rel="nofollow" target="_blank">link</a></span></div>
<div>
<br /></div>
<h4 style="text-align: left;">
Clear understanding of ListView & Recyclerview :</h4>
<div>
Listview & Recyclerview is useful view for developers from google engineers is to show large homogeneous data in our mobile device.Consider you have 1000's of contacts in your contacts app where you need to show them all on demand, you can't load all the contacts in to memory at once where you may lead to Out of Memory error very soon.</div>
<blockquote class="tr_bq">
Obviously, <b>some Algorithmic students</b> may claim that we could use <b>binary search algorithm</b> to view the contacts, but in real life is the user is going to type and search contacts every time ? That will be a bad User Experience.</blockquote>
<b>so,how does the listview or recyclerview works ?</b><br />
yes we've learnt in our <b>concepts of operating system</b> namely <b>Paging concept</b>.when the listview gets initialise it measures the <b>height of the layout</b> and decides the number of list to be shown in the view and loads the particular count of data from adapter to the view, it also prefetches few data set front and back to manage stagger less scrolling.it uses the same object and recycles for other data set and inflates the view into the Listview.Note that Recyclerview is enhanced version of Listview.<br />
<br />
difference between Listview and Recyclerview - <a href="http://stackoverflow.com/questions/26728651/recyclerview-vs-listview" rel="nofollow" target="_blank">Stackoverflow Link</a><br />
<br />
Developer Reference : <a href="https://guides.codepath.com/android/using-the-recyclerview" rel="nofollow" target="_blank">link</a><br />
<h4 style="text-align: left;">
What the Hell is savedInstanceState bundle ?</h4>
<div>
before understanding the saving the instance state of View in android, you must be aware of the lifecycle of android application such as onCreate, onStop, onResume, onPause and even more for handling orientation and configuration changes.one of the best video to understand why we need concentrate more on Activity lifecycle.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/-zr5QLH4Qy4/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/-zr5QLH4Qy4?feature=player_embedded" width="320"></iframe></div>
<div>
<br /></div>
<div>
so, when the apps move foreground and background we need to save our current state of the app so that it, can be resumed when the user once again visits the application.we need to manage this smoothly without any lag while recovering the state of the application.</div>
<div>
<br /></div>
<div>
<b>consider the scenario :</b></div>
<div>
<br /></div>
<div>
when you type important whatsapp message to your friends/crush, all of a sudden you receive phone call from someone continuing you get facebook message from friend after replying back you come back to <b>whatsapp what if whole message has been destroyed which you have typed already ?</b> <span style="color: red;">It hurts User Experience</span> so,here comes savedinstance state to guarantee you to save some text/image/serializable object for you in background to recover you back when user renters the app.</div>
<div>
<br /></div>
<div>
so, by default activity lifecycle callbacks such as onCreate, onResume , OnPause,onConfigurationChanged passes you bundle to save the state of the current activity before the lifecycle event happens.</div>
<div>
<br /></div>
<div>
Most popular guide for fragments and activity : <a href="https://inthecheesefactory.com/blog/fragment-state-saving-best-practices/en" rel="nofollow" target="_blank">inthecheesefactoy guide for savedinstancestate</a></div>
<div>
<br /></div>
<div>
Developer Reference : <a href="https://guides.codepath.com/android/Handling-Configuration-Changes" rel="nofollow" target="_blank">link</a> </div>
<div>
<br /></div>
<div>
That's it.These were the main challenges I faced and learnt during the Project 2 Android Nanodegree.hope the above resource will be helpful to get started with Android development.</div>
<div>
<br /></div>
<div>
<b>My Screencast of the Project :</b><br />
<b><br /></b></div>
<div>
<blockquote class="instagram-media" data-instgrm-captioned="" data-instgrm-version="7" style="background: #fff; border-radius: 3px; border: 0; box-shadow: 0 0 1px 0 rgba(0 , 0 , 0 , 0.5) , 0 1px 10px 0 rgba(0 , 0 , 0 , 0.15); margin: 1px; max-width: 658px; padding: 0; width: 99.375%;">
<div style="padding: 8px;">
<div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;">
<div style="background: url(data:image/png; display: block; height: 44px; margin: 0 auto -44px; position: relative; top: -22px; width: 44px;">
</div>
</div>
<div style="margin: 8px 0 0 0; padding: 0 4px;">
<a href="https://www.instagram.com/p/-psCC1Pgit/" style="color: black; font-family: "arial" , sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" target="_blank">My first project app #material design. Checkout source: http://github.com/shivasurya/android #android #udacity #androidM</a></div>
<div style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;">
A video posted by S.Shivasurya (@sshivasurya) on <time datetime="2015-11-29T02:07:04+00:00" style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;">Nov 28, 2015 at 6:07pm PST</time></div>
</div>
</blockquote>
<script async="" defer="" src="//platform.instagram.com/en_US/embeds.js"></script><br /></div>
<h4 style="text-align: left;">
Next Project Preview :</h4>
<div>
The next project was awesome, it's all about using the same source code to optimize the android app to work for Tablet user Interface consuming large amount of user space and handling the orientation changes.</div>
<div>
<br />
<b><span style="color: #e06666;">for bugs,hugs and comments just comment below or mail me.Chat with me in G+/Facebook for help and improved version of this article.Share is care.</span></b></div>
<div>
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-12916797107967515612016-07-08T21:47:00.000+05:302016-07-08T21:47:53.111+05:30P0 Android Basics - Udacity Android Nanodegree Recap and Review<div dir="ltr" style="text-align: left;" trbidi="on">
Udacity with Google has done excellent job in delivering standard and updated courses via Udacity android development courses with variety of categories such as Games,Beginners,Building App with Google API's and even more.They are also about to provide Associate Android Developer certificates by taking few test as projects over online as announced in Google I/O 2016.Me and My friends <a class="g-profile" href="https://plus.google.com/116192668542985497110" target="_blank">+venkat raman</a> , Ajay are in track with Android Nanodegree course and projects.The course objective is to master basic Android concepts and adapt to future changes in design,coding style and updates.I'll try to reproduce the concept i learnt and applied during the project and passed reviews in this post.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-Up7rbZC2Wss/V3_Hed7t2jI/AAAAAAAAJGE/CaYYXTx6IhYWbap2cQH8qZ_OsTDa0LrJQCKgB/s1600/nanos.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="286" src="https://2.bp.blogspot.com/-Up7rbZC2Wss/V3_Hed7t2jI/AAAAAAAAJGE/CaYYXTx6IhYWbap2cQH8qZ_OsTDa0LrJQCKgB/s640/nanos.JPG" width="640" /></a></div>
<br />
<br />
Project Repo : <a href="https://github.com/shivasurya/android/tree/portfolioApp" rel="nofollow" target="_blank">Link</a><br />
<h4 style="text-align: left;">
Process & Concepts :</h4>
<div>
The first project was just to build a mere Android app with specified layout,buttons and Onclick listeners implementations.(you can check my code).The goal was to ensure that users are able to work with Android studio and produce results from those by running it in emulator or phone.Luckily I have latest Android Smartphone with latest updates from Google.(6.0.1).</div>
<div>
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><div style="text-align: left;">
<h4>
What I've Concentrated ?</h4>
<div>
<ul>
<li>Making my Java code <b>readable</b> one :D </li>
<li>Concentrating on <b>strings.xml</b> file organising and not hard coding it.<br />Though it was tough in beginning when you move forward and app grows in many countries and your user may expect in different languages,this technique will be scalable approach and managing it in one place.</li>
<li>writing reusable code in java - <a href="https://github.com/shivasurya/android/blob/portfolioApp/app/src/main/java/com/ivb/udacity/MainActivity.java#L49" rel="nofollow" target="_blank">link</a></li>
<li>Few patient in testing in emulator,device.</li>
</ul>
</div>
</div>
<a href="https://1.bp.blogspot.com/-5LPv5ArQD2U/V3_M7iuHfJI/AAAAAAAAJGQ/YMyN6lKcBUsNN_cEyOy5D0Wpd-jRVBb-gCLcB/s1600/nanos1.JPG" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="358" src="https://1.bp.blogspot.com/-5LPv5ArQD2U/V3_M7iuHfJI/AAAAAAAAJGQ/YMyN6lKcBUsNN_cEyOy5D0Wpd-jRVBb-gCLcB/s640/nanos1.JPG" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Accomplishment of P0 - udacity android nanodegree</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
The next part was basics of Android such as components,form factors and do's and don't in the development process.with those installation and Android jargon such as Android API levels and Numbers,SDK levels,Compile version,Minimum and maximum SDK target levels and few more publishing techniques too.</div>
<h4 style="text-align: left;">
Next Video Lectures :</h4>
<div>
The first section video consist of Android Studio tutorials,drag and drop widget tutorials and connecting the xml design file with java code and maintaining their lifecycle,connecting the app to the cloud with network code(http) and few views such ListView to handle huge amount of homogeneous data types.<b>This leads to next level project as <span style="color: red;">Popular Movies app</span> by consuming <span style="color: red;">themoviedb.org API</span> to display popular movies running in nearby theatres.</b>Mean while check out my Github repo and try practising it. </div>
<h4 style="text-align: left;">
Results : </h4>
<div>
That's it and i've passed the project 0 with flying colours within a hour of starting the course :D with my friends <a class="g-profile" href="https://plus.google.com/116192668542985497110" target="_blank">+venkat raman</a> and ajay.</div>
<div>
<br /></div>
<div>
Subscribe the blog for next upcoming recap and reviews.chat with me in G+/fb.for more discussion just leave a comment below.Thanks for reading.share is care.</div>
<br />
<br /></div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-41327783448470442572016-06-02T14:25:00.002+05:302016-06-02T14:25:51.440+05:30Top 100 motivational Quotes - MotiveTown - Motivational App<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Trebuchet MS, sans-serif;">Recently Launched Mobile & web app based on concept of motivating others using inspiring pictures and quotes from various sources such as simpleremainders,spiritofscience & Motivational guides.combining all resource and categorizing the quotes and images,generated a unified format to form a web service.Additional to this we've optimized the Image using opensource tools such as Imagemagick and few shell scripts to automate the process.We named the App as <b>MotiveTown - Motivational App</b> So,let's see about the various features implemented in mobile app below.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<span style="clear: left; float: left; font-family: Trebuchet MS, sans-serif; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="312" src="https://4.bp.blogspot.com/-ke3LTK1drgM/V0_hBePpL1I/AAAAAAAAI7M/wAxBiB4jENQKk3obBemrjbxK4F5sKwl6QCLcB/s640/MotiveTown%2BApp-feature-graphic.png" width="640" /></span></div>
<span style="font-family: Trebuchet MS, sans-serif;"><b><a href="https://play.google.com/store/apps/details?id=com.motivetown.app" rel="nofollow" target="_blank"><br /></a></b></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><b><a href="https://play.google.com/store/apps/details?id=com.motivetown.app" rel="nofollow" target="_blank">Download From Playstore</a></b> | <a href="https://www.amazon.com/shivasurya-s-MotiveTown-Motivational-App/dp/B01GCTAHPA?ie=UTF8&*Version*=1&*entries*=0" rel="nofollow" target="_blank">Download from Amazon Store</a> - Rate and review the app at playstore/amazonstore</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Why this App ?</span></h3>
<span style="font-family: Trebuchet MS, sans-serif;">Everyone needs motivation in some point of life either letting-go or to chase their dream,this makes us to search to read books,quotes,inspiring videos,lectures even in soundcloud for audio speech.Some peoples watch movies,videos where others check out magazines,daily.And targeting this fragmented categories,we decided to bring unified platform with personalized newsfeed contents with videos,audio and quotes with images via simple Mobile App.Thus as a result we were able to publish first version of this app with limited contents of news,images and quotes and features.</span><br />
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Why Ads ? </span></h3>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">We need to provide you reliable backend service without outages and crash.so, we rented a economy server package and customized backend to adapt daily updates.we too optimized several hundred KB image files to less than 100 KB JPG compressed files with automated scripts and Imagemagick opensource tools.so,to keep running these operations smooth and more faster we adopted ads to generate some amount to maintain hosting.</span></div>
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Categories - MotiveTown App</span></h3>
<div>
<div style="background-color: white; border: 0px; color: #333333; font-size: 14px; line-height: 24px; margin-bottom: 16px; padding: 0px;">
<span style="font-family: Trebuchet MS, sans-serif;"><b>We have Daily updated 23+ categories of Motivational quotes</b> </span></div>
<div style="background-color: white; border: 0px; color: #333333; font-size: 14px; line-height: 24px; margin-bottom: 16px; padding: 0px;">
<span style="font-family: Trebuchet MS, sans-serif;">• Achieving Gratitude<br />• Daily Inspiration<br />• Business Leadership<br />• Changing the World<br />• Community Thoughts<br />• Conquer Negativity<br />• Walking in Faith<br />• Various Saying<br />• Uplifting Music<br />• Success Secrets<br />• Staying Motivated<br />• Relationship Dynamics<br />• Recover and Loss<br />• Positive Thinking<br />• Overcoming Fear<br />• New Awakenings<br />• Mindful Living<br />• Letting Go<br />• Law of Attraction<br />• Impact Media<br />• Healthy Living<br />• Forgiveness<br />• Exploring Thoughts</span></div>
</div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">About 23+ categories and 3000+ images,quotes,articles and videos combined we're making a unified platform for everyone to engage and get the benefits out of it.Download the MotiveTown - Motivational App from <a href="https://play.google.com/store/apps/details?id=com.motivetown.app" rel="nofollow" target="_blank">Playstore</a>.</span></div>
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">App description :</span></h3>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><b style="background-color: white; color: #333333; line-height: 24px;">MotiveTown App</b><span style="background-color: white; color: #333333; line-height: 24px;"> Provides various categories of motivational quotes,images and text poems.Motivation is the Key point for everyone and that can act as turning point in their life.Push them Ahead with spirit in their mind to succeed and compete with others.It also provides</span><b style="background-color: white; color: #333333; line-height: 24px;">Motivational quotes for success </b><span style="background-color: white; color: #333333; line-height: 24px;">in Tamil,English and even more supported languages.Start your day with motivational quotes everyday category to get some random quotes and you can customize your own news feed for Motivational Quotes for Daily inspiration.Share quotes,images directly with your friends from the motivational quotes by great persons.</span></span></div>
<h3 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif; font-size: small;"><span style="background-color: white; color: #333333; line-height: 24px;">Screenshots :</span></span></h3>
<div>
<span style="font-family: Trebuchet MS, sans-serif; font-size: small;"><span style="background-color: white; color: #333333; line-height: 24px;">check it out in playstore : <a href="https://play.google.com/store/apps/details?id=com.motivetown.app" rel="nofollow" target="_blank">Link</a></span></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">To Become Beta tester,developing for other platforms,exposing API's and join with me for further development drop me a mail : <b>s.shivasurya@gmail.com or chat with me in G+ hangouts/Facebook.Don't forget to rate the App in Playstore.</b></span></div>
</div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0tag:blogger.com,1999:blog-3047364308476473322.post-6622326263492502822015-09-12T20:33:00.002+05:302015-09-12T20:38:36.019+05:30Exploring HTML5 API for Enriched Web App Development & Experience <div dir="ltr" style="text-align: left;" trbidi="on">
<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;"><div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Few days back,somehow i noticed chrome browser way of handling and enhancing the API for web similar to the Apps that run on devices.Such as prompting for Notifications,locations,Vibrations,Offline Storage and even more API and making it more interesting to develop apps for Web and Web based mobile apps.So,skimming and getting deep into the API's using Javascript and enhancing the user experience and Developer experience.Using it Appropriately at right place at right time will really be gain on both sides.This tutorial will help you to get to know and learn about more powerful Javascript API.</span></div>
<br />
<a href="http://1.bp.blogspot.com/-0g1ILokLTls/Ve7AmBPuiOI/AAAAAAAAFJU/VZ_4S99I4L4/s1600/html5.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Exploring HTML5 API for Enriched Web App Development & Experience " border="0" src="http://1.bp.blogspot.com/-0g1ILokLTls/Ve7AmBPuiOI/AAAAAAAAFJU/VZ_4S99I4L4/s1600/html5.png" title="Exploring HTML5 API for Enriched Web App Development & Experience " /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Reference : <a href="http://codepen.io/shivasurya/pen/vNNjax" rel="nofollow" target="_blank">Demo</a> | <a href="https://gist.github.com/shivasurya/5447ccac70a7fc9fb1f7" rel="nofollow" target="_blank">Download</a></span></h4>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Prerequisites :</span></h4>
<ul style="text-align: left;">
<li><span style="font-family: Trebuchet MS, sans-serif;">HTML5 based web browser.(probably Chrome,which i love it more.)</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">few considerable skill to work on Javascript.</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">little patience to work with code.</span></li>
</ul>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Procedure :</span></h4>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">we'll try to work on few API such as Notification API,Location API,Offline Storage API and with Server Sent Events.</span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Notification API : </span></h4>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">Notification plays vital part in showing new information received to the corresponding service and showing to the end users.you would have experienced this when you get an email notification when you work in desktop and getting chat notifications while working with other tabs.</span><br />
<pre class="prettyprint prettyprinted" data-codota-status="done" data-csrftoken="KOAY3i63-w6eJfFQKIdXmZNRjyeQLncay_fg" data-original-code="String appLinkUrl, previewImageUrl;
appLinkUrl = "https://www.mydomain.com/myapplink";
previewImageUrl = "https://www.mydomain.com/my_invite_image.jpg";
if (AppInviteDialog.canShow()) {
AppInviteContent content = new AppInviteContent.Builder()
.setApplinkUrl(appLinkUrl)
.setPreviewImageUrl(previewImageUrl)
.build();
AppInviteDialog.show(this, content);
}
" data-snippet-id="ext.865e9c5216c02db18db7285c699bb6c4" data-snippet-saved="false" style="background-color: #232937; border-radius: 3px; border: 1px solid rgb(106, 113, 128); margin-bottom: 20px; margin-top: 20px; overflow: auto; padding: 12px;"><span style="color: white; font-family: Menlo, Monaco, Andale Mono, Courier New, monospace;"><span style="font-size: 14px; line-height: 20px;">function <b>notify()</b> {
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
} else if (Notification.permission === "granted") {
var notification = new Notification("Hi there!");
} else if (Notification.permission !== 'denied') {
Notification.requestPermission(function(permission) {
if (permission === "granted") {
var notification = new Notification("Shiva has Messaged You!");
}
});
}
}</span></span></pre>
<div style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">from the above snippet we have written as function for notification handling,in which it requires users permission to send notification,So we are just requesting the user for the Permission as soon as user gives away the permission and callback function is invoked for making further actions.Note that always check for the permission before sending the notification and send only legit/reasonable notification because it may irritate users on seeing more notifications.And perform a check over the browser supports notification API in advance as initialization and perform the other related tasks.</span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Location API :</span></h4>
</div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">Location is another aspect for developers to choose languages,localtime or even advertisements and stats of the website may be useful for future purpose(Business decisions) and knowing about the website users geolocation.</span></div>
<div>
<pre class="prettyprint prettyprinted" data-codota-status="done" data-csrftoken="VtRzclbi-oompL84uy6HaAU3lXgzcA0lqjrQ" data-original-code="String appLinkUrl, previewImageUrl;
appLinkUrl = "https://www.mydomain.com/myapplink";
previewImageUrl = "https://www.mydomain.com/my_invite_image.jpg";
if (AppInviteDialog.canShow()) {
AppInviteContent content = new AppInviteContent.Builder()
.setApplinkUrl(appLinkUrl)
.setPreviewImageUrl(previewImageUrl)
.build();
AppInviteDialog.show(this, content);
}" data-snippet-id="ext.893c09a442d9e98e772c34907fc60cd6" data-snippet-saved="false" style="background-color: #232937; border-radius: 3px; border: 1px solid rgb(106, 113, 128); margin-bottom: 20px; margin-top: 20px; overflow: auto; padding: 12px;"><span style="color: white; font-family: Menlo, Monaco, Andale Mono, Courier New, monospace;"><span style="font-size: 14px; line-height: 20px;">function <b>shareLocation</b>() {
var output = document.getElementById("out");
if (!navigator.geolocation) {
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
var img = new Image();
img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=700x250&sensor=false";
output.appendChild(img);
};
function error() {
output.innerHTML = "Unable to retrieve your location";
};
output.innerHTML = "<p>Locating…</p>";
navigator.geolocation.getCurrentPosition(success, error);
}</span></span><span style="color: white; font-family: Menlo, Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 14px; line-height: 20px;">
</span></pre>
</div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">And in the above code we just requested the browser for the current location on and browser and probable(Chrome) explicitly asks for permission to share the info to the particular site.here as an callback success we have got latitude and longitude ,with those using the Google Maps API service call we just bought the map into the document(The locations may be vary since it is based on your ip.(if you're a broadband user you may get a correct location where as such as 2G and 3G service you may get the Server location</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">(As far i had seen).</span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Offline Storage API :</span></h4>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">With this powerful API in HTML5 we could easily use the database on front end client side and making the load time and process time easier on server side.For example,When you look like application facebook,G+ posts can be saved locally in database (offline storage) and can be updated when they are connected to the network next time.this will really increase the loading time and rendering time minimum.instead of requesting the server for the whole newsfeed contents.</span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">IndexedDB - Offline Database </span></h4>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">This support storing object,create,update and delete like relational Database and have a look at it <a href="https://github.com/SuyashMShepHertz/indexedDB_sample/blob/master/index.html" rel="nofollow" target="_blank">here</a>.</span></div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">LocalStorage : </span></h4>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">Before HTML5 there was a big story behind this,<a href="http://diveintohtml5.info/storage.html" rel="nofollow" target="_blank">have a read</a>.So we are in the age of good developed and matured API.</span></div>
<div>
<pre class="prettyprint prettyprinted" data-codota-status="done" data-csrftoken="VtRzclbi-oompL84uy6HaAU3lXgzcA0lqjrQ" data-original-code="String appLinkUrl, previewImageUrl;
appLinkUrl = "https://www.mydomain.com/myapplink";
previewImageUrl = "https://www.mydomain.com/my_invite_image.jpg";
if (AppInviteDialog.canShow()) {
AppInviteContent content = new AppInviteContent.Builder()
.setApplinkUrl(appLinkUrl)
.setPreviewImageUrl(previewImageUrl)
.build();
AppInviteDialog.show(this, content);
}" data-snippet-id="ext.893c09a442d9e98e772c34907fc60cd6" data-snippet-saved="false" style="background-color: #232937; border-radius: 3px; border: 1px solid rgb(106, 113, 128); margin-bottom: 20px; margin-top: 20px; overflow: auto; padding: 12px;"><span style="background-color: transparent; font-size: 14px; line-height: 20px;"><span style="color: white; font-family: Menlo, Monaco, Andale Mono, Courier New, monospace;">function localstore() {
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
localStorage.setItem("name", "Shivasurya");
localStorage.setItem("company", "i-visionblog");
alert("saved the values");
} else {
alert("Your Browser Doesnt Support Storage Feature");
}
}
function retrieveStore() {
alert(localStorage.getItem("company"));
</span></span><span style="color: white; font-family: Menlo, Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 14px; line-height: 20px;"> } </span></pre>
</div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">So from the above code you can utilize the localstorage as key pair value and retrieved using the key from the storage.this is mostly used among the web developers,However try to use the indexed DB for complex apps and solve a loading time and increasing the productivity.</span><br />
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Live Demo : </span></h4>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span><br />
<div class="codepen" data-default-tab="js" data-height="413" data-slug-hash="vNNjax" data-theme-id="5275" data-user="shivasurya">
<pre><span style="font-family: Trebuchet MS, sans-serif;"><code>function notify() {
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
} else if (Notification.permission === "granted") {
var notification = new Notification("Hi there!");
} else if (Notification.permission !== 'denied') {
Notification.requestPermission(function(permission) {
if (permission === "granted") {
var notification = new Notification("Shiva has Messaged You!");
}
});
}
}
function shareLocation() {
var output = document.getElementById("out");
if (!navigator.geolocation) {
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
var img = new Image();
img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=700x250&sensor=false";
output.appendChild(img);
};
function error() {
output.innerHTML = "Unable to retrieve your location";
};
output.innerHTML = "<p>Locating…</p>";
navigator.geolocation.getCurrentPosition(success, error);
}
function localstore() {
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
localStorage.setItem("name", "Shivasurya");
localStorage.setItem("company", "i-visionblog");
alert("saved the values");
} else {
// Sorry! No Web Storage support..
alert("Your Browser Doesnt Support Storage Feature");
}
}
function retrieveStore() {
alert(localStorage.getItem("company"));
}
</code></span></pre>
<span style="font-family: Trebuchet MS, sans-serif;">See the Pen <a href="http://codepen.io/shivasurya/pen/vNNjax/">HTML5 API - i-visionblog</a> by s.shivasurya (<a href="http://codepen.io/shivasurya">@shivasurya</a>) on <a href="http://codepen.io/">CodePen</a>.</span></div>
<script async="" src="//assets.codepen.io/assets/embed/ei.js"></script><span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div>
<h4 style="text-align: left;">
<span style="font-family: Trebuchet MS, sans-serif;">Final note :</span></h4>
</div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">And thus we have seen few rich set API which can be used at appropriate need in web apps and enhance the user experience.However always check for support of the API on load itself and then invoke calls and respect the users behavior always and forcing them for permission and locking them this will be creating bad impressions.</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">And there are still lot in HTML5 API such as detecting online/offline status,Canvas 2D drawing,animation,vibration API,full screen API,Audio & videos and WebRTC api for live webcam access and peer-to-peer communications.</span></div>
<div>
<span style="color: #e06666; font-family: Trebuchet MS, sans-serif;"><b><br /></b></span>
<span style="color: #e06666; font-family: Trebuchet MS, sans-serif;"><b>for Hugs/bugs/errors/enhancements just comment below or drop me a mail to s.shivasurya@gmail.com or chat with me in G+/facebook/Quora and do follow me in twitter/newsletter for regular updates.Share is care.</b></span></div>
</div>
</div>
shivasuryahttp://www.blogger.com/profile/01835202972903317441noreply@blogger.com0Madurai, Tamil Nadu, India9.9252007 78.119775399999989.8000697 77.958413899999982 10.0503317 78.281136899999979