Before we start

Adding a global activity feed to a mobile application sounds difficult, but, luckily for us, there are third-party libraries to help us, which is one of the things that we like most about React Native.

Today, we’ll use react-native-activity-feed and also, as the documentation states, we’ll need to include the react-native-image-crop-picker if we are using native packages or expo-image-picker if we are using Expo.

To install all of these libraries, run the following scripts on your terminal from your React Native root project folder.

If you are using Expo:

• expo install expo-activity-feed expo-permissions expo-image-picker

If you are using native packages:

• npm install react-native-activity-feed OR yarn add react-native-activity-feed
• npm install react-native-image-crop-picker OR yarn add react-native-image-crop-picker

Remember that, if you are using Xcode, every time you add new libraries to your project you have to run npx pod-install to install pods dependencies.

Important note: to use react-native-activity-feed you need to have a GetStream account (we’ll look at this in the following steps). That said, GetStream provides paid plan options to use its resources; you can still use the Activity Feed package for free for development purposes, but only for a limited time.

Let’s jump into the code of a Global Activity Feed using React Native

First of all, you need to create a React Native project.

If you don’t know how to create your app, just run the following commands on your terminal:

• npx react-native init ProjectName

Now that you’ve created the application, let’s get to coding!

Important note: this example was made using React Native 0.66.

First steps

First, we need to create an account on https://getstream.io/accounts/signup/

After signing up, we’ll navigate to our dashboard where we’ll see that an application has already been created for us. This app includes an App ID, a Key and a Secret Key. We will use those values later.

By clicking on “PRODUCTION APP”, we can access our ‘Feeds’, access keys and other information. Note that we can create new feeds in this section.

Express backend client

It is very important to know that we can’t use our Secret Key inside a desktop/mobile/web environment, so we need a backend client.

Therefore, in a separate folder from the one containing the mobile project, we will run npm init in our console and provide a project name (e.g.: backend-server).

Inside this folder we need to install the two libraries using the following commands:

• npm install express –save
• npm install getstream

Link: Backend.js

This Express server is very minimalist and its main purpose is to allow us to create a user token for the frontend application. Keep in mind that we are always creating and or getting and subscribing to the feed using a user with id ‘tester’. If we want to add more users, we can change this or send the param inside a query param.

With the server running, now we have to fetch a request to, in this case, http://localhost:3000 from the mobile application.

Mobile application

Link: App.js

In this example, we have an activity indicator running while we get the user access token to start our StreamApp. The only two values we have here are the STREAM_API_KEY and STREAM_APP_ID; the token is the one that we got from the backend.

GetStream provides many components to use and customize. The most important one to establish the connection to our feed is StreamApp, which includes the API key, the app ID and a private token. We also need to send our user ID to see our user information in the post we create.

We can customize our feed however we want. We can also copy/paste the GetStream components to our code and make some modifications. In this example, we’ll customize the UserBar component for every Activity, and we’ll also add a LikeButton easily and in just a few lines as you can see in the link above!

Finally, we will see how the notify prop on the FlatFeed component shows that, every time there is a new post available, we will be notified and can tap on the notification area to see the new posts. If we prefer swiping down to update the feed, we can set the notify prop to false.

Global Activity Feed preview

Final thoughts on building a Global Activity Feed using React Native

As we’ve seen, adding an activity feed to our React Native application can be done with just a few lines of code and it is not as hard as it might seem.

The best advantages of this library are that it is easy to use, it is easy to adapt and customize to our designs, and it provides many other features to use in our development projects.

The post Build a Global Activity Feed with React Native and Node.js appeared first on asap developers.

In this guide, we will cover how to connect React Native and Node.js to develop a login application. Once logged in, users will be able to access a private resource. We won’t go into too much detail, so you can get started as soon as possible.

Before we start, let’s take a look at why we chose to use these technologies. You should know that prior knowledge of both tools is required to complete this guide successfully.

Why React Native?

According to the official docs, “React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.”

To put it more simply, React Native is the adaptation of React for native development. But let’s analyze what that really means.

React Native is a framework based on React that uses JavaScript to build mobile applications that render natively, for Android and iOS at the same time. 

Therefore, this tool allows web developers to take advantage of React’s outstanding benefits and apply their prior JavaScript knowledge but, in this case, to target mobile platforms.

Why Node.js? 

The official documentation claims that “Node.js is a JavaScript runtime built with Chrome’s V8 JavaScript engine.” 

Being a runtime means it acts as an environment that allows you to execute, in this case, a JavaScript program on your machine. Moreover, it uses a non-blocking I/O model to respond to events from a user or from another application, which makes it lightweight and efficient.

Moreover, its package ecosystem, npm, has the greatest number of open-source libraries in the world.

Now that we know which technologies we are going to use, let’s get started.

Create the Node.js project

Let’s talk about our backend and what its role will be. It will receive requests from the frontend and, in turn, give a response according to the result of the data flow. Behind the scenes, it will be interacting with the database, creating the users when they sign up and verifying their credentials when they attempt to log in.

Requirements

To be able to follow this part of the guide, you must have Node installed. We will be using node v14.16.1 and the npm 6.14.12 version.

To store our users in the database, we will be using MySQL Community Server as well as MySQL Workbench, so you will need them both as well. You can use another database if you want. If you do, you can skip the next step. 

How to setup MySQL

Start by downloading MySQL Community Server from their website. Follow the installation instructions and that’s it. Then, MySQL Workbench will be needed to manage our database. Download it from the same site and install it. We will use versions 8.0.25 and 8.0.12, respectively.

When you have finished, you will see a MySQL local instance running. To connect to the database, click on that instance and you will be asked to enter a password. Remember the password, as well as the username and the port your local instance is running on. You will need that later. 

Now, it’s time to create our database. Right click below “Schemas” and choose “Create schema”. We will name it “loginDB”, but you can choose whichever name you prefer. Click “Apply” and the database will be created. 

In the left panel, you will see the database we have just created. Inside it, there is a “Tables” section. Right click it and select “Create table”. Select the configuration below and click “Apply” to finish the setup.

Once you are done, you can start by creating the backend project and installing the necessary dependencies. 

First, we will create a “loginApp” folder and, inside it, another one called “server” where our backend will be placed. Folder names are up to you, you can name them however you want. Then, run the npm init command to initialize npm and proceed to install the required dependencies listed below. To install them, we will be using yarn version 1.22.10 and running the yarn add <package_name> command. we will summarize what each dependency does below, in case you are not familiar with all of them.

After installing them, go to your package.json file and, in the scripts section, change start from node app.js to nodemon app.js. You can now run npm start and nodemon will be activated.

Enough with the preparations, let’s code. In the “server” folder, create an app.js file that will initialize the application and create and hold the environment configuration. Place this in your file:

app.js

Link: script

From now on, pay close attention to the imports in each file to understand how they are connected. 

As you may see, in the first line of our app.js, we are importing express and, at the bottom, we are specifying the port where our server will be listening for requests. Also, two files we haven’t talked about yet are being imported. app.js will connect what they provide to our application.

The first one is database.js and it is inside a “utils” folder. Here, we will create an instance of sequelize that will let us connect to our MySQL database. Copy the following content and replace your password where it says YOUR_PASSWORD.

database.js

Link: script

The second imported script is inside a “routes” folder and is named routes.js. This is the one that defines our API endpoints using express, as follows: 

routes.js

Link: script

We are only going to use the first three endpoints, the other two are examples you may need to define a public route and a default one.

You may note that, in this script, another file came into play in the imports. Its name is auth.js and it is placed inside the “controllers” folder. This file contains the actions that get executed when those requests are received.

So let’s see what auth.js should include:

auth.js

Link: script

Again, looking at the imports, we can see that there are two new packages: bcryptjs and jsonwebtoken. 

There is also another file we haven’t seen yet. Let’s look at what it should include before continuing with auth.js. 

The file name is user.js and it is inside a “models” folder. It should import the sequelize instance from the database.js file we already saw and, then, define the users table we are going to store. Copying this into your file will be enough:s

user.js

Link: script

Going back to the auth.js file, we can see three functions are being exported: signup, login and isAuth. These will be in charge of resolving the requests defined in routes.js.

signup registers users in the database. First, it checks if the email provided has already been registered. Then, if the email and password have been received, it hashes the password and stores the user in the database. 

login handles login requests. It starts by checking if the email corresponds to a database user. If that’s the case, it hashes the password and compares it to the user password in the database. If they match, it responds with a temporary secret token. 

isAuth asks for the secret token and, if it is provided, proceeds to verify it. If everything goes well, it will finally respond with the private resource. In this case, that resource will be just a message containing “here is your resource”. This is enough for our proof of concept.

That’s it. We are done for now. We have our server ready to respond to authentication requests in port 5000 after running npm start. You can test the endpoints defined using Postman or another tool of your choice.

Create the React Native project

It’s time to talk about the frontend and what its role in this project should be. It will receive the user input and send a request to the backend, to sign up or log in, depending on what the user has selected. Then, based on the backend response, it will show an error or success message to the user.

So let’s start coding. The create-react-native-app package will set up the project for you. First, run the following command to install it globally: yarn global add create-react-native-app

Then, go to your “loginApp” folder and execute the command we’ve just installed by running create-react-native-app mobile. Again, we decided to use “mobile” as the name of the frontend app, but it’s up to you. 

This step is optional since your app’s style is up to you. Inside your new “mobile” folder, create a new folder called “public” and another one named “images” inside it. That last folder will contain the background image for the app. We downloaded the one we will be using from here and we had to rotate it to achieve a portrait orientation.

Then, create another folder inside “mobile” called “screens”. Inside it, create two files, “index.js” and “AuthScreen.js”. The first one will be the one that exports the screen like this:

index.js

Link: script

The second one will contain our unique screen, where the user can get authenticated. It will use fetch to send the user requests to the backend and return a message according to what it receives. There will be one request sending user input and creating the signup or login, and another one requesting the private resource. Once the user logs in, the resource request will automatically be triggered.

We will be using a single screen for the entire app to make it simpler, but you can try a different approach if you want. Copy its content to your AuthScreen.js file:

AuthScreen.js

Link: script

Finally, we need to import that screen to our App.js file and render it as follows:

App.js

Link: script

And that’s all. Just run npm start on the mobile directory and the frontend app will start running on port 3000. Then, proceed to use a virtual or real device to test how it communicates with the backend. You should see something like this:

Let’s test if it works:

Let’s test error messages by creating a user with the same email and trying to log in with the wrong credentials:

It works perfectly! After you finish this guide, your directory should look like this:

You have reached the end of this guide. Now you have a React Native frontend login application working with a Node.js backend. Congratulations!

Challenge: Develop tests for your React Native App 

We encourage you to test your application on both sides to ensure it is working as expected. Testing is an essential part of any development process and you should start incorporating it into your projects from the beginning. 

You can start with the frontend side, testing components in the way a user would use them. We recommend using React Testing Library. If you haven’t heard about it, you can read the article we have written about it.

Final thoughts on React Native with Node.js backend

To sum up, both React Native and Node.js are powerful tools that share a single programming language: JavaScript. With their separate advantages combined, you have built an incredibly strong mobile application. We have proven how straightforward it is to get started with any of them, even if you have not seen it before. We hope this guide gives you a starting point to start creating mobile apps with more functionalities.

GitHub

The post Build a React Native Login app with Node.js Backend appeared first on asap developers.

Python vs Node.js: Choosing a language for back-end development is very important, as you will be using it to create your server-side applications. The server-side is the engine that makes your application run; it will determine the performance and scalability of your application, in addition to other very important factors.

When it comes to building a project, there isn’t a one-fits-all solution, but we hope to provide you with enough information to help you make a decision on which software will adapt better to your needs. So today, we’ll compare Python vs Node.js in order to give you a better idea of what both are capable of and what kind of projects they work best for.

Python is an object-oriented high-level language and it can be used for general purpose programming language.Node.js is an environment that allows JavaScript code to run on the server side and not on a browser. It is based on Chrome’s V8 Engine, which runs on Google Chrome.

Now let’s talk a closer look at the various aspects to consider when comparing Python vs Node.js:

Performance

Performance defines the speed of your back-end server responses, and that will depend, of course, on how fast your code is executed. Many studies have proven that Node.js is faster than Python. That’s because Node.js is based on Chrome’s V8 which is a very powerful and fast engine.

This means Node.js is an ideal solution for developing messaging or chat applications. It is also useful for developing heavy-load applications and e-commerce sites that depend on processing speed.

Usability

When it comes to comparing the amount of code that developers need to write, Python requires fewer lines of code. It is also an ideal solution for large projects due to its clean code standards, which Node.js lacks.

On the other hand, Node.js is pure JavaScript, meaning it remains basic and simple for developers to learn. It can also be used both on front-end and back-end, meaning developers don’t need to learn an entire new language with its own paradigms in order to program.

Versatility

Python is one of the most versatile programming languages suited for web development, artificial intelligence, machine learning, data analysis, etc. Although JavaScript is also good for web development, it is not well-suited for other future trends.

Error handling

Handling errors is one of the biggest activities that developers need to deal with. Both Node.js and Python deal well with throwing and catching exceptions, that is, errors occurring during code execution. Python takes significantly less time and debugging in Python is also fairly easy compared to Node.js. So, when it comes to error handling and debugging, Python trumps Node.js.

Conclusion of Python vs Node.js

We can’t say one language is better than the other. The reality is that you should think carefully about what you are trying to achieve, what your application needs to support and if either of these languages — or any other language — can adapt to your needs.

Both Node.js and Python have big communities so, if any issue arises, you can easily search for a solution to your problem or simply ask the community.

The post Python vs Node.js appeared first on asap developers.