Eetu Kaunismäki
Boikot It!
Thesis
Information and Communication Technology
2018
Author (authors) Degree Time Eetu Kaunismäki Bachelor of Information and
Communication Technology (AMK)
December 2018 Thesis Title
Boikot It!
36 Pages
1 pages of appendices
Commissioned by Punos Mobile Oy Supervisor
Niina Mässeli Senior Lecturer Abstract
This thesis aims to research development of apps using React Native, while also researching the Heroku Cloud, for app login and hosting, and Salesforce for database services. The app will be called “Boikot It” and shall function as a mobile app for writing up boycotts for different restaurants with reasoning and duration in days, which would both be viewable by the friends of the writers.
The programming language will be React Native, which will be researched during the development of the Boikot It app. Once the front-end of the app is complete, it will be uploaded to Heroku Cloud, add-on for login services will be added and the app will be connected to Salesforce for database access.
This thesis will detail the steps taken while developing the Boikot It -app by telling what components and functionalities were added and when they were added, while additionally explaining why these choices were made. Inside each section a figure will be shown for visual representation of the resulting look with a description of what was achieved.
Only the goal of researching the development of an app using React Native was completely achieved, as the Boikot It -app was developed to be ready for Heroku Cloud deployment.
The deployment to Heroku was not completed due to the use of Expo and configuration mistakes during development, being thus only explored in theory. Subsequently Salesforce database integration could not be achieved in the thesis timeframe as it depended partially on Heroku deployment.
Keywords
React Native, Salesforce, Javascript, React, Heroku, Expo, Programming
SISÄLLYS
1 INTRODUCTION ... 5
2 TOOLS & DESIGN ... 6
2.1 What is React Native? ... 6
2.1.1 Formatting ... 6
2.1.2 Variables ... 7
2.1.3 History ... 8
2.1.4 Expo... 8
2.2 Heroku ... 9
2.2.1 Dyno ... 9
2.2.2 Buildpack ... 11
2.2.3 Heroku Connect ... 11
2.2.4 Deploying of a Project to Heroku ... 12
2.2.5 History ... 13
2.3 Salesforce ... 13
2.3.1 Trailhead ... 14
2.3.2 Sales Cloud ... 15
2.3.3 Marketing Cloud ... 16
2.3.4 Commerce Cloud ... 18
2.3.5 Service Cloud ... 20
3 MEANING AND GOALS ... 21
3.1 Researching React Native ... 21
3.2 Study of utilizing Heroku ... 21
3.3 Use of Salesforce as a database ... 21
4 CREATION OF THE APP WITH REACT NATIVE ... 22
4.1 Getting the app visible on a mobile device ... 23
4.2 Buttons ... 23
4.3 Navigation ... 24
4.4 Ordering of classes ... 25
4.5 Slider and Multiline TextInput... 27
4.6 Google Maps Implementation ... 28
4.7 Modals ... 30
4.8 Repeating components ... 31
4.9 Permissions, Location and Yelp... 33
5 FUTURE DEVELOPMEMNT ... 34
6 CONCLUSIONS ... 36
SOURCES ... 38
LIST OF FIGURES ... 41 ANNEXES
Annex 1. Normal use flow after development
1 INTRODUCTION
The subject of this thesis is the creation of a mobile app using React Native.
The app will be a tool for marking different restaurants with various reasons, so that the user can avoid these places again for a while.
Learning to write mobile apps with React Native can be interesting, as it is automatically converted to work on both iOS and Android devices. The subject was chosen as a target for learning React Native, in addition to allowing
exploration of implementing Heroku and Salesfoce on apps outside of Salesforce, which could be valuable knowledge for Punos Mobile Oy in the future.
The focus of this thesis will be on creation of the mobile app and if time allows, integration of both Heroku and Salesforce functionalities into the app.
The purpose of this thesis is to explore the usage of Heroku and Salesforce with custom-made mobile apps. The aim is to answer these questions: ”how can Heroku be utilized as a log in provider?” and ”how can Salesforce be used as a data-backend?”. However, the main goal is to research coding with the React Native programming language.
To reach these goals, a mobile app will be programmed using React Native, which will then be uploaded to Heroku for log in services and Salesforce data access.
The author’s knowledge of React Native and Heroku is minimal, but general programming tips and tricks learned on various lessons during studies will aid immensely with the research of React Native from scratch. Particularly Object- oriented programming is bound to be useful, as React Native utilizes objects heavily.
Concepts learned during the thesis will also enable the author to provide input in several new situations in addition to being able to create much more varied types of projects.
This thesis will first go over the history and other important aspects of React Native, Heroku and Salesforce to explain why they were chosen, before proceeding to the creation of Boikot It -app. Some of the most important
sources for information in this thesis are Salesforce’s trailhead, as it covers an
enormous number of topics in detail, Facebooks official React Native
documentary due to its detailed documentation of React Native and the book Heroku: Up and Running by Schneeman and Middleton (2013), which covers much of Heroku functionality.
2 TOOLS & DESIGN 2.1 What is React Native?
React Native is a Javascript framework used for building real mobile apps instead of mobile web-, HTML5- or hybrid apps. The word “real” here means that the mobile apps are build using the fundamental UI blocks identical to the blocks used by pure iOS and Android apps. This results in apps that are indistinguishable from those built with Objective-C or Java languages, even though they are written in Javascript and React. (React Native v0.57, 2018)
2.1.1 Formatting
React Native is written in such a way that it is reminiscent of XML coding also known as JSX, below is an illustration of how React Native code looks like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
Shown in Figure 1 is everything needed for showing items on the screen when the app is run. The app will show the first class from top inside its source code, said class may refer to other classes in its render function, which would be included just like any other component such as a <Text> component.
The render function in each component can only have one component in its return, but the component there can have multiple child components.
2.1.2 Variables
There are two kinds of variables in React Native: Props and state-variables.
Props, short for Properties, are given to components upon their creation and act as variables for that instance of the class. Props are external variables that can be used within functions and as parameters for components displayed in render function or even passed down as props to other child component
Figure 1: React Native code.
classes. Props cannot be changed during the lifetime of a component and are instead reinitialized when the component is re-rendered.
State variables are variables that are meant to change and keep information during runtime. These variables should generally be initialized inside the state variable inside a class constructor and therefore are an internal variable.
These variables are changed by calling setState function and reinitializing the variable with new values. Components that use variables set within state are re-rendered when the variable is changed, which will also re-render any child components of those components as a result.
2.1.3 History
React Native was developed in the summer of 2013 when Facebook
organized an internal hackathon. The hackathon was organized to perfect a prototype version of React, as Jordan Walke had discovered a way for generating iOS UI elements. React Native was announced by Facebook at Facebook’s annual developer conference (F8) to be opensource and available on GitHub. Following this announcement React Native has attracted almost two thousand active contributors to develop it. React Native is still updated constantly as a result, having even gained the support of Microsoft and Samsung during the year of 2016. (Shoutem, Oct 3. 2016)
2.1.4 Expo
One popular way to create React Native apps is a tool called Expo, which is completely free to code and test applications with as opposed to Apple Developer Accounts that can cost even 99$ a year (Expo, Frequently asked Questions, q. 5). Expo allows the developer to easily run their app on their physical mobile platforms, instead of emulators, without having to install the app-in-development each time.
Another reason Expo has gained popularity is that it handles several
configuration steps that would be daunting to do manually for developers with non-mobile background.
Expo also makes accessing of many platform-dependent systems very simple, such as camera usage and location tracking without the need to implement
these features from different open source packages. While also easing and simplifying the publishing and updating of an app, but despite all its benefits, it has drawbacks such as inability to add native platform code, which can be avoided by either creating a normal React Native project when beginning a project, or by simply detaching from Expo with an existing project, resulting in the same end result as if the app would have been made outside of Expo.
Expo does not come with any innate text editor for actual coding, but instead allows the developer to use any text editor of their choice, while working as a server for running the resulting code on the platform chosen by the developer without any need for using Xcode for iOS or Android studio for Android (Abbott and Co, 2018, p. 12).
2.2 Heroku
“Heroku is a platform-as-a-service (PaaS) that has plenty of opinions on how you should run your code.“ (Schneeman, R. & Co. p. 4). A PaaS is one of many ways to deliver hardware and software tools to users as a service.
Heroku is a cloud platform service based on containers. It is advertised to be elegant, flexible, easy to use and is used by developers for scaling, managing and deploying mobile and web apps. The platform is fully managed for
providing developers freedom from distracting server, infrastructure and hardware maintenance. Heroku is designed to provide tools, services, workflows and polyglot support to increase developer productivity.
Heroku Enterprise expands the choices available for easy linking of open- source, third-party, and custom analytics. (What Is Heroku?, Heroku.com 2018a)
Thanks to Being a Salesforce company, Salesforce and Heroku are tightly integrated for seamless data synchronization, which allows companies to create apps that span both platforms (What Is Heroku?, Heroku.com 2018b).
2.2.1 Dyno
Apps on Heroku run on runtime containers called Dynos. Dynos allow multiple instances of an app to run simultaneously without intersecting, while taking
client requests and giving out responses. Each dyno is isolated from other dynos, which means that a dyno failing will not affect other dynos.
Consequently, the number of requests an app can handle is relative to the number of dynos it is running on, while large apps may run on several dynos at once. Some of which may be doing background processes like sending email.
Since Heroku has numerous different applications hosted on itself, it uses special routers that handle requests by carrying out a lookup on the requested URL and then locating the requested applications code. When the code is found a request is fired to it, which prompts the application to handle the request. If the responding application hangs for whatever reason, the Heroku router will simply return a timeout error after 30 seconds pass. Dynos that fail due to hardware or some other causes are automatically stopped and
restarted in addition to being restarted once every 24 hours. (Schneeman, R.
& Co. c. 3)
When code is pushed to Heroku, it will be compiled on a dyno that is fired up automatically. All dynos have an identical base image of pre-existing software, that needs to have enough functionality for installing dependencies and
running uploaded code. The OS and other Software contained on the base image is all available as open source for maximum portability and
compatibility. This system makes updating of components quick and seamless for Heroku Engineers to complete, resulting in no noticeable impact on
running applications.
The uploaded code will be used with a dyno’s base functionality and a buildpack to determine all the requirements for running the application, followed by storing of a snapshot of the complete product for later use if executed successfully. The snapshot is called a slug, and it can be used to initialize new instances of the app on new dynos. In the case of the code being an update, the dynos running the older version of the application will be sent a kill command to shut themselves down, followed immediately with bringing the new dynos online and ready to operate. (Schneeman, R. & Co. c.
3)
2.2.2 Buildpack
BuildPacks are collections of open source scripts, that translate several programming languages to forms that Heroku can understand by installing dependencies, manipulating assets, customizing software and completing other required operations for running apps. Some of the standard buildpacks can configure code for Ruby, Java, Python and NodeJS, but there are
numerous other standard and user made buildpacks for other languages.
Heroku users are free to customize and create their own build packs for those cases, where one of the standard build packs would not work. Heroku can automatically cycle through all standard build packs until it recognizes one that is able to build the newly uploaded code, but preferably is configured to grab a specific buildpack through project configuration page. (Buildpacks, Heroku Dev Center 2018a)
Determining which buildpack can run uploaded code is done by calling each buildpacks detect command, which in turn tries to find a compatible file:
NodeJS would try to find a JS file to run as an example. A buildpack returns 0 to Heroku when it successfully finds the corresponding file type. Heroku responds to this return by subsequently calling buildpacks compile function, which begins installing binaries, processing assets and turning different types of scripts and styles to their universal useable forms, such as javascript or CSS. (Schneeman, R. & Co. c. 3)
2.2.3 Heroku Connect
The Heroku Connect add-on shares data between Salesforce and Heroku Postgres, by using one-way or bi-directional synchronization between them with a simple point and click UI, which in turn lets apps that build with standard open source stacks, such as Node.js and Rails, access and modify the data in turn through accessing Heroku Postgres. (Heroku Connect, Heroku 2018c) Heroku Postgres is a normal database and as such can be accessed with standard SQL syntax. The accessing itself is authenticated with Oauth (Heroku Connect, Salesforce Trailhead 2018a).
Multiple differently configured Heroku Connect add-ons can be active for a single application, which can all be connected to separate or even a single Salesforce organization. Connecting multiple add-ons to a single organization can cause problems if the integration user on Salesforce’s side has more than ten concurrent queries, as exceeding the limit requires frequent re-
authorization with Salesforce, consequently pausing synchronization. The problem can be avoided by having multiple integration users, who each have one connection. (Heroku Connect, Heroku Dev Center 2018b)
2.2.4 Deploying of a Project to Heroku
To deploy a project to the Heroku Cloud platform, developers need a Heroku account for managing and creating projects. Git version control system and the Heroku Command Line Interface, or Heroku CLI, are also needed for uploading and handling of app versions.
A simple project is created with Git Bash application, which acts as a special command prompt, to create a package.json -file with the “npm init” command.
A package-json file contains general information about the app, such as the name of the app, its version, description, main file name, scripts and
dependencies. Dependencies to the file are added with “npm install [package]
–save” command, which installs and adds a chosen package as a dependency. Finally, the package.json file should contain version of the projects NodeJS, as doing so prevents conflicts between development and cloud -environments.
With everything configured and installed, the app would be run as a test with
“heroku local web” command and, if everything works as expected, all files except for node_modules, npm-debug.log, .DS_Store, and .env -files should be committed to git, followed by commands “heroku create” and “git push heroku master”. Projects are opened using the “heroku open” command and updated by following the normal Heroku git flow of “git add”, “git commit” and
“push Heroku master”.
2.2.5 History
Heroku as a company was founded in 2007 by James Lindebaum, Adam Wiggins and Orion Henry. Back then the three founders were working at a small web development agency, where they noticed how time spent deploying an application once it was build was not proportional. This observation stayed true after a while of developing applications with Ruby on Rails, which
shortened development time but not the deployment time. An idea was formed for improving application hosting in the same manner, in about six weeks of development, a prototype was ready: a simple platform, which was
straightforward to figure for developers and easy to deploy to. (Schneeman, R.
& Co. p. 2)
The platform was largely different from Heroku during the writing of this thesis, featuring major components such as a browser-based text editor for code editing, which was deployed and run immediately when saved. As time went on, Heroku found that an increasing number of users was more interested in application hosting than the web-based editor of the product. As a result, Heroku developed an API that could be used with Git for operations such as pushing of code to the Heroku platform. Over time the web-based editor was terminated, due to the growing use of the API. (Schneeman, R. & Co. c. 2)
Heroku was acquired by Salesforce.com on December 8, 2010 as a fully owned subsidiary of Salesforce.com, enabling Salesforce to accelerate the shift to a new era of cloud computing. Byron Sebastion, the CEO of Heroku at the time commented the sale: “We have a service that developers really love, and salesforce.com has the trust and credibility the most demanding
customers expect. Together, we will provide the best place to run and deploy Cloud 2 apps. We believe this is the winning combination to bring cloud application platforms into the mainstream of the enterprise”. (TechCrunch, 2010.)
2.3 Salesforce
Salesforce is a massive Customer Relationship Management (CRM) platform that hosts and develops many cloud based applications for service, sales,
marketing, and more. Their whole system is designed to be easy to set up and manage, even for non-IT experts. Salesforce has over 150,000 companies using their services worldwide thanks to its accessibility from anywhere anytime any device. (What is Salesforce?, Salesforce)
Most services also have a separate community of users from all over the world for connecting with each other, in addition to helping them in
understanding and utilizing their respective services.
2.3.1 Trailhead
Salesforce has a massive educational platform called Trailhead, which is a gamified set of tutorials accessible on-demand. Trailhead’s purpose is to make learning of everything related to Salesforce easy and fun. Tutorials and new features are often accompanied by the presence of Astro, who can be seen on the Figure 2: Astro, the guide to everything Salesforce below.
Figure 2: Astro, the guide to everything Salesforce
Trailhead is comprised of over 400 different modules that each teach something useful for Salesforce users, whether they are business users, developers or administrators. Each module comes in different levels of difficulty from beginners to advanced level and usually consist of many 5 minute to 1 hour units that go over their whole subject matter from basics to
optimisations. Each module is completed by either answering several multiple- choice questions, or an exercise that uses information gained in the module.
Several e-books that previously gave information about Salesforce have been replaced by Trailhead over time, which is noticeable when searching for these e-books and finding them to be deleted.
2.3.2 Sales Cloud
Sales Cloud aims to centralize all information about customers and
interactions with them to one place, making it much easier to prioritise and decide. It is one part of the customer relationship management (CRM) system offered by Salesforce, that can be accessed anywhere with any online device at any time. Because of this, sales people can do their job more efficiently, without a need for sitting at a desktop computer and can instead use their tablets or smartphones for quick access to their data.
Many people mistakenly say Salesforce when they are talking about Sales Cloud, as it is Salesforce’s most popular product.
The Sales Cloud can be enhanced with a variety of automatic services for fast data handling, lead prioritizing, lead routing and even AI called Einstein, which can learn what deals and leads are more likely to end with good results. In turn allowing sales people to spend more time selling products, instead of managing data. Due to its customization capabilities, companies can better ensure that customer data relevant to their business is properly saved for later use. Sales Cloud is also easy to scale to fit a fast-growing company.
Other features of Sales Cloud include the ability to easily make automated reports about any data stored on the cloud, creation of clear paths for deals so no steps are forgotten and automated sending of email to sales
representatives for quick reactions, so no new deals are missed.
Figure 3: Dashboard, a collection of reports
Reports, as seen in the above Figure 3: Dashboard, a collection of reports, can all be looked at simultaneously by creating dashboards with few button presses. A dashboard is a collection of reports that makes it easy to observe.
Both the Service Cloud and Sales Cloud are on the same platform inside Salesforce, allowing service personnel to have all the info they need about their customers once sales representatives have passed them forward, providing a seamless experience for customers and building loyalty towards the company as a result.
2.3.3 Marketing Cloud
The Marketing Cloud allows marketers to deliver personalized consumer engagement using every channel and scale, from mobile to social, email, web and digital advertising all on one platform. It helps companies connect with their consumers, offer reminders, discover new audiences, provide real-time customer service and much more. Thanks to all the information that is shared and gained with it, companies can better respond to the needs of their
customers, which is made even easier when the AI can handle sending the right personalized adverts and updates, to the right people based on their history. Marketing Cloud sends about 1.5 billion targeted, personalized and
engaging emails each day. Everything in Marketing Cloud makes delivering a consistent experience for consumers throughout all channels easy.
The Marketing Cloud can also access data from all the other clouds, combine their data with its own and, as a result, create enriched customer profiles.
(Marketing Cloud Basics, Salesforce Trailhead 2018c)
Sending just the right kind of emails and other messages is also simplified with Email Studio, which is seen on the Figure 4 below, Mobile Studio and Journey Builder.
Figure 4: Email Studio helps marketers
The Email Studio allows marketers to drag and drop components into an email, ensuring fast creation of personalized emails for different customers.
Mobile Studio can be configured to send push notifications and SMS
messages to customers automatically at certain times or for certain actions in addition to allowing two-way communication with videos, audio and pictures.
(Marketing Cloud Products, Salesforce Trailhead 2018d)
Figure 5: Journey Builder view for easy loyalty program management
Journey Builder is a fast tool for creating automated processes for keeping in touch with a customer. The tool can create event chains, as seen in the above Figure 5, that can tell customers of some specific products or services they could sign up for, remind them at a specified date and reactions to customers taking some of those services with messages, or even giving out coupons and other benefits. (Marketing Cloud Products, Salesforce Trailhead 2018d)
2.3.4 Commerce Cloud
The Commerce Cloud allows companies to better control their business to customer (B2C) and business to business (B2B) sites with all kinds of features designed to make shopping experiences for buyers, and management of the systems for sellers, easy and pleasant.
Figure 6: Einstein, the genius future seeker and mascot of AI, analytics and predicting
One of the bigger features on the Commerce Cloud is the large amount of Einstein features, that can be used to create amazing websites for selling and buying. Einstein features are usually accompanied by The Einstein mascot seen on the above Figure 6 and include features such as:
• Einstein Product Recommendations for offering relevant products to customers, based on machine learning of their shopping habits.
Resulting in a pleasing experience when the customer’s interests are catered to.
• Einstein Search Dictionaries for increasing search term coverage by collecting site search data for terms that are not yet covered by the retailer’s keyword list, and then recommending synonyms and other terms that could be added to the list. This saves retailers the trouble and time of going over long spreadsheets, while making guesses of what they’d want to add.
• Einstein Predictive Sort allows automatic personification for ordering products shown on each category or search page. This allows sites to show customers the most relevant products first, based on data gathered from their past buying and browsing behaviours. With the best products for respective shoppers being first, especially mobile users will have a better experience, due to not having to scroll and click through several pages, while looking and finding their products.
The Commerce Cloud helps retailers by showing them relevant information about different customer activities, such as orders and carts, and connects the data to Sales Cloud for sales representatives and managers to utilize. Thanks to its features, The Commerce Cloud helps both B2B and B2C businesses immensely, by providing them the solutions they need to sell services or products online. (Commerce Cloud Features, Salesforce Trailhead 2018b)
2.3.5 Service Cloud
The Service Cloud is Salesforce’s dedicated customer service platform, that gives customer service agents quick access to everything that might be
needed for solving customer cases, on one page. Information may include but is not limited to past customer preferences, useful articles and topics.
The platform delivers seamless user experience across multiple channels with the help of Omni-Channel Supervisor, and its live feed of information.
Information gained from the Omni-Channel Supervisor can then be used to escalate time-sensitive cases to higher priority, while assigning cases to the right experts and available agents, in addition to monitoring wait times.
Service cloud can be armed with macros for saving time by automation of repetitive tasks and even artificial intelligence for handling simple cases, enabling customers with the power to create and resolve cases by
themselves, while allowing them to still escalate cases for more personal support.
The Service Cloud provides service agents and customers a large knowledge base, which contains all kinds of articles solving different problems from
frequently asked questions to resetting product settings to defaults, or even for some obscure problems, that affect one in a thousand cases.
Customer Service agents can also utilize the LiveMessage tool to connect and communicate with customers through SMS or Facebook Messenger, without ever leaving their service console, thus having access to all the useful data for resolving the case. (Service Cloud Platform: Quick Look, Salesforce Trailhead 2018e)
3 MEANING AND GOALS
3.1 Researching React Native
The main goal of this thesis is to research the use React Native, which has risen in popularity due to its versatility and readability for mobile app
development. To achieve this goal, the Boikot It -app shall be created.
The creation of a simple React Native app from scratch should provide adequate challenge for a beginner in the field of mobile app development.
Experience and knowledge in different programming techniques is also valuable to many technical companies today.
3.2 Study of utilizing Heroku
Secondary goal is to learn the use of Heroku in mobile development, due to its modularity and thus easy ways of adding Facebook and Google logins as modules. The know-how of using Heroku could also be useful for Punos Mobile Oy in future projects. Heroku makes connecting of an app to
Salesforce data easier, due to them being one of the many platforms owned by Salesfoce with lots of support.
Knowing how to work with Heroku can prove itself as a valuable ability, as it will make hosting of apps easier through their cloud platform.
3.3 Use of Salesforce as a database
While Punos Mobile is still supporting their Meeting Assistant App on
Salesforce Cloud, the retrieval and saving of data from outside the cloud has gone largely unexplored. As such, the third goal is to explore the Salesforce app programming interface (API) for storing data on an app that resides outside the Salesforce cloud services.
Proficiency with Salesforce API would be a useful skill, as it allows offloading of most hardware requirements for database hosting, updating and retrieving
to their pre-existing cloud platform which can cut down development costs in the future.
4 CREATION OF THE APP WITH REACT NATIVE
Researching of a subject is much simpler to focus on when clear goals are made. This section will go over the process during which the “Boikot It!” app is developed. The app is planned to be an app that allows its users to select restaurants they’ve been disappointed by on a map, add a reason why and a time for how many days they would not want to go there again.
In the end, users would be able to share said boycotts with their friends.
Next is an early Figure 7 of how the app’s views would be traversed:
Figure 7: App’s normal use flow draft
Many of the first steps were realized with the help of Facebooks official React Native GitHub documentary guide. The guide suggested the use of Expo as a good way to learn, since it massively simplifies the process of starting mobile development with React Native. Additionally, there was a requirement of installing Node.js, which adds the commands that start with npm on windows systems, allowing easy installation of new Javascript packages to the project.
Therefore Node.js is one of the most valuable tools for Javascript mobile app development.
4.1 Getting the app visible on a mobile device
The project was begun by installing Expo onto a computer, followed by installing of the Expo app on a mobile device. Using Expo also required making a developer account for their service, which is free for small projects.
By following the guide, a simple view was created to be loaded as the first thing when the app would be run.
The first thing to do to get something visible on the screen is to make a class with a render function, that returns one component such as a <View>, which will then be rendered on the screen when the app is run.
A class is defined as follows: “class [name] extends React.Component { Deconstruct and initialize props and other variables, define functions and the render function }”. Once these steps were complete, running the project is done with the command “expo start”, after which the mobile device connects by reading a QR code provided by the command.
4.2 Buttons
At first <button> components were used for the buttons on the page, but soon it was discovered thanks to the guide that using <TouchableOpacity>
components would be better, as they are much more versatile in terms of customization, even if they lack the same default looks that <button> has.
The page was made with <View>, <TextInput> and <TouchableOpacity>
components, with <TouchableOpacity> being later replaced by a custom class navigation button, to make it easier to handle button presses for navigating between views. Resulting look can be seen on the Figure 8 below.
Figure 8: Early look of the homeScreen
Simply having buttons that have no functionality is hardly enough for a proper app to work. Therefore the binding of actions needed to be learned for adding functions to, for example, buttons, which is done differently than inside normal Javascript: instead of simply creating a function and calling it in the button like
“onPress= function()”, the function would first be needed to be bound to a context such as the class that contains the button. After binding the function to the parent class, it could be called easily by prefixing the function call with
“this.”, which would run the function in the parent’s context. When a function was bound, adding it as a prop to a clickable component would call the bound function instead of creating a separate version of it temporarily for that
component. Functions that were never bound to the parent class would, eventually, become costly in terms of performance.
4.3 Navigation
Thanks to the knowledge of function binding, the first open source package was imported to the project. Packages for Javascript projects, like ones written in React Native, are installed by running the “npm install [package name]“
command, after navigating to the correct project folder, with the command prompt. After installation, the features needed from the packages are imported
in the following format: import { TouchableOpacity, View, TextInput } from React Native.
Following these steps, the react-native-navigation package was added to the project and the navigation functionality was imported from it. By following the instructions on the navigation packages own GitHub page, a navigator was created to hold all the names of the different pages in the app, accompanied by a class that would always be loaded first and open the navigator. The navigator when loaded this way would redirect the application to the home page that was assigned as default value, as seen on Figure 9.
Figure 9: Navigation paths
With the navigator in place, the navigation buttons could be configured to order the navigator to change page based on target page’s name, that would be given as a prop to the button when it is created. This required passing of a function’s reference as a prop to the button, which in the end resulted in the button becoming incredibly versatile, as It could now be used on any page inside the app for opening different screens.
Towards the end of the project, it was discovered that values can easily be passed to other views in a fashion reminiscent of passing props during navigation by calling navigate function like this: navigate(pageName, {variable1name = variable1, variable2name = variable2 }
4.4 Ordering of classes
During the process of creating all the pages that the app would eventually show, the classes were arranged into a logical order: The classes that were whole pages would all have “Screen” at the end of their names and be the
topmost classes inside the apps source code, while all those classes used solely by one other class, would be located directly after those classes. Lastly, classes that were used in multiple pages would be positioned at the bottom, after all other classes.
Figure 10: ordering of classes
In this quickly made example Figure 10, different color lines were used to illustrate the locations of each class in the hierarchy. As can be seen, the first class contains components red, blue and black. Red and Blue class definitions can be seen right below the FirstScreen, but Black is located all the way down after Purple, because it is also used by the SecondScreen. This way it should
be easier to know that modifying Red or Blue will only affect the FirstScreen, but modifying Black will also affect the SecondScreen.
4.5 Slider and Multiline TextInput
After the reodering of classes was complete, the boycotting page was made.
On this page the newly added components were slider and multiline textInput.
The multiline input turned to be easy, as it simply was a matter of giving an ordinary textInput a parameter telling it that it is multiline.
The slider was not so simple however: At first it looked like it was not working at all as once moved, it would immediately go to a value of 1, this was luckily a mere typo.
Once the slider itself was working as expected, some functionality was added to its onValueChange event, but it turned out that the value of the slider could not be changed anymore. This was simply caused by it updating itself to match a variable intended to hold the chosen value, but instead of changing the variable first, it would correct itself to match it and then change the variable. The slider was therefore changed to have an “initialValue of
[variable]” instead “value of [variable]”, so it would not depend on the variable after first being loaded, and instead would simply initialize itself with it and update the variable afterwards. Following Figure 11 has the multiline textInput and the slider below it at its default value:
Figure 11: The boikotSubmitScreen
4.6 Google Maps Implementation
The implementation of Google Maps unfortunately required focusing on only one operating system or writing separate map related code for both iOS and Android. A decision was made to implement this functionality only on Android, thanks to it being much friendlier for developers than iOS. Regardless of which side would’ve been chosen, the additional configuration required for Google Maps was confusing to the eyes of a beginner: Several files would need a few additional lines, but the locations of said files were never described on the official React Native Maps -installation guide while the project structure had several files that could be “correct”.
After a lot of tinkering, the process had reached a point where the API tokens for accessing the online Google Maps data were successfully generated.
However, said tokens were stored inside an encrypted file, that took a lot of time to open properly. Problems were caused due to not having java keytool- commands installed globally, which resulted in a hunt of several hours. Firstly, finding what exactly enables said commands, whether it was installed or not, and whether they could be enabled in the project directory. Secondly, since
the necessary programs were installed, how could the command be called and what extension words it would require were hard to find in addition to being partly cryptic to a beginner. The end result was that the command prompt would have to be first navigated to java/jdk/bin directory, then the command: “keytool -list -v -[alias keyname] -keystore [filepath]” would have to be typed, returning the decrypted API keys for the app.
With the installation complete, the Google Maps view could finally be added to the app. The <MapView> component provided by the package can take
coordinates and a few additional decimals to its initialRegion variable to determine the starting point and zoom levels of the view. Additionally, a
function on the component called onRegionChange was utilized for updating a state variable in the screen class, but the function turned out to cause some stutter when the map was dragged. Therefore, the function was changed to onRegionChangeComplete function, which is only called once the user stops dragging the map, instead of onRegionChange being called everytime the map moves during drag, resulting in a huge performance increase. The map is visible on the below Figure 12:
Figure 12: MapView in action
Naturally due to the nature of the app, some custom markers were a
necessary addition to the map. Initially some unexplained errors appeared due to following a slightly outdated guide: instead of markers being declared
simply as <Marker>, they were supposed to be declared as
<MapView.Marker>. Some minor research after trying to change marker colour also revealed that the options were limited to these colours:
• red (default)
• tomato
• orange
• yellow
• gold
• wheat
• tan
• linen
• green
• blue / navy
• aqua / teal / turquoise
• indigo
• violet / purple / plum
4.7 Modals
With map and markers visible, it was time to add something to work as a popup when a marker is touched, showing restaurants at that address and navigating to a separate view page, which shows details of boycotts. Modals were discovered while looking for open source package of popup, <Modal>
components are components that cover the whole screen when they are visible, and even have an animation for sliding to cover the screen. The modal’s visibility is handled by a setState function on the mapScreen that toggles a Boolean state variable: when the variable is false, the modal is hidden, with true the modal is visible. Markers and a button on the modal were given onPress functionality to call the setState function, toggling modal
visibility. Some functionality was later added so that pressing a marker would set a variable for keeping restaurant name, which would then be shown on the modal. The modal contains two buttons: one for going to boycott view of the restaurant and another for hiding the modal.
Originally the modal covered the whole view with a white background, which was later changed to be invisible, keeping the map visible in the background.
Below the two visible buttons is one invisible button that has the same functionality as Hide, resulting in the Figure 13 with following look:
Figure 13: The Modal in action
4.8 Repeating components
After all screens were made accessible by the arrival of the modal, it was time to show multiple markers on the map by using an array. This is done by
making a declaration that uses “array.map()” Javascript function to return the wanted amount of components like this:
{listOfNames.map(name => {
return <Text>{name.lastName}</Text>
})}
The above example code iterates through listOfNames array, with the currently iterated object referenced as name, then returns one <Text>
component that is filled with lastName value inside the name object with each iteration.
Each component also needs a unique key value, as if no key values are specified, the render function will render every component again, while having unique keys allows the render function to only re-render those components
that were changed, increasing performance. Initially the key value was
marker’s restaurant’s name, but after some testing it proved inadequate when some cities had two or more Hesburgers in close proximity. The key was changed to name + latitude coordinate, which should make overlap chance very small. Following is Figure 14 of the end result:
Figure 14: Markers on a map
During the creation of marker iteration, a good practice was discovered: the deconstruction of props given to a component. Deconstructing a prop simply means creating a list of variables named identically to the ones gained from props inside the child component. This practice has two very useful benefits:
developers can quickly see what variables the component is supposed to be given and using of said props is massively simplified, as they will not need this.props before the variable name when accessed.
4.9 Permissions, Location and Yelp
The app also needed access to the location of the device for querying the nearby restaurants and showing them as markers. Expo came to the rescue with its built-in version of permissions React Native package. Aside from importing the functionality from Expo, the app needed specifications of what permissions it could ask for inside it’s AndroidManifest file, in this case said permissions were ACCESS_FINE_LOCATION and
ACCESS_COARSE_LOCATION.
An extremely simple page with little text and one button was made that, onload, would ask permissions from the device, try to get the device location and when successful, navigate to the map page with those coordinates. All this can be seen on Figure 15:
Figure 15: Permissions and location
Next step was getting nearby restaurants based on location, which was done after little bit of research by using Yelp’s API due to it being simple to use and free. Yelp was initialized in much the same fashion as Google Maps was:
Yelp’s opensource package was first downloaded and installed, an account for Yelp Developers was made and a project was created. Yelp then
automatically generated an API key for access authentication, which was added to the app’s configuration based on a detailed guide provided by Yelp.
Finally, a function was created on the map page, that would be called when the map had loaded and request restaurant locations and names from Yelp, then saving the resulting list to the app as seen on the Figure 16 below:
Figure 16: Calling Yelp functionality and saving results
These processes were the first occasions the app had to wait for answers from outside the app, which meant the addition of asynchronous functions.
Asynchronous functions are commonly needed when an external source is used for obtaining data as otherwise, some functions may simply call for external data and then immediately perform their next actions without waiting for the data to return. Asynchronous functions can be declared as
[functionName] = async () = {} like can be seen on Figure 16, and are called by prefixing the call with await, which signals the app that this process needs to wait for a reply before proceeding.
The process of converting coordinates to addresses was also discovered in the form of an Expo function: Expo.Location.reverseGeocodeAsync(location).
This function would be called when the user is moving to the boycotting page, while its return object would be used for the initial value of the address input field. Boycott page was configured to replace words such as unnamed with spaces for a nicer outlook when near unnamed roads.
5 FUTURE DEVELOPMEMNT
Future development requires ejecting the project from Expo before it can be uploaded onto Heroku, which means all elements and functions imported from Expo itself will no longer work. To fix this problem, several elements will need their original packages installed and added as dependencies to the project, then some of them will require changing their function calls due to slight differences between those included in Expo and their latest open-source versions.
The <mapView> and <Marker> elements should require next to no changes as they should be identical. Constants would be changed to Platform and would require changes to how several device properties would be accessed.
Location would be accessed using “navigator.geolocation”, which is a global package that does not need to be imported (React Native Documentation, 2018. Facebook). Functions like “Location.getCurrentPositionAsync({})” would have to be changed to forms such as
“navigator.geolocation.getCurrentPosition([success function], [error function], options])” and all functions reliant on them would have to be modified. Last change in the app would be changing of Permission to React Native
Permissions package, which would again change several functions significantly.
After imports are fixed, the app would be ejected from Expo using “Expo eject”-command and choosing standalone React Native when prompted.
With ejection complete, Heroku should be configured to use a React Native buildpack as seen on Figure 17.
Figure 17: Adding a buildpack to Heroku
After adding the correct buildpack from GitHub, a static.json -file would need to be created in the root folder of the project. This should inform Heroku to build the app on the next repository push to build the app using the selected buildpack. The static.json file contains information for the root directory and the path where the main file is located. Should errors pop up during build, they may be fixed by deleting a yarn.lock file inside the repository before trying again.
Once the app is successfully build on Heroku, it would be time to install the add-ons Auth0 and Heroku Connect. Auth0 is an add-on for handling login services and security and is installed on Heroku by running the command
“heroku addons:add auth0 --type=nodejs”, which adds an Auth0 NodeJS compatible version to the project. A callback URL will also be needed as an environment variable, which is added with “echo
‘\nCALLBACK_URL=http://localhost:5000/callback’” -command followed by installing Passport and Passport-Auth0 using “npm install passport passport-
auth0 --save” -command. Next would be creation of Passport.js file for login handling with the addition of Auth0 widget to the app. Last step for
authentication would be to run this command: “heroku addons:open auth0”, which opens the Auth0 configuration, where the callback URL would be filled as a registered URL underneath Auth0 configuration page. The login system should now be operational and useable for authenticating connections.
Last steps would be to add the Heroku Connect add-on to the project,
connecting with Salesforce connect to access a Salesforce organization and configuring the app to save boycott data to the Salesforce database.
6 CONCLUSIONS
Several errors during the project were vague and confusing with the worst offender having been this: “invariant violation:invariant violation: Element type is invalid: expected a string” during the process of adding markers to the map.
Said error suggested checking of render method of the mapScreen-class and gave no clue about which part of it was wrong. The search took some time but ultimately turned out to be a wrongly declared <Marker> component.
The choice of using Expo at the start of the thesis was helpful as it allowed skipping headaches of learning graddle and maven configuration, translating code to both iOS and Android, being simple and fast to setup and test code with and having excellent documentation. The decision did later backfire by being an obstacle for upload of the project to the Heroku Cloud platform, mainly due to several configuration related errors that were caused by
misunderstanding guides. Android Studio migrations were all but unsuccessful due to having several back-to-back graddle, package and SDK version errors that revealed even worse errors as they were fixed, forcing a reluctant return to using Expo. Despite this, Expo is a handy tool for creating React Native projects that do not need any extra native code to work and as such might be used in the future for some projects.
Only the most important goal of researching the use of React Native was achieved during this thesis with the Boikot It! -app being overall ready for
Heroku deployment. However, the second goal of studying the Heroku Cloud platform was partially completed in the form of documentation for later use, while the use of Salesforce as a Database was merely scratched. Results were satisfying regardless and should allow further development if needed.
SOURCES
Abbott, D. Djirdeh, H. Accomazzo, A. Shoemaker, S. California: Fullstack.io.
2018. Fullstack React Native. Available at: https://www.fullstackreact.com/, [Accessed: 5 December 2018].
Espake Patrick. Packt publishing. Learning Heroku Postgres Available at:
https://www.oreilly.com/library/view/learning-heroku-
postgres/9781782173458/, [Accessed: 28 November 2018].
Expo. Frequently asked questions. Official Expo documentation. Available at:
https://docs.expo.io/versions/latest/introduction/faq.html, [Accessed: 13 November 2018].
Expo. Quick Start. Official Expo documentation. Available at:
https://docs.expo.io/versions/latest/
Official Expo documentation, [Accessed: 13 November 2018].
Galvin Technologies. 2018. How To Effectively Manage Your Sales Pipeline Using These 7 Powerful Salesforce Dashboards. Available at:
https://galvintech.com/effectively-manage-sales-pipeline-using-7-powerful- salesforce-dashboards/, [Accessed: 29 November 2018].
Gvozden, A. 2017. Deploying any React app on Heroku. Medium Corporation.
Available at: https://hackernoon.com/deploying-any-react-app-to-heroku- 1ee6db9b97d3, [Accessed: 29 November 2018].
Heroku. 2018a. What is Heroku?. Available at:
https://www.heroku.com/about, [Accessed: 29 November 2018].
Heroku. 2018b. What Is Heroku?. Available at:
https://www.heroku.com/what#salesforce, [Accessed: 30 November 2018].
Heroku. 2018c. Heroku Connect. Available at:
https://www.heroku.com/connect, [Accessed: 30 November 2018].
Heroku Dev Center. 2018a. Buildpacks. Available at:
https://devcenter.heroku.com/articles/buildpacks, [Accessed: 29 November 2018].
Heroku Dev Center. 2018b. Heroku Connect. Available at:
https://devcenter.heroku.com/articles/heroku-connect, [Accessed: 28 November 2018].
Honjo, K. 2017. Meet the Trailhead Characters: Astro, Codey and Friends.
Salesforce.com. Available at: https://www.salesforce.com/blog/2017/07/meet- trailhead-characters.html, [Accessed: 30 November 2018].
Murray, N. 2018. 30 Days of React. California: Fullstack.io Available at:
https://www.fullstackreact.com/30-days-of-react/day-13/, [Accessed: 5 December 2018].
Newton, M. 2018. Medium Corporation. Understanding Expo for React Native.
Available at: https://hackernoon.com/understanding-expo-for-react-native- 7bf23054bbcd, [Accessed: 13 November 2018].
React Native 0.57. Facebook. Build native mobile apps using Javascript and React. Available at: https://facebook.github.io/react-native/, [Accessed: 18 October 2018].
Salesforce. What is Salesforce?. Available at:
https://www.salesforce.com/products/what-is-salesforce/, [Accessed: 30 November 2018].
Salesforce Trailblazer Community. 2017. Email Studio March 2017 Release Notes. Available at:
https://help.salesforce.com/articleView?id=mc_rn_march_2017_es.htm&type=
5, [Accessed: 30 November 2018].
Salesforce Trailhead 2018a. Heroku Connect. Available at:
https://trailhead.salesforce.com/en/content/learn/modules/salesforce_heroku_i ntegration/integrating_with_heroku_connect, [Accessed: 28 November 2018].
Salesforce Trailhead 2018b. Commerce Cloud Features. Available at:
https://trailhead.salesforce.com/content/learn/modules/cc_cccapability/cc_ccc apability_cceinstein, [Accessed: 30 November 2018].
Salesforce Trailhead 2018c. Marketing Cloud Basics. Available at:
https://trailhead.salesforce.com/content/learn/modules/mrkt_cloud_basics/mrk t_cloud_basics_get_started, [Accessed: 30 November 2018].
Salesforce Trailhead 2018d. Marketing Cloud Products. Available at:
https://trailhead.salesforce.com/content/learn/modules/mrkt_cloud_studios_bu
ilders/mrkt_cloud_studios_builders_learn_studios, [Accessed: 30 November 2018].
Salesforce Trailhead 2018e. Service Cloud Platform: Quick Look. Available at:
https://trailhead.salesforce.com/en/content/learn/modules/service-cloud- platform-quick-look, [Accessed: 30 November 2018].
Schneeman, R. Middleton, N. O’Reilly Media, Inc. 2013. Heroku: Up and Running. Available at: https://www.oreilly.com/library/view/heroku-up- and/9781449341381/, [Accessed: 5 December 2018].
Shoutem. Medium Corporation. 2016. A brief history of React Native.
Available at: https://medium.com/react-native-development/a-brief-history-of- react-native-aae11f4ca39, [Accessed: 23 November 2018].
TechCrunch. 2010. Salesforce.com Buys Heroku For $212 Million In Cash.
Available at: https://techcrunch.com/2010/12/08/breaking-salesforce-buys- heroku-for-212-million-in-cash/?guccounter=1, [Accessed: 7 December 2018].
Wilson, I, 2018. Building a Coffee Map with React Native and Expo.
Medium Corporation. Available at: https://blog.expo.io/building-a-coffee-map- with-react-native-and-expo-a00b8f60a4c6, [Accessed: 10 November 2018].
Wong, T. Kao, L. Kaufman, M. John Wiley & Sons, Inc. 2015. Salesforce.com For Dummis. Available at: https://www.amazon.com/Salesforce-com-
Dummies-Tom-Wong/dp/1119176093, [Accessed: 30 November 2018].
LIST OF FIGURES
Figure 1: React Native code. React Native 0.57. Facebook. Build native mobile apps using Javascript and React. Available at:
https://facebook.github.io/react-native/, [Accessed: 18 October 2018].
Figure 2: Astro, the guide to everything Salesforce. Honjo, K. 2017. Meet the Trailhead Characters: Astro, Codey and Friends. Salesforce.com. Available at:
https://www.salesforce.com/blog/2017/07/meet-trailhead-characters.html, [Accessed: 30 November 2018].
Figure 3: Dashboard, a collection of reports. Galvin Technologies. 2018. How To Effectively Manage Your Sales Pipeline Using These 7 Powerful
Salesforce Dashboards. Available at: https://galvintech.com/effectively-
manage-sales-pipeline-using-7-powerful-salesforce-dashboards/, [Accessed:
29 November 2018].
Figure 4: Email Studio helps marketers. Salesforce Trailblazer Community.
2017. Email Studio March 2017 Release Notes. Available at:
https://help.salesforce.com/articleView?id=mc_rn_march_2017_es.htm&type=
5, [Accessed: 30 November 2018].
Figure 5: Journey Builder view for easy loyalty program management.
Salesforce Trailhead. Marketing Cloud Products. Available at:
https://trailhead.salesforce.com/content/learn/modules/mrkt_cloud_studios_bu ilders/mrkt_cloud_studios_builders_learn_studios, [Accessed: 30 November 2018].
Figure 6: Einstein, the genius future seeker and mascot of AI, analytics and predicting. Honjo, K. 2017. Meet the Trailhead Characters: Astro, Codey and Friends. Salesforce.com. Available at:
https://www.salesforce.com/blog/2017/07/meet-trailhead-characters.html, [Accessed: 30 November 2018].
Figure 7: App’s normal use flow draft. Kaunismäki, E. 2018. A Paint draft of the apps screens and use flow. PowerPoint-diashow 7.10.2018.
Figure 8: Early look of the homeScreen. Kaunismäki, E. 2018 Early picture of the homeScreen. 26.11.2018.
Figure 9: Navigation paths. Kaunismäki, E. 2018 navidef. 3.12.2018.
Figure 10: ordering of classes. Kaunismäki, E. 2018 A quick example of class ordering. 25.11.2018.
Figure 11: The boikotSubmitScreen. Kaunismäki, E. 2018 Picture of the boikotSubmitScreen. 26.11.2018.
Figure 12: MapView in action. Kaunismäki, E. 2018 Picture of the mapScreen.
26.11.2018.
Figure 13: The Modal in action. Kaunismäki, E. 2018 Picture of the mapScreen with modal. 26.11.2018.
Figure 14: Markers on a map. Kaunismäki, E. 2018 Picture of the mapScreen with markers. 26.11.2018.
Figure 15: Permissions and location. Kaunismäki, E. 2018 Picture of _getLocationAsync function. 4.12.2018.
Figure 16: Calling Yelp functionality and saving results. Kaunismäki, E. 2018 Picture of _getRestaurants function. 26.11.2018.
Figure 17: Adding a buildpack to Heroku. Gvozden, A. 2017. Deploying any React app on Heroku. Medium Corporation. Available at:
https://hackernoon.com/deploying-any-react-app-to-heroku-1ee6db9b97d3, [Accessed: 29 November 2018].
Annex 1/1 Normal use flow after development
