Android function in javascript

12 часов в шкуре Android разработчика глазами JS разработчика

Все началось с Kotlin. Случайно попалась статья про новый язык, что на нем можно писать под Android. Соприкоснувшись с темой, узнал что изначально приложения под Android пишутся на JAVA. Решил узнать на сколько трудоемко писать приложения под Android, в чем преимущества платформы на практике. Ведь по сути приложения JS и приложения Android выполняют одну и туже функцию. Заодно решил провести эксперимент. Что можно сделать за 12 часов, не зная что такое JAVA и тонкости разработки под Android, используя как помощник только Google. Пришла идея, которую развил в постановку задачи.

Постановка задачи

Взять из внешнего сервиса список всех Аэропортов мира и по коду Аэропорта получить от внешнего сервиса он-лайн табло с информацией о статусах рейсов. В 100% приложений, которые лежат в google play и реализуют такую функцию, нужно проходить цепочку действий, искать внутри приложения. Я лично, не нашел агрегатор, который позволял бы на первой странице ввести любой Аэропорт и получить его он-лайн табло. Идея и приложение само по себе простое, но это функция которой пользуется любой кто совершает перелет. Доступ к такой информации должен быть мгновенным.

Нашел потрясающий сервис, который открывает много возможности в части разработки под Авиацию. developer.flightstats.com Зарегистрировался получил на месяц бесплатный аккаунт.

Действовал интуитивно, полагаясь на свой опыт разработки в JavaScript. Набросал скетчи экранов в Photoshop. Составил требования к приложению.

Форма «Поиск»

Форма «Результат»

• Вывод данных в виде таблицы
• Сортировка по времени Прилет\Вылет

Разработка

Дальше был Я, Google и Android Studio.

Из опыта понимаю что код нужно организовывать. Интуитивно определил структуру проекта. Выделил следующие группы(Models, Stores, Views, Fields, API, Adapters) Двигало мной в этот момент бессознательное, вернее опыт. Дальше начал развлекаться с Layouts. Android Studio очень интуитивный редактор, это одна из причин которая подвигла попробовать написать Android приложение. Если kind of intellij idea – значит все комфортно. Плюс редактор лежит в бесплатном доступе, никаких ограничений, развивается и обновляется регулярно. Layouts сложились на раз два. Ни одного глюка за весь период работы, все на своих местах.

Момент который меня насторожил в самом начале, в 90% источниках, поиск и работа ведется по ID компонента. Обще принято, работа с ID это bad practice, в Android оказалось нормальной практикой. Погуглил, одно из лекарств DataBinding, отличная вещь, позволяет уйти от findViewById. Но, принцип в начальной стадии и еще год назад связь работала в одну сторону. Звучит странно, DataBinding но в одну сторону. Нужно было писать свою реализацию чтобы DataBinding был полноценный. Опираясь на реализации в JS, удивил концепт, который на текущий момент предлагает Data Binding Library(можно увидеть в большинстве случаев в сети), в ViewModel размещается логика по обработке handlers от визуальных компонент, которые в свою очередь могут иметь прямой доступ к данным которые лежат в ViewModel. С виду какой то гибрид контроллера и ViewModel.

Далее пошли вопросы коммуникации, то что нагуглилось с первого раза повергло в шок. Чтобы сделать обычный AJAX запрос нужно было тянуть строк 70 кода. Создавать фоновый процесс и там уже творить магию соединения, а потом через буфер собирать ответ. «Не может быть, чтобы было так сложно!» и продолжил поиск. В одном из результатов попалась статья про Retrofit2. С Retrofit стало все веселее и в целом жить можно в части коммуникаций. Определился с интерфейсами взаимодействия с сервером и начал сопрягать данные с визуальными компонентами.

С фильтром spinner(он же combobox) пришлось повозиться, возможно из-за неопытности. По ходу возникала куча вопросов от конвертации одного типа в другой до как реализован ООП в JAVA, но все элементарно находилось в stack overflow с ответами и примерами, плюс интуиция. В целом все шло как по маслу, кроме некоторых моментов. Чего не ожидал, что получу головную боль с датой. Почему то JAVA(или может быть это у меня так вышло) по defaul выдавала все в UTC.

В целом каких то совсем непреодолимых моментов не было из-за которых возникал полный стопор. Что не понял(зачем это сделали как dafault поведение?!) При изменении ориентации экрана(или конфигурации), ваша View которая присутствует на экране уничтожается и в новом повернутом экране заново пересоздается(фоном идет масштабная работа). Что порождает головную боль если у Вас в классе View(она же «Активность») есть динамические данные, они просто теряются при уничтожении View и с этим что-то надо делать. Дайте эту возможность, но опционально, для тех кто хочет подменять экраны при повороте. Интересно услышать мнение Android разработчика по этому поводу, возможно я не вижу всей картинки в целом.

Awesome

Потрясла производительность интерфейсов при большой нагрузке. Для теста сделал 8 spinner, в каждый забросил 4000 записей(в каждой записи еще набор свойств) и приложение даже не крякнуло. При такой ситуации, JS приложение напряглось бы, и если бы еще нужно было отображать все записи сразу, и иметь доступ работы с ними, то большая вероятность поймать зависание экрана или вообще «Опаньки». Пришлось бы тащить буферизацию вывода или решать как то алгоритмически. Но есть задачи когда нужен весь объем и сразу.

Многопоточность и фоновые процессы, на лету. Что в JS нужно можно делать с помощью webworkers, но там свои трудности, которые при разработке под Android решаются на раз, два. Причем фоном можно тягать действительно весомые объемы. Это огромное value для разработки off line приложений с сложными инженерными расчетами.

Приложение под браузер имеет свой потолок по производительности, если речь идет о высоко нагруженных интерфейсах(вывод одновременно большого объема данных) или когда фоном нужно делать объемные вычисления. Здесь перед Android приложениями снимаю шляпу. Но если Вам нужно делать что-то средне статистическое, то javascript возьмет свое скоростью разработки.

Резюме

Признаю, трудоемко писать под Android и требует в разы больше времени чем написание приложений на JS, но google интенсивно развивает и наращивает платформу. Неделя сидения за книгами и теорией Android разработки скорее всего убило бы идею попробовать сделать Android приложение и не дала бы навыков и опыта полученного за эти 12 часов. Реально столкнуться с проблемами и увидеть мир изнутри, получить первую оценку возможностей Android приложений и в будущем, столкнувшись с задачами трудно реализуемыми в JS, иметь в запасе знания куда можно еще бросить свой взгляд. Практика — быстрый путь к достижению навыков и опыта.

Что получилось: Android-приложение для просмотра он-лайн табло любого аэропорта мира.

Источник

JavaScript to APK. Подводные камни разработки под Android для тех, кого задолбал PhoneGap. Построение мостов из Java в JavaScript

Я люблю игры на JavaScript и стараюсь сделать их код пуленепробиваемыми для портирования на все платформы. Полгода назад я уже писал о сборке Android приложений и сегодня хотел бы раскрыть тему более подробно.

Сразу предупрежу, что мне пришлось отказаться от PhoneGap, т.к. опыт использования его в двух проектах меня огорчил. Он отлично справляется с «Hello World» приложениями, но при конвейерной сборке всего подряд всплывают нюансы.

Почему PhoneGap не пошел:
1. Он изначально пустой. Постоянно приходится подключать все новые и новые модули.
2. Многие модули написаны криво. Они либо берут много лишнего, либо ведут себя неожиданно. Например, из двух модулей под Android для отправки SMS, один не работал, второй — отправлял true при любых условиях.
3. Не решены элементарные вещи, вроде получения EMEI телефона. Нужно постоянно допиливать.

Я так и не понял сути PhoneGap. Изначально ожидал одну кнопку «сделать хорошо», а не деле он ничего не делает. Под каждую платформу мне все равно надо ставить SDK. Под каждую задачу — искать и ставить модуль. Сами модули тоже ограничены. Они могут делать что-то только под часть платформ, а если нужно под другие — то приходится снова искать модули, которые смогу сделать это на других девайсах. Много мусора и ненужных вещей, а ведь хочется собирать билды с минимумом затрат. Все эти факторы заставляют писать нативно. И вот тут начинают вылезать подводные камни.

Почему CocoonJS не пошел:
С CocoonJS работал мало, поэтому никаких особых вопросов не возникло. Билды с canvas действительно работают быстрее. Но в общем — смысла работать с CocoonJS не увидел, т.к. он платный.

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

Перейдем к сути

Для начала начнем с основы — WebView с запущенной HTML страничкой на весь экран. В onCreate MainActivity пишем:

Все спорные ситуации будем решать в Java. Помните, пишите вы для Bada или SmartTV — всегда есть какой-то стандартный функционал, который позволяет кидать мосты в JavaScript. В нашем случае для Android`а мы кинули экземпляр класса WebAppInterface, а сам класс будет выглядеть так:

Подводный камень: Работа с такими мостами обычно может быть асинхронна или непредсказуема и полна сюрпризов.

Если у вас возникла необходимость из Java сообщить JavaScript`у какое-либо событие на ровном месте, самый простой способ достучаться до него — это стучать в URL:

Подводный камень: В Android`ах > 4 от Samsung`а при тач-событии DOM элементы могут подсвечиваться синим цветом.

Обратите внимание на этот нюанс. Типичная «защита» вам не поможет:

Чтобы обойти багу, надо добавить:

Но это не всегда решает проблему. Возможно, на проблему влияет сама верстка. Например, возьмем два приложения: Судоку и Тест. В судоку доска сверстана таблицей, и для таблицы такое решение помогло. В Тесте же кнопки это. Вроде бы все по стандартам семантики HTML5, и все должно быть более чем прекрасно, но на деле приходиться добивать таким CSS комбо:

Так же заметил, что синее выделение не появляется, если тач-событие пришлось точно на текст кнопки (текст при этом должен быть очень большим).

Источник

How to Build an Android App with JavaScript

Last Updated on April 23, 2021 by Shyam Purkayastha Leave a Comment

Table of Contents

Build an Android App with JavaScript for Generating QR Codes

We are back with yet another Android app demo. This time, we take a different approach to building an Android app with JavaScript.

Being the de-facto programming language for the web, JavaScript has enjoyed tremendous growth over the years, especially in frontend browser-based applications. Thanks to the advances in runtime environments and the tooling, it is now possible to take JavaScript off the browser and use it in other ways. In this blog post, we show you how to build an Android app using JavaScript and related web technologies, without using any native Java or Kotlin based environments. We also show you how to integrate an API with such Android applications by leveraging the power of the RapidAPI‘s API marketplace.

Can we use JavaScript for Android?

The Android ecosystem supports the concept of hybrid apps, which is a wrapper over the native platform. It mimics the UI, UX, and all kinds of hardware and network interactions, just like how you would use a native Android app.

Many frameworks offer a hybrid wrapper for Android. The Ionic framework is the most popular among the developer community. It leverages the Cordova WebView plugin, which is a browser like skin over the native Android UI.

Using the Ionic framework for Building Android Apps with Javascript

The ionic framework works with Angular, React as well as vanilla JavaScript or Vue, to bind the application. Ionic 5 is the latest version of the framework. The support for React, JavaScript, and Vue was added in version 4. However, JavaScript and Vue support is still not stable enough to build production-grade apps. Therefore, as of this writing, it is recommended to use Angular with Ionic 5.

Using the TypeScript language, a superset of JavaScript, you can build an Ionic application on top of Angular, which runs as a hybrid Android app using the WebView plugin.

The Ionic framework acts as the glue between the Android platform, Angular, and Cordova. The resulting hybrid app feels just as good as a native app. A regular user would never be able to make out the difference.

The only downside is these apps is that they are not performant like native apps. Moreover, these apps cannot command fine-grained control over the underlying hardware in case of a need for hardware boosted performance.

Building the UI Layer for Ionic Hybrid App

The Ionic framework offers a set of UI components that you can use to build the app UI.

Like you use HTML tags to build the browser UI, Ionic offers high-level custom tags to build the app’s UI elements.

Here is how you can piece together an app screen to display a piece of small information on a card.

Using the tag, you can build this screen as follows.

In this way, Ionic provides a complete library of UI specific custom elements to build UI screens for apps.

Making API Calls from Ionic Hybrid App

If you are using Angular as the base framework, then making an API call is easy.

Angular provides an HTTP client library for TypeScript that leverages the HTTPClient class.

This class provides all the HTTP methods, including the most common ones, post() and get() to invoke API requests from an URL. Here is how you can define a module to make a quick API call using HTTPClient and a few helper classes.

By importing this module in an Angular app, you can call the function get( ) . It will return the HTML body of the example.com domain as a text blob.

How to Build an Android App with JavaScript (for QR Code Generation)

QR codes get a lot of love from people from around the world. Everybody loves to scan a QR code. Companies and brands want to use them to lead customers to their website URLs.

So how about building an Android app that lets you instantly generate a QR code from an URL. Before you even wonder about the nitty-gritty details of generating the QR code, let us remind you that the RapidAPI’s API marketplace has many APIs to help you with that.

Choosing a QR Code Generation API

Head over to the RapidAPI homepage to search for QR code APIs.

You can find a lot of QR code APIs listed on the marketplace.

There are wide varieties of API choices to generate customized QR codes, with images, logos, and color combinations along with various options to access the generated code.

Let’s pick a no-frills QR code generator for the Android app that we want to build.

We have done a random pick to choose the QRickit QR Code QReator API. It is a simple, easy to use API without any customization options.

Follow the steps below to get started with this API.

How to Get Access to the API

1. Sign up for RapidAPI Account

To access any API, you’ll first have to sign up for a free RapidAPI developer account. With this account, you get a universal API Key to access all APIs hosted in RapidAPI.

RapidAPI is the world’s largest API marketplace, with over 10,000 APIs and a community of over 1,000,000 developers. Our goal is to help developers find and connect to APIs to help them build amazing apps.

2. Access the QRickit QR Code QReator API

Once signed in, log in to your RapidAPI account and visit the API console here .

3. Subscribe to the QRickit API

Once inside the API console, click on the “Pricing” tab to access the pricing plan.

The QRickit QR Code QReator API offers a freemium plan that lets you make 100 API calls in a month.

Subscribe to this plan, and you are all set to try it out.

4. Test the QRickit API

If you go back to the “Endpoints” tab, you can access the API endpoints and the parameters.

Key in the domain name “example.com” in the text box next to the parameter ‘ d ’. Trigger the API. If you see a status code of 200, then the API call has succeeded.

The actual QR code image is sent as a blob response by the API, which may not be visible on the browser. However, when you build the Android app, you will capture it and display it as an image.

Let’s create the app with Ionic Framework

We will now write the code for the Android app. To build this app using the Ionic framework, you need to set up some tooling.

First up, here are a few prerequisites for platforms and SDKs that must be satisfied before proceeding further.

Prerequisites

1. 1. Install Android Studio : This is the Android development environment. You must have the Android Studio version 3.0 or above, installed on your development computer.
   2. Install Java SDK : All Android applications leverage the Java platform. You need to install the JDK from the official Oracle website .
   3. Install Android SDK : This is the Android platform SDK. You must have the latest Android SDK (preferably Android 10.0) installed through the Android Studio.
   4. Install Node.js and NPM: NPM is the package management tool for all Angular and Ionic packages as well as the TypeScript libraries. It is available as part of the Node.js package. You can install Node.js from the official page .
   5. Install Angular: Follow this official guide to set up your local Angular environment.
   6. Install Ionic : Install the ionic CLI from this official Ionic docs . Only follow the section until the installation of the Ionic CLI.

Note: The code presented in this post has been tested with the following versions of the platforms/SDKs on Windows 10.

Android Studio: 3.5.3

Android SDK: Android 10.0

Angular CLI: 9.1.11

You also need to make sure that the system paths for Android SDK, Java, Node, NPM, Angular CLI, and Ionic CLI are correctly set to invoke them directly.

Let’s start the development now. Follow along with the steps below to set up a new Ionic project and build the Android app’s code.

Before starting, make sure that you have a command-line terminal running and a code editor open.

Step 1: Create a new Ionic project

On the terminal, create a new project folder and then, while inside the folder, create a new Ionic project using the Ionic CLI.

ionic start qrcode blank

This will create a new blank project called “qrcode.” It automatically creates the project main folder named “qrcode” and the subfolders within.

Step 2: Add a new HTTP service to the project

For triggering the API calls from the app to the QRickit API, we define a new service. Invoke the following command using the Ionic CLI.

ionic generate service HTTP

A service is an add-on module, used as a library across the code. It performs a well-defined responsibility. In this case, it is the invocation API calls. You will define the logic inside this module in a little while.

Step 3: Add the UI and interaction code

This app only has one screen. It displays a text box to accept the domain name and a submit button to trigger QRickit API call. Below the button is a display area that shows the generated QR code.

Open the file home.page.html under qrcode/src/app/home/ to define the UI as follows. You can overwrite the default content generated as part of the project creation.

and defines the top level wrappers for housing the UI elements.

The UI is structured in a typical HTML fashion using

Reader Interactions

Leave a Reply

Primary Sidebar

Build amazing apps, faster.

Discover, evaluate, and integrate with any API. RapidAPI is the world’s largest API Hub with over 2,000,000 developers and 20,000 APIs.

Источник