Frontend

Hello , in this article we are going to discuss how we can automate android APK signing process using gulp. If you would like to know how we can automate build process of react-capacitor app you may check   Build Automation for React-Ionic-Capacitor App using Gulp We are going to use same app mentioned above, to create a signed APK. You can check  Ionicframework Playstore deployment  page to basic steps that are involved in this process. As a first step we are going to create the KeyStore file, this step should not be included in automation process as it should be done only once. So let's create. We will use command :  keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000 You may change alias name, keystore filename etc as you wish. Once you put the command in command promt or terminal it will ask few details : Password, First Name/Last Name, As you can see keystore file has been saved in pr...

Hi Everyone, in this article we are going to automate build process of a React-Ionic-Capacitor app using Gulp. If you would like to know how to create a mobile app with React/Ionic/Capacitor combo feel free to visit my previous article  How to Make a Mobile App with React, Ionic and Capacitor I am going to use the same app codebase from above link for this tutorial. Initially my application look like below : As the first step I am going add few dependencies for this process (1) Gulp (2) Child_process I am also installing gulp as global Now we are going to create a file gulpfile.js in the root folder of the project. Below commands we are going to execute one by one by creating gulp task for each: 1. npm run build : to build the project 2. npm cap sync : to sync project with native code 3. gradlew clean : to clean gradle 4. gradlew assembleDebug : to create debug build 5. gradlew assembleRelease : to create release After those we will create a fina...

In this tutorial we are going to create draggable <div/> in React application. Also we are not going use any external libraries for this implementation which will help you to customise this code as per your requirement. End result will look like below : Basic idea is we are going to create a wrapper with styled components, and will add actions for onMouseDown and onMouseUp . In the actions native event properties like pageX,pageY,offsetX and offsetY to calculate new positions of the draggable div. Let's create the styled wrapper first : const StyledWrapper = styled.div ` width : 200 px; height : 120 px; position : absolute; top : 40 px; left : 227 px; background - color : rgb( 0 , 0 , 0 , 0.5 ); cursor : pointer; z - index :100 ; padding - top :20 px; ` We will return this wrapper, from this component. Within that wrapper we will add other required div elements. < StyledWrapper > < div style ...

Hello everyone, in this tutorial we are going to learn how can we use environment variable in React-Capacitor mobile app. If you want to set up react-capacitor application, please refer to this article : How to Make a Mobile App with React, Ionic and Capacitor Let's walkthrough the App.js code, which only consists of a button ,clicking on that button app calls an endpoint. import React from 'react' ; import axios from 'axios' ; const App = () => { const getData = () => { console . log ( "Current environment : " , process . env . NODE_ENV ) axios . post ( `${process.env.PUBLIC_URL}/getdata` ) . then ( response => console . log ( response )) . catch ( err => console . log ( err )) } return ( < div > < button onClick = { getData } > Get Data </ button > </ div > ); } export default App ; In this example, process.env.VAR_NAME is...

Hello everyone, in this tutorial we are going to create 'Tooltip' component for React , but we will not use any external library, so that you get the flexibility to customise it according to your project need. So Let's start. First Let's see have a look of the final outcome : So we will start by initiating a project with create-react-app. And within src folder we will create a Tooltip.js file, Tooltip component will allow user to pass tooltip text. import React from 'react' import './style.css' const Tooltip = ({text}) => { return ( < div style = {{ textAlign : 'center' , margin : '10%' }} > < div class = "custom-tooltip" > Hover to see tooltip < span class = "custom-tooltip-text" > {text} < /span> < /div> < span style = {{ display : 'block' ...

Hi everyone, in this article we are going to make a mobile application using regular react code, we will use ionic framework for getting native ui fill of mobile application. Later we will use capacitor to give it a native wrapper, we can build for iOS , Android and Electron platform using the same. So let's start. Prerequisites : Node.js should be installed, create-react-app should be installed globally, Xcode(for iOS) or Android Studio(for Android) should be installed. For android platform final application will look like below. If you don't have the settings install nodejs from nodejs.org. Use command : npm i -g create-react-app@latest for installing create-react-app globally. Let's initialise a create-react-app application instance with typescript template. It will install all the dependencies required, then open the project in your preferred code editor, I am using VS code. Then install below dependencies. Once they are installed you are good ...