TL;DR:<\/strong> I had a perfectly functional HTML file. It worked in every browser. It was beautiful. Then I decided to turn it into an Android app.<\/p>\n\n\n\n It started so simply. I had a web page. Just HTML, CSS, and JavaScript. It worked. It was fast. It was elegant. It embodied the KISS principle – Keep It Simple, Stupid.<\/p>\n\n\n\n “I should turn this into an Android app,” I thought, with the blissful ignorance of someone who’s never done this before.<\/p>\n\n\n\n “Apache Cordova makes it easy!” the internet promised. “Just wrap your web app in a native container!”<\/p>\n\n\n\n Narrator: It would not be easy.<\/em><\/p>\n\n\n\n First, I needed to install some software. Just a few things:<\/p>\n\n\n\n Each of these requires setting environment variables. ANDROID_HOME, JAVA_HOME, PATH modifications. Your .bashrc file, once a pristine 10 lines, is now a novel.<\/p>\n\n\n\n Installation time:<\/strong> 45 minutes “Let’s create a Cordova project!” I said, still optimistic.<\/p>\n\n\n\n This worked! Hope surged through my veins.<\/p>\n\n\n\n This also worked! I was unstoppable!<\/p>\n\n\n\n Ah yes. Version incompatibility. The universal language of software development.<\/p>\n\n\n\n But wait, there’s more:<\/p>\n\n\n\n Time spent googling error messages:<\/strong> 1.5 hours In the Java\/Android world, there’s a magical file called Mine was not.<\/p>\n\n\n\n Was it user error? A cosmic alignment issue? Mercury in retrograde? Nobody knows.<\/p>\n\n\n\n I tried:<\/p>\n\n\n\n Eventually, we just used the system Gradle directly. Why have a wrapper when you can have… no wrapper?<\/p>\n\n\n\n Philosophical crises experienced:<\/strong> 2 Every Cordova project has a Wrong.<\/p>\n\n\n\n My automatically generated config.xml referenced:<\/p>\n\n\n\n Each missing file produced a warning. Or an error. Sometimes both! Russian roulette for your build process.<\/p>\n\n\n\n The solution? Manually create every missing file, or delete every reference to them. Choose your own adventure!<\/p>\n\n\n\n File not found.<\/em><\/p>\n\n\n\n File not found.<\/em><\/p>\n\n\n\n Then why are they IN THE DEFAULT CONFIG FILE?<\/p>\n\n\n\n Time spent editing XML:<\/strong> 30 minutes Let’s play a game called “Which Build Tools Version Do You Actually Need?”<\/p>\n\n\n\n The solution? Edit Then the build still failed because of an “ambiguous method overloading” error in Cordova’s own code. The fix? Downgrade Cordova Android from 14.0.1 to 13.0.0. Then to 12.0.1 when 13 also had issues.<\/p>\n\n\n\n Versions tried:<\/strong> 4 Finally, a real error with a real solution:<\/p>\n\n\n\n This file is supposed to tell Android that your app can make network requests. A reasonable thing for a web app to need. But Cordova doesn’t create it by default.<\/p>\n\n\n\n The solution? Manually create the file:<\/p>\n\n\n\n Put it in: A path so intuitive, so obvious, that only someone who’s memorized the entire Android project structure would know it.<\/p>\n\n\n\n Time to find the solution:<\/strong> 15 minutes After installing seven pieces of software, resolving four version conflicts, creating three missing files, and downgrading two packages, I ran:<\/p>\n\n\n\n And it worked.<\/p>\n\n\n\n BUILD SUCCESSFUL.<\/p>\n\n\n\n My HTML file, which was 50 lines of perfectly functional code, was now wrapped in:<\/p>\n\n\n\n The APK installed on my phone. The app launched. It displayed my HTML file.<\/p>\n\n\n\n Exactly as it had in the browser 3 hours ago.<\/em><\/p>\n\n\n\n What the KISS Principle Says:<\/strong> “Keep it simple, stupid. Use the simplest solution that works.”<\/p>\n\n\n\n What I Actually Did:<\/strong><\/p>\n\n\n\n The Punchline:<\/strong> I could have just:<\/p>\n\n\n\n But where’s the adventure in that?<\/p>\n\n\n\n Want to turn your web app into an Android app the KISS way?<\/p>\n\n\n\n Option 1: PWA (Progressive Web App)<\/strong><\/p>\n\n\n\n Time required:<\/strong> 5 minutes Option 2: Just Use the Browser<\/strong> Your HTML file already works in every mobile browser. Maybe just… use that?<\/p>\n\n\n\n I now have an Android app. It works. It’s installed on my phone. Mission accomplished.<\/p>\n\n\n\n Was it worth it? That depends. Do you measure worth in:<\/p>\n\n\n\n Would I do it again?<\/p>\n\n\n\n Ask me after I’ve recovered from this trauma.<\/p>\n\n\n\n Final Stats:<\/strong><\/p>\n\n\n\n This blog post was written in Markdown, compiled to HTML, and viewed in a browser – a process that took 30 seconds and required zero dependencies. The irony is not lost on me.<\/em><\/p>\n\n\n\n I had another web site I wanted to turn into an app and the second time around was much easier, but still had some issues. I created a folder with a “www” subfolder with the files in it. But when you create a cordova project it overwrites those. So you have to first create the project and then move your html into the www folder. But overall it was pretty painless the second time around.<\/p>","protected":false},"excerpt":{"rendered":" Or: How I Learned to Stop Worrying and Embrace 47 Dependencies TL;DR: I had a perfectly functional HTML file. It worked in every browser. It was beautiful. Then I decided to turn it into an Android app.<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_eb_attr":"","footnotes":""},"categories":[171,192,143],"tags":[],"class_list":["post-7501","post","type-post","status-publish","format-standard","hentry","category-ai","category-android-app","category-computer-stuff"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"Bob","author_link":"https:\/\/robertjwallace.com\/es\/author\/admin\/"},"_links":{"self":[{"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/posts\/7501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/comments?post=7501"}],"version-history":[{"count":2,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/posts\/7501\/revisions"}],"predecessor-version":[{"id":7506,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/posts\/7501\/revisions\/7506"}],"wp:attachment":[{"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/media?parent=7501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/categories?post=7501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/tags?post=7501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\n\n\n\n\n\n\nChapter 1: The Innocence<\/h3>\n\n\n\n
\n\n\n\nChapter 2: The Descent Begins<\/h3>\n\n\n\n
\n
Lines of bash script to automate this:<\/strong> 200+
Times I questioned my life choices:<\/strong> 7<\/p>\n\n\n\n
\n\n\n\nChapter 3: Version Hell<\/h3>\n\n\n\n
cordova create myapp com.example.myapp MyApp\n<\/code><\/pre>\n\n\n\ncordova platform add android\n<\/code><\/pre>\n\n\n\ncordova build android\n<\/code><\/pre>\n\n\n\nFAILURE: Build failed with an exception.\n* What went wrong:\nNo usable Android build tools found. Highest 35.x installed version is 34.0.0; \nRecommended version is 35.0.0.\n<\/code><\/pre>\n\n\n\n\n
Number of Stack Overflow tabs open:<\/strong> 23
Faith in humanity:<\/strong> Declining<\/p>\n\n\n\n
\n\n\n\nChapter 4: The Mystery of the Missing gradlew<\/h3>\n\n\n\n
gradlew<\/code>. It’s the Gradle Wrapper. It’s supposed to be automatically generated when you add the Android platform.<\/p>\n\n\n\n\n
Files manually created that should have been automatic:<\/strong> 4
Gradle daemon restarts:<\/strong> Too many to count<\/p>\n\n\n\n
\n\n\n\nChapter 5: The Config File Chronicles<\/h3>\n\n\n\n
config.xml<\/code>. This file is supposed to configure your app. Simple, right?<\/p>\n\n\n\n\n
<icon src=\"www\/res\/icon\/android\/drawable-hdpi-icon.png\" density=\"hdpi\" \/>\n<\/code><\/pre>\n\n\n\n<resource-file src=\"resources\/android\/xml\/network_security_config.xml\" ... \/>\n<\/code><\/pre>\n\n\n\nThe \"<splash>\" tags were detected and are no longer supported.\n<\/code><\/pre>\n\n\n\n
Nostalgia for simpler times (like yesterday):<\/strong> Intense
Urge to just email the APK to myself:<\/strong> Growing<\/p>\n\n\n\n
\n\n\n\nChapter 6: Build Tools: A Version Odyssey<\/h3>\n\n\n\n
\n
cdv-gradle-config.json<\/code> to use version 34. Because manually specifying versions in a configuration file is EXACTLY what “easy cross-platform development” means.<\/p>\n\n\n\n{\n \"BUILD_TOOLS_VERSION\": \"34.0.0\"\n}\n<\/code><\/pre>\n\n\n\n
Versions that worked:<\/strong> 1
Sense of accomplishment:<\/strong> Replaced by exhaustion<\/p>\n\n\n\n
\n\n\n\nChapter 7: The Network Security Config That Time Forgot<\/h3>\n\n\n\n
ERROR: resource xml\/network_security_config not found\n<\/code><\/pre>\n\n\n\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<network-security-config>\n <base-config cleartextTrafficPermitted=\"true\">\n <trust-anchors>\n <certificates src=\"system\" \/>\n <\/trust-anchors>\n <\/base-config>\n<\/network-security-config>\n<\/code><\/pre>\n\n\n\nplatforms\/android\/app\/src\/main\/res\/xml\/<\/code><\/p>\n\n\n\n
Time to implement it:<\/strong> 30 seconds
Ratio of searching to doing:<\/strong> 30:1<\/p>\n\n\n\n
\n\n\n\nChapter 8: Victory (?)<\/h3>\n\n\n\n
gradle assembleDebug\n<\/code><\/pre>\n\n\n\n\n
\n\n\n\nEpilogue: Lessons Learned<\/h3>\n\n\n\n
\n
\n
manifest.json<\/code> to my HTML file (5 minutes)<\/li>\n\n\n\n
\n\n\n\nAppendix A: The REAL KISS Solution<\/h3>\n\n\n\n
\n
manifest.json<\/code>:<\/li>\n<\/ol>\n\n\n\n{\n \"name\": \"My App\",\n \"short_name\": \"App\",\n \"start_url\": \"\/\",\n \"display\": \"standalone\",\n \"icons\": [{\"src\": \"icon.png\", \"sizes\": \"192x192\"}]\n}\n<\/code><\/pre>\n\n\n\n\n
<link rel=\"manifest\" href=\"manifest.json\">\n<\/code><\/pre>\n\n\n\n\n
Dependencies installed:<\/strong> 0
Version conflicts resolved:<\/strong> 0
Sanity preserved:<\/strong> 100%<\/p>\n\n\n\n
\n\n\n\nAppendix B: What I Actually Learned<\/h3>\n\n\n\n
\n
\n\n\n\nConclusi\u00f3n<\/h3>\n\n\n\n
\n
\n\n\n\n\n
\n\n\n\nAfter thoughts<\/h2>\n\n\n\n