Front-end enabling team – full link development of APP

preface

This paper aims to provide an idea and simple implementation of app full link development. With the continuous development of Internet technology, various manufacturers have launched excellent cross-platform frameworks. For example, React Native, launched by Facebook, encapsulates the Native code of Android and iOS platforms. Native apis can be called by writing JavaScript. For example, Ali open source WEEx, in fact, it is also through the integration of WeexSDK, let developers use JavaScript to develop mobile applications. Other frameworks are not mentioned here. I would like to express some personal views and practices on app full-link development through this article. React Native and WEEX have virtually raised the development threshold for some people. I think a lot of people encounter all kinds of weird errors when installing React Native. Some netizens even joke that installing the environment is like learning half of the system, which shows the high cost of learning. Maybe some students just want to go to Hello World for a taste.

So is there a way for us to learn a new language to develop APP without deliberately switching the technology stack when we are used to developing PC side with a certain technology stack? Mental model is a word that has caught my attention this year more than ever. I think a good framework should keep the mental burden of the user as low as possible. Of course, different people must have different mental burden on the same frame, which is often related to his learning habits, thinking mode and other factors. Next, I will start from the following aspects to share a set of APP link development system, hoping to help you!

Build the UI library

Framework7-react. There are two ways to initialize the APP.

• Build APP using framework7-cli

First you need scaffolding:

 npm install -g framework7-cli --unsafe-perm=true --allow-root
Copy the code

Then create a folder on the desktop, execute Framework7 Create under this folder, fill in the corresponding information according to the guide to complete the construction of App

• Use an existing demo

demo

Install dependencies (NPM I). After starting the project, you can see the following interface in http://0.0.0.0:8081/ :

In fact, the interactive experience is great. So let’s look at the development experience. Here IS a snippet of the main container:

We found that the development pattern was pretty much the same as we did for the PC Web. Perhaps the only thing to notice is the way it hops. The routing table is also similar to that of the PC, as you can see from the diagram below, and it actually doesn’t take much time to get you started developing apps. Perhaps the only drawback: no Documentation in Chinese. But I think the API names of the components are pretty good, you don’t have to spend a lot of time polishing the basic properties, and there’s plenty of sample code.

The UI component is done for now, but of course you use other pure UI components as well. So let’s look at how it communicates with the native API.

Integrating native apis

When we were developing apps, it was almost impossible to avoid native interaction. Call the phone camera, microphone, camera, etc. At this point we need to consider the architectural way in which the Web interacts with Native. In this chapter, I intend to use the Cordova architecture to complete this architecture. For those of you who have never been involved in mobile development, what is Cordova?

To quote from Baidu Baike:

Cordova provides a set of device-specific apis that allow mobile applications to access native device functions such as the camera, microphone, and battery in JavaScript. It uses HTML, CSS & JS for mobile App development and one set of code for multiple platforms. Cordova supports the following mobile operating systems: iOS, Android, Ubuntu Phone OS, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian.

If you’re still wondering, here’s another picture to help you figure out what it’s really for.

Simply put, if you want to call native interfaces, you need to package some basic apis into Cordova Plugins. A Web application can then call the API in the plug-in pool of window.cordova to invoke the native interface. So what I’m going to do is walk you through the process.

Initialize the Cordova project

You need to install Cordova globally

 sudo npm install -g cordova
Copy the code

Next, initialize the project project

cordova create hello com.example.hello HelloWorld
Copy the code

The WWW file in the figure above refers to HTML, CSS and JS. It was obvious that we could build a UI component library and port it to the WWW folder. One thing to note is that we need to introduce in the entry file: index.html. Otherwise, the cordova plug-in cannot be called through the Window, and an error will occur.

Add Native plugin

We added a cordova-plugin-device plug-in to view device information.

cordova plugin add cordova-plugin-device
Copy the code

The cordova-plugin-device folder was added to the plugins. Json and ios.json under plugins, you can view the following information:

  "installed_plugins": {
    "cordova-plugin-whitelist": {
      "PACKAGE_NAME": "com.example.hello"
    },
    "cordova-plugin-device": {
      "PACKAGE_NAME": "com.example.hello"}}Copy the code

Custom Native

During the development process, it was inevitable that we would encounter strange requirements for custom plug-ins based on native development. So how to develop a custom plug-in, you can refer to this plug-in.

Calling Native plug-ins

Refer to the official documentation for the use of cordova-plugin-device:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
   console.log(device.cordova);
}
Copy the code

We found that in the use case we could call device directly to get the corresponding data. So window.device in our Web APP. We used Android Studio to package the APP onto a local phone and did real debugging with Google Chrome’s WebView debugging tool.

We type window.device on the console

We found that it outputs the device model, UUID, Android version, and so on. Looking at this information, there is no doubt that Web apps already have the ability to interact with native speakers. When our development phase is complete, we need to package and release the APP. This is where you need to know about android/ios packaging.

Integrate Android /ios packaging services

In the above two large chapters, we selected the technology separately, but we did not combine them. Then we mainly do two things: 1. Pull the code of the Web app through the script and package it to replace the WWW folder 2. Write automated scripts to sign the APP and package it into APK files and IPA files.

To unify the management of scripts, we create a scripts folder in the root directory to store scripts.

Write scripts and pull web App code

General enterprises will choose to set up GitLab for code hosting on the Intranet. For convenience, I used Github instead of GitLab. I had already uploaded the Web app to Github. Next, I pulled the code by writing a shell script and replaced the WWW directory with the packaged file. Finally, I added cordova.js to the entry file index.html

The new build. Sh

#! /usr/bin/env bash
set -e

red='\e[21;31m%s\e[0m\n'
green='\e[21;32m%s\e[0m\n'
yellow='\e[21;33m%s\e[0m\n'
blue='\e[21;34m%s\e[0m\n'
magenta='\e[21;35m%s\e[0m\n'
cyan='\e[21;36m%s\e[0m\n'
white='\e[21;97m%s\e[0m\n'
darkgray='\e[21;90m%s\e[0m\n'

GIT_REPO="https://github.com/Summer-andy/framework7-appstore-react"
ROOT_DIR="${PWD}"
APP_DIR="${ROOT_DIR}/app"
WWW_DIR="${ROOT_DIR}/www"

rm -rf $WWW_DIR

if [ $# -eq 1 ]; then
  APP_DIR=The $1
  printf "$yellow" "Building --> ${APP_DIR}"
elif [ ! -d $APP_DIR ]; then
  #
  printf "$green" "APP direction not exist, will clone from git remote."
  git clone $GIT_REPO $APP_DIR
else
  printf "$yellow" "${APP_DIR}"
  # updated git
  cd $APP_DIR
  git checkout master
  if test -n "$(git status --porcelain)"; then
    printf "$red" 'Unclean working tree. Commit or stash changes first.'> & 2;exit 128;
  fi

  if ! git fetch --quiet 2>/dev/null; then
    printf "$red" 'There was a problem fetching your branch. Run `git fetch` to see more... '> & 2;exit 128;
  fi

  if test "0"! ="$(git rev-list --count --left-only @'{u}'... HEAD)"; then
    printf "$red" 'Remote history differ. Please pull changes.'> & 2;exit 128;
  fi

  printf "$green" 'No conflicts.'> & 2;printf "$green" 'Pull changes to master'
  git merge &>/dev/null;
fi

cd $APP_DIR
# BUILD
yarn install --silent
yarn build-prod

# move dist to ./www
printf "$yellow" "Moving static files to -> ${WWW_DIR}"
cd $ROOT_DIR
mv $APP_DIR/build $WWW_DIR

# transform index.html
node scripts/www.js

printf "$cyan" "Ready for package."
Copy the code

For convenience, we’ll write a Node script to add the necessary information to index. HTML because it involves writing files.

New www.js file

let FS = require('fs');
let htmlfile = './www/index.html'

// read the index.html from build folder
let data = FS.readFileSync(htmlfile, 'utf8');

function insertContent(fullContent, beforeWhat, newContent) {
  // get the position before which newContent has to be added
  const position = fullContent.indexOf(beforeWhat);
  // since splice can be used on arrays only
  let fullContentCopy = fullContent.split(' ');
  fullContentCopy.splice(position, 0, newContent);
  return fullContentCopy.join(' ');
}

// will add the <meta> tags needed for cordova app
const afterAddingMeta = insertContent(
  data,
  '<link'.`<meta name="format-detection" content="telephone=no">` +
  `<meta name="msapplication-tap-highlight" content="no">`
);

// will add <script> pointing to cordova.js
const afterAddingScript = insertContent(
  afterAddingMeta,
  '<script'.`<script type="text/javascript" src="cordova.js"></script>`
);

// updates the index.html file
FS.writeFile(htmlfile, afterAddingScript, 'utf8'.err= > {
  if (err) {
    throwerr; }});Copy the code

We integrate the script into the project scripts for ease of operation:

"build": "sh ./scripts/build.sh".Copy the code

The integration of Web APP and Cordova can be completed by simply executing NPM run build.

Android Package Service

With all of the above steps completed, we can start packing our app natively. To complete the package, run the Cordova Platform Add Android.

#! /usr/bin/env bash
set -e
darkgray='\e[21;90m%s\e[0m\n'

if [ ! -d 'platforms/android' ]; then
  # rm -rf ./platforms/android
  printf "$darkgray" "$ cordova platform add android"
  cordova platform add android
fi
Copy the code

After executing the above script, you can see the Android project under the Platform folder. In fact, for the development stage, this is basically enough, we can install Android Studio to compile the app online debugging.

So when our app is developed and self-tested, we need to release an internal test version of the app for testing. So when we formally package the app, no matter apple or Android, we need a certificate. Apple certificates need to be purchased separately, while Android certificates can be created by ourselves. Let me take Android as an example:

Before you start, make sure you have Java and Gradle installed on your computer for android packaging signatures.

To create the keyStore

keytool -genkey -v -keystore  ~/Desktop/app.keystore -alias test -storepass 123456 -keypass 123456
Copy the code

For security, we can hide important information, such as -storepass 123456 -keypass 123456.

Build packaging script

Create a new Android-package script

#! /usr/bin/env bash
set -e

red='\e[21;31m%s\e[0m\n'
green='\e[21;32m%s\e[0m\n'
yellow='\e[21;33m%s\e[0m\n'
blue='\e[21;34m%s\e[0m\n'
magenta='\e[21;35m%s\e[0m\n'
cyan='\e[21;36m%s\e[0m\n'
white='\e[21;97m%s\e[0m\n'
darkgray='\e[21;90m%s\e[0m\n'

APP_NAME='Hello'
ANDROID_RELEASE_DIR="${PWD}/platforms/android/app/build/outputs/apk/release/"
RELEASE_DIR="${PWD}/archives/"

printf "$cyan" "Building apk, please wait."
cordova build android --release

# PRINT THE PASSWORD
KEYSTORE_PWD=$(head -n 1 keystore-pwd.txt)
printf "$cyan" "Password for signing:"
printf "\n\n"
printf "  $cyan" "* * * * * * * * * * * * * * * * * * * *"
printf "  $cyan" "* ${KEYSTORE_PWD} *"
printf "  $cyan" "* * * * * * * * * * * * * * * * * * * *"
printf "\n\n"

printf "$cyan" "Signing apk, please wait."
jarsigner -verbose -keystore name.keystore -storepass ${KEYSTORE_PWD} -signedjar "${ANDROID_RELEASE_DIR}${APP_NAME}.apk" "${ANDROID_RELEASE_DIR}app-release-unsigned.apk" name.keystore

if [ ! -d $RELEASE_DIR ]; then
mkdir $RELEASE_DIR
fi

mv "${ANDROID_RELEASE_DIR}${APP_NAME}.apk" $RELEASE_DIR

printf "$cyan" "Signed the following apk(s):"
printf "\n\n"
printf "  $cyan" "${RELEASE_DIR}${APP_NAME}.apk"
printf "\n\n"
Copy the code

Note: in the script, I have stored all the important information in the file keystore-pwd.txt.

The script will automatically generate the signed APK in the archives folder of the project root directory.

At this point, apK can be directly sent to the test installation, but this will bring some problems: 1. 2. It is easy to make mistakes when passing files, so we need to upload the packaged APK directly to the third-party hosting platform through scripts for testing and downloading. So this is a process that I’ll share with you in the next section. If you don’t need to pack ios, you can go straight to the last section.

Ios Packaging Service

App into the ios project, in fact, is very simple to execute a script line. In order to unify with Android, we will also create a new ios.sh

#! /usr/bin/env bash
set -e
darkgray='\e[21;90m%s\e[0m\n'
if [ ! -d 'platforms/ios' ]; then
  # rm -rf ./platforms/ios
  printf "$darkgray" "$ cordova platform add ios"
  cordova platform add ios
fi
Copy the code

You can run the script to generate ios projects in Platform. One of the tricky things about ios is that both development and beta release require Apple certificates. So we also need to generate different certificates for different environments. Note: You can’t do this on Windows! The creation of the certificate can be seen in this article in Dcloud, which is a bit old but useful to test in person.

Be careful not to use the red boxes as every app is an Identifiers. The certificate and description file must correspond to the current app Identifier Id.

Students with Xcode can run the app on the simulator or connect to the real machine for debugging, mainly to test whether there is a problem with the native interaction.

Integrate fastLane for automated deployment

Those of you who have done ios release know that ios release requires uploading screen shots of various models of devices and other tedious procedures. So are there tools to automate these processes? This is the main character of this section – Fastlane

Fastlane is a set of automated tools and frameworks written in Ruby, each of which actually corresponds to a Ruby script that performs a specific task.

Install the fastlane

sudo gem install fastlane
Copy the code

Initialize the fastlane

Run the Fastlane Init command on the Android or ios project and fill in the following information. If you have already added Fastlane to your project, the next fastlane init will look like this:

Note: FastLane on Android has a different directory structure than ios.

Directory Structure

• Appfile

Store App information, such as Apple ID, App Identifier, Team ID, etc.

• Fastfile

Automated script configuration file where all tasks are scheduled.

• Gemfile

Gemfile helps manage gems, just like podfile manages pods

Fastlane community

The Fastlane community already provides a number of useful plugins. We just need to align and combine them according to how the plug-ins are used. For example, the purpose of this chapter is to push our apps to third party platforms through Fastlane. So you can choose dandelion or fir.

Fastlane plug-in

I chose to use Fastlane-plugin-fir as an example to show you how to publish an app. Because of dandelion platform I did not carry out real name authentication. You can only host your app on there if you have real name authentication.

bundle exec fastlane add_plugin fir
Copy the code

We need to add fir to our project, so we need to start coding. As we mentioned earlier, Fastfile is used for scripting, so we need to write the corresponding code in Fastfile:

default_platform(:android)

platform :android do

  desc "deploy to fir.im"
  lane :deployfire do

    result = fir(
      api_token: 'XXXXX'.apk_path: '/archives/Hello.apk'.)end
Copy the code

The api_token in the code can be obtained from the API Token in the personal information bar on the official website.

Execute the Fastlane script

bundle exec fastlane deployfire
Copy the code

If the following figure is displayed, the release is successful

Finally, you can download it on the FIR platform.

Finally, you can download our APP by clicking here.

At the end of the holiday

Thank you to see here, I believe that after reading the article, you must harvest a lot. You might find it a bit cumbersome, but these configurations are once and for all. In this system, you can switch UI libraries at will. As for the package and release of these configurations, we only need to ask someone in the team to build them, and other students’ business will continue as usual. React can also be used to develop apps for PCS, with almost zero cost. And we only need to execute a few scripts to complete the packaging and release of the app. If you need, I will open source the whole system for you to use. Because ios packaging release involves more content, I plan to write another article, you can look forward to the interest ~