How to Install Jenkins on Ubuntu

Hello,

2 months ago, I decided to use ubuntu OS. Windows is easier than ubuntu (for now) but the storage problem started to be an unmanageable problem for me on Windows. For now, I would say everything is perfect. (Expect permission problems.)

After Ubuntu, some installations and configurations might look different or hard. Because of that, I decided to write a blog about those topics. It is like a note for me in the future ūüôā First topic is Ubuntu. This week, I am going to write about the following topics.

  • How to install Jenkins on Ubuntu,
  • How to get build after every GitHub commit,
  • How to publish build to FTP via Jenkins.

If you don’t have Java on your system, you have to install Java before Jenkins installation. For Java installation, you have to run following commands on your Ubuntu terminal.

sudo apt update
sudo apt install openjdk-8-jdk

After installation to check your Java installation, you can run the following command.

javac -version

After completing Java installation, everything is ready for Jenkins installation. Firstly we have to add the Jenkins repository key to Ubuntu. For this, please run the following command.

wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -

After it, we have to run the following command to add the Jenkins repository.

sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'

After the repository adding operation, we should run the following command for the update package list.

sudo apt-get update

To complete a Jenkins installation, you have run the following command.

sudo apt install jenkins

Now, Jenkins is installed on Ubuntu. To control the installation, you can run the following command on your terminal screen.

systemctl status jenkins
Ubuntu Jenkins Status
Screenshot 1: Jenkins status check on Ubuntu.

Also you can use the following commands too.

systemctl restart jenkins
systemctl stop jenkins 
systemctl start jenkins

After seeing the Jenkins status on terminal, let’s complete configuration. To access the Jenkins, you can use the following url. It is the default Jenkins url.

http://localhost:8080

On the first visit, you see Unlock Jenkins title on your page. To pass this screen, you have run the following code and proof you are a system administrator.

sudo cat /var/lib/jenkins/secrets/initialAdminPassword

This command returns us an alphanumeric password on terminal. This command returns us an alphanumeric password on the terminal. We copy this password and paste it to Jenkins page. After clicking the Continue button on this page, we see Get Started page. In this page you can choose suggested plugins or you can choose your plugins. I chose suggested plugins and continued my installation. After this step, you might wait 1 – 2 mins for installation.

After successful installation on this page, registration screens receive us. On this screen, we are going to create a Jenkins user. We have to fill all the fields on this page and continue to Save and Continue button for this.

Last 2 steps before seeing Dashboard! After registration, we see the instance configuration screen. I am installing Jenkins to my OS. Because of that, I am going to use the default url on my install. (http://localhost:8080) I did not change anything on this screen and clicked Save and Finish button.

Last screen just for information. Jenkins is ready to use. You can click Start using Jenkins and login with your username / password.

Screenshot 2: After installation, Jenkins login page.
Screenshot 2: After installation, Jenkins login page.

In this post we installed Jenkins to Ubuntu. In the next post, we are going to add one item to Jenkins and configure builds via GitHub account.

Thank you,

See you on the next post.

Multiple Language in the .NET MVC Applications

Hello,

I’m going to try how to develop an application which is support more than one language. I’m going to support two language in my example application. English and Turkish. The main language will be English. Its mean, application going to be English on guest’s first visit. Users can update their language from main page in this application. After changed language, I’m going to set a new cookie for selected language. Expired time is going to be 365 days for my example application. Let’s get start to code it!

In the first step, I’m going to create a new folder in project root for my language files. The folder’s name is Resources. After creating folder, I’m going to add two resources file for my languages. First one is Global. It’s for my main (default) language. Second one is Global.tr It’s for Turkish language. The screenshot for this step is as follows.

Screenshot 1: Language Resources.
Screenshot 1: Language Resources.

Now, I’m going to fill out Global and Global.tr files. I should define texts in this files which texts I want to use for multiple language. Name column should be same for all resources file because application will use this column as a key for texts. My example file’s screenshot is as follows.

Screenshot 2: Global resources file detail.
Screenshot 2: Global resources file detail.

Now, I’m going to use defined texts in my project files. For this, I’m going to add my resources’ namespace in my file. After added namespace, I can use texts in my file now. I’m going to use as follows syntax for call my values. This step is the hardest step for this example.

@Global.YourVariableName

The example is as follows.

Screenshot 3: Example html page for definition.
Screenshot 3: Example html page for definition.

Everything is ready after defined all texts in the resources files. Let’s handle this in our application. How is going to application catch the language? How is going to change? I’m going to add as follows code block in the Global.asax file for detect the language.

Screenshot 4: Language catch in the Global.asax file.
Screenshot 4: Language catch in the Global.asax file.

What is going to do this code block? When application start, It’s going to read default language value from the web.config¬†file and then It’s going to check cookie. (I said this at the beginning of the article.) If cookie’s value is not null or empty, It’s going to use user’s language. If It’s null, It’s going to use default language for the current user.

How am I going to change the language on the front end?

I’m going to add two image button for change the language. The screenshot is as follows.

Screenshot 5: Front end example for change the language.
Screenshot 5: Front end example for change the language.

If user click any flag, I’m going to set a value for the selected language in the language cookie. I’m going to use Jquery for this. The example code block is as follows.

Screenshot 6: Jquery code sample.
Screenshot 6: Jquery code sample.

Now, everything is ready for support to multiple languages. (English and Turkish) You can add a third language via same scenario. (Global.culture)

An extra information: I used as follows code for get/set cookie operations. You can use as follows too.

Screenshot 7: Cookie operations part 1.
Screenshot 7: Cookie operations part 1.

Screenshot 8: Cookie operations part 2.
Screenshot 8: Cookie operations part 2.

I added this to my current project. Because of that I can’t share any sample code for this example.

See you in the next post.

Thank you ūüôā

How to Install and Use PostgreSQL on Dotnet

Hi,

I will try to explain how to install PostgreSql on windows pc and how to change available .net web api project database with PostgreSql. Firstly, let’s download and install PostgreSql. You can download it from here. Installation screens is as follows.

When you click finish button, second installation will start. Second installation is for administration tools. I skipped this step because I installed them before. But you should continue, because I used pgAdmin afterwards. It’s mean, you will see screenshots from pgAdmin. Anyway, let’s check the PostgreSQL. Click to start menu on windows and search pgAdmin from my computer. It’s browser based management panel for pgAdmin. pgAdmin screenshot is as follows.

Now, I will create a new database for my web api via pgAdmin. The screenshot is as follows.

After create a database, firstly I runned as follows command.

dotnet tool install –global dotnet-ef

I have already Entity Framework library in my project. Now, I will add a sub library. That version should be same with available Entity Framework. It’s as follows.

dotnet add package Microsoft.EntityFrameworkCore.Design

I need one more library for this example. I will include PostgreSQL to my project. This library is as follows.

dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL –version 3.1.1

Before database migration and update, I should add new line on my DBContext file. New line will be on onConfiguring method.

optionsBuilder.UseNpgsql(@”Host=localhost;Port=5432;Username=postgres;Password=YourPassword;Database=YourDatabase“);

Now, Everything is ready for migration and update. You should run this command on your Data Access project.

dotnet ef migrations add example

The screenshot is as follows.

Let’s run last command and then database will be ready.

Let’s return¬†pgAdmin and check tables. The screenshot is a follows.

Now, database and connection ready for use. Let’s run web api and check connection.

Example method;

Thanks.

React-Native Example #1 Animated Question Screen

Hi,

In this post, I created an example animated question page. I preferred react-native animatable library for animation. You can use this library or you can find alternative one. You can access updated example application from this link. I shared example project codes on github. You can check it end of this post.

What did I do in this post? I created a simple Question page and I integrated animation library. Questions are coming with animation and when user choose answer, next question is coming with same scenario. If questions finish or user chose wrong answer, result screen is coming with animation. I have a timer too. If times up, again result screen is coming with animation.

What did I use in this example?

React-Native 0.61.4

Expo 3.17.18

Visual Studio Code 1.41.1

I started from create a project step because, this post is first expo example in this blog. Let’s get start.

For create a new project, I used¬†expo init “Project Name”¬†on command prompt. After this command template list came, I chose blank template for my example project. The screenshot is as follows.

After template select, expo suggested to me yarn but I’m using npm. Because of this, I continued with npm.

After selecting the package manager, I waited like 2 mins for a create project. This time can be different for you because of your connection speed or etc. Project create result screenshot is as follows.

Now, my project is ready for development. Before I start, I installed an animation library. You can use as follows command for this and you can check animations from this link.

npm install react-native-animatable –save

After this step, I’m starting to develop my application via VS Code. You can use another alternatives. Firstly, I created Pages¬†folder on root and Styles folder in available assets folder. I used this folders for my example. I didn’t explain a style codes. You can check or update from github links. Let’s start to question page.

I created QuestionPage.js in Pages folder. This example is Single Page application. Because of this, I will call my page from App.js file. The screenshot is as follows.

Before, I was using redux for state management but I used hooks in this example. My variable descriptions are as follows.

resultScreen: I triggered result screen via this variable.

answerAnimation: This variable for animation shape. I shared animation shapes in this post.

wrongAnswerStyle: When quiz start, all answers’ color is same. After user chose, I’m changing wrong answers color. Because user should see what’s correct or wrong. This variable is using for this.

trueAnswerStyle: This is like a wrongAnswerStyle. But this color for correct answer. You can cancel or change this variable.

timerVisible: After user choose an answer, I used timer area hidden with this variable. Because I didn’t show result screen after this. I showed to user correct/wrong answer 2 – 3 seconds.

controlAnswer: After user chose answer, I set users answer to this variable.

trueAnswer: When Question comes, I set true answer for current question in this variable. After user’s chose, I checked with controlAnswer/trueAnswer If this two are same, user gets +10 point and next question appears, If they are different, it goes to next question.

secondCounter: This is for timer.  For example; I did 90 seconds. You can change quiz time with this variable.

restartGame: If this variable is true, All other variables will be default value for new game.

clickableStatus:¬†This is for waiting time. If user is looking correct/wrong answers, second answer can’t appear via this variable.

landingScreenProperty: After finished quiz, this variable will be true and user will see result screen.

nextQuestionSecond: This variable for show correct/wrong answers. I did 3 second for this.

I tried to explain variables in this step, you can change this variables or you can update all of them.

Next step for scenario. I tried to explain scenario with codes. First code part is as follows.

This code block is working after user’s choose. Firstly, I changed ClickableStatus¬†because I don’t want a second answer for same question. I did disabled property true for TouchableHightlight

Now, I can check answer. User can’t check another one. If user’s answer is correct, I changed selected answer’s background color and I gave 3 second for waiting before next question. You can change this color. After all of this process, I showed 2 second loading screen before next question. If user’s answer is wrong, I changed all of answers background color. Correct one is green, others are red. After this, I hidden timer and 3 seconds later I showed result screen.

Before I said, If answer is correct, loading screen is coming. I decided that with this code block. If answer is correct, landingScreenProperty will be true and this code block triggered.

Firstly, I updated controlAnswer with default and changed timer value with 0 in this block. Before I decided nextQuestionSecond 3. After 3 second, everything changed with default and everything ready for new question. You can show points or etc. in this 3 second.

This screenshot is last screenshot for methods. I prepared first if case for timer. If resultscreen didn’t show and user didn’t answer yet, this timer triggered.

Second if case for restart game. If user click restart button, this block triggered to restart game.

I showed methods to you. Now, let’s check screens. First screen is Question screen. The screenshot is as follows.

I used view and animated.view in this screen. Animated.¬†came from my library. If you used different or if you didn’t include this library, this won’t come on your project. You can see how can you add this library in your project.

The next screen is result page. The screenshot is as follows.

I added a button on result screen. I didn’t write score but if you want you can add quickly. If user click¬†this button,¬†restartGame value will be true and application will be restart.

The final screen is loading (or landing) screen. I just added static text on this screen. The screenshot is as follows. This page is optional, If you want you can remove this page.

Finally, I wrote a few if case for trigger this pages. The screenshot is as follows.

You can check example as follows link;

Expo: exp://exp.host/@tolgacinars/QuestionApp

Github: https://github.com/cinarrtolga/rn-quiz-screen

The screenshots;

Thank you.

How to Write .Net Core Web Api via MongoDB on Windows Computer

Hi,

I will try to explain “How to write .net core web api via MongoDB” in this post. Firstly, I should install MongoDB to my computer. Let’s get start. I used this link for download. Example screenshot is as follows.

After downloaded application, Let’s start to install it. The screenshots are as follows.

You can cancel MongoDB Compass. I didn’t install it.

After installation, I added new value in environment variables. This is for command prompt. I used mongoDB setup location in this step. My one is C:\Program Files\MongoDB\Server\4.2\bin If you want, you can skip this step.

I added two times. First one User variables for Your Username area and second one is system variables area. You should restart your computer after this step.
Let’s check MongoDB commands. I checked some commands. First command is;

mongo

show databases

use databaseName

db.CreateCollection(‚ÄúExampleCollection‚ÄĚ)

db.DropDatabase()

That examples are enough for now. Maybe we can check all commands in another article. Now, let’s get start to web api.

I created and opened my project. After created project, I added mongoDB driver in my project. I used command for this as follows.

dotnet add package MongoDB.Driver –version 2.9.2

You can see this package in your .csproj file.

I started from model folder for development. Firstly, I created base model file. I added Id field because mongoDB is using Id field in collections. I created base model file for this. The screenshot is as follows.

After this file, I created an example model for my web api methods.

Now, I created a base repository for my models. I will use this with my model repository.

Example model repository is as follows.

I added connection string property in appconfig.json file. I will use this in startup.cs file.

Startup.cs is as follows.

Example methods are as follows.

Now, I can see my database on command prompt.

You can download my example project in this link.

Thanks.

How to Send Push Notification via Firebase

Hello,

This post is about Push Notification (For android because I just tried on android device). I will be send push notification to my virtual device end of this post. I used firebase for send.

I skipped create a new project part. Let’s get start. Firstly, I created new project on firebase portal. I opened https://firebase.google.com/ and clicked Get Started¬†button for start create process. The screenshot is as follows.

After this, I clicked Add Project button on the next page and a new pop-up form opened on my browser. I entered project name and selected analytics location. Finally, I accepted term’s of use before clicking to create button. Now, we have a firebase project. The pop-up form’s screenshots is as follows.

After created project result screen will be as follows.

I clicked Continue in this pop up and then clicked Cloud Messaging button in menu of the left hand side in the next page.

After created a new firebase project, I returned to my react-native project. I opened my project with VS Code. (You can use different Ide after this step.) I opened AndroidManifest.xml (The location is /android/app/src/main/) in react-native project and copied package name. The screenshot is as follows.

In this step I will add firebase to my react-native application. After copied my package name, I returned firebase page. Before I created a new project but I need to enter package name from my react-native application. You can think like an relation. I paste my package name on this screen. The screenshot is as follows.

When I click, firebase gave to me configuration file. I downloaded this file and copied /android/app folder. The screenshot is as follows.

After copied this file, I included react-native firebase package to my react-native application. Firebase library is as follows. You should run this command on command prompt.

npm install –save react-native-firebase

react-native link react-native-firebase

When the library included, I configured some documents for this package. Let’s get start to configuration. Firstly, I added two new library in /android/app/src/main/java/com/pushnotificationexample/MainApplication.java¬†file. The added libraries as follows.

import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;

And then I went GetPackages section in same file and added two new line as follow.

new RNFirebasePackage(),
new RNFirebaseMessagingPackage()

The screenshot of the changes is as follows.

Now, I finished my updates and closed MainApplication.java After close this file I opened /android/settings.gradle and I added the following new two line in this document.

include ‘:react-native-firebase’
project(‘:react-native-firebase’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-firebase/android’)

The screenshot of changes are as follows.

Latest modification is in build.gradle file. (in /android/app/) I added following line in this file.

implementation “com.google.firebase:firebase-messaging:17.3.4”

The screenshot of changes are as follows.

Google wants two new changes. They are for firebase SDK.

For first node should change build.gradle file. (in the /android/ folder.) The screenshot of up to date file is as follows.

Last two lines are for the other build.gradle file. (in the /android/app/ folder) The screenshot of up to date is as follows.

If you finished updates, you can skip next step. It’s not important for now. The screenshot is as follows.

After skip this step, I returned my react-native project and opened App.js file. This file in the root directory. I opened this file and added as follows line. This line for firebase library.

import firebase from ‘react-native-firebase’

After added this library, I added¬†AsyncStorage component between react-native components. Next step for notification methods. Let’s get start.

getToken method;

I used this method for take user token. After this, I added second method for permission request. Permission request method is as follows.

requestPermission method;

Before request permission, we should check the permission. I created another method for this.

checkPermission method;

In summary, Firstly I used¬†checkPermission¬†method. If I have the permission, I need user token. Because of this, I use getToken method. But If I don’t have a permission, I need a permission first. Because of this I use requestPermission method. If user give permission, third method will be¬†getToken method. If user reject request, This notification don’t work. Token is required for notification.

I added this line for trigger to all scenario. The screenshot is as follows.

I used for Genymotion for test. You can use alternatives. I need token for send notification. My device screenshot is as follows.

I clicked to Open GAPPS button top of right corner in the window to install google play store. When It finishes, the device will be restart. After restart, I opened my application and started debug mode for token. For the debug mode, I pressed CTRL + M in Genymotion. After browser opened, I opened to http://10.0.3.2:8081/debugger-u When debugger opened, It will start localhost but we should change localhost to 10.0.3.2 I returned to Genymotion and restarted application. After start, I returned my debugger screen. (in browser) and pressed F12 I checked console tab and I saw user token. The screenshot is as follows.

I copied this token and returned to firebase. Let’s send notification. I clicked¬†Send your first message¬†button in the¬†Cloud Messaging page and create a new notification. The screenshot is as follows.

I filled the second textbox and then clicked Test On Device I used token in this page. The screenshot is as follows.

I selected my application in second step and clicked to next button. The screenshot is as follows.

Click here for github link

Before I wrote this article on another platform in Turkish. That is why some screenshots are Turkish.

How to include React in Available .Net Core Web Application

Hi,

In this post, I will try to explain “How to include React in available .Net Core Web Application” You can access example code end of the post. Let’s get start.

I don’t have any project for this example. Because of this I created empty project for this example. You can pass the project create step. The screenshot is as follows.

I selected project template on second step. Example project will be web application.

My project is ready now. Before start to development, I should include some packages for react. This packages are as follows.

React.AspNet,

JavaScriptEngineSwitcher.ChakraCore

JavaScriptEngineSwitcher.ChakraCore.Native.win-x64 (If you are using Windows x86 or another OS, you should download your version for this OS.)

JavaScriptEngineSwitcher.Extensions.MsDependencyInjection

After downloaded packages, I modified startup.cs file in my project. Firstly, I added new libraries to startup.cs. This libraries as follows.

using Microsoft.Extensions.DependencyInjection

using JavaScriptEngineSwitcher.ChakraCore

using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection

using React.AspNet

My page is as follows.

I added the following code to the end of configureservices method.

I added code in configure method as follow. This code must be before static files. The screenshot is as follows.

I created JSX folder in wwwroot. I will use this folder for my react files. Let’s start.

Firstly, I added new div in my masterpage layout. (_layout.cshtml) My react components will use this div. The screenshot is as follows.

Now, I can write react code. I added a new jsx file in my jsx folder. The screenshot is as follows.

My component details are as follows.

In this step, I called react file from _layout.cshtml. I added codes bottom of in my master page as follow. (_layout.cshtml)

Script links are as follows.

https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js

https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js

I started localhost and It worked!

 

I shared example codes on github. You can access from this link.

Thanks.

How to do Hamburger Menu in React-Native (Android) Application

Hi,

I will try to explain “How to do Hamburger menu in React-Native? (Android)” in this post. Just android because, I couldn’t test on iOS application yet. I used windows computer in this application. Let’s get start to development.

I assume, you know “How to create a new project in react-native” I skipped this step. I use Visual Studio Code for my react-native applications. You can use this IDE or you can find alternatives. I will use screenshots from VS Code in this article. After create project, I created Pages¬†folder for my screens. This folder is optional. You can use alternatives.(It’s mean different folder name) But I will create my all pages in this folder.

After create my example pages, I included some libraries in my project. You should run respectively as follow commands in command prompt.

npm install native-base –save
react-native link
npm install react-native-elements

After included this libraries, I created empty pages. (for hamburger menu items) My example page names are “HomePage.js, ProfilePage.js, SettingsPage.js, NotificationPage.js” Again, you can use different page names in here.

Empty Page Example

I shared my example page source code’s ńĪn screenshots. You can find GitHub links end of this post. I didn’t add any component in this page. Just a page name for test.

In this step, I will include navigation library to my project. You should run this command in command prompt for this.

npm i react-navigation

After included react-navigation library, I cleared App.js file and I designed my navigation menu in this file. First step for design, I added my libraries and pages to App.js file.

Include libraries and pages

Finally, everything is ready for hamburger menu. Let’s start to design hamburger menu. If you know web programming you can think as html. It’s easy. Before share my design code block, let me explain to you my sections.

I added logo area for application and then text area for username or application name.

After then, I added DrawerItems tag for menu items. My pages will be show in via this items.

Finally, I added two icon for contact, information or etc. This icons are clickable and will be in bottom page.

I created¬†assets folder in my root directory. If I don’t, application will give an error. After create assets¬†folder, I copied¬†no-image.png to this folder. I used this in hamburger menu. (Logo area) My designed codes are as follows.

Hamburger design codes.

I defined my pages when design finished. You can think Select – Option. I used this items in my design. My items screenshot as follows.

DrawerNavigator items.

If you want to add more item, you should insert more code block as follow.

Single item example.

After above step finished, I added code in bottom of App.js file as follow.

Menu finished. If I try to start my application after this step, I will see as follows error.

Error example

The solution is simple. Before I run my application (or after stopped via CTRL + C in command prompt) and then run this code in command prompt.

npm install –save react-native-gesture-handler
react-native link react-native-gesture-handler

After included and linked this package I can start application in virtual device. (Genymotion or etc.) I can see my hamburger menu like as follows.

Hamburger menu v1

Now, my menu ready for use but I will add icon for my items. It’s not required but It will be good with this icons. Before we added native-base library to current project. I used this library in this step. This code block should be over to Render method. This code block’s screenshot as follows. (static navigationOptions)

You can use https://ionicframework.com/docs/ionicons/ for menu icons. You should change name properties in above code. Finally, our project is as follows.

You can find project code in here.

Thanks.