If you have never built a mobile application and you wish to do so, then you are in the right place. This blog will show you some easy simple steps to create a simple Hello-World application that runs on your iOS device (iPhone).
There are many tools you can use in your first mobile application such as Expo, Ionic, NativeScripts, and many others. I’m going to be using Expo because it is a great tool that works across platforms (iOS, Android, Web, and even Desktop), therefore, you only need to write your application once. Also, the way you build and run your application is easy and straightforward. So let's get started:
Get NodeJS Ready on Your Machine
Expo was built to serve React and React Native applications so make sure you have NodeJS installed on your machine. If you are using Linux-Ubuntu, I got the command handy for you. So just run the following commands in your terminal:
$ sudo apt update
$ sudo apt install nodejs
$ sudo apt install npmThis will update your package manager and then install Node.js latest version directly from the repositories. The last command is to install npm (Node.js package manager) which is required later on to install modules and packages for Node.js
Get Expo CLI
The Expo CLI (Command Line Tool) is where you are going to interact with the Expo tool. However, once you start your project (I will explain this in a moment), Expo will open your browser and fire up a GUI that you can also use instead of the command line. To get Expo CLI, run the following command:
$ npm install — global expo-cliDownload Expo Client on your iOS Device
On your iPhone, go to the app store and search for Expo Client then download it. Once downloaded, create your account to link Expo Client to your projects.
Create Your First Project
In your terminal, run the following command to create your first “Hello Wolrd” project using Expo:
$ expo init hello-worldAfter you run the command, in the terminal it will ask you to choose a template. For now, choose “blank a minimal app as clean as an empty canvas.” Just as described, this will create an empty project that has all the basic elements to run on your device.
It will take a few seconds to finish building your first hello-world project. Once it is complete, navigate to hello-world directory $ cd hello-world
Start the Server
Inside the project directory run $ expo start to load your project to the HTTP server. In other words, this will run your project so you can see it either on your device or on the emulator.
Open Expo Client on Your iPhone
You could do this in a few ways:
1) From your iOS device scan (using your camera) the QR code that shows up in your terminal. A message will appear on the top of your device indicating to open your Expo Client. Just click on it and it will open Expo and fire up your project.
2) You can get a link to your email, as it shows in the terminal, to fire up Expo Client with your project.
3) You can just directly open Expo Client and if you are connected to the same account, all your projects will show on the main screen. You can click on the one that has a green dot indicating it is currently loaded to the server.
Print Hello World
When your app first opens, it will show the text “Open up App.js to start working on your app!” Exactly as it instructs, open your project using your favorite editor, for me I’m using VS-Code, then navigate to App.js and change the Text tag to say “Hello World!” like this:
<Text>Hello World!</Text>Watch the magic on your phone and see how cool is live updates.
Here you go, now you know how to make a Hello World Application on your phone. By the way, if you have an Android device, it is almost the same steps. Hope that was helpful in making your first mobile application. If you would like to add anything, please comment below.
