Webvaeb node js android studio

Запуск NodeJS-приложения на Android

Без сомнения, вам понравится запускать NodeJS на своем Android-устройстве. Благодаря эмулятору терминала и Linux-окружения для Android, разработка веб-приложений на смартфоне перестанет быть для вас проблемой.

Termux

Termux — это бесплатное приложение, которое можно установить прямо из магазина Google Play. Требуется версия Android 5.0 или более поздняя. Не требует root-прав.
При открытии Termux вас приветствует интерфейс командной строки. Рекомендуется проверить наличие обновлений сразу после установки Termux. Введите следующую команду и нажмите Enter:

Termux поставляется в минимальной базовой комплектации, так что вы должны установить coreutils для полноценного использования команд командной строки, таких как mv, ls и др.

Termux хранит данные в собственном хранилище данных, т.е. папка $HOME находится внутри частной области Termux, как у обычного Android приложения. Удаление Termux вызовет потерю этих данных. Если вы собираетесь хранить там важные файлы, то используйте termux-setup-storage, чтобы обеспечить сохранение данных во внешнем хранилище (например на SD-карте).

Итак, давайте создадим папку для нашего приложения и перейдем в этот каталог:

Клавиатура

В этот момент вы, скорее всего, почувствуете некоторые проблемы при работе в консоли со стандартной клавиатурой. Чтобы обойти их, я установил хакерскую клавиатуру из Google play. Это сенсорная клавиатура, которая имеет все необходимое для написания кода — Esc, Tab и клавиши со стрелками.

Для написания кода нам понадобится любой текстовый редактор, доступный в консоли. Вы можете установить Emacs или Vim, но для простоты можно использовать nano. Установим его:

Создадим файл app.js и откроем его в редакторе:

Напишем какой-нибудь простой NodeJS-код для проверки:

Чтобы выйти из nano, нужно нажать Ctrl+X, написать ‘yes’ и нажать Enter.

NodeJS

Теперь самое время установить NodeJS. Сделать это очень просто:

Теперь мы можем наконец запустить наш скрипт:

Express

Вместе с NodeJS нам доступен пакетный менеджер npm. Давайте воспользуемся им:

Откроем app.js и напишем/скопи-пастим туда следующий код:

Это должно вывести в консоль номер порта по которому отвечает сервер. Если вы откроете http://localhost:8080/ в браузере, то увидите на странице следующий текст:

Nodemon

Чтобы избежать перезагрузки сервера вручную каждый раз при изменении файла app.js мы можем установить nodemon. Nodemon — это утилита, которая будет отслеживать изменения в вашем коде и автоматически перезапустить сервер.

Теперь вы можете запустить сервер с помощью команды nodemon вместо node:

Даже с хакерской клавиатурой писать код на сенсорном экране не очень удобно. Скорее всего, вы пишите свой код в гораздо более удобных местах и храните его в репозитории. Установим git:

Теперь вы можете запускать git команды вроде git push, git pull и т.д. без каких-либо ошибок.

MongoDB

К сожалению, у меня не получилось запустить MongoDB-сервер на Android. В качестве альтернативы можно использовать облачные сервисы, типа MongoLab или довольствоваться чем-то вроде NeDB.

Источник

Getting Started: Android native apps¶

Download the library¶

The Android shared libraries are distributed in a zip file, which you can download from the core library release page.

The zip file contains Android binaries for the armabi-v7a , x86 , arm64-v8a and x86_64 architectures.

Creating your First Project¶

The following steps will guide you through creating an Android Studio project that uses the library and is built with Gradle. The complete project can also be downloaded from the samples repo.

This sample runs the Node.js engine in a background thread to start an HTTP server on port 3000 and return the process.versions value. The app’s Main Activity UI has a button to query the server and show the server’s response. Alternatively, it’s also possible to access the server from a browser running on a different device connected to the same local network.

Android SDK Requirements¶

When you build your project, Gradle will automatically try to detect any missing dependencies and prompt you to install them from within the Android Studio event log. Here’s the list of pre-requisites in case you want to download them from the SDK Manager:

• API Level greater or equal to Marshmallow (API Level 23)
• CMake
• Android SDK Platform-Tools greater or equal to Marshmallow (API Level 23)
• Android SDK Build-Tools greater or equal to Marshmallow (API Level 23)
• NDK version 15 or greater

Create an Android Studio Project¶

Using the Android Studio’s New Project wizard, create a new Project with the following settings, by the order the options appear in screens:

1. Include C++ support checked
2. Phone and Tablet with Minimum SDK to API 21: Android 5.0 (Lollipop)
3. Empty activity selected
4. Left the defaults, which were:
   • Activity Name: MainActivity
   • Generate Layout File checked
   • Layout Name: activity_main
   • Backwards Compatibility (AppCompat) checked
5. Left the defaults, which were:
   • C++ Standard: Toolchain Default
   • Exceptions Support (-fexceptions) checked off
   • Runtime TYpe Information Support (-frtti) checked off
6. Finish

Copy libnode’s header files¶

To access libnode’s Start() entrypoint, the libnode’s header files are required.

Create the libnode/ folder inside the project’s app/ folder.

In the downloaded zip file, you can find the header files inside the include/ path. Copy this folder to app/libnode/include . If it’s been done correctly you’ll end with the following path for the node.h header file: app/libnode/include/node/node.h

In app/CMakeLists.txt add the following line to add libnode’s header files to the CMake include paths:

Add native JNI function to start node.js¶

Edit app/src/main/cpp/native-lib.cpp to add the required include files:

Convert the existing stringFromJNI function into the startNodeWithArguments function, which takes a Java String array, converts it into a libuv friendly format and calls node::Start . The function’s signature has to be adapted to the chosen organization/application name. Use the already existing stringFromJNI function as a guide. In this sample’s case, it meant changing from:

The final native-lib.cpp looks like this:

Call startNodeWithArguments from Java¶

A few changes are required in the application’s main file MainActivity.java .

Load libnode.so:¶

Instruct Java to load the libnode.so library by adding System.loadLibrary(«node»); to MainActivity.java after System.loadLibrary(«native-lib»); .

The prefix lib and the suffix .so in libnode.so are omitted.

Remove references to stringFromJNI ¶

Remove the references to the stringFromJNI function (which we have replaced in native-lib.cpp ), by deleting the following snippets:

Start a background thread to run startNodeWithArguments ¶

The app uses a background thread to run the Node.js engine.

Currently, only a single instance of the Node.js runtime can be started within an application. Restarting the engine after it has finished running is also not supported.

The node code is a simple HTTP server on port 3000 that returns process.versions . For semplicity, the node code is embedded in the MainActivity.java file:

Add a reference to the startNodeWithArguments function, the Java signature is public native Integer startNodeWithArguments(String[] arguments); .

The MainActivity class looks like this at this point:

Specify required permissions in the manifest¶

Since the app runs an HTTP server, it requires the right permissions in app/src/main/AndroidManifest.xml . Add the following line under the tag:

Add libnode.so to the project¶

Copy the library files¶

In the Android Studio Project, there should be a libnode/ folder inside the project’s app/ folder, created in a previous instruction. Copy the bin/ folder from inside the downloaded zip file to app/libnode/bin . If it’s been done correctly you’ll end with the following paths for the binaries:

• app/libnode/bin/arm64-v8a/libnode.so
• app/libnode/bin/armeabi-v7a/libnode.so
• app/libnode/bin/x86/libnode.so
• app/libnode/bin/x86_64/libnode.so

Configure CMake¶

In app/CMakeLists.txt specify the native shared library to import and its location:

Add libnode to the already existing target_link_libraries :

Configure the app’s gradle settings¶

In app/build.gradle , some changes have to be made to correctly build and package the application.

We have to instruct gradle to only package native code for the supported architectures, by adding an ndk clause inside defaultConfig :

The shared library was built using the libC++ STL, therefore the ANDROID_STL=c++_shared definition has to be passed inside the cmake clause in defaultConfig with arguments «-DANDROID_STL=c++_shared» :

Configure gradle to override its default sourceSets to include the libnode.so folder path, in the android section:

Add simple UI for testing¶

At this point, it’s already possible to run the app on an Android device and access the HTTP server from any device connected to the same local network. If the Android device’s IP is 192.168.1.100 point the browser at http://192.168.1.100:3000/ .

However, the sample also comes with the UI to query the local HTTP server and show the response.

Источник

Creating a realtime chat app with android , NodeJs and Socket.io

WebSockets are very beautiful tools that allows us to establish a realtime communication in modern web applications. In fact this mechanism is so powerfull and it’s used to build different kind of apps like realtime chat or notification system etc ..

In this article we will show you how to build a realtime chat app using android nodeJs and Socket.io

Getting started

Our chat app is divded into 2 part :

1- Server side : a node js server with the implementation of socket.io for server

2- Client side : creating the android app and implementing socket.io for client

Our NodeJs Server

well , to make things clear our project architecture will be composed of 2 files :
package.json which will handle all the depandencies for our node js app and index.js which will be our main server .

After creating the two files , we open the commande line under our project
directory and execute this command

now in our index.js file we will build our server and make all the configurations so that it will look like this

to make sure that our server is runing go to the command line under our project directory and execute this command

NOTE: using node command we can run any server created with node environment but the problem is that we have to run the same commande every time we update our index.js file , so to make things more simple we can use nodemon command which will automatically restart our server every time we make changes

so to install nodemon go to your command line and run

to make sure that our project is running we should see this log in our console

now comes the best part !!

we will try now to implement some socket.io methods in our server to handle all the events of our chat app including users connection states and messages .

in our index.js file we add the first implementation that will detect if we have a user connected to our server

Actually socket.io mechanism is based on listening and firing events , in this first implementation that we have done the (on) method which takes two parameters (‘eventname’,callback) defines a listener to an event called connection and this event will be fired from the client side so that node js can handle it , after that we defined a method that will listen to an emitted event called ‘join’ and will log the name of the user who has join the chat in the console .

Now when node js detect a user it fires an event to the client side called ‘userjoinedthechat’ using the method emit , note that socket.broadcast.emit will send the event to every single user connected to the server except the sender .

if we want to send the message to all users including the sender we just have to use io.emit() instead of socket.emit().

Now to handle messages we add these few lines and we can see that we have added extra argument to the callback function which are the user nickname and the message content , actually these informations will be sent from the client side when firing the event ‘messagedetection’

And finally when the user disconnect from the client side , the event will be handled by this implementation

Now that our server is ready the index.js file should look like this

Our Android app (Socket client)

To start open android studio and create a new projet with an empty activity , after that open app build.gradle file and add these dependencies then synchronize your project.

Now about these lines :

the first one is the recycler view that we will use to display the list of our messages and the second one is the library that will provid us with the implementation of socket.io for the client side so that we can fire or listen to events .

don’t forget to enable INTERNET permission in you manifest.xml

In activity_main.xml we will add an EditText for the user to put his nickname and a button that allows him to enter the chatbox

so that the preview will look like this

now your MainActivity.java should look like this

Now create a second empty activity called ChatBoxActivity and in activity_chat_box.xml add these lines

your preview should look like this

Now before implementing the socket client we should create an adapter to handle and display our messages for that we need to create a file called item.xml and a java class called message which have two simple string properties (nickname,message) .

In our project directory along side with activites create a file called Message.java :

now create a file called item.xml under layout directory and add these lines

create a file called ChatBoxAdapter.java and put these lines

now with everything setup we can implement the socket client in our ChatBoxActivity.java so this is how we are going to proceed :

1.Get the nickname of the user from the intent extra

2.call and implement all the methods relative to recycler view including the adapter instanciation

3.declare and define the host for socket client to make connection with the server

4.handle all events fired from the server

5.emit events when user connect , disconnect or send a message

but before that let’s check if everything is ok or not so in our ChatBoxActivity we will declare the socket object and add the socket connection in the method onCreate so that when the activity is called the socket client will directly fire the event connection

now run your emulator and enter a nickname in the first activity then click go to chat you will see a log in your server console that indicates that a user has successfully made a connection with the server and we can see that the listener for the fired event join in our server is working properly so that it logs the name of the user connected

now with everything working , we should not forget that when our server handle an event it broadcast other costum events as well and so those fired events should be handled in the client side , for that we will make the first listener for the event «userjoinedthechat» which is a custom event fired when the server handle the event «join».

in our ChatBoxActivity we will add these lines

now we run 2 emulator in the same time and we enter two different nicknames from both sides and as we can see that one of the two emulator indicated that a user has successfully joined the chat

now comes the best part of our app which is the chat messages :

to display the messages we have to proceed this way

1.add onclickListener to the button send and grab the message content from the EditText after that emit the event «messagedetection» using emit() method along side with the nickname of the sender and the message content

2.the event will be handled by the server and broadcasted to all users

3.adding a socket listener in android to listen for the event «message» fired by the server

4.extract the nickname and the message from the extra data and make a new instance of the object Message

5.adding the instance to the ArrayList of messages and notify the adapter to update the recycler view

But before that let’s setup our recyler view , Adapter , message textfield and the button send.

Add the declarations below in ChatBoxActivity

in the method onCreate add these lines

Now in your ChatBoxActivity the button action should look like this

and the listener should look like this

as we can see in the screenshot below everything is working properly :)) and the messages are displaying from both sides , note that we can connect with many other users but we just have to run other emulators and enter nicknames to join the chatbox

before ending this tutorial we have to make our last functionnality which detects if the user has disconnected from the chatbox .

In our ChatBoxActivity override the method onDestroy() and add these lines

and for the listener

finally our ChatBoxActivity will look like this

Conclusion

In this exemple we had a great look at the usage of socket.io along side with node js and android , we tried as well to explain some basics and understand the mechanism of socket.io and how to establish a bi-directional communications between a client and a server , note that there are other tools in socket.io like rooms and namespaces which could be very helpfull to make beautifull web and mobile apps .

find in these related links the two projects :

Источник