DEV Community: Carlos Guzmán

How to start developing mobile applications.

Carlos Guzmán — Fri, 14 May 2021 16:41:58 +0000

How to start developing mobile applications.

First, I want to confess that I am a beginner in developing mobile applications, but today, I would like to share with you, my little experience and some points that you should keep in mind to start with a simple project.

To start, you should know, that you can develop mobile applications of multiple forms, you can use frameworks to build once and deploy to both platforms (Android and ios); this is great because your team can save time to deploy the application and can use a specific language to write the code.

Another way to develop mobile applications consists in use native frameworks or SDK provided for Google and Apple; the main difference is that you must learn the native language to each platform. For Example: if you want to develop an app for ios you need to learn Swift; the same happens for Android.

With the last mentioned way, you can use all native APIs to each platform, take advantage of native APIs to improve the performance of your applications, and use specific features that usually not available when you use and intermediaries to build mobile applications.

Some libraries or frameworks that can you help to develop mobile applications writing code once and next you can deploy for both platforms are:

Xamarin: This platform was developed with Microsoft, at this moment, uses C# language to write code. Remember that the purpose of these platforms is to permit that you write one time to deploy in both platforms.

Ionic: Ionic is an open-source mobile UI toolkit for building high-quality, cross-platform native and web app experiences. You can move faster with a single code base, running everywhere with JavaScript and the Web

React Native: The premise of react native is "Learn once, write anywhere", React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces. You can use React Native today in your existing Android and iOS projects or you can create a whole new app from scratch.

Now that you know some ways to create a mobile app, I want to remember you that you must know the limitations of each library or framework based on your necessity, for example: if you need to use Bluetooth, camera, GPS, and any other feature, you must sure that your library supports these features, at the same time, you must know which tools provide the framework or library that can help to develop, debug and deploy your app.

At this point, maybe, you are interested in the performance of your app, some frameworks promise fast apps with features like 60 Frames per second, Down to: 1.8 Sec Time to interact, etc. again you must analyze what is the purpose and objective of your application and if this requires the best performance or is acceptable for your app.

Now, I want to show, how to create a simple project, using react native, remember that react native, use react library to control the render cycle of the app.

First, you should must sure to have installed node js and npm, if not have installed follow the next instructions.

https://www.npmjs.com/get-npm

if you are new to mobile development, the easiest way to get started is with Explo CLI. Expo is a set of tools built around React Native and, while it has many features, the most relevant feature for us right now is that it can get you writing a React Native app within minutes.

First, let's install expo-CLI.

npm install -g expo-CLI

Now, let's create a new project using expo CLI.

expo init name-for-your-app

The last command creates and prepares a folder with the libraries, and scaffolding to start a project.

Next, you should enter the folder with the name app.

example:

cd name-for-your-app

and run the project with the start command.

npm start // Or use expo start

After running expo start or npm start you can see a menu with the options to run ios or android simulator, once you can run the simulator, you should see the app.

Congratulations, you have now your first mobile application.

thanks for your attention.

How to use basic styled-components in React

Carlos Guzmán — Sun, 24 Jan 2021 23:50:42 +0000

Styled Components, is a library used in react for write CSS into Javascript files, this is good usually when you want to have your CSS code into the component or create a specific component with style and personalized tag.

To install the library, into your react project run:

npm install --save styled-components.

Styled-components utilize tagged template literals to style your components. It removes the mapping between components and styles. This means that when you are defining your styles, you are actually creating a normal React component, that has your styles attached to it.

After installing the library, you can use these functions in your component.

Remember to import the library into JS File.

import styled from 'styled-components'

Example:

`// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);`

If you want more information, you can see styled-components documentation in the next link.

https://styled-components.com/docs/basics#installation

How to Install SynthWave '84 Theme in VScode and Enable Neon Dreams in OSX

Carlos Guzmán — Mon, 21 Dec 2020 01:05:46 +0000

First, Open the next link in your favorite browser:

https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

Click on the install button.

For Select, your theme, go to the menu on the top bar: Code -> Preferences -> Color Theme and click there. In the list, select SynthWave '84.

Now, in the visual studio code window, press the next shortcode: Shift + CMD + P and write Enable Neon Dreams, and select in the list: SynthWave '84: Enable Neon Dreams.

Excellent, now your favorite code editor uses SynthWave '84 with the feature Neon Dreams Enable.

How to create a basic structure for a Next JS App, manually or using a boilerplate tool.

Carlos Guzmán — Sun, 06 Dec 2020 02:36:24 +0000

Next.js is a wonderful production framework for React. This framework has two ways to create a Next Js App. The first way is using a boilerplate from Next Js APP, to use this tool, perform the following steps.

Before, you should have installed, one tool for package management such as npm or yarn.

Create next-app Tool.

1.Yarn

   yarn create next-app

OR
1.Npm

   npm create next-app

NPM OR YARN.
The assistant should ask your app name, in this case, write a name for your app and press the KEY ENTER.
Now your app structure was created, enter to App directory.

cd my-app

Enjoy! Now you can run the application, create a build, and finally run the application in production mode.

// Run Dev Server

yarn dev

yarn build // Create a build

yarn start // run server in production mode after a build

You can use the same commands with npm, only replace the word "yarn" for "npm"

Manually.

To create the structure app manually perform the next steps:

Make a directory with the name of your application. In the console write:

mkdir next-js-app

Enter to Directory. In the console write: cd next-js-app
NPM: npm install next react react-dom OR Yarn write:
yarn add next react react-dom

npm install next react react-dom

yarn add next  react react-dom

Edit the file Package.Json, and add in the scripts section, the next lines.

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},

Now, you need a page directory: In the root directory, create a directory named pages. Example: mkdir pages

mkdir pages

Enjoy, now you can run the app. for example in dev mode.

npm run dev.

How to hash a password before save into DB with JavaScript and bcrypt.

Carlos Guzmán — Sat, 28 Nov 2020 16:30:11 +0000

When you save data from users, such as username, email, phone numbers, and other data, is usually save these data in plain text, however, for user passwords, it is not secure, because, if your DB is compromised, all passwords its exposes.

So, hash all password before save into DB, usually is a good practice. bcrypt, is a JavaScript Library for this propose.

Remember init your npm project with npm init and install the library with npm install bcrypt.

Now implement your library.

const bcrypt = require('bcrypt'); // import the Library. 
const saltRounds = 10; // The number of rounds for encrypt the passwords. 
const myPlaintextPassword = 'examplePassword';

// Now, use bcrypt for encrypt the plain Password. 

bcrypt.hash(myPlaintextPassword, saltRounds, function(err, hash) {
    // Store hash in your password DB.
    console.log(hash); 
});

If you need compare un plain Password with your saved password, you can use the function compare.

bcrypt.compare(myPlaintextPassword, hash, function(err, result) {
    // result == true
if(result==true){
 // The Password is Correct!
}
else {
 // Your password is not correct. 
}
});

It's All,

Thanks!