今日は、子供向けのハイブリッドAndroidアプリに関する記事です。 これらの言葉のあらゆる意味で。 小学生のバックパックについてインタビューするための最も単純なハイブリッド（Java + HTML + Javascript）Androidアプリケーションの作成について説明します。 Java、HTML、およびJavaScriptの基礎に関する最低限の知識が前提となります。 あなたがAndroid開発者であり、最小限の経験しか持っていない場合-この記事はあなたにとって面白くないと思われるため、開くことはできません。 Androidの開発を始めたばかりの人、またはAndroidの開発を開始しようとしている人、Androidの開発の基本に興味がある人は、猫をお願いします。
はじめに。 私の娘（2年生）は、「バックパックの重量が子供の健康に及ぼす影響」に関する研究を依頼されました。 当然、年齢のために、主な仕事は両親に落ちました。 私たちは教室で、バックパックの重さ、重さ（子供の体重の10％を超えてはならないバックパックの重さの基準を計算する）、バックパックを学校に着用する人などについて調査することにしました。 学校の日常生活を多様化するために、娘が所有しているAndroidスマートフォン用のアプリケーション、尋問用アプリケーションを作成することにしました。 当初、バックパックとカブの重量をアンケートに含めることが計画されていましたが、時間がなかったため、これらのパラメーターは昔ながらの方法で葉に記録されました。 カブスが自分で答えることができるという質問だけが残った。
タスクの本質：後輩にインタビューするためのアプリケーションを開発し、娘に重いバックパックを着用することがどれほど有害かについてプレゼンテーションを作成すること。 上の写真では、結果として得られるものを見ることができます。
すぐに予約します。通常はAndroid用のネイティブアプリケーションを開発し、HTMLは純粋にWebアプリケーション用に開発しますが、今回はハイブリッドアプリケーションを開発することにしました。アプリケーションの機能の観点からはより便利です。第三に、Android Studioで開発された最初のプロジェクトでした。新しいツールを使用して時間どおりに完了するときに起こりうる問題を最小限に抑えたかったのです。
それでは始めましょう。 もちろん、Javaコード（コメント内の説明）から開始するには、もちろん、WebViewをアクティビティに追加することを忘れずに、id webViewを割り当てます。
package com.probosoft.survey; import android.os.Build; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.Window; import android.webkit.WebSettings; import android.webkit.WebView; public class MainActivity extends AppCompatActivity { // onCreate, WebView @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // , WebView wv = (WebView) findViewById(R.id.webView); // WebView – - WebSettings settings = wv.getSettings(); // - settings.setDisplayZoomControls(true); // - wv.loadUrl("file://android_asset/html/index.html"); // - } }
テストのindex.htmlをasset / htmlフォルダーに配置します。 実行しようとしています。 何も起こりません。 プロトコルの後にスラッシュの内部リソースにアクセスするときは、2つではなく3つにする必要があるという重要なポイントを見つけます。 変更：
wv.loadUrl("file://android_asset/html/index.html");
に：
wv.loadUrl("file:///android_asset/html/index.html");
やった！ すべてがロードされました。 HTMLとJSコードを書き始めます。
<!DOCTYPE html> <html> <head> <title>Survey</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="vendor/bootstrap/css/bootstrap-theme.css" rel="stylesheet" media="screen"> <link href="vendor/jquery/jquery-ui.min.css" rel="stylesheet" media="screen"> <link href="vendor/jquery/jquery-ui.theme.css" rel="stylesheet" media="screen"> <link href="css/main.css" rel="stylesheet" media="screen"> <style> #menu { width: 100%; } </style> </head> <body> <!— jQuery Bootstrap --> <script src="vendor/jquery/external/jquery/jquery.js"></script> <script src="vendor/jquery/jquery-ui.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.min.js"></script> <!— --> <script src="js/consts.js"></script> <script src="js/respondents.js"></script> <script src="js/survey.js"></script> <script src="js/questions.js"></script> <script src="js/admin.js"></script> <script src="data/respondents.js"></script> <script src="data/questions.js"></script> <div id="menuDiv"> <div class="page-header" onclick="javascript: showResults ();"> <center><h3 id="title"></h3></center> </div> <div style="display: none;" id="clearButton"> <input type="button" value="Clear all" onclick="javascript: clearAll ();"/><br/><br/> </div> <!—- , --> <div style="display: none;" id="showResults"> <input type="button" value="Show results" onclick="javascript: showResults (true);"/><br/><br/> </div> <!—- http://www.w3schools.com/bootstrap/bootstrap_list_groups.asp --> <div id="mainPane"> <ul class="list-group" id="menu"> </ul> </div> <!— --> <div id="resultsPane" style="display: none;"> <form method="post" action="http://serj.by/survey/api/storeSurveyData.php" id="storeForm"> <textarea name="surveyData" id="surveyData" style="width: 100%; height: 100%;" rows=25> </textarea> <input type="submit" value="Store on server"/> <input type="hidden" name="redirectURL" value="."/> </form> </div> </div> <div id="thanks"> !<br/><br/><input type="button" title="Ok" value="!" id="ok"/></div> <script> var respondents; var adminMode = true; // function clearAll () { try { if(typeof(Storage) !== "undefined") { this.storage = localStorage; } } catch (e) { alert ("Local storage error: "+e); } this.storage.clear (); } function init () { $("#mainPane").show (); $("#resultsPane").hide (); if (adminMode) $("#showResults").show (); $("#title").html (" "); var res = dataRespondents; res.forEach (function (element, i, arr) { element.id = i+1; }); respondents = new Respondents (res); respondents.renderRespondents ($("#menu")); $("#storeForm redirectURL").val (document.location.href); } init (); </script> </body> </html>
最初は、AJAXを使用してデータをロードしようとしましたが、WebView内およびローカルリソース上で動作しないことをすぐに確認しました。 したがって、コンテンツをダウンロードするには、かなり矛盾した方法を使用する必要がありました。回答者に関するすべてのデータをグローバル配列に保存するためです。
実行しようとしています。 再び動作しません。 問題は何ですか？ WebViewでは、JavaScriptの実行を許可しませんでした。 修正します。 Javaコードに追加：
settings.setJavaScriptEnabled(true);
今では動作します。 やった！ WebViewでJavaScriptの実行を有効にする必要がありました。 機能クラスを作成します。 コードは提供しません。 GitHubプロジェクトで彼と知り合うことができます（記事の最後）。 ここでは、初心者のハイブリッドアプリケーション開発者が遭遇する主な問題について説明します。
次に、LocalStorageを接続して、プロファイルのデータを保存します。 これを行うには、survey.jsでSurveyの「クラス」を使用します。 伝統的に、その中のコードに関するコメント。
/** * Represents survey for particular respondent * @param integer id Id of respondent */ var Survey = function (in_respondentId, in_respondent) { var respondentId; // Id var respondent = null; // , var questions = null; // var parent = this; // , var storage = null; // LocalStorage this.answers = []; // /** * Begins survey for chosen respondent */ this.start = function () { var res = dataQuestions; // parent.questions = new Questions (res, parent.respondent); // parent.questions.start (); // } /** * Stores all answers in storage */ this.collectAnswersAndStore = function () { this.storage.setItem (window.UNIQUE_STORAGE_ID+this.respondentId, JSON.stringify (this.answers)); // window.init (); // } this.surveyOption = function (val) { this.answers.push (val); // //alert (this.answers); if (!this.questions.advanceQuestion ()) // , { this.collectAnswersAndStore (); // , } } // this.respondentId = in_respondentId; this.respondent = in_respondent; // try { if(typeof(Storage) !== "undefined") { this.storage = localStorage; } } catch (e) { alert ("Local storage error: "+e); } }
すべてが機能しているように見えますが、何も保存されていません。 途中で、私たちは面白い詳細を見つけました-Androidの最新バージョンでは、WebViewのアラートは何もしません... 何もありません。 コンソールにはエラーもメッセージもありません。 彼がそこにいないようです WebViewでLocalStorageを使用するには、WebViewに追加のフラグを設定する必要があることがわかります。 それをやってみましょう：
settings.setDomStorageEnabled(true); settings.setDatabaseEnabled(true);
やった！ LocalStorageが獲得しました。 それがどれくらい短かったのか、週末にかけて使用に適したものが書かれました。 子供は、このレッスンが設置された電話で体育館に送られました。 （教師の助けを借りて、または自分自身で-これは舞台裏に残されていた）男たちは誠意を持ってアンケートに合格し、何らかの理由でクラスを欠席した4人の学生に関するデータはありませんでした。
私の前に問題が発生しました：データを何らかの形で抽出する必要がありました（はい、最初はそれについて考えなければなりませんでしたが、アプリケーションがひどい時間のプレッシャーで開発されたことを忘れないでください、そしてこのタスクは難しくなく、緊急ではなく、後で決定することはかなり可能です）。
主な問題は、娘がかなり古くて弱い電話を持っていることであることが判明しました（「残念なことではないように」という要因を考慮して選んだ）。 Bluetooth経由でデータをプルし、サーバーにAJAXリクエストを送信し、送信用のフォームを作成するなどを試みました。 -オプションなし。 DIVのテキストは選択されていません。DIVの結果、TextAreaでやり直されました（GitHubの最終コードで確認できます）。 そこから、調査の結果を含むテキストを選択してコピーし、電子メールに送信することができました。 その結果、これが唯一の有効なオプションであることが判明しました。
データがExcelテーブルにあるようにスクリプトを作成しています。 この段階で、元のアーキテクチャの別の問題が発生しました。アンケートに合格しなかった生徒には、「アンケートは完了していません」という簡単な線が付けられました。 当然、これらの行の通常のデータ用に設計された正規表現は「つまずいた」。 幸いなことに、そのような行は4つしかありませんでした。 手動で、それらは最終結果から削除され、かなり適切なサンプルを得ました（実際の名前はプレースホルダーに置き換えられました）：
1, : ,, 2. 2, : , , 4. 3, : , , , 5. 5, : ,, 6. 6, : , , 7. 7, : , , 8. 8, : ,, 9. 9, : , , 10. 10, : , , 11. 11, : , , 12. 12, : , , 14. 14, : ,, 16. 16, : , - , 17. 17, : , , 18. 18, : , - , 19. 19, : , , , 21. 21, : , - , 22. 22, : ,, 23. 23, : , , 24. 24, : , ,
もちろん、これをすべて電話で変換することもできましたが、とても簡単に思えました。 これは、単純な正規表現によってすでに簡単に理解されています。 PHPスクリプトを作成しています。
<pre> <?php function normLastOption ($s) { switch ($s) { case "": return " "; case "": return " "; case "": return " , "; } } $results = []; $data = "”; preg_match_all ("/(((\d+)\. (.+), (.+): (.+),(.+),(.+)))+ /U", $data, $results); print_r ($results); $csv = ""; foreach ($results [3] as $key => $value) { $csv .= " ".($key+1).",".$results [6] [$key].",".$results [7] [$key].",".normLastOption($results [8] [$key])."\n"; } print $csv; $f = fopen ("survey.csv", "w"); fwrite ($f, $csv); fclose ($f); ?>
コードからわかるように、スペースの存在による最後のパラメーターは、最初は誤って解析されました。 正しい正規表現をどのように書くことができますか、時間がないために再び気にしませんでした。 誰かがコメントで私に言うことができるならば-どうもありがとう！
そのため、このアプリケーションは、そのシンプルさにもかかわらず、その機能を完全に果たしました。子供たちがどのようにバックパックを使用するかに関するデータを収集しました。 データはレポートとプレゼンテーションに含まれ、教師によって正常に承認されました。
したがって、Android向けのシンプルなハイブリッドアプリケーションを開発し、そこからデータを取得しました。
Githubの完全なアプリケーションコードはMITライセンスです。 誰かが「膝の上で」そのようなことを必要とする場合-あなたの健康にそれを使用してください！