Search the Community

Всем привет! Сегодня мы разберем получение товаров из категории Opencart в Android-приложение через JSON. Для начала не будем использовать сторонние библиотеки, а сделаем все нативным образом, чтобы ознакомиться с базовыми принципами обмена данными. Итак, поехали Сперва нужно определить выдачу массива товаров в JSON-объект из магазина. Открываем catalog/controller/product/category.php И в цикле выдачи данных для товаров добавляем свои запросы. Перед $data['products'][] = array( Добавляем // изображение для списка, размер 100х100 if ($result['image']) { $json_image = $this->model_tool_image->resize($result['image'], 100, 100); } else { $json_image = $this->model_tool_image->resize('placeholder.png', 100, 100); } // создаем массив данных для каждого товара // получаем имя, путь изображения, описание и цену $data['json-products'][] = array( 'name' => $result['name'], 'thumb' => $json_image, 'description' => utf8_substr(trim(strip_tags(html_entity_decode($result['description'], ENT_QUOTES, 'UTF-8'))), 0, $this->config->get('theme_' . $this->config->get('config_theme') . '_product_description_length')) . '..', 'price' => $price, ); Дальше ищем response $this->response->setOutput($this->load->view('product/category', $data)); И заменяем на // формируем массив products $data['json_products'] = array( 'products' => $data['json-products'], ); // и отдаем его в json при запросе в адресной строке &json_products // для этого поставим условие запроса if (isset( $this->request->get['json_products'])) { $this->response->setOutput(json_encode($data['json_products'])); } else { $this->response->setOutput($this->load->view('product/category', $data)); } Таким образом, теперь при запросе к сайту по адресу мой-сайт/index.php?route=product/category&path=20&json_products мы будем получать массив данных вида: {"products":[ {"name":"Apple Cinema30'", "thumb":"http:\/\/store.url\/image\/cache\/catalog\/demo\/apple_cinema_30-100x100.jpg", "description":"The 30-inch Apple Cinema HD Display delivers an amazing 2560 x 1600 pixel resolution. Designed speci..", "price":"$100.00"}, {"name":"Canon EOS 5D", "thumb":"http:\/\/store.url\/image\/cache\/catalog\/demo\/canon_eos_5d_1-100x100.jpg", "description":"Canon's press material for the EOS 5D states that it 'defines (a) new D-SLR category', while we're n..", "price":"$100.00"}, . . . , . . . , ]} С серверной частью закончили, переходим к программной части приложения. Что мы будем делать? Получим JSON данные из url Разберем эти данные и актуализируем с listView(textView) Скачаем картинки, кешируем их в приложении и актуализируем по позициям в listView(imageView) Для начала не забудьте дать приложению разрешение на использование сети (в манифесте): <uses-permission android:name="android.permission.INTERNET"/> Также в папку res/drawable мы поместим заглушку для изображений(до того, как они спарсятся) blank.png (100x100px) Теперь разметка. Для простоты будем работать с activity_main и стандартным listView activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <ListView android:id="@+id/lv_products" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:context=".MainActivity" /> </RelativeLayout> Здесь все просто - в релятивную разметку мы поместили listView c id=lv_products Теперь создадим кастомную разметку для этого listView lv_layout.xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/tv_product" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:layout_marginTop="5dp" android:textColor="#195F74" android:textSize="20sp" android:textStyle="bold" /> <ImageView android:id="@+id/iv_thumb" android:layout_width="100dp" android:layout_height="100dp" android:layout_below="@id/tv_product" android:layout_centerVertical="true" android:contentDescription="@string/str_iv_thumb" android:padding="5dp" android:scaleType="fitXY" /> <TextView android:id="@+id/tv_description" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tv_product" android:layout_toRightOf="@id/iv_thumb" android:textSize="16sp" /> <TextView android:id="@+id/tv_price" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/tv_description" android:layout_marginBottom="10dp" android:gravity="right" android:layout_marginRight="5dp" android:textColor="#cc3333" android:textSize="20sp" android:textStyle="bold"/> </RelativeLayout> С разметкой закончили — приступаем к коду Создаем файл ProductsJSONParser.java (это и будет класс парсера) package com.opencart.ocproducstlist; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; import android.content.res.Resources; /** класс парсера JSON данных */ public class ProductsJSONParser { // Получаем JSONObject и возвращаем List public List<HashMap<String, Object>> parse(JSONObject jObject) { JSONArray jProducts = null; try { // Здесь элементы из массива 'products', который мы получаем из контроллера jProducts = jObject.getJSONArray("products"); } catch (JSONException e) { e.printStackTrace(); } // применяем getProducts к массиву объекта JSON // теперь каждый объект - это товар return getProducts(jProducts); } private List<HashMap<String, Object>> getProducts(JSONArray jProducts) { int productCount = jProducts.length(); List<HashMap<String, Object>> productList = new ArrayList<HashMap<String, Object>>(); HashMap<String, Object> product = null; // разбираем товары по одному и добавляем к объекту List for (int i = 0; i < productCount; i++) { try { // вызываем getProduct и парсим, добавляем product = getProduct((JSONObject) jProducts.get(i)); productList.add(product); } catch (JSONException e) { e.printStackTrace(); } } return productList; } // Разбираем JSON-объект product private HashMap<String, Object> getProduct(JSONObject jProduct) { HashMap<String, Object> product = new HashMap<String, Object>(); String name = ""; String thumb = ""; String description = ""; String price = ""; try { // обратите внимание на метод .replaceAll // без него разные "непечатные" символы будут отображаться неправильно name = jProduct.getString("name").replaceAll(""", "\""); thumb = jProduct.getString("thumb"); description = jProduct.getString("description").replaceAll(""", "\"").replaceAll("’", "\'"); price = jProduct.getString("price"); product.put("product", name); // здесь сперва ставим заглушку product.put("thumb", R.drawable.blank); product.put("thumb_path", thumb); product.put("description", description); product.put("price", price); } catch (JSONException e) { e.printStackTrace(); } return product; } } Ну а теперь MainActivity package com.opencart.ocproducstlist; import java.io.BufferedReader; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; import java.util.HashMap; import java.util.List; import org.json.JSONObject; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.os.AsyncTask; import android.os.Bundle; import android.util.Log; import android.view.Menu; import android.widget.ListView; import android.widget.SimpleAdapter; public class MainActivity extends Activity { ListView mListView; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // URL с нашими JSON-данными String strUrl = "http://мойсайт.com/index.php?route=product/category&path=20&json_products"; // определяем задачу по загрузке // и запускаем ее с нашим url DownloadTask downloadTask = new DownloadTask(); downloadTask.execute(strUrl); // ссылаемся на ListView в activity_main mListView = (ListView) findViewById(R.id.lv_products); } /** метод загрузки данных из url */ private String downloadUrl(String strUrl) throws IOException { String data = ""; InputStream iStream = null; try { URL url = new URL(strUrl); // Создаем http соединение, соединяемся и считываем данные HttpURLConnection urlConnection = (HttpURLConnection) url .openConnection(); urlConnection.connect(); iStream = urlConnection.getInputStream(); BufferedReader br = new BufferedReader(new InputStreamReader( iStream)); StringBuffer sb = new StringBuffer(); String line = ""; while ((line = br.readLine()) != null) { sb.append(line); } data = sb.toString(); br.close(); } catch (Exception e) { Log.d("Exception while downloading url", e.toString()); } finally { iStream.close(); } return data; } /** Асинхронно скачиваем json */ private class DownloadTask extends AsyncTask<String, Integer, String> { String data = null; @Override protected String doInBackground(String... url) { try { data = downloadUrl(url[0]); } catch (Exception e) { Log.d("Background Task", e.toString()); } return data; } @Override protected void onPostExecute(String result) { // закончили в non-ui ListViewLoaderTask listViewLoaderTask = new ListViewLoaderTask(); // начинаем парсить listViewLoaderTask.execute(result); } } /** Асинхронно парсим данные и кидаем в listView */ private class ListViewLoaderTask extends AsyncTask<String, Void, SimpleAdapter> { JSONObject jObject; // парсим в non-ui @Override protected SimpleAdapter doInBackground(String... strJson) { try { jObject = new JSONObject(strJson[0]); ProductsJSONParser productsJsonParser = new ProductsJSONParser(); productsJsonParser.parse(jObject); } catch (Exception e) { Log.d("JSON Exception1", e.toString()); } // Инстанцируем класс парсера ProductsJSONParser productsJsonParser = new ProductsJSONParser(); // Список для сохранения List<HashMap<String, Object>> products = null; try { // Получаем спарсеные данные в List (наш список) products = productsJsonParser.parse(jObject); } catch (Exception e) { Log.d("Exception", e.toString()); } // Ключи, которые используем в hashMap String[] from = { "product", "thumb", "description", "price" }; // и айдишники, используемые в listView int[] to = { R.id.tv_product, R.id.iv_thumb, R.id.tv_description, R.id.tv_price }; // задаем адаптер // и закидываем ключи в айдишники SimpleAdapter adapter = new SimpleAdapter(getBaseContext(), products, R.layout.lv_layout, from, to); return adapter; } /** doInBackground выполнен - займемся картинками */ @Override protected void onPostExecute(SimpleAdapter adapter) { // Задаем адаптер для listview mListView.setAdapter(adapter); for (int i = 0; i < adapter.getCount(); i++) { HashMap<String, Object> hm = (HashMap<String, Object>) adapter .getItem(i); String imgUrl = (String) hm.get("thumb_path"); ImageLoaderTask imageLoaderTask = new ImageLoaderTask(); HashMap<String, Object> hmDownload = new HashMap<String, Object>(); hm.put("thumb_path", imgUrl); hm.put("position", i); // запускаем ImageLoaderTask для скачивания // и актуализации картинок в listview imageLoaderTask.execute(hm); } } } /** Асинхронно качаем картинки и помещаем в listView */ private class ImageLoaderTask extends AsyncTask<HashMap<String, Object>, Void, HashMap<String, Object>> { @Override protected HashMap<String, Object> doInBackground( HashMap<String, Object>... hm) { InputStream iStream = null; String imgUrl = (String) hm[0].get("thumb_path"); int position = (Integer) hm[0].get("position"); URL url; try { url = new URL(imgUrl); // создаем соединение и подключаемся HttpURLConnection urlConnection = (HttpURLConnection) url .openConnection(); urlConnection.connect(); // считываем данные iStream = urlConnection.getInputStream(); // директория кеширования File cacheDirectory = getBaseContext().getCacheDir(); // временно сохраняем картинку в кеш-дир File tmpFile = new File(cacheDirectory.getPath() + "/ocpl_" + position + ".png"); // поток в кеш-файл FileOutputStream fOutStream = new FileOutputStream(tmpFile); // из потока в картинку Bitmap b = BitmapFactory.decodeStream(iStream); // пишем файл в темп (png) b.compress(Bitmap.CompressFormat.PNG, 100, fOutStream); // сбрасываем и закрываем поток fOutStream.flush(); fOutStream.close(); // создаем hashMap для передачи картинки // в listview, в соответствии с позицией HashMap<String, Object> hmBitmap = new HashMap<String, Object>(); // сохраняем путь к картинке // и позицию картинки в listview hmBitmap.put("thumb", tmpFile.getPath()); hmBitmap.put("position", position); // возвращаем объект с картинкой и позицией return hmBitmap; } catch (Exception e) { e.printStackTrace(); } return null; } @Override protected void onPostExecute(HashMap<String, Object> result) { // теперь получаем путь и позицию String path = (String) result.get("thumb"); int position = (Integer) result.get("position"); // задаем адаптер SimpleAdapter adapter = (SimpleAdapter) mListView.getAdapter(); // забираем объекты из hashMap // с соответствующей позицией в listview HashMap<String, Object> hm = (HashMap<String, Object>) adapter .getItem(position); // заменяем текущий путь (сейчас "заглушка" - res/drawable/blank.png) hm.put("thumb", path); // и сообщаем listView об изенении содержимого adapter.notifyDataSetChanged(); } } } Запускаем приложение и любуемся результатом: До новых встреч