Update android roadmap

astro
Kamran Ahmed 2 years ago
parent 4e44595948
commit 5dfd43b1e4
  1. 58
      src/components/ResourcesAlert.astro
  2. 12
      src/roadmaps/android/android.md

@ -1,5 +1,5 @@
---
import Icon from "./Icon.astro";
import Icon from './Icon.astro';
export interface Props {
roadmapPermalink: string;
@ -8,20 +8,48 @@ export interface Props {
const { roadmapPermalink } = Astro.props;
const roadmapId = roadmapPermalink.replace(/\//, '');
const roadmapTitle = roadmapId === 'devops' ? 'DevOps' : `${roadmapId.charAt(0).toUpperCase()} ${roadmapId.slice(1)}`;
const hasTNSBanner = ['frontend', 'backend', 'devops'].includes(roadmapId);
const roadmapTitle =
roadmapId === 'devops'
? 'DevOps'
: `${roadmapId.charAt(0).toUpperCase()}${roadmapId.slice(1)}`;
---
<div class="mt-4 sm:mt-7 border rounded-md mb-0 sm:-mb-[82px]">
<!-- Alert for the Sister Site -->
<div class="px-2 py-1.5 border-b bg-gray-100 hidden sm:block">
<p class="text-sm">Get the latest {roadmapTitle} news from our sister site <a href="#" class="font-semibold underline">TheNewStack.io</a></p>
<div
class:list={[
'mt-4 sm:mt-7 border rounded-md mb-0',
{
'sm:-mb-[82px]': hasTNSBanner,
'sm:-mb-[65px]': !hasTNSBanner,
},
]}
>
{
hasTNSBanner && (
<div class='px-2 py-1.5 border-b bg-gray-100 hidden sm:block'>
<p class='text-sm'>
Get the latest {roadmapTitle} news from our sister site{' '}
<a href='#' class='font-semibold underline'>
TheNewStack.io
</a>
</p>
</div>
)
}
<!-- Desktop: Roadmap Resources - Alert -->
<div class="hidden sm:flex justify-between px-2 bg-white items-center rounded-bl-md rounded-br-md">
<p class="text-sm">
<div
class:list={[
'hidden sm:flex justify-between px-2 bg-white items-center',
{
'rounded-bl-md rounded-br-md': hasTNSBanner,
'rounded-md': !hasTNSBanner,
},
]}
>
<p class='text-sm'>
<span
class="text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5"
class='text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5'
>New</span
>
Resources are here, try clicking nodes
@ -29,19 +57,19 @@ const roadmapTitle = roadmapId === 'devops' ? 'DevOps' : `${roadmapId.charAt(0).
<a
href={`${roadmapPermalink}/topics`}
class="inline-flex items-center justify-center py-1.5 text-sm font-medium rounded-md hover:text-black text-gray-500 px-1"
class='inline-flex items-center justify-center py-1.5 text-sm font-medium rounded-md hover:text-black text-gray-500 px-1'
>
<Icon icon="search" />
<span class="ml-2">Search Topics</span>
<Icon icon='search' />
<span class='ml-2'>Search Topics</span>
</a>
</div>
<!-- Mobile - Roadmap resources alert -->
<p
class="block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white relative"
class='block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white relative'
>
Click roadmap items for resources or visit{" "}
<a href={`${roadmapPermalink}/topics`} class="text-blue-700 underline">
Click roadmap items for resources or visit{' '}
<a href={`${roadmapPermalink}/topics`} class='text-blue-700 underline'>
resources list
</a>
.

@ -1,5 +1,5 @@
---
jsonUrl: "/jsons/android.json"
# jsonUrl: "/jsons/android.json"
pdfUrl: "/pdfs/android.pdf"
order: 4
featuredTitle: "Android"
@ -44,7 +44,7 @@ There are multiple ways to develop applications for Android; you can go down the
Here is the full version of the roadmap in a single image and after that we have the broken down version with the resources and links to learn more about each of the boxes.
[![](/assets/roadmaps/android/roadmap.svg)](/assets/roadmaps/android/roadmap.png)
[![](/roadmaps/android/roadmap.svg)](/roadmaps/android/roadmap.png)
## Broken Down Version
Below is the broken down version of the roadmap with links and resources to learn more about each of the items listed in the complete roadmap above.
@ -52,14 +52,14 @@ Below is the broken down version of the roadmap with links and resources to lear
## Pick a Language
For the languages, you can develop Android apps either by using Kotlin or Java.
[![](/assets/roadmaps/android/pick-language.svg)](/assets/roadmaps/android/pick-language.svg)
[![](/roadmaps/android/pick-language.svg)](/roadmaps/android/pick-language.svg)
Although, you can use both [Kotlin](https://en.wikipedia.org/wiki/Kotlin_(programming_language)) and [Java](https://en.wikipedia.org/wiki/Java_(programming_language)) to develop native Android apps, [Google announced in 2019](https://android-developers.googleblog.com/2019/05/google-io-2019-empowering-developers-to-build-experiences-on-Android-Play.html) to make Kotlin the preferred way of developing Android applications. If you were to start learning Android development today, Kotlin should be your language of choice.
## The Fundamentals
Install [Android Studio](https://developer.android.com/studio) and learn the basics of Kotlin to get started.
[![](/assets/roadmaps/android/the-fundamentals.png)](/assets/roadmaps/android/the-fundamentals.png)
[![](/roadmaps/android/the-fundamentals.png)](/roadmaps/android/the-fundamentals.png)
We have also listed down some free resources which you can use for the items listed in the image above. If you have some better ones, please do suggest. Also, you don't need to go through all of them, just go through them and pick what you like.
@ -75,7 +75,7 @@ Note: Android Studio comes with a working installation of Gradle, so you don’t
## Version Control Systems
Version Control Systems record your changes to the codebase and allow you to recall specific versions later. There are multiple Version Control Systems available, but [Git](https://git-scm.com/) is the most common one these days.
[![](/assets/roadmaps/android/git-github.png)](/assets/roadmaps/android/git-github.png)
[![](/roadmaps/android/git-github.png)](/roadmaps/android/git-github.png)
Here are some of the resources to get you started. Feel free to google and find something else that you find easier.
@ -86,7 +86,7 @@ Here are some of the resources to get you started. Feel free to google and find
Here is the list of items that you are going to need when developing Android applications. Please note that this is an exhaustive list, and you don't need to know it all from the get-go. Get an idea of the items listed, and just start building some apps and keep the items listed in the back of your mind and have a deep dive when using them.
[![](/assets/roadmaps/android/build-an-application.png)](/assets/roadmaps/android/build-an-application.png)
[![](/roadmaps/android/build-an-application.png)](/roadmaps/android/build-an-application.png)
To learn more about the items listed in the image above, here are the links to the relevant docs.

Loading…
Cancel
Save