Cách Sử Dụng Barcode Scanner

 - 

Ngày ni Barcodes & QR Codes được sử dụng rộng thoải mái trong rất nhiều ứng dụng di động. Vào QR Code chúng ta cũng có thể lưu trữ thông tin như văn bản, sms, email, url, hình ảnh, âm nhạc và vài format khác. Vào Android chúng ta có thể trích xuất thông tin được lưu trữ trong mã vạch bằng phương pháp sử dụng thư viện Google Vision. Khoác dù có nhiều thư viện khác hiện có, google vision library của Google là tốt nhất có thể vì nó ko chỉ hỗ trợ đọc mã vun mà còn tồn tại các tính năng khác ví như nhận diện khuôn mặt, nhận diện văn bản.

Bạn đang xem: Cách sử dụng barcode scanner

Trong bài xích này họ sẽ khám phá cách thực hiện thư viện google vision library bằng cách tạo một ứng dụng quét vé phim 1-1 giản.


1. Giới thiệu về Google điện thoại Vision API

Google sản phẩm điện thoại Vision giúp tìm các đối tượng trong một hình hình ảnh hoặc video. Nó hỗ trợ các chức năng như thừa nhận diện khuôn mặt, dấn diện văn bạn dạng và dấn diện mã vạch. Tất cả các tính năng này hoàn toàn có thể được sử dụng hiếm hoi hoặc kết hợp với nhau.

Bài viết này nhằm mục đích mục đích lý giải việc nhận diện mã vạch bởi việc thực hiện case scenario theo thời hạn thực. Bạn cũng có thể thấy bài toán quét mã gạch được sử dụng trong các siêu thị, rạp hát và khách sạn và nó đưa tin người dùng mong muốn muốn. Trong bài này đang hướng dẫn tạo ra một áp dụng quét vé xem phim dễ dàng và đơn giản và hiển thị tin tức về bộ phim để để vé.

Thư viện google vision library là một trong những phần của play services và hoàn toàn có thể được thêm vào build.gradle trong dự án

compile "com.google.android.gms:play-services-vision:11.0.2"2. Tủ sách barcode scannerGoogle đã hỗ trợ tutorial dễ dàng để thí điểm thư viện quét mã vun bằng ảnh bitmap. Nhưng mà khi nói tới việc quét mã vạch bằng máy hình ảnh với thời gian thực, thì phần đa thứ trở yêu cầu khó thực hiện vì họ cần tiến hành việc nhận diện mã vun trên video camera.

3. Cách thực hiện the barcode

Bài viết này đã được viết bằng phương pháp sử dụng app android Studio 3.0 Canary 9.

Bước 1.Thêm trình gọi barcode androidhive & thư viện google vision vào tệp tin build.gradle của project

build.gradledependencies // barcode reader library implementation "info.androidhive:barcode-reader:1.1.2" // google vision library implementation "com.google.android.gms:play-services-vision:11.0.2"Bước 2. Thêm barcode camera fragment vào activity hoặc fragment.

Bước 3. Kế thừa BarcodeReader.BarcodeReaderListener vào trong acitivity cùng override hầu hết hàm nên thiết

import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.util.SparseArray;import com.google.android.gms.vision.barcode.Barcode;import java.util.List; import info.androidhive.barcode.BarcodeReader; public class MainActivity extends AppCompatActivity implements BarcodeReader.BarcodeReaderListener
Override protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_scan);
Override public void onBitmapScanned(SparseArray sparseArray) // barcode scanned from bitmap image
Override public void onScanError(String s) // scan error Bước 4. Chạy áp dụng và thử scan barcode hoặc qrcode. Tác dụng scan sẽ đc trả về hàm onScanned() hoặc onScannedMultiple()

3.1 Adding Scanning Overlay Indicator Line

Chúng ta hoàn toàn có thể thấy tất cả các ứng dụng quét thường thêm một đường chỉ thị trên máy ảnh để cho thấy thêm quá trình quét sẽ diễn ra. Để dành được điều này, đề xuất thêm một tấm tái thực hiện trong và một thư viện với nó có thể được thêm vào screen máy ảnh.

Để thêm chiếc quét động, hãy thêm mã thông báo.androidhive.barcode.ScannerOverlay.

The library also contains few other useful functionalities like tự động flash, beep sound etc., Detailed information about library can be found on it’s Github page.4. Xây dựng áp dụng scan véHãy xem cách sử dụng thư viện trong trường hợp sử dụng thực tế. Ứng dụng này, không chỉ phân tích và lý giải việc quét mã vạch mà lại còn bao hàm xây dựng giao diện người tiêu dùng phức tạp, làm cho REST api để lấy json trả về với viết những custom view class.

Nhìn chung, vận dụng có ba màn hình. Đầu tiên là màn hình hiển thị splash, lắp thêm hai là quét mã vun và sau cuối là hiển thị thông tin vé phim.

Dưới trên đây là ảnh chụp màn hình hiển thị của ứng dụng.

*

4.1 The REST API

Để xây dựng vận dụng này họ cần một api REST để tìm kiếm trải qua cơ sở dữ liệu phim bằng mã vạch phim.

API search kiếm Movie: GET requeshttps://api.androidhive.info/barcodes/search.php?code=dunkirk

Kết quả:Bộ phim phù hợp sẽ được chỉ dẫn trả về json vào respone

"name": "Dunkirk", "poster": "https://api.androidhive.info/barcodes/dunkirk.jpg", "duration": "1hr 46min", "rating": 4.6, "released": true, "genre": "Action", "price": "₹200", "director": "Christopher Nolan"Bây giờ cửa hàng chúng tôi đã các thứ bắt buộc thiết. Cùng ban đầu bằng phương pháp tạo một dự án công trình mới trong android Studio.

Xem thêm: #10 Cách Chữa Da Bị Sạm Đen Hiệu Quả, Tiết Kiệm, An Toàn, Bệnh Viện Lao Và Bệnh Phổi Cần Thơ > Hỏi Đáp

Lưu ý: dự án này được phân phát triển bằng phương pháp sử dụng android Studio 3.0 Canary 9

Bước 1. Sinh sản project mới, vào tệp tin ⇒ New Project. Cùng điền mọi thông tin quan trọng của dự án

Bước 2. Thêm barcode và google vision dependencies vào file app’s build.gradle and

Thêm những thư viện nên dùng: Glide, Volley và Gson

app/build.gradledependencies implementation "com.google.android.gms:play-services-vision:11.0.2" // vision barcode scanner implementation "info.androidhive:barcode-reader:1.1.2" // glide image library implementation "com.github.bumptech.glide:glide:4.0.0-RC1" annotationProcessor "com.github.bumptech.glide:compiler:4.0.0-RC1" implementation "com.android.volley:volley:1.0.0" implementation "com.google.code.gson:gson:2.6.2"Bước 3. Thêm string, dimen, màu sắc resources vào các tệp tin khớp ứng trong folder res

strings.xml Movie Tickets Book Ticket DURATION GENRE RATING PRICE BUY NOW COMING SOON No ticket found. Try scanning the QR Codes from http://api.androidhive.info/qrcodes/dimens.xml 20dp 10dp 16dp 14dp 28dp 220dp 40dpcolors.xml #6d0094 #6d0094 #ff2068 #ad1a7f #f8f8f8 #999 #222222Bước 4. Chế tạo ra 1 class với thương hiệu là MyApplication.java với thêm đoạn code sinh hoạt dưới. Ở vào file, tạo ra một singleton instancevolley .

MyApplication.javaimport android.app.Application;import android.text.TextUtils; import com.android.volley.Request;import com.android.volley.RequestQueue;import com.android.volley.toolbox.Volley; public class MyApplication extends Application public static final String TAG = MyApplication.class .getSimpleName(); private RequestQueue mRequestQueue; private static MyApplication mInstance;
Override public void onCreate() super.onCreate(); mInstance = this; public static synchronized MyApplication getInstance() return mInstance; public RequestQueue getRequestQueue() if (mRequestQueue == null) mRequestQueue = Volley.newRequestQueue(getApplicationContext()); return mRequestQueue; public void addToRequestQueue(Request req, String tag) // phối the default tag if tag is empty req.setTag(TextUtils.isEmpty(tag) ? TAG : tag); getRequestQueue().add(req); public void addToRequestQueue(Request req) req.setTag(TAG); getRequestQueue().add(req); public void cancelPendingRequests(Object tag) if (mRequestQueue != null) mRequestQueue.cancelAll(tag); Bước 5. Mở file AndroidManifest.xml và thêm MyApplication ở tag .

Và cũng thêm quyền truy cập INTERNET

AndroidManifest.xml Bước 6. Trong thư mục drawable thư mục tạo 1 tệp tin xml drawable với tên là bg_gradient.xml

bg_gradient.xml

4.2 Thêm màn hình hiển thị Landing

Màn hình Landing sẽ có vài mẫu mã text với 1 button nhằm mở camera scanner.

Bước 7.Mở file layout activity_main.xml với thêm đoạn code ở mặt dưới. Ở đây có thêm button để khởi đụng scanner activity.

Bước 8. Mở tệp tin main activity và biến đổi những thứ nên thiết. Trong các số đó có cách làm transparentToolbar() tạo cho toolbar trong suốt.

MainActivity.javaimport android.app.Activity;import android.content.Intent;import android.graphics.Color;import android.os.Build;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.util.SparseArray;import android.view.View;import android.view.Window;import android.view.WindowManager; import com.google.android.gms.vision.barcode.Barcode; import java.util.List; import info.androidhive.barcode.BarcodeReader; public class MainActivity extends AppCompatActivity
Override protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); // making toolbar transparent transparentToolbar(); setContentView(R.layout.activity_main); findViewById(R.id.btn_scan).setOnClickListener(new View.OnClickListener()
Override public void onClick(View view) startActivity(new Intent(MainActivity.this, ScanActivity.class)); ); private void transparentToolbar() if (Build.VERSION.SDK_INT >= 19 && Build.VERSION.SDK_INT = 19) View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN); if (Build.VERSION.SDK_INT >= 21) setWindowFlag(this, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, false); getWindow().setStatusBarColor(Color.TRANSPARENT); private void setWindowFlag(Activity activity, final int bits, boolean on) Window win = activity.getWindow(); WindowManager.LayoutParams winParams = win.getAttributes(); if (on) winParams.flags else winParams.flags &= ~bits; win.setAttributes(winParams); Khi chạy app, hoàn toàn có thể nhìn thấy màn hình hiển thị landing như hình mặt dưới

*

4.3 Thêm màn hình hiển thị Ticket Scan

Bước 9. Chế tác 1 activity bắt đầu từ tệp tin ⇒ New ⇒ Activity ⇒ Empty Activity and name it as ScanActivity.java

Bước 10. Mở file layout activity_scan.xml và thêm fragment Barcode Reader như mặt dưới. Ở đây chúng ta cũng gồm thểm thêm view indicator scanner

activity_scan.xml Bước 11. Mở file ScanActivity.java và chuyển đổi đoạn code như ở bên dưới

Thực thi activity từ bỏ BarcodeReader.BarcodeReaderListenerOverride method callback như onScanned(), onScannedMultiple() và các phương thức callback khácbarcodeReader.playBeep() phân phát ra giờ bíp khi hiểu mã vạch.Khởi rượu cồn TicketActivity thứ nhất khi mã vén được quét bằng phương pháp truyền quý hiếm mã vun ở vào intent

ScanActivity.javapackage info.androidhive.movietickets; import android.content.Intent;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.util.SparseArray;import android.widget.Toast; import com.google.android.gms.vision.barcode.Barcode; import java.util.List; import info.androidhive.barcode.BarcodeReader; public class ScanActivity extends AppCompatActivity implements BarcodeReader.BarcodeReaderListener BarcodeReader barcodeReader;
Override protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_scan); // get the barcode reader instance barcodeReader = (BarcodeReader) getSupportFragmentManager().findFragmentById(R.id.barcode_scanner);
Override public void onScanned(Barcode barcode) // playing barcode reader beep sound barcodeReader.playBeep(); // ticket details activity by passing barcode Intent intent = new Intent(ScanActivity.this, TicketActivity.class); intent.putExtra("code", barcode.displayValue); startActivity(intent);
Override public void onScanError(String s) Toast.makeText(getApplicationContext(), "Error occurred while scanning " + s, Toast.LENGTH_SHORT).show(); Chạy phầm mềm và demo scan một barcode bất kỳ. Mã vén được quét sẽ tiến hành trả về trong cách thức onScanned ().

4.4 Thêm screen Ticket Scan Result

Màn hình tiếp theo sau sẽ là activity kết quả. Trên màn hình hiển thị này, cụ thể phim sẽ tiến hành hiển thị bằng phương pháp gửi qrcode đang quét nhằm tìm kiếm endpoint cùng nhận kết quả.

4.4.1 sẵn sàng Ticket View cùng rất đục lỗ vé

Bước 12. Tạo nên 1 class với tên TicketView.java. Đây là lớp size nhìn đối kháng giản, trong các số ấy Canvas được áp dụng để hiển thị chính sách xem với những lỗ trong veo ở những góc.

TicketView.javaimport android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.DashPathEffect;import android.graphics.Paint;import android.graphics.Path;import android.graphics.PorterDuff;import android.graphics.PorterDuffXfermode;import android.util.AttributeSet;import android.widget.LinearLayout; public class TicketView extends LinearLayout private Bitmap bm; private Canvas cv; private Paint eraser; private int holesBottomMargin = 70; private int holeRadius = 40; public TicketView(Context context) super(context); Init(); public TicketView(Context context, AttributeSet attrs) super(context, attrs); Init(); public TicketView(Context context, AttributeSet attrs, int defStyleAttr) super(context, attrs, defStyleAttr); Init(); private void Init() eraser = new Paint(); eraser.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); eraser.setAntiAlias(true);
Override protected void onSizeChanged(int w, int h, int oldw, int oldh) h != oldh) bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); cv = new Canvas(bm); super.onSizeChanged(w, h, oldw, oldh);
Override protected void onDraw(Canvas canvas) int w = getWidth(); int h = getHeight(); bm.eraseColor(Color.TRANSPARENT); // set the view background màu sắc cv.drawColor(Color.WHITE); // drawing footer square contains the buy now button Paint paint = new Paint(); paint.setARGB(255, 250, 250, 250); paint.setStrokeWidth(0); paint.setStyle(Paint.Style.FILL); cv.drawRect(0, h, w, h - pxFromDp(getContext(), holesBottomMargin), paint); // adding punching holes on the ticket by erasing them cv.drawCircle(0, 0, holeRadius, eraser); // top-left hole cv.drawCircle(w / 2, 0, holeRadius, eraser); // top-middle hole cv.drawCircle(w, 0, holeRadius, eraser); // top-right cv.drawCircle(0, h - pxFromDp(getContext(), holesBottomMargin), holeRadius, eraser); // bottom-left hole cv.drawCircle(w, h - pxFromDp(getContext(), holesBottomMargin), holeRadius, eraser); // bottom right hole // drawing the image canvas.drawBitmap(bm, 0, 0, null); // drawing dashed lines at the bottom Path mPath = new Path(); mPath.moveTo(holeRadius, h - pxFromDp(getContext(), holesBottomMargin)); mPath.quadTo(w - holeRadius, h - pxFromDp(getContext(), holesBottomMargin), w - holeRadius, h - pxFromDp(getContext(), holesBottomMargin)); // dashed line Paint dashed = new Paint(); dashed.setARGB(255, 200, 200, 200); dashed.setStyle(Paint.Style.STROKE); dashed.setStrokeWidth(2); dashed.setPathEffect(new DashPathEffect(new float<>10, 5, 0)); canvas.drawPath(mPath, dashed); super.onDraw(canvas); public static float pxFromDp(final Context context, final float dp) return dp * context.getResources().getDisplayMetrics().density; Bước 13. Sản xuất 1 class với tên là TicketResultActivity.java bằng cách File ⇒ New ⇒ Activity ⇒ Empty Activity.

Bước 14. Mở file layout activity_ticket_result.xml với thêm đoạn mã nghỉ ngơi dưới.

activity_ticket_result.xml content_ticket_details.xml Bước 15. Mở TicketResultActivity.java khớp ứng và sửa như đoạn code sống dưới

searchBarcode () tiến hành gọi http volley nhằm tìm tìm endpoint bằng cách quét mã gạch được quét.renderMovie () đối chiếu json cùng hiển thị các chi tiết phim bên trên màn hình.

TicketResultActivity.javaimport android.os.Bundle;import android.support.v4.content.ContextCompat;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.text.TextUtils;import android.util.Log;import android.view.MenuItem;import android.view.View;import android.widget.Button;import android.widget.ImageView;import android.widget.ProgressBar;import android.widget.TextView;import android.widget.Toast; import com.android.volley.Request;import com.android.volley.Response;import com.android.volley.VolleyError;import com.android.volley.toolbox.JsonObjectRequest;import com.bumptech.glide.Glide;import com.google.gson.Gson;import com.google.gson.JsonSyntaxException;import com.google.gson.annotations.SerializedName; import org.json.JSONObject; public class TicketResultActivity extends AppCompatActivity private static final String TAG = TicketResultActivity.class.getSimpleName(); // url to search barcode private static final String URL = "https://api.androidhive.info/barcodes/search.php?code="; private TextView txtName, txtDuration, txtDirector, txtGenre, txtRating, txtPrice, txtError; private ImageView imgPoster; private Button btnBuy; private ProgressBar progressBar; private TicketView ticketView;
Override protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_ticket_result); Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); txtName = findViewById(R.id.name); txtDirector = findViewById(R.id.director); txtDuration = findViewById(R.id.duration); txtPrice = findViewById(R.id.price); txtRating = findViewById(R.id.rating); imgPoster = findViewById(R.id.poster); txtGenre = findViewById(R.id.genre); btnBuy = findViewById(R.id.btn_buy); imgPoster = findViewById(R.id.poster); txtError = findViewById(R.id.txt_error); ticketView = findViewById(R.id.layout_ticket); progressBar = findViewById(R.id.progressBar); String barcode = getIntent().getStringExtra("code"); // close the activity in case of empty barcode if (TextUtils.isEmpty(barcode)) Toast.makeText(getApplicationContext(), "Barcode is empty!", Toast.LENGTH_LONG).show(); finish(); // tìm kiếm the barcode searchBarcode(barcode); /** * Searches the barcode by making http điện thoại tư vấn * Request was made using Volley network library but the library is * not suggested in production, consider using Retrofit */ private void searchBarcode(String barcode) // making volley"s json request JsonObjectRequest jsonObjReq = new JsonObjectRequest(Request.Method.GET, URL + barcode, null, new Response.Listener()
Override public void onResponse(JSONObject response) Log.e(TAG, "Ticket response: " + response.toString()); // check for success status if (!response.has("error")) // received movie response renderMovie(response); else // no movie found showNoTicket(); , new Response.ErrorListener()
Override public void onErrorResponse(VolleyError error) Log.e(TAG, "Error: " + error.getMessage()); showNoTicket(); ); MyApplication.getInstance().addToRequestQueue(jsonObjReq); private void showNoTicket() txtError.setVisibility(View.VISIBLE); ticketView.setVisibility(View.GONE); progressBar.setVisibility(View.GONE); /** * Rendering movie details on the ticket */ private void renderMovie(JSONObject response) try // converting json khổng lồ movie object Movie movie = new Gson().fromJson(response.toString(), Movie.class); if (movie != null) txtName.setText(movie.getName()); txtDirector.setText(movie.getDirector()); txtDuration.setText(movie.getDuration()); txtGenre.setText(movie.getGenre()); txtRating.setText("" + movie.getRating()); txtPrice.setText(movie.getPrice()); Glide.with(this).load(movie.getPoster()).into(imgPoster); if (movie.isReleased()) btnBuy.setText(getString(R.string.btn_buy_now)); btnBuy.setTextColor(ContextCompat.getColor(this, R.color.colorPrimary)); else btnBuy.setText(getString(R.string.btn_coming_soon)); btnBuy.setTextColor(ContextCompat.getColor(this, R.color.btn_disabled)); ticketView.setVisibility(View.VISIBLE); progressBar.setVisibility(View.GONE); else // movie not found showNoTicket(); catch (JsonSyntaxException e) Log.e(TAG, "JSON Exception: " + e.getMessage()); showNoTicket(); Toast.makeText(getApplicationContext(), "Error occurred. Check your LogCat for full report", Toast.LENGTH_SHORT).show(); catch (Exception e) // exception showNoTicket(); Toast.makeText(getApplicationContext(), "Error occurred. Kiểm tra your LogCat for full report", Toast.LENGTH_SHORT).show();
Override public boolean onOptionsItemSelected(MenuItem item) if (item.getItemId() == android.R.id.home) finish(); return super.onOptionsItemSelected(item); private class Movie String name; String director; String poster; String duration; String genre; String price; float rating;
SerializedName("released") boolean isReleased; public String getName() return name; public String getDirector() return director; public String getPoster() return poster; public String getDuration() return duration; public String getGenre() return genre; public String getPrice() return price; public float getRating() return rating; public boolean isReleased() return isReleased; Nếu hiện thời chạy vận dụng và quét mã qr được hỗ trợ trong nội dung bài viết này thì công dụng sẽ được hiển thị như bên dưới đây.

*

5. Chạy thử app

Ứng dụng rất có thể quét ngẫu nhiên mã vun nào nhưng tin tức vé phim chỉ được hiển thị lúc mã qr được quét được cung cấp trong bài viết này.

Xem thêm: Mua Online Kem Chống Nắng Image Spf 50 Dành Cho Da Hỗn Hợp, Kem Chống Nắng Image Spf 50 Cho Da Hỗn Hợp

Chạy áp dụng và thử quét các mã qr mặt dưới. Chúng ta cũng có thể xem tin tức về bộ phim truyền hình thích hợp.