App
The app page allows users to download your app. Links to app stores and direct download links will be offered.
Tests
E2E Test
Before implementing the app page we will create an E2E test in Qase. Add a new test case to the "Web Exclusive" suite named "App Download":
It is sufficient to check that the download works without actually testing that the downloaded file works. When doing release testing post-release we will use those links to download the app to test. So in this way the downloaded files get test coverage over time. The same applies to the app store badge links. The apps installed from the app store also get coverage over time as sometimes during release testing we will use the app directly installed from an app store.
For more information about the Epic Fantasy Forge release testing strategy see the Testing and Releases pages of this guide.
Integration Tests
There is nothing for us to test at the integration level as the app page has no logic or any kind of code.
Unit Tests
There is nothing for us to test at the unit level since the app page has no logic or any kind of code.
Production Code
HTML
The full source code of the Epic Fantasy Forge app download page can be found in the file download.html.heex.
Now add the below HTML to the download.html.heex file located at lib/epic_fantasy_forge_web/controllers/page_html:
download.html.heex
<div class="bg-gray-900 mx-auto max-w-7xl text-white px-4 sm:px-8">
<h1 class="
mt-12
mb-12
text-5xl
font-extrabold
tracking-tight
text-pretty
text-white
text-center
drop-shadow-lg
sm:text-6xl
">
<span class="
bg-gradient-to-r
from-indigo-400
via-purple-400
to-pink-400
bg-clip-text
text-transparent">
Download App
</span>
</h1>
<div class="
mt-10
grid
grid-cols-1
lg:grid-cols-3
gap-10
items-stretch">
<div class="lg:col-span-2 flex flex-col gap-10 h-full">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10 h-full items-stretch">
<div class="
bg-gradient-to-br
from-gray-800
to-gray-900
border
border-blue-500/100
rounded-3xl
shadow-2xl
p-8
flex
flex-col
items-center">
<div class="flex flex-col items-center flex-1">
<h3 class="text-3xl font-bold mb-6 tracking-wide">Windows</h3>
</div>
<div class="w-full mt-auto">
<ul class="space-y-3">
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-blue-500
hover:bg-blue-400
transition-colors
font-semibold
shadow"
download
>
Installer
<span class="ml-2 text-xs text-gray-200">x86 64-bit</span>
</a>
</li>
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-blue-500
hover:bg-blue-400
transition-colors
font-semibold
shadow"
download
>
Portable
<span class="ml-2 text-xs text-gray-200">x86 64-bit</span>
</a>
</li>
</ul>
<!-- Hidden until app is available in app stores -->
<img
class="hidden mx-auto mt-8 h-16 object-contain"
src="https://get.microsoft.com/images/en-us%20dark.svg"
alt="Download from the Microsoft Store"
/>
</div>
</div>
<div class="
bg-gradient-to-br
from-gray-800
to-gray-900 border
border-violet-700/100
rounded-3xl
shadow-2xl
p-8
flex
flex-col
items-center">
<div class="flex flex-col items-center flex-1">
<h3 class="text-3xl font-bold mb-6 tracking-wide">macOS</h3>
</div>
<div class="w-full mt-auto">
<ul class="space-y-3">
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-violet-700
hover:bg-violet-600
transition-colors
font-semibold
shadow"
download
>
DMG <span class="ml-2 text-xs text-gray-200">ARM 64-bit</span>
</a>
</li>
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-violet-700
hover:bg-violet-600
transition-colors
font-semibold
shadow"
download
>
ZIP <span class="ml-2 text-xs text-gray-200">ARM 64-bit</span>
</a>
</li>
</ul>
<!-- Hidden until app is available in app stores -->
<img
class="hidden mx-auto mt-8 h-16 object-contain"
src={~p"/images/badges/app-store-mac-badge.svg"}
alt="Download on the Mac App Store"
/>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10 h-full items-stretch">
<div class="
bg-gradient-to-br
from-gray-800
to-gray-900
border
border-green-600/100
rounded-3xl
shadow-2xl
p-8
flex
flex-col
items-center">
<div class="flex flex-col items-center flex-1 w-full">
<h3 class="text-3xl font-bold mb-6 tracking-wide">Android</h3>
</div>
<div class="w-full mt-auto">
<ul class="space-y-3">
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-green-600
hover:bg-green-500
transition-colors
font-semibold
shadow"
download
>
APK <span class="ml-2 text-xs text-gray-200">ARM 64-bit</span>
</a>
</li>
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-green-600
hover:bg-green-500
transition-colors
font-semibold
shadow"
download
>
AAB <span class="ml-2 text-xs text-gray-200">ARM 64-bit</span>
</a>
</li>
</ul>
<!-- Hidden until app is available in app stores -->
<img
class="hidden mx-auto mt-8 h-16 object-contain"
src={~p"/images/badges/google-play-badge.png"}
alt="Get it on Google Play"
/>
</div>
</div>
<div class="
bg-gradient-to-br
from-gray-800
to-gray-900
border
border-rose-600/100
rounded-3xl
shadow-2xl
p-8
flex
flex-col
items-center">
<div class="flex flex-col items-center flex-1 w-full">
<h3 class="text-3xl font-bold mb-6 tracking-wide">iOS</h3>
</div>
<div class="w-full mt-auto">
<ul class="space-y-3">
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-rose-600
hover:bg-rose-500
transition-colors
font-semibold
shadow"
download
>
IPA <span class="ml-2 text-xs text-gray-200">ARM 64-bit</span>
</a>
</li>
</ul>
<!-- Hidden until app is available in app stores -->
<img
class="hidden mx-auto mt-8 h-16 object-contain"
src={~p"/images/badges/app-store-badge.svg"}
alt="Download on the App Store"
/>
</div>
</div>
</div>
</div>
<div class="flex flex-col h-full">
<div class="
bg-gradient-to-br
from-gray-800
to-gray-900
border
border-orange-500/100
rounded-3xl
shadow-2xl
p-8
flex
flex-col
items-center">
<div class="flex flex-col items-center flex-1 w-full">
<h3 class="text-3xl font-bold mb-6 tracking-wide">Linux</h3>
</div>
<div class="w-full mt-auto">
<ul class="space-y-3">
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-indigo-600
hover:bg-indigo-500
transition-colors
font-semibold
shadow"
download
>
Portable
<span class="ml-2 text-xs text-gray-200">x86 64-bit</span>
</a>
</li>
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-indigo-600
hover:bg-indigo-500
transition-colors
font-semibold
shadow"
download
>
Portable
<span class="ml-2 text-xs text-gray-200">ARM 64-bit</span>
</a>
</li>
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-purple-700
hover:bg-purple-600
transition-colors
font-semibold
shadow"
download
>
AppImage
<span class="ml-2 text-xs text-gray-200">x86 64-bit</span>
</a>
</li>
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-purple-700
hover:bg-purple-600
transition-colors
font-semibold
shadow"
download
>
AppImage
<span class="ml-2 text-xs text-gray-200">ARM 64-bit</span>
</a>
</li>
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-orange-500
hover:bg-orange-400
transition-colors
font-semibold
shadow"
download
>
DEB <span class="ml-2 text-xs text-gray-200">x86 64-bit</span>
</a>
</li>
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-orange-500
hover:bg-orange-400
transition-colors
font-semibold
shadow"
download
>
DEB <span class="ml-2 text-xs text-gray-200">ARM 64-bit</span>
</a>
</li>
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-blue-600
hover:bg-blue-500
transition-colors
font-semibold
shadow"
download
>
RPM <span class="ml-2 text-xs text-gray-200">x86 64-bit</span>
</a>
</li>
<li>
<a
href="#"
class="
flex
items-center
justify-between
px-5
py-3
rounded-xl
bg-blue-600
hover:bg-blue-500
transition-colors
font-semibold
shadow"
download
>
RPM <span class="ml-2 text-xs text-gray-200">ARM 64-bit</span>
</a>
</li>
</ul>
<!-- Hidden until app is available in app stores -->
<div class="
hidden
flex
flex-col
sm:flex-row
lg:flex-col
gap-4
w-full
justify-center">
<img
class="mx-auto mt-8 h-16 object-contain"
src="https://flathub.org/api/badge?locale=en"
alt="Get it on Flathub"
/>
<img
class="mx-auto mt-4 sm:mt-8 lg:mt-4 h-16 object-contain"
src={~p"/images/badges/snap-store-badge.svg"}
alt="Get it from the Snap Store"
/>
</div>
</div>
</div>
</div>
</div>
</div>
As we haven't made a release yet the download links currently remain empty. They will be populated later once we make our first release for each platform. The app store badges also currently don't link anywhere. For this reason they remain hidden for the time being.
Your app download page should now look something like this:
The "hidden" class was removed from the app store badges before generating the screenshot. In practice those badges are not shown currently as our app is not in the app stores yet.