SonarQube - Code Quality and Code Security - Code Quality Gates

hello my friends and welcome back to hey what are you no get out of here you hairy beast hey welcome back to another episode of flutter explained i want to talk today about sonar cube summer cube is a fantastic tool that allows us to create quality gates and shows us how our code behaves at the moment we have the possibility to add that with flutter and dart and i will show you today how you can do it and which advantages it brings to us and now without further ado let's get started all right so in nearly every company that i've worked for i started sooner or later to integrate sonarq sonarcube is completely for free for community edition but there is also a professional edition that allows you to get support from the sonic cube team why i want to show you that today is because sonic you have helps me a lot and i used it nearly all the time in every company that i worked for why is that the case well it allows us to define specific coding standards in our code and if you get some errors there you can work on them additionally it allows you to get quality gates and what that is is it shows you if you have created new bugs and if you have too many of them you are not allowed more or less to work further so it's just a flag that gets from green to red alright but where does sonarcube help us actually the idea of sonarcube is to allow us to analyze our code for specifics like bugs and code deaths also it takes a look into code coverage so but what all of these means and why is it important for us it allows us to create so-called quality gates a quality cade is nothing else that a switch that turns off from green to red whenever we get a problem in our code or if we create or introduce too many of these problems sonarcube allows us to identify different topics for example maintainability reliability test coverage and different so all of these things are getting analyzed by sonar cube and allows us to get more information sadly if you take a look here you will see that the sonarqube community is open currently for dart and flutter so it is not actually supported yet but i would make this video if it would not be possible anyway because of this fantastic github issue or github project we have the possibility to add sonar cube to dart and flutter and i want to show you today how you can install it locally because who wants not having a sonar cube server on their machine after that we want to take a look into how we apply this plugin and how we can analyze our code but before we start now talking about why or how we can implement everything and use it let's have first a look into why we actually need sonar cube in a usual project we are in a team right for let's say six developers and we want together define some quality standards for our project meaning we have a certain test coverage we have a reliability we want to remove as many bugs as possible and only if these code debts are already taken care of we want to proceed with next features because as you probably know the longer a bug lives in your code and the harder it gets to maintain the more expensive it will be also to maintain it and fix it again additionally you want to maybe discuss with business and business people usually don't really care about code or technical stuff they care about graphics and numbers and if you have the right figures the right key figures and the right graphics for it you have the possibility to talk with them in one eyeline and you can tell them hey our bug has code deads it has bugs it introduced two less code coverage for testing and we have to fix that first before we can advance with your new features all right but now that we know the why and what we want to do now let's get started into code and let's integrate sonarcube for our projects alright so let's get started the first thing you have to do is go to sonarcube.org you will find the link down in the description below and press the download button check the community version and download for free while this is downloading which can take a second we check the pre requirements that we need for it the pre requirements are actually pretty simple we need java jdk 11 and that is very important version 11. you will find java 11 down in the video description below and you just have to install it for your environment so if you have that there are some hardware requirements in our case this fits all of them you will find this page here directly down in the video description we will work now on a local server so that means we have it locally installed in a debug mode and that means that we don't have to for example post re-sql ser database or microsoft sql server for it we just let it run locally okay so now you can see that the sonar cube is downloaded and we extract this file so it is a compressed zip file at the moment i just go inside copy the whole thing and move to a folder that i like for me it's tools and i copy it over here so it will take a second and while this is copying we want to rename them and the next thing we want to do is just start it up alright so i copied it over here and i renamed it to sonarcube to find it easier and i jump inside and navigate now into that folder so i opened here as cmd this is the command line tool from windows but you can also use powershell terminal and whatever you floats your boat at least you can start something up inside of it so we navigate here inside of the bin folder sorry and if we check it we will find three different folders linux mac os and windows of course we want to go to windows because we have currently a windows machine if you are working on mac os or on linux you just choose the appropriate folder so and here inside we will find a fantastic start sonar bud which we will execute now and if everything works well we should now see no issue at all and this should just make a lot of text and noise and after that we are able to navigate to localhost 9000 so let us wait a second and let's see what happens that looks already quite good so let's try to navigate to localhost 9000 and you can see we are in the maintenance mode and sonarcube is starting up fantastic now we just have to wait a second until the server is configured and we are able to start the application alright so after some seconds we are now able to work on sonarqube for that we have the login and password and this is defined as admin and you guessed it already admin again now this is your initial password now you change it to whatever you like i will take one two three four five six seven eight and the same thing for the confirmation because it's just a local environment and we are ready so here inside you don't see anything at the moment we don't have any projects but you can see already we have a lot of filters we have issues rules quality profiles administration and all of that we can set up in a second but first of all we have to create a new project so let's do that we can do it via a server so if you have a server you can take it directly from github from gitlab bitbucket and so on and so forth but we will do it manually so let's take a project key so for example test project and let's set that one up okay so now we can generate a token this token needs a key so for us we just take flutter test and generate this token and with this token we will now take our project information so i just clicked it away you can get the token here still so we are on windows and here you get now the possibility to download a so-called sonar cube scanner and this sonar cube scanner is very important for us so we click download and here inside you will choose the um tooling that you need for us i have a windows 64-bit version installed and i have that already done downloaded and installed and you can find it here and this sonar cube scanner needs to be set in the environment variables so inside of environment variables in the path you can see that i have installed this sonar cube scanner here inside make sure that it is inside of the bin folder unfortunately flutter and dart is currently not supported via sonar cube itself so you find this thread where i also added my comment to it that we should have a real support from sonarcube community but until it exists there is a fantastic package from uh sonar flutter from inside app oss and you have the possibility to still add it to yours so how can we do that we have to install it for our server so how does it work we go and get the latest release this is currently three zero three one and you just hit down here the jar file this is the one that we need so we keep that one and if we take a look into how we do it um we can see that the installation on the server is just to go to the sonar cube home extensions plugins directory and we have to restart the server so let's see if we manage that so we have here the jar file i take that one and hit it over to um to our sonar cube instance which is a tools sonar cube extensions plugins and here we add our new jar good so now we have to restart the server we will be back as soon as the server is restarted alright so the server is restarted and we are back here in our test project you remember that we selected these analyzers stuff and we installed now the scanner we also have now the plugin in place now we have the possibility to take all this line of code you can just click here and copy and with this line of code you would push your changes up here but there is also another possibility that i want to show you that you have some possibilities to add more settings to it as you can see in the github project of sonar flutter we have this project configuration and as you see for that we have to create a sonar project.properties file in our project i have here already a project prepared our power bill app that is a bit more sophisticated project so we see a bit more stuff than just the regular hello world example and now let's create here a file the summer project dot properties and we add it to our git repository and we add all these informations into this properties so now the tab project key is for our case i guess that was test project exactly and this test project comes here and the project name is test project we keep the version number and here this part is also interesting it specifies where our source files lives and where our test files live so in our case it is lip and test perfect the next thing is sona source encoding utf-8 this is just how we encode our stuff and it's just the default one all right so that we have now specified all these information in our soda project properties we are able to execute now our sonar linting this line of code here and the only thing that we actually need is the sonarscanner.but which is our execution of the scanning and we need this login part at the end with our token so if we push that now everything should work fine and push all the information up to the server so let's give that a second and let's see how it works [Music] all right so after some seconds we got execution success and we get two urls one of them is a dashboard which we can click on and we get opened everything up and i register myself to the dashboard once more and here you can see now that our quality gate is passed at the moment so we get some information about our bugs you can see we have currently 144 bucks according to sonarcube if we click on that we get analyzes like for example prefer final over const or something like that with the variable declaration if they are not designed we can go inside we can directly see where the error appears you can see i used here bar and it says that i should use final for this functions for these variables and it declares that as a bug but as you can see it also gives it an value for example in this case it is a minor problem perfect so this is one thing that it shows us but also what it shows us is the so-called code dead and that are code smells so small things that you can improve for example prefer relative imports for lip and prefer double quotes if you want like that all these things document all public members and so on and so forth so my dart analyzers are also taken care of and shown here if we make there somewhere problem another thing that we can see is that we receive our coverage if you have run your flutter tests with coverage like i did you can see we can say flutter test hyphen hyphen coverage then you receive a folder called coverage with a so-called alcohof info file and this file doesn't look very beautiful but it contains all the information which lines of code has been tested and which one doesn't and this one gets uploaded into there and if you click on this you can see which files are tested so you can see a lot of them are not tested but we have also some that are pretty good tested so this gives you a whole understanding of your application and where you are at the moment and then you have the possibility to add such quality gates at the moment these quality gates can be set by yourself so you can create one give it a name and so on but i just take this sonar away standard one which allows us to have coverage is less than 80 duplicated lines of code are less than three percent maintainability rating should be worse than a reliability rating should be worse than a and so on and so forth and this allows you to also take this past part here and i see right now that somewhere needs to be an error yeah you see it up here because you can see that the reliability is bd but should be a so the quality gate i think it's because of the demo um doesn't work but it usually works so and what we can now do with this quality gate we can take it and implement it for example in our readme file to see if we are successfully managed to put our quality standards in place so for that we go into project description or information up here and get project badges and this project badges like you see here can be added to your code in your readme file for example and you have the possibility to add that there so with that you are now able to add that to your ci cd so if this quality gate is bad then you cannot build anymore for example but what you can also do is just add it to your readme file or talk with business about these numbers and figures and also talk with your team about it because with that you have every tool in your hand to improve your code quality fantastic all right so we were able to install sonarcube locally we implemented the plugin and we analyzed our first code now you have the dashboard and the key figures in your hand to talk with business in one level and explain them why you need more time for a specific feature or why you want to need some time for refactoring your code fantastic i would like to know down in the comments below from you guys if you have ever used sonar cube in your projects and how you used it alright so now hit the like button subscribe to our channel if you haven't yet and we will see us next week thank you for watching until the next time see ya

Channel: Flutter Explained

Views: 40,162

Keywords: Flutter, Dart, Code, Analyzer, SonarQube, Dart Sonarqube, Flutter Sonarqube, Quality Gates, Quality, Code Debts, Code Quality, Measurment, Code Key Figures, Code Figures, Code Business, Disucssion, Code Metrics, Metrics, sonarqube tutorial, static code analysis, sonarqube integration with jenkins

Id: QD5J8YvQPPM

Length: 16min 48sec (1008 seconds)

Published: Thu Apr 01 2021