Chia sẻ kiến thức IT ứng dụng: AI, Backend, Frontend, Full Stack, DevOps & Cloud, and More.

Showing posts with label Mobile. Show all posts
Showing posts with label Mobile. Show all posts

Sunday, September 1, 2019

Getting started with React Native and Redux

This article is a simple step-by-step of how to start a project with React Native and Redux.
Source Code (Branch init)

Create-react-native-app

Following the path of its excellent web brother, I recommend the use of the create-react-native-app to bootstrap your new project. This one configures all the build tools necessary to create a React Native app, and gives you some excellent Expo integrations.
First thing to do is to install CLI tool with
npm install -g create-react-native-app
Now, run the following command with the name you want to give to your project
react-native init my_awesome_app
Go forward to the new folder, and run
react-native run-android

Friday, March 1, 2019

Announcing the Ionic React Beta

How to Get Started with React & Ionic?

Getting started is quite simple. Begin first with create-react-app, because we want you to use Ionic with React in the most familiar way. We also recommend using TypeScript in your app, something we recently wrote about on our blog if you need tips. While this is not required, we mention it because Ionic React ships with TypeScript type definitions, and it makes for an excellent developer experience.
 npx create-react-app my-ionic-app --typescript
 cd my-ionic-app

Sunday, January 7, 2018

Unstructured Supplementary Service Data (USSD)

Unstructured Supplementary Service Data (USSD), sometimes referred to as "Quick Codes" or "Feature codes", is a communications protocol used by GSM cellular telephones to communicate with the mobile network operator's computers. USSD can be used for WAPbrowsing, prepaid callback service, mobile-money services, location-based content services, menu-based information services, and as part of configuring the phone on the network.[1]
USSD messages are up to 182 alphanumeric characters long. Unlike Short Message Service (SMS) messages, USSD messages create a real-time connection during a USSD session. The connection remains open, allowing a two-way exchange of a sequence of data. This makes USSD more responsive than services that use SMS.[1]  (extract from Unstructured Supplementary Service Data).

Saturday, January 6, 2018

Install and build your first React Native app

React Native lets you build mobile apps using only JavaScript. With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React. React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With Hot Reloading, you can even run new code while retaining your application state

Wednesday, December 20, 2017

What are five differences between React.js and React Native?

Reactjs is front end library developed by Facebook. It's used for handling view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and it has strong foundation and large community behind it.
React Nativeis a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use ReactJS to build your components, and implements ReactJS under the hood.

Sunday, June 11, 2017

Saturday, February 25, 2017

Web Apps in WebView

To deliver a web application or some web pages as a part of an android client application, you can do it using WebView.
The WebView class is an extension of Android's View class that allows you to display web pages as a part of your activity layout. It does not include web browser, navigation controls or an address bar,.. just web page content.
WebView can be used to display static document that's hosted online.
WebView can also be used to build dynamic data for users.

How to get started with WebView ? How to do some additional things, such as handle page navigation and bind JavaScript from your web page to client-side code in your Android application.

Wednesday, February 22, 2017

Android and Architecture

Today we're announcing a guide to Android app architecture along with a preview of Architecture Components. Rather than reinventing the wheel, we're also recognizing the work done by popular Android libraries.

Tuesday, February 21, 2017

Consuming a RESTful Web Service with Spring for Android

This Getting Started guide walks you through the process of building an application that uses Spring for Android's RestTemplate to consume a Spring MVC-based RESTful web service.

Compile và chạy ứng dụng rest server

You will build an Android client that consumes a Spring-based RESTful web service. Specifically, the client will consume the service created in Building a RESTful Web Servce.
Chạy spring boot rest: java -jar gs-rest-service-0.1.0.jar
The Android client will be accessed through an Android emulator, and will consume the service accepting requests at:
http://192.168.1.3:8080/greeting
The service will respond with a JSON representation of a greeting:
{"id":1,"content":"Hello, World!"}
The Android client will render the ID and content into a view.

Monday, February 20, 2017

Spring for Android Showcase

Introduction

This showcase includes an Android client and a Spring MVC server. Together these illustrate the interaction of the client and server when using Spring for Android. This Android project requires set up of the Android SDK. See the main README at the root of this repository for more information about configuring your environment.

Tuesday, May 31, 2016

Appium tutorial for beginners (Android on windows 10 OR ubuntu)

What is Appium?

Appium is an open source test automation tool developed and supported by Sauce Labs to automate native and hybrid mobile apps. It is basically know as a Cross-browser Mobile Automation Tool. It uses JSON wire protocol internally to interact with iOS and Android native apps using the Selenium WebDriver.

Appium Architecture

Appium is a HTTP server written in node.js which creates and handles multiple WebDriver sessions for different platforms like iOS and Android.
Appium starts a “test case” on the device that spawns a server and listens for proxies commands from the main Appium server. It is almost same as Selenium server which perceives HTTP requests from selenium client libraries and it handles those requests in different ways depending upon the platforms. Each vendor like iOS and Android have a different way and mechanism to run a test case on the device so Appium kind of hacks in to it and run this testcase after listening commands fromAppium server.

How Appium works in iOS?

On iOS, Appium proxies command to a UIAutomation script running in Mac Instruments environment. Apple provides this application called ‘instruments’ which is used to do lot activities like profiling, controlling and building iOS apps but it also has an automation component where we can write some commands in javascript which uses UIAutomation APIs to interact with the App UI.Appium utilizes these same libraries to automate iOS Apps.
In the above figure, we can see the architecture of the Appium in context to the iOS automation. If we talk about a command life-cycle, it goes like, Selenium webdriver picks a command form the code like (Element.click) and sends it in form of JSon via http request to the Appium server.  Appium server knows the automation context like the iOS and Android and sends this command to the Instruments command server which will wait for the Instruments command client (written in node.js) to pick it up and execute it in bootstrap.js with in the iOS instruments environment. Once the command is executed the command client sends back the message to the Appium server which logs everything related to the command in its console. This cycle keeps going till the time all the commands gets executed.

How Appium works in Android?

The situation is almost similar in case of Android where Appium proxies commands to a UIAutomator test case running on the device. UIAutomator is Android’s native UI automation framework which supports running junit test cases directly in to the device from the command line.It uses java as a programming language but Appium will make it run from any of the WebDriversupported languages.
In the above diagram we can see, here we have Bootstrap.jar in place of bootstrap.js which represents out test case when compiled in java. As soon as it gets launched it spawns a TCP server. Here the TCP server resides inside the device and client is in the Appium process which is just opposite to the way it is in iOS.

Appium’s Pros and Cons:

Pros:

  • The beauty of Appium is that, all the complexities are under the hood of Appium server and for an automation developer the programming language and the whole experience would remain same irrespective of the platform he is automating (iOS or Android).
  • The other benefits of Appium is that it opens the door to cross-platform mobile testing which means the same test would work on multiple platforms.
  • Unlike other tools Appium doesn’t require you to include some extra agents in your app to make it automation friendly. It believes in the philosophy of testing the same app which we are going to submit in the app store.
  • It is developed and supported by Sauce Labs and it is getting picked really fast with in theWebDriver community for mobile automation.
  • It can automate Web, Hybrid and Native mobile applications.

Cons:

  • Scaling up is an important consideration with Continuous Integration and Appium comes across as a great tool to fulfill this expectation. The reason for this is a technical limitation, in iOS we can only run one instance on Instruments per Mac OS so we can only run our iOS scripts on one device per mac machine. So if we want to run our tests on multiple iOS devices at the same time then we would need to arrange the same number of Mac machines, which would be costly affair. But this limitation can be resolved if we execute our scripts in Sauce Lab’s mobile cloud which at present supports running scripts on multiple iOS simulators at the same time.
  • Appium uses UIAutomator for Android automation which only supports Android SDK Platform, API 16 or higher so to support the older APIs they have used another open source library called Selendroid. So I would not say it as a limitation but it is definitely an overhead on the configuration side.

To Configure Appium on Mac:

Following configurations are required to run Appium on Mac:
  • First we need to download the Appium app for Mac from this link. Once downloaded you need to move this app in to your applications folder and then you can launch it from your Mac Launchpad.
  • As Appium uses node.js internally so we would also need to install node on the mac machine, which can be downloaded from http://nodejs.org/ , it will download a node-v0.10.xx.pkg file which you need to install.
  • We also need to make sure we are using Mac OSX 10.7+
  • XCode 4.5 or higher version along with iPhone simulator SDK and Command Line Tools should be installed on the mac machine.

Set up Appium with Eclipse

Appium Basics

-----

Things to Know

Topic 3: ADB Commands

Setting Up Virtual Devices

Set up Appium with Eclipse in detail: Run The First Test

Now you are all set to write your first test script. Create a small test Program for opening a Amazon application on your device using Appium (Here, I use emulator on ubuntu 14.04).
1) Copy & paste the below code to your StartApplication class and give it a run.
package amazon;

import io.appium.java_client.android.AndroidDriver;

import java.io.File;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.remote.CapabilityType;
import org.openqa.selenium.remote.DesiredCapabilities;

public class StartApplication {


private static AndroidDriver driver;

public static void main(String[] args) throws MalformedURLException, InterruptedException {

File classpathRoot = new File(System.getProperty("user.dir"));
File appDir = new File(classpathRoot, "/Apps/Amazon/");
//System.out.println(classpathRoot.getAbsolutePath() + ":");
//System.out.println(appDir.getAbsolutePath());

File app = new File(appDir, "in.amazon.mShop.android.shopping.apk");

DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setCapability(CapabilityType.BROWSER_NAME, "");
capabilities.setCapability("deviceName", "Android");
capabilities.setCapability("platformVersion", "4.4.2");
capabilities.setCapability("platformName", "Android");
capabilities.setCapability("app", app.getAbsolutePath());
capabilities.setCapability("appPackage", "in.amazon.mShop.android.shopping");
capabilities.setCapability("appActivity", "com.amazon.mShop.home.HomeActivity");

driver = new AndroidDriver(new URL("http://127.0.0.1:4723/wd/hub"), capabilities);

driver.manage().timeouts().implicitlyWait(80, TimeUnit.SECONDS);
Thread.sleep(10000);
driver.quit();
System.out.println("DONE!");
}
}
2) Do no get in to details for now and simply run the test. To start the test just select Run > Run As > Java Application Or Right Click on Eclipse code and Click Run As  > Java Application.
3) After a few Seconds, you will see that with the help of your script, Amazon application will belaunched on your device. Once the execution is finished, you will see a long list of messages on theAppium console.We will come back to these messages later. 

Code Explanation

Lets now discuss what each line of code means in the above test. I hope you are enjoying your journey of learning Appium.

Import libraries statements
// Llibrary for Appium drivers
import io.appium.java_client.android.AndroidDriver;
// Library to create the path to APK
import java.io.File;
// Library used to verify if URL is malformed
import java.net.MalformedURLException;
// Library used to create URL for the Appium server
import java.net.URL;
// Libraries for configuring Desired Capabilities
import org.openqa.selenium.remote.CapabilityType;
import org.openqa.selenium.remote.DesiredCapabilities;

Path to APK file
Since the Amazon app apk is stored in the computer and is not already installed on the device we need to create a file object which represents the actual apk file on the disk. I placed the folder ‘/Apps/Amazon/‘ which contains the apk file inside the Eclipse project.
// Path to Eclipse project
File classpathRoot = new File(System.getProperty(“user.dir”));
// Path to <project folder>/Apps -> Amazon
File appDir = new File(classpathRoot, “/Apps/Amazon/”);
// Path to <project folder>/Apps -> Amazon/Amozon apk file
File app = new File(appDir, “in.amazon.mShop.android.shopping.apk”);

Desired Capabilities
To be able to test the app on an actual device Desired Capabilities need to be set. Desired Capabilities are a set of keys and values sent to the Appium server to tell the server what kind of automation session we’re interested in starting up. There are also capabilities used to modify the behavior of the server during automation.
// To create an object of Desired Capabilities
DesiredCapabilities capabilities = new DesiredCapabilities();
// Name of mobile web browser to automate. It should be an empty string, as we are automation an app
capabilities.setCapability(CapabilityType.BROWSER_NAME, “”);
// Name of the OS: Android, iOS or FirefoxOS
capabilities.setCapability(“platformName”, “Android”);
// Mobile OS version –  My device is running Android 4.4.2
capabilities.setCapability(CapabilityType.VERSION, “4.4.2”);
// Device name:  – I am using Micromax A311
capabilities.setCapability(“deviceName”, “Micromax A311”);
// An absolute local path to the APK file
capabilities.setCapability(“app”, app.getAbsolutePath());
// Java package of the tested Android app
capabilities.setCapability(“appPackage”, “in.amazon.mShop.android.shopping”);
// An activity name for the Android activity you want to run from your package.
capabilities.setCapability(“appActivity”, “com.amazon.mShop.home.HomeActivity”);
// Constructor to initialize driver object with new Url and Capabilities
driver = new AndroidDriver(new URL(“http://127.0.0.1:4723/wd/hub”), capabilities);
 

Saturday, April 16, 2016

Install Android Studio & Java8

Install Java JDK 1.8

  • Download jdk-8uversion-linux-x64.tar.gz file from http://www.oracle.com/technetwork/java/javase/downloads/index.html
  • Unpack the tarball and install the JDK.
    % tar zxvf jdk-8uversion-linux-x64.tar.gz
  • Set up the JAVA_HOME and ANDROID_HOME
    For example, ANDROID_HOME=/home/demo/java/exo-dependencies/Android/AndroidStudio_Latest/SDK
    JAVA_HOME=/home/demo/java/jdk1.8.0_77
    PATH=/usr/local/bin:$PATH:$JAVA_HOME/bin:$M2_HOME/bin:$GRADLE_HOME/bin:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools
Install Android Studio on Ubuntu
Setting up Android Studio takes just a few clicks.
While the Android Studio download completes, verify which version of the JDK you have: open a command line and type javac -version. If the JDK is not available or the version is lower than 1.8, download the Java SE Development Kit 8.
To install Android Studio on Linux, proceed as follows:
  1. Unpack the .zip file you downloaded to an appropriate location for your applications, such as within /usr/local/for your user profile, or /opt/ for shared users.
  2. To launch Android Studio, open a terminal, navigate to the android-studio/bin/ directory, and executestudio.sh.
    Tip: Add android-studio/bin/ to your PATH environment variable so you can start Android Studio from any directory.
  3. Select whether you want to import previous Android Studio settings or not, then click OK.
  4. The Android Studio Setup Wizard guides you though the rest of the setup, which includes downloading Android SDK components that are required for development.
Note: If you are running a 64-bit version of Ubuntu, you need to install some 32-bit libraries with the following command:
sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6
If you are running 64-bit Fedora, the command is:
sudo yum install zlib.i686 ncurses-libs.i686 bzip2-libs.i686
That's it! The following video shows each step of the recommended setup procedure.


Các dạng khác nhau của ứng dụng mobile

3 dạng khác nhau của ứng dụng mobile

There are three different forms in which an application can reach a user on the mobile platform. They are as follows:
  • Native apps: Native apps are purely specific to the target mobile platform. They are developed in the platform-supported languages and are very much tied to underlying SDKs. For iOS, applications are developed in Objective-C and are dependent on iOS SDK; similarly, for the Android platform, they are developed in Java and are dependent on Android SDK.
  • m.site: m.site, also known as mobile website, on the other hand, is a mini version of your web application that loads on the browsers of your mobile devices. On iOS devices, it can be Safari or Chrome, and on Android devices, it can be the Android default browser or Chrome. For example, on your iOS or Android device, open your browser and type in www.facebook.com. Before the page loads, you will observe that a URL redirection happens from www.facebook.com to m.facebook.com. Facebook application servers realize that the request has originated from a mobile device and start servicing its mobile site rather than the regular desktop site.

    These m.sites use JavaScript and HTML5 to be developed just as your normal web applications.
  • Hybrid apps: The Hybrid app is a combination of the native app and web app. When you develop a native app, some parts of it load HTML web pages into the app trying to make the user feel he/she is using a native application. They generally use WebViews in native apps to load the web pages.

Available software tools for automation test

In order to automate the testing of your applications on mobile devices, there are
many software tools available. The following are some of the tools that are built
based on Selenium WebDriver:


  • AndroidDriver: This driver is a direct implementation of WebDriver, which is similar to FirefoxDriver, IEDriver, and so on. It acts as the client library with which your test script interacts. Its server side is the AndroidWebDriver that is installed on the device, or the emulator and executes all the test script commands that gets forwarded from AndroidDriver.
  • iPhoneDriver: This driver works very similar to AndroidDriver, but only on iOS platforms. In order to use it, you need to set up a server on the simulator or on the device. iPhoneDriver, however, is no longer supported and is deprecated.
  • iOSDriver: As the name says, this driver is used for automating native, hybrid, and m.site applications on iOS platforms. It uses native UI Automation libraries to automate on the iOS platform. For the test scripts, all this is transparent because it can still continue to use the WebDriver API in its favorite client language bindings. The test script communicates with the iOS Driver using the JSON wire protocol. However, if you want to execute your test scripts against the Android platform, you cannot use this driver.
  • Selendroid: This driver is similar to iOSDriver and can execute your native, hybrid, and m.site application test scripts on the Android platform. It uses the native UI Automator library provided by Google. The test scripts communicate with the Selendroid driver over the JSON wire protocol while using its favorite client language bindings.
  • Appium: This is another tool that can let you execute your test scripts against Android and iOS platforms without your having to change the underlying driver. Appium can also work with Firefox OS platforms. In the rest of the chapter, we will see how we can work with Appium.
From: Selenium WebDriver Practical Guide by Satya Avasarala

Kiến trúc ứng dụng Hybrid:






















=> Tóm lại hybrid app có 1 số tính chất như sau:

  • Đóng gói app để đem sử dụng giống như ứng dụng Native device APIs vì nó nằm trong một ứng dụng native mobile app.
  • Nó không hoàn toàn giống với native mobile application bởi vì quá trình kết xuất hiển thị data thông qua một WebView thay vì native UI android và cũng không giống 100% với ứng dụng Web-based ở desktop vì nó cũng không hẳn là Web apps (m site).
  • WebView được dùng để view html/css từ local và remote;
  • Dùng native app wrapper dùng để giao tiếp giữa WebView app với native device platform.
  • Framework điển hình là Ionic

Với sự ra đời của React Native + Nativescript + Flutter, một dạng ứng dụng mobile khác (dạng thứ 4) được gọi là "Cross-platform mobile apps".
Cross-platform mobile apps dùng một ngôn ngữ trung gian ví dụ Javascript,
đây là ngôn ngữ chung của mọi chuẩn nền, được dùng cả ở iOS & Android. Cross-platform apps có khác với các ứng dụng HTML5 hybrid ở chỗ
hybrid apps luôn tích hợp một sự kết hợp giữa native app với những khái niệm
trong mobile app và web.

PHỔ BIẾN

CHUYÊN MỤC

TỔNG LƯỢT XEM